/* ============================================================
   Vateri marketing site v3
   Paper ground, one flat violet accent, Sora + IBM Plex Mono
   for labels. Motion is entrance and interaction, never a pin.
   ============================================================ */

/* Self-hosted faces, the same files the plan app uses. No Google Fonts. */
@font-face{
  font-family:'Sora'; font-style:normal; font-weight:100 800;
  font-display:swap; src:url('/fonts/sora-latin-var.woff2') format('woff2');
}
@font-face{
  font-family:'IBM Plex Mono'; font-style:normal; font-weight:400;
  font-display:swap; src:url('/fonts/ibm-plex-mono-latin-400.woff2') format('woff2');
}
@font-face{
  font-family:'IBM Plex Mono'; font-style:normal; font-weight:500;
  font-display:swap; src:url('/fonts/ibm-plex-mono-latin-500.woff2') format('woff2');
}

:root{
  --paper:#F2F0FA; --paper-2:#EAE7F4; --card:#FFFFFF;
  --ink:#17142A; --ink-soft:#5B5570; --ink-faint:#8B85A0;
  --dark:#0D0C16; --dark-2:#16131F;
  --vio:#6F5BD0; --vio-ink:#FFFFFF; --vio-soft:#C4B0FF;
  --hair:rgba(23,20,42,.10); --hair-strong:rgba(23,20,42,.18);
  --hair-d:rgba(196,176,255,.16);
  --ok:#20714B; --ok-bg:#E9F6EF; --warn:#8A6D1F; --alert:#B23B2E;
  --sans:'Sora',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --t-xs:clamp(.72rem,.7rem + .1vw,.78rem);
  --t-sm:clamp(.85rem,.82rem + .15vw,.95rem);
  --t-base:clamp(1rem,.96rem + .2vw,1.1rem);
  --t-lg:clamp(1.2rem,1.1rem + .5vw,1.5rem);
  --t-xl:clamp(1.55rem,1.3rem + 1.2vw,2.2rem);
  --t-2xl:clamp(2rem,1.55rem + 2.2vw,3.2rem);
  --t-3xl:clamp(2.6rem,1.8rem + 3.8vw,4.6rem);
  --sect:clamp(4.5rem,9vw,10rem);
  --gut:clamp(1.25rem,5vw,5rem);
  --maxw:76rem;
  --e1:0 1px 2px rgba(23,14,60,.06),0 2px 6px -1px rgba(23,14,60,.05);
  --e2:0 2px 4px rgba(23,14,60,.06),0 10px 24px -6px rgba(23,14,60,.10);
  --e3:0 4px 10px rgba(23,14,60,.07),0 22px 55px -12px rgba(23,14,60,.16);
  --edge:inset 0 1px 0 rgba(255,255,255,.7);
  --ease:cubic-bezier(.23,1,.32,1);
}
*,*::before,*::after{ box-sizing:border-box }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100% }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto } }
body{ margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:var(--t-base); line-height:1.62;
  letter-spacing:-.005em; -webkit-font-smoothing:antialiased; overflow-x:clip; }
img,svg,video{ display:block; max-width:100% }
::selection{ background:#E4DDFA }
a{ color:var(--vio); text-underline-offset:3px }
:focus-visible{ outline:2px solid var(--vio); outline-offset:3px; border-radius:4px }
.mono{ font-family:var(--mono); letter-spacing:.14em; font-size:var(--t-xs) }
.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut) }
[id]{ scroll-margin-top:80px }
.sys-grid > *,.sig-grid > *,.walk > *,.prob-grid > *{ min-width:0 }
h1,h2,h3{ text-wrap:balance; margin:0 }
p{ text-wrap:pretty }

/* ---------------- reveal on entry (once) ---------------- */
.rv{ opacity:0; transform:translateY(14px);
  transition:opacity .62s var(--ease),transform .62s var(--ease) }
.rv.in{ opacity:1; transform:none }
@media (prefers-reduced-motion:reduce){ .rv{ opacity:1; transform:none; transition:none } }

