/* ==================================================================
 AUTONOMOUS STUDIO, showcase
   Theme: Mode A "Dark Luxe Tech" (house DNA) x Gradient Realism
   Macrostructure: Fullscreen Immersive -> Gallery Grid -> Layered Depth
   ================================================================== */

:root{
  /* Ink sapphire rather than neutral near-black. The whole field is cooled a few
     degrees so the page reads blue as a MATERIAL, not just blue as an accent. */
  --canvas:#070A12; --canvas-2:#0A0F1A;
  /* Body copy reads white on this canvas, the old greys (#98989F/#8a8a93)
     were technically AA but visually washed out against the dark background.
     --dim is now near-white for paragraphs; --dimmer stays a step down so
     small mono labels still sit behind the copy rather than competing. */
  --ink:#F1F4FA; --dim:#E3E8F1; --dimmer:#B6C0D2;
  --card:#0F1523; --line:rgba(140,180,255,.11); --line-2:rgba(140,180,255,.065);
  /* The precious accent, derived from the logo and L*-matched to the gold it
     replaces, so every contrast ratio on the page survives the change.
     Ice -> azure -> sapphire. */
  --blue:#61ADFF; --blue-hi:#8FD8F8; --blue-lo:#2F72D6;
  --logo-blue:#0B7FEF; --logo-blue-hi:#13C3FF;
  /* --emerald and --rose were dead tokens (0 references) and are gone.
     --violet is now --indigo: the holo sweep stays in one family. */
  --indigo:#5B8CFF; --cyan:#6EE7FF;

  --font-display:'Space Grotesk',sans-serif;
  --font-body:'Inter',sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;

  --u:8px;
  --maxw:1240px;
  --r:18px; --r-lg:24px; --r-sm:12px;
  --shadow:0 24px 60px -32px rgba(0,0,0,.85);
  --shadow-lift:0 40px 90px -40px rgba(0,0,0,.95);
  --ease:cubic-bezier(.16,.84,.44,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
/* the nav is fixed, so jump targets have to stop below it */
section[id],div[id]{scroll-margin-top:88px}
body{
  background:var(--canvas); color:var(--ink);
  font-family:var(--font-body); line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
body.locked{overflow:hidden}

/* ---------- ambient: aurora mesh + dot grid (C12) ---------- */
body::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(ellipse 55% 45% at 12% 2%, rgba(97,173,255,.16), transparent 62%),
    radial-gradient(ellipse 48% 42% at 88% 6%, rgba(91,140,255,.14), transparent 62%),
    radial-gradient(ellipse 60% 50% at 72% 96%, rgba(110,231,255,.10), transparent 62%),
    radial-gradient(ellipse 40% 38% at 26% 88%, rgba(91,140,255,.07), transparent 62%);
  animation:mesh 38s ease-in-out infinite alternate;
}
body::after{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:30px 30px;
  -webkit-mask-image:radial-gradient(ellipse 85% 65% at 50% 0%, #000, transparent 78%);
          mask-image:radial-gradient(ellipse 85% 65% at 50% 0%, #000, transparent 78%);
}
@keyframes mesh{from{transform:translate(-2%,-1%) scale(1.05)}to{transform:translate(2%,1%) scale(1.12)}}

.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:24px}

/* ---------- type ---------- */
h1,h2,h3,h4{font-family:var(--font-display); font-weight:700; line-height:1.05}
h1{font-size:clamp(46px,8.2vw,104px); letter-spacing:-.045em}
h2{font-size:clamp(32px,4.6vw,60px); letter-spacing:-.035em}
h3{font-size:clamp(20px,2vw,27px); letter-spacing:-.02em}
p{color:var(--dim)}

.eyebrow{
  font-family:var(--font-mono); font-size:12px; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--blue);
  display:inline-flex; align-items:center; gap:14px;
}
.eyebrow::before{content:""; width:30px; height:1px; background:var(--blue); opacity:.75}

/* holographic clip text (T07) */
.holo{
  /* blue-dominant: cyan and indigo pass through, they are not the identity */
  background:linear-gradient(115deg,
    var(--blue) 0%, var(--blue-hi) 17%, #fff 27%,
    var(--cyan) 40%, var(--indigo) 52%,
    var(--blue-hi) 68%, var(--blue) 86%, var(--blue-hi) 100%);
  background-size:280% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:holo 14s linear infinite;
}
@keyframes holo{to{background-position:280% 0}}

.lede{font-size:clamp(17px,1.55vw,20px); max-width:60ch; color:var(--dim)}

/* ---------- buttons (K01 K02) ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-mono); font-size:13px; font-weight:500;
  letter-spacing:.08em; text-transform:uppercase; text-decoration:none;
  padding:15px 26px; border-radius:var(--r-sm); border:1px solid transparent;
  cursor:pointer; transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease);
}
.btn-accent{
  background:linear-gradient(180deg,var(--blue-hi),var(--blue));
  color:#04121F;
  /* Inner top highlight = polished edge; the bloom is pulled back from the gold
     alpha because blue reads hotter at the same value and tipped into neon. */
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 10px 30px -16px rgba(97,173,255,.42);
}
.btn-accent:hover{transform:translateY(-3px); box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 18px 42px -18px rgba(97,173,255,.5)}
.btn-accent:active{transform:translateY(1px)}
.btn-ghost{border-color:var(--line); color:var(--ink); background:rgba(255,255,255,.02)}
.btn-ghost:hover{transform:translateY(-3px); border-color:rgba(97,173,255,.55); background:rgba(97,173,255,.07)}
.btn-ghost:active{transform:translateY(1px)}

/* ---------- nav ---------- */
.nav > .btn-accent{white-space:nowrap; flex:none}
.nav{
  position:fixed; inset:0 0 auto 0; z-index:70;
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; padding:18px max(24px,calc((100vw - var(--maxw))/2 + 24px));
  transition:background .3s var(--ease), backdrop-filter .3s var(--ease), border-color .3s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.shade{
  background:rgba(7,10,18,.72); backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%); border-bottom-color:var(--line-2);
}
.brand{display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--ink)}
.brand-mark{
  /* The real "Ai" monogram. Kept as a background on the existing empty span so
     every page and the page generator pick it up without an HTML change. The
     artwork is decorative here: the adjacent .brand-txt carries the name. */
  width:38px; height:29px; flex:none;
  background:url("/assets/brand/logo-mark.webp") center/contain no-repeat;
  filter:drop-shadow(0 4px 14px rgba(11,127,239,.45));
}
/* Browsers without WebP still get the mark. */
@supports not (background-image:url("data:image/webp;base64,UklGRhoAAABXRUJQVlA4TA0AAAAvAAAAEAcQERGIiP4HAA==")){
  .brand-mark{background-image:url("/assets/brand/logo-mark.png")}
}
.brand-txt{font-family:var(--font-display); font-weight:700; font-size:15px; letter-spacing:.16em}
.brand-txt span{color:var(--logo-blue-hi); font-weight:500}
.nav-links{display:flex; gap:18px; align-items:center; flex:0 1 auto; min-width:0}
.nav-links a{
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--dim); text-decoration:none; transition:color .2s var(--ease); position:relative; padding-block:4px;
  /* Measured: the row needs about 1318px to sit on one line. Below that, flex was
     shrinking each link under its content width and breaking "What we do" across
     three lines. A label is an atom; it collapses to the burger instead. */
  white-space:nowrap; flex:none;
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0; background:var(--blue);
  transition:width .3s var(--ease);
}
.nav-links a:hover{color:var(--ink)} .nav-links a:hover::after{width:100%}
.nav .btn{padding:11px 18px}
.only-mobile{display:none}
@media (max-width:820px){ .only-mobile{display:block; color:var(--blue) !important} }
.burger{display:none; background:none; border:1px solid var(--line); border-radius:10px; padding:9px 11px; cursor:pointer}
.burger span{display:block; width:17px; height:1.5px; background:var(--ink); margin:3.5px 0}

