/* ECHAD OS · world-class design system v5
 * Tier: Vercel · Linear · Stripe · Datadog · IBM
 * Doctrine: Hardened-Rebranded distribution · OS as a Service · 3 editions · white-label
 * Typography: Geist + Geist Mono (Vercel's typeface · enterprise grade)
 */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700;800;900&family=Geist+Mono:wght@400;500;600&display=swap');

:root {
  /* ── Brand (Parousia) ── */
  --brand:        #1E9FE5;
  --brand-deep:   #0E7CC0;
  --brand-l:      #5BBEF0;
  --brand-soft:   #E8F4FD;
  --brand-tone:   #062B45;
  --orange:       #F5A623;
  --orange-deep:  #D88813;
  --orange-soft:  #FEF4E1;
  --ink:          #0B1932;
  --ink-2:        #11233F;

  /* ── Edition tones (3 tiers) ── */
  --ed-comm:      #6B7280;       /* Community: neutral */
  --ed-comm-soft: #F3F4F6;
  --ed-ent:       #1E9FE5;       /* Enterprise: Parousia blue */
  --ed-ent-soft:  #E8F4FD;
  --ed-sov:       #0B1932;       /* Sovereign: ink (most prestige) */
  --ed-sov-soft:  #ECEEF3;
  --ed-sov-accent:#F5A623;

  /* ── Semantic ── */
  --ok:   #00B57F;
  --warn: #F5A623;
  --fail: #E5395B;

  /* ── Surfaces (light) ── */
  --bg:        #FFFFFF;
  --bg-soft:   #FAFBFC;
  --bg-2:      #F4F5F7;
  --line:      rgba(11,25,50,0.07);
  --line-2:    rgba(11,25,50,0.13);
  --line-3:    rgba(11,25,50,0.22);
  --fg:        #0B1932;
  --fg-2:      rgba(11,25,50,0.74);
  --fg-3:      rgba(11,25,50,0.52);
  --fg-4:      rgba(11,25,50,0.34);

  /* ── Surfaces (dark) ── */
  --dark:      #06070A;
  --dark-2:    #0B0D12;
  --dark-3:    #14171F;
  --dark-fg:   #FAFBFC;
  --dark-fg-2: rgba(250,251,252,0.74);
  --dark-fg-3: rgba(250,251,252,0.48);
  --dark-line: rgba(250,251,252,0.08);
  --dark-line-2:rgba(250,251,252,0.14);

  /* ── Typography ── */
  --display: 'Geist', -apple-system, 'Segoe UI', system-ui, sans-serif;
  --body:    'Geist', -apple-system, 'Segoe UI', system-ui, sans-serif;
  --mono:    'Geist Mono', 'JetBrains Mono', ui-monospace, monospace;

  /* ── Type scale (enterprise grade · fluid) ── */
  --t-display: clamp(48px, 8.4vw, 120px);
  --t-h1:      clamp(40px, 6.4vw, 80px);
  --t-h2:      clamp(30px, 4.2vw, 56px);
  --t-h3:      clamp(22px, 2.2vw, 32px);
  --t-h4:      18px;
  --t-body-l:  17px;
  --t-body:    15.5px;
  --t-body-s:  14px;
  --t-caption: 12.5px;
  --t-micro:   11px;

  /* ── Motion ── */
  --e-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --e-inout:  cubic-bezier(0.83, 0, 0.17, 1);
  --e-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-1: 140ms;
  --t-2: 280ms;
  --t-3: 520ms;
  --t-4: 800ms;

  /* ── Layout ── */
  --maxw:    1240px;
  --maxw-l:  1440px;
  --pad:     clamp(20px, 4vw, 40px);

  /* ── Radii ── */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-2xl: 32px;
  --r-pill: 999px;

  /* ── Shadow ladder (enterprise) ── */
  --sh-1: 0 1px 2px rgba(11,25,50,0.04), 0 1px 1px rgba(11,25,50,0.02);
  --sh-2: 0 4px 12px -4px rgba(11,25,50,0.08), 0 2px 4px -2px rgba(11,25,50,0.04);
  --sh-3: 0 12px 28px -10px rgba(11,25,50,0.14), 0 6px 12px -6px rgba(11,25,50,0.06);
  --sh-4: 0 28px 60px -20px rgba(11,25,50,0.22), 0 16px 28px -14px rgba(11,25,50,0.10);
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-family: var(--body); font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; scroll-behavior: smooth; }
body { background: var(--bg); color: var(--fg); font-feature-settings: 'cv11','ss01','ss03','tnum' 0; line-height: 1.55; min-height: 100vh; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
img, svg, video { display: block; max-width: 100%; }
button { font: inherit; background: none; border: 0; cursor: pointer; color: inherit; }
input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--brand); color: #fff; }

