/* BrandPatrol marketing site — v5 design system.
   Plain static CSS, no build step. Fonts are self-hosted (Geist + Geist Mono,
   SIL OFL, /fonts) so no third party sees visitor IPs. Every class name used by
   the content pages is preserved; this file only changes how they look.
   Design intent: dark hero with an animated 3D vector scene bookending light, airy,
   evidence-first content sections. Motion is subtle and opt-out via
   prefers-reduced-motion. */

/* Geist (sans, variable 100–900) and Geist Mono. Latin covers en/de/es/pt;
   latin-ext adds the rest; Japanese falls through to the OS's best CJK face. */
@font-face{font-family:"Geist"; font-style:normal; font-weight:100 900; font-display:swap; src:url(/fonts/geist-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Geist"; font-style:normal; font-weight:100 900; font-display:swap; src:url(/fonts/geist-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Geist Mono"; font-style:normal; font-weight:100 900; font-display:swap; src:url(/fonts/geist-mono-latin.woff2) format("woff2")}

:root{
  --font-sans:"Geist",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic UI",Meiryo,sans-serif;
  --font-mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --bg:#f6f8fb; --panel:#ffffff; --line:#e3e8f0; --line-soft:#edf1f6;
  --text:#0b1730; --text-2:#33455c; --muted:#5f6d82;
  --accent:#1d54d1; --accent-2:#3b82f6; --accent-glow:#4f8dff; --accent-soft:#e8effd;
  --ink:#070f22; --ink-2:#0c1a36; --ink-3:#12244a;
  --trust:#0f9d58; --trust-soft:#e6f7ed;
  --r-sm:6px; --r-md:9px; --r-lg:12px; --r-xl:18px;
  --shadow-sm:0 1px 2px rgba(11,23,48,.04), 0 6px 20px -12px rgba(11,23,48,.16);
  --shadow-md:0 2px 4px rgba(11,23,48,.05), 0 18px 40px -18px rgba(11,23,48,.28);
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
html,body{margin:0;padding:0}
body{
  font-family:var(--font-sans);
  color:var(--text); background:var(--bg); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
img,svg,video{max-width:100%}
.wrap{max-width:1120px; margin:0 auto; padding:0 24px}
:focus-visible{outline:2px solid var(--accent-glow); outline-offset:3px; border-radius:4px}

/* ================= Header (dark glass, sticky) ================= */
header.site{
  position:sticky; top:0; z-index:50;
  background:rgba(7,15,34,.92);
  -webkit-backdrop-filter:saturate(160%) blur(14px); backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
header.site .bar{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:13px 0; min-height:64px}
.brandmark{display:flex; align-items:center; gap:10px; font-weight:800; font-size:17px; color:#fff; letter-spacing:-.2px}
.brandmark:hover{text-decoration:none}
.brandmark img{height:40px; width:auto; display:block}
.brandmark .mark{
  width:34px; height:34px; border-radius:10px; color:#fff; font-size:15px; font-weight:800; letter-spacing:-.5px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--accent) 0%,#1741a8 100%);
  box-shadow:0 0 0 1px rgba(255,255,255,.08) inset, 0 6px 18px -8px rgba(79,141,255,.9);
}
.brandmark .mark span{color:#bcd3ff}
nav.sitenav{display:flex; align-items:center; gap:4px}
nav.sitenav a{color:#c4cee0; font-size:14px; font-weight:500; padding:8px 12px; border-radius:8px; white-space:nowrap; transition:color .2s var(--ease), background .2s var(--ease)}
nav.sitenav a:hover{color:#fff; background:rgba(255,255,255,.06); text-decoration:none}
nav.sitenav a.active{color:#fff; background:rgba(79,141,255,.16); box-shadow:inset 0 0 0 1px rgba(79,141,255,.28)}
.navcta{display:flex; align-items:center; gap:10px; flex:none}
.navcta .btn{white-space:nowrap}
header.site .btn.ghost{background:transparent; color:#fff; border-color:rgba(255,255,255,.22)}
header.site .btn.ghost:hover{border-color:rgba(255,255,255,.5); background:rgba(255,255,255,.06)}
/* Grouped nav items (Product / Resources): hover + focus-within drive the
   visual state so this needs no JS to open on desktop or via keyboard Tab.
   The trigger is a real <button>, not a link, so a touch tap always just
   opens the panel -- there's no destination to accidentally navigate to,
   which sidesteps the classic "tap fires hover, first tap doesn't follow
   the link" trap entirely. .navpanel is the hoverable hit-area and sits
   flush at top:100% with zero margin; the visual "floating" gap lives in
   its own padding-top, inside the hit-area, so the mouse never has to
   cross a dead pixel row between the trigger and the panel to reach it.
   aria-expanded and Escape-to-close are the two things CSS cannot do on
   its own, so a small inline script (see each page's <header>) mirrors
   :hover/:focus-within into aria-expanded and closes on Escape via blur. */
.navgroup{position:relative}
.navtrigger{
  display:flex; align-items:center; gap:5px; color:#c4cee0; font-size:14px; font-weight:500; white-space:nowrap;
  padding:8px 12px; border-radius:8px; background:none; border:0; cursor:pointer; font-family:inherit;
  transition:color .2s var(--ease), background .2s var(--ease);
}
.navtrigger:hover,.navgroup:focus-within .navtrigger{color:#fff; background:rgba(255,255,255,.06)}
.navtrigger.active{color:#fff; background:rgba(79,141,255,.16); box-shadow:inset 0 0 0 1px rgba(79,141,255,.28)}
.navchevron{width:13px; height:13px; flex:none; transition:transform .2s var(--ease)}
.navgroup:hover .navchevron,.navgroup:focus-within .navchevron{transform:rotate(180deg)}
.navpanel{
  position:absolute; left:0; top:100%; padding-top:8px; min-width:190px; z-index:5;
  opacity:0; visibility:hidden; transform:translateY(-4px); pointer-events:none;
  transition:opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
}
.navgroup:hover .navpanel,.navgroup:focus-within .navpanel{opacity:1; visibility:visible; transform:none; pointer-events:auto}
/* Escape needs the panel to actually close while focus returns to the
   trigger button (not to document.body, which would drop the keyboard
   user's place in the page). Refocusing the trigger keeps :focus-within
   true, so a plain CSS rule can't tell "just closed via Escape" apart from
   "still open" -- this class is the one bit of state the script owns, and
   it only gets cleared on a genuinely new mouseenter or a focus that
   actually leaves the group, never by the script's own refocus call. */
.navgroup.js-closed .navpanel{opacity:0 !important; visibility:hidden !important; pointer-events:none !important}
.navpanel-inner{
  background:rgba(9,19,42,.97); border:1px solid rgba(255,255,255,.1); border-radius:14px; padding:8px;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.6); display:grid; gap:2px;
}
nav.sitenav .navpanel-inner a{display:block; color:#dbe3f2; font-weight:500; font-size:14px; padding:9px 12px; border-radius:9px; white-space:nowrap}
nav.sitenav .navpanel-inner a:hover,nav.sitenav .navpanel-inner a:focus-visible{background:rgba(255,255,255,.07); color:#fff; text-decoration:none}
nav.sitenav .navpanel-inner a.active{color:#fff; background:rgba(79,141,255,.18)}

/* CSS-only mobile menu */
.mobilenav{display:none; position:relative}
.mobilenav summary{list-style:none; cursor:pointer; width:42px; height:42px; border-radius:10px; border:1px solid rgba(255,255,255,.18); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; background:rgba(255,255,255,.04)}
.mobilenav summary::-webkit-details-marker{display:none}
.mobilenav summary span{display:block; width:18px; height:2px; background:#fff; border-radius:2px; transition:transform .25s var(--ease), opacity .2s}
.mobilenav[open] summary span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.mobilenav[open] summary span:nth-child(2){opacity:0}
.mobilenav[open] summary span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobilenav-panel{
  position:absolute; right:0; top:calc(100% + 10px); width:min(320px,calc(100vw - 32px));
  background:rgba(9,19,42,.96); border:1px solid rgba(255,255,255,.1); border-radius:14px; padding:10px;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.6); display:grid; gap:4px;
  animation:menuIn .22s var(--ease);
}
.mobilenav-panel a{display:block; color:#dbe3f2; font-weight:500; padding:11px 12px; border-radius:9px; font-size:15px}
.mobilenav-panel a:hover{background:rgba(255,255,255,.06); text-decoration:none}
.mobilenav-panel a.active{color:#fff; background:rgba(79,141,255,.18)}
.mobilenav-panel .btn{margin-top:4px; justify-content:center}
.mobilenav-panel .btn.ghost{color:#fff; border-color:rgba(255,255,255,.22); background:transparent}
.mobilenav-label{
  font-size:11px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:#7c8ba3;
  padding:14px 12px 4px; margin-top:4px; border-top:1px solid rgba(255,255,255,.08);
}
.mobilenav-panel > .mobilenav-label:first-child{border-top:0; margin-top:0; padding-top:0}
@keyframes menuIn{from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:none}}

/* ================= Buttons ================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  border-radius:var(--r-md); padding:10px 18px; font-size:14.5px; font-weight:600;
  border:1px solid transparent; cursor:pointer; position:relative; overflow:hidden;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), background .2s, border-color .2s, filter .2s;
}
.btn:hover{text-decoration:none; transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn.primary{background:linear-gradient(180deg,#2d64e6 0%,var(--accent) 100%); color:#fff; box-shadow:0 1px 0 rgba(255,255,255,.14) inset, 0 8px 22px -10px rgba(29,84,209,.8)}
.btn.primary::after{content:""; position:absolute; inset:0; background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%); transform:translateX(-120%); transition:transform .6s var(--ease)}
.btn.primary:hover::after{transform:translateX(120%)}
.btn.primary:hover{box-shadow:0 1px 0 rgba(255,255,255,.14) inset, 0 12px 28px -10px rgba(29,84,209,.9)}
.btn.ghost{background:#fff; color:var(--text); border-color:var(--line)}
.btn.ghost:hover{border-color:#b9c4d6; box-shadow:var(--shadow-sm)}
.btn.big{padding:14px 26px; font-size:15.5px; border-radius:11px}

/* ================= Hero (dark, cinematic) ================= */
.hero{
  position:relative; isolation:isolate; overflow:hidden; text-align:center; color:#fff;
  padding:96px 0 72px; background:var(--ink);
}
.hero .wrap{position:relative; z-index:2}

.eyebrow{
  display:inline-flex; align-items:center; gap:8px; color:#cfe0ff; font-size:12.5px; font-weight:700; letter-spacing:.3px;
  padding:7px 14px; border-radius:999px; margin-bottom:24px;
  background:rgba(79,141,255,.14); border:1px solid rgba(79,141,255,.35);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.eyebrow::before{content:""; width:7px; height:7px; border-radius:50%; background:#5eead4; box-shadow:0 0 0 0 rgba(94,234,212,.7); animation:ping 2.2s infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(94,234,212,.6)} 70%{box-shadow:0 0 0 9px rgba(94,234,212,0)} 100%{box-shadow:0 0 0 0 rgba(94,234,212,0)}}
.hero h1{font-size:52px; line-height:1.08; letter-spacing:-1.6px; font-weight:800; margin:0 0 22px; max-width:860px; margin-left:auto; margin-right:auto; text-wrap:balance}
.hero h1 .hl{background:linear-gradient(90deg,#8fb4ff 0%,#5eead4 100%); -webkit-background-clip:text; background-clip:text; color:transparent}
.hero p.lead{font-size:18.5px; color:#c9d4e8; max-width:680px; margin:0 auto 34px; line-height:1.65; text-wrap:pretty}
.hero .actions{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}
.hero .actions .btn.ghost{background:rgba(255,255,255,.06); color:#fff; border-color:rgba(255,255,255,.22); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px)}
.hero .actions .btn.ghost:hover{background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.4)}
.hero .fineprint{margin:18px 0 0; font-size:13px; color:#9fb0cc}

/* Stat strip — glass cards */
.statrow{display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:48px; padding-top:0; border-top:0}
.stat{
  flex:1 1 170px; max-width:200px;
  position:relative; text-align:center; padding:18px 12px 16px; border-radius:14px; overflow:hidden;
  background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  transition:transform .3s var(--ease), border-color .3s, background .3s;
}
.stat::before{content:""; position:absolute; inset:0; background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.12) 50%,transparent 60%); transform:translateX(-140%); transition:transform .9s var(--ease)}
.stat:hover{transform:translateY(-3px); border-color:rgba(79,141,255,.45); background:rgba(79,141,255,.1)}
.stat:hover::before{transform:translateX(140%)}
.stat b{display:block; font-size:24px; font-weight:800; letter-spacing:-.6px; color:#fff; line-height:1.15}
.stat span{display:block; font-size:12px; color:#a9b8d3; margin:6px auto 0; max-width:170px; line-height:1.4}

.trustbar{display:flex; align-items:center; justify-content:center; gap:10px 26px; flex-wrap:wrap; margin-top:34px; padding-top:26px; border-top:1px solid rgba(255,255,255,.1)}
.trustitem{display:flex; align-items:flex-start; gap:8px; font-size:13px; font-weight:600; color:#b9c6dd}
.trustitem svg{flex:none; width:17px; height:17px; color:#5eead4; margin-top:2px}

/* ================= Sections ================= */
section{padding:42px 0; position:relative}
section.alt{background:#fff; border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
section.alt::before{content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:radial-gradient(rgba(29,84,209,.12) 1px, transparent 1px); background-size:22px 22px;
  -webkit-mask-image:radial-gradient(60% 50% at 50% 0%, #000 0%, transparent 100%); mask-image:radial-gradient(60% 50% at 50% 0%, #000 0%, transparent 100%)}
section > .wrap{position:relative}
.sectionhead{max-width:680px; margin:0 auto 22px; text-align:center}
.sectionhead .kicker{display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:700; letter-spacing:.8px; text-transform:uppercase; color:var(--accent); margin-bottom:8px}
.sectionhead .kicker::before,.sectionhead .kicker::after{content:""; width:18px; height:1px; background:linear-gradient(90deg,transparent,var(--accent))}
.sectionhead .kicker::after{background:linear-gradient(90deg,var(--accent),transparent)}
.sectionhead h2{font-size:34px; letter-spacing:-.9px; line-height:1.15; margin:0 0 10px; text-wrap:balance}
.sectionhead p{color:var(--text-2); font-size:16px; margin:0; text-wrap:pretty}

/* ================= Cards / grids ================= */
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.grid4{display:grid; grid-template-columns:repeat(4,1fr); gap:20px}
.card{
  position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--r-xl); padding:22px;
  box-shadow:var(--shadow-sm); transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s;
}
.card::before{content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none; opacity:0; transition:opacity .35s;
  background:linear-gradient(135deg,rgba(29,84,209,.55),rgba(94,234,212,.45));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude}
.card:hover{transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:transparent}
.card:hover::before{opacity:1}
.card .icn{
  width:42px; height:42px; border-radius:12px; color:var(--accent); margin-bottom:18px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--accent-soft),#f3f7ff); box-shadow:inset 0 0 0 1px rgba(29,84,209,.12);
}
.card .icn svg{width:22px; height:22px}
.card h3{font-size:17px; margin:0 0 8px; letter-spacing:-.2px}
.card p{font-size:14.5px; color:var(--text-2); margin:0; line-height:1.65}

/* Spec tiles: the homepage's replacement for uniform icon-card grids.
   Dark glass panels with an oversized ghost index, a gradient hairline that
   lights on hover, and a cursor spotlight (fx.js sets --mx/--my). */
section.dark{background:var(--ink); color:#fff; border-top:1px solid rgba(255,255,255,.06)}
section.dark::before{content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size:48px 48px;
  -webkit-mask-image:radial-gradient(70% 70% at 50% 30%, #000 10%, transparent 100%); mask-image:radial-gradient(70% 70% at 50% 30%, #000 10%, transparent 100%)}
section.dark::after{content:""; position:absolute; left:0; right:0; top:0; height:1px; background:linear-gradient(90deg,transparent,rgba(79,141,255,.6),rgba(94,234,212,.5),transparent)}
section.dark .sectionhead h2{color:#fff}
section.dark .sectionhead p{color:#a9b8d3}
section.dark .sectionhead .kicker{color:#5eead4}
section.dark .sectionhead .kicker::before{background:linear-gradient(90deg,transparent,#5eead4)}
section.dark .sectionhead .kicker::after{background:linear-gradient(90deg,#5eead4,transparent)}
section.dark .callout{background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.1); color:#b9c6dd; box-shadow:none}
section.dark .callout b{color:#fff}
section.dark .callout a{color:#8fb4ff}
.tiles{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; max-width:1040px; margin:0 auto}
.tile{position:relative; overflow:hidden; isolation:isolate; padding:26px 24px 24px; border-radius:16px; border:1px solid rgba(255,255,255,.09);
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.025)); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  transition:transform .4s var(--ease), border-color .4s, box-shadow .4s var(--ease)}
.tile::before{content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none; opacity:0; transition:opacity .4s; z-index:1;
  background:linear-gradient(135deg,rgba(79,141,255,.9),rgba(94,234,212,.7) 60%,transparent);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude}
.tile::after{content:""; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .4s; z-index:0;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%), rgba(79,141,255,.22), transparent 60%)}
.tile:hover{transform:translateY(-4px); border-color:rgba(79,141,255,.35); box-shadow:0 30px 60px -30px rgba(29,84,209,.8), 0 0 0 1px rgba(79,141,255,.1)}
.tile:hover::before,.tile:hover::after{opacity:1}
.tile .tn{position:absolute; right:14px; top:2px; z-index:0; font:800 72px/1 var(--font-mono); letter-spacing:-3px; color:transparent;
  -webkit-text-stroke:1px rgba(143,180,255,.28); transition:color .5s, -webkit-text-stroke-color .5s, transform .5s var(--ease); pointer-events:none}
.tile:hover .tn{-webkit-text-stroke-color:rgba(94,234,212,.7); transform:translateY(-4px) scale(1.06)}
.tile h3{position:relative; z-index:2; font-size:17px; margin:34px 0 8px; letter-spacing:-.2px; color:#fff}
.tile h3::before{content:""; display:block; width:26px; height:2px; border-radius:2px; margin-bottom:14px; background:linear-gradient(90deg,#4f8dff,#5eead4)}
.tile p{position:relative; z-index:2; font-size:14.5px; color:#a9b8d3; margin:0; line-height:1.65}
.tile p a{color:#8fb4ff}
/* Light variant: same construction on a white section. */
section:not(.dark) .tile{border-color:var(--line); background:#fff; box-shadow:var(--shadow-sm); -webkit-backdrop-filter:none; backdrop-filter:none}
section:not(.dark) .tile:hover{border-color:transparent; box-shadow:var(--shadow-md), 0 0 0 1px rgba(29,84,209,.08)}
section:not(.dark) .tile::after{background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%), rgba(29,84,209,.09), transparent 60%)}
section:not(.dark) .tile .tn{-webkit-text-stroke-color:rgba(29,84,209,.22)}
section:not(.dark) .tile:hover .tn{-webkit-text-stroke-color:rgba(29,84,209,.6)}
section:not(.dark) .tile h3{color:var(--text)}
section:not(.dark) .tile p{color:var(--text-2)}
section:not(.dark) .tile p a{color:var(--accent)}

/* Numbered feature blocks */
.featureblock{display:grid; grid-template-columns:56px 1fr; gap:24px; padding:28px 0; border-bottom:1px solid var(--line)}
.featureblock:first-of-type{padding-top:0}
.featureblock:last-child{border-bottom:none}
.featureblock .fnum{width:44px; height:44px; border-radius:12px; font-size:14px; font-weight:800; display:flex; align-items:center; justify-content:center; color:#fff;
  background:linear-gradient(135deg,var(--accent),#1741a8); box-shadow:0 8px 20px -10px rgba(29,84,209,.7)}
.featureblock h3{font-size:22px; margin:0 0 10px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; letter-spacing:-.4px}
.featureblock .fdesc{font-size:15px; color:var(--text-2); line-height:1.7; margin:0 0 18px; max-width:680px}
.featureblock .outcomes{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:9px 22px; max-width:760px}
.featureblock .outcomes li{display:flex; gap:9px; align-items:flex-start; font-size:14px; color:var(--text-2)}
.featureblock .outcomes svg{flex:none; width:16px; height:16px; color:var(--trust); margin-top:3px}
.soon{display:inline-block; font-size:10.5px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:#8a5a00; background:#fff4d6; border:1px solid #f5dc9a; border-radius:999px; padding:3px 9px; vertical-align:middle}

/* Steps */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:0}
.step{position:relative; padding:0 26px}
.step:not(:first-child){border-left:1px solid var(--line)}
.step .num{
  font-size:13px; font-weight:800; color:#fff; width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; margin-bottom:18px;
  background:linear-gradient(135deg,var(--accent),#1741a8); box-shadow:0 0 0 6px var(--accent-soft);
}
.step h3{font-size:18px; margin:0 0 8px; letter-spacing:-.2px}
.step p{font-size:14.5px; color:var(--text-2); margin:0; line-height:1.65}

/* Checklists */
.evidence-list{display:grid; grid-template-columns:1fr 1fr; gap:10px 24px; max-width:820px; margin:0 auto; padding:0}
.evidence-list li{display:flex; gap:11px; align-items:flex-start; font-size:15px; color:var(--text-2); list-style:none; line-height:1.55}
.evidence-list svg{flex:none; width:20px; height:20px; color:var(--trust); margin-top:2px; padding:2px; border-radius:50%; background:var(--trust-soft)}
.evidence-list ul{margin:0; padding:0}

/* Personas */
.personas{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.persona{border:1px solid var(--line); border-radius:var(--r-xl); padding:20px; background:#fff; box-shadow:var(--shadow-sm); transition:transform .35s var(--ease), box-shadow .35s var(--ease)}
.persona:hover{transform:translateY(-3px); box-shadow:var(--shadow-md)}
.persona b{display:block; font-size:16px; margin-bottom:8px}
.persona span{font-size:14px; color:var(--text-2); line-height:1.65}

/* Pricing */
.pricing3{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:stretch}
.plan{position:relative; border:1px solid var(--line); border-radius:var(--r-xl); padding:24px; background:#fff; display:flex; flex-direction:column; box-shadow:var(--shadow-sm); transition:transform .35s var(--ease), box-shadow .35s var(--ease)}
.plan:hover{transform:translateY(-4px); box-shadow:var(--shadow-md)}
.plan.featured{border-color:transparent; background:linear-gradient(#fff,#fff) padding-box, linear-gradient(135deg,var(--accent),#5eead4) border-box; box-shadow:0 24px 50px -24px rgba(29,84,209,.45)}
.plan.featured::before{content:""; position:absolute; inset:-1px; border-radius:inherit; z-index:-1; background:linear-gradient(135deg,rgba(29,84,209,.35),rgba(94,234,212,.3)); filter:blur(18px); opacity:.6}
.plan .tag{font-size:11.5px; font-weight:700; color:var(--accent); text-transform:uppercase; letter-spacing:.6px; margin-bottom:12px}
.plan h3{font-size:20px; margin:0 0 6px; letter-spacing:-.3px}
.plan .price{font-size:38px; font-weight:800; letter-spacing:-1.2px; margin:6px 0 8px; line-height:1}
.plan .price small{font-size:14px; font-weight:500; color:var(--muted); letter-spacing:0}
.plan .desc{font-size:14px; color:var(--text-2); margin-bottom:20px; min-height:42px; line-height:1.6}
.plan ul{list-style:none; margin:0 0 24px; padding:0; flex:1}
.plan li{display:flex; gap:9px; align-items:flex-start; font-size:14px; color:var(--text-2); padding:7px 0; border-top:1px dashed var(--line-soft)}
.plan li:first-child{border-top:0}
.plan li svg{flex:none; width:15px; height:15px; color:var(--trust); margin-top:3px}
.plan .btn{width:100%}
.pricingnote{text-align:center; font-size:13.5px; color:var(--muted); margin-top:28px}

/* Sample case card with scan-line effect */
.samplecase{display:grid; grid-template-columns:220px 1fr; border:1px solid var(--line); border-radius:var(--r-xl); overflow:hidden; background:#fff; max-width:780px; margin:0 auto; box-shadow:var(--shadow-md)}
.samplecase-shot{position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; color:#8fb4ff; padding:24px;
  background:radial-gradient(80% 60% at 50% 40%, #16306a 0%, var(--ink-2) 70%)}
.samplecase-shot::before{content:""; position:absolute; inset:0; opacity:.35;
  background-image:linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px); background-size:22px 22px}
.samplecase-shot::after{content:""; position:absolute; left:0; right:0; height:38%; top:-40%;
  background:linear-gradient(180deg, transparent, rgba(94,234,212,.28) 60%, rgba(94,234,212,.7) 100%); animation:scan 3.4s linear infinite}
.samplecase-shot svg{position:relative; z-index:1; filter:drop-shadow(0 6px 18px rgba(79,141,255,.6))}
@keyframes scan{0%{top:-40%} 100%{top:110%}}
.samplecase-body{padding:22px 28px}
.samplecase-tag{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.6px; color:var(--muted); margin-bottom:8px}
.samplecase-body h3{margin:0 0 18px; font-size:20px; letter-spacing:-.3px}
.samplecase-fields{display:grid; grid-template-columns:1fr 1fr; gap:14px 22px; margin:0 0 20px; padding:0}
.samplecase-fields dt{font-size:11px; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); margin:0 0 3px}
.samplecase-fields dd{margin:0; font-size:15px; font-weight:600; color:var(--text)}
.statuschip{display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:700; color:#0a7a4d; background:#e4f6ec; border:1px solid #bfe8d2; border-radius:999px; padding:5px 12px}
.statuschip::before{content:""; width:7px; height:7px; border-radius:50%; background:#12b76a; box-shadow:0 0 0 3px rgba(18,183,106,.18)}

/* ================= Long-form components ================= */
.prose{max-width:760px; margin:0 auto; font-size:15.5px; color:var(--text-2); line-height:1.78}
.prose h3{font-size:20px; color:var(--text); margin:32px 0 10px; letter-spacing:-.3px}
.prose h3:first-child{margin-top:0}
.prose p{margin:0 0 14px}
.prose ul{margin:0 0 16px; padding-left:20px}
.prose li{margin:0 0 7px}
.prose strong{color:var(--text)}

.tablewrap{overflow-x:auto; max-width:940px; margin:0 auto; border-radius:var(--r-xl); box-shadow:var(--shadow-sm); -webkit-overflow-scrolling:touch; position:relative}
.compare{width:100%; min-width:560px; border-collapse:separate; border-spacing:0; background:#fff; border:1px solid var(--line); border-radius:var(--r-xl); overflow:hidden; font-size:14px}
.compare th,.compare td{padding:11px 16px; text-align:left; border-bottom:1px solid var(--line-soft); vertical-align:top}
.compare thead th{background:linear-gradient(180deg,#f6f8fc,#eef2f9); font-size:12px; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); font-weight:700; position:sticky; top:0}
.compare thead th:last-child{color:var(--accent)}
.compare tbody tr:last-child td{border-bottom:none}
.compare tbody tr:hover td{background:#fafcff}
.compare td:first-child{font-weight:600; color:var(--text)}
.compare td:last-child{background:rgba(29,84,209,.035)}
.compare .yes{color:var(--trust); font-weight:700}
.compare .no{color:var(--muted)}

.callout{position:relative; background:linear-gradient(135deg,#eef3ff,#f6f9ff); border:1px solid #d5e1fb; border-radius:var(--r-lg); padding:20px 22px 20px 26px; font-size:15px; color:var(--text-2); line-height:1.7; max-width:760px; margin:0 auto; box-shadow:var(--shadow-sm)}
.callout::before{content:""; position:absolute; left:0; top:12px; bottom:12px; width:3px; border-radius:3px; background:linear-gradient(180deg,var(--accent),#5eead4)}
.callout b{color:var(--text)}

.deflist{max-width:760px; margin:0 auto; display:grid; gap:10px}
.deflist > div{padding:14px 18px; border:1px solid var(--line); border-radius:var(--r-lg); background:#fff; transition:border-color .3s, box-shadow .3s}
.deflist > div:hover{border-color:#c9d8f5; box-shadow:var(--shadow-sm)}
.deflist .term{font-size:16px; font-weight:700; color:var(--text); margin-bottom:6px; display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.deflist .def{font-size:14.5px; color:var(--text-2); line-height:1.7}

.timeline{max-width:760px; margin:0 auto}
.tl-item{display:grid; grid-template-columns:38px 1fr; gap:20px; padding:0 0 20px; position:relative}
.tl-item:not(:last-child)::before{content:""; position:absolute; left:18px; top:42px; bottom:0; width:2px; background:linear-gradient(180deg,rgba(29,84,209,.45),var(--line))}
.tl-dot{width:38px; height:38px; border-radius:50%; color:#fff; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:800;
  background:linear-gradient(135deg,var(--accent),#1741a8); box-shadow:0 0 0 6px var(--accent-soft), 0 8px 18px -8px rgba(29,84,209,.7)}
.tl-item h3{margin:7px 0 6px; font-size:17px; letter-spacing:-.2px}
.tl-item p{margin:0; font-size:14.5px; color:var(--text-2); line-height:1.65}

.pillrow{display:flex; gap:8px; flex-wrap:wrap; justify-content:center; max-width:840px; margin:0 auto}
.pill{font-size:13px; font-weight:600; color:var(--text-2); background:#fff; border:1px solid var(--line); border-radius:999px; padding:7px 14px; box-shadow:var(--shadow-sm); transition:transform .25s var(--ease), border-color .25s, color .25s}
.pill:hover{transform:translateY(-2px); border-color:var(--accent); color:var(--accent)}

/* FAQ */
.faqlist{max-width:780px; margin:0 auto; display:grid; gap:10px}
.faqitem{border:1px solid var(--line); border-radius:var(--r-lg); padding:0; background:#fff; transition:border-color .3s, box-shadow .3s}
.faqitem[open]{border-color:#c9d8f5; box-shadow:var(--shadow-sm)}
.faqitem summary{font-size:15.5px; font-weight:600; cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:15px 20px}
.faqitem summary::-webkit-details-marker{display:none}
.faqitem summary::after{content:"+"; flex:none; width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:18px; font-weight:400; color:var(--accent); background:var(--accent-soft); transition:transform .3s var(--ease)}
.faqitem[open] summary::after{content:"\2212"; transform:rotate(180deg)}
.faqitem p{font-size:14.5px; color:var(--text-2); margin:0; padding:0 20px 15px; line-height:1.7}

/* ================= CTA band ================= */
.ctaband{position:relative; overflow:hidden; isolation:isolate; background:var(--ink); color:#fff; border-radius:22px; padding:44px 48px; text-align:center; margin:0 24px; box-shadow:0 30px 70px -30px rgba(7,15,34,.7)}
.ctaband::after{content:""; position:absolute; inset:0; z-index:-1; opacity:.25;
  background-image:linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px); background-size:48px 48px;
  -webkit-mask-image:radial-gradient(70% 80% at 50% 50%, #000 10%, transparent 100%); mask-image:radial-gradient(70% 80% at 50% 50%, #000 10%, transparent 100%)}
.ctaband h2{font-size:32px; margin:0 0 12px; letter-spacing:-.9px; line-height:1.15; text-wrap:balance}
.ctaband p{color:#c2cde3; max-width:560px; margin:0 auto 28px; font-size:16px}
.ctaband .btn.primary{box-shadow:0 0 0 1px rgba(255,255,255,.12) inset, 0 16px 40px -14px rgba(79,141,255,.9)}

/* ================= Footer ================= */
footer.site{position:relative; background:var(--ink); padding:40px 0 32px; margin-top:24px; color:#fff}
footer.site::before{content:""; position:absolute; left:0; right:0; top:0; height:1px; background:linear-gradient(90deg,transparent,rgba(79,141,255,.7),rgba(94,234,212,.6),transparent)}
footer.site .flinks{display:flex; flex-wrap:wrap; gap:6px 18px; margin-top:18px}
footer.site .flinks a{color:#aab8ce; font-size:13.5px; transition:color .2s}
footer.site .flinks a:hover{color:#fff; text-decoration:none}
footer.site .fcopy{color:#7c8ba3; font-size:13px}
footer.site .fcopy a{color:#aab8ce}
footer.site .brandmark{color:#fff}
footer.site .brandmark img{height:44px}
.footercontact{border-top:1px solid rgba(255,255,255,.1); margin-top:30px; padding-top:26px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px}
.footercontact a{color:#fff; font-weight:600}
.footercontact span{color:#aab8ce; font-size:13.5px}

/* ================= Effects (driven by /fx.js; see that file) ================= */
/* Scroll reveal. `.rv` is only added by fx.js, so without it nothing is
   hidden; `--rvd` is the per-sibling stagger the script computes. */
.fx .rv{opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease) var(--rvd,0ms), transform .7s var(--ease) var(--rvd,0ms)}
.fx .rv.in{opacity:1; transform:none}
.fx-static .rv{opacity:1; transform:none; transition:none}
/* Hero text entrance */
.fx .hero .eyebrow,.fx .hero h1,.fx .hero p.lead,.fx .hero .actions,.fx .hero .fineprint{animation:heroIn .9s var(--ease) both}
.fx .hero h1{animation-delay:.08s} .fx .hero p.lead{animation-delay:.18s} .fx .hero .actions{animation-delay:.28s} .fx .hero .fineprint{animation-delay:.38s}
@keyframes heroIn{from{opacity:0; transform:translateY(18px); filter:blur(6px)} to{opacity:1; transform:none; filter:blur(0)}}
/* Crosshair corner marks on the hero: quiet HUD framing. */
.fx .hero .wrap::before,.fx .hero .wrap::after{content:""; position:absolute; width:22px; height:22px; border:1px solid rgba(94,234,212,.45); pointer-events:none}
.fx .hero .wrap::before{top:-34px; left:8px; border-right:0; border-bottom:0}
.fx .hero .wrap::after{bottom:-34px; right:8px; border-left:0; border-top:0}
/* Spotlight: a radial highlight tracking the cursor (fx.js sets --mx/--my). */
.fx .card::after,.fx .plan::after,.fx .persona::after,.fx .faqitem::after,.fx .deflist > div::after{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0; transition:opacity .4s;
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%), rgba(29,84,209,.10), transparent 60%)}
.fx .card:hover::after,.fx .plan:hover::after,.fx .persona:hover::after,.fx .faqitem:hover::after,.fx .deflist > div:hover::after{opacity:1}
.fx .plan,.fx .persona,.fx .faqitem,.fx .deflist > div{position:relative}
.fx .stat{background:radial-gradient(160px circle at var(--mx,50%) var(--my,50%), rgba(94,234,212,.16), rgba(255,255,255,.05) 70%)}
.fx .stat b{font-variant-numeric:tabular-nums}
/* Tilt frames */
.tilt{transition:transform .35s var(--ease), box-shadow .35s var(--ease); will-change:transform}
.tilt:hover{box-shadow:0 40px 80px -30px rgba(11,23,48,.5), 0 0 0 1px rgba(29,84,209,.18)}
/* Header once scrolled past the hero top */
header.site.scrolled{box-shadow:0 10px 30px -18px rgba(0,0,0,.6); border-bottom-color:rgba(79,141,255,.22)}
/* Trace console (homepage hero) */
.tracecon{position:relative; max-width:720px; margin:40px auto 0; text-align:left; border:1px solid rgba(94,234,212,.22); border-radius:12px; background:rgba(4,10,24,.72);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); box-shadow:0 30px 70px -30px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.06); overflow:hidden}
.tracecon::before{content:""; position:absolute; inset:0; pointer-events:none; opacity:.35;
  background:repeating-linear-gradient(0deg, transparent 0 2px, rgba(255,255,255,.025) 2px 3px)}
.tc-bar{display:flex; align-items:center; gap:10px; padding:9px 14px; border-bottom:1px solid rgba(255,255,255,.08); font:600 11px/1 var(--font-mono); letter-spacing:.6px; text-transform:uppercase; color:#8fb4ff}
.tc-bar i{width:8px; height:8px; border-radius:50%; background:#5eead4; box-shadow:0 0 10px #5eead4; animation:ping 2.2s infinite}
.tc-bar span{margin-left:auto; color:#6b7c99; font-weight:500; letter-spacing:.3px; text-transform:none}
.tc-out{height:248px; overflow:hidden; padding:12px 16px; font:13px/1.65 var(--font-mono); color:#c9d4e8; white-space:pre; text-overflow:ellipsis}
.tc-l{overflow:hidden; text-overflow:ellipsis; animation:tcIn .25s var(--ease) both}
.tc-l.cmd{color:#fff}.tc-l.cmd::before{content:"$ "; color:#5eead4}
.tc-l.cmd::after{content:""; display:inline-block; width:7px; height:14px; background:#5eead4; vertical-align:-2px; margin-left:2px; animation:blink 1s steps(2) infinite}
.tc-l.cmd:not(:last-child)::after{display:none}
.tc-l.dim{color:#6b7c99}
.tc-l.hdr{color:#8fb4ff}
.tc-l.hop{color:#c9d4e8; padding-left:14px}
.tc-l.hop::before{content:"↳ "; color:#4f8dff}
.tc-l.ok{color:#5eead4}.tc-l.ok::before{content:"✓ "}
.tc-l.warn{color:#ffd166}.tc-l.warn::before{content:"! "}
@keyframes tcIn{from{opacity:0; transform:translateX(-6px)} to{opacity:1; transform:none}}
@keyframes blink{to{opacity:0}}
.tc-note{margin:0; padding:8px 16px; font-size:11px; color:#6b7c99; border-top:1px solid rgba(255,255,255,.06)}

/* ================= Responsive ================= */
@media (max-width:1024px){
  .grid4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:860px){
  .tiles{grid-template-columns:1fr 1fr}
  header.site .bar{min-height:60px; padding:10px 0}
  nav.sitenav{display:none}
  .navcta{display:none}
  .mobilenav{display:block}
  .hero{padding:72px 0 56px}
  .hero h1{font-size:36px; letter-spacing:-1px}
  .hero p.lead{font-size:16.5px}
  .grid3, .grid4, .steps, .personas, .pricing3{grid-template-columns:1fr}
  .steps{gap:26px}
  .step{border-left:0 !important; padding:0}
  .step:not(:first-child){padding-top:26px; border-top:1px solid var(--line)}
  .featureblock{grid-template-columns:1fr; gap:14px; padding:30px 0}
  .featureblock .outcomes{grid-template-columns:1fr}
  .samplecase{grid-template-columns:1fr}
  .samplecase-shot{padding:28px 0; min-height:150px}
  .samplecase-body{padding:22px 20px}
  .evidence-list{grid-template-columns:1fr}
  .ctaband{margin:0; padding:44px 22px; border-radius:18px}
  .ctaband h2{font-size:26px}
  .sectionhead h2{font-size:27px}
  section{padding:42px 0}
  .plan.featured{transform:none}
  .tablewrap::after{content:""; position:absolute; top:1px; right:1px; bottom:1px; width:34px; border-radius:0 var(--r-xl) var(--r-xl) 0; background:linear-gradient(to right, rgba(11,23,48,0), rgba(11,23,48,.16)); pointer-events:none}
}
@media (max-width:560px){
  .tiles{grid-template-columns:1fr}
  .wrap{padding:0 18px}
  .hero{padding:48px 0 36px}
  .hero h1{font-size:31px; letter-spacing:-.8px}
  .eyebrow{margin-bottom:16px}
  .hero p.lead{margin:0 auto 22px}
  .hero .actions{flex-direction:column; align-items:stretch}
  .hero .actions .btn{width:100%}
  .stat{padding:14px 10px 12px}
  .stat b{font-size:20px}
  .stat span{font-size:11.5px}
  .trustbar{gap:8px 16px; justify-content:flex-start; margin-top:20px; padding-top:16px}
  .trustitem{font-size:12.5px}
  .sectionhead{margin-bottom:30px}
  .sectionhead h2{font-size:24px}
  .card,.plan,.persona{padding:22px}
  .plan .price{font-size:32px}
  .samplecase-fields{grid-template-columns:1fr 1fr; gap:12px 14px}
  .faqitem summary{font-size:14.5px; padding:15px 16px}
  .faqitem p{padding:0 16px 16px}
  .tl-item{grid-template-columns:34px 1fr; gap:14px}
  .tl-dot{width:34px; height:34px}
  .tl-item:not(:last-child)::before{left:16px}
  .footercontact{flex-direction:column; align-items:flex-start}
  .btn.big{padding:13px 20px}
  .tracecon{margin-top:28px; border-radius:10px}
  .tc-out{height:215px; font-size:11.5px; padding:10px 12px}
  .tc-bar span{display:none}
  .fx .hero .wrap::before,.fx .hero .wrap::after{display:none}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important; transition:none !important; scroll-behavior:auto !important}
}

/* ================= Chat widget (bottom-right) ================= */
.chatwidget{position:fixed; right:22px; bottom:22px; z-index:90; font-family:inherit}
.chatbubble{
  width:58px; height:58px; border-radius:50%; border:none; cursor:pointer; position:relative;
  display:flex; align-items:center; justify-content:center; color:#fff;
  background:linear-gradient(135deg,var(--accent-2),var(--accent) 65%,#1741a8);
  box-shadow:0 14px 34px -10px rgba(29,84,209,.65), 0 0 0 1px rgba(255,255,255,.14) inset;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.chatbubble:hover{transform:translateY(-2px) scale(1.04)}
.chatbubble svg{width:24px; height:24px; position:absolute; transition:opacity .2s, transform .2s}
.chatbubble .ci-close{opacity:0; transform:rotate(-45deg) scale(.6)}
.chatwidget.open .chatbubble .ci-chat{opacity:0; transform:rotate(45deg) scale(.6)}
.chatwidget.open .chatbubble .ci-close{opacity:1; transform:none}
.chatbubble::after{content:""; position:absolute; inset:-4px; border-radius:50%; border:2px solid rgba(79,141,255,.45); opacity:0; animation:chatping 2.6s ease-out infinite}
.chatwidget.open .chatbubble::after{display:none}
@keyframes chatping{0%{opacity:.55; transform:scale(.9)} 80%{opacity:0; transform:scale(1.25)} 100%{opacity:0}}

.chatpanel{
  position:absolute; right:0; bottom:74px; width:380px; height:min(600px, calc(100vh - 130px));
  background:#fff; border-radius:18px; border:1px solid var(--line); overflow:hidden;
  display:flex; flex-direction:column;
  box-shadow:0 30px 70px -20px rgba(7,15,34,.45), 0 0 0 1px rgba(7,15,34,.03);
  animation:chatpanelin .28s var(--ease);
}
@keyframes chatpanelin{from{opacity:0; transform:translateY(14px) scale(.97)} to{opacity:1; transform:none}}
/* `display:flex` above is an author rule, so it beats the browser's own
   `[hidden]{display:none}` UA rule -- the panel must be re-hidden explicitly
   or it renders open on every page load. */
.chatpanel[hidden]{display:none}
/* Same author-rule-beats-`hidden` problem: `.chatintro` and `.chatbody` set
   their own display when shown, so each needs an explicit guard or both the
   lead form and the conversation render at once. */
.chatintro[hidden],.chatbody[hidden]{display:none}
.chatpanel-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 14px 14px 16px; color:#fff;
  background:linear-gradient(135deg,var(--ink-3),var(--ink)); flex:none;
}
.chatwho{display:flex; align-items:center; gap:11px; min-width:0}
.chatpanel-head .mark{
  width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:14px; flex:none;
  background:linear-gradient(135deg,var(--accent-2),var(--accent)); color:#fff;
}
.chatpanel-head .mark span{color:#bcd3ff}
.chatpanel-head b{display:block; font-size:14.5px; letter-spacing:-.2px}
.chatpanel-head .chatsub{display:block; font-size:11.5px; color:#a9b8d3; margin-top:1px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:200px}
.chatclose{
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); color:#fff;
  width:36px; height:36px; border-radius:10px; cursor:pointer; flex:none;
  display:flex; align-items:center; justify-content:center; transition:background .2s;
}
.chatclose svg{width:16px; height:16px}
.chatclose:hover{background:rgba(255,255,255,.18)}

/* Lead capture (shown first) */
.chatintro{flex:1; overflow-y:auto; padding:20px 18px; background:var(--bg); -webkit-overflow-scrolling:touch}
.chatintro-lead{margin:0 0 16px; font-size:13.5px; color:var(--text-2); line-height:1.6}
.chatlead{display:grid; gap:12px}
.chatlead label{display:block; font-size:12px; font-weight:700; color:var(--text); letter-spacing:.1px}
.chatlead label i{font-weight:500; color:var(--muted); font-style:normal}
.chatlead input{
  display:block; width:100%; margin-top:6px; height:44px; border-radius:10px; border:1px solid var(--line);
  padding:0 13px; font-size:15px; font-family:inherit; color:var(--text); background:#fff;
  transition:border-color .2s, box-shadow .2s;
}
.chatlead input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
.chaterr{margin:0; font-size:12.5px; color:#b42318; font-weight:600}
.chatstart{
  height:46px; border:none; border-radius:11px; cursor:pointer; color:#fff; font-size:15px; font-weight:700; font-family:inherit;
  background:linear-gradient(180deg,#2d64e6,var(--accent)); box-shadow:0 10px 24px -10px rgba(29,84,209,.8);
  transition:transform .2s var(--ease), filter .2s;
}
.chatstart:hover{transform:translateY(-1px); filter:brightness(1.04)}
.chatstart:disabled{opacity:.7; cursor:default; transform:none}
.chatskip{
  background:none; border:none; cursor:pointer; font-family:inherit; font-size:12.5px; color:var(--muted);
  text-decoration:underline; padding:2px 0; justify-self:center;
}
.chatskip:hover{color:var(--text-2)}

/* Conversation */
.chatbody{flex:1; display:flex; flex-direction:column; min-height:0}
.chatlog{flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:10px; background:var(--bg); -webkit-overflow-scrolling:touch}
.chatrow{display:flex}
.chatrow.me{justify-content:flex-end}
.chatbubbletext{max-width:85%; padding:11px 14px; border-radius:15px; font-size:14px; line-height:1.55; box-shadow:var(--shadow-sm); white-space:pre-wrap}
.chatrow.bot .chatbubbletext{background:#fff; color:var(--text-2); border:1px solid var(--line); border-bottom-left-radius:5px}
.chatrow.me .chatbubbletext{background:linear-gradient(135deg,var(--accent-2),var(--accent)); color:#fff; border-bottom-right-radius:5px}
.chattyping{display:flex; gap:4px; padding:14px 16px}
.chattyping span{width:6px; height:6px; border-radius:50%; background:var(--muted); animation:chatdot 1.1s infinite ease-in-out}
.chattyping span:nth-child(2){animation-delay:.15s}
.chattyping span:nth-child(3){animation-delay:.3s}
@keyframes chatdot{0%,60%,100%{opacity:.3; transform:translateY(0)} 30%{opacity:1; transform:translateY(-3px)}}

.chatsuggest{display:flex; flex-wrap:wrap; gap:6px; padding:0 16px 12px; background:var(--bg); flex:none}
.chatsuggest:empty{display:none}
.chatstarter{font-size:12.5px; font-weight:600; color:var(--accent); background:var(--accent-soft); border:1px solid #d5e1fb; border-radius:999px; padding:8px 13px; cursor:pointer; font-family:inherit; transition:transform .2s var(--ease), background .2s}
.chatstarter:hover{background:#dfe9fd; transform:translateY(-1px)}

.chatform{display:flex; gap:8px; padding:12px; border-top:1px solid var(--line); background:#fff; flex:none}
.chatform input{flex:1; min-width:0; height:44px; border-radius:11px; border:1px solid var(--line); padding:0 14px; font-size:15px; font-family:inherit; color:var(--text); background:var(--bg); transition:border-color .2s, box-shadow .2s}
.chatform input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); background:#fff}
.chatform button{
  width:44px; height:44px; border-radius:11px; border:none; cursor:pointer; flex:none; color:#fff;
  background:linear-gradient(135deg,var(--accent-2),var(--accent)); display:flex; align-items:center; justify-content:center;
  transition:transform .2s var(--ease), filter .2s;
}
.chatform button:hover{transform:translateY(-1px); filter:brightness(1.05)}
.chatform button svg{width:17px; height:17px}
.chatfoot{font-size:11.5px; color:var(--muted); text-align:center; padding:0 12px 12px; background:#fff; flex:none}

/* Mobile: full bottom sheet, keyboard-safe, big tap targets */
@media (max-width:640px){
  .chatwidget{right:16px; bottom:16px}
  .chatbubble{width:54px; height:54px}
  .chatpanel{
    position:fixed; left:0; right:0; bottom:0; top:auto; width:auto;
    height:88dvh; max-height:88dvh;
    border-radius:20px 20px 0 0; border-left:0; border-right:0; border-bottom:0;
    padding-bottom:env(safe-area-inset-bottom);
  }
  .chatpanel-head{padding:16px; border-radius:20px 20px 0 0}
  .chatpanel-head b{font-size:15.5px}
  .chatwidget.open .chatbubble{display:none}
  .chatlog{padding:14px; gap:9px}
  .chatbubbletext{max-width:88%; font-size:14.5px}
  .chatform{padding:10px 12px 12px}
  .chatfoot{padding-bottom:10px}
  .chatintro{padding:18px 16px}
}
@supports not (height: 1dvh){
  @media (max-width:640px){ .chatpanel{height:86vh; max-height:86vh} }
}
body.chat-open{overflow:hidden}
@media (min-width:641px){ body.chat-open{overflow:auto} }
@media (prefers-reduced-motion: reduce){
  .chatbubble::after{display:none}
}

/* ================= Real product screenshots ================= */
/* Screenshots carry the proof, so they are framed like a window rather than
   floated as decoration: a browser-ish bar, a hard edge, and a caption that
   says what the reader is looking at. */
.shotfig{max-width:1000px; margin:0 auto; display:block}
.shotframe{border:1px solid var(--line); border-radius:14px; overflow:hidden; background:#fff;
  box-shadow:0 30px 60px -28px rgba(11,23,48,.45), 0 2px 6px rgba(11,23,48,.05)}
.shotbar{display:flex; align-items:center; gap:7px; padding:10px 14px; background:#f1f4f9; border-bottom:1px solid var(--line)}
.shotbar i{width:10px; height:10px; border-radius:50%; background:#d5dbe5; display:block}
.shotbar span{margin-left:8px; font-size:11.5px; color:var(--muted); font-style:normal}
.shotframe img{display:block; width:100%; height:auto}
.shotcap{margin:14px auto 0; max-width:760px; font-size:13.5px; color:var(--muted); line-height:1.6; text-align:center}
.shotcap b{color:var(--text-2); font-weight:600}
/* Compact variant: a real screenshot that is naturally portrait (a UI panel,
   not a full dashboard), sized so it renders at roughly the same height as
   the other supporting images on the page rather than stretching to the
   full 1000px column and towering over the text beside it. */
.shotfig.compact{max-width:345px}

/* ================= Person ================= */
.person{display:grid; grid-template-columns:132px 1fr; gap:26px; align-items:start; max-width:760px; margin:0 auto}
.person img{width:132px; height:132px; border-radius:16px; object-fit:cover; border:1px solid var(--line)}
.person .pname{font-size:17px; font-weight:700; color:var(--text); margin:0 0 2px}
.person .prole{font-size:13px; color:var(--muted); margin:0 0 14px}
.person p{font-size:15px; color:var(--text-2); line-height:1.75; margin:0 0 12px}
@media (max-width:640px){
  .person{grid-template-columns:1fr; gap:16px}
  .person img{width:96px; height:96px}
  .shotcap{text-align:left}
}

/* ================= Language switcher (built by /lang.js) ================= */
.langnav{position:relative}
.langnav summary{
  list-style:none; cursor:pointer; height:38px; padding:0 12px; border-radius:8px;
  border:1px solid rgba(255,255,255,.22); color:#fff; font-size:13px; font-weight:600; letter-spacing:.4px;
  display:flex; align-items:center; gap:7px; background:rgba(255,255,255,.04);
  transition:border-color .2s var(--ease), background .2s var(--ease);
}
.langnav summary::-webkit-details-marker{display:none}
.langnav summary::after{
  content:""; width:7px; height:7px; border-right:1.6px solid #c4cee0; border-bottom:1.6px solid #c4cee0;
  transform:rotate(45deg) translateY(-2px); transition:transform .2s var(--ease);
}
.langnav[open] summary::after{transform:rotate(-135deg) translateY(-1px)}
.langnav summary:hover{border-color:rgba(255,255,255,.5); background:rgba(255,255,255,.06)}
.langnav .langlist{
  position:absolute; right:0; top:calc(100% + 10px); min-width:190px;
  background:rgba(9,19,42,.97); border:1px solid rgba(255,255,255,.1); border-radius:14px; padding:8px;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.6); display:grid; gap:2px;
  animation:menuIn .22s var(--ease); z-index:60;
}
.langlist a{
  display:flex; justify-content:space-between; gap:18px; color:#dbe3f2;
  font-size:14px; font-weight:500; padding:9px 12px; border-radius:8px; white-space:nowrap;
}
.langlist a:hover{background:rgba(255,255,255,.07); color:#fff; text-decoration:none}
.langlist a.active{color:#fff; background:rgba(79,141,255,.18)}
/* flat variant appended to the mobile menu panel */
.mobilenav-panel .langlist{
  position:static; animation:none; background:transparent; border:0; border-radius:0;
  padding:8px 4px 2px; margin-top:6px; border-top:1px solid rgba(255,255,255,.08);
  box-shadow:none; grid-template-columns:1fr 1fr; gap:2px;
}
.mobilenav-panel .langlist a{font-size:13.5px; padding:8px 10px; color:#bfc9dc}

/* ================= Photographs (section-break & hero) ================= */
/* Real photography, not UI: no browser-window chrome, just the image with a
   soft shadow and a plain caption underneath. Sized to sit inside the
   reading column as a supporting illustration -- not a full-bleed hero --
   so a tall source image is cropped to a wide, shallow band rather than
   rendering at its full (and much taller) native height. */
.photofig{max-width:760px; margin:36px auto; display:block}
.photofig img{display:block; width:100%; height:auto; aspect-ratio:3/2; max-height:460px; object-fit:cover; border-radius:14px; box-shadow:var(--shadow-md)}
.photofig.wide{max-width:1120px}
.photocap{margin:14px auto 0; max-width:760px; font-size:13.5px; color:var(--muted); line-height:1.6; text-align:center}
.photocap b{color:var(--text-2); font-weight:600}
@media (max-width:860px){
  .photofig{margin:26px auto}
  .photofig img{border-radius:10px; max-height:33vh}
  .photocap{text-align:left}
}

/* ================= 3D flow scenes (driven by /flow3d.js) ================= */
/* <x-marketing.flow3d>: a dark canvas stage beside an ordered step list. The
   list is the content; without JS it renders fully expanded on its own and
   the stage stays hidden. With JS (.flow3d.on) it becomes an accordion that
   follows the scene's active node. */
.flow3d{display:grid; grid-template-columns:minmax(0,1fr); gap:22px; align-items:stretch}
.flow3d.on{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
.flow3d-stage{display:none; position:relative; border-radius:var(--r-xl); overflow:hidden; isolation:isolate;
  background:radial-gradient(110% 80% at 28% 18%,#16305f 0%,#0b1834 46%,#060d1f 100%);
  box-shadow:0 0 0 1px rgba(79,141,255,.22) inset, 0 30px 60px -30px rgba(7,15,34,.65), var(--shadow-md);
  touch-action:pan-y; cursor:grab; user-select:none; -webkit-user-select:none}
.flow3d.on{align-items:start}
.flow3d.on .flow3d-stage{display:block; position:sticky; top:88px; height:min(640px,calc(100vh - 110px)); min-height:440px}
.flow3d-stage canvas{position:absolute; inset:0; width:100%; height:100%; display:block}
.flow3d-stage::before{content:""; position:absolute; inset:0; z-index:1; pointer-events:none; border-radius:inherit;
  background:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px) 0 0/100% 4px; mix-blend-mode:screen; opacity:.5}
.flow3d-stage::after{content:""; position:absolute; inset:10px; z-index:1; pointer-events:none;
  background:
    linear-gradient(#5eead4,#5eead4) 0 0/14px 1px no-repeat, linear-gradient(#5eead4,#5eead4) 0 0/1px 14px no-repeat,
    linear-gradient(#5eead4,#5eead4) 100% 100%/14px 1px no-repeat, linear-gradient(#5eead4,#5eead4) 100% 100%/1px 14px no-repeat;
  opacity:.55}
.flow3d-hud{position:absolute; left:20px; top:18px; z-index:2; display:flex; flex-direction:column; gap:3px; pointer-events:none; max-width:70%}
.flow3d-hud-n{font:700 11px/1 var(--font-mono); letter-spacing:1.4px; color:#5eead4}
.flow3d-hud-t{font-size:15px; font-weight:700; color:#fff; letter-spacing:-.2px; text-shadow:0 2px 12px rgba(0,0,0,.5)}
.flow3d-hint{position:absolute; right:16px; top:16px; z-index:2; pointer-events:none; font-size:11.5px; font-weight:500; color:#9fb3d6;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); padding:5px 11px; border-radius:999px; transition:opacity .6s var(--ease)}
.flow3d-used .flow3d-hint{opacity:0}
.flow3d-steps{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px}
.flow3d-step{position:relative; border:1px solid var(--line); background:#fff; border-radius:var(--r-lg); overflow:hidden;
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease)}
.flow3d-btn{display:flex; align-items:center; gap:12px; width:100%; padding:12px 16px; margin:0; border:0; background:none; cursor:pointer;
  font:inherit; font-size:15px; font-weight:600; color:var(--text); text-align:left}
.flow3d-btn:focus-visible{outline:2px solid var(--accent-glow); outline-offset:-2px; border-radius:var(--r-lg)}
.flow3d-n{flex:none; width:28px; height:28px; border-radius:50%; display:grid; place-items:center; font-size:12.5px; font-weight:700;
  color:var(--accent); background:var(--accent-soft); transition:background .3s, color .3s, box-shadow .3s}
.flow3d-d{display:grid; grid-template-rows:1fr; transition:grid-template-rows .45s var(--ease)}
.flow3d-d > div{overflow:hidden; min-height:0}
.flow3d-d p{margin:0; padding:0 16px 14px 56px; font-size:14.5px; color:var(--text-2); line-height:1.65}
.flow3d.on .flow3d-step:not(.is-on) .flow3d-d{grid-template-rows:0fr}
.flow3d.on .flow3d-step:not(.is-on):hover{border-color:#c9d8f5; transform:translateX(3px)}
.flow3d-step.is-on{border-color:#b7cdf8; box-shadow:var(--shadow-md)}
.flow3d-step.is-on .flow3d-n{color:#fff; background:linear-gradient(135deg,var(--accent),#3b82f6); box-shadow:0 0 0 4px rgba(79,141,255,.16)}
.flow3d-step.done .flow3d-n{color:#0d9488; background:#e3f8f4}
.flow3d-step[data-tone=ok].is-on .flow3d-n{background:linear-gradient(135deg,#059669,#34d399); box-shadow:0 0 0 4px rgba(52,211,153,.18)}
.flow3d-step[data-tone=bad].is-on .flow3d-n{background:linear-gradient(135deg,#e11d48,#fb7185); box-shadow:0 0 0 4px rgba(251,113,133,.18)}
.flow3d-bar{position:absolute; left:0; bottom:0; height:2px; width:100%; transform-origin:left center; transform:scaleX(var(--p,0));
  background:linear-gradient(90deg,var(--accent),#5eead4); opacity:0}
.flow3d-step.is-on .flow3d-bar{opacity:1}
@media (max-width:900px){
  .flow3d.on{grid-template-columns:minmax(0,1fr)}
  .flow3d.on .flow3d-stage{position:relative; top:auto; height:500px; min-height:0}
}
@media (max-width:520px){
  .flow3d.on .flow3d-stage{height:470px}
  .flow3d-hint{display:none}
  .flow3d-d p{padding-left:16px}
}
/* Reading progress hairline under the sticky header (fx.js). */
.fx-progress{position:absolute; left:0; right:0; bottom:-1px; height:2px; transform:scaleX(0); transform-origin:left center; pointer-events:none;
  background:linear-gradient(90deg,var(--accent-glow),#5eead4); box-shadow:0 0 10px rgba(94,234,212,.55)}

/* ================= Hero globe (flow3d.js) ================= */
.hero3d{position:absolute; inset:0; z-index:1; pointer-events:none; opacity:0; transition:opacity 1.4s ease;
  -webkit-mask-image:linear-gradient(to bottom,#000 78%,transparent 100%); mask-image:linear-gradient(to bottom,#000 78%,transparent 100%)}
.hero3d.on{opacity:1}
.hero3d canvas{position:absolute; inset:0; width:100%; height:100%; display:block}
/* Numbered badges flip in like coins on reveal and spin on hover. */
.fx:not(.fx-static) .step .num,.fx:not(.fx-static) .tl-dot,.fx:not(.fx-static) .featureblock .fnum{
  transform:perspective(320px) rotateY(-180deg); transition:transform 1s cubic-bezier(.2,.8,.2,1)}
.fx:not(.fx-static) .step.in .num,.fx:not(.fx-static) .tl-item.in .tl-dot,.fx:not(.fx-static) .featureblock.in .fnum{transform:perspective(320px) rotateY(0)}
.fx:not(.fx-static) .step.in:hover .num,.fx:not(.fx-static) .tl-item.in:hover .tl-dot,.fx:not(.fx-static) .featureblock.in:hover .fnum{transform:perspective(320px) rotateY(360deg)}

/* ================= Visual impact layer ================= */
/* Hero: extra room under the copy for the globe horizon. */
.hero{padding-bottom:230px}
.hero h1 .hl{background-size:200% 100%; background-image:linear-gradient(90deg,#8fb4ff 0%,#5eead4 35%,#c7d8ff 50%,#5eead4 65%,#8fb4ff 100%); animation:hlShift 7s ease-in-out infinite alternate}
@keyframes hlShift{to{background-position:100% 0}}
.hero h1{text-shadow:0 0 60px rgba(79,141,255,.25)}

/* Dark bands: a perspective grid floor drifting toward the viewer. */
section.dark::before{top:auto; height:62%; opacity:.9;
  background-image:linear-gradient(rgba(94,234,212,.13) 1px, transparent 1px), linear-gradient(90deg, rgba(79,141,255,.13) 1px, transparent 1px); background-size:56px 56px;
  transform:perspective(520px) rotateX(64deg); transform-origin:50% 100%;
  -webkit-mask-image:linear-gradient(to top,#000 0%,transparent 85%); mask-image:linear-gradient(to top,#000 0%,transparent 85%);
  animation:gridFloor 5s linear infinite}
@keyframes gridFloor{to{background-position:0 56px}}
section.dark .sectionhead h2{background:linear-gradient(180deg,#fff 30%,#a9c4ff 100%); -webkit-background-clip:text; background-clip:text; color:transparent}
section.dark{padding:64px 0}

/* Flow sections: full dark band, the 3D stage glows instead of sitting in a frame. */
.flowband .flow3d-stage{box-shadow:0 0 0 1px rgba(94,234,212,.22) inset, 0 0 80px -20px rgba(79,141,255,.55), 0 40px 80px -40px rgba(0,0,0,.8)}
.flowband .flow3d-step{background:rgba(255,255,255,.045); border-color:rgba(255,255,255,.1); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px)}
.flowband .flow3d-btn{color:#e6eeff}
.flowband .flow3d-d p{color:#a9b8d3}
.flowband .flow3d-d p a,.flowband .sectionhead p a{color:#8fb4ff}
.flowband .flow3d-n{background:rgba(79,141,255,.16); color:#8fb4ff}
.flowband .flow3d-step.done .flow3d-n{background:rgba(94,234,212,.16); color:#5eead4}
.flowband .flow3d-step.is-on{border-color:rgba(94,234,212,.45); background:rgba(79,141,255,.1); box-shadow:0 0 0 1px rgba(94,234,212,.15), 0 18px 40px -18px rgba(79,141,255,.6)}
.flowband.flow3d.on .flow3d-step:not(.is-on):hover,.flowband .flow3d.on .flow3d-step:not(.is-on):hover{border-color:rgba(143,180,255,.4)}
.flowband .flow3d-btn:focus-visible{outline-color:#5eead4}

/* Cards enter in 3D and carry a slowly turning gradient rim on hover. */
.fx .rv{transform:perspective(900px) rotateX(14deg) translateY(30px); transform-origin:50% 100%}
.fx .rv.in{transform:none}
@property --rim{syntax:'<angle>'; inherits:false; initial-value:0deg}
.card::before{background:conic-gradient(from var(--rim),rgba(29,84,209,.7),rgba(94,234,212,.7),rgba(143,180,255,.2),rgba(29,84,209,.7)); animation:rimSpin 4s linear infinite paused}
.card:hover::before{animation-play-state:running}
@keyframes rimSpin{to{--rim:360deg}}

/* Primary buttons: a glint sweeps across every few seconds. */
.btn.primary::after{animation:glint 4.5s var(--ease) infinite}
@keyframes glint{0%,70%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
.btn.primary{box-shadow:0 1px 0 rgba(255,255,255,.14) inset, 0 10px 26px -12px rgba(29,84,209,.95)}

/* CTA band: the same globe horizon rises behind it (flow3d.js). */
.ctaband > *:not(.hero3d){position:relative; z-index:2}
.ctaband{padding-bottom:120px}
.ctaband::before,.ctaband::after{display:none}

@media (prefers-reduced-motion: reduce){
  .hero h1 .hl,section.dark::before,.btn.primary::after,.card::before{animation:none}
}
@media (max-width:720px){
  .hero{padding-bottom:170px}
  .ctaband{padding-bottom:90px}
}

/* ================= Designed blocks: steps, checklists, definitions, result ================= */
/* Steps: connected cards, the numbered badges joined by a flowing dashed line. */
.steps{gap:18px}
.step{padding:26px 24px 24px; background:#fff; border:1px solid var(--line); border-radius:var(--r-xl); box-shadow:var(--shadow-sm);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s}
.step:hover{transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:#c9d8f5}
.step .num{width:44px; height:44px; font-size:16px; box-shadow:0 0 0 6px var(--accent-soft), 0 10px 22px -8px rgba(29,84,209,.7)}
.step:not(:last-child)::after{content:""; position:absolute; top:47px; left:calc(24px + 44px + 14px); right:-30px; height:2px; z-index:1;
  background:repeating-linear-gradient(90deg,var(--accent) 0 8px,transparent 8px 14px); background-size:28px 2px; opacity:.45; animation:dashFlow 1.2s linear infinite}
@keyframes dashFlow{to{background-position:28px 0}}

/* Checklists: each point is its own small card with a glowing check. */
.evidence-list{gap:12px; max-width:920px}
.evidence-list li{padding:14px 16px; background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow-sm); transition:border-color .3s, transform .3s var(--ease)}
.evidence-list li:hover{border-color:rgba(5,150,105,.35); transform:translateY(-2px)}
.evidence-list svg{width:24px; height:24px; padding:4px; margin-top:0; box-shadow:0 0 0 4px rgba(16,185,129,.08)}
section.alt .evidence-list li{background:#fbfcff}

/* Definition lists: numbered two-column cards. */
.deflist{max-width:1040px; grid-template-columns:1fr 1fr; gap:14px; counter-reset:def}
.deflist > div{counter-increment:def; padding:20px 20px 18px 66px; border-radius:var(--r-xl); box-shadow:var(--shadow-sm); position:relative}
.deflist > div::before{content:counter(def,decimal-leading-zero); position:absolute; left:18px; top:18px; width:34px; height:34px; border-radius:10px;
  display:grid; place-items:center; font:800 12.5px/1 var(--font-mono); color:var(--accent);
  background:linear-gradient(135deg,var(--accent-soft),#f3f7ff); box-shadow:inset 0 0 0 1px rgba(29,84,209,.14)}
.deflist > div:hover{transform:translateY(-3px); border-color:#c9d8f5; box-shadow:var(--shadow-md)}
.deflist > div{transition:transform .35s var(--ease), border-color .3s, box-shadow .3s}
.deflist > div:last-child:nth-child(odd){grid-column:1 / -1}

/* Result band: the case screenshot rises out of the dark method band in 3D. */
.resultband{padding:0 0 56px; background:linear-gradient(180deg,var(--ink) 0,var(--ink) 120px,transparent 120px)}
.resultband .shotfig{position:relative}
.resultband .shotfig::before{content:""; position:absolute; left:8%; right:8%; top:12%; bottom:6%; z-index:-1; border-radius:40px;
  background:radial-gradient(60% 60% at 50% 40%,rgba(79,141,255,.55),rgba(94,234,212,.2) 55%,transparent 75%); filter:blur(30px)}
.resultband .shotframe{box-shadow:0 0 0 1px rgba(94,234,212,.25), 0 50px 100px -40px rgba(7,15,34,.65)}
.fx .resultband .shotfig.rv{transform:perspective(1400px) rotateX(18deg) translateY(40px) scale(.96)}
.fx .resultband .shotfig.rv.in{transform:none; transition-duration:1.1s}
.resultband .shotcap{font-weight:600; color:var(--text-2)}

@media (max-width:900px){
  .step:not(:last-child)::after{display:none}
  .deflist{grid-template-columns:1fr}
}
@media (prefers-reduced-motion: reduce){.step:not(:last-child)::after{animation:none}}

/* ================= Product illustrations (<x-marketing.illus>) ================= */
/* Base styles are the finished frame; the keyframes only replay how it got
   there, so reduced-motion visitors simply see the end state. */
.illusfig{max-width:920px; margin:34px auto; display:block}
.illus{position:relative; border-radius:20px; overflow:hidden; isolation:isolate; padding:18px 10px;
  background:radial-gradient(90% 80% at 30% 10%,#17336a 0%,#0b1834 55%,#060d1f 100%);
  box-shadow:0 0 0 1px rgba(94,234,212,.18) inset, 0 40px 80px -40px rgba(7,15,34,.7)}
.illus::before{content:""; position:absolute; inset:0; z-index:-1; opacity:.5;
  background-image:radial-gradient(rgba(143,180,255,.22) 1px, transparent 1px); background-size:22px 22px;
  -webkit-mask-image:radial-gradient(70% 70% at 50% 40%,#000,transparent); mask-image:radial-gradient(70% 70% at 50% 40%,#000,transparent)}
.illus svg{display:block; width:100%; height:auto; font-family:var(--font-sans)}
.illus .mono{font-family:var(--font-mono)}
.illus svg *{transform-box:fill-box}
@keyframes dashMove{to{stroke-dashoffset:-22}}
.illus .ps-coin,.illus .rc-dot{transform-box:view-box}

/* Founder monogram (replaces a stock portrait) */
.person .monogram{width:132px; height:132px; border-radius:16px; display:grid; place-items:center; font-size:44px; font-weight:800; letter-spacing:-1px; color:#fff;
  background:radial-gradient(120% 120% at 20% 10%,#4f8dff 0%,#1d54d1 45%,#0b1834 100%); box-shadow:0 0 0 1px rgba(94,234,212,.3) inset, 0 20px 40px -18px rgba(29,84,209,.7)}
@media (max-width:720px){.person .monogram{width:96px; height:96px; font-size:32px}}

@media (prefers-reduced-motion: reduce){.illus *{animation:none !important}}
.illusfig.thumb{margin:0 0 18px}
.illusfig.thumb .illus{border-radius:12px; padding:8px 4px}
.card .illusfig.thumb + h3{margin-top:0}

/* Prose lists: gradient diamond markers instead of default discs; points that
   open with a bold lead become separated rows. */
.prose ul{list-style:none; padding-left:0}
.prose ul > li{position:relative; padding-left:26px}
.prose ul > li::before{content:""; position:absolute; left:4px; top:.62em; width:9px; height:9px; transform:rotate(45deg); border-radius:2px;
  background:linear-gradient(135deg,var(--accent),#5eead4); box-shadow:0 0 0 3px var(--accent-soft)}
.prose ul > li:has(> b:first-child){padding:12px 0 12px 26px; margin:0; border-bottom:1px solid var(--line)}
.prose ul > li:has(> b:first-child):last-child{border-bottom:0}
.prose ul > li:has(> b:first-child)::before{top:calc(12px + .62em)}


/* ================= Typography system ================= */
/* One family, a disciplined scale: weight and tracking carry hierarchy
   instead of heavy 800s. Display sizes tighten, text sizes stay open. */
body{font-size:16px; line-height:1.65; font-optical-sizing:auto; font-kerning:normal; text-rendering:optimizeLegibility; -moz-osx-font-smoothing:grayscale}
h1,h2,h3,h4{font-weight:640; color:inherit}
.hero h1{font-size:clamp(34px,5.2vw,60px); line-height:1.04; font-weight:680; letter-spacing:-.042em}
.hero p.lead{font-size:clamp(16.5px,1.5vw,19px); line-height:1.6; letter-spacing:-.006em}
.sectionhead h2,.ctaband h2{font-size:clamp(26px,3.1vw,40px); line-height:1.1; font-weight:650; letter-spacing:-.034em}
.sectionhead p{font-size:16.5px; line-height:1.6}
.card h3,.step h3,.tile h3,.tl-item h3,.plan h3,.samplecase-body h3,.prose h3,.person h3{font-weight:600; letter-spacing:-.018em}
.featureblock h3{font-size:23px; font-weight:620; letter-spacing:-.024em}
.prose{font-size:16.5px; line-height:1.72}
.prose h2{letter-spacing:-.028em; font-weight:650}
.brandmark{font-weight:700; letter-spacing:-.02em}
.btn{font-weight:600; letter-spacing:-.005em}
.stat b,.plan .price{font-weight:650; letter-spacing:-.035em; font-variant-numeric:tabular-nums}
.plan .price small{letter-spacing:0}
.flow3d-btn,.faqitem summary{font-weight:600; letter-spacing:-.012em}
.flow3d-hud-t{font-weight:600; letter-spacing:-.015em}
/* Labels in sentence case at text size, not tracked-out capitals. */
.sectionhead .kicker{text-transform:none; letter-spacing:-.005em; font-size:14px; font-weight:600}
.sectionhead .kicker::before,.sectionhead .kicker::after{display:none}
.plan .tag,.samplecase-tag,.samplecase-fields dt,.compare thead th,.mobilenav-label{text-transform:none; letter-spacing:0; font-size:12.5px; font-weight:600}
.soon{text-transform:none; letter-spacing:0; font-size:11.5px; font-weight:600}
.eyebrow{letter-spacing:-.005em; font-weight:600; font-size:13px}
code,kbd,samp,pre{font-family:var(--font-mono)}
/* Japanese: CJK glyphs come from the OS face; negative tracking and tight
   leading that suit Latin display type crowd kanji, so reset both. */
html[lang="ja"] body{line-height:1.85; letter-spacing:.02em}
html[lang="ja"] :is(h1,h2,h3,.hero h1,.sectionhead h2,.ctaband h2,.card h3,.featureblock h3,.flow3d-btn,.btn,.stat b){letter-spacing:.01em}
html[lang="ja"] .hero h1{line-height:1.3; font-weight:700}
html[lang="ja"] .sectionhead h2,html[lang="ja"] .ctaband h2{line-height:1.35; font-weight:700}
html[lang="ja"] .prose{line-height:1.95}
/* Big decorative numerals: sans with tabular figures (Geist Mono's slashed zero reads as "Ø"). */
.tile .tn,.deflist > div::before{font-family:var(--font-sans); font-variant-numeric:tabular-nums; letter-spacing:-.04em}
.deflist > div::before{letter-spacing:0; font-weight:650}


/* ================= Explainer sections (<x-marketing.visual>) ================= */
.visual{display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:34px; align-items:center; max-width:1120px; margin:0 auto}
.visual.flip > .illusfig{order:2}
.visual .illusfig{margin:0; max-width:none}
.visual-points{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:16px; counter-reset:none}
.visual-points li{display:flex; gap:14px; align-items:flex-start}
.visual-points .vp-n{flex:none; width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font-size:13px; font-weight:650; color:#fff;
  background:linear-gradient(135deg,var(--accent),#3b82f6); box-shadow:0 0 0 5px var(--accent-soft)}
.visual-points b{display:block; font-size:16px; font-weight:600; letter-spacing:-.012em; margin:3px 0 4px}
.visual-points p{margin:0; font-size:14.5px; line-height:1.62; color:var(--text-2)}
section.dark .visual-points p{color:#a9b8d3}
section.dark .visual-points b{color:#fff}
.fx .visual-points li{opacity:0; transform:translateX(14px); transition:opacity .6s var(--ease), transform .6s var(--ease)}
.fx .visual.in .visual-points li{opacity:1; transform:none}
.fx .visual.in .visual-points li:nth-child(2){transition-delay:.12s}.fx .visual.in .visual-points li:nth-child(3){transition-delay:.24s}
.fx .visual.in .visual-points li:nth-child(4){transition-delay:.36s}.fx .visual.in .visual-points li:nth-child(5){transition-delay:.48s}
@media (max-width:900px){.visual{grid-template-columns:minmax(0,1fr); gap:24px}.visual.flip > .illusfig{order:0}}
@media (prefers-reduced-motion: reduce){.fx .visual-points li{opacity:1; transform:none}}

/* ================= Line effects (lines.js) ================= */
/* Self-drawing line icons */
.ld :is(path,circle,rect,line,polyline,polygon,ellipse){stroke-dasharray:1 1; stroke-dashoffset:1; transition:stroke-dashoffset 1.1s cubic-bezier(.65,0,.35,1) var(--ld,0s)}
.ld.ld-on :is(path,circle,rect,line,polyline,polygon,ellipse){stroke-dashoffset:0}
.ld.ld-reset :is(path,circle,rect,line,polyline,polygon,ellipse){transition:none; stroke-dashoffset:1}
/* Tile numerals written stroke by stroke */
.tile .tn.tn-ld{color:inherit; -webkit-text-stroke:0}
.tn-svg{display:block; width:2.6em; height:1em; overflow:visible}
.tn-svg text{font:inherit; fill:transparent; stroke:rgba(143,180,255,.3); stroke-width:1.2; stroke-dasharray:480; stroke-dashoffset:480; transition:stroke-dashoffset 2.4s cubic-bezier(.65,0,.35,1), stroke .4s}
.tn-on .tn-svg text{stroke-dashoffset:0}
.tile:hover .tn-svg text{stroke:rgba(94,234,212,.75)}
/* Beam orbiting each dark tile's border */
.tile .beam{position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none; z-index:1;
  background:conic-gradient(from var(--rim),transparent 0deg 290deg,rgba(94,234,212,.85) 345deg,#fff 353deg,transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude;
  animation:rimSpin 7s linear infinite; opacity:.75}
/* Circuit traces along the sides of plain dark sections */
section.dark > .wrap{position:relative; z-index:1}
.circuit{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:0;
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 10%,transparent 26%,transparent 74%,#000 90%,#000 100%);
  mask-image:linear-gradient(90deg,#000 0,#000 10%,transparent 26%,transparent 74%,#000 90%,#000 100%)}
.circuit .ct{fill:none; stroke:rgba(94,234,212,.16); stroke-width:1.2}
.circuit .cp{fill:none; stroke:#5eead4; stroke-width:2; stroke-linecap:round; stroke-dasharray:.07 1.3; stroke-dashoffset:.07; animation:ctPulse 4s linear infinite; filter:drop-shadow(0 0 4px rgba(94,234,212,.85))}
.circuit .cn{fill:#0b1730; stroke:rgba(94,234,212,.6); stroke-width:1.4}
@keyframes ctPulse{to{stroke-dashoffset:-1.23}}
/* A line draws under every section heading as it arrives */
.sectionhead::after{content:""; display:block; width:72px; height:2px; margin:16px auto 0; border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--accent),#5eead4,transparent); transform:scaleX(0); transition:transform 1.1s var(--ease) .25s}
.sectionhead.in::after{transform:scaleX(1)}
/* Neighbouring sections that share a background get a hairline between them. */
section.alt + section.alt,
section:not(.alt):not(.dark):not(.hero):not(.resultband) + section:not(.alt):not(.dark):not(.resultband){border-top:1px solid var(--line)}
/* Japanese: break headings at phrase boundaries, never mid-word. */
html[lang="ja"] :is(h1,h2,h3,.visual-points b,.flow3d-btn){word-break:auto-phrase}

/* ================= Explainer video (home) ================= */
.videoband{padding-top:56px}
.vidframe{position:relative; max-width:1080px; margin:0 auto; border-radius:20px; overflow:hidden; background:#060d1f; aspect-ratio:16/9;
  box-shadow:0 0 0 1px rgba(94,234,212,.25), 0 0 90px -20px rgba(79,141,255,.6), 0 50px 100px -40px rgba(0,0,0,.8)}
.vidframe video{display:block; width:100%; height:100%; object-fit:cover; cursor:pointer}
.vid-sound{position:absolute; right:16px; bottom:18px; z-index:2; display:inline-flex; align-items:center; gap:8px; padding:9px 14px 9px 11px; border-radius:999px; cursor:pointer;
  font:600 13.5px/1 var(--font-sans); color:#fff; background:rgba(8,18,42,.72); border:1px solid rgba(143,180,255,.35); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  transition:background .2s, border-color .2s, transform .2s var(--ease)}
.vid-sound:hover{background:rgba(29,84,209,.85); border-color:rgba(143,180,255,.7); transform:translateY(-1px)}
.vid-sound:focus-visible{outline:2px solid #5eead4; outline-offset:2px}
.vid-sound svg{width:18px; height:18px}
.vid-sound .vs-on,.vidframe.vid-sound-on .vid-sound .vs-off,.vid-sound .vs-l-on,.vidframe.vid-sound-on .vs-l-off{display:none}
.vidframe.vid-sound-on .vid-sound .vs-on,.vidframe.vid-sound-on .vs-l-on{display:inline}
.vidframe:not(.vid-sound-on) .vid-sound{animation:vsPulse 2.4s var(--ease) infinite}
@keyframes vsPulse{0%,100%{box-shadow:0 0 0 0 rgba(94,234,212,.45)}50%{box-shadow:0 0 0 8px rgba(94,234,212,0)}}
.vid-progress{position:absolute; left:0; right:0; bottom:0; height:3px; background:rgba(255,255,255,.08); z-index:2}
.vid-progress i{display:block; height:100%; transform:scaleX(0); transform-origin:left; background:linear-gradient(90deg,#4f8dff,#5eead4)}
@media (prefers-reduced-motion: reduce){.vid-sound{animation:none !important}}
@media (max-width:600px){.vid-sound{right:10px; bottom:12px; padding:7px 10px} .vidframe{border-radius:14px}}
/* Phones: the sound button sits above the burned-in captions instead of on them. */
@media (max-width:600px){.vid-sound{top:10px; bottom:auto; font-size:12.5px}}
/* Pricing lead dialog (components/marketing/lead-form + public/pricing-lead.js) */
.leaddlg{border:0; padding:28px; border-radius:var(--r-xl); width:min(480px, calc(100vw - 24px)); max-height:calc(100dvh - 24px); overflow:auto; color:var(--text); background:var(--panel); box-shadow:var(--shadow-md)}
.leaddlg::backdrop{background:rgba(7,15,34,.62); backdrop-filter:blur(3px)}
.leaddlg h2{margin:0 0 6px; font-size:22px; line-height:1.25; padding-right:32px}
.leaddlg-intro{margin:0 0 18px; color:var(--muted); font-size:14.5px}
.leaddlg-x{position:absolute; top:12px; right:12px; width:36px; height:36px; border:0; border-radius:var(--r-md); background:transparent; color:var(--muted); font-size:26px; line-height:1; cursor:pointer}
.leaddlg-x:hover{background:var(--accent-soft); color:var(--text)}
.leaddlg label{display:block; margin:0 0 12px; font-size:13px; font-weight:600; color:var(--text-2)}
.leaddlg input,.leaddlg textarea{display:block; width:100%; margin-top:5px; border:1px solid var(--line); border-radius:var(--r-md); padding:10px 12px; font:inherit; font-size:16px; font-weight:400; color:var(--text); background:var(--bg); transition:border-color .2s, box-shadow .2s}
.leaddlg textarea{resize:vertical; min-height:76px}
.leaddlg input:focus,.leaddlg textarea:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); background:#fff}
.leaddlg .btn.big{width:100%; margin-top:6px}
.leaddlg-hp{position:absolute !important; left:-9999px; width:1px; height:1px; overflow:hidden}
.leaddlg-err{margin:0 0 10px; color:#b42318; font-size:14px}
.leaddlg-note{margin:12px 0 0; font-size:12.5px; color:var(--muted); text-align:center}
.leaddlg-ok{text-align:center; padding:12px 0}
.leaddlg-ok p{color:var(--muted); margin:0 0 18px}
.leaddlg [hidden]{display:none}
/* Client logo wall under the home hero (components/marketing/clients) */
.clients{padding:34px 0 30px; background:var(--panel); border-bottom:1px solid var(--line-soft)}
.clients-label{margin:0 0 18px; text-align:center; font-size:12px; font-weight:700; letter-spacing:.7px; text-transform:uppercase; color:var(--muted)}
.clients-list{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:22px 48px}
.clients-list li{display:flex; align-items:center; height:48px}
.clients-list img{display:block; width:auto; max-width:170px; filter:grayscale(1) brightness(0); opacity:.62; transition:filter .25s var(--ease), opacity .25s var(--ease)}
.clients-list li.is-boxed img{filter:grayscale(1); opacity:.7}
.clients-list li:hover img{filter:none; opacity:1}
.clients-list li.is-white:hover img{filter:brightness(0)}
@media (max-width:600px){.clients-list{gap:16px 28px} .clients-list img{max-width:118px; transform:scale(.88)}}