/* ============================================================
   BOHR SOLUTIONS — Interlocking Diagonal Spine
   Design system
   - Display:  Space Grotesk (engineered grotesque)
   - Technical: JetBrains Mono (labels, nav, metrics, annotations)
   - Palette:  carbon backgrounds + razor-thin blue (#4da6ff) seams
   ============================================================ */

:root{
  /* --- tweakable (driven by Tweaks panel) --- */
  --bg-shade: 0;            /* 0 = spec dark, +/- shifts background lightness */
  --glow: 1;               /* glow strength multiplier */
  --seam: 1.4;             /* seam angle / diagonal sharpness multiplier */
  --intensity: 1;          /* animation travel multiplier */

  /* --- palette --- */
  --bg-0: hsl(240 14% calc(3.5% + var(--bg-shade) * 1%));
  --bg-1: hsl(240 13% calc(5.5% + var(--bg-shade) * 1%));
  --bg-2: hsl(240 13% calc(8%  + var(--bg-shade) * 1%));
  --plate: hsl(240 13% calc(9% + var(--bg-shade) * 1%));

  --accent: #4da6ff;
  --accent-2: #8fc7ff;
  --accent-deep: #1f5fb0;

  --text: #eaecf4;
  --text-dim: #9aa1b4;
  --text-mute: #5b6177;
  --line: rgba(255,255,255,.072);
  --line-2: rgba(255,255,255,.12);

  --glow-soft: calc(14px * var(--glow));
  --glow-hard: calc(5px * var(--glow));

  /* base diagonal travel + reveal duration (scale together with intensity) */
  --ax: calc(52px * var(--intensity));
  --ay: calc(52px * var(--intensity));
  --rev-dur: calc(1.5s * (0.6 + var(--intensity) * 0.6));

  --bevel: calc(46px * var(--seam));     /* small corner cut (chips/buttons reuse) */
  --chev: calc(54px * var(--seam));      /* chevron seam dip depth = plate diagonal */

  /* blueprint grid (mirrors the BGPattern variants) */
  --grid-size: 46px;
  --grid-line: rgba(140,170,210,.06);
  --grid-dot:  rgba(140,170,210,.12);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --maxw: 1320px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth;
  /* hide the scrollbar (scrolling itself still works) */
  scrollbar-width:none;            /* Firefox */
  -ms-overflow-style:none; }       /* legacy Edge/IE */
html::-webkit-scrollbar{ width:0; height:0; display:none; }  /* Chrome/Safari */
body{
  margin:0;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(77,166,255,.10), transparent 60%),
    radial-gradient(100% 60% at 50% 110%, rgba(77,166,255,.06), transparent 60%),
    var(--bg-0);
  color:var(--text);
  font-family:"Space Grotesk", system-ui, sans-serif;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* engineered blueprint grid behind everything — the coordinate plane the
   spine + chevron seams snap to. Variant swappable via [data-bg]. */
