/* ============================================================
   Nexora case study — tokens
   ============================================================ */
:root {
  --bg:            #05070f;
  --bg-alt:        #080b16;
  --surface:       #0c1120;
  --surface-2:     #101731;
  --line:          #1a2340;
  --line-soft:     #141b32;

  --ink:           #e9edf9;
  --ink-2:         #aab4d0;
  --ink-3:         #7c87a6;

  --violet:        #6d5cf6;
  --violet-2:      #8b7bff;
  --violet-dim:    #2a2470;
  --lime:          #c6f24e;

  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-pill: 999px;

  --wrap: 1180px;
  --nav-h: 70px;

  /* distance from the viewport edge to the content column */
  --gutter: max(24px, calc(50vw - var(--wrap) / 2 + 24px));

  --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Plus Jakarta Sans", var(--font);

  --ease: cubic-bezier(.22, .61, .36, 1);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 20px);
  -webkit-text-size-adjust: 100%;
  /* clip, not hidden: hidden on html/body makes body the scroll container
     and kills position:sticky in the hero */
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 16px/1.65 var(--font);
  -webkit-font-smoothing: antialiased;
}

body.is-loading { overflow: hidden; }

img, canvas, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-family: var(--display); margin: 0; letter-spacing: -.02em; line-height: 1.1; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
code {
  font: 500 .9em/1 ui-monospace, "SF Mono", Menlo, monospace;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 1px 5px;
}
::selection { background: var(--violet); color: #fff; }

:where(a, button):focus-visible {
  outline: 2px solid var(--violet-2);
  outline-offset: 3px;
  border-radius: 6px;
}

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

/* ============================================================
   Loader
   ============================================================ */
.loader {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 22px;
  background: var(--bg);
  transition: opacity .5s var(--ease), visibility .5s;
}
.loader.is-done { opacity: 0; visibility: hidden; }
.loader__mark { color: var(--ink); animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .35; transform: scale(.94); } }

.loader__bar {
  width: 190px;
  height: 3px;
  border-radius: var(--r-pill);
  background: var(--line);
  overflow: hidden;
}
.loader__bar span {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--violet), var(--lime));
  transition: width .2s linear;
}
.loader__pct {
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ============================================================
   Nav
   ============================================================ */
.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 90;
  height: var(--nav-h);
  transition: background .35s var(--ease), border-color .35s var(--ease), backdrop-filter .35s;
  border-bottom: 1px solid transparent;
}
.nav.is-stuck {
  background: rgba(5, 7, 15, .78);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--line-soft);
}
.nav__inner {
  height: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 24px;
  display: flex;
  align-items: center;
  gap: 24px;
}

.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand__mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--r-sm);
  color: #fff;
  background: linear-gradient(140deg, var(--violet-2), var(--violet));
  box-shadow: 0 6px 18px -8px var(--violet);
}
.brand__name {
  font-family: var(--display);
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -.01em;
}

.nav__links {
  margin-inline: auto;
  display: flex;
  gap: 6px;
}
.nav__links a {
  position: relative;
  padding: 8px 12px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink-2);
  border-radius: 8px;
  transition: color .2s;
}
.nav__links a:hover { color: var(--ink); }
.nav__links a.is-active { color: #fff; }
.nav__links a.is-active::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 1px;
  height: 2px;
  border-radius: 2px;
  background: var(--violet-2);
}

.nav__burger {
  display: none;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  cursor: pointer;
  padding: 0;
}
.nav__burger span {
  display: block;
  width: 16px;
  height: 1.6px;
  margin: 4px auto;
  background: var(--ink);
  border-radius: 2px;
  transition: transform .25s var(--ease);
}
.nav__burger[aria-expanded="true"] span:first-child { transform: translateY(3px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:last-child { transform: translateY(-3px) rotate(-45deg); }

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font);
  font-size: 14.5px;
  font-weight: 600;
  padding: 11px 20px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .2s var(--ease), background .2s, border-color .2s, box-shadow .2s, color .2s;
}
.btn:hover { transform: translateY(-2px); }

