/* =========================================================================
   ARENA OF MINDS — DESIGN TOKENS
   Palette:
     --void        #05060c   deepest background, between the stars
     --stone-deep  #0c0f1c   arena stone / panel background
     --stone       #161a2c   raised panel surface
     --blue-neon   #4fd8ff   the "logic" glow — cool, clinical, electric
     --violet-neon #a855f7   the "mind" glow — the thinkers, the unknown
     --gold-relic  #d9b46a   ancient carvings, worn stone, relic light
     --ink-hi      #eef1fb   primary text
     --ink-lo      #8b93b3   secondary text
   Type:
     Display  — Cinzel        (chiseled stone / ancient inscription)
     UI/Label — Orbitron      (arena HUD, terminal, futuristic overlay)
     Body     — Rajdhani      (angular, readable, sci-fi adjacent)
   Signature element: "The Gate" — a layered concentric portal in the hero
   built from rotating conic + radial gradients, ringed with carved runes,
   that visually reappears (smaller, quieter) as a motif across sections.
   ========================================================================= */
:root{
  --void:#05060c;
  --stone-deep:#0b0e1a;
  --stone:#141828;
  --stone-hi:#1c2136;
  --blue-neon:#4fd8ff;
  --blue-dim:#2a6f8a;
  --violet-neon:#a855f7;
  --violet-dim:#5b3080;
  --gold-relic:#d9b46a;
  --ink-hi:#eef1fb;
  --ink-lo:#8b93b3;
  --ink-faint:#525a78;
  --line:rgba(143,159,214,0.14);
  --radius-s:6px;
  --radius-m:14px;
  --radius-l:26px;
  --ease:cubic-bezier(.16,.8,.28,1);
  --font-display:'Cinzel',serif;
  --font-ui:'Orbitron',sans-serif;
  --font-body:'Rajdhani',sans-serif;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;overflow-x:hidden;}
body{
  background:var(--void);
  color:var(--ink-hi);
  font-family:var(--font-body);
  font-size:18px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  cursor:default;
}
img,svg{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;letter-spacing:.02em;line-height:1.15;}
::selection{background:var(--violet-neon);color:var(--void);}

/* Respect reduced motion everywhere */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important;}
}

/* Focus visibility for keyboard nav */
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--blue-neon);
  outline-offset:3px;
  border-radius:4px;
}

.container{width:min(1240px,100% - 48px);margin-inline:auto;}
.eyebrow{
  font-family:var(--font-ui);
  font-size:.72rem;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--blue-neon);
  display:inline-flex;
  align-items:center;
  gap:12px;
}
.eyebrow::before,.eyebrow::after{content:'';width:26px;height:1px;background:linear-gradient(90deg,transparent,var(--blue-neon));}
.eyebrow::after{background:linear-gradient(90deg,var(--blue-neon),transparent);}

.section-head{text-align:center;margin-bottom:64px;}
.section-head h2{font-size:clamp(2rem,4.5vw,3.2rem);margin-top:18px;color:var(--ink-hi);text-transform:uppercase;}
.section-head p{color:var(--ink-lo);max-width:560px;margin:16px auto 0;font-size:1.15rem;}

.glow-text{
  background:linear-gradient(90deg,var(--blue-neon),var(--violet-neon));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* ===================== AMBIENT BACKGROUND LAYERS ===================== */
#bg-fixed{
  position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  background:
    radial-gradient(ellipse 60% 40% at 50% -10%, rgba(168,85,247,.16), transparent 60%),
    radial-gradient(ellipse 50% 30% at 80% 10%, rgba(79,216,255,.10), transparent 60%),
    var(--void);
}
#stars{position:absolute;inset:0;}
.star{position:absolute;background:#fff;border-radius:50%;opacity:.7;animation:twinkle linear infinite;}
@keyframes twinkle{0%,100%{opacity:.15;}50%{opacity:.9;}}

#cursor-glow{
  position:fixed;top:0;left:0;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle,rgba(79,216,255,.09),transparent 70%);
  pointer-events:none;z-index:1;transform:translate(-50%,-50%);
  transition:opacity .3s ease;
  will-change:transform;
}

