.noise {
  position: fixed; inset: 0; z-index: 70; pointer-events: none; opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}
.scan {
  position: fixed; inset: 0; z-index: 69; pointer-events: none;
  background: repeating-linear-gradient(transparent 0 2px, rgba(0,0,0,.12) 2px 3px);
  opacity: .18;
}
.hh-scene {
  position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  background:
    radial-gradient(900px 500px at 50% 8%, #0b3a72 0%, transparent 50%),
    linear-gradient(#071428 0%, #050a18 42%, #030712 100%);
}
.hh-scene .fog {
  position: absolute; left: -10%; right: -10%; bottom: -8%; height: 42%;
  background: radial-gradient(ellipse at center, rgba(0, 174, 239, 0.35), transparent 70%);
  filter: blur(28px);
  animation: fogdrift 12s ease-in-out infinite alternate;
}
.hh-scene .floor {
  position: absolute; left: -20%; right: -20%; bottom: -18%; height: 55%;
  background-image:
    linear-gradient(rgba(0, 174, 239, 0.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 174, 239, 0.16) 1px, transparent 1px);
  background-size: 48px 48px;
  transform: perspective(420px) rotateX(68deg);
  mask-image: linear-gradient(to top, #000 20%, transparent 90%);
  animation: grid-move 18s linear infinite;
}
@keyframes grid-move {
  from { background-position: 0 0; }
  to { background-position: 0 48px; }
}
@keyframes fogdrift {
  from { transform: translateX(-4%) scale(1); opacity: .7; }
  to { transform: translateX(6%) scale(1.08); opacity: 1; }
}
.hh-scene .orb {
  position: absolute; border-radius: 50%;
  filter: blur(40px);
  mix-blend-mode: screen;
}
.hh-scene .o1 {
  width: 42vw; height: 42vw; max-width: 480px; max-height: 480px;
  left: -8%; top: 8%;
  background: radial-gradient(circle, rgba(56,189,248,.45), transparent 68%);
  animation: orb1 18s ease-in-out infinite;
}
.hh-scene .o2 {
  width: 38vw; height: 38vw; max-width: 420px; max-height: 420px;
  right: -10%; top: 28%;
  background: radial-gradient(circle, rgba(168,85,247,.38), transparent 68%);
  animation: orb2 22s ease-in-out infinite;
}
.hh-scene .o3 {
  width: 32vw; height: 32vw; max-width: 360px; max-height: 360px;
  left: 35%; bottom: -8%;
  background: radial-gradient(circle, rgba(250,204,21,.18), transparent 68%);
  animation: orb3 16s ease-in-out infinite;
}
@keyframes orb1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(12%, 18%) scale(1.15); }
}
@keyframes orb2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-16%, -10%) scale(1.2); }
}
@keyframes orb3 {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-8%, -14%) scale(1.1); }
}
.hh-scene .beam {
  position: absolute; width: 2px; height: 140%;
  background: linear-gradient(transparent, rgba(56,189,248,.35), transparent);
  filter: blur(1px);
  animation: beamdrift 9s linear infinite;
  opacity: .45;
}
.hh-scene .b1 { left: 18%; transform: rotate(18deg); }
.hh-scene .b2 { right: 22%; transform: rotate(-14deg); animation-delay: -4s; animation-duration: 11s; }
@keyframes beamdrift {
  0% { transform: translateY(-20%) rotate(var(--r, 16deg)); opacity: .15; }
  50% { opacity: .5; }
  100% { transform: translateY(20%) rotate(var(--r, 16deg)); opacity: .15; }
}
.hh-scene .shoot {
  position: absolute; top: 12%; left: -10%;
  width: 140px; height: 2px;
  background: linear-gradient(90deg, transparent, #fff, #38bdf8);
  border-radius: 99px;
  box-shadow: 0 0 12px #38bdf8;
  animation: shoot 7.5s ease-in infinite;
  opacity: 0;
}
@keyframes shoot {
  0%, 78% { opacity: 0; transform: translate(0, 0) rotate(-22deg); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translate(110vw, 42vh) rotate(-22deg); }
}
.hh-scene .motes { position: absolute; inset: 0; }
.hh-scene .mote {
  position: absolute;
  left: var(--x);
  bottom: -8%;
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: #38bdf8;
  box-shadow: 0 0 8px #38bdf8;
  opacity: .55;
  animation: moteup var(--d) linear var(--delay) infinite;
}
@keyframes moteup {
  0% { transform: translateY(0) scale(1); opacity: 0; }
  12% { opacity: .6; }
  100% { transform: translateY(-110vh) scale(.3); opacity: 0; }
}
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 90;
  background: linear-gradient(90deg, #38bdf8, #facc15, #a855f7);
  box-shadow: 0 0 16px #38bdf8;
}

#boot {
  position: fixed; inset: 0; z-index: 100;
  background: radial-gradient(circle at 50% 42%, #0b3a72 0%, #071428 55%, #030712 100%);
  display: grid; place-items: center;
  clip-path: circle(150% at 50% 50%);
  transition: clip-path .95s cubic-bezier(.7,0,.2,1), opacity .8s;
  overflow: hidden;
}
#boot.go {
  clip-path: circle(0% at 50% 48%);
  opacity: 0;
  pointer-events: none;
}
.boot-fx { position: absolute; inset: 0; pointer-events: none; }
.boot-ring {
  position: absolute; left: 50%; top: 46%;
  width: 140px; height: 140px; margin: -70px 0 0 -70px;
  border-radius: 50%;
  border: 1px solid rgba(61,157,255,.35);
  animation: ringpulse 2.2s ease-out infinite;
}
.boot-ring.r2 { width: 220px; height: 220px; margin: -110px 0 0 -110px; animation-delay: .25s; border-color: rgba(212,160,23,.4); }
.boot-ring.r3 { width: 320px; height: 320px; margin: -160px 0 0 -160px; animation-delay: .5s; }
@keyframes ringpulse {
  0% { transform: scale(.55); opacity: .9; }
  100% { transform: scale(1.7); opacity: 0; }
}
.boot-beam {
  position: absolute; left: 50%; top: 0; width: 2px; height: 100%;
  transform: translateX(-50%);
  background: linear-gradient(transparent, #3d9dff, transparent);
  animation: beamflash 1.8s ease-in-out infinite;
  filter: blur(1px);
}
@keyframes beamflash { 50% { opacity: .15; width: 6px; } }
.boot-logo-wrap {
  position: relative;
  width: min(520px, 82vw);
  transform-style: preserve-3d;
  animation: logoRise 1.55s cubic-bezier(.16,1.2,.3,1) both;
  filter: drop-shadow(0 0 40px rgba(61,157,255,.45));
}
.boot-logo {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
}
.boot-scan {
  position: absolute; left: 0; right: 0; height: 28%;
  background: linear-gradient(transparent, rgba(110,200,255,.35), transparent);
  animation: scanmove 1.6s linear 2;
  pointer-events: none;
}
@keyframes scanmove {
  from { top: -30%; }
  to { top: 110%; }
}
@keyframes logoRise {
  0% { opacity: 0; transform: rotateY(-88deg) scale(.15) translateZ(-120px); filter: blur(18px) brightness(2.4); }
  40% { opacity: 1; transform: rotateY(16deg) scale(1.06); filter: blur(0) brightness(1.25); }
  70% { transform: rotateY(-6deg) scale(1.02); }
  100% { opacity: 1; transform: none; filter: none; }
}

.cinema { min-height: calc(100vh - 110px); display: flex; align-items: center; }
.cinema-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center;
  width: min(var(--max), calc(100% - 40px)); margin: 0 auto;
}