.btn--primary {
  color: #fff;
  background: linear-gradient(140deg, var(--violet-2), var(--violet));
  box-shadow: 0 10px 26px -12px var(--violet);
}
.btn--primary:hover { box-shadow: 0 16px 32px -12px var(--violet); }

.btn--lime {
  color: #11160f;
  background: var(--lime);
  padding: 8px 8px 8px 22px;
  font-weight: 700;
  letter-spacing: .01em;
  box-shadow: 0 14px 34px -16px rgba(198, 242, 78, .9);
}
.btn__circle {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #11160f;
  color: var(--lime);
}

.btn--ghost {
  color: var(--ink);
  border-color: rgba(233, 237, 249, .28);
  background: rgba(10, 14, 26, .35);
  backdrop-filter: blur(8px);
}
.btn--ghost:hover { border-color: rgba(233, 237, 249, .6); }

.btn--outline {
  color: var(--ink);
  border-color: var(--line);
  background: var(--surface);
}
.btn--outline:hover { border-color: var(--violet); }

/* ============================================================
   Backdrop — the scroll journey, one fixed canvas behind the page
   Sections opt in by carrying data-scene; opaque sections cover it.
   ============================================================ */
.backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.backdrop__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* the overscale hides the blur bleed at the edges during the focus pull */
  transform: scale(1.05);
  will-change: filter;
}

/* Held over the frames while the hero headline is up, then lifted by script. */
.backdrop__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(4, 6, 13, .84) 0%,
    rgba(4, 6, 13, .76) 42%,
    rgba(4, 6, 13, .5) 100%);
}

/* permanent scrims: keep the nav and the scene chrome legible over light frames */
.backdrop__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(5, 7, 15, .5) 0%, rgba(5, 7, 15, .14) 12%, rgba(5, 7, 15, 0) 24%),
    linear-gradient(0deg, rgba(5, 7, 15, .4) 0%, rgba(5, 7, 15, .1) 9%, rgba(5, 7, 15, 0) 20%);
}

/* every real section paints above the backdrop */
.section, .scene, .foot { position: relative; z-index: 1; }

/* ============================================================
   Scenes: transparent sections that scrub the backdrop
   Height sets the scrub length; the pin holds the copy while frames advance.
   ============================================================ */
.scene {
  background: transparent;
  --col: min(304px, 28vw);          /* width of an edge column */
}
/* the widest heading on the page, so it gets the widest column */
.scene--close { --col: min(452px, 38vw); }
/* Fallback only. main.js measures each scene's block count and writes the real
   height, because the height IS the choreography: one block arrives over
   ARRIVE_PX of scroll, then GAP_PX passes before the next one starts. Keeping
   the number here as well would let the two drift apart. */
.scene { height: calc(100vh + 2600px); }
.scene--intro { height: calc(100vh + 3000px); }

.scene__pin {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}

/* One focus wash per scene, over the frames and under that scene's copy.

   It points the eye at the product: every frame is a flythrough of the built
   page, so the thing worth looking at is near the middle while the copy sits
   out in the gutters. The centre is fully transparent out to 42% so the product
   itself never picks up a wash, the side falls cover the columns the copy lands
   in, and the corners take the most.

   main.js writes the opacity on the same scroll choreography as the blocks, and
   times it to the settled stretch of the scene: the frames are left alone while
   you are still moving through them, then the edges fall away once everything
   is up and readable. The 0 here is the resting state. */
.scene__focus {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg,  rgba(5, 7, 15, .40) 0%, rgba(5, 7, 15, .11) 14%, rgba(5, 7, 15, 0) 30%),
    linear-gradient(270deg, rgba(5, 7, 15, .40) 0%, rgba(5, 7, 15, .11) 14%, rgba(5, 7, 15, 0) 30%),
    radial-gradient(115% 105% at 50% 47%,
      rgba(5, 7, 15, 0) 0%,
      rgba(5, 7, 15, 0) 42%,
      rgba(5, 7, 15, .34) 70%,
      rgba(5, 7, 15, .64) 100%);
}