/* Scroll progress bar */
#scroll-progress{
  position:fixed;top:0;left:0;height:3px;width:0%;
  background:linear-gradient(90deg,var(--blue-neon),var(--violet-neon));
  z-index:999;box-shadow:0 0 12px var(--blue-neon);
  transition:width .08s linear;
}

/* ===================== CINEMATIC BOOT INTRO =====================
   Pure-CSS timeline: every line is an absolutely-positioned element
   that fades in / holds / fades out on its own animation-delay, so
   the whole sequence plays without any JS timers. JS only removes
   the scroll-lock once the exit animation finishes. Timeline (s):
     0.3  SYSTEM ONLINE...
     2.2  ARENA INITIALIZING...
     4.1  Searching for worthy challenger...
     6.3  Player Found
     7.8  Loading Consciousness...  (progress bar)
    10.2  WELCOME TO THE ARENA OF MINDS (holds)
    12.0  whole screen fades to reveal the site
   =================================================================*/
#loader{
  position:fixed;inset:0;z-index:1000;background:#000;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  animation:loader-exit 1.2s ease forwards;
  animation-delay:12s;
}
html.intro-lock,html.intro-lock body{overflow:hidden;height:100%;}

@keyframes loader-exit{
  0%{opacity:1;visibility:visible;}
  99%{visibility:visible;}
  100%{opacity:0;visibility:hidden;pointer-events:none;}
}

/* faint vignette + scanline sweep for atmosphere */
#loader::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 70% 60% at 50% 50%, rgba(79,216,255,.06), transparent 70%);
}
.loader-scanline{
  position:absolute;left:0;right:0;height:2px;top:0;
  background:linear-gradient(90deg,transparent,rgba(79,216,255,.7),transparent);
  animation:scan-sweep 3.4s linear infinite;
  opacity:.55;
}
@keyframes scan-sweep{0%{transform:translateY(-10vh);}100%{transform:translateY(110vh);}}

.boot-sequence{position:relative;width:100%;height:100%;}

.boot-line{
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);
  margin:0;opacity:0;white-space:nowrap;
  font-family:var(--font-ui);letter-spacing:.22em;text-transform:uppercase;
  font-size:clamp(.8rem,2.4vw,1.05rem);
  color:var(--blue-neon);
  text-shadow:0 0 16px rgba(79,216,255,.65);
  animation:boot-cycle 1.7s ease forwards;
  animation-fill-mode:both;
}
@keyframes boot-cycle{
  0%{opacity:0;transform:translate(-50%,-46%);filter:blur(3px);}
  12%{opacity:1;transform:translate(-50%,-50%);filter:blur(0);}
  82%{opacity:1;transform:translate(-50%,-50%);filter:blur(0);}
  100%{opacity:0;transform:translate(-50%,-54%);filter:blur(3px);}
}
/* first line gets a subtle terminal flicker layered on top */
@keyframes boot-cycle-glitch{
  0%{opacity:0;filter:blur(3px);}
  12%{opacity:1;filter:blur(0);}
  14%{opacity:.4;}
  16%{opacity:1;}
  38%{opacity:1;}
  40%{opacity:.5;}
  42%{opacity:1;}
  82%{opacity:1;}
  100%{opacity:0;filter:blur(3px);}
}

.boot-line.line-1{ animation-name:boot-cycle-glitch; animation-delay:.3s; animation-duration:1.7s; }
.boot-line.line-2{ animation-delay:2.2s; animation-duration:1.7s; }
.boot-line.line-3{ animation-delay:4.1s; animation-duration:2.0s; }
.boot-line.line-4{
  animation-delay:6.3s; animation-duration:1.3s;
  font-family:var(--font-display);letter-spacing:.08em;font-size:clamp(1.1rem,3vw,1.6rem);
  color:var(--ink-hi);text-shadow:0 0 22px rgba(168,85,247,.7);
}
.boot-line.line-5{ animation-delay:7.8s; animation-duration:2.2s; }