body::before{
  content:"";
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size:var(--grid-size) var(--grid-size);
  -webkit-mask-image:radial-gradient(125% 100% at 50% 26%, #000 30%, transparent 82%);
          mask-image:radial-gradient(125% 100% at 50% 26%, #000 30%, transparent 82%);
  opacity:.6;
}
body[data-bg="dots"]::before{
  background-image:radial-gradient(var(--grid-dot) 1.3px, transparent 1.6px);
}
body[data-bg="diagonal"]::before{
  background-image:repeating-linear-gradient(45deg, var(--grid-line) 0 1px, transparent 1px var(--grid-size));
  background-size:auto;
}
body[data-bg="off"]::before{ display:none; }
/* central column glow — anchors the spine to the grid */
body::after{
  content:""; position:fixed; top:0; bottom:0; left:50%; width:min(46vw,560px);
  transform:translateX(-50%); z-index:0; pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(77,166,255,.05) 35%, rgba(77,166,255,.07) 50%, rgba(77,166,255,.05) 65%, transparent);
  -webkit-mask-image:linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
          mask-image:linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
}

.mono{ font-family:"JetBrains Mono", ui-monospace, monospace; }

/* ---------- continuous central spine ---------- */
.spine{
  position:absolute; top:0; bottom:0; left:50%; width:2px;
  transform:translateX(-50%);
  background:linear-gradient(to bottom,
     transparent 0, rgba(77,166,255,.0) 2%,
     rgba(77,166,255,.55) 8%, rgba(77,166,255,.28) 50%,
     rgba(77,166,255,.55) 92%, transparent 100%);
  box-shadow:0 0 var(--glow-soft) rgba(77,166,255,.45);
  z-index:1; pointer-events:none;
}
.spine::before,.spine::after{ content:""; position:absolute; left:50%; width:1px; top:0; bottom:0;
  transform:translateX(-50%); }

/* ---------- layout shell ---------- */
.wrap{ position:relative; z-index:2; max-width:var(--maxw); margin:0 auto; padding:0 28px; }
.eyebrow{
  font-family:"JetBrains Mono", monospace; font-size:12px; letter-spacing:.34em;
  text-transform:uppercase; color:var(--accent); display:inline-flex; gap:10px; align-items:center;
}
.eyebrow::before{ content:""; width:26px; height:1px; background:var(--accent); box-shadow:0 0 var(--glow-hard) var(--accent); }

h1,h2,h3{ font-weight:600; letter-spacing:-.01em; line-height:1.1; margin:0; padding-bottom:.04em; }
h1{ font-size:clamp(38px, 6.4vw, 86px); letter-spacing:-.02em; }
h2{ font-size:clamp(30px, 4vw, 52px); }
.lede{ color:var(--text-dim); font-size:clamp(16px,1.4vw,20px); max-width:54ch; }

/* ---------- buttons ---------- */
.btn{
  font-family:"JetBrains Mono", monospace; font-size:13px; letter-spacing:.12em; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:12px; padding:15px 26px; cursor:pointer;
  text-decoration:none; color:var(--text); border:1px solid var(--line-2); background:rgba(255,255,255,.02);
  clip-path:polygon(0 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%);
  transition:.4s var(--ease);
}
.btn .ar{ transition:.4s var(--ease); }
.btn:hover{ border-color:var(--accent); color:#fff; background:rgba(77,166,255,.08); }
.btn:hover .ar{ transform:translate(3px,0); }
.btn--primary{
  background:linear-gradient(180deg, rgba(77,166,255,.22), rgba(77,166,255,.08));
  border-color:rgba(77,166,255,.55); color:#fff;
  box-shadow:0 0 var(--glow-soft) rgba(77,166,255,.25), inset 0 0 24px rgba(77,166,255,.10);
}
.btn--primary:hover{ box-shadow:0 0 calc(var(--glow-soft) * 1.6) rgba(77,166,255,.45); border-color:var(--accent); }

/* hero CTA — "colorful" glow button in the site's blue palette */
.btn--hero{
  position:relative; overflow:hidden;
  font-size:14px; letter-spacing:.2em; padding:18px 42px; gap:11px; justify-content:center;
  color:#fff; border:1px solid rgba(77,166,255,.32);
  background:linear-gradient(180deg, hsl(240 14% 8%), hsl(240 14% 5%));
  clip-path:none; border-radius:11px;
  box-shadow:0 0 var(--glow-soft) rgba(77,166,255,.16);
}
/* blurred gradient wash behind the label — real element, clipped to the radius */
.btn--hero .btn-glow{
  position:absolute; inset:-5px; z-index:0;
  background:linear-gradient(100deg, #0e2747, #1c4d86 42%, #245f9f 68%, #3a7fc0);
  opacity:.5; filter:blur(8px);
  transition:opacity .5s var(--ease);
}
.btn--hero:hover{ transform:translateY(-2px); border-color:rgba(77,166,255,.55); }
.btn--hero:hover .btn-glow{ opacity:.9; }
.btn--hero .btn-label, .btn--hero .btn-ico{ position:relative; z-index:1; }
.btn--hero .btn-label{ text-shadow:0 1px 7px rgba(8,12,22,.6); }
.btn--hero .btn-ico{ width:15px; height:15px; stroke:#fff; stroke-width:2.2;
  fill:none; stroke-linecap:round; stroke-linejoin:round; transition:transform .4s var(--ease);
  filter:drop-shadow(0 1px 5px rgba(8,12,22,.6)); }
.btn--hero:hover .btn-ico{ transform:translate(2px,-2px); }

/* magnetic CTA wrapper — spring-pulled toward the cursor (JS-driven) */
.magnetic{ display:inline-block; will-change:transform; }
.magnetic .btn--hero{ transition:background .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease); }
.magnetic .btn-label{ display:inline-block; will-change:transform; }

/* ---------- sticky top bar ---------- */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:40;
  display:flex; align-items:center; justify-content:center;
  padding:14px clamp(20px,4vw,46px);
  background:transparent;   /* completely transparent header bar */
  transition:.5s var(--ease);
  transform:translateY(-110%);
}
.topbar.show{ transform:translateY(0); }
.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--text); }
.brand img{ height:30px; width:auto; display:block; filter:drop-shadow(0 0 10px rgba(77,166,255,.5)); }
.brand .bw{ font-family:"JetBrains Mono", monospace; font-weight:700; letter-spacing:.22em; font-size:15px; }
.brand .bw small{ display:block; font-size:9px; letter-spacing:.4em; color:var(--text-mute); font-weight:500; }
/* ---------- glow menu (flip-up + radial glow) ---------- */
.nav{ position:relative; display:flex; align-items:center; gap:4px; padding:6px;
  border-radius:16px; isolation:isolate;
  background:linear-gradient(180deg, rgba(22,25,34,.72), rgba(13,14,19,.42));
  border:1px solid rgba(120,150,210,.16);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  box-shadow:0 10px 34px -16px rgba(0,0,0,.7); overflow:visible; }
