/* ─────────────────────────────────────────────────────────────
   GAMEDROP · Dark · Fluid · Image-forward
─────────────────────────────────────────────────────────────── */
:root{
  --bg:#08080a;
  --bg-1:#0e0e10;
  --bg-2:#17171a;
  --panel:#151518;
  --line:rgba(255,255,255,.07);
  --line-2:rgba(255,255,255,.14);
  --ink:#f5f2ea;
  --ink-dim:#a6a6ac;
  --ink-mute:#65656c;
  --ember:#ff3b30;
  --ember-2:#c01c15;
  --ember-glow:rgba(255,59,48,.45);
  --steel:#8a8f99;
  --amber:#ff9a3c;
  /* legacy aliases */
  --lime:#ff3b30;
  --lime-2:#c01c15;
  --magenta:#ff9a3c;
  --orange:#ff9a3c;
  --font-display:"Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-mono:"Geist Mono","JetBrains Mono", ui-monospace, monospace;
  --font-body:"Inter", ui-sans-serif, system-ui, sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-weight:400;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
em{font-style:normal;color:var(--ember)}
h1,h2,h3,h4,h5{font-family:var(--font-display);font-weight:600;letter-spacing:-0.02em;margin:0;line-height:1.05}

/* noise + cursor glow */
#noise{
  position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.04;mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E");
}
#cursor-glow{
  position:fixed;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle, rgba(255,59,48,.16) 0%, rgba(255,59,48,0) 60%);
  pointer-events:none;z-index:0;left:-300px;top:-300px;
  transition:transform .25s cubic-bezier(.2,.7,.3,1);
  will-change:transform;
}

/* Placeholder tiles (subtle striped, label readable) */
.ph{
  position:relative;width:100%;height:100%;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 12px, rgba(255,255,255,0) 12px 24px),
    linear-gradient(160deg, #1a1a26, #0f0f16);
  overflow:hidden;
  border-radius:inherit;
}
.ph::after{
  content:attr(data-ph);
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.35);text-align:center;padding:0 12px;
}
.ph[style*="background-image"]::after{
  display:none !important;
}
.ph::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse at top left, rgba(255,59,48,.08), transparent 50%);
}

/* NAV */
.nav{
  position:fixed;top:18px;left:50%;transform:translateX(-50%);
  z-index:50;display:flex;align-items:center;gap:36px;
  background:rgba(12,12,18,.72);
  backdrop-filter:blur(18px) saturate(140%);
  border:1px solid var(--line);
  border-radius:999px;
  padding:8px 8px 8px 22px;
  font-size:14px;
}
.brand{display:flex;align-items:center;gap:9px;font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;font-size:18px;color:var(--ink);text-decoration:none}
.brand:hover{color:var(--ember)}
.brand-text{font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;font-size:18px;line-height:1}
.foot-brand-text{font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;font-size:24px;color:var(--ink);line-height:1}
.nav-links{display:flex;gap:28px;color:var(--ink-dim)}
.nav-links a{transition:color .15s}
.nav-links a:hover{color:var(--ink)}
.nav-cta{
  background:var(--ember);color:#fff;font-weight:600;
  padding:10px 18px;border-radius:999px;display:inline-flex;align-items:center;gap:6px;
  transition:transform .15s, box-shadow .2s, background .2s;
  box-shadow:0 0 0 0 rgba(255,59,48,.4);
}
.nav-cta:hover{transform:translateY(-1px);background:var(--ember-2);box-shadow:0 0 28px 0 rgba(255,59,48,.45)}
.nav-cta span{transition:transform .15s}
.nav-cta:hover span{transform:translateX(3px)}

/* BUTTONS */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:13px 22px;border-radius:999px;font-weight:600;font-size:14px;
  transition:transform .15s, background .2s, color .2s, border-color .2s;
  font-family:var(--font-body);
}
.btn-lg{padding:17px 28px;font-size:16px}
.btn-primary{background:var(--ember);color:#fff}
.btn-primary:hover{transform:translateY(-1px);background:var(--ember-2)}
.btn-primary span{transition:transform .15s}
.btn-primary:hover span{transform:translateX(3px)}
.btn-ghost{border:1px solid var(--line-2);color:var(--ink)}
.btn-ghost:hover{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.24)}
.btn-ghost span{transition:transform .15s}
.btn-ghost:hover span{transform:translateX(3px)}