.load-bar{
  display:inline-block;width:130px;height:3px;margin-left:16px;vertical-align:middle;
  background:rgba(255,255,255,.08);border-radius:2px;overflow:hidden;position:relative;top:-2px;
}
.load-bar-fill{
  display:block;height:100%;width:0%;
  background:linear-gradient(90deg,var(--blue-neon),var(--violet-neon));
  animation:bar-fill 1.6s ease forwards;animation-delay:8.1s;
}
@keyframes bar-fill{0%{width:0%;}100%{width:100%;}}

.boot-line.line-6{
  animation-name:boot-final;animation-delay:10.2s;animation-duration:1.6s;animation-fill-mode:both;
  font-family:var(--font-display);text-transform:uppercase;
  font-size:clamp(1.3rem,4.4vw,2.4rem);white-space:normal;text-align:center;
  max-width:80vw;letter-spacing:.06em;color:var(--ink-hi);text-shadow:none;
}
.boot-line.line-6 .glow-text{filter:drop-shadow(0 0 18px rgba(168,85,247,.55));}
@keyframes boot-final{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.92);filter:blur(4px);}
  35%{opacity:1;transform:translate(-50%,-50%) scale(1);filter:blur(0);}
  100%{opacity:1;transform:translate(-50%,-50%) scale(1);filter:blur(0);}
}

@media (prefers-reduced-motion: reduce){
  .loader-scanline{display:none;}
  .boot-line{animation:none !important;opacity:0;}
  .boot-line.line-6{opacity:1;transform:translate(-50%,-50%);}
  .load-bar-fill{animation:none;width:100%;}
  #loader{animation:loader-exit .6s ease forwards;animation-delay:1s;}
}

/* ===================== SKIP LINK ===================== */
.skip-link{
  position:absolute;left:-999px;top:0;background:var(--stone);color:var(--ink-hi);
  padding:12px 20px;z-index:1001;border-radius:0 0 8px 0;
}
.skip-link:focus{left:0;}

/* ===================== NAVBAR ===================== */
header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  padding:18px 0;
  transition:background .4s var(--ease), padding .4s var(--ease), border-color .4s var(--ease);
  border-bottom:1px solid transparent;
}
header.scrolled{
  background:rgba(5,6,12,.82);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  padding:12px 0;
  border-bottom:1px solid var(--line);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;}
.brand{display:flex;align-items:center;gap:12px;font-family:var(--font-display);font-size:1.15rem;letter-spacing:.06em;}
.brand-mark{
  width:38px;height:38px;position:relative;flex:0 0 auto;
}
.brand-mark svg{width:100%;height:100%;}
.brand small{display:block;font-family:var(--font-ui);font-size:.6rem;letter-spacing:.3em;color:var(--blue-neon);font-weight:500;}

.nav-links{display:flex;gap:6px;align-items:center;}
.nav-links a{
  position:relative;font-family:var(--font-ui);font-size:.78rem;letter-spacing:.14em;
  text-transform:uppercase;padding:10px 16px;color:var(--ink-lo);
  transition:color .25s ease;
}
.nav-links a::after{
  content:'';position:absolute;left:16px;right:16px;bottom:5px;height:1px;
  background:linear-gradient(90deg,var(--blue-neon),var(--violet-neon));
  transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease);
}
.nav-links a:hover,.nav-links a:focus-visible{color:var(--ink-hi);}
.nav-links a:hover::after,.nav-links a:focus-visible::after,.nav-links a.active::after{transform:scaleX(1);}
.nav-links a.active{color:var(--blue-neon);}