/* ---------------- intro overlay ----------------
   Paper ground, like the page beneath it. The V forms in the middle, the name
   appears, then the wedge glides up to its seat in the nav while the overlay
   turns transparent and the hero assembles under it. */
.intro{ position:fixed; inset:0; z-index:200; background:#B9A7F3;
  display:grid; place-items:center; transition:background .6s ease; }
.intro.clear{ background:transparent; pointer-events:none }
.intro.gone{ display:none }
.intro .iwrap{ position:relative; width:220px; height:280px; }
.intro .ip{ position:absolute; width:7px; height:7px; border-radius:2px;
  background:#5A47B8; left:0; top:0; will-change:transform,opacity; opacity:0; }
.intro svg.iv{ position:absolute; left:50%; top:0; transform:translateX(-50%);
  width:200px; height:200px; will-change:transform; }
.intro .iwedge{ opacity:0; clip-path:inset(0 0 100% 0); }
.intro .iword{ position:absolute; left:50%; transform:translateX(-50%); top:216px;
  display:flex; gap:.22em; color:var(--ink); font-weight:800; font-size:17px; }
.intro .iword span{ opacity:0; transform:translateY(8px); display:inline-block; }
.intro .iskip{ position:absolute; bottom:2rem; left:50%; transform:translateX(-50%);
  font-family:var(--mono); font-size:10px; letter-spacing:.22em; color:rgba(23,20,42,.55);
  background:none; border:0; cursor:pointer; padding:8px; }
.intro .iskip:hover{ color:var(--ink) }

/* The nav's own mark stays hidden while the intro's wedge is on its way to the
   same spot, so only one V is ever on screen. The script adds and removes the
   class; without the script the mark is simply visible. */
.logo svg{ transition:opacity .2s ease }
.nav.await-mark .logo svg{ opacity:0 }

/* ---------------- nav ---------------- */
.nav{ position:fixed; top:0; left:0; right:0; z-index:100;
  background:color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter:blur(12px); border-bottom:1px solid transparent;
  transition:border-color .25s ease, background .25s ease; }
.nav.scrolled{ border-color:var(--hair) }
.nav-in{ max-width:var(--maxw); margin-inline:auto; padding:0 var(--gut);
  height:64px; display:flex; align-items:center; gap:26px; }
.logo{ display:flex; align-items:center; gap:10px; color:var(--ink);
  text-decoration:none; font-weight:800; letter-spacing:.22em; font-size:13px; }
.nav-links{ display:flex; gap:22px; margin-left:auto; }
.nav-links a{ color:var(--ink-soft); text-decoration:none; font-size:14px;
  transition:color .15s ease; }
.nav-links a:hover{ color:var(--ink) }
.nav-login{ color:var(--ink-soft); text-decoration:none; font-size:14px;
  font-weight:600; padding:8px 4px; transition:color .15s ease; }
.nav-login:hover{ color:var(--ink) }
.btn{ display:inline-flex; align-items:center; justify-content:center;
  font:inherit; font-size:14px; font-weight:600; text-decoration:none;
  border-radius:10px; padding:10px 18px; cursor:pointer; border:0;
  transition:transform .12s ease, box-shadow .2s ease, opacity .15s ease; }
.btn:active{ transform:scale(.97) }
.btn-primary{ background:var(--vio); color:var(--vio-ink); box-shadow:var(--e1); }
.btn-primary:hover{ box-shadow:var(--e2); opacity:.95 }
.btn-quiet{ background:transparent; color:var(--ink-soft); border:1px solid var(--hair-strong); }
.btn-quiet:hover{ color:var(--vio); border-color:var(--vio) }
@media (max-width:820px){ .nav-links{ display:none } .nav-login{ margin-left:auto } }

/* ---------------- hero ---------------- */
.hero{ padding:calc(64px + clamp(4rem,10vh,7rem)) 0 clamp(3rem,7vh,5rem); }
.hero h1{ font-size:var(--t-3xl); font-weight:600; line-height:1.04;
  letter-spacing:-.03em; max-width:16ch; }
.hero h1 em{ font-style:normal; color:var(--vio) }
.hero .sub{ font-size:var(--t-lg); font-weight:300; color:var(--ink-soft);
  max-width:42ch; margin:1.6rem 0 0 }
.hero .ctas{ display:flex; gap:12px; margin-top:2.4rem; flex-wrap:wrap }
.hero .note{ margin-top:2.2rem; color:var(--ink-faint); font-size:var(--t-sm) }
.h1-line{ display:block; overflow:hidden }
.h1-line > span{ display:inline-block; transform:translateY(110%);
  transition:transform .8s var(--ease); }
.hero.play .h1-line > span{ transform:none }
.hero .sub,.hero .ctas,.hero .note{ opacity:0; transform:translateY(12px);
  transition:opacity .7s var(--ease),transform .7s var(--ease); }
.hero.play .sub{ opacity:1; transform:none; transition-delay:.25s }
.hero.play .ctas{ opacity:1; transform:none; transition-delay:.38s }
.hero.play .note{ opacity:1; transform:none; transition-delay:.5s }
@media (prefers-reduced-motion:reduce){
  .h1-line > span{ transform:none }
  .hero .sub,.hero .ctas,.hero .note{ opacity:1; transform:none }
}

/* ---------------- section scaffolding ---------------- */
.sect{ padding-block:var(--sect) }
.sect.on-dark{ background:var(--dark); color:#F2F0FA }
.kicker{ font-family:var(--mono); font-size:11px; letter-spacing:.22em;
  color:var(--vio); margin:0 0 1.1rem }
.on-dark .kicker{ color:var(--vio-soft) }
.sect h2{ font-size:var(--t-2xl); font-weight:600; line-height:1.12;
  letter-spacing:-.02em; max-width:24ch; }
.sect .lead{ font-size:var(--t-lg); font-weight:300; color:var(--ink-soft);
  max-width:46ch; margin:1.3rem 0 0 }
.on-dark .lead{ color:#A7A2BE }

/* ---------------- problem ---------------- */
.prob-grid{ display:grid; grid-template-columns:minmax(30ch,42ch) minmax(0,1fr);
  gap:clamp(2.5rem,6vw,6rem); align-items:center; margin-top:3.2rem; }
@media (max-width:960px){ .prob-grid{ grid-template-columns:1fr } }
.prob-list{ display:flex; flex-direction:column; gap:2rem; }
.prob-item h3{ font-size:var(--t-lg); font-weight:600; line-height:1.25 }
.prob-item p{ color:var(--ink-soft); font-weight:300; margin:.5rem 0 0; max-width:40ch }
.prob-pivot{ margin-top:2.6rem; font-size:var(--t-xl); font-weight:600;
  line-height:1.2; letter-spacing:-.02em; max-width:24ch }
.prob-pivot em{ font-style:normal; color:var(--vio) }
/* the stack diagram */
.stackfig{ position:relative; margin:0 }
.stack-svg{ width:100%; height:auto }
.tile{ fill:var(--card); stroke:var(--hair-strong) }
.tile-label{ font-family:var(--mono); font-size:10.5px; letter-spacing:.12em;
  fill:var(--ink-soft) }
.tile-sub{ font-family:var(--mono); font-size:8.5px; letter-spacing:.08em; fill:var(--ink-faint) }
.link-line{ stroke:var(--vio); stroke-width:1.6; stroke-dasharray:5 5; fill:none;
  stroke-dashoffset:240; opacity:.65 }
.link-x{ stroke:var(--alert); stroke-width:2; opacity:0; }
.stackfig.play .link-line{ animation:drawlink 1.1s var(--ease) forwards }
.stackfig.play .link-line.l2{ animation-delay:.25s }
.stackfig.play .link-line.l3{ animation-delay:.5s }
.stackfig.play .link-x{ animation:snapx .3s ease forwards }
.stackfig.play .x1{ animation-delay:1.15s } .stackfig.play .x2{ animation-delay:1.35s }
.stackfig.play .x3{ animation-delay:1.55s }
@keyframes drawlink{ to{ stroke-dashoffset:0 } }
@keyframes snapx{ to{ opacity:1 } }
.stackfig figcaption{ font-family:var(--mono); font-size:11px; letter-spacing:.06em;
  color:var(--ink-faint); margin-top:.9rem }
@media (prefers-reduced-motion:reduce){
  .link-line{ stroke-dashoffset:0 } .link-x{ opacity:1 }
  .stackfig.play .link-line,.stackfig.play .link-x{ animation:none }
}

/* ---------------- system / modules ---------------- */
.sys-grid{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(26ch,34ch);
  gap:clamp(2.5rem,6vw,5rem); align-items:start; margin-top:3.2rem; }
@media (max-width:960px){ .sys-grid{ grid-template-columns:1fr }
  .sys-grid > aside{ order:-1 } }
.modules{ border-top:1px solid var(--hair-d); }
.module{ display:grid; grid-template-columns:14rem 1fr; gap:1.4rem;
  padding:1.05rem 0; border-bottom:1px solid var(--hair-d); }
@media (max-width:640px){ .module{ grid-template-columns:1fr; gap:.2rem } }
.module b{ font-weight:600; font-size:var(--t-base) }
.module span{ color:#A7A2BE; font-weight:300; font-size:var(--t-sm) }
.module.hot b{ color:var(--vio-soft) }

/* ---------------- panels (shared) ---------------- */
.panel{ background:var(--card); border:1px solid var(--hair); border-radius:14px;
  box-shadow:var(--e2), var(--edge); overflow:hidden; }
.on-dark .panel{ background:var(--dark-2); border-color:var(--hair-d);
  box-shadow:var(--e3); }
.pbar{ display:flex; align-items:center; gap:10px; padding:11px 16px;
  border-bottom:1px solid var(--hair); }
.on-dark .pbar{ border-color:var(--hair-d) }
.pbar .pt{ font-family:var(--mono); font-size:10.5px; letter-spacing:.16em;
  color:var(--ink-soft); }
.on-dark .pbar .pt{ color:#A7A2BE }
.figcap{ font-family:var(--mono); font-size:11px; letter-spacing:.06em;
  color:var(--ink-faint); margin-top:.9rem }
.on-dark .figcap{ color:#6E6886 }
.chips{ display:flex; gap:6px; flex-wrap:wrap; padding:12px 16px 0 }
.fchip{ font-family:var(--mono); font-size:10.5px; letter-spacing:.05em;
  border:1px solid var(--hair-strong); background:transparent; color:var(--ink-soft);
  border-radius:999px; padding:5px 12px; cursor:pointer;
  transition:border-color .15s ease,color .15s ease,background .15s ease; }
.fchip:hover{ border-color:var(--vio); color:var(--vio) }
.fchip[aria-pressed="true"]{ background:var(--vio); border-color:var(--vio); color:#fff }
.fchip:active{ transform:translateY(1px) }

/* board */
.board{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; padding:14px 16px 16px }
@media (max-width:640px){
  .board{ grid-template-columns:repeat(3,minmax(150px,1fr)); overflow-x:auto;
    scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch }
  .bcol{ scroll-snap-align:start }
}
.bcol .bh{ font-family:var(--mono); font-size:9.5px; letter-spacing:.14em;
  color:var(--ink-faint); padding:2px 2px 8px; display:flex; justify-content:space-between }
.bcard{ background:var(--paper); border:1px solid var(--hair); border-radius:9px;
  padding:9px 11px; margin-bottom:8px; }
.bcard .bn{ font-size:12.5px; font-weight:600 }
.bcard .bs{ font-size:11px; color:var(--ink-soft); margin-top:1px }
.bcard .bt{ display:inline-block; font-family:var(--mono); font-size:9px;
  letter-spacing:.06em; margin-top:7px; color:var(--vio);
  border:1px solid rgba(111,91,208,.3); border-radius:999px; padding:2px 8px; }

/* ---------------- portal walkthrough ---------------- */
.walk{ display:grid; grid-template-columns:minmax(26ch,34ch) minmax(0,1fr);
  gap:clamp(2rem,5vw,4.5rem); margin-top:3.2rem; align-items:start; }
@media (max-width:960px){ .walk{ grid-template-columns:1fr } }
.steps{ display:flex; flex-direction:column; }
.step{ text-align:left; background:none; border:0; border-left:2px solid var(--hair-d);
  padding:1rem 0 1rem 1.3rem; cursor:pointer; color:inherit; font:inherit;
  transition:border-color .2s ease; }
.step b{ display:block; font-weight:600; font-size:var(--t-base); color:#CFCADF;
  transition:color .2s ease; }
.step span{ display:block; color:#7E7896; font-weight:300; font-size:var(--t-sm);
  margin-top:.25rem; max-width:30ch; transition:color .2s ease; }
.step[aria-current="true"]{ border-color:var(--vio-soft) }
.step[aria-current="true"] b{ color:#F2F0FA }
.step[aria-current="true"] span{ color:#A7A2BE }
.step:hover b{ color:#F2F0FA }
.walk-note{ margin-top:1.4rem; font-size:var(--t-sm); color:#A7A2BE; font-weight:300; max-width:32ch }
.walk-note b{ color:#F2F0FA; font-weight:600 }
/* portal frame */
.portal{ border-radius:14px; overflow:hidden; border:1px solid var(--hair-d);
  box-shadow:var(--e3); background:var(--card); color:var(--ink); }
.portal-top{ background:#211D33; color:#F2F0FA; padding:13px 20px;
  display:flex; align-items:center; gap:12px; }
.portal-top .pm{ width:26px; height:26px; border-radius:7px; background:var(--vio);
  display:grid; place-items:center; font-weight:700; font-size:13px; color:#fff }
.portal-top .pn{ font-weight:600; font-size:13.5px }
.portal-top .pu{ margin-left:auto; font-family:var(--mono); font-size:9px;
  letter-spacing:.1em; color:#9E96C8 }
.portal-body{ padding:20px; background:#F4F2FA; min-height:340px; position:relative }
.pv{ opacity:0; transform:translateY(10px);
  transition:opacity .45s var(--ease),transform .45s var(--ease);
  position:absolute; inset:20px; pointer-events:none; visibility:hidden; }
.pv.on{ opacity:1; transform:none; position:static; inset:auto;
  pointer-events:auto; visibility:visible; }
@media (prefers-reduced-motion:reduce){ .pv{ transition:none } }
.stage-row{ display:flex; gap:6px; margin:12px 0 4px }
.stage-seg{ height:6px; border-radius:3px; background:#E2DEEF; flex:1; overflow:hidden; position:relative }
.stage-seg i{ position:absolute; inset:0; background:var(--vio); border-radius:3px;
  transform:scaleX(0); transform-origin:left; transition:transform .7s var(--ease) }
.pv.on .stage-seg.f i{ transform:none }
.stage-labels{ display:flex; justify-content:space-between; font-family:var(--mono);
  font-size:8.5px; letter-spacing:.08em; color:var(--ink-faint); margin-bottom:14px }
.pcard{ background:#fff; border:1px solid #E7E2F5; border-radius:11px;
  padding:13px 16px; margin-bottom:10px; display:flex; gap:13px; align-items:center; }
.pava{ width:34px; height:34px; border-radius:50%; background:#EDE8FB; color:var(--vio);
  display:grid; place-items:center; font-size:11px; font-weight:600; flex:none }
.pcard .pn2{ font-weight:600; font-size:13px }
.pcard .ps{ font-size:11.5px; color:var(--ink-soft); margin-top:1px }
.pcard .pa{ font-size:11.5px; color:var(--ink-soft); margin-top:5px; line-height:1.5 }
.pcard .pa b{ color:var(--ink); font-weight:600 }
.ptag{ font-family:var(--mono); font-size:9px; letter-spacing:.08em; padding:4px 9px;
  border-radius:6px; flex:none; border:0 }
.ptag.cv{ border:1px solid var(--hair-strong); color:var(--ink-soft); background:none; cursor:pointer }
.ptag.ok{ background:var(--ok-bg); color:var(--ok) }
.pbtn{ font:inherit; font-size:12px; font-weight:600; border:0; border-radius:8px;
  padding:8px 13px; cursor:pointer; flex:none; transition:opacity .15s ease, transform .12s ease }
.pbtn:active{ transform:scale(.97) }
.pbtn.req{ background:var(--vio); color:#fff }
.pbtn.req:hover{ opacity:.92 }
.pbtn.pass{ background:#EFEBFA; color:#6B5FA8 }
/* the email */
.mail{ background:#fff; border:1px solid #E7E2F5; border-radius:11px; overflow:hidden;
  max-width:480px; margin-inline:auto; box-shadow:var(--e2); }
.mail .mh{ padding:12px 18px; border-bottom:1px solid #EFEBF8;
  font-family:var(--mono); font-size:10px; letter-spacing:.06em; color:var(--ink-soft);
  line-height:1.8 }
.mail .mh b{ color:var(--ink); font-weight:500 }
.mail .mb{ padding:16px 18px; font-size:13px; line-height:1.65; color:var(--ink-soft) }
.mail .mb b{ color:var(--ink) }
.times{ display:flex; gap:8px; flex-wrap:wrap; margin:12px 0 4px }
.time{ font:inherit; font-size:12px; font-weight:600; border:1px solid rgba(111,91,208,.35);
  color:var(--vio); background:#F7F5FD; border-radius:8px; padding:7px 12px; cursor:pointer;
  transition:background .15s ease,color .15s ease }
.time:hover,.time.picked{ background:var(--vio); color:#fff }
.sentline{ display:flex; align-items:center; gap:8px; justify-content:center;
  margin-top:14px; font-family:var(--mono); font-size:10px; letter-spacing:.1em;
  color:var(--ok); }
.sentline i{ width:7px; height:7px; border-radius:50%; background:var(--ok) }

/* ---------------- signals ---------------- */
.sig-grid{ display:grid; grid-template-columns:minmax(30ch,38ch) minmax(0,1fr);
  gap:clamp(2.5rem,6vw,5rem); align-items:start; margin-top:3.2rem; }
@media (max-width:960px){ .sig-grid{ grid-template-columns:1fr } }
.sig{ padding:6px 16px 16px }
.sigrow{ display:flex; gap:12px; padding:11px 2px; border-bottom:1px solid var(--hair);
  align-items:flex-start }
.sigrow:last-child{ border-bottom:0 }
.sigrow .si{ width:8px; height:8px; border-radius:50%; margin-top:6px; flex:none }
.sigrow .sn{ font-size:12.5px; font-weight:600 }
.sigrow .sd{ font-size:12px; color:var(--ink-soft); margin-top:2px; line-height:1.5 }
.sigrow .when{ margin-left:auto; font-family:var(--mono); font-size:9.5px;
  letter-spacing:.08em; color:var(--ink-faint); flex:none }
.sigact{ margin:4px 16px 16px; border:1px solid rgba(111,91,208,.25);
  background:#F5F2FC; border-radius:11px; padding:13px 15px; font-size:12.5px;
  line-height:1.6; display:none; }
.sigact.show{ display:block; animation:rise .35s var(--ease) }
@keyframes rise{ from{ opacity:0; transform:translateY(8px) } }
.sigact .ah{ font-family:var(--mono); font-size:9.5px; letter-spacing:.14em;
  color:var(--vio); margin-bottom:7px }
.factline{ margin-top:2.4rem; font-size:var(--t-base); max-width:40ch }
.factsrc{ font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--ink-faint); margin-top:.5rem }

/* ---------------- close + footer ---------------- */
.close-s h2{ max-width:20ch }
.close-s .ctas{ display:flex; gap:12px; margin-top:2.2rem; flex-wrap:wrap }
footer{ background:var(--dark); color:#A7A2BE }
.foot-in{ max-width:var(--maxw); margin-inline:auto; padding:2.6rem var(--gut);
  display:flex; gap:26px; flex-wrap:wrap; align-items:center;
  font-family:var(--mono); font-size:11px; letter-spacing:.08em }
.foot-in a{ color:#A7A2BE; text-decoration:none }
.foot-in a:hover{ color:var(--vio-soft) }
.foot-in .flogo{ display:flex; gap:9px; align-items:center; color:#F2F0FA;
  font-weight:800; letter-spacing:.22em; font-size:11px; font-family:var(--sans) }
.foot-in .spacer{ flex:1 }
/* The trading disclosure the law asks every company website to carry, on a
   line of its own beneath the rest. */
.foot-in .foot-legal{ flex-basis:100%; line-height:1.7 }
/* Each audience's way in, on a row of its own: clients, investors and the
   team, each of which lives at its own address on the live site. */
.foot-in .foot-signin{ flex-basis:100%; display:flex; gap:26px; flex-wrap:wrap; align-items:center }
.foot-in .foot-label{ color:#F2F0FA }

/* ---------------- ambient gradient field (canvas) ---------------- */
.ambient{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.intro .ambient{ opacity:0; transition:opacity .6s ease }
.intro.lit .ambient{ opacity:1 }
.intro.clear .ambient,.intro.clear .grain,
.intro.clear .iword,.intro.clear .iskip{ opacity:0 }
.intro .grain,.intro .iword,.intro .iskip{ transition:opacity .45s ease }
.sect-amb{ position:relative; overflow:clip }
.sect-amb > .ambient{ opacity:.16 }
.sect-amb > .wrap{ position:relative; z-index:2 }
.intro .iwrap,.intro .iskip{ z-index:2 }
.intro .grain,.grain{ position:absolute; inset:0; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E"); }

/* ---------------- hero gradient columns ---------------- */
.hero{ position:relative; overflow:clip }
.hero .wrap{ position:relative; z-index:2 }
.hcols{ position:absolute; inset:0; display:flex; z-index:1; pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,#000 55%,transparent 96%);
  mask-image:linear-gradient(180deg,#000 55%,transparent 96%); }
.hcol{ flex:1; transform:translateY(-14%);
  transition:transform 1.1s var(--ease); }
.hcol:nth-child(1){ background:linear-gradient(180deg,#EDE9FA,#F2F0FA 70%) }
.hcol:nth-child(2){ background:linear-gradient(180deg,#F2F0FA,#E9E3F8 85%); transform:translateY(12%) }
.hcol:nth-child(3){ background:linear-gradient(180deg,#E4DCF7,#F2F0FA 60%) }
.hcol:nth-child(4){ background:linear-gradient(180deg,#F2EFFA,#E6E0F8 90%); transform:translateY(-9%) }
.hcol:nth-child(5){ background:linear-gradient(180deg,#EAE4F9,#F2F0FA 75%); transform:translateY(10%) }
.hcol:nth-child(6){ background:linear-gradient(180deg,#F5F3FB,#EBE6F9 80%) }
.hero.play .hcol{ transform:none }
@media (prefers-reduced-motion:no-preference){
  .hero.play .hcol{ animation:colDrift 14s ease-in-out infinite alternate }
  .hero.play .hcol:nth-child(2n){ animation-duration:17s; animation-delay:-6s }
  .hero.play .hcol:nth-child(3n){ animation-duration:21s; animation-delay:-11s }
}
@keyframes colDrift{ from{ transform:translateY(-0.6%) } to{ transform:translateY(0.6%) } }
@media (prefers-reduced-motion:reduce){ .hcol{ transform:none !important } }

/* forced-light panel inside dark sections */
.on-dark .panel.panel-light{ background:var(--card); border-color:rgba(255,255,255,.12);
  box-shadow:var(--e3); color:var(--ink); }
.on-dark .panel.panel-light .pbar{ border-color:var(--hair) }
.on-dark .panel.panel-light .pbar .pt{ color:var(--ink-soft) }
/* bent CRM tile */
.tile-bent{ transform:rotate(-4deg); transform-origin:center; transform-box:fill-box }

/* ---------------- ask bar (self-typing search) ---------------- */
.askbar{ display:flex; align-items:center; gap:10px; padding:13px 16px;
  border-bottom:1px solid var(--hair); }
.askbar svg{ width:15px; height:15px; stroke:var(--ink-faint); fill:none;
  stroke-width:2; flex:none }
.askbar .q{ font-family:var(--mono); font-size:12px; letter-spacing:.04em;
  color:var(--ink-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.askbar .caret{ width:2px; height:14px; background:var(--vio); flex:none;
  animation:caret 1.05s steps(1) infinite }
@keyframes caret{ 50%{ opacity:0 } }
.sig .sigrow{ opacity:0 }
.sig.reveal .sigrow{ animation:rowin .5s var(--ease) both }
.sig.reveal .sigrow:nth-child(2){ animation-delay:.09s }
.sig.reveal .sigrow:nth-child(3){ animation-delay:.18s }
.sig.reveal .sigrow:nth-child(4){ animation-delay:.27s }
.sig.settled .sigrow{ opacity:1; animation:none }
@keyframes rowin{ from{ opacity:0; transform:translateY(9px) } to{ opacity:1; transform:none } }
@media (prefers-reduced-motion:reduce){
  .sig .sigrow{ opacity:1 } .askbar .caret{ animation:none }
}

/* ---------------- self-drawing chart card ---------------- */
.chartcard{ margin-top:14px }
.chart-svg{ width:100%; height:auto; display:block; padding:6px 10px 2px }
.chart-grid{ stroke:var(--hair); stroke-width:1 }
.chart-area{ fill:rgba(111,91,208,.10) }
.chart-line{ stroke:var(--vio); stroke-width:2; fill:none;
  stroke-dasharray:420; stroke-dashoffset:420 }
.chart-dot{ fill:#fff; stroke:var(--vio); stroke-width:2;
  transform:scale(0); transform-origin:center; transform-box:fill-box }
.chart-lbl{ font-family:var(--mono); font-size:8.5px; letter-spacing:.08em;
  fill:var(--ink-faint) }
.chartcard.play .chart-line{ animation:chartdraw 1.3s var(--ease) forwards }
.chartcard.play .chart-area{ animation:rowin .8s ease .5s both }
.chartcard.play .chart-dot{ animation:dotin .35s cubic-bezier(.34,1.56,.64,1) forwards }
.chartcard.play .chart-dot:nth-of-type(1){ animation-delay:.25s }
.chartcard.play .chart-dot:nth-of-type(2){ animation-delay:.45s }
.chartcard.play .chart-dot:nth-of-type(3){ animation-delay:.65s }
.chartcard.play .chart-dot:nth-of-type(4){ animation-delay:.85s }
.chartcard.play .chart-dot:nth-of-type(5){ animation-delay:1.05s }
.chartcard.play .chart-dot:nth-of-type(6){ animation-delay:1.25s }
@keyframes chartdraw{ to{ stroke-dashoffset:0 } }
@keyframes dotin{ to{ transform:scale(1) } }
@media (prefers-reduced-motion:reduce){
  .chart-line{ stroke-dashoffset:0 } .chart-dot{ transform:scale(1) }
  .chartcard.play .chart-line,.chartcard.play .chart-dot,.chartcard.play .chart-area{ animation:none }
  .chart-area{ opacity:1 }
}