/* nav-wide radial glow on hover */
.nav-glow{ position:absolute; inset:-10px; z-index:0; pointer-events:none; opacity:0;
  border-radius:26px; transition:opacity .5s cubic-bezier(.4,0,.2,1);
  background:radial-gradient(60% 140% at 50% 50%, transparent 18%, rgba(77,140,255,.20) 55%, transparent 82%); }
.nav:hover .nav-glow{ opacity:1; }

.nav-item{ position:relative; z-index:1; display:block; border-radius:12px;
  perspective:600px; text-decoration:none; -webkit-tap-highlight-color:transparent; }
/* per-item radial glow that blooms outward on hover/active */
.ni-glow{ position:absolute; inset:0; z-index:-1; border-radius:14px; opacity:0; transform:scale(.8);
  pointer-events:none; transition:opacity .5s cubic-bezier(.4,0,.2,1), transform .5s cubic-bezier(.4,0,.2,1);
  background:radial-gradient(circle, rgba(77,140,255,.26) 0%, rgba(37,99,235,.08) 48%, transparent 78%); }
.nav-item:hover .ni-glow{ opacity:1; transform:scale(1.7); }

/* the two flip faces share the same content; on hover the front rotates away
   (origin bottom) while the back rotates up into place (origin top). */
.ni-face{ display:flex; align-items:center; gap:8px; padding:9px 15px; border-radius:12px;
  font-family:"JetBrains Mono", monospace; font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--text-dim); white-space:nowrap; transform-style:preserve-3d; backface-visibility:hidden;
  transition:transform .5s cubic-bezier(.34,1.4,.5,1), opacity .42s cubic-bezier(.4,0,.2,1), color .3s; }
.ni-face svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round; flex:none; }
.ni-front{ transform:rotateX(0deg); transform-origin:center bottom; }
.ni-back{ position:absolute; inset:0; transform:rotateX(90deg); transform-origin:center top; opacity:0; }
.nav-item:hover .ni-front{ transform:rotateX(-90deg); opacity:0; }
.nav-item:hover .ni-back{ transform:rotateX(0deg); opacity:1; color:var(--accent); }
.nav-item:hover .ni-back svg{ filter:drop-shadow(0 0 6px rgba(77,166,255,.6)); }

/* scroll-spy active state — colour + soft persistent glow on the front face */
.nav-item.active .ni-front{ color:#cfe6ff; }
.nav-item.active .ni-front svg{ filter:drop-shadow(0 0 6px rgba(77,166,255,.55)); }
.nav-item.active .ni-glow{ opacity:.85; transform:scale(1.35); }

@media (prefers-reduced-motion:reduce){
  .ni-face{ transition:color .3s, opacity .3s; }
  .ni-front{ transform:none; }
  .nav-item:hover .ni-front{ transform:none; opacity:1; color:var(--accent); }
  .ni-back{ display:none; }
}
@media (max-width:860px){ .nav{ display:none; } }

/* ============================================================
   HERO — chevron "home base"
   ============================================================ */
.hero{ position:relative; padding:148px 0 70px; text-align:center; z-index:2; }
.homebase{
  position:relative; max-width:1080px; margin:0 auto; padding:64px clamp(26px,6vw,90px) 64px;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(77,166,255,.10), transparent 62%),
    linear-gradient(180deg, hsl(240 13% calc(9.5% + var(--bg-shade) * 1%)), hsl(240 13% calc(6% + var(--bg-shade) * 1%)));
  border:1px solid rgba(77,166,255,.22);
}
/* dotted texture filling the frame (matches the bordered-quote template) */
.hb-dots{ position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:radial-gradient(var(--grid-dot) .6px, transparent .7px);
  background-size:5px 5px; }