.btn{
  position:relative;overflow:hidden;
  font-family:var(--font-ui);font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;
  padding:13px 28px;border-radius:2px;display:inline-flex;align-items:center;gap:10px;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
  isolation:isolate;
}
.btn:active{transform:translateY(1px) scale(.98);}
.btn-primary{
  color:var(--void);background:linear-gradient(120deg,var(--blue-neon),var(--violet-neon));
  box-shadow:0 0 24px rgba(79,216,255,.35), 0 0 0 1px rgba(255,255,255,.15) inset;
  font-weight:700;
}
.btn-primary:hover{box-shadow:0 0 40px rgba(168,85,247,.55), 0 0 0 1px rgba(255,255,255,.25) inset;transform:translateY(-2px);}
.btn-ghost{
  color:var(--ink-hi);border:1px solid var(--line);background:rgba(255,255,255,.02);
}
.btn-ghost:hover{border-color:var(--blue-neon);box-shadow:0 0 20px rgba(79,216,255,.18);transform:translateY(-2px);}
.btn-small{padding:9px 18px;font-size:.68rem;}
.btn-large{padding:18px 38px;font-size:.9rem;letter-spacing:.18em;gap:12px;}
.btn-large svg{width:19px;height:19px;}

.nav-cta{display:none;}
@media(min-width:900px){.nav-cta{display:inline-flex;}}

.ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.45);transform:scale(0);animation:ripple-anim .6s ease-out;pointer-events:none;}
@keyframes ripple-anim{to{transform:scale(3.2);opacity:0;}}

.nav-toggle{
  display:flex;flex-direction:column;gap:5px;padding:8px;z-index:110;
}
.nav-toggle span{width:24px;height:2px;background:var(--ink-hi);transition:transform .3s ease, opacity .3s ease;}
@media(min-width:900px){.nav-toggle{display:none;}}
@media(max-width:899px){
  .nav-links{
    position:fixed;inset:0 0 0 auto;width:min(300px,80%);height:100vh;
    background:rgba(8,10,20,.98);backdrop-filter:blur(20px);
    flex-direction:column;justify-content:center;align-items:flex-start;padding:40px;gap:8px;
    transform:translateX(100%);transition:transform .45s var(--ease);
    border-left:1px solid var(--line);
  }
  .nav-links.open{transform:translateX(0);}
  .nav-links a{font-size:1rem;padding:14px 8px;width:100%;}
  .nav-cta.mobile{display:inline-flex;margin-top:20px;}
}

/* ===================== HERO ===================== */
.hero{
  position:relative;min-height:100vh;display:flex;align-items:center;
  padding:140px 0 100px;overflow:hidden;
}
.hero-bg{position:absolute;inset:0;z-index:0;}
.hero-gate{
  position:absolute;right:-8%;top:50%;transform:translateY(-50%);
  width:min(62vw,900px);aspect-ratio:1/1;opacity:.9;
  filter:drop-shadow(0 0 60px rgba(79,216,255,.25));
}
@media(max-width:1000px){.hero-gate{opacity:.35;right:-30%;}}

.smoke{
  position:absolute;inset:-10% -10%;
  background:
    radial-gradient(ellipse 40% 60% at 20% 100%, rgba(80,40,140,.35), transparent 60%),
    radial-gradient(ellipse 50% 50% at 90% 80%, rgba(20,60,90,.3), transparent 60%);
  animation:smoke-drift 22s ease-in-out infinite alternate;
  z-index:0;
}
@keyframes smoke-drift{0%{transform:translateX(-2%) translateY(0);}100%{transform:translateX(3%) translateY(-2%);}}

