/* ============================================================================
   TTSAI marketing site - shared Aurora design system (cerulean)
   ----------------------------------------------------------------------------
   Source of truth for every page. Aurora (Style B) surface + structure kept
   1:1 with the reference; ONLY the accent hue is TTSAI cerulean
   (#19B6EE dark / #00A7E1 light; mesh may drift cerulean -> indigo #5A5FE0).
   Dark is the default theme; light is fully designed via [data-theme="light"].

   Page builders: do NOT restate these tokens or re-style shared components in
   page-level <style> blocks. Page-specific showstopper CSS goes inline in the
   page, built ON TOP of these primitives.
   ========================================================================== */

/* ================= TOKENS - DARK (default) ================= */
:root{
  --bg:#0E0E11; --bg-2:#141419; --surface:#17171D; --bg-3:#1D1D24; --raise:#232330;
  --fg:#F5F5F7; --muted:#A0A0AA; --faint:#6E6E78;
  --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.05);
  --brand:#19B6EE;
  --accent:#19B6EE; --accent-2:#0E8FBF; --accent-hi:#5AD1FF;
  --accent-soft:rgba(25,182,238,.15); --accent-line:rgba(25,182,238,.32);
  --ok:#2FD48A; --deny:#FF5A6A; --warn:#F5C542; --info:#5B8DEF;
  --ok-t:#3BDD95; --deny-t:#FF6B79; --warn-t:#F5C542; --info-t:#78A5F5;
  --r-lg:16px; --r-md:12px; --r-sm:9px; --r-pill:999px;
  --shadow:0 24px 60px -24px rgba(0,0,0,.7);
  --glass:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,0) 42%), color-mix(in srgb, var(--surface) 76%, transparent);
  --glass-2:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,0) 46%), color-mix(in srgb, var(--surface) 88%, transparent);
  --glass-hi:inset 0 1px 0 rgba(255,255,255,.055);
  --inp-bg:rgba(255,255,255,.04);
  --blob1:rgba(0,172,238,.32); --blob2:rgba(25,182,238,.20); --blob3:rgba(90,95,224,.36); --mesh-op:.5;
  --spot:rgba(90,209,255,.08);
  --grain-op:.032;
  --grad-h1:linear-gradient(92deg,#5AD1FF,#19B6EE 58%,#2EA8E6);
  --card-face:linear-gradient(140deg,#20202A 0%,#131318 56%,#191922 100%);
  --card-line:rgba(255,255,255,.14);
  --wrap:1180px;
  --sp:clamp(88px,11vw,138px);
  color-scheme:dark;
}
/* ================= TOKENS - LIGHT ================= */
:root[data-theme="light"]{
  --bg:#FAFAFB; --bg-2:#F4F4F6; --surface:#FFFFFF; --bg-3:#F1F1F4; --raise:#FFFFFF;
  --fg:#17171B; --muted:#5B5B66; --faint:#9A9AA4;
  --line:rgba(17,17,20,.09); --line-2:rgba(17,17,20,.06);
  --accent:#00A7E1; --accent-2:#0079A2; --accent-hi:#33B8E8;
  --accent-soft:rgba(0,167,225,.10); --accent-line:rgba(0,167,225,.26);
  --ok:#12A366; --deny:#E23B4C; --warn:#C98A08; --info:#3B6FD4;
  --ok-t:#0C7E4F; --deny-t:#C22736; --warn-t:#8F6407; --info-t:#2F5FBF;
  --shadow:0 20px 44px -22px rgba(20,20,30,.22);
  --glass:linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.28) 52%), color-mix(in srgb, #FFFFFF 55%, transparent);
  --glass-2:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,.55) 60%), color-mix(in srgb, #FFFFFF 62%, transparent);
  --glass-hi:inset 0 1px 0 rgba(255,255,255,.85);
  --inp-bg:rgba(17,17,20,.035);
  --blob1:rgba(51,184,232,.20); --blob2:rgba(0,167,225,.14); --blob3:rgba(90,95,224,.12); --mesh-op:.55;
  --spot:rgba(0,167,225,.055);
  --grain-op:.02;
  --grad-h1:linear-gradient(92deg,#33B8E8,#0079A2 62%,#00A7E1);
  --card-face:linear-gradient(140deg,#FFFFFF 0%,#F2F4F8 56%,#FAFBFD 100%);
  --card-line:rgba(17,17,20,.12);
  color-scheme:light;
}

/* ================= BASE ================= */
*{box-sizing:border-box}
html{height:100%; scroll-behavior:smooth; overflow-x:hidden}
@supports (overflow-x:clip){ html{overflow-x:clip} }
body{
  margin:0; min-height:100vh; background:var(--bg); color:var(--fg);
  font:400 15px/1.55 'Geist',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
.mono{font-family:'Geist Mono',ui-monospace,'SF Mono',Menlo,monospace}
::selection{background:var(--accent-soft); color:var(--fg)}
[hidden]{display:none!important}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; cursor:pointer}
input,select,textarea{font:inherit; color:inherit}
:focus{outline:none}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:6px}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
img,svg{max-width:100%}
main{display:block; min-height:46vh; scroll-margin-top:86px}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:var(--line); border-radius:99px; border:2px solid transparent; background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:rgba(160,160,170,.35); background-clip:content-box}
::-webkit-scrollbar-track{background:transparent}