/* HERO */
.hero{
  position:relative;padding:80px 48px 50px;max-width:1440px;margin:0 auto;
}
.hero::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(ellipse at 80% 30%, rgba(255,59,48,.12), transparent 55%),
    radial-gradient(ellipse at 20% 80%, rgba(255,154,60,.06), transparent 55%);
}
.hero::after{
  /* Full-bleed background. The image is enlarged 130% and anchored to the
     RIGHT before the scaleX(-1) flip — this makes the gamer (who is on the
     left of the source image) appear in the right third of the hero after
     the flip, while the left edge of the hero is still fully covered. */
  content:"";position:absolute;inset:0;z-index:-1;transform:scaleX(-1);
  background:url('images/hero-bg.webp') no-repeat;
  background-size:130% auto;
  background-position:right center;
  opacity:.6;
  mask-image:radial-gradient(ellipse 85% 100% at 35% 50%,rgba(0,0,0,1) 30%,rgba(0,0,0,.7) 65%,transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 85% 100% at 35% 50%,rgba(0,0,0,1) 30%,rgba(0,0,0,.7) 65%,transparent 100%);
  pointer-events:none;
}
.hero-grid{
  display:grid;grid-template-columns:minmax(0, 1.05fr) minmax(0, .95fr);gap:60px;align-items:center;
}
/* Right column intentionally empty — the flipped background image fills it. */
.hero-grid .hero-stack-spacer{min-height:480px}
.live-chip{
  display:inline-flex;align-items:center;gap:10px;
  padding:7px 14px;border-radius:999px;border:1px solid var(--line-2);
  background:rgba(255,255,255,.03);
  font-family:var(--font-mono);font-size:12px;color:var(--ink-dim);
  margin-bottom:28px;
}
.live-chip .dot{width:7px;height:7px;border-radius:50%;background:var(--ember);box-shadow:0 0 10px var(--ember);animation:pulse 1.8s infinite}
@keyframes pulse{50%{opacity:.35}}

.hero-title{
  font-size:clamp(48px, 8vw, 100px);
  font-weight:600;letter-spacing:-.035em;line-height:.95;
  margin-bottom:20px;
}
.hero-title .outline{
  -webkit-text-stroke:1.5px var(--ink);
  color:transparent;
  font-style:italic;
  font-weight:500;
}
.hero-sub{
  font-size:16px;color:var(--ink-dim);max-width:520px;margin-bottom:28px;line-height:1.5;
}
.hero-ctas{display:flex;gap:12px;margin-bottom:40px;flex-wrap:wrap}
.hero-stats{display:flex;gap:48px;padding-top:28px;border-top:1px solid var(--line)}
.hero-stats>div{display:flex;flex-direction:column;gap:2px}
.hero-stats b{font-family:var(--font-display);font-size:30px;font-weight:600;letter-spacing:-.02em}
.hero-stats span{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-mute)}

.hero-copy{position:relative;z-index:2}
/* The title wrap is the positioning context for the decor cluster.
   Floats are placed in three corners around the H1 so they "hug" the headline. */
.hero-title-wrap{position:relative;display:inline-block;width:100%}
.hero-title-wrap .deco-float{
  position:absolute;object-fit:contain;pointer-events:none;
  filter:drop-shadow(0 10px 28px rgba(0,0,0,.6));
  animation:deco-float 7s ease-in-out infinite;
  z-index:5;
  opacity:.95;
}
/* Three decor pieces form a halo around the H1: top-left, mid-right, bottom-left.
   They stay inside the text column so the gamer photo on the right is clean. */