.hero-content{position:relative;z-index:2;max-width:680px;}
.hero .eyebrow{margin-bottom:22px;}
.hero h1{
  font-size:clamp(3rem,8vw,6rem);
  text-transform:uppercase;
  color:var(--ink-hi);
  text-shadow:0 0 40px rgba(79,216,255,.25);
}
.hero h1 .line2{
  display:block;
  background:linear-gradient(100deg,var(--blue-neon) 10%,var(--violet-neon) 90%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-sub{
  margin-top:26px;font-size:clamp(1.05rem,2vw,1.35rem);color:var(--ink-lo);
  max-width:460px;font-weight:500;border-left:2px solid var(--violet-neon);padding-left:18px;
}
.hero-sub strong{color:var(--ink-hi);font-weight:600;}
.hero-actions{display:flex;gap:16px;margin-top:44px;flex-wrap:wrap;}

.hero-stats{
  display:flex;gap:40px;margin-top:64px;flex-wrap:wrap;
}
.stat b{
  display:block;font-family:var(--font-ui);font-size:1.9rem;color:var(--ink-hi);
  background:linear-gradient(90deg,var(--blue-neon),var(--violet-neon));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.stat span{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);font-family:var(--font-ui);}

.scroll-cue{
  position:absolute;bottom:36px;left:50%;transform:translateX(-50%);z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--ink-faint);
  font-family:var(--font-ui);font-size:.65rem;letter-spacing:.3em;text-transform:uppercase;
}
.scroll-cue .rail{width:1px;height:44px;background:linear-gradient(var(--blue-neon),transparent);position:relative;overflow:hidden;}
.scroll-cue .rail::after{content:'';position:absolute;top:-20px;left:0;width:100%;height:20px;background:linear-gradient(var(--ink-hi),transparent);animation:cue-drop 1.8s ease-in-out infinite;}
@keyframes cue-drop{0%{top:-20px;}100%{top:44px;}}

/* Floating rune glyphs */
.rune{
  position:absolute;font-family:var(--font-display);color:var(--violet-neon);
  opacity:.35;font-size:1.4rem;animation:float-rune 9s ease-in-out infinite;pointer-events:none;
  text-shadow:0 0 12px currentColor;
}
@keyframes float-rune{0%,100%{transform:translateY(0) rotate(0deg);}50%{transform:translateY(-22px) rotate(8deg);}}

/* ===================== SECTION SPACING ===================== */
section{position:relative;z-index:1;padding:130px 0;}
.divider{
  width:min(1240px,100% - 48px);margin:0 auto;height:1px;
  background:linear-gradient(90deg,transparent,var(--line),transparent);
}

/* reveal-on-scroll base */
.reveal{opacity:0;transform:translateY(36px);transition:opacity .9s var(--ease), transform .9s var(--ease);}
.reveal.in{opacity:1;transform:translateY(0);}
.reveal-stagger > *{opacity:0;transform:translateY(30px);transition:opacity .7s var(--ease), transform .7s var(--ease);}
.reveal-stagger.in > *{opacity:1;transform:translateY(0);}
.reveal-stagger.in > *:nth-child(1){transition-delay:.05s;}
.reveal-stagger.in > *:nth-child(2){transition-delay:.12s;}
.reveal-stagger.in > *:nth-child(3){transition-delay:.19s;}
.reveal-stagger.in > *:nth-child(4){transition-delay:.26s;}
.reveal-stagger.in > *:nth-child(5){transition-delay:.33s;}
.reveal-stagger.in > *:nth-child(6){transition-delay:.40s;}

/* ===================== STORY SECTION ===================== */
.story-section{background:linear-gradient(180deg,transparent,rgba(11,14,26,.6) 20%,rgba(11,14,26,.6) 80%,transparent);}
.story-grid{display:grid;grid-template-columns:1fr;gap:0;}
.story-panel{
  position:relative;max-width:820px;margin:0 auto;padding:56px clamp(24px,5vw,72px);
  background:linear-gradient(180deg,rgba(20,24,40,.55),rgba(11,14,26,.55));
  border:1px solid var(--line);border-radius:var(--radius-l);
  backdrop-filter:blur(18px);
  box-shadow:0 40px 80px -30px rgba(0,0,0,.6);
}
.story-panel::before{
  content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:linear-gradient(140deg,rgba(79,216,255,.4),transparent 40%,transparent 60%,rgba(168,85,247,.4));
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  pointer-events:none;
}
.story-corner{position:absolute;width:26px;height:26px;border:1px solid var(--gold-relic);opacity:.6;}
.story-corner.tl{top:14px;left:14px;border-right:none;border-bottom:none;}
.story-corner.br{bottom:14px;right:14px;border-left:none;border-top:none;}

.story-lede{font-size:1.2rem;color:var(--ink-lo);margin-bottom:28px;}
.story-voice{
  font-family:var(--font-display);font-size:clamp(1.3rem,2.6vw,1.7rem);line-height:1.5;
  color:var(--ink-hi);margin:28px 0;padding-left:22px;border-left:2px solid var(--blue-neon);
}
.story-voice em{
  font-style:normal;
  background:linear-gradient(90deg,var(--blue-neon),var(--violet-neon));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.story-body p{color:var(--ink-lo);margin-bottom:16px;font-size:1.08rem;}
.story-body strong{color:var(--gold-relic);font-weight:600;}
.story-warning{
  margin-top:34px;padding:18px 22px;border:1px dashed rgba(168,85,247,.4);
  border-radius:var(--radius-s);color:var(--violet-neon);font-family:var(--font-ui);
  font-size:.85rem;letter-spacing:.05em;background:rgba(168,85,247,.06);
}

/* Typing effect target */
#typed-line{border-right:2px solid var(--blue-neon);padding-right:4px;animation:blink-caret .9s step-end infinite;}
@keyframes blink-caret{50%{border-color:transparent;}}

/* ===================== OPPONENTS SECTION ===================== */
.opponents-carousel-wrap{position:relative;}
.opponents-track{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(240px,1fr);
  gap:22px;overflow-x:auto;padding:12px 4px 28px;scroll-snap-type:x proximity;
  scrollbar-width:thin;scrollbar-color:var(--violet-dim) transparent;
}
.opponents-track::-webkit-scrollbar{height:6px;}
.opponents-track::-webkit-scrollbar-thumb{background:var(--violet-dim);border-radius:4px;}

.opp-card{
  scroll-snap-align:start;
  position:relative;border-radius:var(--radius-m);overflow:hidden;
  background:var(--stone);border:1px solid var(--line);
  transition:transform .45s var(--ease), border-color .45s ease, box-shadow .45s ease;
  min-height:420px;display:flex;flex-direction:column;justify-content:flex-end;
}
.opp-card:hover,.opp-card:focus-within{
  transform:translateY(-10px);
  border-color:rgba(79,216,255,.5);
  box-shadow:0 30px 60px -20px rgba(79,216,255,.25);
}
.opp-portrait{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(circle at 50% 30%, var(--pc1,rgba(79,216,255,.25)), transparent 60%),
    linear-gradient(180deg,rgba(20,24,40,.2),rgba(6,7,14,.95) 85%);
}
.opp-portrait svg{width:56%;opacity:.9;filter:drop-shadow(0 0 22px var(--pc1,rgba(79,216,255,.4)));transition:transform .5s var(--ease);}
.opp-card:hover .opp-portrait svg{transform:scale(1.06) translateY(-4px);}
.opp-portrait::after{
  content:'';position:absolute;inset:0;
  background-image:radial-gradient(circle,rgba(255,255,255,.5) 1px,transparent 1.4px);
  background-size:26px 26px;opacity:.05;
}
.opp-info{position:relative;z-index:2;padding:22px 20px 24px;}
.opp-name{font-family:var(--font-display);font-size:1.3rem;color:var(--ink-hi);}
.opp-title{font-family:var(--font-ui);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--blue-neon);margin-top:4px;}
.opp-diff{display:flex;align-items:center;gap:8px;margin-top:14px;font-family:var(--font-ui);font-size:.62rem;letter-spacing:.14em;color:var(--ink-faint);}
.opp-stars{display:flex;gap:3px;}
.opp-stars i{width:7px;height:7px;border-radius:1px;background:var(--ink-faint);transform:rotate(45deg);}
.opp-stars i.filled{background:var(--gold-relic);box-shadow:0 0 6px var(--gold-relic);}
.opp-quote{
  position:absolute;inset:0;z-index:3;padding:22px;display:flex;align-items:flex-end;
  background:linear-gradient(0deg,rgba(5,6,12,.94),rgba(5,6,12,.5) 55%,transparent);
  opacity:0;transition:opacity .4s ease;font-size:.92rem;color:var(--ink-lo);font-style:italic;
}
.opp-card:hover .opp-quote,.opp-card:focus-within .opp-quote{opacity:1;}

.carousel-btn{
  position:absolute;top:50%;transform:translateY(-50%);z-index:5;
  width:44px;height:44px;border-radius:50%;background:rgba(15,18,32,.8);
  border:1px solid var(--line);display:flex;align-items:center;justify-content:center;
  transition:background .25s ease,border-color .25s ease;
}
.carousel-btn:hover{border-color:var(--blue-neon);background:rgba(20,24,40,.95);}
.carousel-btn.prev{left:-8px;}
.carousel-btn.next{right:-8px;}
@media(max-width:720px){.carousel-btn{display:none;}}

/* ===================== FEATURES ===================== */
.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px;}
.feature-card{
  padding:30px 26px;border-radius:var(--radius-m);background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,0));
  border:1px solid var(--line);position:relative;overflow:hidden;
  transition:transform .4s var(--ease), border-color .4s ease;
}
.feature-card:hover{transform:translateY(-6px);border-color:rgba(168,85,247,.45);}
.feature-card::before{
  content:'';position:absolute;top:-40%;left:-20%;width:60%;height:180%;
  background:linear-gradient(120deg,transparent,rgba(79,216,255,.08),transparent);
  transform:rotate(20deg) translateX(-120%);transition:transform .7s ease;
}
.feature-card:hover::before{transform:rotate(20deg) translateX(60%);}
.feature-icon{
  width:52px;height:52px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle,rgba(79,216,255,.16),rgba(168,85,247,.1));
  border:1px solid var(--line);margin-bottom:20px;
}
.feature-icon svg{width:26px;height:26px;stroke:var(--blue-neon);}
.feature-card h3{font-size:1.15rem;color:var(--ink-hi);margin-bottom:8px;font-family:var(--font-display);}
.feature-card p{color:var(--ink-lo);font-size:.98rem;}

