/* ==========================================================================
   Logic Simplified — landing page
   Sizes are written as calc(N * var(--px)) where N is the pixel value in the
   1920px-wide Figma frames, so the layout scales like the design.
   ========================================================================== */

@font-face{
  /* Static, overlap-free Inter Black subset — only used for the outline heading,
     because variable fonts show internal contour overlaps when stroked. */
  font-family:'Inter Outline';
  src:url(assets/inter-black-outline.woff2) format('woff2');
  font-weight:900;
  font-display:swap;
}

:root{
  --ink:#171717;
  --ink-2:#191919;
  --paper:#ffffff;
  --paper-2:#f4f3ee;
  --orange:#FF6D1B;
  --amber:#FF9500;
  --sky:#68D2FF;
  --navy:#00334A;
  --gray:#646464;

  --f-display:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --f-body:'Poppins','Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --f-cond:'Oswald','Arial Narrow','Helvetica Neue',Impact,sans-serif;
  --f-mono:ui-monospace,'SF Mono',SFMono-Regular,Menlo,'JetBrains Mono',Consolas,'Liberation Mono',monospace;

  --px:calc(min(100vw, 2400px) / 1920);
  --ease-out:cubic-bezier(.2,.8,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--ink)}
body{
  margin:0;background:var(--ink);color:var(--ink);
  font-family:var(--f-body) !important;-webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,p,figure,blockquote{margin:0}
em{font-style:normal}
button{font:inherit;color:inherit}

/* lenis */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.skip{position:fixed;left:12px;top:-60px;z-index:100;background:#fff;color:var(--ink);padding:10px 16px;font:600 14px var(--f-body);transition:top .2s}
.skip:focus{top:12px}
:focus-visible{outline:3px solid var(--orange);outline-offset:4px}

/* ---------- text splitting (JS) ---------- */
.js [data-split]:not(.is-split){visibility:hidden}
.w{
  display:inline-block;overflow:hidden;vertical-align:top;
  padding:.12em .05em .26em;margin:-.12em -.05em -.26em;
}
.w.open{overflow:visible}
.c{display:inline-block;will-change:transform;font-kerning:normal}
[data-hover]{width:fit-content}
.line{display:block}

/* ---------- button ---------- */
.btn{
  --b:var(--orange);--bg:var(--orange);--fg:#fff;--hf:#fff;
  display:inline-flex;align-items:center;gap:calc(15*var(--px));
  cursor:pointer;
}
.btn--white{--b:#fff;--bg:#fff;--fg:var(--orange);--hf:var(--ink)}
.btn__arrow{
  flex:none;width:max(44px,calc(58*var(--px)));aspect-ratio:1;
  border:2px solid var(--b);color:var(--b);
  display:grid;place-items:center;
  transition:background-color .35s var(--ease-out),color .35s var(--ease-out);
}
.btn__arrow svg{width:56%;height:56%;transition:transform .45s var(--ease-out)}
.btn__label{
  height:max(56px,calc(85*var(--px)));
  padding:0 max(18px,calc(16*var(--px)));
  display:flex;align-items:center;
  background:var(--bg);color:var(--fg);
  font:500 max(1rem,calc(27*var(--px)))/1 var(--f-display);
  white-space:nowrap;
}
.btn:hover .btn__arrow,.btn:focus-visible .btn__arrow{background:var(--b);color:var(--hf)}
.btn:hover .btn__arrow svg{transform:translateX(-5px)}

/* ==========================================================================
   NAV
   ========================================================================== */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:50;
  height:max(64px,calc(102*var(--px)));
  background:linear-gradient(180deg,rgba(23,20,20,.96),rgba(23,20,20,.86));
  color:#fff;
}
.nav__inner{
  height:100%;display:flex;align-items:center;justify-content:space-between;
  padding:0 calc(253*var(--px)) 0 calc(232*var(--px));
}
.nav__logo img{width:max(120px,calc(168*var(--px)));height:auto}
.nav__links{display:flex;gap:calc(32*var(--px))}
.nav__links a{
  position:relative;padding:8px 0;
  font-size:max(13px,calc(16*var(--px)));text-transform:uppercase;letter-spacing:.01em;
}
.nav__links a::after{
  content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;background:var(--amber);
  transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease-out);
}
.nav__links a:hover::after,.nav__links a[aria-current="page"]::after{transform:scaleX(1)}
.nav__toggle{
  display:none;width:44px;height:44px;background:none;border:0;padding:0;cursor:pointer;position:relative;
}
.nav__toggle span{position:absolute;left:10px;right:10px;height:2px;background:#fff;transition:transform .35s var(--ease-out)}
.nav__toggle span:nth-child(1){top:17px}
.nav__toggle span:nth-child(2){top:25px}
.nav.is-open .nav__toggle span:nth-child(1){transform:translateY(4px) rotate(45deg)}
.nav.is-open .nav__toggle span:nth-child(2){transform:translateY(-4px) rotate(-45deg)}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative;height:100vh;height:100svh;min-height:560px;overflow:hidden;
  background:#100c0c;color:#fff;--fx:0;
}
.hero__media{position:absolute;inset:0;overflow:hidden;z-index:0}
.hero__video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform-origin:50% 50%;
}
.hero__video img{width:100%;height:100%;object-fit:cover}
/* The effect layers stay off — and, crucially, uncomposited — until the first
   scroll adds .is-fx. At the top of the page the video plays with NO filter,
   NO blend layer and NO backdrop sampling, which is the cheapest possible state. */
.hero__glass,.hero__dither{display:none}
.hero.is-fx .hero__glass,.hero.is-fx .hero__dither{display:block}
.hero.is-fx .hero__video{
  will-change:filter;
  filter:blur(calc(var(--fx)*11px)) contrast(calc(1 + var(--fx)*.18)) saturate(calc(1 - var(--fx)*.22)) brightness(calc(1 - var(--fx)*.05));
}
/* glassmorphism frost: the blur now lives on the video above (far cheaper than
   backdrop-filter over a live video); this layer just carries the tint + sheen */
.hero__glass{
  position:absolute;inset:0;pointer-events:none;opacity:var(--fx);
  background:linear-gradient(135deg,rgba(255,255,255,.14),rgba(120,140,170,.05) 42%,rgba(0,0,0,.06));
  border-top:1px solid rgba(255,255,255,calc(var(--fx)*.16));
}
/* ordered-dither dot grid, soft-light blended over the frosted video */
.hero__dither{
  position:absolute;inset:0;pointer-events:none;opacity:calc(var(--fx)*.5);
  mix-blend-mode:soft-light;
  background-image:
    radial-gradient(rgba(255,255,255,.95) .6px,transparent 1.4px),
    radial-gradient(rgba(0,0,0,.75) .6px,transparent 1.4px);
  background-size:4px 4px,4px 4px;
  background-position:0 0,2px 2px;
  image-rendering:pixelated;
}
.hero__shade{position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,rgba(0,0,0,.35),transparent 32%)}
.hero__inner{position:relative;z-index:3;height:100%;display:grid;place-items:center;padding:0 5vw}
.hero__title{
  font-family:var(--f-body);font-weight:700;
  font-size:max(2.4rem,calc(104*var(--px)));line-height:1.16;text-align:left;
  width:auto;
}
.hero__title em{color:var(--amber)}

/* ==========================================================================
   ABOUT (section 2)
   ========================================================================== */
.about{
  background:#fff;min-height:calc(1080*var(--px));
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:calc(120*var(--px)) 5vw;
}
.about__title{
  font-family:var(--f-display);font-weight:900;color:var(--ink-2);
  font-size:max(2.2rem,calc(100*var(--px)));line-height:1.21;margin-inline:auto;
}
.about__title em{color:var(--orange)}
.about__sub{
  margin-top:calc(56*var(--px));color:var(--amber);
  font-size:max(1.2rem,calc(46*var(--px)));line-height:1.3;font-weight:400;
}
.about__text{
  margin-top:calc(46*var(--px));max-width:calc(1540*var(--px));color:var(--gray);
  font-size:max(15px,calc(19*var(--px)));line-height:1.68;
}
.about .btn{margin-top:calc(52*var(--px))}

/* ==========================================================================
   WHAT MAKES US DIFFERENT (section 3) — pinned "level select" dive
   Static baseline: five coloured sections stacked. With JS, the stage is pinned
   and the slides fly through a 3D tunnel driven by scroll (see initDive in main.js).
   ========================================================================== */