/* ── Typography classes ── */
.t-display { font-family: var(--display); font-weight: 700; letter-spacing: -0.045em; line-height: 0.94; font-size: var(--t-display); color: var(--fg); }
.t-h1 { font-family: var(--display); font-weight: 700; letter-spacing: -0.04em; line-height: 1.0; font-size: var(--t-h1); color: var(--fg); }
.t-h2 { font-family: var(--display); font-weight: 700; letter-spacing: -0.034em; line-height: 1.05; font-size: var(--t-h2); color: var(--fg); }
.t-h3 { font-family: var(--display); font-weight: 600; letter-spacing: -0.024em; line-height: 1.12; font-size: var(--t-h3); color: var(--fg); }
.t-h4 { font-family: var(--display); font-weight: 600; letter-spacing: -0.016em; line-height: 1.3; font-size: var(--t-h4); color: var(--fg); }
.eyebrow { font-family: var(--body); font-weight: 600; font-size: var(--t-caption); letter-spacing: 0.14em; text-transform: uppercase; color: var(--brand-deep); }
.lede { font-size: clamp(17px, 1.3vw, 20px); line-height: 1.55; color: var(--fg-2); font-weight: 400; max-width: 62ch; letter-spacing: -0.008em; }
.kicker { font-size: var(--t-caption); color: var(--fg-3); font-weight: 500; }
.mono { font-family: var(--mono); font-feature-settings: 'tnum' 1, 'cv02' 1; }

/* ── Layout ── */
.shell { width: 100%; max-width: var(--maxw); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }
.shell--wide { max-width: var(--maxw-l); }
.section { padding: clamp(72px, 9vw, 144px) 0; position: relative; }
.section--tight { padding: clamp(48px, 6vw, 96px) 0; }
.section--dark { background: var(--dark); color: var(--dark-fg); }
.section--dark .t-h1, .section--dark .t-h2, .section--dark .t-h3, .section--dark .t-h4 { color: var(--dark-fg); }
.section--dark .lede { color: var(--dark-fg-2); }
.section--dark .kicker { color: var(--dark-fg-3); }
.section--dark .eyebrow { color: var(--brand-l); }