/* ===================== SCREENSHOTS ===================== */
.screens-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px;}
.screen{
  position:relative;aspect-ratio:16/10;border-radius:var(--radius-m);overflow:hidden;
  border:1px solid var(--line);background:var(--stone-deep);
  transition:transform .5s var(--ease);
}
.screen:hover{transform:scale(1.02);}
.screen-fill{
  position:absolute;inset:0;
  background:
    linear-gradient(160deg,var(--sc1,rgba(79,216,255,.3)),transparent 55%),
    linear-gradient(-20deg,var(--sc2,rgba(168,85,247,.3)),transparent 55%),
    var(--stone-deep);
}
.screen-grid-lines{
  position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:34px 34px;
  mask-image:radial-gradient(ellipse at center, black 40%, transparent 90%);
}
.screen-glow{position:absolute;border-radius:50%;filter:blur(30px);opacity:.55;animation:pulse-glow 5s ease-in-out infinite;}
@keyframes pulse-glow{0%,100%{opacity:.35;transform:scale(1);}50%{opacity:.65;transform:scale(1.15);}}
.screen-label{
  position:absolute;bottom:16px;left:18px;z-index:2;font-family:var(--font-ui);
  font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-hi);
  text-shadow:0 2px 10px rgba(0,0,0,.6);
}
.screen-tag{
  position:absolute;top:16px;right:16px;z-index:2;font-family:var(--font-ui);font-size:.62rem;
  letter-spacing:.14em;color:var(--blue-neon);border:1px solid rgba(79,216,255,.4);
  padding:4px 9px;border-radius:20px;background:rgba(5,6,12,.5);backdrop-filter:blur(6px);
}
.screen-play{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:2;
  opacity:0;transition:opacity .3s ease;
}
.screen:hover .screen-play{opacity:1;}
.screen-play span{
  width:56px;height:56px;border-radius:50%;border:1px solid rgba(255,255,255,.4);
  display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px);
  background:rgba(5,6,12,.4);
}

