/* Palette taken from the Project Entropy offer page: deep space navy, icy blue, electric cyan, orange-gold CTA */
:root{
  --navy-950:#040b16;
  --navy-900:#071426;
  --navy-800:#0c2038;
  --ice-100:#e8f4ff;
  --ice-300:#a9d4f5;
  --cyan:#45c8ff;
  --cyan-glow:rgba(69,200,255,.45);
  --orange-1:#ffbe3d;
  --orange-2:#f08a1c;
  --orange-3:#c95f0e;
  --gold:#ddb463;
  --text:#dbe8f5;
  --muted:#8ea7c0;
  --display:"Barlow Condensed",Impact,"Arial Narrow",sans-serif;
  --body:"Barlow",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --pad:clamp(16px,5vw,80px);
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{background:var(--navy-950);color:var(--text);font-family:var(--body);font-size:clamp(16px,1.15vw,18px);line-height:1.6;overflow-x:hidden}
img,video{display:block;max-width:100%}
picture{display:contents}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

/* ---------- Scroll progress ---------- */
.progress{position:fixed;inset:0 0 auto 0;height:3px;z-index:60;pointer-events:none}
.progress span{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:0 50%;background:linear-gradient(90deg,var(--cyan),var(--orange-1));box-shadow:0 0 12px var(--cyan-glow)}

/* ---------- Buttons ---------- */
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:52px;padding:0 2.1em;font-family:var(--display);font-weight:700;font-size:clamp(17px,1.3vw,20px);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;border:2px solid transparent;cursor:pointer;transition:box-shadow .25s ease,background .25s ease,color .25s ease;will-change:transform}
.btn span,.btn svg{position:relative;z-index:1}
.btn--primary{color:#fff;background:linear-gradient(180deg,var(--orange-1) 0%,var(--orange-2) 55%,var(--orange-3) 100%);border-color:#ffd27a;text-shadow:0 1px 2px rgba(80,30,0,.55);box-shadow:0 0 0 1px rgba(0,0,0,.35),0 8px 24px rgba(240,138,28,.35)}
/* light sweep across primary buttons */
.btn--primary::after{content:"";position:absolute;top:-20%;bottom:-20%;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);animation:shine 3.6s ease-in-out infinite}
@keyframes shine{0%,55%{left:-60%}85%,100%{left:130%}}
.btn--primary:hover{box-shadow:0 0 0 1px rgba(0,0,0,.35),0 12px 38px rgba(240,138,28,.6)}
.btn--ghost{color:var(--ice-100);border-color:rgba(232,244,255,.85);background:rgba(4,11,22,.25);backdrop-filter:blur(4px)}
.btn--ghost:hover{background:var(--ice-100);color:var(--navy-900)}
.btn--xl{min-height:64px;padding:0 3em;font-size:clamp(20px,1.6vw,24px)}
.btn:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}

/* Hide the hero until the intro timeline takes over (main.js removes .js if GSAP is unavailable) */
.js .hero__content,.js .hero .stripes{visibility:hidden}
.word{display:inline-block;white-space:nowrap}
.char{display:inline-block;will-change:transform}

/* ---------- Type ---------- */
.line{display:block}
.mask{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.mask>.line{will-change:transform}
.display{font-family:var(--display);font-weight:800;text-transform:lowercase;line-height:.88;font-size:clamp(56px,8vw,128px);color:var(--ice-100);letter-spacing:-.01em}
.display--bar{text-transform:none;position:relative;padding-left:.35em}
.display--bar::before{content:"";position:absolute;left:0;top:.08em;bottom:.08em;width:6px;background:var(--cyan);box-shadow:0 0 18px var(--cyan-glow);transform-origin:50% 0}
.section-title{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(34px,4.4vw,64px);line-height:1;color:var(--ice-100);letter-spacing:.01em}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--display);font-weight:700;letter-spacing:.3em;text-transform:uppercase;font-size:14px;color:var(--cyan);margin-bottom:14px}
.eyebrow::before{content:"";width:28px;height:2px;background:var(--orange-2)}