/* small square markers straddling each corner of the frame */
.hb-corner{ position:absolute; width:11px; height:11px; background:var(--accent); z-index:4;
  box-shadow:0 0 var(--glow-soft) rgba(77,166,255,.7); pointer-events:none; }
.hb-corner.tl{ top:-6px; left:-6px; }
.hb-corner.tr{ top:-6px; right:-6px; }
.hb-corner.bl{ bottom:-6px; left:-6px; }
.hb-corner.br{ bottom:-6px; right:-6px; }
/* spine threaded through the hero: glowing line down the center, behind content */
.hb-spine{
  position:absolute; left:50%; top:0; bottom:0; width:2px; transform:translateX(-50%);
  background:linear-gradient(to bottom,
    rgba(77,166,255,0) 0,
    rgba(77,166,255,.7) 6%,
    rgba(77,166,255,.4) 15%,
    rgba(77,166,255,0) 24%,
    rgba(77,166,255,0) 88%,
    rgba(77,166,255,.55) 95%,
    rgba(77,166,255,.95) 99%);
  box-shadow:0 0 var(--glow-soft) rgba(77,166,255,.5);
  z-index:0; pointer-events:none;
}
.homebase :where(.mlogo,.eyebrow,h1,.lede,.hero-cta,.scrollcue){ position:relative; z-index:1; }
/* glowing chevron seam tracing the home-base bottom — ties it into the seam system */
.hb-seam{ position:absolute; left:0; right:0; bottom:0; width:100%; height:92px; z-index:2;
  pointer-events:none; overflow:visible; }
.hb-seam path{ fill:none; stroke:var(--accent); stroke-width:1.4; vector-effect:non-scaling-stroke;
  filter:drop-shadow(0 0 var(--glow-hard) rgba(77,166,255,.9)); }
/* entry node where the page spine meets the top of the home base */
.hb-node{ position:absolute; left:50%; width:12px; height:12px; transform:translate(-50%,-50%) rotate(45deg);
  background:var(--bg-0); border:1px solid var(--accent); box-shadow:0 0 var(--glow-soft) rgba(77,166,255,.75);
  z-index:3; pointer-events:none; }
.hb-node.top{ top:0; }
html.js .homebase{ transform:translateY(-46px); opacity:0; }
html.js .homebase.in{ animation:dropIn var(--rev-dur) var(--ease) both; }
@keyframes dropIn{ from{ opacity:0; transform:translateY(-46px); } to{ opacity:1; transform:translateY(0); } }
.homebase::after{ /* (legacy chevron glow removed — frame is now a rectangle) */
  content:none;
}
/* ---------- static framed glow ----------
   (the cursor-tracking border spotlight + interior glow were removed — they
   repainted the full frame on every pointer move and cost too much) */
.homebase, .cbase{
  border-color:rgba(96,170,255,.5);
  box-shadow:0 0 0 1px rgba(77,140,255,.25), 0 0 22px -2px rgba(77,140,255,.35), inset 0 0 24px -8px rgba(96,170,255,.35);
}
.hero .mlogo{ height:148px; width:auto; margin-bottom:30px; transform:translateX(6px);
  filter:drop-shadow(0 6px 26px rgba(77,166,255,.5)); }
.hero h1{ margin:18px auto 0; max-width:22ch; line-height:1.06; }
.hero h1 .hl-part{ display:block; }
.hero h1 .gooey{ display:block; margin:.04em auto; }
.hero h1 .accent{ color:var(--accent); }
/* gooey morphing accent word — two stacked words blur-dissolve into each
   other; a hidden sizer reserves the widest word's box so the surrounding
   headline never reflows as words swap. (No SVG threshold filter: url()
   filters force per-frame CPU re-rasterization and tanked scroll perf.) */
.gooey{ position:relative; display:inline-block; vertical-align:baseline; color:var(--accent); }
.gooey-size{ visibility:hidden; }
.gooey-t{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  white-space:nowrap; will-change:filter, opacity; }
/* clean resting state: only the second span shows one word (no overlap) until
   and unless the morph loop is running. */