/* ===================== TESTIMONIALS ===================== */
.testi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px;}
.testi-card{
  padding:30px 26px;border-radius:var(--radius-m);background:var(--stone);
  border:1px solid var(--line);position:relative;
}
.testi-stars{display:flex;gap:4px;margin-bottom:16px;}
.testi-stars svg{width:15px;height:15px;fill:var(--gold-relic);}
.testi-card p{color:var(--ink-lo);font-size:1.02rem;margin-bottom:22px;}
.testi-person{display:flex;align-items:center;gap:12px;}
.testi-avatar{
  width:40px;height:40px;border-radius:50%;flex:0 0 auto;
  background:conic-gradient(from 180deg,var(--blue-neon),var(--violet-neon),var(--blue-neon));
  display:flex;align-items:center;justify-content:center;font-family:var(--font-ui);font-weight:700;font-size:.8rem;color:var(--void);
}
.testi-name{font-size:.94rem;color:var(--ink-hi);font-weight:600;}
.testi-role{font-size:.78rem;color:var(--ink-faint);}

/* ===================== FINAL CTA ===================== */
.final-cta{text-align:center;position:relative;}
.final-cta-panel{
  max-width:760px;margin:0 auto;padding:70px 40px;border-radius:var(--radius-l);
  background:radial-gradient(ellipse at 50% 0%,rgba(79,216,255,.12),transparent 60%),linear-gradient(180deg,rgba(20,24,40,.6),rgba(11,14,26,.6));
  border:1px solid var(--line);position:relative;overflow:hidden;
}
.final-cta-panel h2{font-size:clamp(2rem,5vw,3rem);margin-bottom:18px;}
.final-cta-panel p{color:var(--ink-lo);max-width:460px;margin:0 auto 36px;font-size:1.1rem;}