/* ---------- Decorative stripes ---------- */
.stripes{position:absolute;z-index:2;pointer-events:none;display:flex;gap:10px;transform:skewX(-28deg)}
.stripes i{display:block;width:clamp(10px,1.4vw,22px);height:100%;transform-origin:50% 100%}
.stripes i:nth-child(1){background:var(--orange-2)}
.stripes i:nth-child(2){background:var(--cyan)}
.stripes i:nth-child(3){background:var(--ice-100)}
.stripes--left{left:-3vw;bottom:-5%;height:55%}
.stripes--right{right:-2vw;top:-5%;height:50%}
.stripes--right i{transform-origin:50% 0}

/* ---------- Hero ---------- */
.hero{position:relative;height:100vh;height:100svh;min-height:320px;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden;isolation:isolate}
.hero__bg{position:absolute;inset:0;z-index:-3;background:url(assets/img/hero-poster.jpg) center/cover var(--navy-900)}
.hero__video{width:100%;height:100%;object-fit:cover;transform-origin:50% 50%}
.hero::after{content:"";position:absolute;inset:0;z-index:-2;background:
  radial-gradient(ellipse at 50% 45%,rgba(4,11,22,.25) 0%,rgba(4,11,22,.62) 60%,rgba(4,11,22,.92) 100%),
  linear-gradient(180deg,rgba(4,11,22,.6) 0%,rgba(4,11,22,.15) 35%,rgba(4,11,22,.85) 88%,var(--navy-950) 100%)}