/* PS5 console — to the right of "Play", clear of the live-chip above */
.hero-title-wrap .deco-ps5{width:130px;top:10px;left:22%;animation-delay:0s;--rot:-10deg}
/* Controller — beside "Your Game.", inside the column right edge */
.hero-title-wrap .deco-controller{width:120px;top:38%;right:8%;animation-delay:1.5s;--rot:16deg}
/* VR headset — below "Instantly.", mid-left */
.hero-title-wrap .deco-quest{width:130px;bottom:-50px;left:24%;animation-delay:3s;--rot:-12deg}
@keyframes deco-float{
  0%,100%{transform:translateY(0) rotate(var(--rot,0deg))}
  50%{transform:translateY(-8px) rotate(var(--rot,0deg))}
}
.pill{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  padding:6px 10px;border-radius:999px;
  background:rgba(0,0,0,.6);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.12);
}
.pill.lime{background:var(--ember);color:#fff;border-color:transparent}
.price{font-family:var(--font-display);font-weight:600;font-size:16px}

.floating-tag{
  position:absolute;padding:8px 14px;border-radius:999px;
  background:rgba(20,20,28,.92);border:1px solid var(--line-2);
  font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;
  backdrop-filter:blur(8px);
  animation:float 6s ease-in-out infinite;
  z-index:10;
}
.tag-1{top:2%;right:0;animation-delay:0s}
.tag-2{top:40%;right:-8%;color:var(--ember);border-color:rgba(255,59,48,.35);animation-delay:1.5s}
.tag-3{bottom:15%;left:0;animation-delay:3s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* Marquee */
.marquee{
  margin-top:80px;padding:20px 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
}
.marquee-track{
  display:flex;gap:40px;white-space:nowrap;animation:scroll 40s linear infinite;
  font-family:var(--font-display);font-size:32px;font-weight:500;letter-spacing:-.02em;color:var(--ink-mute);
}
.marquee-track span{transition:color .2s}
.marquee-track span:hover{color:var(--ember)}
@keyframes scroll{to{transform:translateX(-50%)}}

/* SECTION HEAD */
section{position:relative;padding:60px 48px;max-width:1440px;margin:0 auto}
.section-head{max-width:880px;margin:0 auto 48px;text-align:center}
.eyebrow{
  display:inline-block;font-family:var(--font-mono);font-size:12px;letter-spacing:.16em;
  color:var(--ember);text-transform:uppercase;margin-bottom:24px;
  padding:6px 12px;border:1px dashed rgba(255,59,48,.4);border-radius:999px;
}
.section-head h2{font-size:clamp(36px, 5vw, 72px);margin-bottom:16px;line-height:1}
.section-head p{color:var(--ink-dim);font-size:16px;max-width:640px;margin:0 auto;line-height:1.5}

/* CONSOLES */
.console-tabs{
  display:flex;gap:8px;justify-content:center;flex-wrap:wrap;
  margin-bottom:32px;
}
.tab{
  padding:11px 20px;border-radius:999px;
  border:1px solid var(--line-2);color:var(--ink-dim);
  font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  transition:all .2s;
}
.tab:hover{color:var(--ink);border-color:rgba(255,255,255,.3)}
.tab.active{background:var(--ink);color:#0a0a0f;border-color:var(--ink)}

.console-stage{position:relative;min-height:420px;display:flex}
.console-panel{
  /* Flex with center justification — image + text pair sit tightly together
     and the whole pair is centered horizontally in the stage. */
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:32px;
  opacity:0;pointer-events:none;transform:translateY(20px);
  transition:opacity .5s, transform .5s;
  visibility:hidden;z-index:0;
}
.console-panel .panel-info{max-width:520px}
.console-panel.active{opacity:1;pointer-events:auto;transform:translateY(0);visibility:visible;z-index:10}

.panel-visual{position:relative;aspect-ratio:4/3;border-radius:20px;overflow:hidden;background:var(--bg-2);border:1px solid var(--line);height:340px;flex-shrink:0}
.panel-visual .ph-big{height:100%}
.panel-gradient{background:linear-gradient(135deg, rgba(255,59,48,.12) 0%, rgba(20,20,30,.9) 50%, rgba(255,154,60,.08) 100%);display:flex;align-items:center;justify-content:center}
.panel-product-img{width:70%;height:auto;object-fit:contain;position:relative;z-index:1;filter:drop-shadow(0 8px 30px rgba(0,0,0,.5))}
.orbit{position:absolute;inset:0;pointer-events:none}
.orbit div{
  position:absolute;border-radius:50%;
  border:1px dashed rgba(255,255,255,.1);
  animation:orbit 60s linear infinite;
}
.orbit div:nth-child(1){inset:10%;animation-duration:80s}
.orbit div:nth-child(2){inset:20%;animation-duration:50s;animation-direction:reverse}
.orbit div:nth-child(3){inset:30%;border-color:rgba(255,59,48,.2)}
@keyframes orbit{to{transform:rotate(360deg)}}

.panel-info h3{font-size:42px;margin:12px 0;letter-spacing:-.03em}
.panel-info p{color:var(--ink-dim);font-size:15px;max-width:440px;margin-bottom:20px}
.tag-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.tag{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  padding:6px 11px;border-radius:6px;background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--ink-dim)}

.panel-price{
  display:flex;gap:20px;margin-bottom:20px;padding:14px 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.panel-price>div{display:flex;align-items:baseline;font-family:var(--font-display);font-size:26px;font-weight:600}
.panel-price small{font-family:var(--font-mono);font-size:11px;color:var(--ink-mute);margin-left:4px;font-weight:400;letter-spacing:.06em}
.rupee{font-size:.72em;color:var(--ink-dim);margin-right:2px}

/* LIBRARY */
.library-rows{display:flex;flex-direction:column;gap:16px;margin-bottom:32px}
.lib-row{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.lib-track{display:flex;gap:16px;animation:scroll 50s linear infinite;width:max-content}
.lib-row.reverse .lib-track{animation-direction:reverse;animation-duration:60s}
.game-tile{
  width:260px;flex-shrink:0;position:relative;border-radius:14px;overflow:hidden;
  aspect-ratio:3/4;border:1px solid var(--line);
  transition:transform .25s, border-color .25s;
}
.game-tile:hover{transform:translateY(-4px) scale(1.02);border-color:rgba(255,59,48,.4)}
.game-tile .ph{height:100%}
.game-tile span{
  position:absolute;bottom:12px;left:12px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  padding:5px 9px;border-radius:6px;background:rgba(0,0,0,.7);backdrop-filter:blur(6px);
}
.library-foot{
  display:flex;gap:32px;align-items:center;justify-content:center;
  padding-top:32px;border-top:1px solid var(--line);flex-wrap:wrap;
}
.library-foot>div{display:flex;align-items:baseline;gap:10px;color:var(--ink-dim)}
.library-foot b{font-family:var(--font-display);font-size:24px;color:var(--ink);font-weight:600}
.library-foot a:hover{color:var(--ember)}

/* HOW */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.step{position:relative;padding:24px;border-radius:20px;background:var(--panel);border:1px solid var(--line);overflow:hidden}
.step::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at top left,rgba(255,59,48,.08),transparent 50%);pointer-events:none}
.step-num{font-family:var(--font-display);font-size:80px;font-weight:600;color:var(--ember);line-height:1;letter-spacing:-.04em;margin-bottom:24px}
.step-line{height:1px;background:linear-gradient(90deg,var(--ember),transparent);margin-bottom:28px}
.step h3{font-size:22px;margin-bottom:8px;letter-spacing:-.02em}
.step p{color:var(--ink-dim);margin-bottom:16px;line-height:1.5}
.step-meta{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-mute);padding-top:16px;border-top:1px solid var(--line)}

/* PLANS */
.plan-toggle{display:inline-flex;gap:4px;padding:5px;background:var(--panel);border:1px solid var(--line);border-radius:999px;margin:0 auto 32px;justify-self:center}
.plans{display:flex;flex-direction:column;align-items:center}
.plans .section-head{margin-bottom:48px}
.pt{padding:10px 20px;border-radius:999px;font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-dim);transition:all .2s}
.pt.active{background:var(--ember);color:#fff}
.plan-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;width:100%;max-width:1200px}
.plan{
  position:relative;padding:28px;border-radius:24px;
  background:var(--panel);border:1px solid var(--line);
  display:flex;flex-direction:column;gap:16px;
  transition:transform .25s, border-color .25s;
}
.plan>.btn{margin-top:auto}
.plan:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.18)}
.plan.featured{background:linear-gradient(180deg, rgba(255,59,48,.08), rgba(255,59,48,0) 60%), var(--panel);border-color:rgba(255,59,48,.4)}
.plan.featured:hover{border-color:var(--ember)}
.feat-badge{position:absolute;top:-11px;left:50%;transform:translateX(-50%);
  font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  background:var(--ember);color:#fff;padding:5px 12px;border-radius:999px;font-weight:600}
.plan-head{display:flex;justify-content:space-between;align-items:center}
.plan-head>span:first-child{font-family:var(--font-display);font-size:19px;font-weight:600}
.plan-tag{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-mute);padding:4px 9px;border:1px solid var(--line);border-radius:6px}
.plan-price{display:flex;align-items:baseline;font-family:var(--font-display);font-weight:600;letter-spacing:-.02em}
.plan-price b{font-size:64px;line-height:1;font-weight:600}
.plan-price small{font-family:var(--font-mono);font-size:12px;color:var(--ink-mute);margin-left:6px;font-weight:400;letter-spacing:.06em}
.plan ul,.plan-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px;color:var(--ink-dim);flex:1}
.plan ul li{position:relative;padding-left:24px;font-size:13px;line-height:1.4}
.plan ul li::before{content:"";position:absolute;left:0;top:9px;width:14px;height:2px;background:var(--ember)}
.plan-visual{position:relative;border-radius:16px;overflow:hidden;aspect-ratio:16/10;background:#0a0a0c;border:1px solid var(--line);margin-bottom:4px}
.plan-visual .ph{height:100%}
.plan.featured .plan-visual{border-color:rgba(255,59,48,.3)}
.plan-gradient{background:linear-gradient(135deg, rgba(255,59,48,.12) 0%, rgba(20,20,30,.9) 50%, rgba(255,154,60,.08) 100%);display:flex;align-items:center;justify-content:center}
.plan-product-img{width:60%;height:auto;object-fit:contain;filter:drop-shadow(0 6px 20px rgba(0,0,0,.5))}
.plan-discount{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;text-align:center;min-height:24px;
  color:var(--ember);background:rgba(255,59,48,.1);border:1px solid rgba(255,59,48,.2);padding:5px 12px;border-radius:8px;
  display:none;
}
.plan-discount.visible{display:block}
.plan.featured .plan-discount{color:var(--ink-dim);background:rgba(255,255,255,.05);border-color:var(--line)}
.plan-note{margin-top:24px;font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;color:var(--ink-mute);text-align:center}

/* PROOF */
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.review{padding:20px;border-radius:20px;background:var(--panel);border:1px solid var(--line);display:flex;flex-direction:column;gap:14px}
.stars{color:var(--ember);font-size:18px;letter-spacing:3px}
.review p{color:var(--ink);font-size:16px;line-height:1.55;margin:0}
.reviewer{display:flex;align-items:center;gap:12px;padding-top:18px;border-top:1px solid var(--line)}
.avatar{width:42px;height:42px;border-radius:50%;overflow:hidden;flex-shrink:0}
.reviewer b{display:block;font-family:var(--font-display);font-weight:600;font-size:15px}
.reviewer span{font-family:var(--font-mono);font-size:11px;color:var(--ink-mute);letter-spacing:.04em}

/* FAQ */
.faq-list{max-width:880px;margin:0 auto;display:flex;flex-direction:column;gap:2px}
.faq-list details{
  border-bottom:1px solid var(--line);
  padding:16px 8px;transition:background .2s;
}
.faq-list details[open]{background:rgba(255,255,255,.02)}
.faq-list summary{
  display:flex;justify-content:space-between;align-items:flex-start;gap:16px;
  font-family:var(--font-display);font-size:17px;font-weight:500;letter-spacing:-.01em;
  cursor:pointer;list-style:none;width:100%;
}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary span{font-size:24px;color:var(--ink-dim);transition:transform .25s}
.faq-list details[open] summary span{transform:rotate(45deg);color:var(--ember)}
.faq-list p{margin:14px 0 0;color:var(--ink-dim);font-size:15px;line-height:1.6;max-width:640px}

/* CTA */
.cta{max-width:1440px;margin:0 auto;padding:80px 48px;position:relative}
.cta-bg{position:absolute;inset:48px;border-radius:32px;overflow:hidden;z-index:0;opacity:.45}
.cta-bg .ph{height:100%}
.cta-inner{
  position:relative;z-index:1;
  padding:60px 48px;border-radius:32px;text-align:center;
  background:linear-gradient(180deg, rgba(10,10,15,.4), rgba(10,10,15,.85));
  border:1px solid var(--line);
  backdrop-filter:blur(6px);
}
.cta-inner .eyebrow{margin-bottom:16px}
.cta-inner h2{font-size:clamp(36px, 5vw, 72px);margin-bottom:12px;line-height:1;letter-spacing:-.03em}
.cta-inner>p{color:var(--ink-dim);font-size:16px;margin:0 auto 28px;max-width:540px;line-height:1.5}
.cta-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:24px}
.cta-btns a{max-width:300px}
.cta-foot{font-family:var(--font-mono);font-size:12px;color:var(--ink-mute);letter-spacing:.06em}

