/* =========================================================================
   BNS Group — "Aurora" design system
   Clean, modern, premium. Near-white field, deep ink, one soft blue→violet
   aurora. Big crisp system type (zero external font requests). Tasteful
   motion only. No badges. Shared across every page (header/footer verbatim).
   ========================================================================= */

:root{
  color-scheme: light;
  --btn-bg: var(--ink); --btn-fg: #fff;
  --bg:        #FBFBFD;
  --bg-2:      #F4F5F9;
  --surface:   #FFFFFF;
  --ink:       #0B0B12;
  --ink-soft:  #2E2E3A;
  --muted:     #6A6A78;
  --faint:     #6F6F80;
  --line:      #ECEDF2;
  --line-2:    #E1E2EA;

  --blue:      #3D6BFF;
  --indigo:    #5A57F2;
  --violet:    #8B5CF6;
  --grad:      linear-gradient(118deg, #3D6BFF 0%, #6E5BF6 46%, #B566FF 100%);
  --grad-soft: linear-gradient(118deg, #5C82FF 0%, #8E6BF8 50%, #C77DFF 100%);

  --ink-bg:    #0A0A12;

  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --wrap: 1440px;
  --gutter: clamp(20px, 4.5vw, 56px);
  --r: 20px;
  --r-sm: 14px;
}

html[data-theme="dark"]{
  color-scheme: dark;
  --bg:#0B0B12; --bg-2:#13141F; --surface:#16171F;
  --ink:#F3F4FA; --ink-soft:#C7C9D6; --muted:#9698A8; --faint:#85879A;
  --line:#24252F; --line-2:#30323F;
  --ink-bg:#0E0F18;
  /* Accent links/eyebrows need a brighter indigo on dark surfaces to clear 4.5:1
     (the light-mode #5A57F2 lands at ~3.5:1 here); decorative gradients are unaffected. */
  --indigo:#8E8BFF;
  --btn-bg:#F3F4FA; --btn-fg:#0B0B12;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; background:var(--bg); }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
[id]{ scroll-margin-top: 96px; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-weight:400; line-height:1.5; letter-spacing:-0.011em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }
[hidden]{ display:none !important; }
::selection{ background:rgba(110,91,246,.18); }
:focus-visible{ outline:2px solid var(--indigo); outline-offset:3px; }

.skip-link{ position:absolute; left:-9999px; top:0; z-index:100; background:var(--btn-bg); color:var(--btn-fg); font-weight:600; font-size:.92rem; padding:12px 20px; border-radius:0 0 12px 0; }
.skip-link:focus{ left:0; }
/* #main carries tabindex="-1" so the skip link moves focus into the content;
   it's a programmatic focus target, not a control, so don't ring the whole page. */
#main:focus{ outline:none; }

.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 var(--gutter); }
.section{ padding: clamp(60px, 9vh, 120px) 0; }
.section--tight{ padding: clamp(44px, 6vh, 76px) 0; }
/* On narrow screens the vh-based term inflates section gaps in the single column;
   tighten with a width-based override so spacing reads right on mobile. */
@media (max-width:640px){
  .section{ padding: clamp(48px, 8vh, 72px) 0; }
  .section--tight{ padding: clamp(36px, 6vh, 56px) 0; }
}
.band--alt{ background:var(--bg-2); }

/* ---------- type ---------- */
.display{ font-weight:680; font-size:clamp(2.7rem, 6.4vw, 5.3rem); line-height:0.98; letter-spacing:-0.04em; margin:0; text-wrap:balance; }
.h2{ font-weight:660; font-size:clamp(2rem, 3.8vw, 3.2rem); line-height:1.04; letter-spacing:-0.032em; margin:0; text-wrap:balance; }
.h3{ font-weight:600; font-size:1.32rem; line-height:1.25; letter-spacing:-0.018em; margin:0; }
.lead{ font-size:clamp(1.12rem, 1.5vw, 1.4rem); line-height:1.5; color:var(--muted); font-weight:420; text-wrap:pretty; letter-spacing:-0.01em; }
.body{ color:var(--muted); text-wrap:pretty; }
p{ text-wrap:pretty; }
.grad-text{ background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
/* Solid accent (not gradient): the eyebrows are small text, where the gradient
   ran 3.2–4.5:1 across its range; --indigo clears 4.5:1 in both themes. */
.num{ font-weight:600; letter-spacing:.02em; color:var(--indigo); }
.label{ font-size:.72rem; font-weight:650; letter-spacing:.13em; text-transform:uppercase; color:var(--faint); }

/* ---------- buttons / links ---------- */
.btn{
  display:inline-flex; align-items:center; gap:9px; white-space:nowrap;
  font-weight:560; font-size:1rem; letter-spacing:-0.01em;
  padding:14px 24px; border-radius:100px; border:1px solid transparent; cursor:pointer;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease);
}
.btn .arr{ transition:transform .3s var(--ease); }
.btn:hover .arr{ transform:translateX(3px); }
.btn--primary{ background:var(--btn-bg); color:var(--btn-fg); box-shadow:0 1px 2px rgba(11,11,18,.18), 0 12px 30px -12px rgba(11,11,18,.5); }
/* Hover warms the neutral drop-shadow to the Aurora glow (violet + blue), the
   same signature the cards use — keeps the tight contact shadow for grounding. */
.btn--primary:hover{ transform:translateY(-2px); box-shadow:0 1px 2px rgba(11,11,18,.2), 0 16px 40px -20px rgba(110,91,246,.5), 0 4px 14px -10px rgba(61,107,255,.3); }
.btn--ghost{ background:var(--surface); color:var(--ink); border-color:var(--line-2); box-shadow:0 1px 2px rgba(11,11,18,.04); }
/* The ghost button is a bordered light surface — the closest analog to a card,
   so it gets the full card treatment: violet border shift + Aurora glow. */
.btn--ghost:hover{ transform:translateY(-2px); border-color:color-mix(in srgb, var(--violet) 30%, var(--line-2)); box-shadow:0 14px 34px -20px rgba(110,91,246,.5), 0 3px 12px -8px rgba(61,107,255,.28); }

.link-arr{ display:inline-flex; align-items:center; gap:7px; font-weight:560; font-size:1rem; color:var(--ink); letter-spacing:-0.01em; white-space:nowrap; }
.link-arr .arr{ transition:transform .3s var(--ease); color:var(--indigo); }
.link-arr:hover .arr{ transform:translateX(4px); }
.ul-link{ color:var(--indigo); font-weight:560; }
.ul-link:hover{ text-decoration:underline; text-underline-offset:3px; }

/* =========================================================================
   Header
   ========================================================================= */
.head{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter:saturate(1.6) blur(18px); backdrop-filter:saturate(1.6) blur(18px);
  border-bottom:1px solid var(--line); transition:border-color .4s var(--ease), background .4s var(--ease), box-shadow .4s var(--ease);
}
.head.scrolled{ border-bottom-color:var(--line-2); background:color-mix(in srgb, var(--bg) 95%, transparent); box-shadow:0 1px 0 rgba(11,11,18,.03), 0 10px 26px -18px rgba(11,11,18,.22); }
/* Header spans full width (logo to left edge, nav to right edge) while the page
   body stays capped at --wrap. Overrides the .wrap max-width on this row only;
   the gutter padding from .wrap is kept. */
.head-in{ display:flex; align-items:center; justify-content:space-between; height:72px; max-width:none; }
.brand{ display:flex; align-items:baseline; gap:0; font-weight:740; font-size:1.42rem; letter-spacing:-0.035em; }
.brand .d{ background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.nav{ display:flex; align-items:center; gap:clamp(20px,2.4vw,36px); }
.nav a{ font-size:.95rem; font-weight:480; color:var(--ink-soft); transition:color .2s var(--ease); }
.nav a:hover, .nav a[aria-current]{ color:var(--ink); }
.nav .nav-cta{ font-weight:560; color:var(--btn-fg); background:var(--btn-bg); padding:9px 18px; border-radius:100px; box-shadow:0 10px 24px -12px rgba(11,11,18,.5); transition:transform .25s var(--ease), box-shadow .25s var(--ease); }
.nav .nav-cta:hover{ transform:translateY(-2px); box-shadow:0 12px 28px -14px rgba(110,91,246,.5), 0 3px 10px -8px rgba(61,107,255,.3); }

.nav-toggle{ display:none; width:44px; height:44px; align-items:center; justify-content:center; border:1px solid var(--line-2); border-radius:12px; background:var(--surface); cursor:pointer; color:var(--ink); }
.mobile-nav{ display:none; }
@media (max-width:840px){
  .nav{ display:none; }
  .nav-toggle{ display:inline-flex; }
  .mobile-nav{ display:grid; grid-template-rows:0fr; visibility:hidden; transition:grid-template-rows .4s var(--ease), visibility 0s .4s; background:var(--bg); border-bottom:1px solid transparent; }
  .mobile-nav[data-open]{ grid-template-rows:1fr; visibility:visible; transition:grid-template-rows .4s var(--ease); border-bottom-color:var(--line); }
  .mobile-nav > *{ overflow:hidden; }
  .mobile-nav a{ display:block; padding:16px var(--gutter); font-size:1.06rem; font-weight:500; border-top:1px solid var(--line); }
  .mobile-nav a:first-child{ border-top:none; }
}

/* =========================================================================
   Hero (home)
   ========================================================================= */
.hero{ position:relative; padding: clamp(40px,7vh,84px) 0 clamp(56px,9vh,104px); overflow:hidden; }
.hero::before{
  content:""; position:absolute; z-index:0; top:-220px; right:-160px; width:820px; height:820px;
  background:
    radial-gradient(closest-side, rgba(110,91,246,.30), transparent 70%) 60% 35%/70% 70% no-repeat,
    radial-gradient(closest-side, rgba(61,107,255,.26), transparent 70%) 20% 60%/65% 65% no-repeat,
    radial-gradient(closest-side, rgba(197,107,255,.26), transparent 70%) 80% 80%/60% 60% no-repeat;
  filter:blur(36px); pointer-events:none;
}
.hero-grid{ position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1.04fr) minmax(0,0.96fr); gap:clamp(28px,4vw,64px); align-items:center; }
.hero-lead{ max-width:600px; }
.hero h1{ margin:0; }
.hero .lead{ margin:24px 0 0; max-width:30ch; }
.hero-actions{ margin-top:36px; display:flex; gap:14px; flex-wrap:wrap; }
.hero-trust{ margin-top:30px; color:var(--faint); font-size:.9rem; font-weight:480; }

/* -------------------------------------------------------------------------
   Hero carousel — eight illustrative panels across what BNS builds:
   apps (Mobile · Web · Data), the infrastructure that connects them
   (MCP · Infra · API), and the AI inside (Agents · Tools).
   Slides stack in one grid cell so the stage sizes to the tallest panel and
   never jumps; only the active panel is visible. Auto-advance, the dot
   progress fill, and pause/resume are all driven by one CSS animation whose
   end event advances the carousel (see site.js) — no timers to drift.
   ------------------------------------------------------------------------- */
.carousel{ width:100%; max-width:520px; margin:0 auto; }
.car-stage{ display:grid; align-items:center; width:100%; min-height:400px; }
.cslide{ grid-area:1/1; display:flex; align-items:center; justify-content:center;
  min-width:0; /* shrink to the cell on narrow screens instead of forcing the
                  carousel (and the hero column) wider than the viewport — the
                  inner panels carry their own max-width + overflow:hidden */
  opacity:0; transform:translateY(16px) scale(.985); z-index:1;
  transition:opacity .28s var(--ease), transform .45s var(--ease);
  pointer-events:none; }
/* Cross-dissolve, tuned so the two panels are never both legible at once. The
   outgoing panel fades out fast (.28s) and the incoming fades in a touch later
   (.46s, +.12s delay — see .active); because --ease is steeply front-loaded the
   old panel's opacity collapses before the new one rises, so the two only meet
   at a brief ~7-8% "pinch" — a faint dissolve, never a double-image and never an
   empty beat. This matters because the two window slides (dashboard, table)
   share a frame and a plain crossfade ghosts them; an instant opacity swap
   killed the ghost but "popped". The pinch is set this low on purpose: in dark
   mode the panels are light-on-dark, so their text stays legible at a higher
   opacity than dark-on-light does in light mode — a shallower crossover that
   looks clean in light mode still ghosts in dark. The incoming also lifts from
   16px/.985 (and sits on top, z-index), so each change reads as a gentle
   entrance that resolves into place. */
.cslide.active{ opacity:1; transform:none; pointer-events:auto; z-index:2;
  transition:opacity .46s var(--ease) .12s, transform .55s var(--ease); }
/* Only the visible slide animates — inactive slides keep their layout (so the
   stage box stays a constant size) but their infinite animations are paused so
   they don't repaint the blurred aurora behind the hero and cause stutter. */
.cslide:not(.active) .cwire, .cslide:not(.active) .wire,
.cslide:not(.active) .spin, .cslide:not(.active) .web-chart .bar{ animation-play-state:paused; }

.car-dots{ display:flex; justify-content:center; align-items:center; gap:9px; margin-top:28px; }
.car-dot{ width:7px; height:7px; padding:0; border:0; border-radius:100px; background:color-mix(in srgb, var(--faint) 60%, transparent);
  cursor:pointer; position:relative; overflow:hidden; transition:width .45s var(--ease), background .3s var(--ease); }
.car-dot:hover{ background:var(--faint); }
.car-dot.active{ width:32px; background:var(--line-2); }
.car-dot.active::after{ content:""; position:absolute; inset:0; transform-origin:left;
  background:var(--grad); animation:carfill var(--adv,6500ms) linear forwards; }
.carousel.paused .car-dot.active::after{ animation-play-state:paused; }
@keyframes carfill{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }

/* shared chrome */
/* Both winchrome slides (web dashboard, data workspace) are the same window
   component, so they share one height — otherwise the taller table panel makes
   an identically-framed window look a different size as the carousel flips.
   Pinned to the taller (table) panel's height; the dashboard reaches it via a
   correspondingly taller chart (see .web-chart) rather than padding dead space. */
.winchrome{ width:100%; max-width:484px; min-height:413px; background:var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow:0 30px 70px -36px rgba(20,20,50,.5); overflow:hidden; }
.win-bar{ display:flex; align-items:center; gap:7px; padding:11px 14px; background:var(--bg-2); border-bottom:1px solid var(--line); }
.win-bar .d{ width:10px; height:10px; border-radius:50%; }
.win-bar .d.r{ background:#FF5F57; } .win-bar .d.y{ background:#FEBC2E; } .win-bar .d.g{ background:#28C840; }
.win-bar .url{ margin-left:8px; flex:1; height:23px; border-radius:7px; background:var(--surface); border:1px solid var(--line); display:flex; align-items:center; padding:0 11px; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.66rem; color:var(--muted); }

/* slide 1 · consumer mobile app (phone) */
.phone{ position:relative; width:212px; height:418px; border-radius:44px; background:#0C0D14; padding:9px; box-shadow:0 34px 74px -32px rgba(20,20,50,.6), 0 0 0 1px rgba(255,255,255,.07), inset 0 1px 0 rgba(255,255,255,.1); }
.phone::before{ content:""; position:absolute; top:14px; left:50%; transform:translateX(-50%); width:52px; height:6px; border-radius:6px; background:rgba(255,255,255,.18); z-index:2; }
.ph-screen{ width:100%; height:100%; border-radius:33px; background:var(--surface); overflow:hidden; position:relative; }
.ph-status{ display:flex; justify-content:space-between; align-items:center; padding:14px 20px 0; font-size:.62rem; font-weight:680; color:var(--ink); letter-spacing:-.01em; }
.ph-status .sd{ display:flex; gap:3px; align-items:center; }
.ph-status .sd i{ width:5px; height:5px; border-radius:50%; background:var(--ink); display:block; opacity:.55; }
.ph-body{ padding:16px 17px 0; }
.ph-hello{ font-size:.7rem; color:var(--muted); font-weight:500; }
.ph-h{ font-size:1.2rem; font-weight:700; letter-spacing:-.025em; margin:2px 0 14px; color:var(--ink); }
.ph-card{ border-radius:18px; background:var(--grad); color:#fff; padding:14px 16px; box-shadow:0 16px 30px -16px rgba(90,70,240,.6); }
.ph-card .pk{ font-size:.62rem; font-weight:650; letter-spacing:.08em; text-transform:uppercase; opacity:.82; white-space:nowrap; }
.ph-card .pv{ font-size:1.68rem; font-weight:720; letter-spacing:-.03em; margin-top:3px; font-variant-numeric:tabular-nums; }
.ph-card .pt{ font-size:.68rem; opacity:.86; margin-top:2px; }
.ph-list{ margin-top:18px; display:flex; flex-direction:column; gap:15px; }
.ph-item{ display:flex; align-items:center; gap:12px; }
.ph-item .pi{ width:32px; height:32px; border-radius:10px; flex:none; display:grid; place-items:center; }
.ph-item .pi svg{ width:16px; height:16px; stroke:#fff; fill:none; stroke-width:1.9; }
.ph-item .pm{ min-width:0; }
.ph-item .pm b{ display:block; font-size:.82rem; font-weight:600; color:var(--ink); letter-spacing:-.01em; white-space:nowrap; }
.ph-item .pm span{ font-size:.68rem; color:var(--muted); }
.ph-item .pe{ margin-left:auto; font-size:.8rem; font-weight:680; color:var(--ink); font-variant-numeric:tabular-nums; }

/* slide 2 · business dashboard (web) */
.web-body{ padding:22px 22px 26px; }
.web-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; }
.web-head b{ font-size:1.12rem; font-weight:660; letter-spacing:-.02em; color:var(--ink); }
.web-seg{ display:flex; gap:2px; background:var(--bg-2); border-radius:8px; padding:2px; }
.web-seg span{ font-size:.66rem; padding:4px 9px; border-radius:6px; color:var(--muted); font-weight:500; }
.web-seg .on{ background:var(--surface); color:var(--ink); box-shadow:0 1px 2px rgba(11,11,18,.08); font-weight:600; }
.web-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:24px; }
.web-stat .k{ font-size:.64rem; color:var(--muted); font-weight:500; }
.web-stat .v{ font-size:1.32rem; font-weight:700; letter-spacing:-.025em; color:var(--ink); margin:3px 0 1px; font-variant-numeric:tabular-nums; }
.web-stat .c{ font-size:.66rem; font-weight:700; }
.web-stat .c.up{ color:#1FA53C; } .web-stat .c.mut{ color:var(--faint); }
.web-chart{ display:flex; align-items:flex-end; gap:10px; height:176px; padding-top:14px; border-top:1px solid var(--line); }
.web-chart .bar{ flex:1; border-radius:5px 5px 0 0; background:var(--grad); transform:scaleY(0); transform-origin:bottom; transition:transform .7s var(--ease); }
.web-chart .bar.in{ transform:scaleY(1); }

/* slide 3 · business workspace (data table) */
.data-head{ display:flex; align-items:center; justify-content:space-between; padding:18px 18px 15px; }
.data-head b{ font-size:1.12rem; font-weight:660; letter-spacing:-.02em; color:var(--ink); }
.data-head .cnt{ font-size:.7rem; color:var(--muted); font-weight:500; }
.dtbl{ display:flex; flex-direction:column; }
.dtr{ display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:12px; align-items:center; padding:15px 18px; border-top:1px solid var(--line); opacity:0; transform:translateY(6px); transition:opacity .5s var(--ease), transform .5s var(--ease); }
.dtr.in{ opacity:1; transform:none; }
.dt-name{ display:flex; align-items:center; gap:10px; min-width:0; }
.dt-ic{ width:30px; height:30px; border-radius:8px; flex:none; display:grid; place-items:center; color:#fff; }
.dt-ic svg{ width:13px; height:13px; stroke:#fff; fill:none; stroke-width:1.9; }
.dt-l{ font-size:.92rem; font-weight:560; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; letter-spacing:-.01em; }
.dt-meta{ font-size:.78rem; color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap; }
/* Uniform-width status chip so the pill column and the meta values to its left
   form clean vertical edges (each .dtr is its own grid, so without a shared
   width the columns wander with each label's length). */
.dt-pill{ font-size:.72rem; font-weight:600; padding:4px 11px; border-radius:100px; white-space:nowrap; min-width:67px; text-align:center; }
.dt-pill.done{ background:rgba(40,200,64,.15); color:#1FA53C; }
.dt-pill.active{ background:color-mix(in srgb, var(--blue) 13%, var(--surface)); color:var(--blue); }
.dt-pill.queued{ background:rgba(245,158,11,.16); color:#B97400; }

/* slide 4 · MCP / API endpoint (dark window) */
.endp{ position:relative; width:100%; max-width:484px; border-radius:15px; overflow:hidden; background:#0E1019; border:1px solid rgba(255,255,255,.09); box-shadow:0 40px 90px -40px rgba(28,22,80,.6), 0 4px 14px rgba(0,0,0,.32); }
.endp-bar{ display:flex; align-items:center; gap:8px; padding:12px 15px; background:#161922; border-bottom:1px solid rgba(255,255,255,.06); }
.endp-bar .d{ width:11px; height:11px; border-radius:50%; }
.endp-bar .d.r{ background:#FF5F57; } .endp-bar .d.y{ background:#FEBC2E; } .endp-bar .d.g{ background:#28C840; }
.endp-bar .ef{ margin-left:8px; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.8rem; color:rgba(255,255,255,.46); }
.endp-code{ margin:0; padding:23px 24px 25px; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.9rem; line-height:2.04; color:#C9CDDC; }
/* Each line is a block that reserves its row height up front, so the panel never
   resizes as text appears. Request lines are typed (.cwt); response lines fade. */
.cwline{ display:block; white-space:pre; }
/* Typed request text: an inline-block clipped to width:0, revealed by transitioning
   width to N ch with a steps(N) timing function — one monospace cell per step. No
   padding on the content box, so N ch is exactly N glyph cells; the blinking caret
   is the right border, which rides the clip edge and is never eaten by overflow. */
.cwt{ display:inline-block; overflow:hidden; white-space:pre; width:0; line-height:1.5; vertical-align:middle; border-right:2px solid transparent; }
.cwline.caret .cwt{ animation:cwcaret 1.05s linear infinite; }
@keyframes cwcaret{ 0%,49%{ border-right-color:#82AAFF; } 50%,100%{ border-right-color:transparent; } }
/* The request "sends"; the response then prints in line by line. */
.cwline.out{ opacity:0; transform:translateY(4px); transition:opacity .44s var(--ease), transform .44s var(--ease); }
.cwline.out.in{ opacity:1; transform:none; }
.endp-code .f{ color:#82AAFF; } .endp-code .s{ color:#C3E88D; } .endp-code .c{ color:#5B6273; } .endp-code .n{ color:#F78C6C; }
.endp-code .ok{ color:#28C840; font-weight:600; }

/* slide 5 · gateway / architecture diagram */
.const{ position:relative; width:100%; max-width:498px; aspect-ratio:1/.78; }
.const svg{ position:absolute; inset:0; width:100%; height:100%; transform:translateZ(0); }
.cwire{ fill:none; stroke:url(#wg); stroke-width:6; stroke-linecap:round; stroke-dasharray:5 10; vector-effect:non-scaling-stroke; animation:carflow 1.9s linear infinite; }
@keyframes carflow{ to{ stroke-dashoffset:-30; } }
/* Nodes are centred on their wire endpoints; a shared min-width makes every box
   the same size so the column lines up on both edges instead of going ragged
   with each label's length (centres — and therefore the wires — don't move). */
.cnode{ position:absolute; transform:translate(-50%,-50%); display:flex; align-items:center; justify-content:center; gap:8px; min-width:106px; padding:8px 14px; border-radius:11px; background:var(--surface); border:1px solid var(--line-2); box-shadow:0 12px 26px -16px rgba(20,20,50,.4); font-size:.86rem; font-weight:600; color:var(--ink-soft); white-space:nowrap; }
.cnode .cd{ width:8px; height:8px; border-radius:2px; }
.ccore{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:128px; height:128px; border-radius:30px; background:var(--grad); box-shadow:0 22px 50px -18px rgba(90,70,240,.6), inset 0 1px 0 rgba(255,255,255,.4); display:grid; place-items:center; color:#fff; text-align:center; font-weight:680; font-size:1.04rem; line-height:1.22; }
.ccore small{ display:block; font-size:.6rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; opacity:.8; margin-top:3px; }

/* slide 6 · API reference */
.apiref{ width:100%; max-width:484px; background:var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow:0 30px 70px -36px rgba(20,20,50,.5); overflow:hidden; }
.api-top{ display:flex; align-items:center; justify-content:space-between; padding:17px 20px; border-bottom:1px solid var(--line); }
.api-top b{ font-size:1.05rem; font-weight:620; color:var(--ink); }
.api-top .base{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.68rem; color:var(--muted); background:var(--bg-2); border:1px solid var(--line); padding:3px 9px; border-radius:6px; }
.api-list{ padding:13px 0 15px; }
.api-row{ display:flex; align-items:center; gap:14px; padding:19px 21px; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.9rem; opacity:0; transform:translateY(6px); transition:opacity .48s var(--ease), transform .48s var(--ease); }
.api-row.in{ opacity:1; transform:none; }
.api-m{ font-size:.68rem; font-weight:700; letter-spacing:.03em; padding:4px 0; width:54px; text-align:center; border-radius:6px; flex:none; }
.api-m.get{ background:color-mix(in srgb, var(--blue) 13%, var(--surface)); color:var(--blue); }
.api-m.post{ background:rgba(40,200,64,.15); color:#1FA53C; }
.api-p{ color:var(--ink-soft); flex:1; min-width:0; }
.api-p .v{ color:var(--faint); }
.api-d{ flex:none; font-family:var(--sans); font-size:.86rem; color:var(--faint); white-space:nowrap; letter-spacing:-.01em; }

/* slide 7 · AI agent feed */
.feedpanel{ width:100%; max-width:484px; background:var(--surface); border:1px solid var(--line); border-radius:16px; box-shadow:0 30px 70px -36px rgba(20,20,50,.5); overflow:hidden; }
.feed-top{ padding:18px 20px; border-bottom:1px solid var(--line); }
.feed-top .lbl{ font-size:.68rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--faint); display:flex; align-items:center; gap:7px; margin-bottom:8px; }
.feed-top .lbl::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--grad); }
.feed-top .ask{ color:var(--ink); font-weight:560; font-size:1.06rem; line-height:1.36; }
.feed-body{ padding:16px 20px 18px; display:flex; flex-direction:column; justify-content:space-between; min-height:306px; }
.frow{ display:flex; align-items:center; gap:11px; padding:6px 0; font-size:.94rem; color:var(--ink-soft); opacity:0; transform:translateY(7px); transition:opacity .5s var(--ease), transform .5s var(--ease); line-height:1.36; }
.frow.in{ opacity:1; transform:none; }
.frow .ftext{ flex:1; min-width:0; }
.frow .fmeta{ flex:none; font-size:.78rem; color:var(--faint); white-space:nowrap; }
.frow .fmeta.done{ font-weight:600; color:#1FA53C; background:rgba(40,200,64,.15); padding:3px 11px; border-radius:100px; }
.frow .fi{ width:25px; height:25px; border-radius:8px; flex:none; display:grid; place-items:center; font-size:.74rem; }
.frow .fi.run{ background:color-mix(in srgb, var(--indigo) 14%, var(--surface)); color:var(--indigo); } .frow .fi.ok{ background:rgba(40,200,64,.16); color:#1FA53C; }
.spin{ width:13px; height:13px; border-radius:50%; border:2px solid var(--line-2); border-top-color:var(--indigo); animation:carspin .9s linear infinite; }
@keyframes carspin{ to{ transform:rotate(360deg); } }
.frow b{ color:var(--ink); font-weight:600; }
.frow .src{ display:inline-flex; align-items:center; gap:5px; font-size:.72rem; color:var(--muted); background:var(--bg-2); border:1px solid var(--line); padding:1px 7px; border-radius:6px; }
.frow .src i{ width:6px; height:6px; border-radius:50%; background:#28C840; }
/* The final "result" row reads as complete via its gradient check icon + green
   "Done" badge alone — no boxed pill, so its height matches the other feed rows. */
.frow.result .fi{ background:var(--grad); color:#fff; }

/* slide 8 · AI tool graph */
.graph{ position:relative; width:100%; max-width:496px; aspect-ratio:1/.8; }
.graph svg{ position:absolute; inset:0; width:100%; height:100%; transform:translateZ(0); }
.wire{ fill:none; stroke:url(#wg2); stroke-width:6; stroke-linecap:round; stroke-dasharray:5 10; vector-effect:non-scaling-stroke; animation:carflow 1.8s linear infinite; }
/* Same treatment as .cnode — uniform box width + symmetric padding so the four
   corner nodes are identically sized and centred on their wire endpoints. */
.gnode{ position:absolute; transform:translate(-50%,-50%); display:flex; align-items:center; justify-content:center; gap:8px; min-width:142px; padding:9px 14px; border-radius:12px; background:var(--surface); border:1px solid var(--line-2); box-shadow:0 12px 26px -16px rgba(20,20,50,.4); font-size:.86rem; font-weight:600; color:var(--ink-soft); white-space:nowrap; }
.gnode .nd{ width:8px; height:8px; border-radius:50%; background:var(--grad); }
.gcore{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:110px; height:110px; border-radius:50%; background:var(--grad); box-shadow:0 22px 50px -18px rgba(90,70,240,.6), inset 0 1px 0 rgba(255,255,255,.4); display:grid; place-items:center; color:#fff; font-weight:680; font-size:1.16rem; }

/* Single column on narrow screens. minmax(0,1fr) (not a bare 1fr) lets the track
   shrink below its content's min-content — without it, the carousel's widest slide
   (the MCP-endpoint <pre>) forces the column ~353px wide and .hero{overflow:hidden}
   clips the heading/lead/buttons on phones under ~373px. Matches the desktop rule's
   minmax(0,…) intent above. */
@media (max-width:880px){ .hero-grid{ grid-template-columns:minmax(0,1fr); gap:48px; } .carousel{ max-width:440px; } .hero .lead{ max-width:46ch; } }
/* Narrow phones: the gateway/graph diagram nodes are absolutely positioned on
   their wire endpoints (16/84%, 18/82%), so they can't be moved without detaching
   the wires — instead shrink them (min-width:0 + smaller type) so the boxes stay
   inside the panel as it collapses with the hero column. */
@media (max-width:540px){
  .cnode{ min-width:0; gap:6px; padding:6px 9px; font-size:.74rem; }
  .gnode{ min-width:0; gap:6px; padding:6px 9px; font-size:.72rem; }
  .ccore{ width:106px; height:106px; font-size:.94rem; }
  .gcore{ width:92px; height:92px; font-size:1rem; }
}

@media (prefers-reduced-motion: reduce){
  .cslide, .cslide.active{ transition:none; }
  .car-dot{ transition:none; }
  .car-dot.active::after{ animation:none; transform:scaleX(1); }
  .cwire,.wire,.spin{ animation:none; }
  .frow,.cwline,.dtr,.api-row{ opacity:1 !important; transform:none !important; }
  .cwt{ width:auto !important; border-right-color:transparent !important; animation:none !important; }
  .web-chart .bar{ transform:none !important; }
}

/* =========================================================================
   Marquee
   ========================================================================= */
.marquee{ position:relative; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--surface); overflow:hidden; }
.marquee-row{ display:flex; width:max-content; animation: scroll 38s linear infinite; }
.marquee:hover .marquee-row{ animation-play-state:paused; }
.marquee-row span{ display:inline-flex; align-items:center; padding:20px 0; }
.marquee i::after{ content:"·"; color:var(--faint); margin:0 21px; }
.marquee i{ font-style:normal; font-weight:540; font-size:1.02rem; letter-spacing:-0.01em; color:var(--ink-soft); white-space:nowrap; }
.marquee-row span i:first-child{ margin-left:0; }
/* Soften the strip's right edge, where the keywords scroll in. */
.marquee::after{ content:""; position:absolute; top:0; right:0; bottom:0; width:96px; background:linear-gradient(90deg, transparent, var(--surface)); pointer-events:none; z-index:1; }
@keyframes scroll{ to{ transform:translateX(-50%); } }
/* Reduced motion: the strip holds still. */
@media (prefers-reduced-motion: reduce){ .marquee-row{ animation:none; } }

/* =========================================================================
   Section head + cards
   ========================================================================= */
.band-head{ max-width:680px; margin:0 auto clamp(44px,6vh,72px); text-align:center; }
.band-head .lead{ margin:20px auto 0; max-width:50ch; }
.band-head--left{ text-align:left; margin-left:0; }
.band-head--left .lead{ margin-left:0; }

.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2vw,26px); }
/* Plain .card is a non-interactive container — no hover treatment (a glow/lift on
   a static card reads as a false affordance). Cards that lead somewhere take the
   .card--link modifier below, which makes the whole surface a single link. */
.card{ position:relative; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:clamp(26px,2.4vw,34px); display:flex; flex-direction:column; gap:16px; overflow:hidden; }
.gi-lg{ width:56px; height:56px; border-radius:16px; display:grid; place-items:center; color:#fff; box-shadow:0 12px 26px -10px rgba(40,40,90,.5); }
.gi-lg svg{ width:28px; height:28px; stroke:#fff; fill:none; stroke-width:1.7; }
.card h3{ margin-top:4px; }
.card p{ color:var(--muted); font-size:1rem; line-height:1.55; margin:0; flex:1; text-wrap:pretty; }
.card .meta{ display:flex; align-items:center; justify-content:space-between; padding-top:6px; gap:12px; }
.card .meta .tag{ font-size:.78rem; font-weight:560; letter-spacing:.02em; color:var(--faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.card .meta .link-arr{ flex:none; }

/* ---- whole-card link --------------------------------------------------------
   A .card--link's single CTA (.meta .link-arr) is stretched over the entire card
   via ::after{inset:0}, so a click anywhere on the surface follows that one link —
   no nested <a>, just one accessible link whose visible text is its name. The only
   hover cue is a quiet edge-warm to violet, identical to the .app-tile treatment —
   no lift, no glow, nothing that moves. */
.card--link{ transition:border-color .25s var(--ease); }
.card--link:hover, .card--link:focus-within{ border-color:var(--violet); }
.card--link .meta .link-arr::after{ content:""; position:absolute; inset:0; z-index:1; }

.ic-blue{ background:linear-gradient(135deg,#3D6BFF,#5A57F2); }
.ic-violet{ background:linear-gradient(135deg,#7A5BF6,#C56BFF); }
.ic-cyan{ background:linear-gradient(135deg,#27B7F5,#5A57F2); }
@media (max-width:900px){ .cards{ grid-template-columns:1fr; max-width:460px; margin:0 auto; } }

/* two-column value/split grid (studio) */
.values{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(18px,2vw,26px); }
.values .card .fnum{ width:42px; height:42px; }
@media (max-width:760px){ .values{ grid-template-columns:1fr; max-width:480px; margin:0 auto; } }

/* =========================================================================
   Approach
   ========================================================================= */
.approach{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(18px,2vw,30px); }
.principle{ display:flex; flex-direction:column; gap:12px; }
.principle .bar{ height:3px; width:40px; border-radius:3px; background:var(--grad); margin-bottom:4px; }
.principle h3{ font-size:1.18rem; }
.principle p{ margin:0; color:var(--muted); font-size:.98rem; line-height:1.55; text-wrap:pretty; }
@media (max-width:820px){ .approach{ grid-template-columns:1fr 1fr; gap:34px 24px; } }
@media (max-width:480px){ .approach{ grid-template-columns:1fr; } }

/* =========================================================================
   Page head (subpages)
   ========================================================================= */
.page-head{ position:relative; overflow:hidden; padding: clamp(48px,9vh,108px) 0 clamp(40px,6vh,72px); }
.page-head::before{ content:""; position:absolute; z-index:0; top:-280px; right:-140px; width:720px; height:720px;
  background:
    radial-gradient(closest-side, rgba(110,91,246,.24), transparent 70%) 60% 40%/70% 70% no-repeat,
    radial-gradient(closest-side, rgba(61,107,255,.20), transparent 70%) 25% 65%/65% 65% no-repeat,
    radial-gradient(closest-side, rgba(197,107,255,.20), transparent 70%) 85% 80%/60% 60% no-repeat;
  filter:blur(38px); pointer-events:none; }
.page-head .wrap{ position:relative; z-index:1; }
.page-head .lead{ margin-top:24px; max-width:54ch; }
.page-jump{ display:flex; gap:clamp(16px,2.5vw,34px); flex-wrap:wrap; margin-top:34px; }

/* =========================================================================
   Services — spec
   ========================================================================= */
.spec{ display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.3fr); gap:clamp(36px,5vw,88px); align-items:start; }
.spec-head .num{ font-size:.95rem; }
.spec-head h2{ margin-top:14px; }
.spec-head .lead{ margin-top:20px; max-width:40ch; }
.spec-head .btn{ margin-top:28px; }
@media (max-width:900px){ .spec{ grid-template-columns:1fr; gap:30px; } }

/* capability cards (services) */
.feat-stack{ display:flex; flex-direction:column; gap:14px; }
/* Non-interactive capability card — no hover treatment (see .card). */
.fcard{ position:relative; display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:start; padding:22px 24px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden; }
/* Deeper than --grad so the white numerals clear 4.5:1 (white on the standard
   gradient bottoms out at ~3.3:1 over its violet end); same blue→violet ramp. */
.fnum{ width:40px; height:40px; border-radius:12px; display:grid; place-items:center; font-weight:660; font-size:.92rem; color:#fff; background:linear-gradient(118deg,#3158D6 0%,#5747DC 46%,#8A3DD0 100%); box-shadow:0 8px 18px -8px rgba(40,40,90,.5); }
.fcard b{ display:block; font-size:1.06rem; font-weight:600; letter-spacing:-0.016em; color:var(--ink); margin-bottom:5px; }
.fcard p{ margin:0; color:var(--muted); font-size:.95rem; line-height:1.5; text-wrap:pretty; }

/* =========================================================================
   Apps — catalog
   ========================================================================= */
.apps-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:clamp(16px,1.6vw,22px); }
.app-tile{ position:relative; display:flex; flex-direction:column; gap:10px; padding:clamp(22px,2vw,28px); background:var(--surface); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; min-height:208px; transition:border-color .25s var(--ease); }
/* The whole tile is a link (<a href="/apps/…">), so a restrained border-warm is a
   real affordance, not decoration — no lift, no shadow bloom, no emblem charge.
   Keyboard focus additionally gets the global :focus-visible outline. The
   coming-soon placeholder is a <div>, not a link, so it gets no hover affordance. */
.app-tile:not(.app-tile--soon):hover, .app-tile:not(.app-tile--soon):focus-visible{ border-color:var(--violet); }
.app-tile--soon{ cursor:default; }
.app-soon-tag{ align-self:flex-start; font-size:.72rem; font-weight:560; letter-spacing:.04em; text-transform:uppercase; color:var(--indigo); background:color-mix(in srgb, var(--indigo) 12%, var(--surface)); padding:4px 11px; border-radius:100px; }
.app-ico{ width:54px; height:54px; border-radius:15px; display:grid; place-items:center; color:#fff; margin-bottom:8px; box-shadow:0 12px 26px -10px rgba(40,40,90,.5); }

.app-ico svg{ width:27px; height:27px; stroke:#fff; fill:none; stroke-width:1.6; }
.app-name{ font-weight:600; font-size:1.08rem; letter-spacing:-0.018em; color:var(--ink); }
.app-desc{ font-size:.92rem; color:var(--muted); line-height:1.45; flex:1; }
.app-foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:10px; }
.app-plat{ font-size:.72rem; font-weight:560; letter-spacing:.04em; color:var(--faint); text-transform:uppercase; }
.app-aud{ font-size:.86rem; color:var(--indigo); font-weight:540; }
@media (max-width:980px){ .apps-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ .apps-grid{ grid-template-columns:1fr; } }

/* =========================================================================
   App detail (template)
   ========================================================================= */
.crumb{ display:flex; align-items:center; gap:11px; padding-top:clamp(24px,5vh,52px); font-size:.88rem; color:var(--faint); position:relative; z-index:1; }
.crumb a{ color:var(--muted); transition:color .2s var(--ease); }
.crumb a:hover{ color:var(--ink); }
.crumb-sep{ color:var(--line-2); }
.crumb span:last-child{ color:var(--ink); font-weight:500; }

.app-masthead{ display:grid; grid-template-columns:minmax(0,1.4fr) minmax(280px,.9fr); gap:clamp(36px,5vw,76px); align-items:start; padding:clamp(24px,4vh,44px) 0 clamp(40px,6vh,68px); }
.am-id{ display:flex; gap:clamp(18px,2.5vw,26px); align-items:center; }
.am-ico{ flex:none; width:92px; height:92px; border-radius:22px; display:grid; place-items:center; color:#fff; box-shadow:0 20px 40px -16px rgba(40,40,90,.55); }
.am-ico svg{ width:46px; height:46px; stroke:#fff; fill:none; stroke-width:1.6; }
.am-name{ font-size:clamp(2rem,4vw,2.8rem); }
.am-tag{ margin:8px 0 0; }
.am-actions{ display:flex; align-items:center; gap:clamp(18px,3vw,30px); flex-wrap:wrap; margin-top:32px; }
.am-facts{ margin:0; border-top:1px solid var(--line); }
.am-facts > div{ display:flex; justify-content:space-between; gap:16px; padding:13px 0; border-bottom:1px solid var(--line); }
.am-facts dt{ font-size:.86rem; color:var(--muted); margin:0; }
.am-facts dd{ font-size:.88rem; font-weight:600; color:var(--ink); margin:0; text-align:right; }

.app-section{ max-width:760px; }
.app-sec{ border-top:1px solid var(--line); padding:clamp(40px,6vh,76px) 0; }
.as-head{ margin-bottom:22px; }
.as-head .num{ font-size:.95rem; display:block; margin:0; }
.as-body{ min-width:0; }
.contact-list{ margin:0; border-top:1px solid var(--line); }
.contact-list > div{ display:grid; grid-template-columns:minmax(150px,.55fr) 1fr; gap:20px; padding:16px 0; border-bottom:1px solid var(--line); }
.contact-list dt{ font-size:.86rem; color:var(--muted); margin:0; font-weight:600; }
.contact-list dd{ margin:0; font-size:.95rem; color:var(--ink-soft); }
.legal > div{ padding-top:30px; }
.legal > div:first-of-type, .legal > .lead{ padding-top:0; }
.legal-h{ margin:0 0 10px; }
.legal p{ color:var(--ink-soft); font-size:.97rem; line-height:1.62; max-width:64ch; margin:0 0 12px; }
.legal-list{ margin:0; padding-left:18px; color:var(--ink-soft); font-size:.97rem; line-height:1.62; max-width:64ch; }
.legal-list li{ margin:6px 0; }
.legal-list li::marker{ color:var(--violet); }
.legal-meta{ color:var(--faint) !important; font-size:.86rem !important; margin-top:18px !important; }
@media (max-width:900px){ .app-masthead{ grid-template-columns:1fr; gap:36px; } .app-section{ grid-template-columns:1fr; gap:22px; } }
@media (max-width:520px){ .am-id{ flex-direction:column; align-items:flex-start; gap:18px; } .contact-list > div{ grid-template-columns:1fr; gap:4px; } }

/* =========================================================================
   Contact — dark aurora CTA
   ========================================================================= */
.cta{ position:relative; background:var(--ink-bg); color:#fff; overflow:hidden; border-radius:clamp(28px,4vw,44px); width:min(calc(100% - 2 * var(--gutter)), calc(var(--wrap) - 2 * var(--gutter))); margin:clamp(40px,6vh,72px) auto; }
.cta-in{ position:relative; z-index:1; max-width:var(--wrap); margin:0 auto; padding:clamp(64px,9vw,120px) clamp(28px,5vw,80px); text-align:center; }
.cta::before{ content:""; position:absolute; z-index:0; inset:-30% -10% auto -10%; height:140%;
  background:
    radial-gradient(closest-side, rgba(110,91,246,.55), transparent 70%) 22% 10%/55% 80% no-repeat,
    radial-gradient(closest-side, rgba(61,107,255,.5), transparent 70%) 80% 30%/55% 80% no-repeat,
    radial-gradient(closest-side, rgba(197,107,255,.42), transparent 72%) 55% 90%/60% 80% no-repeat;
  filter:blur(20px); pointer-events:none; animation: ctaDrift 24s var(--ease) infinite alternate; }
@keyframes ctaDrift{ to{ transform:translate3d(2%,1%,0) scale(1.08); } }
@media (prefers-reduced-motion: reduce){ .cta::before{ animation:none; } }
.cta h2{ color:#fff; margin:0 auto; max-width:18ch; }
.cta p{ margin:22px auto 0; max-width:46ch; color:rgba(255,255,255,.7); font-size:clamp(1.08rem,1.4vw,1.3rem); }
.cta .btn--primary{ background:#fff; color:#0B0B12; margin-top:38px; box-shadow:0 18px 50px -16px rgba(0,0,0,.6); }
.cta .btn--primary:hover{ transform:translateY(-2px); }

/* =========================================================================
   Footer
   ========================================================================= */
.foot{ padding: clamp(48px,7vh,80px) 0 40px; border-top:1px solid var(--line); }
.foot-grid{ display:grid; grid-template-columns:1.7fr repeat(3,1fr); gap:clamp(24px,4vw,52px); }
.foot .brand{ font-size:1.4rem; }
.foot-lockup p{ color:var(--muted); font-size:.96rem; max-width:32ch; margin:16px 0 0; line-height:1.55; }
.foot-col h2{ font-size:.74rem; font-weight:650; letter-spacing:.13em; text-transform:uppercase; color:var(--faint); margin:0 0 16px; }
.foot-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
.foot-col a{ font-size:.96rem; color:var(--ink-soft); transition:color .2s var(--ease); }
.foot-col a:hover{ color:var(--ink); }
.foot-base{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px; margin-top:clamp(44px,6vh,72px); padding-top:24px; border-top:1px solid var(--line); }
.foot-base span{ font-size:.84rem; color:var(--faint); }
.foot-end{ display:inline-flex; align-items:center; gap:16px; }
.theme-switch{ display:inline-flex; align-items:center; background:none; border:0; padding:0; cursor:pointer; }
.theme-switch .ts-track{ width:42px; height:24px; border-radius:100px; background:var(--line-2); position:relative; transition:background .3s var(--ease); }
.theme-switch .ts-thumb{ position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.4); transition:transform .35s var(--ease); }
html[data-theme="dark"] .theme-switch .ts-track{ background:var(--grad); }
html[data-theme="dark"] .theme-switch .ts-thumb{ transform:translateX(18px); }
.theme-switch:focus-visible{ outline:2px solid var(--indigo); outline-offset:3px; border-radius:100px; }
.site-foot--slim{ padding-top:clamp(28px,4vh,40px); }
.site-foot--slim .foot-base{ margin-top:0; }
@media (max-width:780px){ .foot-grid{ grid-template-columns:1fr 1fr; } .foot-lockup{ grid-column:1/-1; } }

/* =========================================================================
   Privacy policy embed
   ========================================================================= */
/* Termly's hosted policy renders in a cross-origin iframe we can't restyle, so we
   frame it as a deliberate light "document" surface that stays light in BOTH themes
   — a sheet on the page — rather than a jarring white block for dark-mode readers. */
.policy-doc{ background:#fff; border:1px solid #E1E2EA; border-radius:var(--r); padding:clamp(6px,1vw,12px); box-shadow:0 30px 70px -36px rgba(20,20,50,.5); overflow:hidden; }
.policy-doc iframe{ display:block; width:100%; height:80vh; min-height:640px; border:0; border-radius:calc(var(--r) - 8px); background:#fff; }

/* =========================================================================
   Reveals
   ========================================================================= */
@media (prefers-reduced-motion: no-preference){
  html.js [data-rv]{ opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease), transform .8s var(--ease); transition-delay:calc(var(--d,0)*80ms); }
  html.js [data-rv].in{ opacity:1; transform:none; }
}

/* =========================================================================
   Print
   ========================================================================= */
@media print{
  .cta, .cta *{ background:transparent !important; color:var(--ink) !important; }
  .btn{ background:transparent !important; border-color:var(--ink) !important; color:var(--ink) !important; }
  html.js [data-rv]{ opacity:1 !important; transform:none !important; }
  .hero::before, .page-head::before, .cta::before{ display:none !important; }
}