/* ═══════════════ ATNOS — design tokens ═══════════════ */
:root{
  --background:0 0% 100%; --surface:220 20% 97%;
  --ink:222 47% 11%; --ink-900:240 6% 6%; --muted:215 16% 47%;
  --line:220 22% 92%; --line-strong:218 20% 88%;
  --brand:221 83% 53%; --brand-600:224 76% 48%; --brand-50:222 100% 97%;
  --purple:262 83% 58%; --purple-50:260 100% 97%;
  --cyan:189 94% 43%; --cyan-50:186 100% 96%;
  --success:160 84% 39%; --error:0 84% 60%; --warning:38 92% 50%;
  --ease:cubic-bezier(.2,.7,.3,1); --ease-in:cubic-bezier(.16,.7,.3,1);
  --sans:'Inter',system-ui,sans-serif; --mono:'JetBrains Mono',ui-monospace,monospace;
}
*{box-sizing:border-box;border-color:hsl(var(--line))}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:hsl(var(--background));color:hsl(var(--ink));font-family:var(--sans);
  -webkit-font-smoothing:antialiased;font-feature-settings:"cv02","cv03","cv04","ss01";overflow-x:hidden}
h1,h2,h3,h4{margin:0;text-wrap:balance;font-weight:600}
p{margin:0;text-wrap:pretty}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
::selection{background:hsl(var(--brand)/.2)}
:focus-visible{outline:none;box-shadow:0 0 0 2px hsl(var(--background)),0 0 0 4px hsl(var(--brand));border-radius:4px}

.container{max-width:1280px;margin:0 auto;padding:0 24px}
@media(min-width:1024px){.container{padding:0 40px}}

/* type scale */
.t-display{font-size:clamp(2.75rem,5.4vw,5rem);line-height:1.04;letter-spacing:-.035em}
.t-section{font-size:clamp(2rem,3.4vw,3rem);line-height:1.1;letter-spacing:-.03em}
.t-subtitle{font-size:1.5rem;line-height:1.4;letter-spacing:-.015em}
.t-body{font-size:1.125rem;line-height:1.7}
.t-small{font-size:1rem;line-height:1.65}
.muted{color:hsl(var(--muted))}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* ═══════════════ buttons ═══════════════ */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border-radius:999px;font-weight:500;letter-spacing:-.01em;white-space:nowrap;cursor:pointer;
  border:1px solid transparent;overflow:hidden;font-family:var(--sans);
  transition:transform .3s var(--ease),background-color .3s,border-color .3s,box-shadow .3s}