.gooey .gt1{ opacity:0; }
.gooey .gt2{ opacity:1; }
.gooey-defs{ position:absolute; width:0; height:0; }
.hero .lede{ margin:24px auto 0; text-align:center; }
.hero-cta{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-top:38px; }
.scrollcue{ margin-top:54px; display:inline-flex; flex-direction:column; align-items:center; gap:8px;
  font-family:"JetBrains Mono", monospace; font-size:10px; letter-spacing:.4em; color:var(--text-mute); }
.scrollcue .dn{ width:1px; height:34px; background:linear-gradient(var(--accent), transparent);
  animation:cue 2.2s var(--ease) infinite; }
@keyframes cue{ 0%{ transform:scaleY(0); transform-origin:top; opacity:0; } 40%{ opacity:1; }
  100%{ transform:scaleY(1); transform-origin:top; opacity:0; } }

/* node where spine meets a seam */
.node{ position:absolute; left:50%; top:0; width:11px; height:11px; transform:translate(-50%,-50%) rotate(45deg);
  background:var(--bg-0); border:1px solid var(--accent); box-shadow:0 0 var(--glow-soft) rgba(77,166,255,.7);
  z-index:6; }

/* ============================================================
   FEATURE BLOCK — interlocking diagonal quadrants
   ============================================================ */
.block{ position:relative; padding:64px 0 26px; z-index:2; }
.seamrow{ position:relative; }
/* glowing chevron seam spanning the block top */
.chevseam{ position:absolute; left:0; right:0; top:0; height:var(--chev); width:100%; z-index:5; pointer-events:none; overflow:visible; }
.chevseam path{ fill:none; stroke:var(--accent); stroke-width:1.4; vector-effect:non-scaling-stroke;
  filter:drop-shadow(0 0 var(--glow-hard) rgba(77,166,255,.9)); }
/* draw the chevron outward from its centre vertex as the section scrolls in
   (and retract when scrolling back up) — each half grows toward a top corner. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .chevseam .chev-half{
      stroke-dasharray:1;
      animation:chevDraw auto linear both;
      animation-timeline:view();
      animation-range:entry 10% cover 50%;
    }
  }
}
@keyframes chevDraw{ from{ stroke-dashoffset:1; } to{ stroke-dashoffset:0; } }

.quad{
  display:grid; grid-template-columns:1fr 1fr; gap:0;
  position:relative; align-items:stretch;
}
.plate{
  position:relative; min-height:340px; padding:calc(58px + var(--chev)) clamp(26px,3.4vw,52px) 52px;
  background:
    radial-gradient(140% 70% at 50% 0%, rgba(77,166,255,.07), transparent 55%),
    linear-gradient(180deg, hsl(240 13% calc(11% + var(--bg-shade) * 1%)), var(--bg-1));
  border:1px solid var(--line);
}
/* full-diagonal top edge — the plate edge IS the glowing seam line */
.plate.left{ border-right:none;
  clip-path:polygon(0 0, 100% var(--chev), 100% 100%, 0 100%); }
.plate.right{ border-left:none;
  clip-path:polygon(0 var(--chev), 100% 0, 100% 100%, 0 100%); }
/* inner edge glow toward spine */
.plate.left::after{ content:""; position:absolute; top:0; right:0; bottom:0; width:1px;
  background:linear-gradient(transparent, rgba(77,166,255,.35), transparent); }
.plate.right::after{ content:""; position:absolute; top:0; left:0; bottom:0; width:1px;
  background:linear-gradient(transparent, rgba(77,166,255,.35), transparent); }

.block.alt .plate{ background:linear-gradient(180deg, var(--bg-1), var(--bg-0)); }
/* grid texture inside each plate — clipped on the diagonal by the seam */
.plate::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size:var(--grid-size) var(--grid-size);
  -webkit-mask-image:linear-gradient(to bottom, #000 0, transparent 78%);
          mask-image:linear-gradient(to bottom, #000 0, transparent 78%);
  opacity:.8;
}
.plate > *{ position:relative; z-index:1; }

/* ---- content bits inside plates ---- */
.kicker{ font-family:"JetBrains Mono", monospace; font-size:13px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--text-mute); display:flex; align-items:center; gap:12px; margin-bottom:20px; }
.kicker b{ color:var(--accent); font-weight:600; }
.ptitle{ font-size:clamp(26px,2.6vw,40px); margin:0 0 14px; }
.pdesc{ color:var(--text-dim); max-width:46ch; }