/* ==================================================================
 HERO, fullscreen immersive + 3D drifting wall (the money shot, L14)
   ================================================================== */
.hero{position:relative; min-height:100svh; display:flex; align-items:center; overflow:hidden}

.wall{
  position:absolute; inset:-14% -6%; z-index:0;
  display:grid; grid-template-columns:repeat(5,1fr); gap:16px;
  /* --wx/--wy are nudged by the pointer in app.js */
  transform:translate3d(var(--wx,0px),var(--wy,0px),0)
            perspective(1500px) rotateY(-15deg) rotateX(7deg) rotateZ(2deg) scale(1.14);
  transform-origin:70% 50%;
  transition:transform .9s cubic-bezier(.16,.84,.44,1);
  opacity:.5; pointer-events:none;
  -webkit-mask-image:radial-gradient(ellipse 78% 82% at 68% 45%, #000 25%, transparent 74%);
          mask-image:radial-gradient(ellipse 78% 82% at 68% 45%, #000 25%, transparent 74%);
}
.wall-col{display:flex; flex-direction:column; gap:18px; will-change:transform}
.wall-col:nth-child(1){animation:drift-up 64s linear infinite}
.wall-col:nth-child(2){animation:drift-down 78s linear infinite}
.wall-col:nth-child(3){animation:drift-up 88s linear infinite}
.wall-col:nth-child(4){animation:drift-down 70s linear infinite}
@keyframes drift-up{from{transform:translateY(0)}to{transform:translateY(-50%)}}
@keyframes drift-down{from{transform:translateY(-50%)}to{transform:translateY(0)}}
.wall-tile{
  border-radius:10px; overflow:hidden; border:1px solid var(--line-2);
  background:var(--card); aspect-ratio:16/10; flex:none;
}
.wall-tile img{width:100%; height:100%; object-fit:cover; object-position:top center; display:block}
body.locked .wall-col{animation-play-state:paused}

.hero-inner{position:relative; z-index:2; width:100%}
.hero-copy{max-width:min(830px,72vw)}
.hero h1{margin:22px 0 0}
.hero h1 .l2{display:block; color:var(--ink)}
.hero .lede{margin-top:26px}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap; margin-top:38px}
.hero-note{
  margin-top:26px; font-family:var(--font-mono); font-size:11.5px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--dimmer);
}
.hero-fade{
  position:absolute; left:0; right:0; bottom:0; height:34vh; z-index:1; pointer-events:none;
  background:linear-gradient(to top,var(--canvas) 6%,rgba(7,10,18,.6) 48%,transparent);
}

/* ---------- proof strip ---------- */
.proof{border-block:1px solid var(--line-2); background:rgba(255,255,255,.012)}
.proof-grid{display:grid; grid-template-columns:repeat(4,1fr)}
.proof-cell{padding:34px 26px; border-left:1px solid var(--line-2)}
.proof-cell:first-child{border-left:0}
.proof-k{font-family:var(--font-mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--dimmer)}
.proof-v{
  font-family:var(--font-display); font-weight:700; font-size:clamp(30px,3.4vw,44px);
  letter-spacing:-.03em; margin-top:8px; font-variant-numeric:tabular-nums; color:var(--blue-hi);
}

/* ==================================================================
 THE WORK, gallery mosaic (varied tile sizes, K05 / trap #4)
   ================================================================== */
.sec{padding-block:clamp(84px,10vw,148px)}
.sec-head{display:flex; align-items:flex-end; justify-content:space-between; gap:40px; flex-wrap:wrap}
.sec-head h2{margin-top:18px; max-width:16ch}

.filters{display:flex; gap:9px; flex-wrap:wrap; margin-top:42px}
.filter{
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.13em; text-transform:uppercase;
  padding:10px 17px; border-radius:999px; border:1px solid var(--line);
  background:transparent; color:var(--dim); cursor:pointer;
  transition:color .22s var(--ease), border-color .22s var(--ease), background .22s var(--ease), transform .22s var(--ease);
}
.filter:hover{color:var(--ink); border-color:rgba(97,173,255,.45); transform:translateY(-2px)}
.filter[aria-pressed="true"]{
  color:#04121F; background:linear-gradient(180deg,var(--blue-hi),var(--blue)); border-color:transparent;
}

/* ---------- the wall: masonry columns, natural card heights ----------
   Shots are 1440x900 (16:10) and the media box is 16:10, so nothing is
   cropped. Copy sits BELOW the image, so the screenshot stays bright and
   the card's own type never fights the captured site's type.
   Each card carries --a: the accent extracted from its own screenshot. */
.grid{columns:3; column-gap:18px; margin-top:34px}

.card,.stmt{break-inside:avoid; margin-bottom:18px; width:100%}