/* ── Nav (sticky, shrink, frosted) ── */
.nav {
  position: sticky; top: 0; z-index: 100;
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  background: rgba(255,255,255,0.72);
  border-bottom: 1px solid transparent;
  transition: background var(--t-2) var(--e-out), border-color var(--t-2) var(--e-out);
}
.nav--scrolled { background: rgba(255,255,255,0.94); border-bottom-color: var(--line); }
.nav-row { display: flex; align-items: center; gap: 36px; padding: 14px 0; }
.nav-brand { display: flex; align-items: center; gap: 9px; font-family: var(--display); font-weight: 700; font-size: 18px; letter-spacing: -0.022em; }
.nav-brand img { width: 32px; height: 32px; }
.nav-brand .os { background: var(--orange); color: #fff; padding: 1px 7px; border-radius: 5px; font-size: 12px; font-weight: 700; margin-left: 2px; letter-spacing: 0; }
.nav-links { display: flex; gap: 28px; flex: 1; }
.nav-link { font-size: 14px; color: var(--fg-2); font-weight: 500; transition: color var(--t-1) var(--e-out); letter-spacing: -0.005em; }
.nav-link:hover { color: var(--fg); }
.nav-cta { display: flex; gap: 8px; align-items: center; }
@media(max-width:920px) { .nav-links { display: none; } }

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 18px; border-radius: var(--r-pill);
  font-family: var(--body); font-size: 14px; font-weight: 500;
  transition: all var(--t-2) var(--e-out);
  border: 1px solid transparent;
  white-space: nowrap;
  letter-spacing: -0.008em;
}
.btn--primary { background: var(--ink); color: #fff; }
.btn--primary:hover { background: var(--ink-2); transform: translateY(-1px); box-shadow: var(--sh-3); }
.btn--brand   { background: var(--brand); color: #fff; box-shadow: 0 2px 8px rgba(30,159,229,0.30); }
.btn--brand:hover { background: var(--brand-deep); transform: translateY(-1px); box-shadow: 0 10px 24px rgba(30,159,229,0.40); }
.btn--ghost   { background: transparent; color: var(--fg); border-color: var(--line-2); }
.btn--ghost:hover { border-color: var(--ink); background: var(--bg-soft); }
.btn--lg { padding: 13px 24px; font-size: 15px; }
.btn--xl { padding: 16px 30px; font-size: 16px; }
.btn .arrow { transition: transform var(--t-2) var(--e-out); display: inline-block; }
.btn:hover .arrow { transform: translateX(3px); }

/* ── Hero ── */
.hero { position: relative; overflow: hidden; padding: clamp(64px, 8vw, 120px) 0 clamp(80px, 9vw, 140px); }
.hero-bg {
  position: absolute; inset: -10%; z-index: 0;
  background:
    radial-gradient(60% 50% at 20% 18%, rgba(30,159,229,0.16), transparent 70%),
    radial-gradient(50% 45% at 80% 30%, rgba(245,166,35,0.08), transparent 70%),
    radial-gradient(60% 60% at 50% 100%, rgba(30,159,229,0.06), transparent 70%);
  filter: blur(40px);
  animation: drift 22s ease-in-out infinite alternate;
}
@keyframes drift { 0%{transform:translate3d(0,0,0) scale(1);} 100%{transform:translate3d(-3%,2%,0) scale(1.08);} }
.hero canvas.mesh { position: absolute; inset: 0; z-index: 1; opacity: 0.55; pointer-events: none; mix-blend-mode: multiply; }
.hero-inner { position: relative; z-index: 2; }
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 6px 14px 6px 6px; border-radius: var(--r-pill);
  background: var(--bg); border: 1px solid var(--line-2);
  font-size: 13px; font-weight: 500; color: var(--fg-2); letter-spacing: -0.005em;
  margin-bottom: 32px;
  box-shadow: var(--sh-1);
}
.hero-eyebrow .tag-pill { padding: 3px 9px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; }
.hero-eyebrow .dot { width: 6px; height: 6px; background: var(--ok); border-radius: 50%; box-shadow: 0 0 0 4px rgba(0,181,127,0.18); }
.hero h1 { max-width: 18ch; margin-bottom: 28px; }
.hero h1 .grad {
  background: linear-gradient(110deg, var(--brand), var(--brand-deep) 50%, var(--ink) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-lede { margin-bottom: 40px; max-width: 56ch; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 72px; }
.hero-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; padding: 32px 0 0; border-top: 1px solid var(--line); }
@media(max-width:760px) { .hero-stats { grid-template-columns: repeat(2, 1fr); } }
.stat .v { font-family: var(--display); font-weight: 700; font-size: clamp(32px, 3.6vw, 48px); letter-spacing: -0.038em; line-height: 1; font-feature-settings: 'tnum' 1; color: var(--fg); }
.stat .v .small { font-size: 0.50em; color: var(--fg-3); margin-left: 4px; font-weight: 500; letter-spacing: -0.02em; }
.stat .l { font-size: 13px; color: var(--fg-3); font-weight: 400; margin-top: 8px; max-width: 24ch; line-height: 1.45; }

/* ── Standards bar ── */
.std-bar { background: var(--bg-soft); padding: 28px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.std-bar .label { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-3); font-weight: 600; text-align: center; margin-bottom: 22px; }
.std-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 32px 44px; opacity: 0.78; }
.std-row .std { display: inline-flex; align-items: center; gap: 9px; font-family: var(--display); font-weight: 600; font-size: 13.5px; color: var(--fg-2); letter-spacing: -0.008em; }
.std-row .std .b { width: 22px; height: 22px; border-radius: 5px; background: var(--ink); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 8.5px; font-weight: 700; letter-spacing: 0; line-height: 1; }
.std-row .std .b.iso { background: #003478; } .std-row .std .b.nist { background: #112E51; } .std-row .std .b.cc { background: #1F4E79; }
.std-row .std .b.fips { background: #0B2147; } .std-row .std .b.slsa { background: #6D43D8; } .std-row .std .b.eid { background: #003399; }
.std-row .std .b.wcag { background: #005A9C; } .std-row .std .b.mal { background: #006B3F; }

/* ── Feature grid ── */
.fgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media(max-width:1000px) { .fgrid { grid-template-columns: repeat(2, 1fr); } }
@media(max-width:680px)  { .fgrid { grid-template-columns: 1fr; } }
.fcard {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 32px;
  transition: all var(--t-2) var(--e-out);
  position: relative; overflow: hidden;
}
.fcard:hover { border-color: var(--line-2); transform: translateY(-3px); box-shadow: var(--sh-3); }
.fcard .ico {
  width: 48px; height: 48px; border-radius: 12px;
  background: linear-gradient(135deg, var(--brand-soft), #fff);
  border: 1px solid var(--line);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--brand-deep);
  margin-bottom: 24px;
  transition: transform var(--t-3) var(--e-bounce);
}
.fcard:hover .ico { transform: scale(1.06) rotate(-3deg); }
.fcard .ico svg { width: 24px; height: 24px; }
.fcard h3 { font-family: var(--display); font-size: 19px; font-weight: 600; letter-spacing: -0.018em; margin-bottom: 10px; color: var(--fg); }
.fcard p { font-size: 14.5px; color: var(--fg-2); line-height: 1.55; }

/* ── Editions cards (3 tiers · the doctrine) ── */
.ed-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media(max-width:1000px) { .ed-grid { grid-template-columns: 1fr; } }
.ed-card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 36px;
  position: relative;
  transition: all var(--t-2) var(--e-out);
  display: flex; flex-direction: column; gap: 24px;
}
.ed-card.featured {
  border-color: var(--brand);
  box-shadow: 0 0 0 1px var(--brand), var(--sh-4);
}
.ed-card.sovereign {
  background: var(--ink);
  border-color: var(--ink-2);
  color: var(--dark-fg);
}
.ed-card.sovereign h3, .ed-card.sovereign .ed-price .val { color: #fff; }
.ed-card.sovereign .ed-sub, .ed-card.sovereign li { color: rgba(255,255,255,0.74); }
.ed-card.sovereign .ed-features { border-top-color: rgba(255,255,255,0.10); }
.ed-card.sovereign .badge { background: var(--orange); color: #fff; }
.ed-card:hover { transform: translateY(-3px); }
.ed-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ed-name { font-family: var(--display); font-size: 22px; font-weight: 700; letter-spacing: -0.022em; }
.ed-card.community .ed-name { color: var(--fg); }
.ed-card.enterprise .ed-name { color: var(--brand-deep); }
.ed-card.sovereign .ed-name { color: #fff; }
.ed-sub { font-size: 14px; color: var(--fg-3); line-height: 1.5; }
.badge { display: inline-flex; padding: 4px 10px; border-radius: 999px; background: var(--brand); color: #fff; font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.ed-price { display: flex; align-items: baseline; gap: 8px; }
.ed-price .val { font-family: var(--display); font-size: 40px; font-weight: 700; letter-spacing: -0.04em; line-height: 1; color: var(--fg); }
.ed-price .unit { font-size: 13px; color: var(--fg-3); font-weight: 500; }
.ed-cta { width: 100%; justify-content: center; }
.ed-features { list-style: none; padding-top: 24px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 12px; }
.ed-features li { font-size: 14px; line-height: 1.45; color: var(--fg-2); display: flex; gap: 10px; align-items: flex-start; }
.ed-features li .ck { color: var(--ok); flex-shrink: 0; margin-top: 2px; font-weight: 700; }
.ed-card.sovereign .ed-features li .ck { color: #4EE0B0; }
.ed-features li.muted { color: var(--fg-4); }
.ed-features li.muted .ck { color: var(--fg-4); }

/* ── White-label section ── */
.wl-board { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center; }
@media(max-width:960px) { .wl-board { grid-template-columns: 1fr; gap: 32px; } }
.wl-preview {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 28px;
  box-shadow: var(--sh-3);
  position: relative;
}
.wl-preview .device {
  background: var(--ink);
  border-radius: var(--r-md);
  padding: 0;
  overflow: hidden;
}
.wl-preview .device-bar { display: flex; gap: 6px; padding: 10px 14px; background: var(--dark-3); }
.wl-preview .device-bar i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f56; }
.wl-preview .device-bar i:nth-child(2) { background: #ffbd2e; }
.wl-preview .device-bar i:nth-child(3) { background: #27c93f; }
.wl-preview .device-body { padding: 32px; background: #fff; min-height: 240px; display: flex; flex-direction: column; gap: 16px; }
.wl-preview .pv-brand { display: flex; align-items: center; gap: 10px; }
.wl-preview .pv-logo {
  width: 36px; height: 36px; border-radius: 8px;
  background: linear-gradient(135deg, var(--cust-1, var(--brand)), var(--cust-2, var(--brand-deep)));
  display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700;
  font-family: var(--display); font-size: 17px;
}
.wl-preview .pv-name { font-family: var(--display); font-size: 17px; font-weight: 700; letter-spacing: -0.02em; }
.wl-preview .pv-name .ed { background: var(--cust-2, var(--brand-deep)); color: #fff; padding: 1px 7px; border-radius: 5px; font-size: 12px; font-weight: 700; margin-left: 3px; }
.wl-preview .pv-body { font-size: 13px; color: var(--fg-2); }
.wl-preview .pv-pkg { font-family: var(--mono); font-size: 12px; color: var(--fg-3); background: var(--bg-soft); padding: 8px 12px; border-radius: 8px; }
.wl-controls { display: flex; flex-direction: column; gap: 18px; padding-top: 24px; border-top: 1px solid var(--line); }
.wl-control { display: grid; grid-template-columns: 1fr 140px; gap: 16px; align-items: center; }
.wl-control label { font-size: 13px; color: var(--fg-3); font-weight: 500; }
.wl-swatch { display: flex; gap: 6px; }
.wl-swatch button { width: 24px; height: 24px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; transition: transform var(--t-1) var(--e-out); padding: 0; }
.wl-swatch button.active { border-color: var(--ink); }
.wl-swatch button:hover { transform: scale(1.1); }

/* ── Security score ladder ── */
.score-board { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
@media(max-width:900px) { .score-board { grid-template-columns: 1fr; gap: 32px; } }
.score-hero { text-align: center; padding: 56px 28px; background: linear-gradient(160deg, var(--dark-2), var(--dark)); border-radius: var(--r-2xl); color: #fff; position: relative; overflow: hidden; border: 1px solid var(--dark-line); }
.score-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(60% 60% at 50% 15%, rgba(30,159,229,0.32), transparent 70%); }
.score-hero > * { position: relative; }
.score-hero .num { font-family: var(--display); font-weight: 700; font-size: clamp(120px, 16vw, 200px); letter-spacing: -0.06em; line-height: 0.92; background: linear-gradient(180deg, #fff, #5BBEF0); -webkit-background-clip: text; background-clip: text; color: transparent; font-feature-settings: 'tnum' 1; }
.score-hero .sub { font-size: 13.5px; color: rgba(255,255,255,0.62); margin-top: 14px; font-weight: 500; letter-spacing: 0.04em; }
.score-hero .badge { display: inline-flex; align-items: center; gap: 6px; margin-top: 28px; padding: 6px 14px; background: rgba(0,181,127,0.16); border: 1px solid rgba(0,181,127,0.40); border-radius: 999px; font-size: 12px; color: #4EE0B0; font-weight: 600; }
.ladder { display: flex; flex-direction: column; gap: 14px; }
.ladder .row { display: grid; grid-template-columns: 170px 1fr 56px; gap: 16px; align-items: center; }
.ladder .name { font-weight: 500; font-size: 14px; color: var(--fg); letter-spacing: -0.008em; }
.ladder .name.us { color: var(--brand-deep); font-weight: 700; }
.ladder .track { height: 8px; background: var(--bg-2); border-radius: 999px; overflow: hidden; }
.ladder .fill { height: 100%; border-radius: 999px; transition: width 1400ms var(--e-out); background: linear-gradient(90deg, var(--fg-3), var(--fg-2)); }
.ladder .row.us .fill { background: linear-gradient(90deg, var(--brand), var(--brand-deep)); height: 10px; }
.ladder .row.us .track { height: 10px; }
.ladder .v { font-family: var(--mono); font-size: 13.5px; font-weight: 500; color: var(--fg); text-align: right; }
.ladder .v .of { color: var(--fg-3); }

/* ── Compare matrix ── */
.matrix-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--bg); box-shadow: var(--sh-1); }
.matrix { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 920px; font-size: 14px; }
.matrix th, .matrix td { padding: 16px 22px; text-align: left; border-bottom: 1px solid var(--line); letter-spacing: -0.005em; }
.matrix thead th { font-family: var(--display); font-size: 14px; font-weight: 600; background: var(--bg-soft); color: var(--fg); letter-spacing: -0.012em; }
.matrix thead th.us { background: var(--ink); color: #fff; position: relative; }
.matrix thead th.us::after { content: 'ECHAD'; display: block; font-size: 10px; color: var(--brand-l); letter-spacing: 0.16em; font-weight: 600; margin-top: 2px; }
.matrix tbody tr:last-child td { border-bottom: 0; }
.matrix tbody tr:hover td { background: var(--bg-soft); }
.matrix .feature { font-weight: 500; color: var(--fg); }
.matrix .yes { color: var(--ok); font-weight: 600; }
.matrix .no  { color: var(--fail); font-weight: 600; opacity: 0.7; }
.matrix .pro { color: var(--orange-deep); font-weight: 600; font-size: 11.5px; letter-spacing: 0.04em; }
.matrix .us-col { background: rgba(30,159,229,0.04); border-left: 1px solid var(--brand-soft); border-right: 1px solid var(--brand-soft); }
.matrix .us-col .yes { color: var(--brand-deep); }

/* ── Compliance grid ── */
.comp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media(max-width:1000px) { .comp-grid { grid-template-columns: repeat(2, 1fr); } }
@media(max-width:560px)  { .comp-grid { grid-template-columns: 1fr; } }
.comp { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-md); padding: 18px 20px; display: flex; gap: 14px; align-items: flex-start; transition: all var(--t-2) var(--e-out); }
.comp:hover { border-color: var(--line-2); box-shadow: var(--sh-2); transform: translateY(-2px); }
.comp .b { width: 44px; height: 44px; border-radius: 10px; background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; letter-spacing: 0.03em; flex-shrink: 0; text-align: center; line-height: 1.1; padding: 4px; }
.comp .b.iso { background: #003478; } .comp .b.nist { background: #112E51; } .comp .b.cc { background: #1F4E79; }
.comp .b.fips { background: #0B2147; } .comp .b.slsa { background: #6D43D8; } .comp .b.eid { background: #003399; }
.comp .b.wcag { background: #005A9C; } .comp .b.mal { background: #006B3F; } .comp .b.gdpr { background: #003C8B; }
.comp .t-name { font-weight: 600; font-size: 14px; color: var(--fg); margin-bottom: 3px; letter-spacing: -0.008em; }
.comp .t-sub  { font-size: 12.5px; color: var(--fg-3); line-height: 1.45; }

/* ── Testimonials ── */
.tgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media(max-width:900px) { .tgrid { grid-template-columns: 1fr; } }
.tcard { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 32px; display: flex; flex-direction: column; gap: 24px; transition: all var(--t-2) var(--e-out); }
.tcard:hover { box-shadow: var(--sh-3); border-color: var(--line-2); }
.tcard .quote { font-family: var(--display); font-size: 18px; line-height: 1.45; color: var(--fg); font-weight: 500; letter-spacing: -0.016em; }
.tcard .quote::before { content: '\201C'; font-size: 40px; line-height: 0; color: var(--brand); display: inline-block; vertical-align: -16px; margin-right: 2px; }
.tcard .who { display: flex; align-items: center; gap: 14px; padding-top: 20px; border-top: 1px solid var(--line); }
.tcard .who .av { width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(135deg, var(--brand), var(--brand-deep)); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 13px; }
.tcard .who .nm { font-weight: 600; font-size: 14px; color: var(--fg); letter-spacing: -0.008em; }
.tcard .who .ti { font-size: 12.5px; color: var(--fg-3); }

/* ── Specs accordion ── */
.specs { border-top: 1px solid var(--line); }
.spec-row { border-bottom: 1px solid var(--line); }
.spec-q { width: 100%; padding: 22px 0; display: flex; justify-content: space-between; align-items: center; cursor: pointer; gap: 24px; }
.spec-q h4 { font-family: var(--display); font-size: 19px; font-weight: 600; letter-spacing: -0.018em; color: var(--fg); }
.spec-q .pl { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line-2); display: flex; align-items: center; justify-content: center; transition: all var(--t-2) var(--e-out); color: var(--fg-2); flex-shrink: 0; }
.spec-row[open] .spec-q .pl { background: var(--brand); border-color: var(--brand); color: #fff; transform: rotate(45deg); }
.spec-a { padding: 0 0 24px; font-size: 14.5px; color: var(--fg-2); line-height: 1.65; max-width: 68ch; }
.spec-a code { font-family: var(--mono); font-size: 13px; background: var(--bg-soft); padding: 2px 8px; border-radius: 6px; color: var(--brand-deep); }

/* ── Download CTA ── */
.dl-cta {
  background: linear-gradient(135deg, var(--dark), var(--ink));
  border-radius: var(--r-2xl);
  padding: clamp(40px, 6vw, 80px);
  color: #fff;
  position: relative; overflow: hidden;
  border: 1px solid var(--dark-line);
}
.dl-cta::before { content: ''; position: absolute; inset: -50%; background: radial-gradient(60% 60% at 80% 20%, rgba(30,159,229,0.30), transparent 70%); }
.dl-cta > * { position: relative; }
.dl-cta h2 { color: #fff; }
.dl-cta .lede { color: rgba(255,255,255,0.72); }
.dl-cta .meta { display: flex; gap: 28px; flex-wrap: wrap; margin-top: 36px; font-size: 13.5px; color: rgba(255,255,255,0.60); }
.dl-cta .meta b { color: #fff; font-weight: 600; }
.dl-cta .meta .ok { color: #4EE0B0; }

/* ── Footer ── */
.footer { background: var(--bg-soft); border-top: 1px solid var(--line); padding: 80px 0 32px; }
.f-grid { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 40px; margin-bottom: 56px; }
@media(max-width:900px) { .f-grid { grid-template-columns: 1fr 1fr; } }
@media(max-width:560px) { .f-grid { grid-template-columns: 1fr; } }
.f-brand { font-family: var(--display); font-weight: 700; font-size: 20px; letter-spacing: -0.022em; margin-bottom: 14px; display: flex; align-items: center; gap: 9px; }
.f-tag { font-size: 14px; color: var(--fg-2); margin-bottom: 24px; max-width: 38ch; line-height: 1.55; }
.f-col h5 { font-family: var(--display); font-size: 12.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 16px; }
.f-col a { display: block; font-size: 14px; color: var(--fg-2); padding: 4px 0; transition: color var(--t-1) var(--e-out); letter-spacing: -0.005em; }
.f-col a:hover { color: var(--brand-deep); }
.f-bot { border-top: 1px solid var(--line); padding-top: 26px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px; font-size: 12px; color: var(--fg-3); }
.f-bot .right { display: flex; gap: 24px; align-items: center; }

/* ── Reveal ── */
[data-rev] { opacity: 0; transform: translateY(20px); transition: opacity var(--t-4) var(--e-out), transform var(--t-4) var(--e-out); }
[data-rev].in { opacity: 1; transform: none; }
[data-rev-stagger] > * { opacity: 0; transform: translateY(16px); transition: opacity 600ms var(--e-out), transform 600ms var(--e-out); }
[data-rev-stagger].in > * { opacity: 1; transform: none; }
[data-rev-stagger].in > *:nth-child(2) { transition-delay: 70ms; }
[data-rev-stagger].in > *:nth-child(3) { transition-delay: 140ms; }
[data-rev-stagger].in > *:nth-child(4) { transition-delay: 210ms; }
[data-rev-stagger].in > *:nth-child(5) { transition-delay: 280ms; }
[data-rev-stagger].in > *:nth-child(6) { transition-delay: 350ms; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
@media print { .nav, .footer, .dl-cta { display: none; } }