/* ==========================================================================
   Nyquist × Tenity — motion & shape layer
   Loaded AFTER nyquist.css. Keeps the locked Nyquist palette; adopts Tenity's
   form language (lozenge, half-circle arcs, pill+circular-arrow, staggered
   numbered cards, oversized stats, curtain background) and a level-9 motion kit.
   ========================================================================== */

:root{
  --mo: 1;                 /* motion master scalar (0..1.2) set by tweaks */
  --arc: 1;                /* 1 = arc cards on, 0 = square */
  --curtain-1: color-mix(in oklab, var(--accent) 70%, #6E8BFF);
  --curtain-2: color-mix(in oklab, var(--accent) 30%, var(--ink));
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-io:  cubic-bezier(.65,.02,.18,1);
}

/* heavier display mood — Tenity-grade headlines, Nyquist type */
body{ overflow-x:hidden; }
h1,h2{ font-weight:600; letter-spacing:-0.045em; }
.hero h1{ font-weight:680; letter-spacing:-0.05em; }
.ft-top, .pull blockquote{ font-weight:640; }

/* ============ LOZENGE — the signature filled block ============ */
.loz{
  display:inline-block; vertical-align:baseline;
  width:1.9em; height:.62em; margin:0 .12em; border-radius:999px;
  background:var(--accent); position:relative; top:.02em;
  transform-origin:left center;
}
.loz.ink{ background:var(--ink); }
html.no-loz .loz{ display:none; }

/* ============ CIRCULAR-ARROW PILL BUTTONS ============ */
.btn{ height:54px; padding:0 8px 0 26px; gap:18px; font-size:15.5px; font-weight:500; }
.btn .ca{
  width:38px; height:38px; border-radius:999px; flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid currentColor; font-family:var(--font-mono); font-size:14px;
  transition: transform .45s var(--ease-out), background .2s ease, color .2s ease;
}
.btn:hover .ca{ transform: translateX(3px) rotate(0deg); }
.btn-primary{ background:var(--ink); color:var(--bg); border-color:var(--ink) }
.btn-primary .ca{ border-color:color-mix(in oklab, var(--bg) 55%, transparent) }
.btn-primary:hover{ background:var(--accent); border-color:var(--accent); color:#fff }
.btn-outline{
  background:transparent; color:var(--ink); border:1px solid var(--line-2);
}
.btn-outline:hover{ border-color:var(--ink) }
.btn-outline .ca{ border-color:var(--line-2) }
.btn-outline:hover .ca{ border-color:var(--ink) }

/* link with mini circular arrow */
.btn-link{ border-bottom:none; gap:12px; }
.btn-link .ca{
  width:30px; height:30px; border-radius:999px; display:inline-flex;
  align-items:center; justify-content:center; border:1px solid currentColor;
  font-family:var(--font-mono); font-size:12px;
  transition: transform .4s var(--ease-out);
}
.btn-link:hover .ca{ transform:translateX(3px) }

/* ============ FLOATING PILL HEADER ============ */
header.site{
  background:transparent; backdrop-filter:none; padding-top:18px;
  pointer-events:none;
}
header.site .hd{ pointer-events:auto }
.hd{
  pointer-events:auto;
  height:64px; border:1px solid var(--line); border-radius:999px;
  background:color-mix(in oklab, var(--bg) 80%, transparent);
  backdrop-filter:saturate(1.3) blur(16px);
  padding:0 12px 0 22px; grid-template-columns: auto 1fr auto;
  max-width:1080px; margin:0 auto;
  box-shadow: 0 18px 50px -32px rgba(11,14,20,.4);
  transition: transform .5s var(--ease-out), box-shadow .4s ease;
}
header.site.hide .hd{ transform: translateY(-130%); }
nav.top{ gap:30px }
nav.top a{ font-size:13.5px; position:relative; padding:6px 2px }
nav.top a.active::after{ content:none }
nav.top a::before{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1.5px;
  background:var(--accent); transition: right .35s var(--ease-out);
}
nav.top a:hover::before, nav.top a.active::before{ right:0 }
.hd-right{ gap:14px }
.hd-right .mono{ margin-right:2px }
.btn-sm{ height:44px; padding:0 8px 0 18px; gap:12px; border-radius:999px }
.btn-sm .ca{ width:30px; height:30px; font-size:12px }
.theme-toggle{
  pointer-events:auto; width:44px; height:44px; flex:0 0 auto; border-radius:999px;
  border:1px solid var(--line-2); background:transparent; color:var(--ink);
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
  font-size:15px; transition: border-color .2s ease, background .2s ease;
}
.theme-toggle:hover{ border-color:var(--ink) }

/* ============ DOTTED SURFACE (Three.js wave grid) — fixed page backdrop ============ */
html{ background:var(--bg); }
body{ background:transparent; }
.dotfield{
  position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 24%, #000 82%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 24%, #000 82%, transparent 100%);
}
.dotfield canvas{ position:absolute; inset:0; width:100% !important; height:100% !important; display:block; }

/* ============ CURTAIN HERO BACKGROUND ============ */
.hero{ position:relative; padding-top:96px; }
.curtain{
  position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;
  -webkit-mask-image: linear-gradient(180deg,#000 60%, transparent 100%);
          mask-image: linear-gradient(180deg,#000 60%, transparent 100%);
}
.curtain canvas{ position:absolute; inset:0; width:100%; height:100%; display:block;
  opacity: calc(.9 * var(--mo)); }
.hero .wrap{ position:relative; z-index:1 }

/* dark theme: curtain glows brighter against near-black */
html[data-theme="dark"] .curtain canvas{ opacity: calc(1 * var(--mo)); mix-blend-mode:screen }

/* ============ HERO HEADLINE — big & staged ============ */
.hero-stage{ margin:20px 0 0 }
.hero h1{ font-size: clamp(52px, 8.8vw, 132px); line-height:.92; max-width:none; }
.hero h1 .ac{ color:var(--accent) }
.hero h1 em{ color:var(--ink-3) }
.hero-foot{ margin-top:110px }

/* ============ ROLLING WORD (vertical spring rotation, vanilla) ============ */
.roll{
  position:relative; display:inline-block; vertical-align:bottom;
  overflow:hidden; text-align:left; color:var(--accent); line-height:1.12;
  height:1.12em; /* font-relative clip so only the active word shows even before JS/font settle */
  /* .w words use will-change → own compositor layers, which escape a plain
     overflow:hidden. Promote the host to a layer so the clip is honored. */
  transform:translateZ(0); contain:paint;
}
.roll .w{
  /* no will-change — it escapes the parent clip on the compositor (words bleed above) */
  position:absolute; left:0; top:0; white-space:nowrap; line-height:1.12;
  opacity:0; transform:translateY(112%);
  transition: transform .9s cubic-bezier(.22,1.18,.32,1), opacity .55s ease;
}
.roll .w.active{ opacity:1; transform:translateY(0); }
/* fade in place — never translate above the slot (composited child escapes the clip → bleeds up) */
.roll .w.up{ opacity:0; transform:translateY(0); transition: opacity .3s ease; }
/* the headline line that hosts the roller must not clip the taller word slot */
.reveal-lines .ln:has(.roll){ overflow:visible; }
@media (prefers-reduced-motion: reduce){
  .roll .w{ transition:none } .roll .w:not(.active){ display:none }
}

/* ============ REVEAL PRIMITIVES (motion kit) ============
   Hidden state is gated on :not(.in); revealing simply stops the hidden
   rule from matching, so the element returns to its natural end-state.    */
@media (prefers-reduced-motion: no-preference){
  [data-rise]{ transition: opacity .9s var(--ease-out), transform 1s var(--ease-out); }
  [data-rise].will-reveal{ opacity:0; transform: translateY(calc(34px * var(--mo))); }

  /* line-by-line clip reveal for big headlines */
  .reveal-lines .ln{ display:block; overflow:hidden; padding-bottom:0.16em; margin-bottom:-0.16em; }
  .reveal-lines .ln > span{ display:block; transition: transform 1.05s var(--ease-out); }
  .reveal-lines.will-reveal .ln > span{ transform: translateY(122%); }
  .reveal-lines .ln:nth-child(2) > span{ transition-delay:.07s }
  .reveal-lines .ln:nth-child(3) > span{ transition-delay:.14s }
  .reveal-lines .ln:nth-child(4) > span{ transition-delay:.21s }
  .reveal-lines .ln:nth-child(5) > span{ transition-delay:.28s }

  /* lozenge draws in */
  .reveal-lines .loz{ transition: transform .9s var(--ease-out) .3s }
  .reveal-lines.will-reveal .loz{ transform: scaleX(0); }

  /* staggered children */
  [data-stagger] > *{ transition: opacity .8s var(--ease-out), transform .9s var(--ease-out) }
  [data-stagger].will-reveal > *{ opacity:0; transform: translateY(calc(40px * var(--mo))); }
  [data-stagger] > *:nth-child(1){ transition-delay:.02s }
  [data-stagger] > *:nth-child(2){ transition-delay:.10s }
  [data-stagger] > *:nth-child(3){ transition-delay:.18s }
  [data-stagger] > *:nth-child(4){ transition-delay:.26s }
  [data-stagger] > *:nth-child(5){ transition-delay:.34s }
  [data-stagger] > *:nth-child(6){ transition-delay:.42s }
}

/* ============ OVERSIZED STAT BAND (Tenity "Proof in numbers") ============ */
.bigstats{ display:grid; gap:0 }
.bigstat{
  display:grid; grid-template-columns: minmax(220px,1fr) 2fr minmax(0,.9fr);
  gap:48px; align-items:center; padding:46px 0; border-top:1px solid var(--hair);
}
.bigstat:last-child{ border-bottom:1px solid var(--hair) }
.bigstat .bl{ font-size: clamp(22px,2.2vw,30px); font-weight:600; letter-spacing:-0.02em; line-height:1.05 }
.bigstat .bl .u{ display:block; margin-top:10px; font-family:var(--font-mono); font-size:11px; color:var(--ink-3); text-transform:uppercase; letter-spacing:.16em; font-weight:400 }
.bigstat .bn{
  font-size: clamp(64px, 11vw, 170px); font-weight:600; letter-spacing:-0.05em;
  line-height:.86; color:var(--accent); font-variant-numeric:tabular-nums; text-align:right;
}
.bigstat .bn .sm{ font-size:.42em; color:var(--ink-3); letter-spacing:-0.02em }
.bigstat .bd{ font-size:14px; color:var(--ink-2); line-height:1.55; max-width:30ch }
@media (max-width:900px){
  .bigstat{ grid-template-columns: 1fr; gap:14px; text-align:left }
  .bigstat .bn{ text-align:left }
}

/* ============ STAGGERED NUMBERED CARDS (Tenity hybrid-model) ============ */
.stagger-cards{ display:grid; grid-template-columns: repeat(3,1fr); gap:26px; align-items:start }
.scard{
  position:relative; background:var(--panel); border:1px solid var(--line);
  border-radius:22px; padding:34px 32px 36px; min-height:330px;
  display:flex; flex-direction:column; overflow:hidden;
  transition: transform .5s var(--ease-out), border-color .3s ease, box-shadow .4s ease;
}
.scard:nth-child(1){ transform: translateY(-26px) }
.scard:nth-child(3){ transform: translateY(26px) }
.scard:hover{ border-color:var(--ink); box-shadow:0 30px 70px -44px rgba(11,14,20,.5) }
.scard .sc-top{ display:flex; align-items:center; justify-content:space-between }
.scard .sc-n{ font-family:var(--font-mono); font-size:22px; font-weight:500; letter-spacing:-0.02em; color:var(--ink) }
.scard .dot{ width:13px; height:13px; border-radius:999px; background:var(--accent) }
.scard .dot.r{ background:#E1604F } .scard .dot.g{ background:#56A877 }
.scard h3{ margin-top:auto; font-size: clamp(24px,2.2vw,32px); font-weight:600; letter-spacing:-0.025em; line-height:1.04; max-width:14ch }
.scard h3 em{ font-style:italic; color:var(--ink-3); font-weight:400 }
.scard p{ margin-top:16px; font-size:14px; color:var(--ink-2); line-height:1.55; max-width:34ch }
.scard .go{ margin-top:22px; font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); display:inline-flex; gap:10px; align-items:center }
.scard:hover .go{ color:var(--accent) }
@media (hover:hover){ .stagger-cards:hover .scard{ transform:none } .stagger-cards:hover .scard:hover{ transform:translateY(-8px) } }
@media (max-width:960px){ .stagger-cards{ grid-template-columns:1fr; gap:18px } .scard{ transform:none !important } }

/* ============ ARC CARDS (Tenity "difference / tangible results") ============ */
.arc-row{ display:grid; grid-template-columns: repeat(3,1fr); gap:0; margin-top: var(--rule-half) }
.arccard{
  position:relative; padding:54px 38px 48px; min-height:440px;
  display:flex; flex-direction:column; justify-content:flex-end;
  border-left:1px solid var(--line); overflow:visible;
}
.arccard:first-child{ border-left:none }
.arccard .arc{
  position:absolute; right:-1px; top:0; bottom:0; width:88%;
  border:1px solid var(--line-2); border-left:none;
  border-radius:0 999px 999px 0; pointer-events:none;
  opacity: var(--arc);
}
@media (prefers-reduced-motion: no-preference){
  .arc-row .arccard .arc{ transition: clip-path 1.1s var(--ease-io) }
  .arc-row.will-reveal .arccard .arc{ clip-path: inset(0 0 100% 0); }
  .arccard:nth-child(2) .arc{ transition-delay:.12s }
  .arccard:nth-child(3) .arc{ transition-delay:.24s }
}
.arccard .an{ font-family:var(--font-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); position:absolute; top:40px; left:38px }
.arccard h3{ font-size: clamp(26px,2.6vw,40px); font-weight:600; letter-spacing:-0.03em; line-height:1.0; max-width:10ch; position:relative; z-index:1 }
.arccard p{ margin-top:18px; font-size:14.5px; color:var(--ink-2); line-height:1.55; max-width:26ch; position:relative; z-index:1 }
@media (max-width:960px){
  .arc-row{ grid-template-columns:1fr }
  .arccard{ min-height:300px; border-left:none; border-top:1px solid var(--line); padding:80px 24px 40px }
  .arccard .arc{ width:60%; border-radius:0 999px 999px 0 }
  .arccard .an{ left:24px }
}

/* ============ PULL QUOTE with lozenge ============ */
.pull blockquote{ font-size: clamp(40px,6.2vw,92px); line-height:.98; max-width:18ch }

/* ============ MANIFESTO / SECTION HEAD bolder ============ */
.manifesto h2{ font-weight:560 }
.op-teaser{ display:none } /* replaced by .stagger-cards in markup */

/* ============ CTA arc backing ============ */
.cta{ position:relative; overflow:hidden }
.cta .cta-arc{
  position:absolute; right:-8%; top:50%; transform:translateY(-50%);
  width:min(46vw,640px); aspect-ratio:1; border-radius:999px;
  border:1px solid var(--line-2); pointer-events:none; opacity:var(--arc);
}

/* footer brand: keep name to the right of the logo (override .ft-grid a{display:block}) */
.ft-grid .brand{ display:inline-flex; align-items:center; gap:10px; }
.ft-grid .brand img{ display:block; }

/* ============ MARQUEE rule (optional kinetic strip) ============ */
.marquee{ overflow:hidden; border-top:1px solid var(--hair); border-bottom:1px solid var(--hair); padding:0 }
.marquee .track{
  display:flex; gap:48px; white-space:nowrap; padding:22px 0; width:max-content;
  font-family:var(--font-mono); font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3);
  animation: scrollx 38s linear infinite;
}
.marquee .track .ast{ color:var(--accent) }
@media (prefers-reduced-motion: reduce){ .marquee .track{ animation:none } }
@keyframes scrollx{ to{ transform: translateX(-50%) } }

/* progress bar */
.scrollbar{ position:fixed; left:0; top:0; height:2px; width:0; background:var(--accent); z-index:60; transition:width .1s linear }

/* Header must collapse BEFORE it overflows: the full bar (logo + 5 links +
   CLOSED BETA chip + toggle + CTA) runs out of room around ~1050px. Drop the
   chip + tighten the nav gap first (~1180px), then hide the inline links
   entirely (~940px) — logo + theme toggle + Request demo always stay on one row. */
@media (max-width:1180px){
  nav.top{ gap:20px }
  .hd-right .mono{ display:none }
}
@media (max-width:940px){
  nav.top{ display:none }
}

@media (max-width:640px){
  .hero h1{ font-size: clamp(40px,12vw,64px) }
  header.site{ padding-top:10px }
  .hd{ height:56px; padding:0 8px 0 16px }
  nav.top{ display:none }
}

/* ============ INTERIOR PAGES (Team · Research) ============ */
.page-hero{ padding-top:132px; }
.page-hero .kicker{ margin-bottom:24px; }
.page-hero h1{ font-weight:640; letter-spacing:-0.045em; }

/* founder feature */
.founder{ display:grid; grid-template-columns: 300px 1fr; gap:56px; align-items:start; }
.avatar{
  width:104px; height:104px; border-radius:999px; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-weight:500; font-size:30px; letter-spacing:-0.02em;
  background:var(--bg-2); color:var(--ink); border:1px solid var(--line);
}
.avatar.lg{ width:148px; height:148px; font-size:46px; }
.avatar.accent{ background:color-mix(in oklab, var(--accent) 14%, var(--panel)); color:var(--accent); border-color:color-mix(in oklab, var(--accent) 35%, transparent); }
.founder-meta{ margin-top:24px; }
.founder-meta .role{ font-family:var(--font-mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-top:6px; }
.kv{ display:grid; gap:22px; max-width:64ch; }
.kv .k{ font-family:var(--font-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); margin-bottom:8px; }
.kv .v{ font-size:15.5px; color:var(--ink-2); line-height:1.6; }
.kv .v b{ color:var(--ink); font-weight:600; }
.chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; }
.chip{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-2); border:1px solid var(--line-2); border-radius:999px; padding:6px 12px; white-space:nowrap;
}

/* team grid */
.team-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:24px; }
.tcard{
  background:var(--panel); border:1px solid var(--line); border-radius:22px; padding:30px 28px 32px;
  display:flex; flex-direction:column; gap:16px;
  transition: border-color .3s ease, transform .5s var(--ease-out), box-shadow .4s ease;
}
.tcard:hover{ border-color:var(--ink); transform:translateY(-6px); box-shadow:0 30px 70px -44px rgba(11,14,20,.5); }
.tcard .who{ display:flex; align-items:center; gap:16px; }
.tcard h3{ font-size:21px; letter-spacing:-0.02em; line-height:1.1; }
.tcard .role{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); margin-top:5px; }
.tcard p{ font-size:14px; color:var(--ink-2); line-height:1.55; }
.tcard .soon{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-4); }