/* ===================== FOOTER ===================== */
footer{padding:70px 0 40px;border-top:1px solid var(--line);position:relative;z-index:1;}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;margin-bottom:50px;}
@media(max-width:760px){.footer-grid{grid-template-columns:1fr;}}
.footer-brand p{color:var(--ink-lo);margin-top:14px;max-width:320px;font-size:.98rem;}
.footer-col h4{font-family:var(--font-ui);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-hi);margin-bottom:18px;}
.footer-col a{display:block;color:var(--ink-lo);padding:6px 0;font-size:.96rem;transition:color .2s ease,transform .2s ease;}
.footer-col a:hover{color:var(--blue-neon);transform:translateX(4px);}
.social-row{display:flex;gap:12px;margin-top:20px;}
.social-icon{
  width:40px;height:40px;border-radius:50%;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;transition:border-color .25s ease,transform .25s ease,box-shadow .25s ease;
}
.social-icon svg{width:17px;height:17px;stroke:var(--ink-lo);transition:stroke .25s ease;}
.social-icon:hover{border-color:var(--blue-neon);transform:translateY(-3px);box-shadow:0 8px 20px -6px rgba(79,216,255,.4);}
.social-icon:hover svg{stroke:var(--blue-neon);}
.footer-bottom{
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;
  padding-top:26px;border-top:1px solid var(--line);color:var(--ink-faint);font-size:.85rem;
}

/* ===================== BACK TO TOP ===================== */
#back-to-top{
  position:fixed;bottom:28px;right:28px;z-index:90;width:48px;height:48px;border-radius:50%;
  background:rgba(15,18,32,.85);border:1px solid var(--line);backdrop-filter:blur(10px);
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .3s ease,transform .3s ease,visibility .3s ease,border-color .3s ease;
}
#back-to-top.show{opacity:1;visibility:visible;transform:translateY(0);}
#back-to-top:hover{border-color:var(--blue-neon);box-shadow:0 0 20px rgba(79,216,255,.3);}
#back-to-top svg{width:18px;height:18px;stroke:var(--ink-hi);}

/* utility */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
@media(max-width:600px){
  section{padding:90px 0;}
  .hero{padding-top:120px;}
}