/* One layer per scene. The script no longer fades the layer as a whole: it
   walks the blocks inside it and staggers each one, so a scene assembles and
   leaves a piece at a time.

   Every fade window still sits inside the pinned runway, so nothing is visible
   while the pin is sliding and no ground can cut across the frame. */
.scene__layer {
  position: absolute;
  inset: 0;
}
/* the script writes opacity and --slide on each of these */
.scene__copy,
.scene__head,
.scene__band > *,
.scene__side > * {
  opacity: 0;
  --slide: 26px;
  will-change: opacity, transform;
}

/* ---------- copy cards ----------
   Two variants. Both align their LEFT EDGE to the column, and both use the same
   26px horizontal padding, so edges and text line up down the whole scene. An
   earlier version pulled each card left by its own padding to put the text on
   the grid, which left the card edges stepped against the note cards beside
   them.

   Hierarchy comes from the lead card being physically larger and styled
   differently: a violet corner glow and a violet-to-lime spine on its left
   edge, against the flat neutral surface the supporting cards share. */
.scene__head,
.scene__band > div,
.scene__band > p,
.scene__side > div,
.scene__side > p {
  position: relative;
  overflow: hidden;
  --pad: 26px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: linear-gradient(158deg, rgba(13, 18, 36, .9), rgba(7, 10, 20, .88));
  backdrop-filter: blur(20px) saturate(135%);
  box-shadow: 0 26px 54px -32px rgba(3, 5, 12, .9);
}

/* --- plain: supporting copy, matching .note and .tech --- */
.scene__band > p,
.scene__side > p {
  padding: 18px var(--pad) 20px;
}
.scene__band > p::before,
.scene__side > p::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--pad);
  right: 34%;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(139, 123, 255, .6), rgba(198, 242, 78, .32) 62%, transparent);
}
.scene__band--top > p::before {
  left: 34%;
  right: var(--pad);
  background: linear-gradient(270deg,
    rgba(139, 123, 255, .6), rgba(198, 242, 78, .32) 62%, transparent);
}

/* --- lead: the section heading, and the block everything else answers to --- */
.scene__head,
.scene__band > div,
.scene__side > div {
  padding: 32px var(--pad) 36px;
  border-radius: 26px;
  border-color: rgba(139, 123, 255, .42);
  background:
    radial-gradient(130% 150% at 0% 0%,
      rgba(109, 92, 246, .44) 0%,
      rgba(109, 92, 246, .12) 44%,
      rgba(109, 92, 246, 0) 68%),
    linear-gradient(152deg, rgba(27, 23, 72, .95) 0%, rgba(11, 14, 32, .96) 100%);
  box-shadow:
    0 44px 96px -46px rgba(4, 6, 18, .98),
    inset 0 1px 0 rgba(255, 255, 255, .07);
}