/* skip-to-content */
.skip{
  position:fixed; left:14px; top:-52px; z-index:100; padding:10px 16px; border-radius:10px;
  background:var(--accent); color:#fff; font-weight:600; font-size:13px;
  transition:top .2s ease; box-shadow:var(--shadow);
}
.skip:focus-visible{top:14px; outline-color:var(--fg)}

/* ================= AURORA AMBIENT ================= */
.ambient{position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none}
.mesh{position:absolute; inset:-12%; opacity:var(--mesh-op); filter:hue-rotate(var(--mh,0deg))}
.blob{position:absolute; border-radius:50%; filter:blur(90px); will-change:transform}
.blob.b1{width:56vw;height:56vw; left:-14vw; top:-22vw; background:radial-gradient(circle at 42% 42%, var(--blob1), transparent 66%); animation:drift1 90s ease-in-out infinite alternate}
.blob.b2{width:44vw;height:44vw; right:-12vw; top:-6vw;  background:radial-gradient(circle at 55% 45%, var(--blob2), transparent 64%); animation:drift2 74s ease-in-out infinite alternate}
.blob.b3{width:52vw;height:52vw; left:26vw; bottom:-30vw; background:radial-gradient(circle at 50% 50%, var(--blob3), transparent 66%); animation:drift3 110s ease-in-out infinite alternate}
@keyframes drift1{from{transform:translate3d(-3%,-2%,0) scale(1)}    to{transform:translate3d(7%,6%,0)   scale(1.14)}}
@keyframes drift2{from{transform:translate3d(2%,1%,0)  scale(1.08)} to{transform:translate3d(-6%,9%,0)  scale(.96)}}
@keyframes drift3{from{transform:translate3d(0,3%,0)   scale(1)}    to{transform:translate3d(-8%,-5%,0) scale(1.1)}}
.spot{position:absolute; width:640px; height:640px; left:0; top:0; border-radius:50%;
  background:radial-gradient(closest-side, var(--spot), transparent 72%);
  opacity:0; transition:opacity .8s ease; will-change:transform}
.grain{position:fixed; inset:0; z-index:80; pointer-events:none; opacity:var(--grain-op); mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ================= LAYOUT / TYPE ================= */
.page{position:relative; z-index:1}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 28px}
.sec{padding:var(--sp) 0; position:relative; scroll-margin-top:86px}
.sec.tight{padding-top:calc(var(--sp) * .55)}
.band{background:linear-gradient(180deg, color-mix(in srgb, var(--bg-2) 62%, transparent), color-mix(in srgb, var(--bg-2) 20%, transparent) 60%, transparent);
  border-top:1px solid var(--line-2)}
.eyebrow{display:inline-flex; align-items:center; gap:10px;
  font-family:'Geist Mono',ui-monospace,monospace; font-size:11.5px; font-weight:500;
  letter-spacing:.15em; text-transform:uppercase; color:var(--accent-hi)}