.card{
  display:block; position:relative; overflow:hidden;
  border-radius:16px; border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.008));
  cursor:pointer; text-align:left; padding:0; color:inherit; font:inherit;
  transition:transform .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease);
}
.card::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(130% 70% at 50% 0%, var(--a), transparent 62%);
  opacity:0; transition:opacity .5s var(--ease); mix-blend-mode:soft-light;
}
/* pointer-tracked 3D tilt; --rx/--ry are written by app.js on mousemove */
.card:hover{
  transform:perspective(900px) translateY(-6px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  border-color:var(--a); box-shadow:var(--shadow-lift);
}
.card.is-tilting{transition:transform .1s linear, border-color .45s var(--ease), box-shadow .45s var(--ease)}
.card:hover::after{opacity:.5}
.card:focus-visible{outline:2px solid var(--a); outline-offset:3px}

/* browser chrome, reads as "this is a real site", and hosts the accent dot */
.card-chrome{
  display:flex; align-items:center; gap:6px; padding:9px 13px;
  border-bottom:1px solid var(--line-2); background:rgba(255,255,255,.03);
}
.dot{width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.15); flex:none}
.dot.live{background:var(--a)}
.card-url{
  margin-left:8px; font-family:var(--font-mono); font-size:10px; letter-spacing:.04em;
  color:var(--dimmer); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

.card-media{position:relative; aspect-ratio:16/10; overflow:hidden; background:#0c0d13}
.card-media img{
  width:100%; height:100%; object-fit:cover; object-position:top center; display:block;
  transition:transform .7s var(--ease);
}
.card:hover .card-media img{transform:scale(1.03)}

.card-body{padding:16px 18px 17px; position:relative; z-index:1}
.card-kicker{
  font-family:var(--font-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--a); display:flex; align-items:center; gap:8px;
}
.card-kicker b{color:var(--dimmer); font-weight:400}
.card-body h3{margin-top:10px; font-size:20px; letter-spacing:-.02em}
.card-body p{font-size:13.5px; line-height:1.6; margin-top:9px}
.card.feature .card-body h3{font-size:24px}
.card.feature .card-body p{font-size:14px}
.card-tags{display:flex; flex-wrap:wrap; gap:6px; margin-top:13px}
.card-tags i{
  font-family:var(--font-mono); font-style:normal; font-size:9.5px; letter-spacing:.08em;
  color:var(--dim); border:1px solid var(--line-2); border-radius:5px; padding:4px 7px;
}
.card-foot{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:15px}
.card-metric{
  font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; color:var(--dim);
  border:1px solid var(--line); border-radius:6px; padding:5px 9px;
}
.card-go{
  width:28px; height:28px; border-radius:50%; flex:none; display:grid; place-items:center;
  border:1px solid var(--a); color:var(--a); opacity:.55;
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.card:hover .card-go{opacity:1; transform:translate(2px,-2px)}

/* statement cards, break the rhythm so the wall never reads as a template */
.stmt{
  border-radius:16px; padding:30px 24px 26px;
  border:1px solid rgba(97,173,255,.22);
  background:linear-gradient(158deg,rgba(97,173,255,.11),rgba(91,140,255,.04) 60%,rgba(255,255,255,.012));
}
.stmt-big{
  font-family:var(--font-display); font-weight:700; font-size:clamp(54px,6.5vw,84px);
  line-height:.88; letter-spacing:-.055em; color:var(--blue-hi); font-variant-numeric:tabular-nums;
}
.stmt-label{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--blue); margin-top:16px;
}
.stmt-note{font-size:13.5px; line-height:1.6; margin-top:9px}


/* ==================================================================
 LIFECYCLE, the "we are your tech team" rail (build → rank)
   ================================================================== */
.lifecycle{display:grid; grid-template-columns:repeat(6,1fr); gap:0 18px; margin-top:52px}
.stage{position:relative; padding-top:40px}
/* the connecting line, runs from this dot to the next one */
.stage::before{
  content:""; position:absolute; top:11px; left:24px; right:-18px; height:1px;
  background:linear-gradient(90deg,var(--a),var(--line-2));
}
.stage:last-child::before{display:none}
.stage-dot{
  position:absolute; top:0; left:0; width:23px; height:23px; border-radius:50%;
  border:1px solid var(--a); background:var(--canvas);
  display:grid; place-items:center; z-index:2;
  transition:box-shadow .4s var(--ease), transform .4s var(--ease);
}
.stage-dot i{width:7px; height:7px; border-radius:50%; background:var(--a); display:block}
.stage:hover .stage-dot{transform:scale(1.15); box-shadow:0 0 0 6px color-mix(in srgb,var(--a) 16%,transparent)}
.stage-n{
  font-family:var(--font-mono); font-size:10px; letter-spacing:.18em; color:var(--a);
  display:block; margin-bottom:9px;
}
.stage h3{font-size:clamp(17px,1.6vw,20px); letter-spacing:-.015em}
.stage p{font-size:13.5px; line-height:1.6; margin-top:9px}

.partner-close{
  margin-top:clamp(44px,5vw,68px); padding:clamp(26px,3vw,38px);
  border-radius:var(--r); border:1px solid rgba(97,173,255,.24);
  background:linear-gradient(110deg,rgba(97,173,255,.09),rgba(255,255,255,.012));
  display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap;
}
.partner-close p{font-size:clamp(16px,1.6vw,19px); color:var(--ink); max-width:56ch; line-height:1.55}
.partner-close b{color:var(--blue-hi); font-weight:600}

@media (max-width:1080px){ .lifecycle{grid-template-columns:repeat(3,1fr); gap:34px 18px}
  .stage:nth-child(3)::before{display:none} }
@media (max-width:680px){
  /* becomes a vertical timeline, the line moves to the left edge */
  .lifecycle{grid-template-columns:1fr; gap:0}
  .stage{padding:0 0 26px 40px}
  .stage::before{
    top:24px; bottom:-2px; left:11px; right:auto; width:1px; height:auto;
    background:linear-gradient(180deg,var(--a),var(--line-2));
  }
  .stage:nth-child(3)::before{display:block}
  .stage:last-child::before{display:none}
  .stage-dot{top:0}
  .stage-n{margin-bottom:6px}
}

/* ==================================================================
 SPOTLIGHT, 3D coverflow carousel, auto-advancing
   ================================================================== */
.spot{padding-block:clamp(70px,8vw,110px) clamp(60px,7vw,96px); overflow:hidden}
.spot-stage{
  position:relative; margin-top:44px; height:clamp(300px,44vw,560px);
  perspective:1800px; perspective-origin:50% 45%;
}
.spot-slide{
  position:absolute; top:0; left:50%; width:min(760px,74vw);
  margin-left:calc(min(760px,74vw) / -2);
  transform-style:preserve-3d; pointer-events:none;
  opacity:0; transform:translateX(0) rotateY(0) scale(.7);
  transition:transform 1s var(--ease), opacity 1s var(--ease);
}
.spot-slide.is-active{opacity:1; transform:translateX(0) rotateY(0) scale(1); z-index:3; pointer-events:auto}
.spot-slide.is-prev{opacity:.3; transform:translateX(-62%) rotateY(26deg) scale(.82); z-index:2}
.spot-slide.is-next{opacity:.3; transform:translateX(62%) rotateY(-26deg) scale(.82); z-index:2}
.spot-slide.is-far-prev{opacity:.08; transform:translateX(-104%) rotateY(38deg) scale(.66); z-index:1}
.spot-slide.is-far-next{opacity:.08; transform:translateX(104%) rotateY(-38deg) scale(.66); z-index:1}

.spot-frame{
  border-radius:14px; overflow:hidden; border:1px solid var(--line);
  background:var(--card); box-shadow:0 50px 110px -50px #000;
  transition:border-color .8s var(--ease), box-shadow .8s var(--ease);
}
.spot-slide.is-active .spot-frame{
  border-color:var(--a); box-shadow:0 60px 130px -46px #000, 0 0 90px -40px var(--a);
}
.spot-frame .card-chrome{padding:11px 15px}
.spot-media{aspect-ratio:16/10; overflow:hidden; background:#0c0d13}
.spot-media img{width:100%; height:100%; object-fit:cover; object-position:top center; display:block}

.spot-info{
  margin-top:22px; text-align:center; opacity:0; transform:translateY(10px);
  transition:opacity .7s var(--ease) .25s, transform .7s var(--ease) .25s;
}
.spot-slide.is-active .spot-info{opacity:1; transform:none}
.spot-info .card-kicker{justify-content:center}
.spot-info h3{margin-top:9px; font-size:clamp(22px,2.4vw,30px)}
.spot-info p{font-size:14.5px; max-width:56ch; margin:9px auto 0}

.spot-nav{
  position:absolute; top:38%; z-index:6; width:46px; height:46px; border-radius:13px;
  border:1px solid var(--line); background:rgba(7,10,18,.7); color:var(--ink);
  display:grid; place-items:center; cursor:pointer;
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  transition:transform .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease);
}
.spot-nav.prev{left:max(16px,4vw)} .spot-nav.next{right:max(16px,4vw)}
.spot-nav:hover{border-color:var(--blue); background:rgba(97,173,255,.16); transform:scale(1.07)}

.spot-rail{display:flex; gap:9px; justify-content:center; flex-wrap:wrap; margin-top:34px}
.spot-dot{
  width:44px; height:5px; border-radius:99px; border:0; padding:0; cursor:pointer;
  background:rgba(255,255,255,.14); position:relative; overflow:hidden;
  transition:background .3s var(--ease);
}
.spot-dot:hover{background:rgba(255,255,255,.28)}
.spot-dot i{
  position:absolute; inset:0; width:0; background:var(--blue); display:block;
}
.spot-dot[aria-current="true"] i{width:100%; transition:width var(--dur,5.5s) linear}

/* ==================================================================
 BANDS, full-bleed diagonal marquee strips
   ================================================================== */
/* .bands clips; .bands-inner carries the rotation, so the rotated box can't
   widen the document and create a horizontal scrollbar */
.bands{
  position:relative; margin-block:clamp(60px,7vw,96px);
  padding-block:34px; overflow:hidden; max-width:100%;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.bands-inner{transform:rotate(-3.5deg) scale(1.06)}
.band{overflow:hidden; padding-block:7px}
.band-track{display:flex; gap:14px; width:max-content; will-change:transform}
.bands-inner .band:nth-child(1) .band-track{animation:band-l 56s linear infinite}
.bands-inner .band:nth-child(2) .band-track{animation:band-r 68s linear infinite}
.bands-inner .band:nth-child(3) .band-track{animation:band-l 82s linear infinite}
/* staggered widths per row so the three strips never line up into a grid */
.bands-inner .band:nth-child(2) .band-tile{width:clamp(150px,14vw,215px)}
.bands-inner .band:nth-child(3) .band-tile{width:clamp(200px,19vw,290px)}
@keyframes band-l{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes band-r{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.band-tile{
  width:clamp(180px,17vw,260px); aspect-ratio:16/10; flex:none;
  border-radius:9px; overflow:hidden; border:1px solid var(--line-2); background:var(--card);
  transition:transform .4s var(--ease), border-color .4s var(--ease);
}
.band-tile img{width:100%; height:100%; object-fit:cover; object-position:top center; display:block; opacity:.62; transition:opacity .4s var(--ease)}
.bands:hover .band-track{animation-play-state:paused}
.band-tile:hover{transform:scale(1.06); border-color:var(--a,var(--blue))}
.band-tile:hover img{opacity:1}

/* ==================================================================
 CASE STUDY OVERLAY, immersive takeover
   ================================================================== */
.study{
  position:fixed; inset:0; z-index:100; display:none;
  background:rgba(4,4,7,.9); backdrop-filter:blur(22px) saturate(140%);
  -webkit-backdrop-filter:blur(22px) saturate(140%);
}
.study.open{display:block; animation:studyIn .4s var(--ease)}
@keyframes studyIn{from{opacity:0}to{opacity:1}}
.study-shell{
  position:absolute; inset:clamp(12px,3.2vh,34px) clamp(12px,3vw,44px);
  display:grid; grid-template-columns:minmax(0,1.62fr) minmax(320px,.95fr);
  gap:0; border-radius:var(--r-lg); overflow:hidden;
  border:1px solid rgba(97,173,255,.24); background:var(--canvas-2);
  box-shadow:0 60px 140px -50px #000;
  animation:studyRise .5s var(--ease);
}
@keyframes studyRise{from{transform:translateY(24px) scale(.985); opacity:0}to{transform:none; opacity:1}}

.study-stage{position:relative; background:#0a0a0f; overflow:hidden}
.study-stage img{width:100%; height:100%; object-fit:cover; object-position:top center; display:block}
.study-stage iframe{width:100%; height:100%; border:0; display:block; background:#0a0a0f}
.study-stage .empty-stage{
  width:100%; height:100%;
  background:radial-gradient(ellipse 60% 50% at 40% 15%, rgba(97,173,255,.16), transparent 62%), #0c0d13;
}
.stage-toggle{
  position:absolute; left:18px; bottom:18px; display:flex; gap:8px; z-index:3;
  background:rgba(7,10,18,.7); padding:5px; border-radius:11px; border:1px solid var(--line);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
.stage-toggle button{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.11em; text-transform:uppercase;
  padding:8px 14px; border-radius:8px; border:0; cursor:pointer;
  background:transparent; color:var(--dim); transition:background .22s var(--ease), color .22s var(--ease);
}
.stage-toggle button[aria-pressed="true"]{background:rgba(97,173,255,.18); color:var(--blue-hi)}
.stage-toggle button:disabled{opacity:.32; cursor:not-allowed}

.study-panel{
  padding:clamp(26px,3vw,44px); overflow-y:auto; background:var(--canvas-2);
  border-left:1px solid var(--line); border-top:2px solid var(--a,var(--blue));
}
.study-panel .eyebrow{color:var(--a,var(--blue))}
.study-panel .eyebrow::before{background:var(--a,var(--blue))}
.study-shell{border-color:color-mix(in srgb, var(--a,var(--blue)) 30%, transparent)}
.study-panel h2{font-size:clamp(28px,3.1vw,42px); margin:16px 0 0}
.study-panel .lede{margin-top:18px; font-size:16px}
.study-row{display:flex; gap:10px; flex-wrap:wrap; margin-top:26px}
.chip{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.09em;
  padding:7px 12px; border-radius:8px; color:var(--dim);
  border:1px solid var(--line); background:rgba(255,255,255,.025);
}
.study-facts{
  margin-top:30px; border-top:1px solid var(--line); padding-top:10px;
}
.fact{display:flex; justify-content:space-between; gap:18px; padding:13px 0; border-bottom:1px solid var(--line-2)}
.fact dt{font-family:var(--font-mono); font-size:11px; letter-spacing:.15em; text-transform:uppercase; color:var(--dimmer)}
.fact dd{font-family:var(--font-mono); font-size:12.5px; color:var(--ink); text-align:right}
.study-actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:32px}

.study-close,.study-nav{
  position:absolute; z-index:6; width:44px; height:44px; border-radius:12px;
  border:1px solid var(--line); background:rgba(7,10,18,.72); color:var(--ink);
  display:grid; place-items:center; cursor:pointer;
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  transition:transform .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease);
}
.study-close{top:14px; right:14px}
.study-nav.prev{top:50%; left:14px; transform:translateY(-50%)}
.study-nav.next{top:50%; left:64px; transform:translateY(-50%)}
.study-close:hover,.study-nav:hover{border-color:rgba(97,173,255,.6); background:rgba(97,173,255,.14)}
.study-nav:hover{transform:translateY(-50%) scale(1.06)}
.study-count{
  position:absolute; right:20px; bottom:18px; z-index:6;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; color:var(--dimmer);
}

/* ==================================================================
 CAPABILITY, asymmetric split (avoids 3-equal-card slop, L03/X03)
   ================================================================== */
.cap{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(36px,6vw,90px); align-items:start}
.cap-list{border-top:1px solid var(--line)}
.cap-item{
  display:grid; grid-template-columns:56px 1fr auto; gap:20px; align-items:baseline;
  padding:26px 4px; border-bottom:1px solid var(--line-2);
  transition:background .3s var(--ease), padding-left .3s var(--ease);
}
.cap-item:hover{background:rgba(97,173,255,.04); padding-left:14px}
.cap-n{font-family:var(--font-mono); font-size:12px; color:var(--blue); letter-spacing:.12em}
.cap-item h3{font-size:clamp(19px,1.7vw,23px)}
.cap-item p{font-size:14.5px; margin-top:7px; max-width:52ch}
.cap-tag{font-family:var(--font-mono); font-size:10.5px; letter-spacing:.15em; text-transform:uppercase; color:var(--dimmer); white-space:nowrap}

/* marquee ribbon, full bleed break (L02/L13) */
.ribbon{
  margin-block:clamp(70px,8vw,110px);
  border-block:1px solid var(--line-2); overflow:hidden;
  background:linear-gradient(90deg,rgba(97,173,255,.05),transparent 30%,transparent 70%,rgba(91,140,255,.05));
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
.ribbon-track{display:flex; width:max-content; animation:slide 44s linear infinite}
.ribbon-track span{
  font-family:var(--font-display); font-weight:700; font-size:clamp(22px,2.7vw,36px);
  letter-spacing:-.02em; padding:26px 30px; color:rgba(255,255,255,.15); white-space:nowrap;
}
.ribbon-track span em{font-style:normal; color:var(--blue); opacity:.85}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---------- process ---------- */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin-top:52px; background:var(--line-2); border:1px solid var(--line-2); border-radius:var(--r)}
.step{background:var(--canvas); padding:32px 26px 38px}
.step:first-child{border-radius:var(--r) 0 0 var(--r)}
.step:last-child{border-radius:0 var(--r) var(--r) 0}
.step-n{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.2em; color:var(--blue);
  display:block; margin-bottom:20px;
}
.step h3{font-size:19px}
.step p{font-size:14.5px; margin-top:11px}
.step-time{
  margin-top:20px; display:inline-block; font-family:var(--font-mono); font-size:10.5px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--dimmer);
  border:1px solid var(--line); border-radius:7px; padding:6px 10px;
}

/* ---------- pricing (avoids K09 three-identical-cards) ---------- */
.tiers{margin-top:48px; border-top:1px solid var(--line)}
.tier{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.35fr) auto;
  gap:clamp(20px,4vw,56px); align-items:center;
  padding:34px 4px; border-bottom:1px solid var(--line-2);
  transition:background .3s var(--ease)}
.tier:hover{background:rgba(255,255,255,.018)}
.tier.feature{
  background:linear-gradient(100deg,rgba(97,173,255,.075),rgba(97,173,255,.012) 55%,transparent);
  border-inline:1px solid rgba(97,173,255,.22); border-radius:var(--r);
  padding-inline:26px; margin-block:8px;
}
.tier-name{display:flex; align-items:baseline; gap:14px; flex-wrap:wrap}
.tier-name h3{font-size:clamp(21px,2vw,27px)}
.tier-badge{
  font-family:var(--font-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:#04121F; background:var(--blue); border-radius:5px; padding:4px 8px;
}
.tier p{font-size:14.5px; margin-top:8px}
.tier-price{text-align:right}
.tier-price b{
  font-family:var(--font-display); font-weight:700; font-size:clamp(24px,2.4vw,32px);
  letter-spacing:-.03em; color:var(--blue-hi); display:block; font-variant-numeric:tabular-nums;
}
.tier-price span{font-family:var(--font-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--dimmer)}
.price-note{margin-top:26px; font-size:14px; color:var(--dimmer); max-width:64ch}

/* ---------- contact sheet: the whole portfolio, grouped ---------- */
.sheet{margin-top:26px}
.sheet-row{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(118px,1fr));
  gap:8px;
}
.sheet-group{
  display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;
  margin:34px 0 14px; padding-bottom:11px; border-bottom:1px solid var(--line);
}
.sheet-group:first-child{margin-top:8px}
.sheet-group-name{
  font-family:var(--font-display); font-weight:700; font-size:clamp(17px,1.7vw,21px);
  letter-spacing:-.02em; color:var(--ink);
}
.sheet-group-count{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.12em; color:#140f04;
  background:var(--blue); border-radius:5px; padding:3px 8px; align-self:center;
}
.sheet-group-note{
  font-family:var(--font-body); font-size:13.5px; color:var(--dim);
  flex:1 1 260px; min-width:0;
}
.sheet-cell{
  position:relative; aspect-ratio:16/10; overflow:hidden; padding:0; cursor:pointer;
  border-radius:7px; border:1px solid var(--line-2); background:var(--card);
  transition:transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease), z-index 0s;
}
.sheet-cell img{
  width:100%; height:100%; object-fit:cover; object-position:top center; display:block;
  opacity:.5; filter:saturate(.7); transition:opacity .35s var(--ease), filter .35s var(--ease);
}
.sheet-cell:hover,.sheet-cell:focus-visible{
  transform:scale(1.35); z-index:5; outline:none;
  border-color:var(--a,var(--blue)); box-shadow:0 24px 50px -20px #000, 0 0 40px -18px var(--a,var(--blue));
}
.sheet-cell:hover img,.sheet-cell:focus-visible img{opacity:1; filter:saturate(1)}
.sheet-cell b{
  position:absolute; left:0; right:0; bottom:0; padding:14px 7px 5px;
  font-family:var(--font-mono); font-size:8.5px; font-weight:400; letter-spacing:.06em;
  color:#fff; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  background:linear-gradient(to top,rgba(4,4,7,.95),transparent);
  opacity:0; transition:opacity .35s var(--ease);
}
.sheet-cell:hover b,.sheet-cell:focus-visible b{opacity:1}
@media (max-width:640px){ .sheet-row{grid-template-columns:repeat(auto-fill,minmax(94px,1fr)); gap:6px} }

/* ==================================================================
 PRICING: colour ladder + detail panel, care plans, add-on tabs
   ================================================================== */
.ladder{display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); gap:clamp(24px,3.4vw,52px); margin-top:44px; align-items:start}

.rungs{display:flex; flex-direction:column; gap:7px}
.rung{
  position:relative; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:14px;
  padding:15px 18px; border-radius:13px; cursor:pointer; text-align:left; font:inherit; color:inherit;
  border:1px solid var(--line-2); background:rgba(255,255,255,.018);
  transition:border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease);
  overflow:hidden;
}
/* the ladder itself: a colour bar that grows with the tier */
.rung::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--a);
  transform:scaleY(.4); transform-origin:center; transition:transform .35s var(--ease);
}
.rung:hover{border-color:var(--a); background:rgba(255,255,255,.035); transform:translateX(3px)}
.rung[aria-selected="true"]{
  border-color:var(--a); background:linear-gradient(100deg,color-mix(in srgb,var(--a) 13%,transparent),transparent 70%);
}
.rung[aria-selected="true"]::before{transform:scaleY(1)}
.rung:focus-visible{outline:2px solid var(--a); outline-offset:2px}
.rung-dot{width:9px; height:9px; border-radius:50%; background:var(--a); flex:none; box-shadow:0 0 0 4px color-mix(in srgb,var(--a) 18%,transparent)}
.rung-name{font-family:var(--font-display); font-weight:700; font-size:15.5px; letter-spacing:-.01em}
.rung-for{font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; color:var(--dimmer); margin-top:3px; display:block}
.rung-price{font-family:var(--font-display); font-weight:700; font-size:16px; letter-spacing:-.02em; color:var(--a); white-space:nowrap; font-variant-numeric:tabular-nums}
.rung-badge{
  position:absolute; top:-1px; right:-1px; font-family:var(--font-mono); font-size:8.5px;
  letter-spacing:.14em; text-transform:uppercase; color:#0a0a0d; background:var(--a);
  padding:3px 9px; border-radius:0 12px 0 10px;
}
.rung.apex .rung-name{
  background:linear-gradient(100deg,var(--blue),var(--blue-hi),var(--cyan),var(--blue));
  background-size:200% 100%; -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:holo 12s linear infinite;
}