/* the spine: what tells the lead card apart at a glance */
.scene__head::after,
.scene__band > div::after,
.scene__side > div::after {
  content: "";
  position: absolute;
  left: 0;
  top: 26px;
  bottom: 26px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--violet-2), var(--lime));
}
/* ---------- type ---------- */
.scene__title {
  font-size: clamp(42px, 6.4vw, 82px);
  font-weight: 800;
  letter-spacing: -.035em;
  text-shadow: 0 18px 60px rgba(5, 7, 15, .5);
}
.scene__title em {
  font-style: normal;
  background: linear-gradient(100deg, var(--violet-2) 10%, var(--lime) 95%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.scene__title--sm {
  font-size: clamp(32px, 4.2vw, 56px);
  font-weight: 800;
  letter-spacing: -.035em;
}
.scene__lede {
  max-width: 46ch;
  font-size: clamp(15px, 1.35vw, 17.5px);
  color: var(--ink-2);
}

/* ---------- note: the scene-level card, same language as .stat and .step ---------- */
.note,
.tech {
  position: relative;
  overflow: hidden;
  padding: 16px 18px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  /* The card is its own animated element, so nothing above it forms a backdrop
     root and the blur samples the canvas. The base stays dark enough to read
     if a browser drops the filter. */
  background: linear-gradient(158deg, rgba(13, 18, 36, .9), rgba(7, 10, 20, .87));
  backdrop-filter: blur(20px) saturate(135%);
  box-shadow: 0 26px 54px -30px rgba(3, 5, 12, .95);
}
/* the hairline that runs along the top of every card */
.note::before,
.tech::before {
  content: "";
  position: absolute;
  top: 0;
  left: 14px;
  right: 14px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(139, 123, 255, .85) 35%, rgba(198, 242, 78, .6) 75%, transparent);
}
.note__n {
  display: block;
  font: 800 11px/1 var(--display);
  letter-spacing: .12em;
  color: var(--violet-2);
  margin-bottom: 9px;
}
.note__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 6px;
  letter-spacing: -.01em;
}
.note__text,
.tech__text {
  font-size: 13.5px;
  line-height: 1.62;
  color: var(--ink-2);
}

/* ---------- tech: the note card carrying a stack bar ---------- */
.tech__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.tech__logo {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 8px;
  font: 700 10.5px/1 var(--display);
  color: var(--logo, var(--violet-2));
  background: color-mix(in srgb, var(--logo, #8b7bff) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--logo, #8b7bff) 42%, transparent);
}
.tech__name {
  font-family: var(--display);
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--ink);
}
.tech__pct {
  margin-left: auto;
  font-size: 12px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.tech__track {
  display: block;
  height: 5px;
  margin-bottom: 12px;
  border-radius: var(--r-pill);
  background: var(--line);
  overflow: hidden;
}
.tech__track i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--violet), var(--violet-2));
  transition: width 1s var(--ease);
}
/* script adds is-live once the scene is most of the way in */
.scene.is-live .tech__track i { width: var(--val); }
.tech__text code { font-size: .86em; }

/* ---------- scene 1: the pitch ---------- */
.scene__copy {
  position: absolute;
  left: var(--gutter);
  top: 50%;
  width: min(540px, calc(100% - 48px));
  transform: translateY(calc(-50% + var(--slide)));
}
.scene__copy .scene__lede { margin-top: 20px; }
.scene__actions {
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ---------- top and bottom bands ---------- */
.scene__band {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
}
.scene__band > *,
.scene__side > * { transform: translateY(var(--slide)); }
.scene__band--top {
  top: calc(var(--nav-h) + 18px);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
}
.scene__band--top .scene__lede { max-width: 32ch; text-align: right; }
.scene__band--bottom {
  bottom: 30px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  /* stretch, not end: cards in a band share a height so their tops line up */
  align-items: stretch;
}

/* ---------- edge columns ---------- */
.scene__side {
  position: absolute;
  top: calc(var(--nav-h) + 40px);
  bottom: 40px;
  width: var(--col);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
}
.scene__side--left  { left: var(--gutter); }
.scene__side--right { right: var(--gutter); }


/* ---------- a heading block pinned to the top-left corner ---------- */
.scene__head {
  position: absolute;
  left: var(--gutter);
  top: calc(var(--nav-h) + 22px);
  width: min(520px, 48vw);
  transform: translateY(var(--slide));
}
.scene__head .scene__lede { margin-top: 18px; max-width: 34ch; }
.scene__side .scene__lede { max-width: none; }

/* a stacking context per block, so its halo at z-index -1 paints behind the
   block's own text and nothing else */
.scene__copy,
.scene__band,
.scene__side,
.scene__head { z-index: 1; }

.scene__hint {
  position: absolute;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 10.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-3);
  z-index: 2;
}
.scene__hint svg { animation: bob 1.9s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(5px); opacity: .5; } }