.eyebrow::before{content:""; width:22px; height:1px; background:linear-gradient(90deg,var(--accent),transparent); flex:none}
.h2{margin:16px 0 0; font-size:clamp(27px,3.6vw,42px); font-weight:600; letter-spacing:-.025em; line-height:1.08}
.lede{margin:16px 0 0; font-size:15.5px; color:var(--muted); max-width:600px; line-height:1.62}
.sec-head{margin-bottom:clamp(34px,5vw,58px)}
.sec-head.center{text-align:center}
.sec-head.center .lede{margin-left:auto; margin-right:auto}
.sec-head.center .eyebrow::before{display:none}
.grad{background:var(--grad-h1); -webkit-background-clip:text; background-clip:text; color:transparent}

/* hero base (per-page heroes build on this) */
.hero{position:relative; padding-top:clamp(120px,16vh,168px); padding-bottom:clamp(56px,8vh,96px)}
.hero h1{margin:20px 0 0; font-size:clamp(37px,5.1vw,64px); font-weight:600; letter-spacing:-.032em; line-height:1.04}
.hero h1 .grad{display:block; margin-top:6px}
.hero .sub{margin:22px 0 0; font-size:clamp(15px,1.5vw,16.5px); color:var(--muted); max-width:560px; line-height:1.65}
.cta-row{display:flex; align-items:center; gap:12px; margin-top:30px; flex-wrap:wrap}
.trust{margin-top:38px; display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.trust .tl{font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); font-family:'Geist Mono',ui-monospace,monospace}
.trust .ti{display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:500; color:var(--muted); white-space:nowrap}
.trust .ti::before{content:""; width:4px; height:4px; border-radius:50%; background:var(--accent); opacity:.7}

/* reveal-on-scroll base states (site.js drives .in; content NEVER stays hidden) */
.js .rv{opacity:0; transform:translateY(14px)}
.js .rv.in{opacity:1; transform:none; transition:opacity .7s cubic-bezier(.22,.6,.24,1), transform .7s cubic-bezier(.22,.6,.24,1); transition-delay:var(--d,0s)}

/* icons */
.ic{width:18px;height:18px; flex:none; stroke:currentColor; fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round}
.ic.sm{width:15px;height:15px}

/* ================= BUTTONS ================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; height:38px; padding:0 16px; flex:none;
  border-radius:10px; border:1px solid var(--line); background:transparent;
  font-size:13.5px; font-weight:500; color:var(--fg); white-space:nowrap;
  transition:background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease, box-shadow .2s ease, filter .15s ease;
}
.btn:hover{background:var(--inp-bg); border-color:rgba(160,160,170,.28)}
.btn:active{transform:translateY(1px)}
.btn .ic{width:16px;height:16px; color:var(--muted); transition:transform .2s ease}
.btn.primary{
  background:linear-gradient(180deg,#24BAF2,#0F8FC0); border-color:rgba(255,255,255,.14);
  color:#fff; font-weight:600; box-shadow:0 8px 20px -10px rgba(25,182,238,.65), inset 0 1px 0 rgba(255,255,255,.22);
}
.btn.primary .ic{color:#fff}
.btn.primary:hover{filter:brightness(1.07); background:linear-gradient(180deg,#24BAF2,#0F8FC0); box-shadow:0 12px 30px -10px rgba(25,182,238,.8), inset 0 1px 0 rgba(255,255,255,.22)}
:root[data-theme="light"] .btn.primary{border-color:rgba(0,121,162,.4)}
.btn.lg{height:46px; padding:0 22px; font-size:14px; border-radius:12px}
.btn.lg .ic{width:17px;height:17px}
.btn.ghost{color:var(--muted); border-color:transparent}
.btn.ghost:hover{color:var(--fg)}
.btn:hover .ic.arr{transform:translateX(2px)}
.btn:hover .ic.arr-u{transform:translateY(-2px)}
.icon-btn{
  display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; flex:none;
  border-radius:9px; border:1px solid transparent; background:transparent; color:var(--muted);
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.icon-btn:hover{background:var(--inp-bg); color:var(--fg); border-color:var(--line)}
:root[data-theme="dark"] .theme-ic-moon{display:none}
:root[data-theme="light"] .theme-ic-sun{display:none}

/* ================= CHIPS ================= */
.chip{
  display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:var(--r-pill);
  font-size:11.5px; font-weight:600; letter-spacing:.02em; white-space:nowrap;
  color:var(--cc,var(--muted)); background:color-mix(in srgb, var(--cc,var(--muted)) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--cc,var(--muted)) 28%, transparent);
}
.chip .dot{width:5.5px;height:5.5px;border-radius:50%;background:currentColor;flex:none}
.chip.ok{--cc:var(--ok-t)} .chip.deny{--cc:var(--deny-t)} .chip.warn{--cc:var(--warn-t)} .chip.info{--cc:var(--info-t)} .chip.acc{--cc:var(--accent-hi)}
.chip.mono{font-family:'Geist Mono',ui-monospace,monospace; font-weight:500; letter-spacing:.08em; font-size:10.5px}
.chip .dot.pulse{animation:softpulse 2.2s ease-in-out infinite}
@keyframes softpulse{0%,100%{opacity:1}50%{opacity:.4}}