.btn:active{transform:scale(.98)}
.btn-md{height:44px;padding:0 20px;font-size:16px}
.btn-sm{height:36px;padding:0 16px;font-size:15px}
.btn-lg{height:52px;padding:0 28px;font-size:16px}
.btn-accent{background:hsl(var(--brand));color:#fff;box-shadow:0 8px 28px -8px hsl(var(--brand)/.6)}
.btn-accent:hover{background:hsl(var(--brand-600));box-shadow:0 12px 36px -8px hsl(var(--brand)/.7)}
.btn-inverse{background:#fff;color:hsl(var(--ink));box-shadow:0 8px 28px -10px rgb(0 0 0/.6)}
.btn-inverse:hover{background:rgb(255 255 255/.9)}
.btn-glass{border-color:rgb(255 255 255/.15);background:rgb(255 255 255/.07);color:#fff;backdrop-filter:blur(20px)}
.btn-glass:hover{background:rgb(255 255 255/.12);border-color:rgb(255 255 255/.25)}
.btn-outline{border-color:hsl(var(--line-strong));background:hsl(var(--background));color:hsl(var(--ink))}
.btn-outline:hover{background:hsl(var(--surface));border-color:hsl(var(--ink)/.25)}
.btn-ghost{color:hsl(var(--muted))}
.btn-ghost:hover{background:hsl(var(--surface));color:hsl(var(--ink))}
.btn-ghost-inv{color:rgb(255 255 255/.7)}
.btn-ghost-inv:hover{background:rgb(255 255 255/.08);color:#fff}
.btn::before{content:"";position:absolute;inset:0;transform:translateX(-120%) skewX(12deg);
  background:linear-gradient(90deg,transparent,rgb(255 255 255/.25),transparent);
  transition:transform .7s var(--ease);pointer-events:none}
.btn-inverse::before,.btn-outline::before{background:linear-gradient(90deg,transparent,rgb(15 23 42/.08),transparent)}
.btn:hover::before{transform:translateX(120%) skewX(12deg)}
.btn>span{position:relative;z-index:1;display:inline-flex;align-items:center;gap:8px}
.btn .arw{transition:transform .3s var(--ease)}
.btn:hover .arw{transform:translateX(2px)}

/* ═══════════════ header ═══════════════ */
header.site{position:fixed;inset:0 0 auto;z-index:50;border-bottom:1px solid transparent;
  transition:background-color .5s var(--ease),border-color .5s var(--ease),backdrop-filter .5s}
header.site.solid{background:hsl(var(--ink-900)/.7);backdrop-filter:blur(24px);border-bottom-color:rgb(255 255 255/.08)}
.nav{display:flex;align-items:center;gap:32px;height:64px}
.logo{display:inline-flex;align-items:center;gap:10px;font-size:18px;font-weight:600;letter-spacing:-.03em;color:#fff}
.logo-mark{position:relative;display:grid;place-items:center;width:28px;height:28px;border-radius:9px;flex-shrink:0}
.logo-mark i{position:absolute;inset:0;border-radius:9px;background:rgb(255 255 255/.08);box-shadow:inset 0 0 0 1px rgb(255 255 255/.15)}
.logo-mark b{position:absolute;inset:0;border-radius:9px;opacity:.6;transition:opacity .5s;
  background:radial-gradient(circle at 50% 50%,hsl(var(--brand)/.55) 0%,transparent 62%)}
.logo:hover .logo-mark b{opacity:1}
.logo-mark svg{position:relative;width:19px;height:19px;color:#fff;
  filter:drop-shadow(0 0 6px hsl(var(--brand)/.5))}
.logo-mark .mk-a{opacity:.94;transition:opacity .5s}
.logo-mark .mk-core{transform-box:fill-box;transform-origin:center;
  transition:transform .45s var(--ease)}
.logo:hover .logo-mark .mk-a,.f-logo:hover .logo-mark .mk-a{opacity:1}
.logo:hover .logo-mark .mk-core,.f-logo:hover .logo-mark .mk-core{transform:scale(1.3)}
.nav-links{display:none;align-items:center;gap:2px;margin-left:auto}
@media(min-width:1024px){.nav-links{display:flex}}
.nav-link{position:relative;padding:8px 12px;border-radius:999px;font-size:15px;color:rgb(255 255 255/.65);
  transition:color .3s;background:none;border:0;font-family:var(--sans);cursor:pointer;display:inline-flex;align-items:center;gap:5px}
.nav-link:hover,.nav-link[aria-current=page]{color:#fff}
.nav-link::after{content:"";position:absolute;left:12px;right:12px;bottom:4px;height:1px;background:rgb(255 255 255/.6);
  transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.nav-link:hover::after,.nav-link[aria-current=page]::after{transform:scaleX(1)}
.nav-cta{display:flex;align-items:center;gap:8px;margin-left:16px}
/* language pill — same height as the small buttons next to it */
.lang-pill{display:inline-flex;align-items:center;justify-content:center;height:36px;
  padding:0 12px;border-radius:999px;border:1px solid rgb(255 255 255/.14);background:rgb(255 255 255/.05);
  font-size:13px;font-weight:600;letter-spacing:.06em;color:rgb(255 255 255/.75);
  font-family:var(--sans);cursor:pointer;
  transition:background-color .3s,border-color .3s,color .3s}
.lang-pill:hover{background:rgb(255 255 255/.1);border-color:rgb(255 255 255/.28);color:#fff}
.lang-pill span{display:inline-flex;align-items:center;gap:6px}
.lang-pill svg{opacity:.8}
.lang-wrap{display:inline-flex}
.lang-flyout{left:auto;right:0;min-width:180px}
.lang-flyout .fl-t{font-size:14px}
.lang-flyout .fl-d{display:inline;margin-left:8px;letter-spacing:.06em}
.lang-flyout a{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.lang-flyout a[aria-current]{background:rgb(255 255 255/.07)}
.lang-flyout a[aria-current] .fl-t{color:#fff}
/* the pill is a button, so the menu also opens on click for touch */
.flyout.open{opacity:1;visibility:visible;transform:none}
.mobile-menu .mm-cta .lang-wrap{flex:0 0 auto}
.mobile-menu .lang-flyout{bottom:calc(100% + 10px);top:auto;left:0;right:auto}
.burger{margin-left:auto;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;
  border:1px solid rgb(255 255 255/.12);color:rgb(255 255 255/.8);background:none;cursor:pointer;transition:border-color .3s,color .3s}
.burger:hover{border-color:rgb(255 255 255/.25);color:#fff}
@media(min-width:1024px){.burger{display:none}}

/* flyout menus */
.has-flyout{position:relative}
.flyout{position:absolute;top:calc(100% + 10px);left:-8px;min-width:300px;z-index:60;
  border:1px solid rgb(255 255 255/.1);background:hsl(var(--ink-900)/.92);backdrop-filter:blur(24px);
  border-radius:16px;padding:8px;box-shadow:0 30px 70px -20px rgb(0 0 0/.8);
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s}
.has-flyout:hover .flyout,.has-flyout:focus-within .flyout,.flyout.open{opacity:1;visibility:visible;transform:none}
/* Escape sets .shut; it has to outrank the hover and focus rules above */
.has-flyout.shut .flyout{opacity:0;visibility:hidden;transform:translateY(-6px)}
.flyout a{display:block;border-radius:10px;padding:10px 12px;transition:background-color .25s}
.flyout a:hover{background:rgb(255 255 255/.06)}
.flyout .fl-t{display:block;font-size:14.5px;font-weight:500;color:#fff}
.flyout .fl-d{display:block;margin-top:2px;font-size:12.5px;color:rgb(255 255 255/.5)}

/* mobile menu */
.mobile-menu{position:fixed;inset:64px 0 auto;z-index:49;background:hsl(var(--ink-900)/.97);backdrop-filter:blur(24px);
  border-bottom:1px solid rgb(255 255 255/.08);padding:16px 0 24px;display:none}
.mobile-menu.open{display:block}
@media(min-width:1024px){.mobile-menu{display:none!important}}
.mobile-menu a:not(.btn){display:block;padding:12px 0;font-size:16px;color:rgb(255 255 255/.75);border-bottom:1px solid rgb(255 255 255/.06)}
.mobile-menu a:not(.btn):hover{color:#fff}
.mobile-menu .mm-cta{display:flex;gap:8px;margin-top:20px}
.mobile-menu .mm-cta .btn-inverse{color:hsl(var(--ink))}
.mobile-menu .mm-cta .btn-glass{color:#fff}

/* ═══════════════ hero / dark bands ═══════════════ */
.hero{position:relative;isolation:isolate;overflow:hidden;background:hsl(var(--ink-900));padding-top:128px}
@media(min-width:640px){.hero{padding-top:160px}}
.bg{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.bloom{position:absolute;border-radius:50%;filter:blur(130px);transform:translate(-50%,-50%)}
.b1{left:14%;top:6%;width:44vw;height:44vw;background:radial-gradient(circle,hsl(var(--brand)/.22) 0%,transparent 70%);
  animation:d1 26s ease-in-out infinite}
.b2{left:84%;top:2%;width:38vw;height:38vw;background:radial-gradient(circle,hsl(var(--purple)/.18) 0%,transparent 70%);
  animation:d2 31s ease-in-out infinite}
.b3{left:56%;top:88%;width:50vw;height:50vw;background:radial-gradient(circle,hsl(var(--cyan)/.12) 0%,transparent 70%);
  animation:d3 37s ease-in-out infinite}
@keyframes d1{0%,100%{transform:translate(-50%,-50%) scale(1)}33%{transform:translate(calc(-50% + 40px),calc(-50% + 28px)) scale(1.12)}66%{transform:translate(calc(-50% - 24px),calc(-50% + 14px)) scale(.96)}}
@keyframes d2{0%,100%{transform:translate(-50%,-50%) scale(1)}33%{transform:translate(calc(-50% - 32px),calc(-50% + 36px)) scale(1.06)}66%{transform:translate(calc(-50% + 22px),calc(-50% - 16px)) scale(1.14)}}
@keyframes d3{0%,100%{transform:translate(-50%,-50%) scale(1)}33%{transform:translate(calc(-50% + 26px),calc(-50% - 22px)) scale(1.16)}66%{transform:translate(calc(-50% - 30px),calc(-50% + 10px)) scale(1.02)}}
.topglow{position:absolute;inset:0;background:radial-gradient(90% 60% at 50% 0%,hsl(var(--brand)/.12) 0%,transparent 65%)}
.grid-o{position:absolute;inset:0;opacity:.6;
  background-image:linear-gradient(rgb(255 255 255/.05) 1px,transparent 1px),linear-gradient(90deg,rgb(255 255 255/.05) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(80% 60% at 50% 0%,#000 10%,transparent 75%);
  mask-image:radial-gradient(80% 60% at 50% 0%,#000 10%,transparent 75%)}
.noise{position:absolute;inset:0;opacity:.05;mix-blend-mode:overlay;
  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='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}
#stars{position:absolute;inset:0}

.hero-in{text-align:center;max-width:768px;margin:0 auto}
.eyebrow{display:inline-flex;align-items:center;gap:8px;border:1px solid rgb(255 255 255/.12);
  background:rgb(255 255 255/.05);border-radius:999px;padding:6px 14px;font-size:13px;font-weight:500;
  color:rgb(255 255 255/.6);backdrop-filter:blur(20px)}
.dot{position:relative;display:flex;width:6px;height:6px;flex-shrink:0}
.dot i{position:absolute;inset:0;border-radius:50%;background:hsl(var(--brand)/.7);animation:ring 2.6s var(--ease) infinite}
.dot b{position:relative;width:6px;height:6px;border-radius:50%;background:hsl(var(--brand))}
.dot.ok i{background:hsl(var(--success)/.6)}.dot.ok b{background:hsl(var(--success))}
@keyframes ring{0%{transform:scale(.85);opacity:.55}100%{transform:scale(1.5);opacity:0}}
h1.hero-h{margin-top:32px;color:#fff}
h1.hero-h .block{display:block}
/* Lighter than the brand tokens on purpose: these sit as text on --ink-900,
   where hsl(221 83% 53%) only reaches ~3.6:1. These stops hold 6.5:1+ across
   the whole sweep. */
.accent-grad{background:linear-gradient(100deg,hsl(221 90% 68%),hsl(262 90% 74%) 46%,hsl(189 94% 60%));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero-body{margin:28px auto 0;max-width:46rem;color:rgb(255 255 255/.6)}
.hero-cta{margin-top:40px;display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.reassure{margin-top:32px;display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:center;font-size:13.5px;color:rgb(255 255 255/.4)}
.reassure li{display:inline-flex;align-items:center;gap:6px}
.tick{width:14px;height:14px;stroke:hsl(var(--success)/.8);stroke-width:2.5;fill:none;flex-shrink:0}

/* page hero (inner pages) */
.phero{position:relative;isolation:isolate;overflow:hidden;background:hsl(var(--ink-900));color:#fff;
  padding:152px 0 96px}
@media(min-width:640px){.phero{padding:176px 0 112px}}
.phero .eyebrow{margin-bottom:28px}
.phero h1{color:#fff;max-width:20ch}
.phero .lead{margin-top:24px;max-width:44rem;color:rgb(255 255 255/.6)}
.phero .hero-cta{justify-content:flex-start}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:20px;font-size:13px;color:rgb(255 255 255/.4)}
.crumbs a:hover{color:#fff}

/* word reveal */
.wr{display:inline-block;opacity:0;transform:translateY(.4em);filter:blur(8px)}
.wr.in{opacity:1;transform:none;filter:blur(0);transition:opacity .7s var(--ease-in),transform .7s var(--ease-in),filter .7s var(--ease-in)}

/* letter reveal — one glyph at a time, finer than the word stagger */
.lt{display:inline-block;opacity:0;transform:translateY(.42em) scale(.92);filter:blur(10px)}
.lt.in{opacity:1;transform:none;filter:blur(0);
  transition:opacity .5s var(--ease-in),transform .5s var(--ease-in),filter .5s var(--ease-in)}
.lt.sp{white-space:pre}
/* filter:blur(0) is still a filter — drop it once the entrance is over so no
   glyph stays promoted to its own layer */
.lt.done{filter:none}
/* a few glyphs keep breathing after the line has landed */
.lt.pulse{animation:lift 7s var(--ease) infinite;animation-delay:var(--pd,0s)}
@keyframes lift{0%,70%,100%{transform:none}78%{transform:translateY(-.075em)}86%{transform:none}}
/* Guard: a composited glyph cannot show the parent's background-clip:text
   fill and renders transparent. Keep persistent motion off the gradient line. */
.accent-grad .lt.pulse{animation:none}
/* slow highlight drifting across the gradient line — kept short so the line
   never sits on a single hue long enough to lose contrast */
.accent-grad{background-size:160% 100%;animation:sweep 16s var(--ease) infinite}
@keyframes sweep{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.fade{opacity:0;transform:translateY(16px)}
.fade.in{opacity:1;transform:none;transition:opacity .7s var(--ease-in),transform .7s var(--ease-in)}
.reveal{opacity:0;transform:translateY(18px);filter:blur(8px)}
.reveal.in{opacity:1;transform:none;filter:blur(0);
  transition:opacity .7s var(--ease-in),transform .7s var(--ease-in),filter .7s var(--ease-in)}

/* ═══════════════ dashboard preview ═══════════════ */
.preview-wrap{max-width:1024px;margin:64px auto 0;perspective:1200px}
@media(min-width:640px){.preview-wrap{margin-top:80px}}
.float{animation:float 9s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0) rotate(0)}25%{transform:translateY(-8px) rotate(.35deg)}
  50%{transform:translateY(0) rotate(0)}75%{transform:translateY(5px) rotate(-.35deg)}}
.window{border:1px solid rgb(255 255 255/.09);background:rgb(255 255 255/.04);border-radius:24px;overflow:hidden;
  backdrop-filter:blur(24px);box-shadow:inset 0 1px 0 0 rgb(255 255 255/.07),0 40px 120px -32px rgb(0 0 0/.7);
  transition:transform .4s var(--ease)}
.chrome{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid rgb(255 255 255/.07)}
.chrome s{width:10px;height:10px;border-radius:50%;background:rgb(255 255 255/.12)}
.chrome .path{margin-left:6px;font-family:var(--mono);font-size:11.5px;color:rgb(255 255 255/.4)}
.enc{margin-left:auto;display:inline-flex;align-items:center;gap:6px;border:1px solid rgb(255 255 255/.1);
  background:rgb(255 255 255/.05);border-radius:999px;padding:2px 10px;font-size:11px;color:rgb(255 255 255/.55)}
.pv{padding:12px;display:grid;gap:8px}
.panel{border:1px solid rgb(255 255 255/.07);border-radius:12px;padding:16px}
.panel-t{font-size:12px;font-weight:500;color:rgb(255 255 255/.55)}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.chip{display:inline-flex;align-items:center;gap:6px;border:1px solid rgb(255 255 255/.09);
  background:rgb(255 255 255/.04);border-radius:999px;padding:4px 10px;font-size:12px;color:rgb(255 255 255/.6)}
.pv-row{display:grid;gap:8px}
@media(min-width:640px){.pv-row{grid-template-columns:1.3fr 1fr}}
.appr{display:flex;align-items:center;justify-content:space-between;gap:8px;background:rgb(255 255 255/.04);
  border-radius:10px;padding:6px 10px;margin-top:6px;font-size:12.5px;color:rgb(255 255 255/.75)}
.badge-rev{flex-shrink:0;border:1px solid hsl(var(--warning)/.3);background:hsl(var(--warning)/.1);
  color:hsl(var(--warning));border-radius:999px;padding:2px 6px;font-size:10.5px;font-weight:500}
.act{display:flex;align-items:center;gap:10px;border:1px solid rgb(255 255 255/.06);background:rgb(255 255 255/.02);
  border-radius:10px;padding:8px 12px;margin-top:6px;animation:actin .4s var(--ease)}
@keyframes actin{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.act .ic{display:grid;place-items:center;width:16px;height:16px;border-radius:50%;flex-shrink:0}
.act .lbl{flex:1;min-width:0;font-size:12.5px;color:rgb(255 255 255/.8);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.act .ag{font-size:11px;color:rgb(255 255 255/.35);flex-shrink:0}
.act .md{flex-shrink:0;border-radius:999px;padding:2px 6px;font-size:10.5px;border:1px solid}
.md-auto{border-color:rgb(255 255 255/.1);background:rgb(255 255 255/.04);color:rgb(255 255 255/.45)}
.md-appr{border-color:hsl(var(--warning)/.3);background:hsl(var(--warning)/.1);color:hsl(var(--warning))}
.spin{width:10px;height:10px;border:1.5px solid hsl(var(--brand)/.3);border-top-color:hsl(var(--brand));
  border-radius:50%;animation:sp .8s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.pv-note{border-top:1px solid rgb(255 255 255/.07);padding:10px 16px;font-size:11px;color:rgb(255 255 255/.3)}
@media(max-width:639px){.act .ag,.act .md{display:none}}

/* section boundary */
.boundary{height:160px;width:100%;background:linear-gradient(to bottom,hsl(var(--ink-900)) 0%,hsl(var(--background)) 100%);margin-top:96px}
@media(min-width:640px){.boundary{margin-top:128px}}

/* ═══════════════ sections ═══════════════ */
section.sec{position:relative;overflow:hidden;padding:96px 0}
@media(min-width:640px){section.sec{padding:128px 0}}
.sec-sm{padding:72px 0}
.sec-surface{background:hsl(var(--surface))}
.sec-dark{background:hsl(var(--ink-900));color:#fff;isolation:isolate}
.sh{max-width:768px}
.sh.center{margin:0 auto;text-align:center}
.eyebrow-l{display:inline-flex;align-items:center;border:1px solid hsl(var(--line));background:hsl(var(--surface));
  border-radius:999px;padding:4px 12px;font-size:13px;font-weight:500;color:hsl(var(--muted))}
.sh h2{margin-top:24px}
.sh p{margin-top:20px}

/* tabs */
/* position:relative is load-bearing — it makes .tabs the containing block for
   .tab-bg. Without it the pill resolves against the blurred .reveal wrapper. */
.tabs{position:relative;display:inline-flex;align-items:center;gap:4px;border:1px solid hsl(var(--line));
  background:hsl(var(--surface));border-radius:999px;padding:4px;margin-top:48px}
.tab{position:relative;border:0;background:none;border-radius:999px;padding:8px 16px;font-size:15px;
  color:hsl(var(--muted));cursor:pointer;font-family:var(--sans);transition:color .3s}
.tab[aria-selected=true]{color:hsl(var(--ink))}
.tab-bg{position:absolute;top:4px;bottom:4px;left:0;width:0;border-radius:999px;background:hsl(var(--background));
  box-shadow:0 1px 2px rgb(15 23 42/.04),0 8px 24px -12px rgb(15 23 42/.1);
  transition:transform .35s var(--ease),width .35s var(--ease)}
.tab span{position:relative}
.showcase{position:relative;margin-top:32px;border:1px solid hsl(var(--line));background:hsl(var(--surface)/.6);
  border-radius:24px;padding:8px;box-shadow:0 1px 2px rgb(15 23 42/.04),0 20px 48px -16px rgb(15 23 42/.16);overflow:hidden}
.showcase-in{background:hsl(var(--background));border-radius:16px;padding:16px}
.lpanel{border:1px solid hsl(var(--line));border-radius:12px;padding:16px}
.metric-v{margin-top:6px;font-family:var(--mono);font-size:26px;font-weight:600;letter-spacing:-.02em}
.bar{height:6px;flex:1;border-radius:999px;background:hsl(var(--line));overflow:hidden}
.bar b{display:block;height:100%;border-radius:999px;background:hsl(var(--brand));width:0;transition:width 1s var(--ease-in)}
.crow{display:flex;align-items:center;gap:12px;margin-top:10px}
.crow .nm{width:112px;flex-shrink:0;font-size:12.5px;color:hsl(var(--muted))}
.crow .pc{width:36px;text-align:right;font-family:var(--mono);font-size:11.5px;color:hsl(var(--muted))}

/* capability blocks */
.caps{display:grid;gap:16px;margin-top:56px}
@media(min-width:1024px){.caps{grid-template-columns:1fr 1fr}}
.cap{position:relative;height:100%;display:flex;flex-direction:column;border:1px solid hsl(var(--line));
  background:hsl(var(--background));border-radius:16px;padding:32px;overflow:hidden;
  transition:border-color .5s,box-shadow .5s,transform .4s var(--ease)}
@media(min-width:640px){.cap{padding:40px}}
.cap:hover{border-color:hsl(var(--line-strong));box-shadow:0 1px 2px rgb(15 23 42/.04),0 20px 48px -16px rgb(15 23 42/.16);transform:translateY(-2px)}
.cap .rule{position:absolute;inset:0 0 auto;height:1px;transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease)}
.cap:hover .rule{transform:scaleX(1)}
.cap .ico{display:grid;place-items:center;width:48px;height:48px;border-radius:12px;transition:background-color .5s,color .5s}
.cap h3{margin-top:28px;font-size:28px;letter-spacing:-.025em}
@media(min-width:640px){.cap h3{font-size:32px}}
.cap>p{margin-top:12px;max-width:38ch}
.surfaces{margin-top:auto;padding-top:32px;display:flex;flex-wrap:wrap;gap:6px}
.surfaces li{border:1px solid hsl(var(--line));background:hsl(var(--surface));border-radius:999px;
  padding:4px 10px;font-size:12.5px;color:hsl(var(--muted));opacity:0;transform:translateY(4px);
  transition:opacity .5s var(--ease),transform .5s var(--ease)}
.cap:hover .surfaces li{opacity:1;transform:none}
.cap:hover .surfaces li:nth-child(2){transition-delay:60ms}
.cap:hover .surfaces li:nth-child(3){transition-delay:120ms}

/* trust cards */
.trust{display:grid;gap:16px;margin-top:56px}
@media(min-width:640px){.trust{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){.trust{grid-template-columns:repeat(3,1fr)}}
.tcard{height:100%;display:flex;flex-direction:column;border:1px solid hsl(var(--line));
  background:hsl(var(--background));border-radius:16px;padding:24px;
  transition:border-color .5s,box-shadow .5s,transform .4s var(--ease)}
.tcard:hover{border-color:hsl(var(--line-strong));transform:translateY(-2px);
  box-shadow:0 1px 2px rgb(15 23 42/.04),0 20px 48px -16px rgb(15 23 42/.16)}
.tcard .ico{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;
  border:1px solid hsl(var(--line));background:hsl(var(--surface));color:hsl(var(--muted));transition:border-color .5s,color .5s}
.tcard:hover .ico{border-color:hsl(var(--line-strong));color:hsl(var(--ink))}
.badge{flex-shrink:0;border-radius:999px;border:1px solid;padding:2px 10px;font-size:12px;font-weight:500;white-space:nowrap}
.b-ok{border-color:hsl(var(--success)/.25);background:hsl(var(--success)/.1);color:hsl(var(--success))}
.b-plan{border-color:hsl(var(--warning)/.3);background:hsl(var(--warning)/.1);color:hsl(var(--warning))}
.b-neutral{border-color:hsl(var(--line-strong));background:hsl(var(--surface));color:hsl(var(--muted))}
.note{display:flex;gap:12px;align-items:flex-start;margin-top:24px;border:1px solid hsl(var(--line));
  background:hsl(var(--background));border-radius:16px;padding:20px}
.note p{font-size:14.5px;line-height:1.7;color:hsl(var(--muted))}
.note.warn{border-color:hsl(var(--warning)/.3);background:hsl(var(--warning)/.06)}

/* integration network */
.net{position:relative;max-width:620px;margin:64px auto 0}
.net svg{width:100%;overflow:visible}
.net-detail{margin-top:16px;min-height:24px;text-align:center;font-size:14px;color:hsl(var(--muted))}
.node{cursor:default}
.node circle.hit{fill:transparent}
.node text{font-size:12px;fill:hsl(var(--muted));transition:fill .3s}
.node.on text{fill:hsl(var(--ink));font-weight:500}
.assure{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 32px;margin-top:48px;font-size:15px;color:hsl(var(--muted))}
.assure li{display:inline-flex;align-items:center;gap:8px}

/* ═══════════════ content primitives (inner pages) ═══════════════ */
.prose{max-width:44rem}
.prose h2{margin-top:56px;font-size:1.75rem;letter-spacing:-.025em}
.prose h2:first-child{margin-top:0}
.prose h3{margin-top:36px;font-size:1.15rem;letter-spacing:-.015em}
.prose p{margin-top:16px;font-size:1.0625rem;line-height:1.75;color:hsl(var(--muted))}
.prose p strong,.prose li strong{color:hsl(var(--ink));font-weight:600}
.prose ul.bullets{margin-top:16px;display:grid;gap:10px}
.prose ul.bullets li{position:relative;padding-left:22px;font-size:1.0625rem;line-height:1.7;color:hsl(var(--muted))}
.prose ul.bullets li::before{content:"";position:absolute;left:4px;top:11px;width:6px;height:6px;border-radius:50%;background:hsl(var(--brand)/.5)}
.prose ol.steps{margin-top:24px;display:grid;gap:20px;counter-reset:s}
.prose ol.steps li{position:relative;padding-left:44px;counter-increment:s}
.prose ol.steps li::before{content:counter(s);position:absolute;left:0;top:0;display:grid;place-items:center;
  width:28px;height:28px;border-radius:50%;background:hsl(var(--brand-50));color:hsl(var(--brand));
  font-size:13px;font-weight:600;font-family:var(--mono)}
.prose ol.steps h3{margin-top:0}
.prose ol.steps p{margin-top:6px}
code{font-family:var(--mono);font-size:.875em;background:hsl(var(--surface));border:1px solid hsl(var(--line));
  border-radius:6px;padding:1px 6px;color:hsl(var(--ink))}

/* two column layout */
.cols{display:grid;gap:48px}
@media(min-width:1024px){.cols{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:64px;align-items:start}}
.side{position:sticky;top:96px;border:1px solid hsl(var(--line));border-radius:16px;padding:24px;background:hsl(var(--surface)/.6)}
.side h3{font-size:12.5px;font-weight:600;text-transform:uppercase;letter-spacing:.14em;color:hsl(var(--muted)/.7)}
.side a{display:block;padding:7px 0;font-size:14.5px;color:hsl(var(--muted));transition:color .3s}
.side a:hover{color:hsl(var(--ink))}

/* tables */
.tbl-wrap{margin-top:32px;overflow-x:auto;border:1px solid hsl(var(--line));border-radius:16px;background:hsl(var(--background))}
table.tbl{width:100%;border-collapse:collapse;min-width:520px}
table.tbl caption{text-align:left;padding:20px 24px 0;font-size:12.5px;font-weight:600;
  text-transform:uppercase;letter-spacing:.14em;color:hsl(var(--muted)/.7)}
table.tbl th{text-align:left;padding:16px 24px;font-size:12.5px;font-weight:600;letter-spacing:.02em;
  color:hsl(var(--muted));border-bottom:1px solid hsl(var(--line));white-space:nowrap}
table.tbl td{padding:16px 24px;font-size:15px;line-height:1.6;color:hsl(var(--muted));border-bottom:1px solid hsl(var(--line));vertical-align:top}
table.tbl tr:last-child td{border-bottom:0}
table.tbl td:first-child{color:hsl(var(--ink));font-weight:500}
table.tbl td.mono{font-family:var(--mono);font-size:13px}
table.tbl tbody tr{transition:background-color .3s}
table.tbl tbody tr:hover{background:hsl(var(--surface)/.7)}

/* card grid */
.grid-3{display:grid;gap:16px;margin-top:40px}
@media(min-width:640px){.grid-3{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){.grid-3{grid-template-columns:repeat(3,1fr)}}
.grid-2{display:grid;gap:16px;margin-top:40px}
@media(min-width:768px){.grid-2{grid-template-columns:1fr 1fr}}
.card{border:1px solid hsl(var(--line));background:hsl(var(--background));border-radius:16px;padding:24px;
  transition:border-color .5s,box-shadow .5s,transform .4s var(--ease)}
.card:hover{border-color:hsl(var(--line-strong));transform:translateY(-2px);
  box-shadow:0 1px 2px rgb(15 23 42/.04),0 20px 48px -16px rgb(15 23 42/.16)}
.card h3{font-size:17px;letter-spacing:-.015em}
.card p{margin-top:10px;font-size:15px;line-height:1.7;color:hsl(var(--muted))}
.card .top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:20px}
.card a.mail{display:inline-block;margin-top:12px;font-family:var(--mono);font-size:13.5px;color:hsl(var(--brand));
  text-underline-offset:4px}
.card a.mail:hover{text-decoration:underline}

/* FAQ */
.faq{margin-top:40px;border:1px solid hsl(var(--line));border-radius:16px;overflow:hidden;background:hsl(var(--background))}
.faq details{border-bottom:1px solid hsl(var(--line))}
.faq details:last-child{border-bottom:0}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:20px 24px;cursor:pointer;
  font-size:16px;font-weight:500;list-style:none;transition:background-color .3s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{background:hsl(var(--surface)/.7)}
.faq summary .pm{flex-shrink:0;transition:transform .35s var(--ease);color:hsl(var(--muted))}
.faq details[open] summary .pm{transform:rotate(45deg)}
.faq .ans{padding:0 24px 22px;max-width:52rem}
.faq .ans p{font-size:15.5px;line-height:1.75;color:hsl(var(--muted))}

/* status list */
.status-list{margin-top:40px;border:1px solid hsl(var(--line));border-radius:16px;overflow:hidden;background:hsl(var(--background))}
.status-row{display:flex;align-items:center;gap:16px;padding:18px 24px;border-bottom:1px solid hsl(var(--line))}
.status-row:last-child{border-bottom:0}
.status-row .nm{font-size:15.5px;font-weight:500}
.status-row .ds{display:block;margin-top:2px;font-size:13.5px;color:hsl(var(--muted))}
.status-row .st{margin-left:auto;display:inline-flex;align-items:center;gap:8px;font-size:13.5px;
  color:hsl(var(--success));font-weight:500;white-space:nowrap}
.status-banner{display:flex;align-items:center;gap:14px;border:1px solid hsl(var(--success)/.25);
  background:hsl(var(--success)/.08);border-radius:16px;padding:20px 24px;margin-top:8px}

/* code block */
.code{margin-top:24px;border:1px solid hsl(var(--line));border-radius:16px;overflow:hidden;background:hsl(var(--ink-900))}
.code .code-h{display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid rgb(255 255 255/.08)}
.code .code-h span{font-family:var(--mono);font-size:11.5px;color:rgb(255 255 255/.4)}
.code pre{margin:0;padding:20px;overflow-x:auto;font-family:var(--mono);font-size:13px;line-height:1.7;
  color:rgb(255 255 255/.8)}
.code .k{color:hsl(var(--cyan))}
.code .s{color:hsl(var(--success))}
.code .c{color:rgb(255 255 255/.35)}

/* form */
.form{margin-top:8px;display:grid;gap:20px;max-width:36rem}
.field{display:grid;gap:8px}
.field label{font-size:14px;font-weight:500}
.field input,.field select,.field textarea{width:100%;border:1px solid hsl(var(--line-strong));border-radius:12px;
  background:hsl(var(--background));padding:12px 14px;font-family:var(--sans);font-size:15px;color:hsl(var(--ink));
  transition:border-color .3s,box-shadow .3s}
.field textarea{min-height:132px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:hsl(var(--brand));
  box-shadow:0 0 0 4px hsl(var(--brand)/.12)}
.consent{display:flex;gap:12px;align-items:flex-start;font-size:14px;line-height:1.6;color:hsl(var(--muted))}
.consent input{margin-top:2px;width:18px;height:18px;accent-color:hsl(var(--brand));flex-shrink:0}
.form-msg{display:none;align-items:center;gap:10px;border:1px solid hsl(var(--success)/.25);
  background:hsl(var(--success)/.08);border-radius:12px;padding:14px 16px;font-size:14.5px;color:hsl(var(--success))}
.form-msg.show{display:flex}

/* legal banner */
.legal-banner{display:flex;gap:12px;align-items:flex-start;border:1px solid hsl(var(--warning)/.3);
  background:hsl(var(--warning)/.1);border-radius:14px;padding:14px 18px;margin-bottom:32px}
.legal-banner p{font-size:14px;line-height:1.6;color:hsl(38 60% 32%)}

/* footer */
footer.site{border-top:1px solid hsl(var(--line));background:hsl(var(--background))}
.f-grid{display:grid;gap:48px;padding:64px 0}
@media(min-width:1024px){.f-grid{grid-template-columns:1.6fr repeat(3,1fr)}}
@media(min-width:1280px){.f-grid{grid-template-columns:1.6fr repeat(6,1fr);gap:32px}}
.f-h{margin-bottom:16px;font-size:12.5px;font-weight:600;text-transform:uppercase;letter-spacing:.14em;color:hsl(var(--muted)/.7)}
.f-l{display:block;font-size:15px;color:hsl(var(--muted));padding:5px 0;position:relative;transition:color .3s;width:fit-content}
.f-l:hover{color:hsl(var(--ink))}
.f-l::after{content:"";position:absolute;left:0;bottom:3px;width:100%;height:1px;background:hsl(var(--ink)/.3);
  transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.f-l:hover::after{transform:scaleX(1)}
.f-bot{display:flex;flex-direction:column;gap:16px;padding:32px 0;font-size:14px;color:hsl(var(--muted))}
@media(min-width:640px){.f-bot{flex-direction:row;align-items:center;justify-content:space-between}}
.f-util{display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px}
.f-util a,.f-util button{color:inherit;background:none;border:0;font:inherit;cursor:pointer;padding:0;transition:color .3s}
.f-util a:hover,.f-util button:hover{color:hsl(var(--ink))}
.f-logo{display:inline-flex;align-items:center;gap:10px;font-size:18px;font-weight:600;letter-spacing:-.03em;color:hsl(var(--ink))}
.f-logo .logo-mark i{background:hsl(var(--ink));box-shadow:inset 0 0 0 1px rgb(255 255 255/.1)}

/* cookie banner */
.cookie{position:fixed;inset:auto 0 0;z-index:60;padding:16px;transform:translateY(140%);transition:transform .45s var(--ease-in)}
@media(min-width:640px){.cookie{padding:24px}}
.cookie.show{transform:none}
.cookie-in{max-width:768px;margin:0 auto;border:1px solid hsl(var(--line));background:hsl(var(--background)/.96);
  border-radius:16px;padding:20px;backdrop-filter:blur(20px);
  box-shadow:0 1px 2px rgb(15 23 42/.04),0 20px 48px -16px rgb(15 23 42/.16)}
@media(min-width:640px){.cookie-in{padding:24px}}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  html{scroll-behavior:auto}
  .reveal,.wr,.fade,.lt{opacity:1!important;transform:none!important;filter:none!important}
}