/* ============================================================
   Section shell
   ============================================================ */
.section { position: relative; padding: 110px 0; }
.section + .section { border-top: 1px solid var(--line-soft); }
.about { background: var(--bg-alt); }
.work  { background: var(--bg-alt); }
.process { background: var(--bg); }
.contact { background: var(--bg-alt); }

/* the scene-level kicker; lives here rather than in the scene block so a
   rewrite of the scenes cannot take it with it */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--violet-2);
  margin-bottom: 18px;
}
.eyebrow__dot {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 0 4px rgba(198, 242, 78, .15);
}

.badge {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--violet-2);
  background: rgba(109, 92, 246, .13);
  border: 1px solid rgba(109, 92, 246, .3);
  padding: 5px 12px;
  border-radius: var(--r-pill);
  margin-bottom: 20px;
}
.badge--plain {
  background: none;
  border: none;
  padding: 0;
  color: var(--violet-2);
}

.h2 {
  font-size: clamp(28px, 3.4vw, 42px);
  font-weight: 700;
}
.lede {
  margin-top: 18px;
  max-width: 56ch;
  color: var(--ink-2);
  font-size: 16px;
}
.center { text-align: center; }
.center.lede, .h2.center { margin-inline: auto; }

.section__head { margin-bottom: 56px; text-align: center; }

/* ============================================================
   About
   ============================================================ */
/* the one opaque section inside the story, held to a single viewport */
.about {
  min-height: 100vh;
  display: grid;
  align-content: center;
  padding-block: calc(var(--nav-h) + 40px) 60px;
}
.about__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.about .btn { margin-top: 30px; }

.stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.stat {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: linear-gradient(160deg, var(--surface), rgba(12, 17, 32, .4));
  transition: border-color .25s, transform .25s var(--ease);
}
.stat:hover { border-color: rgba(109, 92, 246, .55); transform: translateY(-3px); }
.stat__icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: var(--r-sm);
  margin-bottom: 16px;
}
.stat__icon--violet { color: #cdc4ff; background: rgba(109, 92, 246, .2); border: 1px solid rgba(109, 92, 246, .35); }
.stat__icon--indigo { color: #b9c6ff; background: rgba(60, 80, 220, .18); border: 1px solid rgba(60, 80, 220, .35); }
.stat__num {
  font-family: var(--display);
  font-weight: 800;
  font-size: 30px;
  letter-spacing: -.03em;
}
.stat__label { font-size: 13.5px; color: var(--ink-3); margin-top: 2px; }

/* ============================================================
   Stack bars
   ============================================================ */
.bars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px 46px;
}

.bar {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  align-items: center;
  gap: 12px;
}
.bar__logo {
  grid-row: 1;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  font: 700 11px/1 var(--display);
  background: color-mix(in srgb, var(--logo) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--logo) 45%, transparent);
  color: var(--logo);
}
.bar__name { font-size: 14.5px; font-weight: 500; }
.bar__pct { font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.bar__track {
  grid-column: 1 / -1;
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--line);
  overflow: hidden;
}
.bar__track i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--violet), var(--violet-2));
  transition: width 1.1s var(--ease);
}
.bars.is-in .bar__track i { width: var(--val); }

/* ============================================================
   Component cards
   ============================================================ */
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
  transition: transform .3s var(--ease), border-color .3s, box-shadow .3s;
}
.card:hover {
  transform: translateY(-6px);
  border-color: rgba(109, 92, 246, .6);
  box-shadow: 0 26px 50px -30px rgba(109, 92, 246, .75);
}
.card__media {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}
.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s var(--ease);
}
.card:hover .card__media img { transform: scale(1.06); }
.card__num {
  position: absolute;
  top: 12px;
  left: 12px;
  font: 700 12px/1 var(--display);
  letter-spacing: .06em;
  padding: 6px 9px;
  border-radius: 7px;
  color: #fff;
  background: rgba(5, 7, 15, .68);
  backdrop-filter: blur(6px);
}
.card__body { padding: 22px; display: grid; gap: 12px; align-content: start; }
.card__title { font-size: 19px; font-weight: 700; }
.card__text { font-size: 14.5px; color: var(--ink-2); line-height: 1.68; }
.card__meta {
  margin-top: 2px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
  font-size: 12px;
  color: var(--ink-3);
  letter-spacing: .01em;
}