/* FOOTER */
.foot{position:relative;padding:60px 48px 0;max-width:1440px;margin:0 auto;border-top:1px solid var(--line)}
.foot-top{display:grid;grid-template-columns:1.2fr 2fr;gap:48px;padding-bottom:64px}
.foot-brand{display:flex;flex-direction:column;gap:12px;max-width:260px}
.foot-brand b{font-family:var(--font-display);font-size:20px;font-weight:600}
.foot-brand p{color:var(--ink-mute);font-size:14px;margin:0}
.foot-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.foot-cols h5{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:16px;font-weight:500}
.foot-cols a{display:block;color:var(--ink-dim);font-size:14px;padding:5px 0;transition:color .15s}
.foot-cols a:hover{color:var(--ember)}
.foot-bottom{display:flex;justify-content:space-between;padding:28px 0;border-top:1px solid var(--line);font-family:var(--font-mono);font-size:12px;color:var(--ink-mute);flex-wrap:wrap;gap:12px}
.foot-mega{
  font-family:var(--font-display);
  font-size:clamp(60px, 12vw, 180px);
  font-weight:600;letter-spacing:-.04em;line-height:.9;
  text-align:center;
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0) 80%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  margin:40px 0 0;overflow:visible;
  pointer-events:none;white-space:nowrap;
}