/* subtle CRT/HUD scanlines over the footage */
.hero__scan{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.22;background:repeating-linear-gradient(180deg,rgba(255,255,255,.06) 0 1px,transparent 1px 3px);mix-blend-mode:overlay}
.hero__fx{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.hero__content{position:relative;z-index:3;padding:clamp(16px,4vh,48px) var(--pad) clamp(56px,11vh,110px);max-width:1100px}
.hero__logo{width:min(clamp(200px,34vw,500px),48vh);height:auto;margin:0 auto clamp(4px,1.2vh,10px);filter:drop-shadow(0 0 24px rgba(69,200,255,.35))}
.hero__title{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:min(clamp(38px,7vw,108px),11vh);line-height:.92;color:#fff;text-shadow:0 4px 30px rgba(0,0,0,.6)}
.hero__tag{margin-top:clamp(8px,2vh,18px);font-family:var(--display);font-weight:600;letter-spacing:.28em;text-transform:uppercase;font-size:clamp(14px,1.25vw,19px);color:var(--ice-300)}
.hero__ctas{margin-top:clamp(16px,4vh,34px);display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.hero__scroll{position:absolute;bottom:28px;left:50%;margin-left:-14px;z-index:3;width:28px;height:46px;border:2px solid rgba(232,244,255,.6);border-radius:16px}
.hero__scroll span{position:absolute;left:50%;top:8px;width:4px;height:9px;margin-left:-2px;border-radius:2px;background:var(--cyan);animation:scrolldot 1.8s ease-in-out infinite}
@keyframes scrolldot{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(16px)}}

/* ---------- Tape (crossing marquee bands) ---------- */
.tape{position:relative;height:clamp(110px,12vw,170px);margin-top:0;z-index:5;overflow:hidden;pointer-events:none}
.tape__row{position:absolute;left:-5%;right:-5%;top:50%;overflow:hidden;white-space:nowrap;padding:10px 0}
.tape__row--a{background:var(--orange-2);transform:translateY(-50%) rotate(-2.4deg);box-shadow:0 10px 30px rgba(0,0,0,.45);z-index:2}
.tape__row--b{background:var(--navy-800);border-block:1px solid rgba(69,200,255,.35);transform:translateY(-50%) rotate(2deg);opacity:.95}
.tape__track{display:inline-flex;align-items:center;gap:28px;padding-right:28px;font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(22px,2.4vw,36px);letter-spacing:.06em;animation:marquee 26s linear infinite}
.tape__row--a .tape__track{color:var(--navy-950)}
.tape__row--b .tape__track{color:var(--ice-300);animation-direction:reverse;animation-duration:32s}
.tape__track b{font-size:.5em;color:var(--ice-100)}
.tape__row--b .tape__track b{color:var(--orange-1)}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- Intro ---------- */
.intro{position:relative;display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(32px,5vw,80px);align-items:center;padding:clamp(64px,9vw,140px) var(--pad);background:
  radial-gradient(ellipse at 15% 30%,rgba(69,200,255,.12),transparent 55%),var(--navy-950)}
.intro__copy p{margin:28px 0 34px;max-width:52ch}
.intro__media{position:relative}
.intro__frame{position:relative;overflow:hidden;clip-path:polygon(6% 0,100% 0,100% 92%,94% 100%,0 100%,0 8%);background:var(--navy-800)}
.intro__frame video{width:100%;aspect-ratio:16/10;object-fit:cover}
.intro__frame::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 60%,rgba(4,11,22,.55))}
.rec{position:absolute;left:8%;bottom:16px;z-index:2;display:inline-flex;align-items:center;gap:8px;font-family:var(--display);font-weight:700;letter-spacing:.2em;text-transform:uppercase;font-size:13px;color:var(--ice-100);background:rgba(4,11,22,.6);padding:6px 12px;backdrop-filter:blur(4px)}
.rec i{width:8px;height:8px;border-radius:50%;background:#ff4d3d;box-shadow:0 0 10px #ff4d3d;animation:blink 1.2s steps(2) infinite}
@keyframes blink{50%{opacity:.2}}
.corner{position:absolute;width:42%;height:42%;pointer-events:none}
.corner--br{right:-14px;bottom:-14px;border-right:3px solid var(--cyan);border-bottom:3px solid var(--cyan)}
.corner--tl{left:-14px;top:-14px;width:22%;height:22%;border-left:3px solid var(--orange-2);border-top:3px solid var(--orange-2)}

/* ---------- Versus ---------- */
.versus{position:relative;display:grid;grid-template-columns:1fr 1fr;background:var(--navy-900);overflow:hidden}
.versus__side{position:relative;min-height:clamp(380px,48vw,720px);overflow:hidden}
.versus__side img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s ease}
.versus__side:hover img{transform:scale(1.05)}
.versus__side::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(4,11,22,.92) 100%)}
.versus__label{position:absolute;z-index:2;left:var(--pad);bottom:clamp(24px,4vw,56px);display:flex;flex-direction:column}
.versus__label span{font-family:var(--display);font-weight:700;letter-spacing:.25em;text-transform:uppercase;color:var(--orange-1);font-size:15px}
.versus__label strong{font-family:var(--display);font-weight:800;font-size:clamp(56px,8vw,128px);line-height:.9;color:#fff;font-variant-numeric:tabular-nums}
.versus__label em{font-style:normal;color:var(--ice-300);font-size:clamp(15px,1.2vw,18px)}
.versus__label--blue span{color:var(--cyan)}
.versus__vs{position:absolute;z-index:3;left:50%;top:clamp(190px,24vw,360px);margin:calc(clamp(76px,8vw,120px) / -2) 0 0 calc(clamp(76px,8vw,120px) / -2);width:clamp(76px,8vw,120px);aspect-ratio:1;display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:clamp(32px,3.6vw,54px);color:var(--navy-950);background:linear-gradient(135deg,var(--orange-1),var(--orange-2));box-shadow:0 0 0 6px var(--navy-900),0 0 40px rgba(240,138,28,.6);transform:skewX(-10deg)}
.versus__foot{grid-column:1/-1;text-align:center;padding:clamp(56px,7vw,100px) var(--pad)}
.versus__foot p{max-width:60ch;margin:20px auto 32px}

/* ---------- Trailer ---------- */
.trailer{position:relative;padding:clamp(72px,9vw,140px) var(--pad);background:
  radial-gradient(ellipse at 50% 0%,rgba(69,200,255,.14),transparent 60%),linear-gradient(180deg,var(--navy-900),var(--navy-950))}
.trailer__head{text-align:center;margin-bottom:clamp(32px,4vw,56px)}
.trailer__head .eyebrow{justify-content:center}
.trailer__player{position:relative;max-width:1200px;margin:0 auto;aspect-ratio:16/9;background:#000;box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 0 1px rgba(69,200,255,.25);will-change:transform}
.trailer__video{width:100%;height:100%;object-fit:cover}
.trailer__player::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(4,11,22,.15),rgba(4,11,22,.55));transition:opacity .4s ease}
.trailer__player.is-playing::before{opacity:0}
.trailer__play{position:absolute;z-index:3;left:50%;top:50%;width:clamp(84px,9vw,124px);aspect-ratio:1;margin:calc(clamp(84px,9vw,124px) / -2) 0 0 calc(clamp(84px,9vw,124px) / -2);border-radius:50%;display:grid;place-items:center;color:#fff;background:linear-gradient(180deg,var(--orange-1),var(--orange-2));box-shadow:0 0 0 6px rgba(255,190,61,.25),0 12px 40px rgba(240,138,28,.55);transition:transform .3s var(--ease),opacity .3s ease}
.trailer__play svg{width:42%;height:42%;margin-left:8%}
.trailer__play:hover{transform:scale(1.08)}
.trailer__play .ring{position:absolute;inset:0;border-radius:50%;border:2px solid var(--orange-1);animation:ring 2.2s ease-out infinite}
.trailer__play .ring--2{animation-delay:1.1s}
@keyframes ring{from{transform:scale(1);opacity:.8}to{transform:scale(1.9);opacity:0}}
.trailer__player.is-playing .trailer__play{opacity:0;pointer-events:none;transform:scale(.6)}
.trailer__end{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;text-align:center;padding:24px;background:rgba(4,11,22,.82);backdrop-filter:blur(6px);opacity:0;visibility:hidden;transition:opacity .5s ease,visibility .5s}
.trailer__player.is-ended .trailer__end{opacity:1;visibility:visible}
.trailer__end h3{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(28px,4vw,56px);line-height:1;color:var(--ice-100)}
.trailer__replay{font-family:var(--display);letter-spacing:.2em;text-transform:uppercase;color:var(--ice-300);font-size:15px}
.trailer__replay:hover{color:#fff}
.hud{position:absolute;z-index:2;width:34px;height:34px;pointer-events:none;border-color:var(--cyan);border-style:solid;border-width:0}
.hud--tl{left:-10px;top:-10px;border-left-width:3px;border-top-width:3px}
.hud--tr{right:-10px;top:-10px;border-right-width:3px;border-top-width:3px}
.hud--bl{left:-10px;bottom:-10px;border-left-width:3px;border-bottom-width:3px}
.hud--br{right:-10px;bottom:-10px;border-right-width:3px;border-bottom-width:3px}

/* ---------- Features ---------- */
.features{padding:clamp(72px,9vw,140px) var(--pad);background:var(--navy-950)}
.features .section-title{text-align:center;margin-bottom:clamp(36px,5vw,64px)}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,28px);max-width:1400px;margin:0 auto;perspective:1200px}
.card{position:relative;background:var(--navy-800);border:1px solid rgba(169,212,245,.12);overflow:hidden;transition:border-color .3s ease,box-shadow .3s ease;transform-style:preserve-3d;will-change:transform}
.card:hover{border-color:var(--cyan);box-shadow:0 20px 50px rgba(0,0,0,.5),0 0 30px rgba(69,200,255,.15)}
.card::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at var(--mx,50%) var(--my,0%),rgba(69,200,255,.18),transparent 45%);opacity:0;transition:opacity .3s ease}
.card:hover::after{opacity:1}
.card__img{aspect-ratio:16/10;overflow:hidden}
.card__img img{width:100%;height:100%;object-fit:cover;transition:transform .8s ease}
.card:hover .card__img img{transform:scale(1.07)}
.card__body{padding:26px 26px 30px;border-top:3px solid var(--orange-2)}
.card__num{font-family:var(--display);font-weight:700;color:var(--cyan);letter-spacing:.2em;font-size:15px}
.card h3{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(26px,2.2vw,34px);line-height:1.05;color:var(--ice-100);margin:6px 0 10px}
.card p{color:var(--muted)}