/* ============================================================
   Process
   ============================================================ */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.step {
  padding: 26px 22px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: linear-gradient(170deg, var(--surface), rgba(12, 17, 32, .3));
}
.step__n {
  display: block;
  font: 800 13px/1 var(--display);
  letter-spacing: .1em;
  color: var(--violet-2);
  margin-bottom: 16px;
}
.step__title { font-size: 17px; font-weight: 700; margin-bottom: 8px; }
.step__text { font-size: 14px; color: var(--ink-2); }

/* ============================================================
   Contact
   ============================================================ */
.contact__grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr .8fr;
  gap: 48px;
  align-items: start;
}
.contact .btn { margin-top: 26px; }

.quote {
  position: relative;
  margin: 0;
  padding: 30px 28px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(165deg, var(--surface-2), var(--surface));
}
.quote__mark {
  font: 800 54px/1 var(--display);
  color: var(--violet-2);
  display: block;
  height: 26px;
}
.quote blockquote {
  margin: 12px 0 22px;
  font-size: 16px;
  color: var(--ink);
  line-height: 1.7;
}
.quote figcaption { display: flex; align-items: center; gap: 12px; }
.quote__avatar {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font: 700 13px/1 var(--display);
  color: #fff;
  background: linear-gradient(140deg, var(--violet-2), var(--violet));
}
.quote__who { display: grid; }
.quote__who strong { font-size: 14.5px; }
.quote__who em { font-style: normal; font-size: 13px; color: var(--ink-3); }

.reach__head {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--violet-2);
  margin-bottom: 20px;
}
.reach__list { display: grid; gap: 12px; }
.reach__list a {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 14px;
  color: var(--ink-2);
  transition: color .2s;
}
.reach__list a:hover { color: var(--ink); }
.reach__ico {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--surface);
  font: 600 10.5px/1 var(--display);
  color: var(--violet-2);
}

/* ============================================================
   Footer
   ============================================================ */
.foot {
  border-top: 1px solid var(--line-soft);
  padding: 26px 0;
  background: var(--bg);
}
.foot__inner {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--ink-3);
}