.detail{
  position:sticky; top:96px; border-radius:var(--r); padding:clamp(24px,2.6vw,34px);
  border:1px solid var(--a); background:linear-gradient(165deg,color-mix(in srgb,var(--a) 9%,transparent),rgba(255,255,255,.012));
  transition:border-color .4s var(--ease), background .4s var(--ease);
}
.detail-top{display:flex; align-items:flex-start; justify-content:space-between; gap:20px; flex-wrap:wrap}
.detail h3{font-size:clamp(21px,2.1vw,27px); max-width:16ch}
.detail-price{font-family:var(--font-display); font-weight:700; font-size:clamp(30px,3.4vw,44px); letter-spacing:-.035em; color:var(--a); line-height:1; font-variant-numeric:tabular-nums}
.detail-meta{display:flex; gap:8px; flex-wrap:wrap; margin-top:16px}
.detail-meta span{
  font-family:var(--font-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  border:1px solid var(--line); border-radius:6px; padding:5px 9px; color:var(--dim);
}
.detail-inherits{font-family:var(--font-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--a); margin-top:24px}
.detail-list{list-style:none; display:grid; grid-template-columns:repeat(2,1fr); gap:9px 18px; margin-top:14px}
.detail-list li{position:relative; padding-left:20px; font-size:14px; color:var(--dim); line-height:1.5}
.detail-list li::before{
  content:""; position:absolute; left:0; top:.55em; width:9px; height:2px; border-radius:2px; background:var(--a);
}
.detail-note{margin-top:20px; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.06em; color:var(--dimmer)}
.detail .btn{margin-top:26px}

/* ---------- care plans ---------- */
.care{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:34px}
.care-card{
  border-radius:15px; padding:24px 21px 26px; border:1px solid var(--line-2);
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.006));
  transition:border-color .35s var(--ease), transform .35s var(--ease);
}
.care-card:hover{border-color:var(--a); transform:translateY(-4px)}
.care-card h4{font-family:var(--font-display); font-weight:700; font-size:16px; letter-spacing:-.01em; color:var(--a)}
.care-price{font-family:var(--font-display); font-weight:700; font-size:clamp(26px,2.6vw,34px); letter-spacing:-.035em; margin-top:10px; font-variant-numeric:tabular-nums}
.care-price i{font-style:normal; font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; color:var(--dimmer)}
.care-inherits{font-family:var(--font-mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--dimmer); margin-top:16px}
.care-card ul{list-style:none; margin-top:12px; display:grid; gap:7px}
.care-card li{font-size:13px; color:var(--dim); padding-left:15px; position:relative}
.care-card li::before{content:""; position:absolute; left:0; top:.55em; width:7px; height:1.5px; background:var(--a); border-radius:2px}