/* ================= CARDS / PANELS ================= */
.card{
  position:relative; border-radius:var(--r-lg); padding:22px;
  background:var(--glass-2); border:1px solid var(--line);
  box-shadow:var(--glass-hi), 0 14px 34px -24px rgba(0,0,0,.5);
  transition:transform .3s cubic-bezier(.22,.6,.24,1), border-color .3s ease, box-shadow .3s ease;
}
:root[data-theme="light"] .card{box-shadow:var(--glass-hi), 0 12px 28px -20px rgba(20,20,30,.18)}
.card.hoverable:hover{transform:translateY(-3px); border-color:rgba(160,160,170,.22); box-shadow:var(--glass-hi), 0 22px 44px -24px rgba(0,0,0,.55)}
:root[data-theme="light"] .card.hoverable:hover{box-shadow:var(--glass-hi), 0 18px 36px -20px rgba(20,20,30,.24)}
.card h3{margin:0; font-size:16px; font-weight:600; letter-spacing:-.01em}
.card p{font-size:13.2px; color:var(--muted); line-height:1.6}

/* solid panel for dense product mocks (tables, dashboards) - NEVER glass */
.mock{border-radius:var(--r-lg); overflow:hidden; background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow), var(--glass-hi)}
.mock-head{display:flex; align-items:center; gap:12px; padding:13px 18px; border-bottom:1px solid var(--line)}
.mock-head .dots{display:flex; gap:6px}
.mock-head .dots i{width:9px; height:9px; border-radius:50%; background:var(--line); box-shadow:inset 0 0 0 1px var(--line)}
.mock-head .mt{display:flex; align-items:center; gap:9px; font-size:12.5px; font-weight:600}
.mock-head .mclock{margin-left:auto; font-family:'Geist Mono',ui-monospace,monospace; font-size:11px; color:var(--faint); font-variant-numeric:tabular-nums}
.live-dot{width:7px; height:7px; border-radius:50%; background:var(--ok); flex:none; animation:softpulse 2.6s ease-in-out infinite}

/* simple responsive grids (shared rhythm; collapse rules at the bottom) */
.grid2{display:grid; grid-template-columns:repeat(2,1fr); gap:16px}
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.grid4{display:grid; grid-template-columns:repeat(4,1fr); gap:12px}

/* ================= LED LEGEND (status semantics) ================= */
.legend{
  margin-top:22px; display:flex; align-items:center; justify-content:center; gap:clamp(14px,3vw,34px); flex-wrap:wrap;
  padding:14px 18px; border-radius:var(--r-md);
  background:color-mix(in srgb, var(--bg-2) 55%, transparent); border:1px solid var(--line-2);
}
.legend .li{display:inline-flex; align-items:center; gap:9px; font-family:'Geist Mono',ui-monospace,monospace; font-size:10.5px; letter-spacing:.1em; color:var(--muted)}
.legend .led{width:9px; height:9px; border-radius:50%; flex:none}
.legend .li .lw{font-weight:600}
.legend .g .led{background:var(--ok); box-shadow:0 0 9px -1px var(--ok); animation:ledpulse 2.4s ease-in-out infinite}
.legend .y .led{background:var(--warn); box-shadow:0 0 9px -1px var(--warn); animation:ledpulse 2.4s ease-in-out infinite .6s}
.legend .r .led{background:var(--deny); box-shadow:0 0 9px -1px var(--deny); animation:ledpulse 2.4s ease-in-out infinite 1.2s}
.legend .c .led{background:var(--accent); box-shadow:0 0 9px -1px var(--accent); animation:ledpulse 2.4s ease-in-out infinite 1.8s}
.legend .g .lw{color:var(--ok-t)} .legend .y .lw{color:var(--warn-t)} .legend .r .lw{color:var(--deny-t)} .legend .c .lw{color:var(--accent-hi)}
@keyframes ledpulse{0%,100%{opacity:1; transform:scale(1)}50%{opacity:.45; transform:scale(.82)}}