/* ============================================================
   Reveal on scroll
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }
.cards .reveal:nth-child(3n+2) { transition-delay: .08s; }
.cards .reveal:nth-child(3n+3) { transition-delay: .16s; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1040px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
  .cards .reveal:nth-child(n) { transition-delay: 0s; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .bars { grid-template-columns: 1fr 1fr; }
  .contact__grid { grid-template-columns: 1fr 1fr; }
  .reach { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  .nav__links {
    position: fixed;
    inset: var(--nav-h) 0 auto;
    flex-direction: column;
    gap: 2px;
    padding: 14px 20px 22px;
    background: rgba(5, 7, 15, .96);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
  }
  .nav__links.is-open { opacity: 1; visibility: visible; transform: none; }
  .nav__links a { padding: 12px 6px; font-size: 16px; }
  .nav__links a.is-active::after { display: none; }
  .nav__cta { display: none; }
  .nav__burger { display: block; margin-left: auto; }

  .about__grid { grid-template-columns: 1fr; gap: 44px; }
  .section { padding: 82px 0; }

  /* no room for edge columns on a phone: every scene stacks its copy against
     the bottom and leave the render the top of the frame */

  .scene__layer { --slide: 18px; }
  .scene__copy { top: auto; bottom: 14vh; transform: translateY(var(--slide)); }

  .scene:not(.scene--intro) .scene__layer {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 12px;
    padding: calc(var(--nav-h) + 16px) 20px 24px;
  }
  .scene__band,
  .scene__side,
  .scene__head {
    position: static;
    inset: auto;
    width: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  /* every card runs the full width of the stack */
  .scene__head,
  .scene__band > div,
  .scene__band > p,
  .scene__side > div,
  .scene__side > p { --pad: 18px; }
  .scene__band > p,
  .scene__side > p { padding: 14px var(--pad) 16px; }
  .scene__head,
  .scene__band > div,
  .scene__side > div {
    padding: 20px var(--pad) 22px;
    border-radius: 20px;
  }
  .scene__head::after,
  .scene__band > div::after,
  .scene__side > div::after { top: 18px; bottom: 18px; }
  .scene__band--top > p { text-align: left; }
  .scene__band--top > p::before { left: var(--pad); right: 34%; }
  .scene__head .scene__lede { margin-top: 12px; }

  /* scene heights are written by script; the mobile fallback matches */
  .scene { height: calc(100vh + 2200px); }
  .scene--intro { height: calc(100vh + 2400px); }

  /* the desktop top band aligns its two cards to the bottom of a row; stacked,
     that same align-items would shrink-wrap them against the right edge */
  .scene__band--top {
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    gap: 12px;
  }
  .scene__band--top .scene__lede { max-width: none; text-align: left; }
  .scene__head .scene__lede,
  

  /* the stacked blocks sit close together, so their halos overlap into one
     continuous column: pull the insets in so it does not spill past the edges */
  .scene__head::before,
  .scene__band > div::before,
  .scene__band > p::before,
  .scene__side > div::before,
  .scene__side > p::before {

}

@media (max-width: 640px) {
  .cards, .steps, .bars, .stats, .contact__grid { grid-template-columns: 1fr; }
  .bars { gap: 26px; }
  .scene__actions .btn { width: 100%; justify-content: center; }
  .scene__hint { display: none; }
  .section__head { margin-bottom: 40px; }

  /* a heading plus three cards has to clear 812px, so the scene type steps down */
  .scene__title--sm { font-size: 30px; }
  .scene:not(.scene--intro) .scene__lede { font-size: 14px; }
  .eyebrow { margin-bottom: 12px; }
  .note,
  .tech { padding: 12px 14px; }
  .note__n { margin-bottom: 7px; }
  .note__title { font-size: 14px; margin-bottom: 5px; }
  .note__text,
  .tech__text { font-size: 12.5px; line-height: 1.55; }
  .tech__head { margin-bottom: 8px; }
  .tech__track { margin-bottom: 10px; }
}

/* ============================================================
   Short phones — a heading, a lede and three cards will not fit in 667px, and
   the pin clips rather than scrolls, so the supporting line steps out.
   ============================================================ */
@media (max-width: 900px) and (max-height: 780px) {
  .scene:not(.scene--intro) .scene__lede { display: none; }
  .scene:not(.scene--intro) .scene__layer {
    gap: 10px;
    padding-bottom: 18px;
  }
  .scene__title--sm { font-size: 26px; }
  .eyebrow { margin-bottom: 9px; }
  .note,
  .tech { padding: 11px 13px; }
  .note__n { margin-bottom: 6px; }
  .note__title { margin-bottom: 4px; }
  .note__text,
  .tech__text { line-height: 1.48; }
  .tech__head { margin-bottom: 7px; }
  .tech__track { height: 4px; margin-bottom: 8px; }
  .tech__name { font-size: 13.5px; }
  .tech__logo { width: 24px; height: 24px; font-size: 9.5px; }
  .tech__text { font-size: 12px; }
}
/* ============================================================
   Reduced motion — hold the last frame, drop the transitions
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
  /* the scrub itself stays: it is direct manipulation, not autoplay. The blur
     and the bobbing arrow are what get dropped. */
  .scene__hint { display: none; }
}