/* ---------- World ---------- */
.world{position:relative;min-height:100vh;display:flex;align-items:center;overflow:hidden;isolation:isolate}
.world__bg{position:absolute;inset:0;z-index:-2}
.world__bg img{width:100%;height:100%;object-fit:cover;transform-origin:65% 50%}
.world::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(4,11,22,.88) 0%,rgba(4,11,22,.55) 45%,rgba(4,11,22,0) 75%),linear-gradient(180deg,var(--navy-950) 0%,transparent 18%,transparent 82%,var(--navy-950) 100%)}
.world__copy{padding:0 var(--pad);max-width:820px}
.world__copy .display{font-size:clamp(48px,6.5vw,104px);line-height:.95}
.world__copy p{margin-top:26px;max-width:50ch;color:var(--ice-100)}

/* ---------- Final ---------- */
.final{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden;isolation:isolate}
.final__bg{position:absolute;inset:0;z-index:-2}
.final__bg img{width:100%;height:100%;object-fit:cover}
.final::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at center,rgba(7,20,38,.55) 0%,rgba(4,11,22,.92) 75%),linear-gradient(180deg,var(--navy-950),transparent 25%)}
.final__content{position:relative;z-index:3;padding:clamp(32px,8vh,80px) var(--pad)}
.final__logo{width:min(clamp(200px,24vw,340px),40vh);height:auto;margin:0 auto 18px;filter:drop-shadow(0 0 30px rgba(69,200,255,.35))}
.final .section-title{margin-bottom:clamp(20px,4vh,34px)}
.final__note{margin-top:16px;font-family:var(--display);letter-spacing:.25em;text-transform:uppercase;color:var(--ice-300);font-size:14px}