/* research article list */
.arts{ display:grid; gap:0; }
.art{
  display:grid; grid-template-columns: minmax(0,1fr) 200px; gap:48px; align-items:end;
  padding:40px 0; border-top:1px solid var(--hair); text-decoration:none; position:relative;
  transition: padding-left .4s var(--ease-out);
}
.art:last-child{ border-bottom:1px solid var(--hair); }
.art:hover{ padding-left:14px; }
.art .cat{ font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); }
.art h3{ font-size: clamp(22px,2.3vw,32px); font-weight:560; letter-spacing:-0.025em; line-height:1.06; margin-top:14px; max-width:24ch; color:var(--ink); }
.art:hover h3{ color:var(--accent); }
.art p{ font-size:14.5px; color:var(--ink-2); line-height:1.55; margin-top:14px; max-width:62ch; }
.art .feat{ font-size: clamp(26px,3vw,42px); }
.art .meta{ text-align:right; font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; color:var(--ink-3); line-height:1.7; }
.art .meta .read{ display:inline-flex; align-items:center; gap:8px; color:var(--ink); margin-top:14px; }
.art:hover .meta .read{ color:var(--accent); }
@media (max-width:900px){
  .founder{ grid-template-columns:1fr; gap:28px; }
  .team-grid{ grid-template-columns:1fr; }
  .art{ grid-template-columns:1fr; gap:18px; align-items:start; }
  .art .meta{ text-align:left; }
}