.dive{position:relative}
.dive__sprites{position:absolute;width:0;height:0;overflow:hidden}
.dive__slide{
  position:relative;overflow:hidden;
  background:var(--bg);color:var(--fg);min-height:100vh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  padding:calc(120*var(--px)) 5vw;
}
.dive__slide.is-intro .btn{margin-top:calc(64*var(--px))}
.diff__title{
  font-family:var(--f-display);font-weight:900;
  font-size:max(2.6rem,min(calc(174*var(--px)),16svh));line-height:1.17;margin-inline:auto;
}
.dive__h{
  font-family:var(--f-display);font-weight:800;
  font-size:max(2rem,min(calc(120*var(--px)),10.4svh));line-height:1.21;margin-inline:auto;
}
.dive__p{
  margin-top:min(calc(58*var(--px)),4.4svh);max-width:calc(720*var(--px));
  font-size:max(15px,calc(19*var(--px)));line-height:1.68;
}
.dive__bg,.dive__glow,.dive__rings,.dive__hud,.dive__toast,.dive__hint,.dive__fx{display:none}
.dive em{color:var(--orange)}

/* ---- pinned 3D mode ---- */
.js .dive{height:calc(100vh + 500vh);height:calc(100svh + 500svh)}
.js .dive__stick{
  --bg:#171717;--fg:#ffffff;--half:min(46vw,calc(760*var(--px)));
  position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;
  perspective:1100px;perspective-origin:50% 50%;background:var(--bg);color:var(--fg);
}
.js .dive__bg{display:block;position:absolute;inset:0;background:var(--bg)}
/* faint line-art grid for texture — colour follows the animated foreground */
.js .dive__bg::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.06;
  background-image:linear-gradient(var(--fg) 1px,transparent 1px),linear-gradient(90deg,var(--fg) 1px,transparent 1px);
  background-size:clamp(66px,7vw,132px) clamp(66px,7vw,132px);
  -webkit-mask-image:radial-gradient(ellipse 74% 66% at 50% 50%,transparent 0 50%,#000 100%);
  mask-image:radial-gradient(ellipse 74% 66% at 50% 50%,transparent 0 50%,#000 100%);
}
/* giant outlined watermark word behind each level (left column) */
.dive__ghost{
  position:absolute;left:50%;bottom:-3svh;transform:translateX(-50%);
  z-index:0;pointer-events:none;white-space:nowrap;
  font-family:var(--f-display);font-weight:900;text-transform:uppercase;letter-spacing:-.03em;
  font-size:min(calc(360*var(--px)),27svh);line-height:.8;
  color:transparent;-webkit-text-stroke:clamp(1px,.13vw,2.2px) var(--fg);
  opacity:.09;
}
.js .dive__ghost{left:max(24px,calc(60*var(--px)));transform:none;font-size:min(calc(240*var(--px)),17svh);opacity:.07}
.dive__slide > :not(.dive__ghost){position:relative;z-index:1}
.js .dive__glow{
  display:block;position:absolute;inset:0;pointer-events:none;opacity:var(--glow,1);
  background:radial-gradient(80% 70% at 50% 118%,rgba(255,109,27,.30),rgba(255,109,27,0) 70%);
}
.js .dive__rings{
  display:block;position:absolute;inset:0;pointer-events:none;
  /* the tunnel lines fade out toward the middle so they never cross the text */
  -webkit-mask-image:radial-gradient(ellipse 62% 58% at 50% 50%,transparent 0 80%,#000 100%);
  mask-image:radial-gradient(ellipse 62% 58% at 50% 50%,transparent 0 80%,#000 100%);
}
.js .dive__ring{
  position:absolute;left:50%;top:50%;width:66vw;height:62vh;margin:-31vh 0 0 -33vw;
  border:2px solid var(--fg);border-radius:2.6vmin;opacity:0;will-change:transform,opacity;
}
.js .dive__world{position:absolute;inset:0;transform-style:preserve-3d;pointer-events:none}
/* two-column: content stacks on the LEFT, image on the RIGHT */
.js .dive__slide{
  position:absolute;left:0;right:0;bottom:0;top:0;min-height:0;background:none;overflow:visible;
  /* content sits in the LEFT half, vertically centred */
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;text-align:left;
  padding:0 0 0 max(24px,calc(60*var(--px)));
  transform-style:preserve-3d;pointer-events:none;
}
.js .dive__slide > *{pointer-events:auto;max-width:var(--half,48vw);margin-left:0;margin-right:0}
.js .dive__slide .diff__title{margin-inline:0;text-align:left;font-size:max(2rem,min(calc(104*var(--px)),13svh));line-height:1.02;letter-spacing:-.015em}
.js .dive__slide .dive__h{margin-inline:0;text-align:left;font-size:max(1.8rem,min(calc(76*var(--px)),8svh));line-height:1.08}
.js .dive__slide .dive__p{margin-top:calc(28*var(--px));margin-inline:0;max-width:min(var(--half,48vw),calc(560*var(--px)))}
.js .dive__slide.is-intro .btn{margin-top:calc(40*var(--px))}
.js .dive__slide:not(.is-intro){visibility:hidden}
.js .dive .c{will-change:auto}

/* ---- right-half media panel: level artwork cross-fades per level ---- */
.dive__media{display:none}
.js .dive__media{
  display:block;position:absolute;z-index:3;pointer-events:none;
  top:0;height:100%;right:0;width:50vw;
  padding:calc(118*var(--px)) max(24px,calc(60*var(--px))) 9svh 0;
}
.js .dive__shot{
  position:absolute;inset:calc(118*var(--px)) max(24px,calc(60*var(--px))) 9svh 0;margin:0;
  border-radius:calc(16*var(--px));overflow:hidden;background:#0d0f12;
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 calc(30*var(--px)) calc(70*var(--px)) rgba(0,0,0,.5);
  opacity:0;transform:translateY(5%) scale(.98);
  will-change:opacity,transform;
}
.js .dive__shot img{width:100%;height:100%;display:block}

/* ---- game HUD (uses the site's own type + squared, orange-accented UI) ---- */
.js .dive__hud{
  display:flex;position:absolute;left:0;right:0;z-index:6;pointer-events:none;
  top:calc(max(64px,calc(102*var(--px))) + 16px);padding:0 max(18px,calc(60*var(--px)));
  justify-content:space-between;align-items:flex-start;gap:clamp(12px,2vw,40px);
  color:var(--fg);text-transform:uppercase;
  font-family:var(--f-display);font-weight:800;letter-spacing:.14em;
  font-size:clamp(10px,.78vw,14px);line-height:1.5;
}
.hud__level{display:grid;gap:.4em;white-space:nowrap}
.hud__level b{font-weight:800;color:var(--orange)}
.hud__name{opacity:.62;font-weight:600}
.hud__xp{
  flex:1;max-width:calc(560*var(--px));min-width:70px;height:clamp(10px,.85vw,16px);
  border:2px solid currentColor;padding:2px;margin-top:3px;
}
.hud__fill{
  display:block;height:100%;width:0;background:var(--orange);
  -webkit-mask-image:repeating-linear-gradient(90deg,#000 0 calc(20% - 3px),transparent calc(20% - 3px) 20%);
  mask-image:repeating-linear-gradient(90deg,#000 0 calc(20% - 3px),transparent calc(20% - 3px) 20%);
}
.hud__score{display:flex;align-items:center;gap:.8em;white-space:nowrap}
.hud__score b{font-weight:800;min-width:4ch;text-align:right;font-variant-numeric:tabular-nums}
.hud__coin{width:clamp(18px,1.6vw,30px);height:auto}

/* level toast — same squared orange label as the site's buttons */
.js .dive__toast{
  display:block;position:absolute;left:max(18px,calc(60*var(--px)));z-index:7;pointer-events:none;
  top:calc(max(64px,calc(102*var(--px))) + 16px + clamp(44px,4vw,72px));
  opacity:0;white-space:nowrap;transform-origin:0 50%;
  background:var(--orange);color:#fff;
  padding:.72em 1.1em;
  font-family:var(--f-display);font-weight:800;text-transform:uppercase;letter-spacing:.12em;
  font-size:clamp(11px,.95vw,17px);line-height:1;
}
.js .dive__hint{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  position:absolute;left:50%;bottom:4.5svh;z-index:6;transform:translateX(-50%);pointer-events:none;
  color:var(--fg);font-family:var(--f-display);font-weight:700;letter-spacing:.2em;
  font-size:clamp(10px,.78vw,14px);text-transform:uppercase;transition:opacity .4s;
}
.dive__hint span{animation:blink 1.6s ease-in-out infinite}
.dive__hint i{width:0;height:0;border:7px solid transparent;border-top:9px solid var(--orange);border-bottom:0;animation:hop 1.1s ease-in-out infinite}
@keyframes blink{50%{opacity:.35}}
@keyframes hop{50%{transform:translateY(6px)}}
.js .dive__fx{display:block;position:absolute;inset:0;z-index:8;pointer-events:none;overflow:hidden}
.fx-spark{position:absolute;width:9px;height:9px;background:var(--orange)}
.fx-spark:nth-child(3n){background:#FF9500}
.fx-pts{
  position:absolute;transform:translate(-50%,-50%);white-space:nowrap;color:var(--orange);
  font-family:var(--f-display);font-weight:900;font-size:clamp(14px,1.4vw,26px);letter-spacing:.04em;
}

/* ---- floating collectibles: they live in the side gutters, never behind the text ---- */
.js .dive__objs{
  display:block;position:absolute;inset:0;z-index:5;pointer-events:none;
  /* keep the collectibles clear of the HUD strip at the top */
  -webkit-mask-image:linear-gradient(180deg,transparent 0,transparent 17%,#000 27%,#000 92%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,transparent 17%,#000 27%,#000 92%,transparent 100%);
}
.dive__objs{display:none}
.gobj{
  position:absolute;left:50%;top:50%;width:calc(var(--k,1)*clamp(38px,4.2vw,84px));
  cursor:pointer;-webkit-tap-highlight-color:transparent;user-select:none;pointer-events:none;
  filter:drop-shadow(0 6px 0 rgba(0,0,0,.12));
}
.gobj svg{display:block;width:100%;height:auto;overflow:visible;animation:bob 3.4s ease-in-out infinite;animation-delay:var(--d,0s)}
.gobj--coin svg{animation:coinspin 2.6s linear infinite;animation-delay:var(--d,0s)}
@keyframes bob{50%{transform:translateY(-9%) rotate(4deg)}}
@keyframes coinspin{to{transform:perspective(260px) rotateY(360deg)}}

/* ==========================================================================
   HOW CLIENTS ENGAGE US (section 4)
   ========================================================================== */
.engage{
  background:#fff;overflow:hidden;
  padding:calc(105*var(--px)) 0 0;min-height:calc(1080*var(--px));
}
.engage__title{
  font-family:var(--f-display);font-weight:900;color:var(--ink-2);
  font-size:max(2.2rem,calc(100*var(--px)));line-height:1.21;text-align:center;margin-inline:auto;
}
.engage__title em{color:var(--orange)}
.cards{position:relative;height:calc(845*var(--px));margin-top:calc(24*var(--px))}
.card-wrap{
  position:absolute;left:var(--x);top:43.5%;
  width:calc(482*var(--px));height:calc(552*var(--px));
  transform:translate(-50%,-50%) rotate(var(--rot));
}
.card-wrap.is-tall{height:calc(600*var(--px))}
.card{
  width:100%;height:100%;background:var(--sky);color:var(--navy);
  padding:calc(40*var(--px)) calc(38*var(--px)) calc(36*var(--px));
  display:flex;flex-direction:column;position:relative;overflow:hidden;
}
.card::after{
  content:"";position:absolute;right:calc(-46*var(--px));bottom:calc(-52*var(--px));
  width:calc(210*var(--px));height:calc(210*var(--px));border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 32% 32%,rgba(255,255,255,.55),rgba(255,255,255,0) 68%);
}
.card > *{position:relative;z-index:1}
.card__top{
  display:flex;align-items:center;justify-content:space-between;
  padding-bottom:calc(22*var(--px));margin-bottom:calc(30*var(--px));
  border-bottom:2px solid rgba(0,51,74,.20);
}
.card__idx{font-family:var(--f-display);font-weight:800;font-size:max(15px,calc(22*var(--px)));letter-spacing:.02em}
.card__ico{width:clamp(30px,calc(52*var(--px)),56px);height:auto}
.card__body{display:flex;flex-direction:column;gap:calc(20*var(--px))}
.card h3{
  font-family:var(--f-display);font-weight:800;
  font-size:max(1.5rem,calc(40*var(--px)));line-height:1.2;
}
.card p{font-size:max(15px,calc(19*var(--px)));line-height:1.5}
.card__cta{
  margin-top:auto;padding-top:calc(30*var(--px));align-self:flex-start;
  display:inline-flex;align-items:center;gap:.7em;text-decoration:none;color:var(--navy);
  font-family:var(--f-display);font-weight:800;text-transform:uppercase;letter-spacing:.08em;
  font-size:max(12px,calc(16*var(--px)));
}
.card__cta-label{position:relative}
.card__cta-label::after{
  content:"";position:absolute;left:0;right:0;bottom:calc(-4*var(--px));height:2px;background:var(--navy);
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease-out);
}
.card__cta:hover .card__cta-label::after{transform:scaleX(1)}
.card__cta-arrow{
  display:grid;place-items:center;width:1.85em;height:1.85em;flex:none;
  background:var(--orange);color:#fff;transition:transform .5s var(--ease-out);
}
.card__cta-arrow svg{width:56%;height:56%}
.card__cta:hover .card__cta-arrow{transform:translateX(4px)}

/* ==========================================================================
   GAME CATEGORIES (section 5)
   ========================================================================== */
.cats{background:var(--ink);color:#fff;padding:calc(110*var(--px)) 0 calc(119*var(--px));overflow:clip}
.cats__title{
  font-family:var(--f-display);font-weight:900;
  font-size:max(2.2rem,calc(100*var(--px)));line-height:1.21;text-align:center;margin-inline:auto;
}
/* sticky stacked cards: each sticks a little lower than the last, so the header
   strip of every card underneath stays visible while its image gets covered */
.cat-stack{
  position:relative;z-index:1;
  --stick:calc(max(64px,calc(102*var(--px))) + 22px);
  margin:calc(96*var(--px)) calc(60*var(--px)) 0;
  display:flex;flex-direction:column;gap:calc(40*var(--px));
  padding-bottom:calc(6*var(--px));
}

.cats .btn{

  display: inline-flex !important;
}
.scard{
  --peek:clamp(104px,13.5vh,164px);
  position:sticky;top:calc(var(--stick) + var(--i) * var(--peek));
  height:min(78svh,calc(760*var(--px)));
  display:flex;flex-direction:column;overflow:hidden;
  border-radius:calc(18*var(--px));border:1px solid rgba(255,255,255,.09);
  background:#0e0e0e;color:#fff;
  box-shadow:0 calc(28*var(--px)) calc(60*var(--px)) rgba(0,0,0,.55);
}
.scard__bar{
  flex:none;min-height:var(--peek);
  display:flex;align-items:center;justify-content:space-between;gap:calc(50*var(--px));
  padding:calc(28*var(--px)) calc(46*var(--px));background:#0e0e0e;
}
.scard__head{display:flex;align-items:baseline;gap:calc(26*var(--px));min-width:0}
.scard__idx{
  font-family:var(--f-display);font-weight:800;color:var(--orange);
  font-size:max(14px,calc(22*var(--px)));letter-spacing:.02em;flex:none;
}
.scard__name{
  font-family:var(--f-display);font-weight:800;line-height:1.05;
  font-size:max(1.4rem,calc(48*var(--px)));
}
.scard__desc{
  max-width:calc(560*var(--px));text-align:right;color:rgba(255,255,255,.66);
  font-size:max(14px,calc(20*var(--px)));line-height:1.5;
}
.scard__media{position:relative;flex:1;overflow:hidden;background:#111}
.scard__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cats__cta{
  position:relative;z-index:1;
  margin:calc(96*var(--px)) auto 0;max-width:calc(1240*var(--px));padding:0 6vw;
  display:flex;flex-direction:column;align-items:center;gap:calc(42*var(--px));text-align:center;
}
.cats__cta p{color:rgba(255,255,255,.78);font-size:max(16px,calc(28*var(--px)));line-height:1.55}

/* ==========================================================================
   FULL-CYCLE (section 6)
   ========================================================================== */
.deliver{position:relative;background:var(--ink);color:#fff;overflow:hidden;padding:calc(96*var(--px)) 0 calc(104*var(--px))}
.deliver__head{padding:0 calc(60*var(--px));margin-bottom:calc(54*var(--px))}
.deliver__eyebrow{
  font-family:var(--f-display);font-weight:700;text-transform:uppercase;
  letter-spacing:.34em;font-size:max(11px,calc(16*var(--px)));color:rgba(255,255,255,.65);
}
.deliver__carousel{
  position:relative;width:100%;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
}
.deliver__track{display:flex;gap:calc(28*var(--px));width:max-content;will-change:transform}
.js .deliver__track{cursor:grab;touch-action:pan-y}
.js .deliver__track.is-grab{cursor:grabbing}
.js .deliver__track.is-grab,.js .deliver__track.is-grab *{user-select:none}
.dcard{
  flex:0 0 auto;width:min(86vw,calc(430*var(--px)));min-height:calc(430*var(--px));
  background:var(--bg);color:var(--fg);
  border-radius:calc(16*var(--px));overflow:hidden;position:relative;
  display:flex;flex-direction:column;
  padding:calc(40*var(--px)) calc(38*var(--px));
}
.dcard__idx{
  font-family:var(--f-display);font-weight:800;font-size:max(15px,calc(22*var(--px)));
  color:var(--accent);letter-spacing:.02em;
}
.dcard__kicker{
  margin-top:calc(14*var(--px));
  font-family:var(--f-display);font-weight:700;text-transform:uppercase;letter-spacing:.2em;
  font-size:max(10px,calc(13*var(--px)));color:var(--accent);
}
.dcard__title{
  font-family:var(--f-display);font-weight:800;letter-spacing:-.02em;
  font-size:max(1.4rem,calc(40*var(--px)));line-height:1.08;margin-top:calc(26*var(--px));
}
.dcard__desc{
  margin-top:auto;padding-top:calc(24*var(--px));
  font-size:max(14px,calc(19*var(--px)));line-height:1.5;opacity:.82;
}
/* no-JS: no auto-scroll driver — let people swipe the row instead */
.deliver__carousel{overflow-x:auto;scrollbar-width:none}
.deliver__carousel::-webkit-scrollbar{display:none}
.js .deliver__carousel{overflow-x:hidden}

/* ==========================================================================
   PROCESS — "The Build Quest": level-up game flow on scroll
   ========================================================================== */
.quest{position:relative;background:#121212;color:#fff;overflow:clip;padding:calc(120*var(--px)) calc(60*var(--px))}
.quest__bg{
  position:absolute;inset:0;pointer-events:none;opacity:.05;
  background-image:linear-gradient(#fff 1px,transparent 1px),linear-gradient(90deg,#fff 1px,transparent 1px);
  background-size:clamp(60px,6vw,120px) clamp(60px,6vw,120px);
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 30% 30%,#000,transparent 80%);
  mask-image:radial-gradient(ellipse 90% 70% at 30% 30%,#000,transparent 80%);
}
.quest__grid{position:relative;z-index:1;display:grid;grid-template-columns:40% 1fr;gap:calc(84*var(--px));align-items:start}
.quest__hud{position:sticky;top:calc(max(64px,calc(102*var(--px))) + 5svh)}
.quest__eyebrow{
  font-family:var(--f-display);font-weight:700;text-transform:uppercase;
  letter-spacing:.34em;font-size:max(11px,calc(15*var(--px)));color:var(--orange);
}
.quest__title{
  font-family:var(--f-display);font-weight:900;letter-spacing:-.02em;
  font-size:max(2rem,calc(68*var(--px)));line-height:1.04;margin-top:calc(24*var(--px));
}
.quest__lead{margin-top:calc(26*var(--px));max-width:42ch;color:rgba(255,255,255,.62);font-size:max(15px,calc(20*var(--px)));line-height:1.6}

/* player HUD panel */
.quest__panel{
  margin-top:calc(44*var(--px));padding:calc(30*var(--px));
  border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.02);border-radius:calc(14*var(--px));
}
.quest__panel-top{display:flex;align-items:baseline;justify-content:space-between;gap:calc(20*var(--px));
  font-family:var(--f-display);font-weight:800;text-transform:uppercase;letter-spacing:.1em;font-size:max(11px,calc(15*var(--px)))}
.quest__level b{color:var(--orange);font-size:1.5em}
.quest__level i{font-style:normal;opacity:.45}
.quest__pct{opacity:.72}
.quest__pct b{color:#fff}
.quest__xp{
  margin-top:calc(18*var(--px));height:clamp(14px,calc(22*var(--px)),24px);
  border:2px solid rgba(255,255,255,.3);padding:3px;
}
.quest__xp-fill{
  display:block;height:100%;width:0;background:var(--orange);
  -webkit-mask-image:repeating-linear-gradient(90deg,#000 0 calc(16.6% - 3px),transparent calc(16.6% - 3px) 16.6%);
  mask-image:repeating-linear-gradient(90deg,#000 0 calc(16.6% - 3px),transparent calc(16.6% - 3px) 16.6%);
}
.quest__badges{display:flex;gap:calc(12*var(--px));margin-top:calc(22*var(--px))}
.qbadge{
  width:calc(54*var(--px));min-width:40px;aspect-ratio:1;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.14);border-radius:calc(10*var(--px));background:rgba(255,255,255,.03);
  opacity:.28;filter:grayscale(1);transition:opacity .4s var(--ease-out),filter .4s var(--ease-out),transform .4s var(--ease-out),border-color .4s var(--ease-out);
}
.qbadge svg{width:62%;height:62%}
.qbadge.is-on{opacity:1;filter:none;border-color:var(--orange);transform:translateY(-3px)}

/* the level path on the right */
.quest__path{list-style:none;position:relative;margin:0;padding:0 0 0 calc(72*var(--px))}
.quest__track{position:absolute;left:calc(26*var(--px));top:calc(34*var(--px));bottom:calc(80*var(--px));width:3px;background:rgba(255,255,255,.12);border-radius:2px}
.quest__track-fill{position:absolute;inset:0 0 auto 0;height:0;width:100%;background:linear-gradient(var(--amber),var(--orange));border-radius:2px;box-shadow:0 0 calc(18*var(--px)) rgba(255,109,27,.6)}
.quest__token{
  position:absolute;left:50%;top:0;width:calc(20*var(--px));min-width:16px;aspect-ratio:1;transform:translate(-50%,-50%) rotate(45deg);
  background:var(--amber);border:2px solid #fff;box-shadow:0 0 calc(22*var(--px)) rgba(255,149,0,.9);
}
.qlevel{position:relative;display:grid;grid-template-columns:auto 1fr;gap:calc(34*var(--px));align-items:start;padding:calc(30*var(--px)) 0}
.qlevel__node{
  position:relative;z-index:2;margin-left:calc(-72*var(--px));
  width:calc(56*var(--px));min-width:46px;aspect-ratio:1;display:grid;place-items:center;border-radius:calc(14*var(--px));
  background:#1a1a1a;border:2px solid rgba(255,255,255,.22);
  font-family:var(--f-display);font-weight:800;color:rgba(255,255,255,.55);
  font-size:max(14px,calc(20*var(--px)));
  transition:all .45s var(--ease-out);
}
.qlevel__n{line-height:1}
.qlevel.is-on .qlevel__node{
  background:var(--orange);border-color:var(--orange);color:#fff;
  box-shadow:0 0 0 calc(6*var(--px)) rgba(255,109,27,.18),0 0 calc(26*var(--px)) rgba(255,109,27,.5);
  transform:scale(1.06);
}
.qlevel__card{
  position:relative;padding:calc(30*var(--px)) calc(34*var(--px));
  border:1px solid rgba(255,255,255,.1);border-radius:calc(14*var(--px));background:rgba(255,255,255,.02);
  opacity:.38;transform:translateY(calc(26*var(--px)));
  transition:opacity .55s var(--ease-out),transform .55s var(--ease-out),border-color .55s var(--ease-out),background .55s var(--ease-out);
}
.qlevel.is-on .qlevel__card{opacity:1;transform:none;border-color:rgba(255,109,27,.4);background:rgba(255,109,27,.05)}
.qlevel__tag{
  display:inline-flex;align-items:center;gap:calc(12*var(--px));
  font-family:var(--f-display);font-weight:700;text-transform:uppercase;letter-spacing:.2em;
  font-size:max(10px,calc(13*var(--px)));color:var(--amber);
}
.qlevel__tag svg{width:calc(26*var(--px));min-width:20px;height:auto}
.qlevel__title{font-family:var(--f-display);font-weight:800;text-transform:uppercase;letter-spacing:.01em;font-size:max(1.3rem,calc(38*var(--px)));line-height:1.05;margin-top:calc(16*var(--px))}
.qlevel__desc{margin-top:calc(14*var(--px));max-width:52ch;color:rgba(255,255,255,.62);font-size:max(15px,calc(19*var(--px)));line-height:1.6}
/* the "Level Up!" burst */
.qlevel__up{
  position:absolute;top:calc(-16*var(--px));right:calc(26*var(--px));z-index:3;
  background:var(--orange);color:#fff;
  font-family:var(--f-display);font-weight:800;text-transform:uppercase;letter-spacing:.14em;
  font-size:max(10px,calc(14*var(--px)));padding:.5em .9em;
  opacity:0;transform:scale(.4) translateY(10px);pointer-events:none;
}
.qlevel.is-up .qlevel__up{animation:qpop 1.7s var(--ease-out) forwards}
@keyframes qpop{
  0%{opacity:0;transform:scale(.4) translateY(10px)}
  14%{opacity:1;transform:scale(1.12) translateY(0)}
  26%{transform:scale(1) translateY(0)}
  80%{opacity:1}
  100%{opacity:0;transform:scale(1) translateY(-8px)}
}
.qlevel.is-final.is-on .qlevel__node{background:var(--amber);border-color:var(--amber);box-shadow:0 0 0 calc(7*var(--px)) rgba(255,149,0,.22),0 0 calc(30*var(--px)) rgba(255,149,0,.6)}

/* ==========================================================================
   PROOF, NOT PROMISES (section 7) — sticky outline text that fills on scroll
   ========================================================================== */
.proof{height:220vh;background:var(--ink);overflow-x:clip}
.proof__stick{position:sticky;top:0;height:100vh;height:100svh;display:grid;place-items:center;color:#fff;padding:0 3vw}
.outline{
  font-family:'Inter Outline','Inter',sans-serif;font-weight:900;
  font-size:max(2.2rem,calc(129*var(--px)));line-height:1.41;text-align:center;margin-inline:auto;
}
.outline .c{
  --p:0%;
  color:transparent;-webkit-text-stroke:max(1.5px,calc(2*var(--px))) #fff;
  background:linear-gradient(90deg,#fff var(--p),transparent var(--p));
  -webkit-background-clip:text;background-clip:text;
}

/* ==========================================================================
   CASE STUDIES (section 8) — stacked sticky panels
   ========================================================================== */
.cases{position:relative;background:var(--ink)}

/* ==========================================================================
   TECHNOLOGY STACK
   ========================================================================== */
.tech{
  position:relative;overflow:clip;background:#0d0d0d;color:#fff;
  padding:calc(120*var(--px)) calc(60*var(--px)) calc(132*var(--px));
}
/* faint line-art grid, echoing the "what makes us different" stage */
.tech::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.05;
  background-image:linear-gradient(#fff 1px,transparent 1px),linear-gradient(90deg,#fff 1px,transparent 1px);
  background-size:clamp(64px,7vw,132px) clamp(64px,7vw,132px);
  -webkit-mask-image:radial-gradient(ellipse 92% 74% at 72% 26%,#000,transparent 78%);
  mask-image:radial-gradient(ellipse 92% 74% at 72% 26%,#000,transparent 78%);
}
.tech > *{position:relative;z-index:1}
.tech__head{display:flex;align-items:center;gap:calc(30*var(--px));margin-bottom:calc(74*var(--px))}
.tech__eyebrow{
  font-family:var(--f-display);font-weight:700;text-transform:uppercase;
  letter-spacing:.34em;font-size:max(11px,calc(15*var(--px)));color:rgba(255,255,255,.5);white-space:nowrap;
}
.tech__rule{flex:1;height:1px;background:rgba(255,255,255,.16)}
.tech__num{
  font-family:var(--f-display);font-weight:700;line-height:.78;letter-spacing:-.02em;
  font-size:max(52px,calc(150*var(--px)));color:rgba(255,255,255,.12);
}
.tech__grid{display:grid;grid-template-columns:38% 1fr;gap:calc(96*var(--px));align-items:start}
.tech__intro{
  position:sticky;top:calc(max(64px,calc(102*var(--px))) + 30px);
  display:flex;flex-direction:column;
}
.tech__title{
  font-family:var(--f-display);font-weight:900;
  font-size:max(2.4rem,calc(98*var(--px)));line-height:1.0;letter-spacing:-.02em;
}
.tech__title .line{display:block}
.tech__title em{color:var(--orange)}
.tech__lead{margin-top:calc(38*var(--px));color:rgba(255,255,255,.68);font-size:max(15px,calc(22*var(--px)));line-height:1.62}
.tech__link{
  margin-top:calc(50*var(--px));align-self:flex-start;
  display:inline-flex;align-items:center;gap:.7em;text-decoration:none;color:#fff;
  font-family:var(--f-display);font-weight:800;text-transform:uppercase;letter-spacing:.08em;
  font-size:max(12px,calc(16*var(--px)));
}
.tech__link-label{position:relative}
.tech__link-label::after{
  content:"";position:absolute;left:0;right:0;bottom:calc(-4*var(--px));height:2px;background:var(--orange);
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease-out);
}
.tech__link:hover .tech__link-label::after{transform:scaleX(1)}
.tech__link-arrow{
  display:grid;place-items:center;width:1.85em;height:1.85em;flex:none;
  background:var(--orange);color:#fff;transition:transform .5s var(--ease-out);
}
.tech__link-arrow svg{width:56%;height:56%}
.tech__link:hover .tech__link-arrow{transform:translateX(4px)}
.tech__groups{display:flex;flex-direction:column}
.tstack{padding:calc(42*var(--px)) 0;border-top:1px solid rgba(255,255,255,.12)}
.tstack:first-child{border-top:0;padding-top:0}
.tstack:last-child{padding-bottom:0}
.tstack__label{font-family:var(--f-display);font-weight:800;font-size:max(1.2rem,calc(34*var(--px)));line-height:1.1}
.tstack__tags{list-style:none;display:flex;flex-wrap:wrap;gap:calc(14*var(--px));margin-top:calc(26*var(--px))}
.tstack__tags li{
  font-family:var(--f-mono);font-size:max(13px,calc(18*var(--px)));line-height:1;
  color:var(--amber);background:rgba(255,255,255,.03);border:1px solid rgba(255,149,0,.35);
  padding:calc(12*var(--px)) calc(18*var(--px));
  transition:color .4s var(--ease-out),border-color .4s var(--ease-out),background .4s var(--ease-out),transform .4s var(--ease-out);
}
.tstack__tags li:hover{color:#171717;background:var(--amber);border-color:var(--amber);transform:translateY(-3px)}
.tstack__desc{margin-top:calc(26*var(--px));max-width:calc(760*var(--px));color:rgba(255,255,255,.62);font-size:max(15px,calc(19*var(--px)));line-height:1.68}
.case{position:sticky;top:0;height:max(43.4vw,480px);overflow:hidden;color:#fff;background:#000}
.case__in{position:absolute;inset:0;overflow:hidden}
.case__bg{position:absolute;inset:0}
.case__bg img{width:100%;height:100%;object-fit:cover}
.case__shade{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.78) 0%,rgba(0,0,0,.3) 34%,transparent 60%)}
.case__row{
  position:absolute;left:calc(240*var(--px));right:calc(234*var(--px));bottom:14%;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.case__title{font-family:var(--f-cond);font-weight:600;font-size:max(2.6rem,calc(100*var(--px)));line-height:1.1}
.case__dim{position:absolute;inset:0;background:#000;opacity:0;pointer-events:none}

/* ==========================================================================
   TESTIMONIALS (section 9)
   ========================================================================== */
.testi{
  position:relative;background:var(--ink);color:#fff;overflow:hidden;
  min-height:calc(859*var(--px));
  display:grid;grid-template-columns:calc(786*var(--px)) 1fr;
  padding:calc(240*var(--px)) calc(130*var(--px)) calc(105*var(--px)) calc(127*var(--px));
}
.testi__mark{position:absolute;left:calc(755*var(--px));top:calc(86*var(--px));width:calc(172*var(--px));min-width:56px;height:auto}
.testi__title{
  font-family:var(--f-display);font-weight:900;
  font-size:max(2.2rem,calc(100*var(--px)));line-height:1.4;
}
.t-arrows{display:flex;gap:calc(17*var(--px));margin-top:calc(41*var(--px))}
.t-arrow{
  width:max(48px,calc(83*var(--px)));aspect-ratio:1;border-radius:50%;
  background:none;border:2px solid #fff;color:#fff;cursor:pointer;
  display:grid;place-items:center;
  transition:background-color .3s var(--ease-out),border-color .3s var(--ease-out);
}
.t-arrow svg{width:46%;height:46%}
.t-arrow:hover{background:var(--orange);border-color:var(--orange)}
.t-quote{
  font-family:var(--f-display);font-weight:600;
  font-size:max(1.3rem,calc(50*var(--px)));line-height:1.4;max-width:calc(880*var(--px));
}
.t-name{margin-top:calc(40*var(--px));font-weight:600;font-size:max(1rem,calc(24*var(--px)));line-height:1.3}
.t-role{margin-top:calc(10*var(--px));font-size:max(.85rem,calc(16*var(--px)));line-height:1.3}

/* ==========================================================================
   VALIDATED BY (section 10)
   ========================================================================== */
.val{
  position:relative;min-height:calc(841*var(--px));overflow:hidden;background:#0c1118;color:#fff;
  display:grid;place-items:center;padding:calc(90*var(--px)) 3vw;
}
.val__bg{position:absolute;inset:-6% 0}
.val__bg img{width:100%;height:100%;object-fit:cover;filter:blur(1.5px) brightness(.92)}
.val__title{
  position:relative;z-index:2;font-family:var(--f-display);font-weight:800;
  font-size:max(1.7rem,calc(91*var(--px)));line-height:1.38;text-align:center;
  margin-inline:auto;text-shadow:0 2px 24px rgba(0,0,0,.35);
}
.val__thumb{position:absolute;z-index:1;overflow:hidden;box-shadow:0 18px 50px rgba(0,0,0,.45)}
.val__thumb img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease-out)}
.val__thumb:hover img{transform:scale(1.06)}
.val__thumb--1{left:1.6%;top:6.5%;width:17.24%;aspect-ratio:331/188}
.val__thumb--2{right:2.03%;top:4.2%;width:20.9%;aspect-ratio:401/228}
.val__thumb--3{left:1.46%;bottom:5.9%;width:20.47%;aspect-ratio:393/224}
.val__thumb--4{right:1.3%;bottom:3.6%;width:19.53%;aspect-ratio:375/214}

/* ==========================================================================
   PRICING & BILLING (section 11)
   ========================================================================== */
.price{position:relative;min-height:calc(859*var(--px));background:var(--ink);color:#fff;overflow:hidden}
.price__bg{position:absolute;left:0;top:0;bottom:0;width:88.02%;overflow:hidden}
.price__bg img{
  width:100%;height:100%;object-fit:cover;
  -webkit-mask-image:linear-gradient(90deg,#000 86%,transparent);mask-image:linear-gradient(90deg,#000 86%,transparent);
}
.price__text{position:relative;z-index:2;padding:calc(199*var(--px)) 0 calc(120*var(--px)) calc(218*var(--px))}
.price__title{
  font-family:var(--f-display);font-weight:900;
  font-size:max(2.4rem,calc(100*var(--px)));line-height:1.21;
}
.price__p{
  margin-top:calc(55*var(--px));max-width:calc(740*var(--px));
  font-size:max(15px,calc(19*var(--px)));line-height:1.68;
}
.price__bike{
  position:absolute;z-index:1;left:48.44%;top:15.13%;width:45.31%;aspect-ratio:870/600;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent),linear-gradient(180deg,transparent,#000 9%,#000 91%,transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent),linear-gradient(180deg,transparent,#000 9%,#000 91%,transparent);
  mask-composite:intersect;
}
.price__bike img{width:100%;height:100%;object-fit:cover}

/* ==========================================================================
   BLOG
   ========================================================================== */
.blog{position:relative;background:var(--ink);color:#fff;overflow:clip;padding:calc(118*var(--px)) calc(60*var(--px))}
.blog__bg{
  position:absolute;inset:0;pointer-events:none;opacity:.045;
  background-image:linear-gradient(#fff 1px,transparent 1px),linear-gradient(90deg,#fff 1px,transparent 1px);
  background-size:clamp(60px,6vw,120px) clamp(60px,6vw,120px);
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 70% 20%,#000,transparent 80%);
  mask-image:radial-gradient(ellipse 80% 70% at 70% 20%,#000,transparent 80%);
}
.blog__head{position:relative;z-index:1;display:flex;align-items:flex-end;justify-content:space-between;gap:calc(40*var(--px));margin-bottom:calc(60*var(--px))}
.blog__eyebrow{
  font-family:var(--f-display);font-weight:700;text-transform:uppercase;
  letter-spacing:.34em;font-size:max(11px,calc(15*var(--px)));color:var(--orange);
}
.blog__title{font-family:var(--f-display);font-weight:900;letter-spacing:-.02em;font-size:max(2rem,calc(72*var(--px)));line-height:1.02;margin-top:calc(22*var(--px))}
.blog__all{
  display:inline-flex;align-items:center;gap:.7em;white-space:nowrap;text-decoration:none;color:#fff;flex:none;
  font-family:var(--f-display);font-weight:800;text-transform:uppercase;letter-spacing:.08em;font-size:max(12px,calc(16*var(--px)));
}
.blog__all span:first-child{position:relative}
.blog__all span:first-child::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease-out)}
.blog__all:hover span:first-child::after{transform:scaleX(1)}
.blog__all-arrow{display:grid;place-items:center;width:1.85em;height:1.85em;flex:none;background:var(--orange);color:#fff;transition:transform .5s var(--ease-out)}
.blog__all-arrow svg{width:56%;height:56%}
.blog__all:hover .blog__all-arrow{transform:translateX(4px)}
.blog__grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,1fr);gap:calc(34*var(--px))}
.post{
  display:flex;flex-direction:column;
  border:1px solid rgba(255,255,255,.1);border-radius:calc(14*var(--px));overflow:hidden;background:rgba(255,255,255,.02);
  transition:transform .5s var(--ease-out),border-color .5s var(--ease-out),background .5s var(--ease-out);
}
.post:hover{transform:translateY(-6px);border-color:rgba(255,109,27,.45);background:rgba(255,109,27,.04)}
.post__media{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background:#0d0f12}
.post__media img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease-out)}
.post:hover .post__media img{transform:scale(1.06)}
.post__cat{
  position:absolute;left:calc(18*var(--px));top:calc(18*var(--px));
  background:var(--orange);color:#fff;
  font-family:var(--f-display);font-weight:800;text-transform:uppercase;letter-spacing:.12em;
  font-size:max(10px,calc(12*var(--px)));padding:.5em .85em;
}
.post__body{display:flex;flex-direction:column;flex:1;padding:calc(30*var(--px)) calc(30*var(--px)) calc(32*var(--px))}
.post__meta{
  display:flex;align-items:center;gap:calc(14*var(--px));
  font-family:var(--f-display);font-weight:600;text-transform:uppercase;letter-spacing:.14em;
  font-size:max(10px,calc(13*var(--px)));color:rgba(255,255,255,.5);
}
.post__meta i{width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.3)}
.post__title{margin-top:calc(18*var(--px));font-family:var(--f-display);font-weight:800;font-size:max(1.2rem,calc(28*var(--px)));line-height:1.2}
.post__title a{color:#fff;text-decoration:none !important;transition:color .3s var(--ease-out)}
.post__title a:hover{color:var(--orange)}
.post__excerpt{margin-top:calc(16*var(--px));color:rgba(255,255,255,.6);font-size:max(14px,calc(18*var(--px)));line-height:1.55}
.post__more{
  margin-top:auto;padding-top:calc(26*var(--px));align-self:flex-start;
  display:inline-flex;align-items:center;gap:.6em;text-decoration:none;color:var(--orange);
  font-family:var(--f-display);font-weight:800;text-transform:uppercase;letter-spacing:.08em;font-size:max(12px,calc(15*var(--px)));
}
.post__more span{display:grid;place-items:center;width:1.7em;height:1.7em;border:2px solid var(--orange);transition:transform .45s var(--ease-out)}
.post__more span svg{width:58%;height:58%}
.post__more:hover span{transform:translateX(4px)}
/* reveal on scroll */
.js .post{opacity:0;transform:translateY(calc(40*var(--px)))}
.js .post.is-in{opacity:1;transform:none;transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}

/* ==========================================================================
   FAQ (section 12)
   ========================================================================== */
.faq{position:relative;z-index:2;background:#fff;padding:calc(140*var(--px)) 0 calc(288*var(--px))}
.faq__title{
  font-family:var(--f-display);font-weight:900;color:var(--ink-2);
  font-size:max(2.2rem,calc(67*var(--px)));line-height:1.2;text-align:center;margin-inline:auto;
}
.faq__list{width:calc(1442*var(--px));margin:calc(91*var(--px)) auto 0}
.faq__q{
  display:flex;width:100%;align-items:center;justify-content:space-between;gap:32px;
  padding:calc(25*var(--px)) 0;background:none;border:0;cursor:pointer;text-align:left;
  font-family:var(--f-display);font-weight:800;color:var(--ink-2);
  font-size:max(1.1rem,calc(45*var(--px)));line-height:1.4;
}
.faq__qt{max-width:calc(1230*var(--px));transition:transform .5s var(--ease-out)}
.faq__q:hover .faq__qt{transform:translateX(calc(14*var(--px)))}
.faq__plus{flex:none;width:max(24px,calc(43*var(--px)));height:max(24px,calc(43*var(--px)));color:var(--orange);transition:transform .55s var(--ease-out)}
.faq__plus svg{width:100%;height:100%;display:block}
.faq__item.is-open .faq__plus{transform:rotate(135deg)}
.faq__a{
  display:grid;grid-template-rows:0fr;visibility:hidden;
  transition:grid-template-rows .6s var(--ease-out),visibility 0s .6s;
}
.faq__item.is-open .faq__a{grid-template-rows:1fr;visibility:visible;transition-delay:0s}
.faq__a-in{overflow:hidden;min-height:0}
.faq__a p{
  max-width:calc(1120*var(--px));padding:0 0 calc(30*var(--px));color:var(--gray);
  font-size:max(1rem,calc(22*var(--px)));line-height:1.6;
}

/* ==========================================================================
   CLOSING CTA
   ========================================================================== */
.cta{
  position:relative;z-index:3;height:calc(685*var(--px));color:#fff;background:#1a1615;
  clip-path:inset(-40vw 0 0 0);
}
.cta__bg{
  position:absolute;inset:0;
  background:radial-gradient(70% 95% at 62% 125%,#5a2b1c 0%,rgba(90,43,28,0) 70%),linear-gradient(180deg,#1d1817,#191413);
}
.cta__embers{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.ember{position:absolute;bottom:-24px;border-radius:50%;background:#ffb060;box-shadow:0 0 12px 3px rgba(255,109,27,.65);filter:blur(.6px)}
.cta__wolf{position:absolute;left:0;bottom:0;width:calc(560*var(--px));height:auto;z-index:3;pointer-events:none}
.cta__inner{position:relative;z-index:2;height:100%;padding:calc(206*var(--px)) 0 0 calc(212*var(--px));text-align:center}
.cta__title{
  font-family:var(--f-display);font-weight:900;
  font-size:max(1.7rem,calc(74*var(--px)));line-height:1.43;margin-inline:auto;
}
.cta__title em{color:var(--orange)}
.cta__p{
  margin:calc(60*var(--px)) auto 0;max-width:calc(1200*var(--px));
  font-size:max(15px,calc(19*var(--px)));line-height:1.6;
}
.cta .btn{margin-top:calc(56*var(--px))}

/* ==========================================================================
   SCROLL EFFECTS: marquees, parallax decor, hero dust, cursor, progress
   ========================================================================== */
/* marquee bands — text speeds up and reverses with the scroll */
.marquee-band{--mq:#fff;position:relative;overflow:hidden;background:var(--ink);color:#fff;padding:calc(38*var(--px)) 0}
.marquee-band--orange{--mq:var(--ink);background:var(--orange);color:var(--ink)}
.marquee{white-space:nowrap}
.marquee__track{display:flex;width:max-content;will-change:transform}
.marquee__group{display:flex;flex:none;align-items:center}
.mq-item{
  font-family:var(--f-display);font-weight:900;text-transform:uppercase;letter-spacing:-.01em;
  font-size:max(2.2rem,calc(112*var(--px)));line-height:1.12;padding:0 calc(34*var(--px));
}
.mq-item--o{
  font-family:'Inter Outline','Inter',sans-serif;
  color:transparent;-webkit-text-stroke:max(1.5px,calc(2*var(--px))) var(--mq);
}
.mq-ico{flex:none;width:max(38px,calc(84*var(--px)));height:auto;margin:0 calc(14*var(--px));animation:bob 3.6s ease-in-out infinite}

/* floating game icons that drift at their own speed */
.about,.engage,.cats{position:relative}
.deco{position:absolute;z-index:1;width:max(34px,calc(74*var(--px)));pointer-events:none;will-change:transform}
.deco svg{display:block;width:100%;height:auto;overflow:visible;animation:bob 4.2s ease-in-out infinite;filter:drop-shadow(0 6px 0 rgba(0,0,0,.10))}

/* giant outlined word behind the category row */
.cats__ghost{
  position:absolute;left:-4vw;top:calc(330*var(--px));z-index:0;pointer-events:none;user-select:none;
  font-family:'Inter Outline','Inter',sans-serif;font-weight:900;white-space:nowrap;line-height:1;
  font-size:calc(430*var(--px));color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.1);
}
.cats__title,.cat-stack,.cats__cta{position:relative;z-index:1}

/* hero: dust layers + scroll cue */
.hero__dust{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.dust-layer{position:absolute;inset:-8%;will-change:transform}
.dust{
  position:absolute;border-radius:50%;mix-blend-mode:screen;
  background:radial-gradient(circle,rgba(255,196,120,.95),rgba(255,140,40,0) 70%);
}
.hero__cue{
  position:absolute;left:50%;bottom:3.4svh;transform:translateX(-50%);z-index:3;pointer-events:none;
  display:flex;flex-direction:column;align-items:center;gap:12px;color:#fff;
  font:600 11px var(--f-body);letter-spacing:.32em;text-transform:uppercase;
}
.hero__cue i{width:1px;height:48px;background:linear-gradient(#fff,rgba(255,255,255,0));transform-origin:top;animation:cue 1.9s ease-in-out infinite}
@keyframes cue{0%{transform:scaleY(0)}55%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}

/* FAQ row dividers draw in on scroll */
.faq__item{position:relative}
.faq__item::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:rgba(23,23,23,.16);
  transform:scaleX(var(--line,1));transform-origin:left;
}

/* scroll progress + custom cursor */
.progress{position:fixed;left:0;right:0;top:0;height:3px;z-index:70;background:var(--orange);transform:scaleX(0);transform-origin:0 50%;pointer-events:none}
.cursor{position:fixed;left:0;top:0;z-index:200;pointer-events:none;opacity:0;transition:opacity .3s}
.cursor.is-on{opacity:1}
.cursor__dot,.cursor__ring{position:absolute;left:0;top:0;border-radius:50%;will-change:transform}
.cursor__dot{width:8px;height:8px;margin:-4px 0 0 -4px;background:var(--orange)}
.cursor__ring{
  width:40px;height:40px;margin:-20px 0 0 -20px;border:1.5px solid var(--orange);
  transition:width .35s var(--ease-out),height .35s var(--ease-out),margin .35s var(--ease-out),background-color .35s;
}
.cursor.is-active .cursor__ring{width:68px;height:68px;margin:-34px 0 0 -34px;background:rgba(255,109,27,.16)}
.cursor.is-down .cursor__ring{width:28px;height:28px;margin:-14px 0 0 -14px}
html.has-cursor,html.has-cursor *{cursor:none!important}

/* ==========================================================================
   MOBILE / TABLET
   ========================================================================== */
@media (max-width:900px){
  :root{--px:calc(100vw / 1000)}

  .nav__inner{padding:0 18px}
  .nav__toggle{display:block}
  .nav__links{
    position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;
    background:rgba(23,20,20,.98);padding:8px 18px 20px;
    clip-path:inset(0 0 100% 0);visibility:hidden;
    transition:clip-path .5s var(--ease-out),visibility 0s .5s;
  }
  .nav.is-open .nav__links{clip-path:inset(0);visibility:visible;transition-delay:0s}
  .nav__links a{font-size:16px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.12)}

  .line{display:inline}
  .hero__title .line{display:block}
  .hero__title{font-size:11vw}

  .about,.engage{min-height:0}
  .about{padding:26vw 6vw 20vw}
  .about__title{font-size:9.6vw}
  .about__sub{font-size:5.6vw;margin-top:8vw}
  .about__text{font-size:15px;margin-top:6vw}
  .about .btn,.cta .btn{margin-top:9vw}

  .diff__title{font-size:min(14.2vw,16svh)}
  .diff__title .line{display:block}
  .dive__slide{padding:24vw 6vw}
  .dive__slide.is-intro .btn{margin-top:9vw}
  .dive__h{font-size:min(9.6vw,8.6svh)}
  .dive__h .line{display:block}
  .dive__p{font-size:15px;margin-top:5vw;max-width:none}
  .js .dive__slide{padding:0 6vw}
  .js .dive__hud{gap:10px;font-size:9px;letter-spacing:.1em}
  .hud__name{display:none}
  .js .dive__toast{font-size:11px;top:calc(64px + 16px + 40px)}
  .gobj{width:calc(var(--k,1)*34px)}
  .js .dive__ring{width:88vw;height:60vh;margin:-30vh 0 0 -44vw}

  .engage{padding:22vw 0 12vw}
  .engage__title{font-size:10vw;padding:0 5vw}
  .cards{height:auto;margin-top:10vw;display:grid;gap:12vw;padding:8vw 0}
  .card-wrap{position:relative;left:auto;top:auto;width:78vw;height:auto;min-height:94vw;margin:0 auto;transform:rotate(var(--rot))}
  .card-wrap.is-tall{height:auto;min-height:104vw}
  .card{padding:7vw}
  .card__top{margin-bottom:6vw;padding-bottom:4vw}
  .card__idx{font-size:5vw}
  .card__ico{width:13vw}
  .card__body{gap:4vw}
  .card h3{font-size:8vw}
  .card p{font-size:15px}
  .card__cta{font-size:3.8vw;padding-top:8vw}

  .cats{padding:20vw 0 16vw}
  .cats__title{font-size:10vw;padding:0 5vw}
  .cat-list{margin-top:12vw}
  .cat-stack{margin:12vw 6vw 0;gap:6vw;--stick:0px}
  .scard{position:relative;top:auto;height:auto;--peek:auto;border-radius:3.4vw}
  .scard__bar{flex-direction:column;align-items:flex-start;gap:2.5vw;padding:6vw 6vw 5vw}
  .scard__head{gap:4vw}
  .scard__name{font-size:7.4vw}
  .scard__desc{text-align:left;max-width:none;font-size:16px}
  .scard__media{aspect-ratio:16/11;flex:none}
  .cats__cta{margin-top:14vw;gap:8vw}
  .cats__cta p{font-size:4.8vw}

  .deliver{padding:16vw 0 18vw}
  .deliver__head{padding:0 6vw;margin-bottom:8vw}
  .deliver__eyebrow{font-size:3.4vw}
  .deliver__track{gap:4vw}
  .dcard{width:78vw;min-height:92vw;padding:8vw 7vw}
  .dcard__title{font-size:8vw}
  .dcard__desc{font-size:15px}

  .quest{padding:18vw 6vw}
  .quest__grid{grid-template-columns:1fr;gap:10vw}
  .quest__hud{position:static}
  .quest__title{font-size:9vw}
  .quest__lead{font-size:4.6vw;max-width:none}
  .quest__panel{padding:6vw;margin-top:8vw}
  .qbadge{width:13vw}
  .quest__path{padding-left:15vw}
  .quest__track{left:6vw}
  .qlevel{gap:5vw;padding:5vw 0}
  .qlevel__node{margin-left:-15vw;width:11vw;border-radius:2.6vw}
  .qlevel__card{padding:6vw}
  .qlevel__title{font-size:7vw}
  .qlevel__desc{font-size:16px;max-width:none}

  .blog{padding:18vw 6vw}
  .blog__head{flex-direction:column;align-items:flex-start;gap:6vw;margin-bottom:10vw}
  .blog__title{font-size:10vw}
  .blog__grid{grid-template-columns:1fr;gap:7vw}
  .post__title{font-size:6vw}
  .post__excerpt{font-size:16px}

  .outline{font-size:11.5vw}
  .outline .line{display:block}

  .case{height:100vh;height:100svh}
  .case__row{left:6vw;right:6vw;bottom:12%;flex-direction:column;align-items:flex-start;gap:5vw}
  .case__title{font-size:14vw}

  .testi{grid-template-columns:1fr;padding:34vw 6vw 16vw;gap:10vw}
  .tech{padding:18vw 6vw 20vw}
  .tech__head{gap:5vw;margin-bottom:11vw}
  .tech__num{font-size:18vw}
  .tech__grid{grid-template-columns:1fr;gap:12vw}
  .tech__intro{position:static}
  .tech__title{font-size:13vw;letter-spacing:-.03em}
  .tech__lead{font-size:4.6vw;margin-top:6vw}
  .tech__link{margin-top:9vw;font-size:3.8vw}
  .tstack{padding:8vw 0}
  .tstack__label{font-size:7vw}
  .tstack__tags{gap:3vw;margin-top:5vw}
  .tstack__tags li{font-size:15px;padding:3.2vw 4.2vw}
  .tstack__desc{font-size:16px;margin-top:5vw}
  .testi__mark{left:6vw;top:10vw;width:16vw}
  .testi__title{font-size:11vw}
  .testi__title .line{display:block}
  .t-arrows{margin-top:6vw}
  .t-quote{font-size:6vw;max-width:none}
  .t-name{font-size:18px;margin-top:6vw}
  .t-role{font-size:14px}

  .val{min-height:0;padding:64vw 6vw}
  .val__title{font-size:7vw;line-height:1.3}
  .val__thumb--1{left:4%;top:5%;width:44%}
  .val__thumb--2{right:4%;top:11%;width:44%}
  .val__thumb--3{left:4%;bottom:11%;width:44%}
  .val__thumb--4{right:4%;bottom:5%;width:44%}

  .price{padding-bottom:0}
  .price__bg{width:100%;height:100%}
  .price__text{padding:22vw 6vw 8vw}
  .price__title{font-size:14vw}
  .price__title .line{display:block}
  .price__p{font-size:15px;max-width:none;margin-top:6vw}
  .price__bike{position:relative;left:auto;top:auto;width:100%;margin:0 0 -4vw}

  .faq{padding:22vw 0 44vw}
  .faq__title{font-size:11vw}
  .faq__list{width:auto;margin:10vw 6vw 0}
  .faq__q{font-size:5.6vw;padding:5vw 0}
  .faq__qt{max-width:none}
  .faq__a p{font-size:16px;max-width:none}

  .cta{height:auto;padding-bottom:16vw;clip-path:inset(-60vw 0 0 0)}
  .cta__wolf{position:absolute;left:4vw;bottom:auto;top:-46vw;width:46vw}
  .cta__inner{padding:38vw 6vw 0 6vw}
  .cta__title{font-size:8.2vw;line-height:1.3}
  .cta__title .line{display:block}
  .cta__p{font-size:15px;margin-top:6vw}
}

@media (prefers-reduced-motion:reduce){
  .js [data-split]:not(.is-split){visibility:visible}
  *{scroll-behavior:auto!important}
}

@media (max-width:900px){
  .deco,.cats__ghost{display:none}
  .marquee-band{padding:5vw 0}
  .hero__cue{display:none}
}
@media (prefers-reduced-motion:reduce){
  .hero__cue i,.mq-ico,.deco svg{animation:none}
  /* no scroll choreography here — settle the effect so the headline stays readable */
  .hero{--fx:.5}
}