.chips{ display:flex; flex-wrap:wrap; gap:9px; margin-top:26px; }
.chip{ font-family:"JetBrains Mono", monospace; font-size:11px; letter-spacing:.08em; color:var(--text-dim);
  padding:7px 13px; border:1px solid var(--line-2); background:rgba(255,255,255,.02);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%); }

.metrics{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; margin-top:30px;
  background:var(--line); border:1px solid var(--line); }
.metric{ background:var(--bg-1); padding:20px 18px; }
.metric .v{ font-family:"JetBrains Mono", monospace; font-size:clamp(24px,2.4vw,32px); font-weight:700; color:#fff;
  line-height:1.12; }
.metric .v.ph{ color:var(--text-mute); font-weight:500; font-size:18px; }
.metric .k{ font-family:"JetBrains Mono", monospace; font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--text-mute); margin-top:9px; }

/* greyboxed device / asset placeholder */
.shot{ position:relative; width:100%; min-height:300px; height:100%;
  border:1px solid var(--line-2);
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.025) 0 11px, transparent 11px 22px),
    linear-gradient(180deg, var(--bg-2), var(--bg-0));
  display:flex; align-items:center; justify-content:center; }
.shot .lab{ font-family:"JetBrains Mono", monospace; font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--text-mute); border:1px dashed var(--line-2); padding:9px 16px; }
.shot.device{ padding:30px; }
.phone{ width:220px; max-width:62%; aspect-ratio:9/19; border:1px solid var(--line-2); border-radius:26px;
  background:linear-gradient(180deg, var(--bg-1), var(--bg-2)); position:relative;
  box-shadow:0 30px 80px rgba(0,0,0,.5), 0 0 var(--glow-soft) rgba(77,166,255,.12);
  display:flex; align-items:center; justify-content:center; overflow:hidden; }
.phone::before{ content:""; position:absolute; top:11px; left:50%; transform:translateX(-50%);
  width:54px; height:5px; border-radius:3px; background:var(--line-2); }
.phone .lab{ background:rgba(0,0,0,.2); }

/* real product screenshots — swipeable carousel inside a shot plate */
.shot.has-img{ padding:22px; flex-direction:column; gap:14px; }
.carousel{ position:relative; touch-action:pan-y; outline:none; }
.car-viewport{ width:100%; overflow:hidden; cursor:grab; }
.car-viewport:active{ cursor:grabbing; }
.car-track{ display:flex; transition:transform .45s cubic-bezier(.22,.61,.36,1); }
.car-track.dragging{ transition:none; }
.car-slide{ flex:0 0 100%; min-width:100%; margin:0; }
.car-slide img{ width:100%; height:auto; display:block; border:1px solid var(--line-2);
  box-shadow:0 30px 80px rgba(0,0,0,.5), 0 0 var(--glow-soft) rgba(77,166,255,.12);
  -webkit-user-drag:none; user-select:none; }
.car-cap{ font-family:"JetBrains Mono", monospace; font-size:10px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--text-mute); margin-top:12px; }
.car-btn{ position:absolute; top:50%; transform:translateY(-50%); width:38px; height:38px;
  display:flex; align-items:center; justify-content:center; padding:0 0 4px;
  background:rgba(5,8,14,.72); border:1px solid var(--line-2); color:var(--text-dim);
  font-size:22px; line-height:1; cursor:pointer; z-index:2;
  transition:color .2s, border-color .2s; }
.car-btn:hover{ color:var(--accent); border-color:var(--accent); }
.car-prev{ left:10px; } .car-next{ right:10px; }
.car-dots{ display:flex; gap:9px; justify-content:center; }
.car-dot{ width:8px; height:8px; padding:0; border:1px solid var(--line-2); background:transparent;
  cursor:pointer; transition:background .2s, border-color .2s; }
.car-dot.active{ background:var(--accent); border-color:var(--accent); }

.section-head{ text-align:center; max-width:760px; margin:0 auto 18px; }
.section-head .lede{ margin:18px auto 0; }

/* services grid */
.cards{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:46px; }
.card{ position:relative; padding:34px 30px 30px; background:linear-gradient(180deg,var(--plate),var(--bg-1));
  border:1px solid var(--line); overflow:hidden;
  clip-path:polygon(0 0,100% 0,100% 100%, 16px 100%, 0 calc(100% - 16px));
  transition:.5s var(--ease); }