/* ================= PROGRESS + NAV ================= */
.progress{position:fixed; top:0; left:0; right:0; height:2px; z-index:62; pointer-events:none}
.progress i{display:block; height:100%; background:linear-gradient(90deg,var(--accent-2),var(--accent-hi)); transform:scaleX(0); transform-origin:left center}
.sitenav{
  position:fixed; top:0; left:0; right:0; z-index:60;
  transition:background .3s ease, border-color .3s ease, box-shadow .3s ease;
  border-bottom:1px solid transparent;
}
.sitenav .nrow{display:flex; align-items:center; gap:20px; height:70px; transition:height .28s ease}
.sitenav.scrolled{
  background:var(--glass);
  -webkit-backdrop-filter:blur(16px) saturate(1.35); backdrop-filter:blur(16px) saturate(1.35);
  border-bottom-color:var(--line); box-shadow:var(--glass-hi);
}
.sitenav.scrolled .nrow{height:58px}
.wordmark{
  display:inline-flex; align-items:center; flex:none; border-radius:8px;
  font-weight:650; font-size:20px; letter-spacing:-.03em; color:var(--fg); line-height:1;
}
.wordmark .ai{color:var(--accent)}
/* ---- brand lockup: One Record mark + real-Geist wordmark text ----
   The mark SVG is inlined per page (nav + footer) because the pulse and the
   homepage intro animate its inner parts by class, which <use> cannot reach.
   Panels follow the text color, the dot is the accent, and the dot's stroke
   matches the page background so it reads punched into the plate junction.
   The resting state here IS the reduced-motion frame: plate assembled,
   letters shown, dot parked on the junction, halo hidden. Motion exists only
   inside the no-preference block. Knob: --lgo-pulse-t = pulse loop (3s). */
.wordmark .mk{width:1.15em; height:1.15em; flex:none; margin-right:.42em}
.wordmark .mk .lgo-p{fill:var(--fg)}
.wordmark .mk .lgo-dot{fill:var(--accent); stroke:var(--bg)}
.wordmark .mk .lgo-halo{stroke:var(--accent); opacity:0}
.wordmark .mk .lgo-halo,.wordmark .mk .lgo-dot{transform-box:fill-box; transform-origin:center}
/* per-letter boxes (animated by the homepage intro; inert elsewhere) - the
   inherited letter-spacing moves to an explicit margin so the resting width
   matches the plain-text wordmark exactly */
.wordmark .lgo-l{display:inline-block; letter-spacing:0; margin-right:-.03em}
@media (prefers-reduced-motion: no-preference){
  /* ambient pulse - the always-on "AI is active" heartbeat on the dot:
     a cyan halo ring expands out of the dot and fades while the dot itself
     breathes softly. One breathe out-and-back (half time, alternate) equals
     one halo ring equals --lgo-pulse-t. */
  .wordmark .lgo-halo{animation:lgo-halo var(--lgo-pulse-t, 3s) ease-out infinite}
  .wordmark .lgo-dot{animation:lgo-breathe calc(var(--lgo-pulse-t, 3s) / 2) ease-in-out infinite alternate}
  @keyframes lgo-halo{
    0%{transform:scale(1); opacity:.5}
    70%{opacity:.12}
    100%{transform:scale(1.9); opacity:0}
  }
  @keyframes lgo-breathe{
    from{transform:scale(1)}
    to{transform:scale(1.07)}
  }
}
.nlinks{display:flex; align-items:center; gap:4px; margin:0 auto}
.nlink{
  position:relative; padding:8px 12px; border-radius:8px;
  font-size:13.5px; font-weight:500; color:var(--muted);
  transition:color .15s ease;
}
.nlink::after{
  content:""; position:absolute; left:12px; right:12px; bottom:4px; height:1.5px; border-radius:2px;
  background:var(--accent-hi); transform:scaleX(0); transform-origin:left center; transition:transform .25s cubic-bezier(.22,.6,.24,1);
}
.nlink:hover{color:var(--fg)}
.nlink:hover::after,.nlink[aria-current="page"]::after{transform:scaleX(1)}
.nlink[aria-current="page"]{color:var(--fg)}
.nright{display:flex; align-items:center; gap:10px; flex:none; margin-left:auto}
.nburger{display:none}
.nsheet{display:none}
@media (max-width:920px){
  .nlinks,.sitenav .nav-cta{display:none}
  .nburger{display:inline-flex}
  .nsheet{
    display:block; position:fixed; top:0; left:0; right:0; z-index:59; padding:76px 24px 26px;
    background:var(--glass-2); -webkit-backdrop-filter:blur(20px) saturate(1.3); backdrop-filter:blur(20px) saturate(1.3);
    border-bottom:1px solid var(--line); box-shadow:var(--shadow);
    transform:translateY(-108%); transition:transform .34s cubic-bezier(.22,.8,.26,1);
  }
  .nsheet.open{transform:none}
  .nsheet a:not(.btn){display:block; padding:13px 6px; font-size:16.5px; font-weight:500; color:var(--fg); border-bottom:1px solid var(--line-2)}
  .nsheet .btn{margin-top:16px; width:100%}
}