.hero.cinema {
  background: transparent;
}
.us-copy { position: relative; z-index: 1; }
.us-badge {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid rgba(250,204,21,.28);
  background: rgba(255,255,255,.04);
  border-radius: 999px; padding: 6px 12px;
  font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: #d4c19a;
  animation: fadeup .6s ease both;
}
.us-badge span {
  width: 7px; height: 7px; border-radius: 50%; background: #38bdf8;
  box-shadow: 0 0 10px #38bdf8;
  animation: blink 1.4s infinite;
}
.us-h {
  font-family: Rajdhani, Inter, sans-serif;
  font-weight: 500;
  font-size: clamp(34px, 4.6vw, 54px);
  line-height: 1.1;
  letter-spacing: -.035em;
  margin: 18px 0 14px;
  color: #f7f4ec;
}
.us-fast { display: block; color: #c5d0e4; font-size: .92em; }
.us-fast em {
  font-style: italic;
  background: linear-gradient(90deg, #38bdf8, #fde68a, #7ecbff, #38bdf8);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shine 6s linear infinite;
}
.us-lead { color: #9aa8c2; font-size: 16px; max-width: 46ch; margin: 0 0 24px; line-height: 1.65; }
.us-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; }
.us-primary {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 22px; border-radius: 999px;
  background: linear-gradient(90deg, #0284c7, #2563eb);
  color: #fff; font-weight: 700;
  box-shadow: 0 8px 28px rgba(14, 165, 233, 0.45);
}
.us-primary::after {
  content: "";
  position: absolute;
  top: 0;
  left: -55%;
  width: 40%;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-18deg);
  animation: gleam 2.4s ease-in-out infinite;
}
.us-primary i { font-style: normal; animation: arrow 1.4s ease-in-out infinite; }
.us-ghost {
  display: inline-flex; align-items: center;
  padding: 13px 20px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  color: #e8eef8; font-weight: 600;
  background: rgba(255,255,255,.03);
}
.us-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
}
.us-stats div {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(120,200,255,.14);
  border-top: 1px solid rgba(250,204,21,.4);
  border-radius: 14px; padding: 12px;
  animation: rise .7s ease both;
}
.us-stats div:nth-child(2) { animation-delay: .08s; }
.us-stats div:nth-child(3) { animation-delay: .16s; }
.us-stats div:nth-child(4) { animation-delay: .24s; }
.us-stats b { display: block; font-size: 20px; color: #f7f4ec; font-family: Rajdhani, Inter, sans-serif; font-weight: 500; }
.us-stats span { font-size: 10px; letter-spacing: .1em; color: #8b96ad; font-weight: 700; }

.us-visual {
  position: relative; z-index: 1; min-height: 380px;
  perspective: 900px;
  transform-style: preserve-3d;
  transition: transform .35s ease;
}
.us-radar {
  position: absolute; right: -28px; top: -28px;
  width: 140px; height: 140px; pointer-events: none; opacity: .45;
  background:
    repeating-radial-gradient(circle at 50% 50%, transparent 0 14px, rgba(56,189,248,.12) 15px 16px);
  border-radius: 50%;
  mask-image: radial-gradient(circle, #000 40%, transparent 72%);
}
.us-radar::after {
  content: "";
  position: absolute; inset: 8%;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 78%, rgba(56,189,248,.55) 100%);
  animation: radar 2.8s linear infinite;
}
.us-pkt {
  position: absolute; width: 7px; height: 7px; border-radius: 50%;
  background: #38bdf8; box-shadow: 0 0 10px #38bdf8;
  z-index: 3; pointer-events: none;
}
.us-pkt.p1 { left: 8%; top: 12%; animation: pkt1 3.6s ease-in-out infinite; }
.us-pkt.p2 { right: 6%; top: 48%; background: #facc15; box-shadow: 0 0 10px #facc15; animation: pkt2 4.2s ease-in-out infinite .4s; }
.us-pkt.p3 { left: 42%; bottom: 4%; background: #a855f7; box-shadow: 0 0 10px #a855f7; animation: pkt3 3.1s ease-in-out infinite .8s; }
.us-term {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(16,22,40,.92), rgba(8,12,22,.96));
  border-radius: 22px;
  border: 1px solid rgba(250,204,21,.22);
  box-shadow: 0 28px 70px rgba(0,0,0,.35), 0 0 40px rgba(56,189,248,.06);
  padding: 16px;
  transform-style: preserve-3d;
  animation: floaty 5s ease-in-out infinite;
}
.us-term.ready {
  box-shadow: 0 28px 70px rgba(0,0,0,.35), 0 0 48px rgba(56,189,248,.28);
  animation: floaty 5s ease-in-out infinite, termflash .7s ease;
}
.us-term-glow {
  position: absolute;
  width: 180%;
  height: 180%;
  left: -40%;
  top: -40%;
  pointer-events: none;
  background: conic-gradient(from 0deg, transparent 58%, rgba(56,189,248,.35), rgba(250,204,21,.22), transparent 78%);
  animation: spin 6s linear infinite;
  opacity: .55;
  z-index: 0;
}
.us-scanline {
  position: absolute; left: 0; right: 0; height: 22%;
  background: linear-gradient(transparent, rgba(56,189,248,.09), transparent);
  animation: termsweep 3.4s linear infinite;
  pointer-events: none; z-index: 2;
}
.us-wm {
  position: absolute; right: -8%; bottom: -10%;
  width: 55%; opacity: .08; pointer-events: none;
  animation: logobreathe 8s ease-in-out infinite;
}
.us-term-bar { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; position: relative; z-index: 1; }
.us-term-bar i { width: 10px; height: 10px; border-radius: 50%; }
.us-term-bar i:nth-child(1) { background: #ff5f57; }
.us-term-bar i:nth-child(2) { background: #febc2e; }
.us-term-bar i:nth-child(3) { background: #28c840; box-shadow: 0 0 8px #28c840; animation: blink 1.6s infinite; }
.us-term-bar span { margin-left: auto; font-size: 12px; color: #8b96ad; letter-spacing: .06em; }
.us-live {
  font-size: 9px; letter-spacing: .14em; font-weight: 800;
  color: #05070d; background: #38bdf8; border-radius: 999px;
  padding: 3px 7px; margin-left: 8px;
  animation: livepulse 1.8s ease-in-out infinite;
}
.us-rack {
  display: flex; gap: 4px; height: 28px; align-items: flex-end;
  margin-bottom: 10px; position: relative; z-index: 1;
}
.us-rack i {
  flex: 1; height: 18%; border-radius: 3px 3px 0 0;
  background: rgba(56,189,248,.18);
  transform-origin: bottom;
  animation: rackidle 1.1s ease-in-out infinite;
}
.us-rack i:nth-child(odd) { animation-delay: .15s; }
.us-rack i:nth-child(3n) { animation-delay: .35s; background: rgba(250,204,21,.22); }
.us-term.ready .us-rack i {
  animation: none;
  height: 70%;
  background: #38bdf8;
  box-shadow: 0 0 8px rgba(56,189,248,.5);
}
.us-term pre {
  margin: 0; min-height: 132px; position: relative; z-index: 1;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 13px; line-height: 1.7; color: #d5deef; white-space: pre-wrap;
}
.us-term .ok { color: #38bdf8; }
.us-term .dim { color: #6d7a94; }
.us-term .spin { color: #facc15; }
.us-term.glitch pre {
  animation: glitch .45s steps(2, end);
}
.us-progress {
  height: 3px; margin-top: 12px; border-radius: 99px;
  background: rgba(255,255,255,.06); overflow: hidden; position: relative; z-index: 1;
}
.us-progress i {
  display: block; height: 100%; width: 0;
  border-radius: 99px;
  background: linear-gradient(90deg, #38bdf8, #facc15);
  box-shadow: 0 0 12px #38bdf8;
  transition: width .55s cubic-bezier(.2,.8,.2,1);
}
.us-metrics {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-top: 14px;
  position: relative; z-index: 1;
}
.us-metrics div {
  background: rgba(255,255,255,.04); border-radius: 12px; padding: 10px;
  font-size: 11px; color: #8b96ad; border: 1px solid rgba(255,255,255,.06);
  opacity: .35; transform: translateY(8px);
  transition: opacity .4s ease, transform .4s ease, border-color .4s, box-shadow .4s;
}
.us-metrics div.on {
  opacity: 1; transform: none;
  border-color: rgba(56,189,248,.28);
  box-shadow: 0 0 18px rgba(56,189,248,.08);
}
.us-metrics b { display: block; font-size: 16px; color: #fde68a; font-family: Rajdhani, Inter, sans-serif; font-weight: 500; }
.us-metrics div:last-child b { color: #38bdf8; }
.us-float {
  position: absolute; z-index: 2;
  background: rgba(8,12,22,.8);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(250,204,21,.3);
  border-radius: 999px; padding: 8px 14px;
  font-size: 12px; font-weight: 600; color: #ead9a8;
  letter-spacing: .04em;
}
.us-float.a { left: -12px; top: 28%; animation: driftA 5.6s ease-in-out infinite; }
.us-float.b { right: 8px; top: -6px; color: #9fe8d8; border-color: rgba(56,189,248,.3); animation: driftB 4.8s ease-in-out infinite; }
@keyframes radar { to { transform: rotate(360deg); } }
@keyframes pkt1 {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: .9; }
  50% { transform: translate(90px, 70px) scale(.4); opacity: .2; }
}
@keyframes pkt2 {
  0%, 100% { transform: translate(0, 0); opacity: .85; }
  50% { transform: translate(-110px, -40px) scale(1.4); opacity: .15; }
}
@keyframes pkt3 {
  0%, 100% { transform: translate(0, 0); opacity: .8; }
  50% { transform: translate(40px, -90px); opacity: .2; }
}
@keyframes termsweep { from { top: -25%; } to { top: 110%; } }
@keyframes livepulse { 50% { box-shadow: 0 0 14px #38bdf8; transform: scale(1.04); } }
@keyframes rackidle {
  0%, 100% { height: 22%; }
  50% { height: 88%; }
}
@keyframes termflash {
  0% { filter: brightness(1.6) saturate(1.3); }
  100% { filter: none; }
}
@keyframes glitch {
  0% { transform: translate(0); }
  20% { transform: translate(-3px, 1px); clip-path: inset(12% 0 60% 0); }
  40% { transform: translate(3px, -1px); clip-path: inset(40% 0 20% 0); }
  60% { transform: translate(-2px, 0); clip-path: inset(0 0 0 0); }
  100% { transform: none; }
}
@keyframes driftA {
  0%, 100% { transform: translate(0, 0) rotate(-2deg); }
  33% { transform: translate(10px, -16px) rotate(3deg); }
  66% { transform: translate(-8px, 10px) rotate(-1deg); }
}
@keyframes driftB {
  0%, 100% { transform: translate(0, 0) rotate(1deg); }
  50% { transform: translate(-14px, 12px) rotate(-4deg); }
}

@keyframes fadeup { from { opacity: 0; transform: translateY(12px); } }
.hero-copy h1 { font-size: clamp(40px, 6.4vw, 72px); }
.hero-copy h1 .ch {
  display: inline-block;
  animation: pop .7s cubic-bezier(.2,1.4,.3,1) both;
  animation-delay: calc(var(--i) * 28ms);
}
@keyframes pop { from { opacity: 0; transform: translateY(40px) rotateX(70deg); } }

.halo-stage {
  position: relative;
  height: 540px;
  display: grid;
  place-items: center;
  transition: transform .35s ease;
}
.halo-glow {
  position: absolute;
  width: 70%; height: 70%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212,180,110,.28), rgba(61,157,255,.12) 42%, transparent 70%);
  animation: glowpulse 5s ease-in-out infinite;
  filter: blur(8px);
}
@keyframes glowpulse {
  50% { transform: scale(1.12); opacity: .75; }
}
.halo-rings {
  position: absolute;
  width: 92%; height: 92%;
  overflow: visible;
}
.hr {
  fill: none;
  stroke-linecap: round;
  transform-origin: 210px 210px;
}
.hr.a {
  stroke: rgba(250,204,21,.55);
  stroke-width: 1.2;
  stroke-dasharray: 40 200;
  animation: spin 14s linear infinite, dash 6s linear infinite;
}
.hr.b {
  stroke: rgba(110,180,255,.4);
  stroke-width: 1;
  stroke-dasharray: 12 18;
  animation: spin 22s linear infinite reverse;
}
.hr.c {
  stroke: rgba(255,255,255,.16);
  stroke-width: .8;
  stroke-dasharray: 2 10;
  animation: spin 32s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes dash { to { stroke-dashoffset: -240; } }
.halo-logo {
  position: relative;
  z-index: 2;
  width: min(280px, 58%);
  height: auto;
  border-radius: 20px;
  animation: logobreathe 6s ease-in-out infinite;
  filter: drop-shadow(0 20px 50px rgba(0,0,0,.45)) drop-shadow(0 0 28px rgba(61,157,255,.35));
}
@keyframes logobreathe {
  50% { transform: translateY(-10px) scale(1.03); }
}
.spark {
  position: absolute;
  left: 50%; top: 50%;
  width: 6px; height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: #fde68a;
  box-shadow: 0 0 12px #fde68a;
  z-index: 3;
}
.spark.s1 { animation: circ 9s linear infinite; }
.spark.s2 { animation: circ 12s linear infinite reverse; background: #7ecbff; box-shadow: 0 0 12px #7ecbff; }
.spark.s3 { animation: circ2 11s linear infinite; }
.spark.s4 { animation: circ2 16s linear infinite reverse; background: #fff; }
@keyframes circ {
  to { transform: rotate(360deg) translateX(155px) rotate(-360deg); }
}
@keyframes circ2 {
  to { transform: rotate(360deg) translateX(190px) rotate(-360deg); }
}
.halo-chip {
  position: absolute;
  z-index: 4;
  padding: 10px 14px;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #c9d3e4;
  background: rgba(8,12,22,.72);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(250,204,21,.28);
  animation: chipfloat 4.5s ease-in-out infinite;
}
.halo-chip a { display: block; color: #ead9a8; text-transform: none; letter-spacing: 0; margin-top: 4px; }
.halo-chip.top { top: 8%; right: 2%; }
.halo-chip.bot { bottom: 10%; left: 4%; animation-delay: 1.2s; }
@keyframes chipfloat { 50% { transform: translateY(-8px); } }

.lanes { padding-top: 24px; }
.tier-stage {
  position: relative;
  margin: 0 auto 36px;
  max-width: 760px;
  padding: 28px 20px 22px;
  text-align: center;
  overflow: hidden;
  border-radius: 28px;
  border: 1px solid rgba(250, 204, 21, .18);
  background:
    radial-gradient(120% 90% at 12% 0%, rgba(250,204,21,.14), transparent 46%),
    radial-gradient(120% 90% at 90% 10%, rgba(226,232,240,.12), transparent 48%),
    linear-gradient(180deg, rgba(12,18,36,.72), rgba(6,10,22,.88));
}
.tier-glow {
  position: absolute; width: 220px; height: 220px; border-radius: 50%;
  filter: blur(40px); pointer-events: none; z-index: 0;
}
.tier-glow.g {
  left: -40px; top: -50px;
  background: rgba(250,204,21,.28);
  animation: tierorb 7s ease-in-out infinite;
}
.tier-glow.p {
  right: -50px; bottom: -60px;
  background: rgba(203,213,225,.22);
  animation: tierorb 8s ease-in-out infinite reverse;
}
@keyframes tierorb {
  50% { transform: translate(18px, 12px) scale(1.15); opacity: .7; }
}
.tier-eyebrow {
  position: relative; z-index: 1;
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .32em;
  text-transform: uppercase;
  background: linear-gradient(90deg, #facc15, #fff7d6, #e2e8f0, #facc15);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: tiershine 4.5s linear infinite;
}
.tier-title {
  position: relative; z-index: 1;
  display: inline-block;
  margin: 0 0 22px;
  font-family: var(--display);
  font-size: clamp(28px, 4.4vw, 44px);
  font-weight: 800;
  letter-spacing: .02em;
  color: #f8fafc;
  text-shadow: 0 0 28px rgba(250,204,21,.28);
}
.tier-title::after {
  content: "";
  display: block;
  height: 2px;
  margin: 10px auto 0;
  width: 0;
  background: linear-gradient(90deg, #facc15, #e2e8f0);
  animation: tierline 2.4s ease infinite alternate;
}
@keyframes tierline { to { width: 180px; } }
@keyframes tiershine { to { background-position: 220% 0; } }
.tier-racks {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 18px;
  max-width: 560px;
  margin: 0 auto;
}
.tier-rack {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: 16px;
  padding: 12px 12px 10px;
  text-align: left;
  transform: perspective(700px) rotateY(var(--ry, -8deg));
}
.tier-rack.gold {
  --ry: 10deg;
  border: 1px solid rgba(250,204,21,.55);
  background: linear-gradient(165deg, #4a3208, #1a1204 55%, #120e06);
  box-shadow: 0 12px 32px rgba(250,204,21,.18), inset 0 0 24px rgba(250,204,21,.1);
  animation: goldheat 3.4s ease-in-out infinite;
}
.tier-rack.plat {
  --ry: -10deg;
  border: 1px solid rgba(226,232,240,.5);
  background: linear-gradient(165deg, #3a4558, #121826 55%, #0c1018);
  box-shadow: 0 12px 32px rgba(148,163,184,.2), inset 0 0 28px rgba(226,232,240,.1);
  animation: platfloat 4.8s ease-in-out infinite;
}
@keyframes goldheat {
  0%, 100% {
    transform: perspective(700px) rotateY(10deg) scale(1);
    box-shadow: 0 10px 28px rgba(250,204,21,.16), inset 0 0 18px rgba(250,204,21,.08);
  }
  50% {
    transform: perspective(700px) rotateY(6deg) scale(1.03);
    box-shadow: 0 16px 40px rgba(251,191,36,.42), inset 0 0 32px rgba(250,204,21,.22);
  }
}
@keyframes platfloat {
  0%, 100% { transform: perspective(700px) rotateY(-10deg) translateY(0); }
  50% { transform: perspective(700px) rotateY(-6deg) translateY(-8px); }
}
.fx-sheen, .fx-embers, .fx-chrome, .fx-crystals, .fx-orbit {
  position: absolute; pointer-events: none; z-index: 0;
}
.tier-rack.gold .fx-sheen {
  inset: -20%;
  background: linear-gradient(115deg, transparent 35%, rgba(255,236,153,.55) 48%, transparent 62%);
  animation: goldmolten 2.6s ease-in-out infinite;
}
@keyframes goldmolten {
  0% { transform: translateX(-55%) rotate(12deg); opacity: 0; }
  35% { opacity: 1; }
  100% { transform: translateX(70%) rotate(12deg); opacity: 0; }
}
.tier-rack.gold .fx-embers {
  left: 10%; right: 10%; bottom: 8px; height: 70%;
  background:
    radial-gradient(circle at 18% 90%, #facc15 0 1.5px, transparent 2px),
    radial-gradient(circle at 42% 80%, #fde68a 0 1px, transparent 2px),
    radial-gradient(circle at 68% 92%, #f59e0b 0 1.5px, transparent 2.2px),
    radial-gradient(circle at 84% 75%, #fff7d6 0 1px, transparent 2px);
  background-repeat: no-repeat;
  animation: embers 2.8s linear infinite;
  opacity: .85;
}
@keyframes embers {
  0% { transform: translateY(12px); opacity: 0; }
  25% { opacity: .9; }
  100% { transform: translateY(-28px); opacity: 0; }
}
.tier-rack.plat .fx-chrome {
  inset: 0;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.08) 40%, transparent 55%);
  background-size: 100% 220%;
  animation: platscan 3.2s ease-in-out infinite;
}
@keyframes platscan {
  0% { background-position: 0 120%; }
  100% { background-position: 0 -40%; }
}
.tier-rack.plat .fx-crystals {
  inset: 8px;
  background:
    radial-gradient(circle at 12% 22%, #fff 0 1.2px, transparent 1.8px),
    radial-gradient(circle at 78% 18%, #e2e8f0 0 1px, transparent 1.6px),
    radial-gradient(circle at 30% 60%, #93c5fd 0 1.2px, transparent 1.8px),
    radial-gradient(circle at 88% 72%, #fff 0 1px, transparent 1.6px),
    radial-gradient(circle at 54% 38%, #cbd5e1 0 1.4px, transparent 2px);
  animation: sparkle 1.8s ease-in-out infinite;
}
@keyframes sparkle {
  0%, 100% { opacity: .25; filter: blur(0); }
  50% { opacity: 1; filter: blur(.2px); }
}
.tier-rack.plat .fx-orbit {
  inset: -8px;
  border-radius: 18px;
  border: 1px dashed rgba(226,232,240,.35);
  animation: spincore 10s linear infinite;
  mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
}
.tier-rack-top {
  position: relative; z-index: 1;
  font-size: 11px; font-weight: 800; letter-spacing: .2em;
  margin-bottom: 8px;
}
.tier-rack.gold .tier-rack-top {
  color: #fde68a;
  text-shadow: 0 0 12px rgba(250,204,21,.7);
  animation: goldflicker 2.2s ease-in-out infinite;
}
.tier-rack.plat .tier-rack-top {
  color: #f8fafc;
  background: linear-gradient(90deg, #94a3b8, #fff, #7dd3fc, #94a3b8);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: tiershine 3.2s linear infinite;
}
@keyframes goldflicker {
  0%, 100% { opacity: .85; }
  40% { opacity: 1; }
  52% { opacity: .7; }
  64% { opacity: 1; }
}
.tier-bays { position: relative; z-index: 1; display: grid; gap: 5px; }
.tier-bays i {
  display: block; height: 7px; border-radius: 99px;
  background: rgba(255,255,255,.08);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
  position: relative; overflow: hidden;
}
.tier-bays i::after {
  content: "";
  position: absolute; top: 0; bottom: 0;
  border-radius: 99px;
}
.tier-rack.gold .tier-bays i::after {
  left: -40%; width: 40%;
  background: linear-gradient(90deg, transparent, #facc15, #fff7d6, transparent);
  animation: goldsweep 1.8s ease-in-out infinite;
}
.tier-rack.plat .tier-bays i::after {
  left: 0; width: 8px;
  background: #e2e8f0;
  box-shadow: 0 0 10px #fff;
  animation: platdrop 1.6s cubic-bezier(.2,.8,.2,1) infinite;
}
.tier-rack.gold .tier-bays i:nth-child(odd)::after { animation-delay: .25s; }
.tier-rack.gold .tier-bays i:nth-child(3)::after { animation-delay: .45s; }
.tier-rack.gold .tier-bays i:nth-child(5)::after { animation-delay: .1s; }
.tier-rack.plat .tier-bays i:nth-child(1)::after { animation-delay: 0s; }
.tier-rack.plat .tier-bays i:nth-child(2)::after { animation-delay: .12s; }
.tier-rack.plat .tier-bays i:nth-child(3)::after { animation-delay: .24s; }
.tier-rack.plat .tier-bays i:nth-child(4)::after { animation-delay: .36s; }
.tier-rack.plat .tier-bays i:nth-child(5)::after { animation-delay: .48s; }
.tier-rack.plat .tier-bays i:nth-child(6)::after { animation-delay: .6s; }
.tier-rack.plat .tier-bays i:nth-child(7)::after { animation-delay: .72s; }
.tier-rack.plat .tier-bays i:nth-child(8)::after { animation-delay: .84s; }
@keyframes goldsweep {
  0% { transform: translateX(0); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translateX(280%); opacity: 0; }
}
@keyframes platdrop {
  0%, 15% { transform: translateX(8%); opacity: .2; }
  45% { transform: translateX(70%); opacity: 1; }
  100% { transform: translateX(110%); opacity: .15; }
}
.tier-rack-meta {
  margin-top: 8px;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #94a3b8;
}
.tier-beam {
  position: absolute; height: 2px; width: 46px; top: 50%;
  pointer-events: none;
}
.tier-beam.g {
  right: 70%;
  background: linear-gradient(90deg, transparent, #facc15);
  animation: beamg 1.6s ease-in-out infinite;
}
.tier-beam.p {
  left: 70%;
  background: linear-gradient(90deg, #e2e8f0, transparent);
  animation: beamp 1.6s ease-in-out infinite .3s;
}
@keyframes beamg {
  0% { transform: scaleX(0); transform-origin: right; opacity: 0; }
  40% { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(1); opacity: .2; }
}
@keyframes beamp {
  0% { transform: scaleX(0); transform-origin: left; opacity: 0; }
  40% { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(1); opacity: .2; }
}
.tier-core {
  width: 72px; height: 72px;
  display: grid; place-items: center;
  position: relative;
}
.tier-core b {
  position: relative; z-index: 1;
  font-size: 11px; letter-spacing: .14em; color: #fff;
}
.tier-ring, .tier-pulse {
  position: absolute; inset: 0;
  border-radius: 50%;
}
.tier-ring {
  border: 2px dashed rgba(250,204,21,.55);
  animation: spincore 8s linear infinite;
}
.tier-pulse {
  border: 2px solid rgba(226,232,240,.5);
  animation: corepulse 2.2s ease-out infinite;
}
@keyframes spincore { to { transform: rotate(360deg); } }
@keyframes corepulse {
  0% { transform: scale(.6); opacity: .8; }
  100% { transform: scale(1.35); opacity: 0; }
}
@media (max-width: 640px) {
  .tier-racks { grid-template-columns: 1fr; max-width: 280px; }
  .tier-core { margin: 4px auto; }
  .tier-rack { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .tier-eyebrow, .tier-title::after, .tier-glow, .tier-rack, .tier-bays i::after,
  .tier-ring, .tier-pulse, .fx-sheen, .fx-embers, .fx-chrome, .fx-crystals, .fx-orbit,
  .tier-beam, .tier-rack-top {
    animation: none;
  }
}
.lanes-kicker {
  text-align: center;
  font-size: 11px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: #7dd3fc;
  margin: 0 0 8px;
}
.bento {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr;
  grid-template-rows: 200px 200px;
  gap: 16px;
  perspective: 1200px;
}
.bento a {
  border-radius: 22px;
  padding: 22px 22px 18px;
  border: 1px solid rgba(56, 189, 248, 0.22);
  background:
    linear-gradient(180deg, rgba(14, 22, 48, .72), rgba(7, 10, 24, .9));
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  isolation: isolate;
  transform: translateY(18px);
  animation: lanerise .8s ease both;
  transition: transform .35s ease, border-color .35s, box-shadow .35s;
}
.bento a:nth-child(1) { animation-delay: .05s; }
.bento a:nth-child(2) { animation-delay: .12s; }
.bento a:nth-child(3) { animation-delay: .18s; }
.bento a:nth-child(4) { animation-delay: .24s; }
.bento a:nth-child(5) { animation-delay: .3s; }
@keyframes lanerise {
  from { opacity: 0; transform: translateY(28px) rotateX(8deg); }
  to { opacity: 1; transform: none; }
}
.bento a::before {
  content: "";
  position: absolute; inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from var(--spin, 0deg), transparent 40%, rgba(56,189,248,.7), rgba(250,204,21,.45), transparent 72%);
  animation: spin 7s linear infinite;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: .55;
  pointer-events: none;
  z-index: 0;
}
.bento a:hover {
  transform: translateY(-8px) scale(1.02);
  border-color: rgba(56, 189, 248, .55);
  box-shadow: 0 22px 50px rgba(2, 132, 199, .22);
}
.bento .wide {
  grid-row: span 2;
  background:
    radial-gradient(120% 80% at 90% 110%, rgba(14, 165, 233, .45), transparent 50%),
    linear-gradient(165deg, #0b1a33 0%, #062018 70%, #0a2a18 100%);
}
.bento .gold {
  background:
    radial-gradient(90% 80% at 100% 0%, rgba(250, 204, 21, .22), transparent 50%),
    linear-gradient(160deg, #2a1c08, #120e08);
}
.bento h3 {
  position: relative; z-index: 1;
  margin: 0 0 8px;
  font-family: var(--display);
  font-size: clamp(20px, 2.2vw, 30px);
  font-weight: 700;
  letter-spacing: .02em;
}
.bento p { position: relative; z-index: 1; margin: 0; color: #b7c4d8; font-size: 14px; }
.bento .orb {
  position: absolute; right: -40px; bottom: -50px; width: 200px; height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(56,189,248,.55), transparent 68%);
  animation: bob 4s ease-in-out infinite;
  z-index: 0;
}
.lane-tag {
  position: absolute; top: 16px; left: 16px; z-index: 2;
  font-size: 10px; font-weight: 800; letter-spacing: .16em;
  color: #7dd3fc;
  border: 1px solid rgba(56,189,248,.35);
  border-radius: 999px;
  padding: 4px 9px;
  background: rgba(7, 16, 32, .55);
}
.lane-go {
  position: relative; z-index: 1;
  margin-top: 14px;
  font-size: 12px; font-weight: 700; letter-spacing: .08em;
  color: #facc15;
  opacity: 0;
  transform: translateY(8px);
  transition: .3s ease;
}
.bento a:hover .lane-go { opacity: 1; transform: none; }
.lane-scan {
  position: absolute; left: 0; right: 0; height: 40%;
  background: linear-gradient(transparent, rgba(56,189,248,.12), transparent);
  animation: lanesweep 4.2s linear infinite;
  pointer-events: none; z-index: 1;
}
@keyframes lanesweep { from { top: -40%; } to { top: 120%; } }
.lane-mark {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
  opacity: .28;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 0;
  filter: saturate(1.15) brightness(1.08);
  -webkit-mask-image: radial-gradient(ellipse 85% 75% at 72% 32%, #000 18%, transparent 72%);
  mask-image: radial-gradient(ellipse 85% 75% at 72% 32%, #000 18%, transparent 72%);
}
.linux-sig {
  position: absolute;
  left: 22px;
  right: 22px;
  top: 58px;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  letter-spacing: .04em;
  color: rgba(125, 211, 252, .72);
  pointer-events: none;
}
.linux-prompt {
  color: #4ade80;
  font-weight: 800;
}
.linux-cmd {
  overflow: hidden;
  white-space: nowrap;
  border-right: 2px solid rgba(74, 222, 128, .7);
  animation: linuxtype 4.8s steps(22) infinite;
  width: 22ch;
}
@keyframes linuxtype {
  0%, 12% { width: 0; }
  55%, 82% { width: 22ch; }
  100% { width: 0; }
}

.rail {
  display: flex; gap: 16px; overflow-x: auto; padding: 12px 0 28px;
  scroll-snap-type: x mandatory;
}
.rail::-webkit-scrollbar { height: 6px; }
.rail::-webkit-scrollbar-thumb { background: #38bdf8; border-radius: 99px; }
.tile {
  min-width: 260px; scroll-snap-align: start;
  background: rgba(255,255,255,.04); border: 1px solid var(--line);
  border-radius: 22px; padding: 22px;
  transform: perspective(600px) rotateY(-8deg);
  transition: transform .35s;
}
.tile:hover { transform: perspective(600px) rotateY(0) scale(1.05); }

.maison { position: relative; padding: 4px 0 0; }
.maison-live {
  display: inline-flex; align-items: center; gap: 8px;
  margin-bottom: 18px;
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #9aa6bb;
  animation: fadeup .7s ease both;
}
.maison-live i {
  width: 7px; height: 7px; border-radius: 50%; background: #38bdf8;
  box-shadow: 0 0 0 0 rgba(56,189,248,.7);
  animation: ping 1.8s ease-out infinite;
}
@keyframes ping {
  70% { box-shadow: 0 0 0 10px transparent; }
}
.maison-brand {
  margin: 0 0 14px;
  font-size: 12px; letter-spacing: .38em; text-transform: uppercase; color: #d4c19a;
  animation: fadeup .7s .1s ease both;
}
.maison-h {
  margin: 0 0 18px;
  font-family: Rajdhani, Inter, sans-serif;
  font-weight: 500;
  font-size: clamp(40px, 5.2vw, 64px);
  line-height: 1.05;
  letter-spacing: -.04em;
  color: #f7f4ec;
}
.maison-h span {
  display: block;
  overflow: hidden;
}
.maison-h b {
  display: block;
  animation: riseup .9s cubic-bezier(.16,1,.3,1) both;
}
.maison-h span:nth-child(2) b { animation-delay: .15s; }
@keyframes riseup {
  from { transform: translateY(110%); }
}
.maison-lead {
  margin: 0 0 22px;
  max-width: 40ch;
  font-size: 16px;
  line-height: 1.65;
  color: #a9b4c8;
  animation: fadeup .8s .35s ease both;
}
.maison-lead a { color: #ead9a8; }
.maison-ribbon {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  margin: 0 0 26px;
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
  padding: 10px 0;
  animation: fadeup .8s .45s ease both;
}
.maison-track {
  display: flex; gap: 28px; width: max-content;
  animation: ribbon 22s linear infinite;
  font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: #8e9bb2;
}
.maison-track span::before { content: "✦ "; color: #d4c19a; }
@keyframes ribbon { to { transform: translateX(-50%); } }
.maison-cta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px 20px;
  margin-bottom: 32px;
  animation: fadeup .8s .55s ease both;
}
.maison-btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 26px;
  background: linear-gradient(90deg, #0284c7, #2563eb);
  color: #fff;
  font-weight: 700;
  border-radius: 999px;
  box-shadow: 0 8px 28px rgba(14, 165, 233, 0.45);
}
.maison-btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: -55%;
  width: 40%;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-18deg);
  animation: gleam 2.4s ease-in-out infinite;
}
.maison-btn i { font-style: normal; display: inline-block; animation: arrow 1.4s ease-in-out infinite; }
@keyframes gleam {
  0% { left: -55%; }
  100% { left: 125%; }
}
@keyframes arrow { 50% { transform: translateX(4px); } }
.maison-cta a:not(.maison-btn) {
  color: #cfd8ea; font-size: 14px;
  border-bottom: 1px solid rgba(207,216,234,.3);
}
.maison-stats {
  display: flex; gap: 28px;
  animation: fadeup .8s .7s ease both;
}
.maison-stats em {
  display: block;
  font-family: Rajdhani, Inter, sans-serif;
  font-style: normal;
  font-size: 26px;
  color: #f7f4ec;
}
.maison-stats small {
  letter-spacing: .14em; text-transform: uppercase; font-size: 10px; color: #7d879c;
}
@keyframes fadeup {
  from { opacity: 0; transform: translateY(16px); }
}

.skyline {
  font-family: var(--display);
  font-size: clamp(28px, 4.2vw, 46px);
  font-weight: 800;
  margin: 0 0 12px;
  background: linear-gradient(90deg, #38bdf8, #facc15, #a855f7, #38bdf8);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shine 5s linear infinite;
}

@media (max-width: 1100px) {
  .cinema { min-height: 0; padding: 28px 0 12px; }
  .cinema-grid, .bento { grid-template-columns: 1fr; grid-template-rows: auto; }
  .bento a, .bento div { min-height: 160px; }
  .lane-go { opacity: 1; transform: none; }
  .linux-sig { font-size: 12px; }
  .us-stats { grid-template-columns: 1fr 1fr; }
  .us-float, .us-radar, .us-pkt { display: none; }
  .hh-scene .beam, .hh-scene .shoot { display: none; }
  .hh-scene .mote:nth-child(n+10) { display: none; }
  .us-h { font-size: clamp(28px, 8vw, 40px); }
  .us-visual { min-height: 0; }
  .us-term pre { font-size: 12px; min-height: 148px; }
  .us-metrics { grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
  .us-metrics b { font-size: 13px; }
}

@media (max-width: 640px) {
  .us-metrics { grid-template-columns: 1fr; }
  .us-term { padding: 12px; border-radius: 16px; }
}