/* ---------- add-ons ---------- */
.addon-tabs{display:flex; gap:8px; flex-wrap:wrap; margin-top:34px}
.addon-tab{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.13em; text-transform:uppercase;
  padding:9px 16px; border-radius:999px; border:1px solid var(--line); background:transparent;
  color:var(--dim); cursor:pointer; transition:color .22s var(--ease), border-color .22s var(--ease), background .22s var(--ease), transform .22s var(--ease);
}
.addon-tab:hover{color:var(--ink); border-color:rgba(97,173,255,.45); transform:translateY(-2px)}
.addon-tab[aria-pressed="true"]{color:#04121F; background:linear-gradient(180deg,var(--blue-hi),var(--blue)); border-color:transparent}
.addon-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:0 34px; margin-top:22px; border-top:1px solid var(--line)}
.addon-row{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  padding:15px 4px; border-bottom:1px solid var(--line-2);
  transition:padding-left .3s var(--ease), background .3s var(--ease);
}
.addon-row:hover{padding-left:12px; background:rgba(97,173,255,.045)}
.addon-row span{font-size:14.5px}
.addon-row b{font-family:var(--font-display); font-weight:700; font-size:15px; letter-spacing:-.02em; color:var(--blue-hi); white-space:nowrap; font-variant-numeric:tabular-nums}