.card:hover{ border-color:rgba(77,166,255,.4); transform:translateY(-4px);
  box-shadow:0 18px 50px rgba(0,0,0,.4), 0 0 var(--glow-soft) rgba(77,166,255,.16); }
.card .no{ font-family:"JetBrains Mono", monospace; font-size:12px; letter-spacing:.2em; color:var(--accent); }
.card h3{ font-size:23px; margin:16px 0 10px; }
.card p{ color:var(--text-dim); font-size:15px; margin:0; }
.card .gl{ position:absolute; right:-30px; top:-30px; width:120px; height:120px; border-radius:50%;
  background:radial-gradient(circle, rgba(77,166,255,.18), transparent 70%); opacity:0; transition:.5s; }
.card:hover .gl{ opacity:1; }

/* process — roadmap timeline */
.roadmap{ margin-top:50px; padding:46px clamp(22px,3vw,46px) 40px;
  border:1px solid var(--line); position:relative; overflow:hidden;
  background:linear-gradient(180deg, var(--plate), var(--bg-1));
  clip-path:polygon(0 0,100% 0,100% 100%, 18px 100%, 0 calc(100% - 18px)); }
.roadmap::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size:var(--grid-size) var(--grid-size);
  -webkit-mask-image:linear-gradient(to bottom, #000, transparent 80%);
          mask-image:linear-gradient(to bottom, #000, transparent 80%); opacity:.7; }
.timeline{ position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:18px; z-index:1; }
/* the connecting line, behind the dots, aligned to dot centers */
.tl-line{ position:absolute; left:8%; right:8%; top:8px; height:1px;
  background:linear-gradient(90deg, rgba(77,166,255,.1), rgba(77,166,255,.55) 12%, rgba(77,166,255,.55) 88%, rgba(77,166,255,.1));
  box-shadow:0 0 var(--glow-hard) rgba(77,166,255,.4); }
.tl-item{ position:relative; padding-top:34px; text-align:center; }
.tl-dot{ position:absolute; left:50%; top:0; transform:translateX(-50%);
  width:17px; height:17px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--bg-2); border:1px solid var(--line-2); transition:transform .35s var(--ease), box-shadow .35s var(--ease); }
.tl-dot i{ width:6px; height:6px; border-radius:50%; background:var(--text-mute); transition:.35s var(--ease); }
.tl-dot.done{ background:radial-gradient(circle at 50% 35%, #8fc7ff, var(--accent) 70%); border-color:var(--accent);
  box-shadow:0 0 var(--glow-soft) rgba(77,166,255,.6); }
.tl-dot.done i{ background:var(--bg-0); }
.tl-item:hover .tl-dot{ transform:translateX(-50%) scale(1.22); box-shadow:0 0 calc(var(--glow-soft) * 1.4) rgba(77,166,255,.7); }
.tl-badge{ display:inline-block; font-family:"JetBrains Mono", monospace; font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; padding:4px 11px; margin-bottom:12px; color:var(--text-dim);
  border:1px solid var(--line-2);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%); }
.tl-badge.solid{ background:rgba(77,166,255,.16); border-color:rgba(77,166,255,.5); color:#cfe6ff; }
.tl-item h4{ font-size:20px; font-weight:600; margin:0 0 8px; }
.tl-item p{ color:var(--text-dim); font-size:14px; margin:0; max-width:24ch; margin-inline:auto; }

/* closing CTA — upward chevron base mirror */
.closing{ position:relative; text-align:center; margin-top:30px; padding:96px 0 70px; z-index:2; }
.cbase{ position:relative; max-width:1000px; margin:0 auto; padding:64px clamp(26px,6vw,80px) 64px;
  background:radial-gradient(120% 120% at 50% 100%, rgba(77,166,255,.12), transparent 62%),
            linear-gradient(180deg, var(--bg-1), var(--plate));
  border:1px solid rgba(77,166,255,.22); }
.cbase > :where(.eyebrow,h2,.lede,.hero-cta){ position:relative; z-index:1; }
.closing h2{ max-width:18ch; margin:0 auto; }
.closing .lede{ margin:22px auto 34px; text-align:center; }

/* footer */
.foot{ position:relative; z-index:2; border-top:1px solid var(--line); margin-top:20px;
  padding:34px 0 50px; }
.foot .wrap{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.foot .mono{ font-size:11px; letter-spacing:.16em; color:var(--text-mute); text-transform:uppercase; }
.foot a{ color:var(--text-dim); text-decoration:none; }
.foot a:hover{ color:var(--accent); }
.foot-links{ display:inline-flex; align-items:center; gap:22px; }

/* ---------- reveal animation ---------- */
/* will-change only while waiting to animate — drop it once revealed so we don't
   keep a live compositor layer on every element forever (that itself janks). */
.reveal:not(.in){ will-change:transform,opacity; }
html.js .reveal{ opacity:0; }
html.js .reveal.from-l.in{ animation:slideL var(--rev-dur) var(--ease) both; }   /* slides down-left  */
html.js .reveal.from-r.in{ animation:slideR var(--rev-dur) var(--ease) both; }   /* slides down-right */
html.js .reveal.from-d.in{ animation:slideD var(--rev-dur) var(--ease) both; }
@keyframes slideL{ from{ opacity:0; transform:translate(var(--ax), calc(-1 * var(--ay))); } to{ opacity:1; transform:translate(0,0); } }
@keyframes slideR{ from{ opacity:0; transform:translate(calc(-1 * var(--ax)), calc(-1 * var(--ay))); } to{ opacity:1; transform:translate(0,0); } }
@keyframes slideD{ from{ opacity:0; transform:translateY(calc(-1 * var(--ay))); } to{ opacity:1; transform:translateY(0); } }

/* ---------- scroll-scrubbed reveals ----------
   Where the browser supports scroll-driven timelines, the section reveals are
   tied directly to the scrollbar: progress tracks the element's travel through
   the viewport (and reverses when scrolling back up), completing when the
   element is fully in view. Falls back to the JS play-on-arrival otherwise. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    html.js .reveal.from-l,
    html.js .reveal.from-r,
    html.js .reveal.from-d{
      animation-timeline:view();
      animation-range:entry 0% cover 50%;    /* enters bottom → finishes at screen centre */
      animation-duration:auto;               /* auto = scrub across the whole range */
      animation-fill-mode:both;
    }
    html.js .reveal.from-l{ animation-name:slideL; }
    html.js .reveal.from-r{ animation-name:slideR; }
    html.js .reveal.from-d{ animation-name:slideD; }
    /* product plates are taller than the viewport — finish them a touch past
       centre so they're high on screen by the time they settle. */
    html.js .reveal.plate{ animation-range:entry 0% cover 65%; }
  }
}