/* Reveal animation */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s, transform .8s}
.reveal.in{opacity:1;transform:none}

/* Responsive */
/* Tablet / iPad landscape: 961-1200px */
@media (min-width:961px) and (max-width:1200px){
  .nav{gap:20px;padding:6px 6px 6px 16px}
  .brand-text{font-size:16px}
  .nav-links{gap:20px;font-size:13px}
  .hero-grid{gap:40px}
  .hero-title{font-size:clamp(44px, 7vw, 80px)}
  .console-stage{min-height:520px}
  .panel-info h3{font-size:48px}
  .panel-info p{font-size:14px}
  .panel-price>div{font-size:22px}
  .plan{padding:20px}
  .plan-price b{font-size:48px}
  .plan ul li,.plan-list li{font-size:12px}
}

@media (max-width:960px){
  .nav{gap:16px;padding:6px 6px 6px 12px}
  .nav-links{display:none}
  .brand-text{font-size:15px}
  .hero{padding:120px 24px 40px}
  .hero-grid{grid-template-columns:1fr;gap:40px}
  .hero-stack-spacer{display:none}
  /* Hide the small floating decor on phones — they crowd the text. */
  .hero-title-wrap .deco-float{display:none}
  /* Mobile background: clean full-bleed cover, no mask, no flip, no zoom.
     The image sits at moderate opacity over the dark page background — the
     dark base provides text legibility without the image looking "placed". */
  .hero::after{
    background-image:url('images/hero-bg-mobile.webp')!important;
    background-size:cover!important;
    background-position:center center!important;
    background-repeat:no-repeat!important;
    transform:none!important;
    mask-image:none!important;
    -webkit-mask-image:none!important;
    width:100%!important;
    height:100%!important;
    opacity:.45!important;
  }
  /* Soft top-and-bottom dark scrim so the text and CTAs read cleanly over
     whatever part of the photo lands behind them. */
  .hero::before{
    content:"";position:absolute;inset:0;z-index:-1;
    background:linear-gradient(180deg,rgba(8,8,10,.55) 0%,rgba(8,8,10,.25) 50%,rgba(8,8,10,.7) 100%)!important;
  }
  section{padding:80px 24px}
  /* Console panel: stack image + text vertically, make stage auto-height */
  .console-stage{min-height:auto;display:block;position:relative}
  .console-panel{position:relative;inset:auto;grid-template-columns:1fr;gap:32px;transform:none;display:none}
  .console-panel.active{display:grid}
  .panel-visual{max-height:280px;aspect-ratio:16/10}
  .panel-info h3{font-size:36px}
  .panel-price{flex-wrap:wrap;gap:16px}
  .steps,.plan-grid,.reviews{grid-template-columns:1fr}
  .foot-top{grid-template-columns:1fr}
  .foot-cols{grid-template-columns:repeat(2,1fr)}
  .foot-brand-text{font-size:20px}
  .cta-bg{inset:16px}
  .cta-inner{padding:48px 24px}
  .hero-stats{gap:20px;flex-wrap:wrap}
}