/* ================= CTA BAND (shared cross-page pattern) ================= */
/* Office photo behind the closing CTA. The ::before scrim paints BETWEEN the
   photo and the copy (z-index:-1 + isolation), so text stays light-on-dark
   in BOTH themes; inner colors are pinned and do not follow the theme. */
.ctaband{
  position:relative; isolation:isolate; border-radius:20px; padding:clamp(36px,6vw,64px) clamp(22px,5vw,64px); text-align:center;
  color:#F5F5F7;
  background-color:#0F1014; /* fallback while the photo loads */
  background-image:url(cta-office.jpg);
  background-size:cover; background-position:center; background-repeat:no-repeat;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 24px 60px -24px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.08);
  overflow:hidden;
}
.ctaband::before{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(60% 90% at 50% -20%, rgba(25,182,238,.15), transparent 62%),
    radial-gradient(120% 150% at 50% 42%, rgba(8,10,14,.84) 34%, rgba(8,10,14,.62) 72%, rgba(8,10,14,.48) 100%);
}
.ctaband .h2{margin:0}
.ctaband .lede{color:rgba(233,237,244,.88)}
.ctaband .cta-row{justify-content:center; margin-top:26px}
.ctaband .btn:not(.primary){color:#F5F5F7; border-color:rgba(255,255,255,.28); background:rgba(13,14,18,.38)}
.ctaband .btn:not(.primary):hover{background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.42)}
.ctaband .btn:not(.primary) .ic{color:rgba(245,245,247,.8)}