/* ---------- datapoint reveal (horizontal connect / vertical separate) ----------
   Each datapoint reveals as it crosses the vertical middle of the screen.
   Items on the same row cross together (horizontally connected, stepped
   left→right via per-item delays set in app.js); lower rows reveal later. */
html.js .cascade-item{ opacity:0; }
html.js .cascade-item.in{ animation:dataIn .5s var(--ease) both; }
@keyframes dataIn{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:translateY(0); } }

@media (prefers-reduced-motion:reduce){
  .reveal,.homebase{ opacity:1 !important; transform:none !important; transition:none !important; }
  html.js .cascade-item{ opacity:1 !important; transform:none !important; animation:none !important; }
}

/* ---------- responsive ---------- */
@media (max-width:780px){
  .quad{ grid-template-columns:1fr; }
  .plate.left,.plate.right{ clip-path:none; border:1px solid var(--line); }
  .plate{ padding:48px 24px 40px; }
  .cards,.metrics{ grid-template-columns:1fr; }
  /* vertical timeline on mobile: line runs down the left, dots stack */
  .timeline{ grid-template-columns:1fr; gap:0; }
  .tl-line{ left:8px; right:auto; top:6px; bottom:6px; width:1px; height:auto;
    background:linear-gradient(180deg, rgba(77,166,255,.1), rgba(77,166,255,.55) 8%, rgba(77,166,255,.55) 92%, rgba(77,166,255,.1)); }
  .tl-item{ text-align:left; padding:0 0 26px 34px; }
  .tl-dot{ left:8px; top:2px; transform:translateX(-50%); }
  .tl-item:hover .tl-dot{ transform:translateX(-50%) scale(1.22); }
  .tl-item p{ margin-inline:0; max-width:none; }
  .chevseam{ display:none; }
  html.js .reveal.from-l.in,html.js .reveal.from-r.in{ animation:slideD var(--rev-dur) var(--ease) both; }
  .spine{ display:none; }
}