@media (max-width:1080px){
  .ladder{grid-template-columns:1fr}
  .detail{position:static}
  .care{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:600px){
  .care{grid-template-columns:1fr}
  .detail-list{grid-template-columns:1fr}
  .rung{grid-template-columns:auto 1fr; row-gap:6px}
  .rung-price{grid-column:2}
}

/* ---------- industry packages ---------- */
.industries{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:40px}
.ind{
  position:relative; border-radius:15px; padding:24px 22px 22px; overflow:hidden;
  border:1px solid var(--line-2);
  background:linear-gradient(170deg,rgba(255,255,255,.032),rgba(255,255,255,.006));
  transition:border-color .35s var(--ease), transform .35s var(--ease);
}
.ind::before{
  content:""; position:absolute; inset:0 0 auto 0; height:2px; background:var(--a); opacity:.55;
}
.ind:hover{border-color:var(--a); transform:translateY(-4px)}
.ind h3{font-size:19px; letter-spacing:-.015em; margin-top:2px}
.ind-line{font-size:13.5px; line-height:1.6; margin-top:9px; color:var(--dim)}
.ind-bullets{list-style:none; display:grid; gap:7px; margin-top:16px}
.ind-bullets li{font-size:13px; color:var(--dim); padding-left:15px; position:relative}
.ind-bullets li::before{content:""; position:absolute; left:0; top:.55em; width:7px; height:1.5px; background:var(--a); border-radius:2px}
.ind-foot{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  margin-top:20px; padding-top:15px; border-top:1px solid var(--line-2);
}
.ind-foot span{font-family:var(--font-mono); font-size:10px; letter-spacing:.13em; text-transform:uppercase; color:var(--dimmer)}
.ind-foot b{font-family:var(--font-display); font-weight:700; font-size:16px; letter-spacing:-.02em; color:var(--a); white-space:nowrap}

/* ---------- white-label / partner band ---------- */
.partner-band{
  margin-top:clamp(56px,6vw,84px); padding:clamp(28px,3.2vw,44px);
  border-radius:var(--r-lg); border:1px dashed rgba(97,173,255,.3);
  background:linear-gradient(120deg,rgba(91,140,255,.06),rgba(97,173,255,.06));
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:26px; align-items:center;
}
.partner-band h3{font-size:clamp(20px,2.2vw,27px)}
.partner-band p{font-size:15px; margin-top:10px; max-width:62ch}

@media (max-width:1080px){ .industries{grid-template-columns:repeat(2,1fr)} }
@media (max-width:680px){
  .industries{grid-template-columns:1fr}
  .partner-band{grid-template-columns:1fr; gap:20px}
}

/* ---------- CTA + footer (avoids L12 grey 4-col) ---------- */
.cta{
  position:relative; overflow:hidden; border-radius:var(--r-lg);
  border:1px solid rgba(97,173,255,.26); padding:clamp(44px,6vw,86px);
  background:linear-gradient(150deg,rgba(97,173,255,.11),rgba(91,140,255,.05) 46%,rgba(255,255,255,.014));
  text-align:center;
}
.cta h2{max-width:18ch; margin-inline:auto}
.cta .lede{margin:22px auto 0; text-align:center}
.cta-actions{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:36px}

/* ---------- FAQ ---------- */
.faq{margin-top:38px; border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line-2)}
.faq-item summary{
  list-style:none; cursor:pointer; padding:22px 44px 22px 4px; position:relative;
  display:flex; align-items:center; transition:padding-left .3s var(--ease), color .3s var(--ease);
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary h3{font-size:clamp(16px,1.7vw,20px); letter-spacing:-.015em; margin:0; font-weight:600}
.faq-item summary:hover{padding-left:12px}
.faq-item summary:hover h3{color:var(--blue-hi)}
.faq-mark{
  position:absolute; right:6px; top:50%; width:13px; height:13px; margin-top:-6px; flex:none;
}
.faq-mark::before,.faq-mark::after{
  content:""; position:absolute; background:var(--blue); border-radius:2px;
  transition:transform .3s var(--ease), opacity .3s var(--ease);
}
.faq-mark::before{left:0; top:5.5px; width:13px; height:2px}
.faq-mark::after{left:5.5px; top:0; width:2px; height:13px}
.faq-item[open] .faq-mark::after{transform:rotate(90deg); opacity:0}
.faq-item[open] summary h3{color:var(--blue-hi)}
.faq-item > p{
  padding:0 44px 24px 4px; max-width:82ch; font-size:15px; line-height:1.7;
  animation:faqIn .35s var(--ease);
}
.faq-item > p b{color:var(--ink); font-weight:600}
@keyframes faqIn{from{opacity:0; transform:translateY(-6px)}to{opacity:1; transform:none}}

/* ---------- lead form (K03: never the default browser look) ---------- */
.lead-form{margin-top:34px; text-align:left; max-width:760px; margin-inline:auto}
.lf-row{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.lf-field{display:block; margin-top:14px}
.lf-field > span{
  display:block; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--dimmer); margin-bottom:8px;
}
.lf-field input,.lf-field textarea,.lf-field select{
  width:100%; font-family:var(--font-body); font-size:15px; color:var(--ink);
  background:rgba(255,255,255,.035); border:1px solid var(--line);
  border-radius:11px; padding:13px 15px; outline:none;
  transition:border-color .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease);
  -webkit-appearance:none; appearance:none;
}
.lf-field textarea{resize:vertical; min-height:110px; line-height:1.6}
.lf-field select{
  cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--dim) 50%),linear-gradient(135deg,var(--dim) 50%,transparent 50%);
  background-position:calc(100% - 20px) calc(50% + 2px),calc(100% - 15px) calc(50% + 2px);
  background-size:5px 5px,5px 5px; background-repeat:no-repeat;
}
.lf-field select option{background:#14141a; color:var(--ink)}
.lf-field input::placeholder,.lf-field textarea::placeholder{color:#8e8e99}
.lf-field input:focus,.lf-field textarea:focus,.lf-field select:focus{
  border-color:var(--blue); background:rgba(255,255,255,.055);
  box-shadow:0 0 0 3px rgba(97,173,255,.16);
}
.lf-field.invalid input,.lf-field.invalid textarea{border-color:#f06b7c}
.lf-hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.lf-foot{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:24px}
.lf-status{font-family:var(--font-mono); font-size:12px; letter-spacing:.04em; margin:0}
.lf-status.ok{color:#3ddb7f}
.lf-status.err{color:#f06b7c}
.lf-small{font-size:12.5px; color:var(--dimmer); margin-top:16px}
.lead-form.sent .lf-row,.lead-form.sent .lf-field,.lead-form.sent .lf-small{display:none}
@media (max-width:680px){ .lf-row{grid-template-columns:1fr; gap:0} .lf-foot .btn{flex:1 1 100%; justify-content:center} }

.foot{border-top:1px solid var(--line-2); margin-top:clamp(70px,9vw,120px); padding-block:44px 56px}
.foot-top{display:flex; justify-content:space-between; gap:36px; align-items:flex-end; flex-wrap:wrap}
.foot-mark{font-family:var(--font-display); font-weight:700; font-size:clamp(34px,6vw,74px); letter-spacing:-.05em; color:rgba(255,255,255,.09); line-height:1}
.foot-links{display:flex; gap:26px; flex-wrap:wrap}
.foot-links a{font-family:var(--font-mono); font-size:11.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--dim); text-decoration:none; transition:color .2s var(--ease)}
.foot-links a:hover{color:var(--blue)}
.foot-base{margin-top:34px; display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; color:var(--dimmer)}

/* Legal attribution. Its own line rather than a third flex child: the sentence is far
   longer than the two mono labels and space-between would strand it mid-row. */
.foot-legal{margin-top:26px; padding-top:22px; border-top:1px solid var(--line-2);
  font-size:12.5px; line-height:1.7; color:var(--dimmer); max-width:74ch}
.foot-legal strong{color:var(--dim); font-weight:600}
.foot-legal a{color:var(--dim); text-decoration:none; border-bottom:1px solid var(--line);
  transition:color .2s var(--ease), border-color .2s var(--ease)}
.foot-legal a:hover{color:var(--blue); border-color:var(--blue-lo)}

/* ---------- reveal (M02 M05) ---------- */
[data-rise]{opacity:0; transform:translateY(20px); transition:opacity .8s var(--ease), transform .8s var(--ease)}
[data-rise].in{opacity:1; transform:none}

/* ==================================================================
 RESPONSIVE, restructures, not just stacking (L11)
   ================================================================== */

/* Nav: tighten, then collapse. Measured widths at 12px mono, letter-spacing .12em:
   brand 246 + CTA 147 + 8 labels 578 + gaps. At gap 30 the row needs ~1318px, at
   gap 18 it needs ~1234, so a 1280 laptop keeps the full nav and anything narrower
   gets the burger rather than a two line bar. */
@media (max-width:1200px){
  .nav-links{display:none}
  .burger{display:block}
  /* The dropdown styling has to live at this breakpoint too, or the burger appears
     between 820 and 1200 and opens nothing. */
  .nav.open .nav-links{
    display:flex; position:absolute; inset:100% 0 auto 0; flex-direction:column; gap:0;
    background:rgba(7,10,18,.97); backdrop-filter:blur(20px); border-bottom:1px solid var(--line);
    padding:8px 24px 20px;
  }
  .nav.open .nav-links a{padding:15px 0; border-bottom:1px solid var(--line-2); width:100%; font-size:12px}
}

@media (max-width:1080px){
  .study-shell{grid-template-columns:1fr; grid-template-rows:minmax(0,46vh) minmax(0,1fr)}
  .study-panel{border-left:0; border-top:1px solid var(--line)}
  .cap{grid-template-columns:1fr; gap:34px}
  .steps{grid-template-columns:repeat(2,1fr)}
  .step:first-child,.step:last-child{border-radius:0}
  .grid{columns:2}
}
@media (max-width:820px){
  .nav-links{display:none}
  .burger{display:block}
  /* the hero already carries this CTA, keeps the bar to brand + menu */
  .nav > .btn-accent{display:none}
  .nav{padding-block:14px}

  /* the fixed bar was covering the hero eyebrow */
  .hero{align-items:flex-start}
  .hero-inner{padding-top:104px}

  /* ---- spotlight: the fixed stage height was shorter than a slide on a
     phone, so the progress rail printed over the description ---- */
  .spot-stage{height:auto; min-height:0; padding-bottom:8px; perspective:none}
  .spot-slide{
    position:relative; left:auto; margin-left:0; width:100%;
    transform:none !important; opacity:1; display:none;
  }
  .spot-slide.is-active{display:block; animation:spotFade .5s var(--ease)}
  .spot-slide.is-prev,.spot-slide.is-next,
  .spot-slide.is-far-prev,.spot-slide.is-far-next{display:none}
  @keyframes spotFade{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:none}}
  /* arrows sat on top of the card, put them in a row with the dots instead */
  .spot-nav{position:static; width:42px; height:42px; flex:none}
  .spot-rail{align-items:center; gap:12px; margin-top:22px}
  .spot-dot{width:30px}
  .nav.open .nav-links{
    display:flex; position:absolute; inset:100% 0 auto 0; flex-direction:column; gap:0;
    background:rgba(7,10,18,.97); backdrop-filter:blur(20px); border-bottom:1px solid var(--line);
    padding:8px 24px 20px;
  }
  .nav.open .nav-links a{padding:15px 0; border-bottom:1px solid var(--line-2); width:100%}
  .wall{opacity:.3; transform:perspective(1200px) rotateY(-9deg) scale(1.3)}
  .hero-copy{max-width:100%}
  .proof-grid{grid-template-columns:repeat(2,1fr)}
  .proof-cell:nth-child(3){border-left:0}
  .proof-cell:nth-child(n+3){border-top:1px solid var(--line-2)}
  .tier{grid-template-columns:1fr; gap:14px; text-align:left}
  .tier-price{text-align:left}
  .cap-item{grid-template-columns:38px 1fr; gap:14px}
  .cap-tag{grid-column:2; margin-top:8px}
  .study-nav.next{left:64px}
}
@media (max-width:600px){
  .grid{columns:1}
  .steps{grid-template-columns:1fr}
  .hero-actions .btn{flex:1 1 100%; justify-content:center}
}

/* ==================================================================
 TOUCH, there is no hover, so anything that only appeared on hover
   has to be visible by default or it simply does not exist on a phone.
   ================================================================== */
@media (hover:none){
  .sheet-cell img{opacity:.82; filter:saturate(.95)}
  .sheet-cell b{opacity:1}
  /* 1.35 scale would push neighbours off-screen on a phone */
  .sheet-cell:hover,.sheet-cell:active{transform:scale(1.06)}
  .card-go{opacity:1}
  .card:hover{transform:none}
  .card:active{transform:scale(.985)}
  .card-shot img,.card-media img{filter:saturate(.92) contrast(1) brightness(.86)}
  .tile-open{opacity:1; transform:none}
  .band-tile img{opacity:.8}
  .rung:hover{transform:none}
  .addon-row:hover{padding-left:4px; background:transparent}
}

/* ---------- M04: reduced motion kill-switch ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important}
  .wall-col,.band-track,.ribbon-track{animation:none}
  [data-rise]{opacity:1; transform:none}
  .card:hover{transform:none}
  .spot-slide{transition:none}
}

/* ---------- services grid (links out to the standalone service pages) ---------- */
.svc-grid{
  margin-top:34px;display:grid;gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(252px,1fr));
}
.svc{
  display:block;padding:19px 20px;text-decoration:none;
  border:1px solid var(--line);border-radius:12px;
  background:rgba(255,255,255,.018);
  transition:border-color .22s var(--ease),background .22s var(--ease),transform .22s var(--ease);
}
.svc:hover{border-color:var(--blue-lo);background:rgba(97,173,255,.05);transform:translateY(-2px)}
.svc strong{display:block;font:600 16px/1.3 var(--font-display);color:var(--ink);letter-spacing:-.01em}
.svc span{display:block;margin-top:7px;font:400 13.5px/1.55 var(--font-body);color:var(--dimmer)}
@media (max-width:640px){ .svc-grid{grid-template-columns:1fr} }