/* ================= FORMS (contact + shared) ================= */
.formcard{
  max-width:760px; margin:0 auto; padding:clamp(24px,4vw,40px); border-radius:20px;
  background:var(--glass); -webkit-backdrop-filter:blur(18px) saturate(1.3); backdrop-filter:blur(18px) saturate(1.3);
  border:1px solid var(--line); box-shadow:var(--shadow), var(--glass-hi);
}
.frow{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.frow.three{grid-template-columns:1fr 1fr 1fr}
.frow + .frow{margin-top:14px}
.fld{display:flex; flex-direction:column; gap:6px; min-width:0}
.fld label{font-size:12px; font-weight:500; color:var(--muted)}
.fld label span{color:var(--accent-hi)}
.fld input,.fld select,.fld textarea{
  width:100%; height:40px; padding:0 12px; border-radius:10px;
  background:var(--inp-bg); border:1px solid var(--line); color:var(--fg); font-size:13.5px;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.fld textarea{height:auto; min-height:96px; padding:10px 12px; resize:vertical; line-height:1.55}
.fld select{appearance:none; -webkit-appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E6E78' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 11px center; background-size:13px; padding-right:32px}
.fld input:focus-visible,.fld select:focus-visible,.fld textarea:focus-visible{outline:none; border-color:var(--accent-line); box-shadow:0 0 0 3px var(--accent-soft)}
.fld input::placeholder,.fld textarea::placeholder{color:var(--faint)}
.fsub{display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:22px; flex-wrap:wrap}
.fsub small{font-size:12px; color:var(--faint); max-width:380px; line-height:1.5}

/* ================= TOAST (site.js creates the DOM lazily) ================= */
.toastwrap{position:fixed; right:22px; bottom:22px; z-index:90; display:flex; flex-direction:column; gap:10px; pointer-events:none}
.toast{
  display:flex; align-items:flex-start; gap:12px; width:min(360px, calc(100vw - 44px)); padding:14px 16px; border-radius:14px;
  background:var(--glass-2); -webkit-backdrop-filter:blur(18px) saturate(1.3); backdrop-filter:blur(18px) saturate(1.3);
  border:1px solid var(--line); box-shadow:var(--shadow), var(--glass-hi);
  opacity:0; transform:translateY(10px); transition:opacity .4s ease, transform .4s cubic-bezier(.22,.8,.26,1);
  pointer-events:auto;
}
.toast.show{opacity:1; transform:none}
.toast .tic{width:30px; height:30px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center;
  background:color-mix(in srgb, var(--ok) 14%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ok) 36%, transparent)}
.toast .tic svg{width:15px; height:15px; stroke:var(--ok-t); stroke-width:2.6; fill:none; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:24; stroke-dashoffset:24}
.toast.show .tic svg{animation:tickdraw .5s cubic-bezier(.4,.1,.3,1) .15s forwards}
@keyframes tickdraw{to{stroke-dashoffset:0}}
.toast .tt b{display:block; font-size:13.5px; font-weight:600}
.toast .tt p{margin:3px 0 0; font-size:12.5px; color:var(--muted); line-height:1.5}

/* ================= FOOTER ================= */
footer{border-top:1px solid var(--line); background:color-mix(in srgb, var(--bg-2) 55%, transparent); position:relative; z-index:1}
.f-top{display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr) minmax(0,1fr); gap:clamp(24px,4vw,56px); padding:clamp(40px,6vw,64px) 0}
.f-brand .wordmark{font-size:22px}
.f-brand p{margin:14px 0 0; font-size:13px; color:var(--muted); line-height:1.6; max-width:280px}
.f-col h4{margin:0 0 14px; font-family:'Geist Mono',ui-monospace,monospace; font-size:10px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--faint)}
.f-col ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px}
.f-col li{font-size:13px; color:var(--muted)}
.f-col a{color:var(--muted); transition:color .15s ease}
.f-col a:hover{color:var(--fg)}
.f-bot{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 0 22px; border-top:1px solid var(--line-2); flex-wrap:wrap}
.f-bot small{font-size:11.5px; color:var(--faint)}
.f-actions{display:flex; align-items:center; gap:8px}
.f-actions .btn{height:32px; padding:0 12px; font-size:12.5px}

/* ================= RESPONSIVE ================= */
@media (max-width:1060px){
  .grid3,.grid4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:960px){
  .hero{padding-top:120px}
  .hero .sub{max-width:640px}
}
@media (max-width:760px){
  .grid2,.grid3{grid-template-columns:1fr}
  .frow,.frow.three{grid-template-columns:1fr}
  .f-top{grid-template-columns:1fr 1fr}
  .f-brand{grid-column:1 / -1}
  /* trim backdrop blur budget on small screens (ctaband is an opaque photo now, no blur to trim) */
  .formcard{-webkit-backdrop-filter:none; backdrop-filter:none;
    background:color-mix(in srgb, var(--surface) 94%, transparent)}
}
@media (max-width:560px){
  .wrap{padding:0 18px}
  .hero h1{font-size:clamp(31px,9.4vw,38px)}
  .grid4{grid-template-columns:1fr}
  .toastwrap{right:14px; bottom:14px}
  .mock-head .mclock{display:none}
  .f-top{grid-template-columns:1fr}
}
@media (max-width:400px){
  .legend{gap:10px 16px}
  .cta-row .btn.lg{width:100%}
}

/* ================= REDUCED MOTION ================= */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001s!important; animation-iteration-count:1!important; transition-duration:.001s!important}
  .js .rv{opacity:1; transform:none}
  .blob{animation:none!important}
  .spot{display:none}
  .live-dot,.legend .led{animation:none!important}
  .chip .dot.pulse{animation:none!important}
}