/* Blue Growth — color system. Sampled from the reference capture page.
   Single dark theme: the brand is natively dark. No light theme. */
:root{
/* --- Base scale: near-black with a blue cast --- */
--void:#05070c;--ink-950:#0a0c13;--ink-900:#0d1018;--ink-850:#10141d;--ink-800:#151a24;--ink-700:#1c222e;--ink-600:#252c3a;--ink-500:#323a4a;

/* --- Electric blue: the brand core (#023dfd sampled from logo + highlight card) --- */
--blue-900:#040f4d;--blue-800:#07198f;--blue-700:#0a28c9;--blue-600:#0233e0;--blue-500:#023dfd;--blue-400:#3271fd;--blue-300:#6b9cff;--blue-200:#a8c4ff;--blue-100:#d9e5ff;
/* Light-emitting blue used for glows, streaks and neon strokes */
--blue-glow:#047dfc;--cyan-glow:#5fd4ff;

/* --- Neon green: conversion CTA only (sampled from the page button gradient) --- */
--green-300:#c9fb52;--green-400:#8ef12b;--green-500:#46d10c;--green-600:#22a305;--green-700:#137002;

/* --- Silver: the "negative list" card and inverted surfaces --- */
--silver-50:#f5f6f8;--silver-100:#e7e8ea;--silver-200:#c3c3c4;--silver-300:#9a9b9e;

/* --- Status --- */
--red-500:#ff4b5c;--red-600:#d92b3c;--amber-500:#ffb020;--amber-600:#d98c05;

/* --- Semantic: surfaces --- */
--surface-canvas:var(--ink-950);
--surface-sunken:var(--void);
--surface-card:var(--ink-900);
--surface-card-hover:var(--ink-850);
--surface-raised:var(--ink-850);
--surface-overlay:var(--ink-800);
--surface-input:#0b0e16;
--surface-inverted:var(--silver-50);
--surface-accent:var(--blue-500);
--surface-accent-soft:rgba(2,61,253,.12);
--surface-success-soft:rgba(70,209,12,.12);
--surface-danger-soft:rgba(255,75,92,.12);
--surface-warning-soft:rgba(255,176,32,.12);

/* --- Semantic: text --- */
--text-hi:#ffffff;
--text-body:#c9cfda;
--text-muted:#8a93a6;
--text-dim:#5c6478;
--text-disabled:#3d4454;
--text-accent:var(--blue-300);
--text-on-accent:#ffffff;
--text-on-inverted:var(--ink-950);
--text-on-green:#08230b;
--text-success:#7ee34a;
--text-danger:#ff7a86;
--text-warning:#ffc75c;

/* --- Semantic: strokes --- */
--stroke-subtle:rgba(255,255,255,.06);
--stroke:rgba(255,255,255,.10);
--stroke-strong:rgba(255,255,255,.18);
--stroke-accent:rgba(2,61,253,.55);
--stroke-focus:var(--blue-400);
--stroke-inverted:rgba(10,12,19,.12);

/* --- Data-viz ramp (dashboard charts) --- */
--viz-1:var(--blue-500); /* @kind color */--viz-2:var(--blue-glow); /* @kind color */--viz-3:var(--cyan-glow); /* @kind color */--viz-4:var(--green-500); /* @kind color */--viz-5:#7d5cff; /* @kind color */--viz-6:var(--amber-500); /* @kind color */--viz-track:rgba(255,255,255,.07); /* @kind color */

/* --- Gradients lifted from the artwork --- */
--grad-cta:linear-gradient(180deg,var(--green-300) 0%,var(--green-400) 34%,var(--green-500) 68%,var(--green-600) 100%); /* @kind color */
--grad-accent-bar:linear-gradient(90deg,var(--blue-glow),var(--blue-500)); /* @kind color */
--grad-card-glow:linear-gradient(180deg,rgba(2,61,253,0) 42%,rgba(2,61,253,.16) 100%); /* @kind color */
--grad-blue-card:linear-gradient(155deg,#2f6bfd 0%,#023dfd 52%,#0a28c9 100%); /* @kind color */
--grad-silver-card:linear-gradient(160deg,#f7f8fa 0%,#e2e3e6 46%,#bfbfc2 100%); /* @kind color */
--grad-canvas-glow:radial-gradient(90% 60% at 12% 0%,rgba(4,125,252,.18) 0%,rgba(4,125,252,0) 60%); /* @kind color */
--grad-protect-bottom:linear-gradient(180deg,rgba(5,7,12,0) 0%,rgba(5,7,12,.86) 68%,var(--void) 100%); /* @kind color */
}

/* Blue Growth — typography. One grotesque for everything, mono for figures. */
:root{
--font-display:"Archivo","Helvetica Neue",Helvetica,system-ui,sans-serif;
--font-ui:"Archivo","Helvetica Neue",Helvetica,system-ui,sans-serif;
--font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

--fw-light:300; /* @kind font */--fw-regular:400; /* @kind font */--fw-medium:500; /* @kind font */--fw-semibold:600; /* @kind font */--fw-bold:700; /* @kind font */--fw-extrabold:800; /* @kind font */

/* Display — marketing headlines. Light weight + bold second line is the brand move. */
--fs-display-xl:64px; /* @kind font */--lh-display-xl:1.02; /* @kind font */--ls-display-xl:-.03em; /* @kind font */
--fs-display-lg:48px; /* @kind font */--lh-display-lg:1.05; /* @kind font */--ls-display-lg:-.028em; /* @kind font */
--fs-display-md:36px; /* @kind font */--lh-display-md:1.1; /* @kind font */--ls-display-md:-.024em; /* @kind font */

/* Headings — product UI */
--fs-h1:28px; /* @kind font */--lh-h1:1.15; /* @kind font */--ls-h1:-.02em; /* @kind font */
--fs-h2:22px; /* @kind font */--lh-h2:1.2; /* @kind font */--ls-h2:-.018em; /* @kind font */
--fs-h3:18px; /* @kind font */--lh-h3:1.3; /* @kind font */--ls-h3:-.014em; /* @kind font */
--fs-h4:16px; /* @kind font */--lh-h4:1.35; /* @kind font */--ls-h4:-.01em; /* @kind font */

/* Body + UI */
--fs-body-lg:16px; /* @kind font */--lh-body-lg:1.55; /* @kind font */
--fs-body:14px; /* @kind font */--lh-body:1.55; /* @kind font */
--fs-sm:13px; /* @kind font */--lh-sm:1.5; /* @kind font */
--fs-xs:12px; /* @kind font */--lh-xs:1.45; /* @kind font */
--fs-micro:11px; /* @kind font */--lh-micro:1.35; /* @kind font */--ls-micro:.08em; /* @kind font */

/* Metrics — tabular mono for every number a dashboard shows */
--fs-metric-xl:40px; /* @kind font */--fs-metric-lg:30px; /* @kind font */--fs-metric-md:22px; /* @kind font */--fs-metric-sm:16px; /* @kind font */
--ls-metric:-.02em; /* @kind font */--lh-metric:1.05; /* @kind font */

--ls-eyebrow:.14em; /* @kind font */
}
.bg-display-xl,.bg-display-lg,.bg-display-md{font-family:var(--font-display);color:var(--text-hi);text-wrap:pretty}
.bg-display-xl{font-size:var(--fs-display-xl);line-height:var(--lh-display-xl);letter-spacing:var(--ls-display-xl);font-weight:var(--fw-light)}
.bg-display-lg{font-size:var(--fs-display-lg);line-height:var(--lh-display-lg);letter-spacing:var(--ls-display-lg);font-weight:var(--fw-light)}
.bg-display-md{font-size:var(--fs-display-md);line-height:var(--lh-display-md);letter-spacing:var(--ls-display-md);font-weight:var(--fw-light)}
.bg-display-xl strong,.bg-display-lg strong,.bg-display-md strong{font-weight:var(--fw-bold)}
.bg-h1{font:var(--fw-semibold) var(--fs-h1)/var(--lh-h1) var(--font-display);letter-spacing:var(--ls-h1);color:var(--text-hi)}
.bg-h2{font:var(--fw-semibold) var(--fs-h2)/var(--lh-h2) var(--font-display);letter-spacing:var(--ls-h2);color:var(--text-hi)}
.bg-h3{font:var(--fw-semibold) var(--fs-h3)/var(--lh-h3) var(--font-ui);letter-spacing:var(--ls-h3);color:var(--text-hi)}
.bg-h4{font:var(--fw-semibold) var(--fs-h4)/var(--lh-h4) var(--font-ui);letter-spacing:var(--ls-h4);color:var(--text-hi)}
.bg-body-lg{font:var(--fw-regular) var(--fs-body-lg)/var(--lh-body-lg) var(--font-ui);color:var(--text-body)}
.bg-body{font:var(--fw-regular) var(--fs-body)/var(--lh-body) var(--font-ui);color:var(--text-body)}
.bg-sm{font:var(--fw-regular) var(--fs-sm)/var(--lh-sm) var(--font-ui);color:var(--text-muted)}
.bg-xs{font:var(--fw-regular) var(--fs-xs)/var(--lh-xs) var(--font-ui);color:var(--text-muted)}
.bg-eyebrow{font:var(--fw-semibold) var(--fs-micro)/var(--lh-micro) var(--font-ui);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--text-dim)}
.bg-metric{font-family:var(--font-mono);font-weight:var(--fw-medium);letter-spacing:var(--ls-metric);line-height:var(--lh-metric);color:var(--text-hi);font-variant-numeric:tabular-nums}

/* Blue Growth — spacing, radii, sizing, layout. 4px base grid. */
:root{
--sp-0:0; /* @kind spacing */--sp-1:4px; /* @kind spacing */--sp-2:8px; /* @kind spacing */--sp-3:12px; /* @kind spacing */--sp-4:16px; /* @kind spacing */--sp-5:20px; /* @kind spacing */--sp-6:24px; /* @kind spacing */--sp-7:28px; /* @kind spacing */--sp-8:32px; /* @kind spacing */--sp-10:40px; /* @kind spacing */--sp-12:48px; /* @kind spacing */--sp-14:56px; /* @kind spacing */--sp-16:64px; /* @kind spacing */--sp-20:80px; /* @kind spacing */--sp-24:96px; /* @kind spacing */--sp-32:128px; /* @kind spacing */

/* Radii — the artwork rounds generously; pills only for actions */
--r-xs:6px; /* @kind radius */--r-sm:8px; /* @kind radius */--r-md:12px; /* @kind radius */--r-lg:16px; /* @kind radius */--r-xl:20px; /* @kind radius */--r-2xl:28px; /* @kind radius */--r-3xl:36px; /* @kind radius */--r-pill:999px; /* @kind radius */--r-circle:50%; /* @kind radius */

/* Control heights */
--control-sm:32px; /* @kind spacing */--control-md:40px; /* @kind spacing */--control-lg:48px; /* @kind spacing */--control-xl:56px; /* @kind spacing */
--tap-min:44px; /* @kind spacing */ /* never smaller on mobile */;

/* Dashboard layout */
--sidebar-w:248px; /* @kind spacing */--sidebar-w-collapsed:72px; /* @kind spacing */--topbar-h:64px; /* @kind spacing */
--mobile-nav-h:64px; /* @kind spacing */--content-max:1440px; /* @kind spacing */--page-pad-x:32px; /* @kind spacing */--page-pad-x-mobile:16px; /* @kind spacing */
--card-pad:20px; /* @kind spacing */--card-pad-lg:24px; /* @kind spacing */--card-gap:16px; /* @kind spacing */

/* Marketing layout */
--section-y:96px; /* @kind spacing */--section-y-mobile:56px; /* @kind spacing */--prose-max:640px; /* @kind spacing */
}

/* Blue Growth — elevation, glow, borders, blur.
   Shadows are barely visible on near-black: depth comes from GLOW + 1px strokes. */
:root{
/* Ambient depth (used sparingly — dark on dark) */
--shadow-xs:0 1px 2px rgba(0,0,0,.6); /* @kind shadow */
--shadow-sm:0 2px 8px rgba(0,0,0,.5); /* @kind shadow */
--shadow-md:0 8px 24px rgba(0,0,0,.55); /* @kind shadow */
--shadow-lg:0 20px 48px rgba(0,0,0,.6); /* @kind shadow */
--shadow-overlay:0 32px 80px rgba(0,0,0,.72); /* @kind shadow */

/* Blue light — the brand's real elevation system */
--glow-blue-sm:0 0 0 1px rgba(2,61,253,.32),0 4px 18px rgba(2,61,253,.18); /* @kind shadow */
--glow-blue-md:0 0 24px rgba(4,125,252,.28); /* @kind shadow */
--glow-blue-lg:0 0 64px rgba(4,125,252,.34); /* @kind shadow */
--glow-blue-inset:inset 0 -40px 60px -40px rgba(2,61,253,.42); /* @kind shadow */
--glow-green:0 0 22px rgba(70,209,12,.45),0 0 60px rgba(70,209,12,.22); /* @kind shadow */
--glow-green-strong:0 0 28px rgba(142,241,43,.6),0 0 72px rgba(70,209,12,.32); /* @kind shadow */
--glow-focus:0 0 0 3px rgba(2,61,253,.38); /* @kind shadow */
--glow-danger:0 0 0 3px rgba(255,75,92,.28); /* @kind shadow */

/* Strokes */
--border-hairline:1px solid var(--stroke-subtle); /* @kind other */
--border-card:1px solid var(--stroke); /* @kind other */
--border-strong:1px solid var(--stroke-strong); /* @kind other */
--border-accent:1px solid var(--stroke-accent); /* @kind other */

/* Inner highlight — top edge catching light, present on every card in the artwork */
--inner-top-light:inset 0 1px 0 rgba(255,255,255,.07); /* @kind shadow */
--inner-top-light-strong:inset 0 1px 0 rgba(255,255,255,.14); /* @kind shadow */

/* Composed card recipes */
--elev-card:var(--shadow-sm),var(--inner-top-light); /* @kind shadow */
--elev-card-hover:var(--shadow-md),var(--inner-top-light-strong),0 0 32px rgba(4,125,252,.14); /* @kind shadow */
--elev-accent-card:var(--shadow-md),var(--inner-top-light-strong),0 0 48px rgba(2,61,253,.35); /* @kind shadow */

/* Glass / blur */
--blur-sm:blur(8px); /* @kind other */--blur-md:blur(16px); /* @kind other */--blur-lg:blur(28px); /* @kind other */
--glass-bg:rgba(13,16,24,.72); /* @kind color */
--glass-bg-strong:rgba(10,12,19,.88); /* @kind color */
--scrim:rgba(5,7,12,.72); /* @kind color */

/* Signature accent tab: the short gradient bar sitting on a card's top edge */
--accent-tab-w:64px; /* @kind spacing */--accent-tab-h:4px; /* @kind spacing */
}

/* Blue Growth — motion. Calm and short: this brand sells control, not flash. */
:root{
--dur-instant:80ms; /* @kind other */--dur-fast:140ms; /* @kind other */--dur-base:200ms; /* @kind other */--dur-slow:320ms; /* @kind other */--dur-slower:520ms; /* @kind other */
--ease-out:cubic-bezier(.16,1,.3,1); /* @kind other */
--ease-in-out:cubic-bezier(.4,0,.2,1); /* @kind other */
--ease-in:cubic-bezier(.4,0,1,1); /* @kind other */
--ease-glow:cubic-bezier(.45,0,.2,1); /* @kind other */
--t-color:color var(--dur-fast) var(--ease-out),background-color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out); /* @kind other */
--t-elevate:box-shadow var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out); /* @kind other */
--t-all:all var(--dur-base) var(--ease-out); /* @kind other */
--marquee-dur:38s; /* @kind other */
}
@media (prefers-reduced-motion:reduce){:root{
--dur-fast:1ms; /* @kind other */
--dur-base:1ms; /* @kind other */
--dur-slow:1ms; /* @kind other */
--dur-slower:1ms; /* @kind other */
--marquee-dur:0s; /* @kind other */
}}
@keyframes bg-marquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@keyframes bg-fade-up{from{opacity:0;transform:translate3d(0,12px,0)}to{opacity:1;transform:none}}
@keyframes bg-pulse-glow{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes bg-shimmer{from{background-position:-200% 0}to{background-position:200% 0}}
@keyframes bg-spin{to{transform:rotate(360deg)}}

/* Blue Growth — base layer. Canvas, links, focus, scrollbar, selection. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--surface-canvas);color:var(--text-body);font:var(--fw-regular) var(--fs-body)/var(--lh-body) var(--font-ui);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4,h5,h6,p,figure,blockquote{margin:0}
img,svg{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--text-accent);text-decoration:none;transition:var(--t-color)}
a:hover{color:var(--blue-200)}
a:active{color:var(--blue-400)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--stroke-focus);outline-offset:2px}
::selection{background:var(--blue-500);color:#fff}
::placeholder{color:var(--text-dim)}
[data-bg-scroll]{scrollbar-width:thin;scrollbar-color:var(--ink-600) transparent}
[data-bg-scroll]::-webkit-scrollbar{width:10px;height:10px}
[data-bg-scroll]::-webkit-scrollbar-thumb{background:var(--ink-600);border-radius:var(--r-pill);border:3px solid transparent;background-clip:content-box}
[data-bg-scroll]::-webkit-scrollbar-track{background:transparent}
/* Canvas atmosphere: the blue light that never leaves this brand */
.bg-canvas{background:var(--surface-canvas) var(--grad-canvas-glow) no-repeat}
/* Signature accent tab on a card's top edge */
.bg-accent-tab{position:relative}
.bg-accent-tab::before{content:"";position:absolute;top:-1px;left:var(--sp-5);width:var(--accent-tab-w);height:var(--accent-tab-h);border-radius:var(--r-pill);background:var(--grad-accent-bar);box-shadow:var(--glow-blue-md)}



html,body{min-height:100%}body{margin:0;background:var(--surface-canvas)}