/* ---------- Sticky mobile CTA ---------- */
.sticky-cta{display:none}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .intro{grid-template-columns:1fr}
  .intro__media{order:-1}
  .cards{grid-template-columns:1fr;max-width:560px}
  .world{min-height:auto;padding:120px 0}
  .world::after{background:linear-gradient(180deg,var(--navy-950) 0%,rgba(4,11,22,.55) 30%,rgba(4,11,22,.85) 100%)}
}
@media (max-width:640px){
  .versus{grid-template-columns:1fr}
  .versus__side{min-height:360px}
  .versus__vs{top:360px;left:auto;right:20px;margin:-34px 0 0;width:68px;font-size:28px}
  .hero__ctas .btn{width:100%}
  .stripes--left{height:30%}
  .stripes--right{height:28%}
  .hud{display:none}
  .sticky-cta{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:50;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:rgba(4,11,22,.92);backdrop-filter:blur(8px);border-top:1px solid rgba(69,200,255,.25);transform:translateY(110%);transition:transform .35s ease}
  .sticky-cta.is-on{transform:none}
  .sticky-cta img{height:38px;width:auto}
  .sticky-cta .btn{min-height:46px;padding:0 1.4em}
}
/* portrait tablets: use the extra height */
@media (min-width:641px) and (max-width:1100px) and (orientation:portrait){
  .hero__logo{width:min(46vw,30vh)}
  .hero__title{font-size:min(9.5vw,8vh)}
  .hero__tag{font-size:clamp(16px,2.2vw,22px)}
  .hero__ctas .btn{min-height:60px;font-size:clamp(19px,2.6vw,24px)}
}
@media (max-height:520px){
  .hero__scroll{display:none}
  .hero__content{padding-bottom:24px}
  .hero__ctas .btn{min-height:44px}
  .hero__tag{letter-spacing:.18em}
}
@media (max-width:640px) and (max-height:700px){
  .hero__ctas{gap:10px}
  .hero__ctas .btn{min-height:46px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}