/* =========================================================================
   Rytera marketing site - design system (2026 refresh)
   Sora display + Inter body, aurora backdrop, glass cards, cursor spotlight
   ========================================================================= */

:root {
  --brand: #6c7bff;
  --brand-2: #9db4ff;
  --violet: #a78bfa;
  --cyan: #22d3ee;
  --pink: #f472b6;
  --green: #34d399;
  --amber: #fbbf24;
  --grad: linear-gradient(135deg, #6c7bff 0%, #8b5cf6 45%, #ec4899 110%);
  --radius: 1.15rem;
  --radius-lg: 1.6rem;
  --header-h: 88px;
  --font-display: "Sora", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}

/* Night (default) — deep aurora glass */
:root,
[data-theme="night"] {
  color-scheme: dark;
  --bg: #07080f;
  --bg-2: #0b0d1a;
  --surface: rgba(18, 23, 40, .62);
  --surface-2: rgba(255, 255, 255, .045);
  --border: rgba(255, 255, 255, .09);
  --border-strong: rgba(255, 255, 255, .17);
  --text: #f4f6ff;
  --muted: #b7c0dd;
  --muted-2: #838cb0;
  --text-strong: #fff;
  --text-soft: #dfe5ff;
  --text-accent-soft: #e8e4ff;
  --text-display: #e2e8f0;
  --emphasis: #fff;
  --on-accent: #fff;
  --compare-ai-text: #dfe5ff;
  --quote-text: #dfe5ff;
  --contact-text: #dfe5ff;
  --contact-email-color: #fff;
  --success-bright: #6ee7b7;
  --success-soft: #d1fae5;
  --cyan-bright: #67e8f9;
  --violet-bright: #c4b5fd;
  --error-bright: #fca5a5;
  --gradient-text: linear-gradient(120deg, #9db4ff 0%, #a78bfa 45%, #f472b6 100%);
  --gradient-hero: linear-gradient(120deg, #fff 25%, #b9c7ff 65%, #d8b4fe 100%);
  --ghost-bg: rgba(255, 255, 255, .055);
  --ghost-hover-bg: rgba(255, 255, 255, .1);
  --ghost-hover-border: rgba(255, 255, 255, .26);
  --glass-bg: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .012));
  --glass-bg-alt: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .012));
  --glass-bg-subtle: rgba(255, 255, 255, .045);
  --glass-bg-hover: rgba(255, 255, 255, .055);
  --input-fill: rgba(255, 255, 255, .05);
  --search-fill: rgba(10, 15, 29, .8);
  --mockup-bg: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02)), rgba(13, 17, 31, .78);
  --mockup-border: rgba(255, 255, 255, .14);
  --mock-side-bg: rgba(255, 255, 255, .02);
  --float-chip-bg: rgba(13, 17, 31, .82);
  --float-chip-border: rgba(255, 255, 255, .15);
  --side-active-color: #fff;
  --side-active-bg: linear-gradient(180deg, rgba(124, 108, 255, .3), rgba(124, 108, 255, .12));
  --pipeline-active-color: #fff;
  --bar-track: rgba(255, 255, 255, .07);
  --mobile-nav-bg: rgba(11, 14, 26, .92);
  --overlay-bg: rgba(4, 5, 10, .72);
  --modal-bg: linear-gradient(180deg, rgba(20, 25, 44, .96), rgba(12, 15, 27, .98));
  --modal-border: rgba(255, 255, 255, .16);
  --contact-bg: linear-gradient(135deg, rgba(91, 108, 255, .24), rgba(139, 92, 246, .16) 45%, rgba(236, 72, 153, .14));
  --contact-border: rgba(156, 163, 255, .35);
  --contact-email-bg: rgba(124, 108, 255, .14);
  --price-card-bg: linear-gradient(180deg, rgba(18, 22, 40, .88), rgba(10, 12, 22, .94));
  --price-card-border: rgba(255, 255, 255, .12);
  --price-featured-bg: linear-gradient(180deg, rgba(88, 70, 180, .28), rgba(12, 14, 28, .96));
  --matrix-bg: rgba(8, 10, 20, .55);
  --matrix-border: rgba(255, 255, 255, .1);
  --matrix-row-border: rgba(255, 255, 255, .06);
  --matrix-row-hover: rgba(255, 255, 255, .03);
  --matrix-head-bg: rgba(255, 255, 255, .03);
  --cell-dash: rgba(255, 255, 255, .28);
  --buy-gate-bg: linear-gradient(180deg, rgba(60, 20, 28, .45), rgba(12, 10, 18, .9));
  --shadow-card: 0 14px 40px rgba(0, 0, 0, .28);
  --shadow-card-hover: 0 22px 60px rgba(0, 0, 0, .45);
  --shadow-card-lift: 0 20px 54px rgba(0, 0, 0, .38);
  --shadow-mockup: 0 46px 110px rgba(0, 0, 0, .55);
  --shadow-contact: 0 40px 110px rgba(0, 0, 0, .5);
  --shadow-float: 0 22px 50px rgba(0, 0, 0, .5);
  --shadow-mobile-nav: 0 24px 70px rgba(0, 0, 0, .55);
  --shadow-modal: 0 50px 130px rgba(0, 0, 0, .7);
  --nav-bg: rgba(11, 14, 26, .5);
  --nav-bg-scrolled: rgba(10, 12, 22, .82);
  --nav-border: rgba(255, 255, 255, .11);
  --nav-border-scrolled: rgba(255, 255, 255, .16);
  --nav-shadow: 0 12px 44px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255, 255, 255, .06);
  --nav-shadow-scrolled: 0 18px 56px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .08);
  --drop-bg: rgba(12, 14, 24, .96);
  --drop-shadow: 0 22px 60px rgba(0, 0, 0, .55);
  --hover-bg: rgba(255, 255, 255, .06);
  --hover-bg-strong: rgba(255, 255, 255, .1);
  --grid-line: rgba(255, 255, 255, .045);
  --glow-opacity: .75;
  --panel-bg: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02)), rgba(13, 17, 31, .78);
  --chip-bg: rgba(255, 255, 255, .04);
  --selection-bg: rgba(139, 92, 246, .4);
  --selection-color: #fff;
  --zta-l1: #34d399;
  --zta-l2: #06b6d4;
  --zta-l3: #f472b6;
  --body-bg:
    radial-gradient(1100px 720px at 12% -12%, rgba(91, 108, 255, .16), transparent 55%),
    radial-gradient(1000px 680px at 92% -8%, rgba(139, 92, 246, .15), transparent 55%),
    radial-gradient(900px 700px at 90% 80%, rgba(236, 72, 153, .09), transparent 55%),
    radial-gradient(820px 620px at 6% 92%, rgba(34, 211, 238, .09), transparent 55%),
    var(--bg);
}

/* Day — soft slate + indigo accents (auto by local time) */
[data-theme="day"] {
  color-scheme: light;
  --bg: #eef2f9;
  --bg-2: #e2e8f2;
  --surface: rgba(255, 255, 255, .92);
  --surface-2: rgba(15, 23, 42, .05);
  --border: rgba(15, 23, 42, .11);
  --border-strong: rgba(15, 23, 42, .16);
  --text: #0f172a;
  --muted: #334155;
  --muted-2: #475569;
  --text-strong: #020617;
  --text-soft: #1e293b;
  --text-accent-soft: #312e81;
  --text-display: #1e293b;
  --emphasis: #020617;
  --on-accent: #fff;
  --compare-ai-text: #1e293b;
  --quote-text: #334155;
  --contact-text: #334155;
  --contact-email-color: #312e81;
  --success-bright: #047857;
  --success-soft: #065f46;
  --cyan-bright: #0e7490;
  --violet-bright: #6d28d9;
  --error-bright: #b91c1c;
  --gradient-text: linear-gradient(120deg, #3730a3 0%, #6d28d9 42%, #be185d 100%);
  --gradient-hero: linear-gradient(120deg, #020617 8%, #3730a3 48%, #7c3aed 100%);
  --ghost-bg: rgba(255, 255, 255, .82);
  --ghost-hover-bg: rgba(15, 23, 42, .06);
  --ghost-hover-border: rgba(15, 23, 42, .2);
  --glass-bg: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(248, 250, 252, .94));
  --glass-bg-alt: linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(241, 245, 249, .9));
  --glass-bg-subtle: rgba(255, 255, 255, .88);
  --glass-bg-hover: rgba(241, 245, 249, .95);
  --input-fill: rgba(255, 255, 255, .95);
  --search-fill: rgba(255, 255, 255, .98);
  --mockup-bg: linear-gradient(180deg, #ffffff, #f8fafc);
  --mockup-border: rgba(15, 23, 42, .13);
  --mock-side-bg: rgba(241, 245, 249, .85);
  --float-chip-bg: rgba(255, 255, 255, .96);
  --float-chip-border: rgba(15, 23, 42, .12);
  --side-active-color: #312e81;
  --side-active-bg: linear-gradient(180deg, rgba(79, 93, 255, .14), rgba(79, 93, 255, .06));
  --pipeline-active-color: #020617;
  --bar-track: rgba(15, 23, 42, .08);
  --mobile-nav-bg: rgba(255, 255, 255, .98);
  --overlay-bg: rgba(15, 23, 42, .42);
  --modal-bg: #ffffff;
  --modal-border: rgba(15, 23, 42, .12);
  --contact-bg: linear-gradient(135deg, rgba(79, 93, 255, .1), rgba(139, 92, 246, .07) 45%, rgba(236, 72, 153, .05));
  --contact-border: rgba(79, 93, 255, .22);
  --contact-email-bg: rgba(79, 93, 255, .08);
  --price-card-bg: linear-gradient(180deg, #ffffff, #f8fafc);
  --price-card-border: rgba(15, 23, 42, .11);
  --price-featured-bg: linear-gradient(180deg, rgba(79, 93, 255, .09), #ffffff);
  --matrix-bg: #ffffff;
  --matrix-border: rgba(15, 23, 42, .11);
  --matrix-row-border: rgba(15, 23, 42, .07);
  --matrix-row-hover: rgba(15, 23, 42, .03);
  --matrix-head-bg: #f8fafc;
  --cell-dash: rgba(15, 23, 42, .28);
  --buy-gate-bg: linear-gradient(180deg, rgba(254, 226, 226, .55), #ffffff);
  --shadow-card: 0 10px 32px rgba(15, 23, 42, .06);
  --shadow-card-hover: 0 18px 44px rgba(15, 23, 42, .09);
  --shadow-card-lift: 0 16px 40px rgba(15, 23, 42, .08);
  --shadow-mockup: 0 24px 60px rgba(15, 23, 42, .1);
  --shadow-contact: 0 20px 50px rgba(15, 23, 42, .07);
  --shadow-float: 0 14px 36px rgba(15, 23, 42, .08);
  --shadow-mobile-nav: 0 18px 48px rgba(15, 23, 42, .1);
  --shadow-modal: 0 24px 64px rgba(15, 23, 42, .14);
  --brand: #4338ca;
  --brand-2: #3730a3;
  --nav-bg: rgba(255, 255, 255, .86);
  --nav-bg-scrolled: rgba(255, 255, 255, .97);
  --nav-border: rgba(15, 23, 42, .09);
  --nav-border-scrolled: rgba(15, 23, 42, .13);
  --nav-shadow: 0 10px 36px rgba(15, 23, 42, .08), inset 0 1px 0 rgba(255, 255, 255, .95);
  --nav-shadow-scrolled: 0 16px 44px rgba(15, 23, 42, .11), inset 0 1px 0 #fff;
  --drop-bg: rgba(255, 255, 255, .99);
  --drop-shadow: 0 18px 48px rgba(15, 23, 42, .12);
  --hover-bg: rgba(15, 23, 42, .05);
  --hover-bg-strong: rgba(15, 23, 42, .08);
  --grid-line: rgba(15, 23, 42, .06);
  --glow-opacity: .22;
  --panel-bg: linear-gradient(180deg, #ffffff, #f8fafc);
  --chip-bg: rgba(15, 23, 42, .05);
  --selection-bg: rgba(79, 93, 255, .2);
  --selection-color: #020617;
  --zta-l1: #047857;
  --zta-l2: #0369a1;
  --zta-l3: #a21caf;
  --body-bg:
    radial-gradient(1100px 720px at 12% -12%, rgba(79, 93, 255, .09), transparent 55%),
    radial-gradient(1000px 680px at 92% -8%, rgba(109, 40, 217, .06), transparent 55%),
    radial-gradient(900px 700px at 90% 80%, rgba(219, 39, 119, .04), transparent 55%),
    radial-gradient(820px 620px at 6% 92%, rgba(14, 116, 144, .05), transparent 55%),
    var(--bg);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  transition: color-scheme .5s var(--ease);
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--body-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background .65s var(--ease), color .45s var(--ease);
}

::selection { background: var(--selection-bg); color: var(--selection-color); }

a { color: var(--brand-2); }
img, svg { display: block; }
strong { font-weight: 650; color: var(--text-strong); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  text-wrap: balance;
  margin: 0;
}

h1 { font-size: clamp(3rem, 7vw, 5.25rem); line-height: 1.02; letter-spacing: -.045em; font-weight: 700; }
h2 { font-size: clamp(2rem, 4vw, 3rem); line-height: 1.12; letter-spacing: -.035em; font-weight: 700; }
h3 { font-size: 1.06rem; letter-spacing: -.015em; font-weight: 600; }

p { margin: 0; text-wrap: pretty; }

:focus-visible { outline: 2px solid var(--brand-2); outline-offset: 3px; border-radius: 6px; }

.ico { width: 18px; height: 18px; flex-shrink: 0; }
.ico.sm { width: 15px; height: 15px; }

/* ---- Scroll progress ---- */
#scroll-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 300;
  background: linear-gradient(90deg, var(--brand), var(--violet), var(--cyan));
  transform-origin: 0 50%;
  transform: scaleX(0);
  box-shadow: 0 0 12px rgba(124, 108, 255, .6);
}

/* ---- Background canvas ---- */
.bg-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.bg-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 54px 54px;
  -webkit-mask-image: radial-gradient(ellipse 95% 75% at 50% 0%, #000 20%, transparent 78%);
  mask-image: radial-gradient(ellipse 95% 75% at 50% 0%, #000 20%, transparent 78%);
  transition: opacity .65s var(--ease);
}

.glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(95px);
  opacity: var(--glow-opacity);
  will-change: transform;
  transition: opacity .65s var(--ease);
}

.glow-1 { width: 620px; height: 620px; top: -220px; left: 4%; background: radial-gradient(circle, rgba(91, 108, 255, .5), transparent 65%); animation: drift 26s ease-in-out infinite alternate; }
.glow-2 { width: 540px; height: 540px; top: 12%; right: -160px; background: radial-gradient(circle, rgba(139, 92, 246, .45), transparent 65%); animation: drift 32s ease-in-out -9s infinite alternate-reverse; }
.glow-3 { width: 460px; height: 460px; top: 58%; left: -160px; background: radial-gradient(circle, rgba(34, 211, 238, .34), transparent 65%); animation: drift 28s ease-in-out -17s infinite alternate; }
.glow-4 { width: 520px; height: 520px; bottom: -220px; right: 8%; background: radial-gradient(circle, rgba(236, 72, 153, .3), transparent 65%); animation: drift 36s ease-in-out -5s infinite alternate-reverse; }

@keyframes drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(70px, 44px, 0) scale(1.18); }
}

.bg-noise {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: .05;
  background-image: var(--noise);
  mix-blend-mode: overlay;
}

/* ---- Layout ---- */
.page { position: relative; z-index: 1; }

main { max-width: 1160px; margin: 0 auto; padding: 0 1.5rem 3rem; }

section {
  padding: 6rem 0;
  position: relative;
}

section + section { border-top: 1px solid var(--border); }

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .8rem 1.55rem;
  border-radius: .95rem;
  font-family: var(--font-body);
  font-size: .95rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s, border-color .25s, color .25s;
  white-space: nowrap;
}

.btn .ico { width: 17px; height: 17px; }

.btn-primary {
  position: relative;
  overflow: hidden;
  color: #fff;
  background: var(--grad);
  box-shadow: 0 10px 34px rgba(108, 99, 255, .42), inset 0 1px 0 rgba(255, 255, 255, .28);
}

.btn-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, .4) 50%, transparent 68%);
  transform: translateX(-130%) skewX(-12deg);
  transition: transform .65s var(--ease);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 46px rgba(139, 92, 246, .55), inset 0 1px 0 rgba(255, 255, 255, .3);
}

.btn-primary:hover::after { transform: translateX(130%) skewX(-12deg); }

.btn-primary:active { transform: translateY(0); }

.btn-ghost {
  color: var(--text);
  background: var(--ghost-bg);
  border-color: var(--border-strong);
  backdrop-filter: blur(10px);
}

.btn-ghost:hover { background: var(--ghost-hover-bg); border-color: var(--ghost-hover-border); transform: translateY(-2px); }

.btn-sm { padding: .6rem 1.15rem; font-size: .88rem; border-radius: .8rem; }

/* ---- Section labels / headings ---- */
.section-label {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin: 0 0 1.1rem;
  padding: .45rem .95rem;
  border-radius: 999px;
  border: 1px solid rgba(156, 163, 255, .28);
  background: linear-gradient(180deg, rgba(139, 92, 246, .16), rgba(108, 123, 255, .06));
  color: var(--brand-2);
  font-family: var(--font-display);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  width: fit-content;
  box-shadow: 0 0 26px rgba(108, 123, 255, .18);
}

.section-label::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--grad);
  box-shadow: 0 0 10px rgba(139, 92, 246, .9);
  animation: pulse 2.4s ease-in-out infinite;
}

@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .55; transform: scale(.82); } }

.section-desc {
  max-width: 640px;
  color: var(--muted);
  font-size: 1.05rem;
  margin-top: 1rem;
}

.gradient {
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.hidden { display: none !important; }

.nav-actions { display: flex; align-items: center; gap: .6rem; flex-shrink: 0; }

/* ---- Reveal ---- */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}

.reveal.visible { opacity: 1; transform: none; }

/* ---- Header (floating glass pill) ---- */
#header {
  position: fixed;
  top: 14px;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 0 1rem;
}

.nav-inner {
  max-width: 1120px;
  margin: 0 auto;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 .6rem 0 1.15rem;
  border-radius: 999px;
  border: 1px solid var(--nav-border);
  background: var(--nav-bg);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  box-shadow: var(--nav-shadow);
  transition: background .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease);
}

#header.scrolled .nav-inner {
  background: var(--nav-bg-scrolled);
  border-color: var(--nav-border-scrolled);
  box-shadow: var(--nav-shadow-scrolled);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  color: var(--text);
  text-decoration: none;
  flex-shrink: 0;
}

.brand-mark {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(135deg, #5b6cff, #8b5cf6 55%, #d946ef);
  box-shadow: 0 8px 22px rgba(124, 108, 255, .5), inset 0 1px 0 rgba(255, 255, 255, .35);
}

.brand-mark svg { width: 22px; height: 22px; }

.brand-name { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; letter-spacing: -.02em; }

.brand-name sup {
  font-size: .55rem;
  font-weight: 600;
  color: var(--muted-2);
  margin-left: 2px;
  vertical-align: super;
}

.nav-desktop {
  display: flex;
  align-items: center;
  gap: .1rem;
  margin-left: auto;
  margin-right: .5rem;
}

.nav-item { position: relative; }

/* Hover bridge — keeps dropdown open while moving pointer from trigger to menu */
.nav-item::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 14px;
  display: none;
}

.nav-item:hover::after,
.nav-item:focus-within::after,
.nav-item.open::after {
  display: block;
}

.nav-desktop > .nav-item > a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .32rem;
  color: var(--muted);
  font-size: .88rem;
  font-weight: 500;
  text-decoration: none;
  padding: .48rem .62rem;
  border-radius: 999px;
  transition: color .2s, background .2s;
}

.nav-desktop > .nav-item > a::after {
  content: "";
  width: 6px;
  height: 6px;
  margin-top: -2px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  opacity: .55;
}

.nav-desktop > .nav-item > a:hover,
.nav-item:hover > a,
.nav-item.open > a { color: var(--text-strong); background: var(--hover-bg); }

.nav-desktop > .nav-item > a.active { color: var(--text-strong); background: rgba(124, 108, 255, .16); box-shadow: inset 0 0 0 1px rgba(156, 163, 255, .3); }

.nav-drop {
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  min-width: 220px;
  padding: .45rem;
  border-radius: 14px;
  border: 1px solid var(--border-strong);
  background: var(--drop-bg);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  box-shadow: var(--drop-shadow);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
  z-index: 130;
}

.nav-drop-uw {
  min-width: 250px;
  max-height: min(70vh, 440px);
  overflow-y: auto;
  left: auto;
  right: 0;
  transform: translateY(8px);
}

.nav-item:hover > .nav-drop,
.nav-item:focus-within > .nav-drop,
.nav-item.open > .nav-drop {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.nav-item:hover > .nav-drop-uw,
.nav-item:focus-within > .nav-drop-uw,
.nav-item.open > .nav-drop-uw {
  transform: translateY(0);
}

.nav-drop a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  padding: .62rem .8rem;
  border-radius: 10px;
  color: var(--muted);
  font-size: .86rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

.nav-drop a:hover { color: var(--text-strong); background: var(--hover-bg); }

.nav-drop-label {
  margin: .45rem .55rem .2rem;
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted-2);
  font-weight: 700;
}

.nav-pill {
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .12rem .4rem;
  border-radius: 999px;
  background: rgba(251, 191, 36, .14);
  color: #fbbf24;
}

.nav-pill.live {
  background: rgba(16, 185, 129, .16);
  color: #34d399;
}

.nav-dash {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .88rem !important;
  font-weight: 600 !important;
  color: var(--text) !important;
  padding: .5rem .9rem !important;
  border-radius: 999px !important;
  border: 1px solid var(--border-strong);
}

.nav-dash::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 10px rgba(52, 211, 153, .8);
}

.menu-btn {
  display: none;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--chip-bg);
  color: var(--text);
  cursor: pointer;
}

.menu-btn .ico { width: 20px; height: 20px; }

.mobile-nav {
  position: fixed;
  top: 86px;
  left: 1rem;
  right: 1rem;
  z-index: 99;
  display: none;
  flex-direction: column;
  gap: .35rem;
  padding: .75rem;
  border-radius: 1.3rem;
  border: 1px solid var(--border-strong);
  background: var(--mobile-nav-bg);
  backdrop-filter: blur(20px);
  box-shadow: var(--shadow-mobile-nav);
}

.mobile-nav.open { display: flex; animation: drop .3s var(--ease); }

@keyframes drop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

.mobile-nav a {
  color: var(--text);
  text-decoration: none;
  font-size: 1rem;
  font-weight: 500;
  padding: .85rem 1rem;
  border-radius: .9rem;
}

.mobile-nav a:hover, .mobile-nav a.active { background: rgba(124, 108, 255, .16); }

.mobile-nav .btn { justify-content: center; margin-top: .35rem; }

.nav-acc { border-radius: .9rem; }

.nav-acc summary {
  list-style: none;
  cursor: pointer;
  color: var(--text);
  font-size: 1rem;
  font-weight: 500;
  padding: .85rem 1rem;
  border-radius: .9rem;
}

.nav-acc summary::-webkit-details-marker { display: none; }

.nav-acc summary::after {
  content: "";
  float: right;
  width: 7px;
  height: 7px;
  margin-top: .45rem;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg);
  opacity: .55;
}

.nav-acc[open] summary { background: rgba(124, 108, 255, .16); }

.nav-acc[open] summary::after { transform: rotate(-135deg); margin-top: .65rem; }

.nav-acc a {
  padding: .65rem 1rem .65rem 1.35rem;
  font-size: .92rem;
  color: var(--muted) !important;
}

/* ---- Hero ---- */
.hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(var(--header-h) + 2rem) 0 3rem;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 3.5rem;
  align-items: center;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .5rem 1rem;
  margin-bottom: 1.4rem;
  border-radius: 999px;
  border: 1px solid rgba(156, 163, 255, .3);
  background: linear-gradient(180deg, rgba(139, 92, 246, .18), rgba(108, 123, 255, .06));
  color: var(--brand-2);
  font-size: .82rem;
  font-weight: 600;
  box-shadow: 0 0 30px rgba(124, 108, 255, .22);
}

.hero-badge .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 12px rgba(52, 211, 153, .9);
  animation: pulse 2.2s ease-in-out infinite;
}

.hero .lead {
  margin-top: 1.5rem;
  max-width: 600px;
  color: var(--muted);
  font-size: 1.15rem;
}

.hero .lead-soft {
  margin-top: 1rem;
  color: var(--text-accent-soft);
}

.hero .cta { margin-top: 2.2rem; }

.hero-audience {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: 1.8rem;
}

.audience-pill {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .45rem .85rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--chip-bg);
  color: var(--muted);
  font-size: .82rem;
  font-weight: 500;
}

.audience-pill .ico { width: 15px; height: 15px; color: var(--brand-2); }

.brand-line {
  margin: 1.1rem 0 0;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--text-display);
}

.brand-line-2 {
  margin-top: .35rem;
  color: var(--brand-2);
  font-size: 1.05rem;
}

.punch-row {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 1rem;
}

.punch-row span {
  padding: .4rem .75rem;
  border-radius: 999px;
  border: 1px solid rgba(52, 211, 153, .28);
  background: rgba(16, 185, 129, .08);
  color: var(--success-soft);
  font-size: .78rem;
  font-weight: 650;
  letter-spacing: -.01em;
}

.num.static {
  font-size: 1.15rem;
  font-weight: 750;
  letter-spacing: -.03em;
  line-height: 1.2;
}

/* ---- Hero media / mockup ---- */
.hero-media {
  position: relative;
  min-width: 0;
}

.hero-halo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 110%;
  height: 90%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse 55% 50% at 50% 45%, rgba(124, 108, 255, .35), rgba(139, 92, 246, .12) 55%, transparent 72%);
  filter: blur(24px);
  pointer-events: none;
}

.mockup {
  position: relative;
  border-radius: var(--radius-lg);
  border: 1px solid var(--mockup-border);
  background: var(--mockup-bg);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow-mockup), inset 0 1px 0 rgba(255, 255, 255, .09);
  overflow: hidden;
}

.mockup::before {
  content: "";
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(157, 180, 255, .8), transparent);
  z-index: 1;
}

.mock-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .8rem 1.1rem;
  border-bottom: 1px solid var(--border);
}

.mock-dots { display: inline-flex; gap: .35rem; }

.mock-dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .14); }

.mock-dots i:first-child { background: #f87171; }
.mock-dots i:nth-child(2) { background: #fbbf24; }
.mock-dots i:nth-child(3) { background: #34d399; }

.mock-url {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-left: auto;
  padding: .35rem .85rem;
  border-radius: 999px;
  background: var(--chip-bg);
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: .74rem;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}

.mock-url .ico { width: 12px; height: 12px; }

.mock-body { display: grid; grid-template-columns: 150px 1fr; min-height: 340px; }

.mock-side {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  padding: .9rem .7rem;
  border-right: 1px solid var(--border);
  background: var(--mock-side-bg);
}

.side-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .7rem;
  border-radius: .65rem;
  color: var(--muted);
  font-size: .76rem;
  font-weight: 500;
  border: 1px solid transparent;
}

.side-item .ico { width: 15px; height: 15px; }

.side-item.active {
  color: var(--side-active-color);
  background: var(--side-active-bg);
  border-color: rgba(156, 163, 255, .35);
  box-shadow: 0 0 20px rgba(124, 108, 255, .2);
}

.side-item.brand-tag {
  margin-top: auto;
  font-size: .68rem;
  border: 1px dashed var(--border-strong);
  background: rgba(52, 211, 153, .06);
  color: var(--success-bright);
  align-items: flex-start;
}

.mock-main { padding: 1rem 1.1rem 1.1rem; display: flex; flex-direction: column; gap: .8rem; }

.m-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }

.m-title { font-size: .82rem; font-weight: 600; color: var(--muted); }

.m-title span { color: var(--text-strong); }

.m-badge {
  padding: .3rem .7rem;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(52, 211, 153, .22), rgba(52, 211, 153, .1));
  border: 1px solid rgba(52, 211, 153, .4);
  color: var(--success-bright);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  box-shadow: 0 0 16px rgba(52, 211, 153, .25);
  white-space: nowrap;
}

.m-stages { display: flex; flex-wrap: wrap; gap: .4rem; }

.m-stage {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .28rem .6rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--chip-bg);
  color: var(--muted);
  font-size: .66rem;
  font-weight: 600;
}

.m-stage .ico { width: 12px; height: 12px; }

.m-stage.done { color: var(--success-bright); border-color: rgba(52, 211, 153, .35); background: rgba(52, 211, 153, .08); }

.m-stage.pending { opacity: .55; }

.m-progress { display: flex; flex-direction: column; gap: .45rem; }

.m-prog-label {
  display: flex;
  justify-content: space-between;
  font-size: .7rem;
  color: var(--muted);
}

.m-prog-label span:last-child { color: var(--brand-2); font-weight: 600; }

.m-bar {
  height: 8px;
  border-radius: 999px;
  background: var(--bar-track);
  border: 1px solid var(--border);
  overflow: hidden;
}

.m-bar span {
  display: block;
  height: 100%;
  width: 87%;
  border-radius: 999px;
  background: var(--grad);
  box-shadow: 0 0 14px rgba(139, 92, 246, .6);
}

.m-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }

.m-cell {
  padding: .55rem .7rem;
  border-radius: .7rem;
  border: 1px solid var(--border);
  background: var(--chip-bg);
}

.m-cell .k { display: block; font-size: .64rem; color: var(--muted-2); letter-spacing: .05em; text-transform: uppercase; }

.m-cell .v { display: block; margin-top: .15rem; font-size: .8rem; font-weight: 650; color: var(--text-strong); }

.m-cell .v.accept { color: var(--success-bright); }

.m-foot {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.2rem;
  padding-top: .4rem;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: .66rem;
}

.m-foot span { display: inline-flex; align-items: center; gap: .4rem; }

.m-foot .ico { width: 13px; height: 13px; }

.m-audit .ico { color: var(--green); }
.m-zta .ico { color: var(--violet); }

/* ---- Floating chips ---- */
.float-chip {
  position: absolute;
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .6rem .9rem .6rem .6rem;
  border-radius: 1rem;
  border: 1px solid var(--float-chip-border);
  background: var(--float-chip-bg);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow-float), inset 0 1px 0 rgba(255, 255, 255, .08);
  font-size: .7rem;
  color: var(--text);
  z-index: 2;
  animation: floaty 7s ease-in-out infinite;
}

@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.float-chip .fc-ico {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: .7rem;
  background: linear-gradient(135deg, rgba(52, 211, 153, .25), rgba(52, 211, 153, .08));
  border: 1px solid rgba(52, 211, 153, .35);
  color: var(--success-bright);
}

.float-chip .fc-ico.sky { background: linear-gradient(135deg, rgba(34, 211, 238, .25), rgba(34, 211, 238, .08)); border-color: rgba(34, 211, 238, .35); color: var(--cyan-bright); }
.float-chip .fc-ico.violet { background: linear-gradient(135deg, rgba(167, 139, 250, .25), rgba(167, 139, 250, .08)); border-color: rgba(167, 139, 250, .35); color: var(--violet-bright); }

.fc-ico .ico { width: 18px; height: 18px; }

.fc-t { font-weight: 650; }

.fc-s { color: var(--muted); display: block; margin-top: .1rem; }

.fc-1 { top: -24px; right: -16px; animation-delay: 0s; }
.fc-2 { bottom: 12%; left: -46px; animation-delay: -2.4s; }
.fc-3 { bottom: -26px; right: 8%; animation-delay: -4.4s; }

/* ---- Trust strip ---- */
.trust-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .8rem 1.6rem;
  margin-top: 3.5rem;
  padding-top: 2.2rem;
  border-top: 1px solid var(--border);
}

.trust-item {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: var(--muted);
  font-size: .84rem;
  font-weight: 500;
}

.trust-item .ico { width: 15px; height: 15px; color: var(--green); }

/* ---- Stats ---- */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.1rem;
  margin-top: 2.2rem;
}

.stat {
  padding: 1.35rem 1.4rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--glass-bg);
  box-shadow: var(--shadow-card);
}

.stat .num {
  display: block;
  font-family: var(--font-display);
  font-size: 2.3rem;
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.1;
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.stat > span:last-child { display: block; margin-top: .4rem; color: var(--muted); font-size: .84rem; }

/* ---- Plain English glossary ---- */
.plain-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 2.2rem;
}

.plain-term {
  margin: 0;
  padding: 1.25rem 1.4rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--glass-bg);
}

.plain-term dt {
  font-family: var(--font-display);
  font-weight: 650;
  letter-spacing: -.02em;
  margin-bottom: .4rem;
}

.plain-term dd {
  margin: 0;
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.55;
}

.new-tag {
  display: inline-block;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: .65rem;
}

.pillar-tag {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: .6rem;
}

/* ---- Challenges: pain / fix ---- */
.challenge-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 2.4rem;
}

.challenge-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  overflow: hidden;
  background: var(--glass-bg-alt);
}

.challenge-pain, .challenge-fix {
  padding: 1.35rem 1.5rem;
}

.challenge-pain {
  border-right: 1px solid var(--border);
  background: rgba(255, 80, 110, .04);
}

.challenge-fix {
  background: rgba(52, 211, 153, .05);
}

.challenge-row h3 {
  margin: .4rem 0 .4rem;
  font-size: 1.05rem;
}

.challenge-pain p, .challenge-fix p {
  margin: 0;
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.55;
}

.sev {
  display: inline-block;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.sev-critical { color: #fb7185; }
.sev-high { color: #fbbf24; }

.fix-label {
  display: inline-block;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--green);
}

@media (max-width: 720px) {
  .challenge-row { grid-template-columns: 1fr; }
  .challenge-pain { border-right: none; border-bottom: 1px solid var(--border); }
}

/* ---- Marquee ---- */
.marquee-wrap {
  position: relative;
  overflow: hidden;
  margin-top: 2.4rem;
  padding: .6rem 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.marquee-track {
  display: flex;
  width: max-content;
  gap: 1.2rem;
  animation: marquee 42s linear infinite;
}

.marquee-wrap:hover .marquee-track { animation-play-state: paused; }

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.marquee-item {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .7rem 1.25rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--glass-bg-subtle);
  color: var(--muted);
  font-size: .88rem;
  font-weight: 600;
  white-space: nowrap;
  transition: border-color .25s, color .25s, transform .25s;
}

.marquee-item:hover { border-color: var(--border-strong); color: var(--emphasis); transform: translateY(-2px); }

.marquee-item .ico { width: 16px; height: 16px; color: var(--brand-2); }

/* ---- Compare ---- */
.compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
  margin-top: 2.6rem;
}

.compare-col {
  padding: 1.7rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--glass-bg-alt);
}

.compare-col.ai {
  border-color: rgba(156, 163, 255, .35);
  background: linear-gradient(180deg, rgba(124, 108, 255, .14), rgba(124, 108, 255, .04));
  box-shadow: 0 0 50px rgba(124, 108, 255, .14);
}

.compare-head {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: 1.1rem;
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 650;
}

.compare-head.ai .ico { color: var(--brand-2); }
.compare-head.legacy { color: var(--muted); }

.compare-head .ico { width: 20px; height: 20px; }

.compare-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .7rem; }

.compare-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .6rem;
  align-items: start;
  color: var(--muted);
  font-size: .9rem;
}

.compare-col.ai .compare-list li { color: var(--compare-ai-text); }

.ok-ico { flex-shrink: 0; width: 18px; height: 18px; margin-top: 2px; }

.compare-col.ai .ok-ico { color: var(--green); }
.compare-col.legacy .ok-ico { color: var(--pink); }

/* ---- ZTA ladder ---- */
.zta-ladder { display: flex; flex-direction: column; gap: .6rem; margin-top: 2.4rem; }

.zta-ladder.zta-interactive {
  gap: 0;
  position: relative;
}

@media (min-width: 900px) {
  .zta-ladder.zta-interactive {
    flex-direction: row;
    align-items: stretch;
    gap: .75rem;
  }

  .zta-ladder.zta-interactive .zta-flow {
    display: none;
  }

  .zta-ladder.zta-interactive .zta-step {
    flex: 1;
    cursor: pointer;
  }
}

.zta-ladder.zta-interactive .zta-step {
  transition: transform .35s var(--ease), border-color .35s, box-shadow .35s, background .35s;
}

.zta-ladder.zta-interactive .zta-step.active {
  border-color: rgba(156, 163, 255, .55);
  box-shadow: 0 0 0 1px rgba(156, 163, 255, .25), 0 24px 56px rgba(124, 108, 255, .18);
  transform: translateY(-6px);
}

.zta-ladder.zta-interactive .zta-step.active.L1 { background: linear-gradient(180deg, rgba(52, 211, 153, .12), var(--glass-bg)); }
.zta-ladder.zta-interactive .zta-step.active.L2 { background: linear-gradient(180deg, rgba(34, 211, 238, .1), var(--glass-bg)); }
.zta-ladder.zta-interactive .zta-step.active.L3 { background: linear-gradient(180deg, rgba(244, 114, 182, .1), var(--glass-bg)); }

.zta-share-bar {
  display: flex;
  height: 14px;
  margin-top: 2rem;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid var(--border-strong);
  background: var(--bar-track);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .06);
}

.zta-share-bar span {
  display: block;
  height: 100%;
  min-width: 3px;
  transition: width .8s var(--ease);
}

.zta-share-bar .zta-share-l1 { width: 90%; background: var(--zta-l1); }
.zta-share-bar .zta-share-l2 { width: 8%; background: var(--zta-l2); }
.zta-share-bar .zta-share-l3 { width: 2%; background: var(--zta-l3); }

.zta-share-legend {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .85rem 1rem;
  margin-top: .85rem;
}

.zta-legend-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .55rem;
  align-items: start;
  font-size: .8rem;
  line-height: 1.45;
  color: var(--muted);
}

.zta-legend-item strong {
  color: var(--text-strong);
  font-weight: 650;
}

.zta-swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  margin-top: .15rem;
  border: 1px solid var(--border-strong);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25);
}

.zta-swatch.l1 { background: var(--zta-l1); }
.zta-swatch.l2 { background: var(--zta-l2); }
.zta-swatch.l3 { background: var(--zta-l3); }

.zta-detail-panel {
  margin-top: 1.2rem;
  padding: 1.35rem 1.5rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--glass-bg-alt);
  min-height: 5.5rem;
  transition: opacity .3s var(--ease);
}

.zta-detail-panel .zta-detail-kicker {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brand-2);
  margin-bottom: .45rem;
}

.zta-detail-panel h4 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  margin: 0 0 .45rem;
}

.zta-detail-panel p {
  margin: 0;
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.55;
}

.zta-step {
  position: relative;
  padding: 1.4rem 1.6rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--glass-bg);
  transition: transform .3s var(--ease), border-color .3s, box-shadow .3s;
}

.zta-step:hover { transform: translateY(-4px); border-color: var(--border-strong); box-shadow: var(--shadow-card-lift); }

.zta-step.L1 { border-top: 3px solid var(--zta-l1); }
.zta-step.L2 { border-top: 3px solid var(--zta-l2); }
.zta-step.L3 { border-top: 3px solid var(--zta-l3); }

.step-top { display: flex; align-items: center; gap: .9rem; margin-bottom: .85rem; }

.step-ico {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: .85rem;
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--border);
  color: var(--brand-2);
}

.step-ico .ico { width: 21px; height: 21px; }

.zta-step .step-num {
  font-family: var(--font-display);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brand-2);
  -webkit-text-fill-color: var(--brand-2);
  background: none;
}

.zta-step h3 { font-size: 1.06rem; margin-bottom: .4rem; }
.zta-step p { color: var(--muted); font-size: .92rem; }

.tokens {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-top: .95rem;
  padding: .38rem .85rem;
  border-radius: 999px;
  font-size: .74rem;
  font-weight: 650;
}

.tokens .ico { width: 13px; height: 13px; }

.tokens.zero { color: var(--success-bright); background: rgba(52, 211, 153, .12); border: 1px solid rgba(52, 211, 153, .35); }
.tokens.one { color: #f9a8d4; background: rgba(244, 114, 182, .12); border: 1px solid rgba(244, 114, 182, .35); }

.zta-flow {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 0 auto;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, .04);
  color: var(--brand-2);
}

.zta-flow .ico { width: 17px; height: 17px; }

.zta-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem;
  margin-top: 1.8rem;
}

.zta-stat {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.4rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--glass-bg);
}

.zstat-ico {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: .85rem;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, .05);
}

.zstat-ico .ico { width: 21px; height: 21px; }

.zstat-ico.blue { color: var(--brand-2); background: linear-gradient(135deg, rgba(108, 123, 255, .28), rgba(108, 123, 255, .08)); border-color: rgba(108, 123, 255, .38); }
.zstat-ico.green { color: var(--green); background: linear-gradient(135deg, rgba(52, 211, 153, .2), rgba(52, 211, 153, .07)); border-color: rgba(52, 211, 153, .38); }
.zstat-ico.violet { color: var(--violet); background: linear-gradient(135deg, rgba(167, 139, 250, .25), rgba(167, 139, 250, .08)); border-color: rgba(167, 139, 250, .38); }

.zta-stat .body { min-width: 0; }

.zta-stat .num {
  display: block;
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.1;
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.zta-stat p { margin: .4rem 0 0; color: var(--muted); font-size: .84rem; }

/* ---- Agent grid ---- */
.agent-grid, .audience-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
  margin-top: 2.6rem;
}

.agent-card, .audience-card, .feature-card, .bento-card, .testimonial-card {
  position: relative;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--glass-bg);
  transition: transform .3s var(--ease), border-color .3s, box-shadow .3s;
}

.agent-card:hover, .audience-card:hover, .feature-card:hover, .bento-card:hover, .testimonial-card:hover {
  transform: translateY(-5px);
  border-color: rgba(156, 163, 255, .4);
  box-shadow: var(--shadow-card-hover), 0 0 44px rgba(124, 108, 255, .14);
}

.agent-card::after, .audience-card::after, .feature-card::after, .bento-card::after, .testimonial-card::after, .zta-step::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity .35s;
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(129, 140, 248, .16), transparent 65%);
}

.agent-card:hover::after, .audience-card:hover::after, .feature-card:hover::after, .bento-card:hover::after, .testimonial-card:hover::after, .zta-step:hover::after { opacity: 1; }

.agent-card { padding: 1.6rem; }

.icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: .9rem;
  margin-bottom: 1.1rem;
  background: linear-gradient(135deg, rgba(124, 108, 255, .28), rgba(124, 108, 255, .08));
  border: 1px solid rgba(156, 163, 255, .35);
  color: var(--brand-2);
}

.icon .ico { width: 22px; height: 22px; }

.icon.violet { background: linear-gradient(135deg, rgba(167, 139, 250, .28), rgba(167, 139, 250, .08)); border-color: rgba(167, 139, 250, .4); color: var(--violet); }
.icon.sky { background: linear-gradient(135deg, rgba(34, 211, 238, .22), rgba(34, 211, 238, .07)); border-color: rgba(34, 211, 238, .35); color: var(--cyan); }
.icon.green { background: linear-gradient(135deg, rgba(52, 211, 153, .2), rgba(52, 211, 153, .07)); border-color: rgba(52, 211, 153, .35); color: var(--green); }

.agent-card h3 { margin-bottom: .55rem; }
.agent-card p { color: var(--muted); font-size: .9rem; }
.agent-card .action { display: block; margin-top: .9rem; font-size: .82rem; font-weight: 600; color: var(--brand-2); }

/* ---- Audience cards ---- */
.audience-card { padding: 1.6rem; }

.ac-ico {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: .85rem;
  margin-bottom: 1rem;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, .06);
}

.ac-ico .ico { width: 20px; height: 20px; }

.agent-card .ac-ico {
  background: linear-gradient(135deg, rgba(124, 108, 255, .28), rgba(124, 108, 255, .08));
  border-color: rgba(156, 163, 255, .35);
  color: var(--brand-2);
}

.audience-card .ac-ico {
  background: linear-gradient(135deg, color-mix(in srgb, currentColor 24%, transparent), color-mix(in srgb, currentColor 7%, transparent));
  border-color: color-mix(in srgb, currentColor 38%, transparent);
}

.ac-blue { color: var(--brand-2); }
.ac-violet { color: var(--violet); }
.ac-green { color: var(--green); }
.ac-sky { color: var(--cyan); }
.ac-amber { color: var(--amber); }

.audience-card h3 { margin-bottom: .5rem; }
.audience-card p { color: var(--muted); font-size: .9rem; }

.audience-card .who { margin: 0 0 .55rem; color: currentColor; font-weight: 650; }

.audience-card .who + p { font-size: .84rem; }

/* ---- Pipeline ---- */
.pipeline-wrap { margin-top: 2.6rem; }

.pipeline-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .9rem;
  margin-bottom: 1.2rem;
}

.pipeline-step {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 .85rem;
  padding: 1.1rem 1.2rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--chip-bg);
  color: var(--muted);
  text-align: left;
  font-family: var(--font-body);
  cursor: pointer;
  transition: all .3s var(--ease);
}

.pipeline-step:hover { border-color: var(--border-strong); background: var(--glass-bg-hover); }

.pipeline-step.active {
  color: var(--pipeline-active-color);
  border-color: rgba(156, 163, 255, .5);
  background: linear-gradient(180deg, rgba(124, 108, 255, .2), rgba(124, 108, 255, .06));
  box-shadow: 0 0 34px rgba(124, 108, 255, .18);
}

.step-num {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: center;
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -.03em;
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.step-icon {
  grid-column: 2;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
}

.step-icon .ico { width: 20px; height: 20px; }

.pipeline-step .step-body { grid-column: 2; }

.pipeline-step .step-body strong { display: block; font-size: .98rem; }

.pipeline-step .step-body span { font-size: .78rem; color: var(--muted); }

.pipeline-panel {
  padding: 2rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--glass-bg-alt);
}

.pipeline-panel h3 { font-size: 1.3rem; margin-bottom: .7rem; }
.pipeline-panel p { color: var(--muted); max-width: 720px; }

.panel-list { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .6rem 1.4rem; }

.panel-list li {
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr);
  column-gap: .7rem;
  align-items: start;
  color: var(--muted);
  font-size: .9rem;
}

.panel-list li::before {
  position: static;
  content: "–";
  color: var(--brand-2);
  font-weight: 700;
  text-align: center;
  line-height: 1.55;
  width: auto;
  height: auto;
  border-radius: 0;
  margin-top: 0;
  background: none;
  box-shadow: none;
}

/* ---- Feature grid / tabs ---- */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.2rem;
  margin-top: 2.6rem;
}

.feature-card { padding: 1.7rem; }

.feature-card h3 { margin-bottom: .55rem; }
.feature-card p { color: var(--muted); font-size: .92rem; }

.feature-card ul {
  list-style: none;
  margin: 1.05rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .55rem;
}

.feature-card ul li {
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr);
  column-gap: .7rem;
  align-items: start;
  color: var(--muted);
  font-size: .86rem;
}

.feature-card ul li::before {
  position: static;
  content: "–";
  color: var(--brand-2);
  font-weight: 700;
  text-align: center;
  line-height: 1.55;
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.card-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-top: .95rem;
  font-size: .84rem;
  font-weight: 600;
  color: var(--brand-2);
  text-decoration: none;
}

.card-link .ico { width: 14px; height: 14px; transition: transform .25s var(--ease); }
.card-link:hover .ico { transform: translateX(4px); }

.tabs { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 2.6rem; }

.tab {
  padding: .65rem 1.3rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--chip-bg);
  color: var(--muted);
  font-family: var(--font-body);
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .25s var(--ease);
}

.tab:hover { color: var(--emphasis); border-color: var(--border-strong); }

.tab.active {
  color: var(--on-accent);
  border-color: transparent;
  background: var(--grad);
  box-shadow: 0 8px 26px rgba(139, 92, 246, .4);
}

.tab-panel { display: none; margin-top: 1.5rem; padding: 2rem; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--glass-bg-alt); }
.tab-panel.active { display: block; opacity: 1; transform: none; animation: fadeUp .45s var(--ease); }

@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.panel-tag {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .4rem .85rem;
  border-radius: 999px;
  border: 1px solid rgba(156, 163, 255, .35);
  background: rgba(124, 108, 255, .12);
  color: var(--brand-2);
  font-size: .74rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.panel-tag .ico { width: 14px; height: 14px; }

.panel-title { font-size: 1.45rem; margin-bottom: .7rem; }
.panel-desc { color: var(--muted); max-width: 720px; }
.panel-list { margin-top: 1.3rem; }

/* ---- Bento ---- */
.bento {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 2.6rem;
  align-items: stretch;
}

.bento-card {
  padding: 1.45rem 1.5rem;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

.bento-card.wide { grid-column: span 2; }

.bento-kicker {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--font-display);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brand-2);
  margin-bottom: .8rem;
}

.bento-kicker .ico {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  align-self: center;
}

.bento-card h3 { font-size: 1.12rem; margin-bottom: .55rem; }

.bento-card > p,
.bento-list {
  color: var(--muted);
  font-size: .88rem;
  line-height: 1.55;
}

.bento-list li,
.lob-list li,
.reg-card li {
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr);
  column-gap: .7rem;
  align-items: start;
  padding-left: 0;
}

.bento-list li::before,
.lob-list li::before,
.reg-card li::before {
  position: static;
  content: "–";
  color: var(--brand-2);
  font-weight: 700;
  font-size: .95em;
  line-height: 1.55;
  text-align: center;
}

.bento-list {
  list-style: none;
  margin: .65rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  flex: 1;
}

.bento-list li {
  position: relative;
}

/* ---- Integrations ---- */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 2.2rem 0 1.4rem;
}

.filter-btn {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .5rem 1.05rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--chip-bg);
  color: var(--muted);
  font-family: var(--font-body);
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .25s var(--ease);
}

.filter-btn:hover { color: var(--emphasis); }

.filter-btn.active { color: var(--on-accent); border-color: transparent; background: var(--grad); box-shadow: 0 6px 20px rgba(139, 92, 246, .4); }

.filter-btn .ico { width: 14px; height: 14px; }

.integration-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .9rem;
}

.integration-tile {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .95rem 1rem;
  border-radius: .95rem;
  border: 1px solid var(--border);
  background: var(--glass-bg-alt);
  color: var(--muted);
  font-size: .84rem;
  font-weight: 600;
  transition: all .25s var(--ease);
  cursor: default;
}

.integration-tile:hover {
  transform: translateY(-3px);
  border-color: rgba(156, 163, 255, .4);
  color: var(--emphasis);
  box-shadow: var(--shadow-card), 0 0 28px rgba(124, 108, 255, .12);
}

.integration-tile .ico { width: 17px; height: 17px; color: var(--brand-2); flex-shrink: 0; }

.integration-tile .cat { margin-left: auto; font-size: .66rem; font-weight: 500; color: var(--muted-2); text-transform: uppercase; letter-spacing: .04em; }

/* ---- Testimonials ---- */
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
  margin-top: 2.6rem;
}

.testimonial-card { padding: 1.7rem; display: flex; flex-direction: column; }

.testimonial-stars { display: inline-flex; gap: .2rem; margin-bottom: 1rem; }

.testimonial-stars .ico { width: 16px; height: 16px; color: var(--amber); }

.quote { font-size: .96rem; color: var(--quote-text); line-height: 1.65; flex: 1; }

.who {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-top: 1.4rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--border);
}

.avatar {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: .82rem;
  font-weight: 700;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .2);
}

.av-1 { background: linear-gradient(135deg, #6c7bff, #8b5cf6); }
.av-2 { background: linear-gradient(135deg, #0ea5e9, #22d3ee); }
.av-3 { background: linear-gradient(135deg, #ec4899, #f472b6); }

.who-text strong { display: block; font-size: .9rem; font-weight: 650; color: var(--text-strong); }
.who-text span { display: block; font-size: .78rem; color: var(--muted); }

/* ---- FAQ ---- */
.faq-search {
  width: 100%;
  max-width: 520px;
  margin: 1.6rem 0 2.2rem;
  padding: .85rem 1.2rem;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--input-fill);
  color: var(--text);
  font-family: var(--font-body);
  font-size: .92rem;
  backdrop-filter: blur(10px);
}

.faq-search::placeholder { color: var(--muted-2); }
.faq-search:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px rgba(108, 123, 255, .15); }

.faq { display: flex; flex-direction: column; gap: .8rem; }

.faq-item {
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--glass-bg-alt);
  overflow: hidden;
  transition: border-color .25s;
}

.faq-item.open { border-color: rgba(156, 163, 255, .4); box-shadow: 0 0 30px rgba(124, 108, 255, .1); }

.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 1.4rem;
  background: none;
  border: none;
  color: var(--text-strong);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.faq-q .chev {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--border);
  color: var(--muted);
  transition: transform .3s var(--ease), color .25s, border-color .25s;
}

.faq-q .chev .ico { width: 14px; height: 14px; }

.faq-item.open .chev { transform: rotate(180deg); color: var(--emphasis); border-color: rgba(156, 163, 255, .5); background: rgba(124, 108, 255, .18); }

.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s var(--ease); }

.faq-item.open .faq-a { grid-template-rows: 1fr; }

.faq-a-inner { overflow: hidden; }

.faq-a-inner p {
  padding: 0 1.4rem 1.2rem;
  color: var(--muted);
  font-size: .92rem;
  max-width: 760px;
}

/* ---- Contact CTA ---- */
.contact-box {
  position: relative;
  overflow: hidden;
  margin-top: 2.6rem;
  padding: 4.5rem 3rem;
  text-align: center;
  border-radius: 2.2rem;
  border: 1px solid var(--contact-border);
  background: var(--contact-bg);
  box-shadow: var(--shadow-contact), inset 0 1px 0 rgba(255, 255, 255, .1);
}

.contact-box::before, .contact-box::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
}

.contact-box::before { width: 340px; height: 340px; top: -120px; left: -80px; background: rgba(108, 123, 255, .5); animation: pulseBlob 9s ease-in-out infinite; }
.contact-box::after { width: 320px; height: 320px; bottom: -130px; right: -60px; background: rgba(236, 72, 153, .4); animation: pulseBlob 9s ease-in-out -4.5s infinite; }

@keyframes pulseBlob { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.25); } }

.contact-box > * { position: relative; z-index: 1; }

.contact-box h2 { margin-bottom: 1rem; }
.contact-box p { color: var(--contact-text); max-width: 560px; margin: 0 auto 2.2rem; font-size: 1.05rem; }

.contact-box .section-label { background: rgba(124, 108, 255, .25); }

.contact-email {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin-top: 1.6rem;
  padding: .6rem 1.2rem;
  border-radius: 999px;
  border: 1px solid rgba(156, 163, 255, .4);
  background: var(--contact-email-bg);
  color: var(--contact-email-color);
  font-weight: 600;
  text-decoration: none;
  transition: all .25s var(--ease);
}

.contact-email:hover { background: rgba(124, 108, 255, .28); transform: translateY(-2px); box-shadow: 0 12px 30px rgba(124, 108, 255, .3); }

.contact-email .ico { width: 17px; height: 17px; }

/* ---- Footer ---- */
footer {
  position: relative;
  max-width: 1160px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 3.5rem;
  border-top: 1px solid var(--border);
}

footer::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(157, 180, 255, .6), transparent);
}

.footer-grid {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.footer-grid > div:last-child { color: var(--muted-2); font-size: .84rem; }

.footer-links { display: flex; gap: 1.2rem; flex-wrap: wrap; }

.footer-links a { color: var(--muted); text-decoration: none; font-size: .88rem; }

.footer-links a:hover { color: var(--emphasis); }

footer .brand-name { font-size: 1.05rem; }
footer .brand-mark { width: 32px; height: 32px; border-radius: 10px; }

/* ---- Page hero (sub-pages) ---- */
.page-hero {
  padding: calc(var(--header-h) + 4rem) 0 0;
  text-align: center;
  border-bottom: none;
}

.page-hero::before {
  content: "";
  position: absolute;
  top: -60px;
  left: -10%;
  right: -10%;
  height: 520px;
  z-index: -1;
  background: radial-gradient(ellipse 62% 55% at 50% 32%, rgba(124, 108, 255, .22), transparent 70%);
  pointer-events: none;
}

.page-hero .section-label { margin-left: auto; margin-right: auto; }

.page-hero h1 {
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
  font-size: clamp(2.6rem, 5.4vw, 4rem);
  background: var(--gradient-hero);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.page-hero .lead { margin: 1.4rem auto 0; max-width: 620px; color: var(--muted); font-size: 1.12rem; }
.page-hero .cta { justify-content: center; margin-top: 2.2rem; }

.page-hero + section { padding-top: 4.5rem; }

/* ---- Modal ---- */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: var(--overlay-bg);
  backdrop-filter: blur(10px);
}

.modal-overlay.open { display: flex; animation: fadeIn .25s var(--ease); }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.modal {
  position: relative;
  width: 100%;
  max-width: 460px;
  padding: 2.2rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--modal-border);
  background: var(--modal-bg);
  box-shadow: var(--shadow-modal), inset 0 1px 0 rgba(255, 255, 255, .08);
}

.modal h2 { font-size: 1.5rem; margin-bottom: .5rem; }
.modal > p { color: var(--muted); font-size: .92rem; margin-bottom: 1.6rem; }

.modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--chip-bg);
  color: var(--muted);
  cursor: pointer;
  transition: all .25s;
}

.modal-close:hover { color: var(--emphasis); border-color: var(--border-strong); background: var(--hover-bg-strong); }

.modal-close .ico { width: 17px; height: 17px; }

.field { margin-bottom: .9rem; }

.field label { display: block; font-size: .8rem; font-weight: 600; color: var(--muted); margin-bottom: .35rem; }

.field input, .field select, .field textarea {
  width: 100%;
  padding: .8rem 1rem;
  border-radius: .8rem;
  border: 1px solid var(--border-strong);
  background: var(--input-fill);
  color: var(--text);
  font-family: var(--font-body);
  font-size: .95rem;
}

.field textarea { resize: vertical; min-height: 74px; }

.field select { appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23838cb0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; }

.field select option { background: #12172b; color: var(--text); }

.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px rgba(108, 123, 255, .15); }

.modal .btn-primary { width: 100%; justify-content: center; margin-top: .4rem; padding: .95rem; }

.form-note { font-size: .74rem; color: var(--muted-2); margin-top: .9rem; text-align: center; }

.form-status { font-size: .85rem; margin-top: .9rem; text-align: center; }

.form-status.error { color: var(--error-bright); }
.form-status.ok { color: var(--success-bright); }

.modal-success { display: none; text-align: center; padding: 1rem 0 .5rem; }

.modal-success.show { display: block; animation: fadeUp .45s var(--ease); }

.modal-success .ok-ico { width: 54px; height: 54px; color: var(--green); margin: 0 auto .9rem; }
.modal-success h3 { font-size: 1.3rem; margin-bottom: .4rem; }
.modal-success p { color: var(--muted); font-size: .92rem; }

.buy-gates {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 1.8rem;
}

.buy-gate {
  padding: 1.25rem 1.2rem 1.15rem;
  border-radius: 1.1rem;
  border: 1px solid rgba(252, 165, 165, .22);
  background: var(--buy-gate-bg);
}

.buy-gate h3 {
  margin: .2rem 0 .55rem;
  font-size: 1.05rem;
  letter-spacing: -.02em;
}

.buy-gate p { margin: 0; color: var(--muted); font-size: .86rem; line-height: 1.5; }

.gate-kicker {
  margin: 0;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.gate-no { color: var(--error-bright); }
.gate-yes { color: var(--success-bright); }

.buy-gate code,
#go-live code {
  font-size: .78em;
  padding: .08rem .35rem;
  border-radius: .35rem;
  background: rgba(255, 255, 255, .08);
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.1rem;
  margin-top: 2.2rem;
  align-items: stretch;
}

.price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.65rem 1.45rem 1.5rem;
  border-radius: 1.25rem;
  border: 1px solid var(--price-card-border);
  background: var(--price-card-bg);
  box-shadow: var(--shadow-card);
}

.price-card.featured {
  border-color: rgba(167, 139, 250, .55);
  background: var(--price-featured-bg);
  box-shadow: 0 22px 50px rgba(108, 92, 231, .28), inset 0 1px 0 rgba(255, 255, 255, .1);
  transform: translateY(-6px);
}

.price-badge {
  position: absolute;
  top: -.7rem;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  padding: .28rem .7rem;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--on-accent);
  background: var(--grad);
  white-space: nowrap;
}

.price-tier {
  margin: .15rem 0 .35rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}

.price-amount {
  margin: 0;
  font-family: var(--font-display, inherit);
  font-size: 2.15rem;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.1;
}

.price-amount span {
  margin-left: .15rem;
  font-size: .92rem;
  font-weight: 600;
  color: var(--muted);
}

.price-sub {
  margin: .55rem 0 .35rem;
  color: var(--text-strong);
  font-size: .92rem;
  font-weight: 600;
}

.price-ideal {
  margin: 0 0 1rem;
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.45;
  min-height: 2.6em;
}

.price-bullets {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
  flex: 1;
}

.price-bullets li {
  display: flex;
  gap: .5rem;
  align-items: flex-start;
  margin-bottom: .55rem;
  color: var(--muted);
  font-size: .84rem;
  line-height: 1.4;
}

.price-bullets .ico.yes,
.price-matrix .ico.yes {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  margin-top: .12rem;
  color: var(--success-bright);
}

.price-card .btn { width: 100%; justify-content: center; }

.matrix-wrap {
  margin-top: 2.6rem;
  overflow-x: auto;
  border-radius: 1.1rem;
  border: 1px solid var(--matrix-border);
  background: var(--matrix-bg);
}

.price-matrix {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  font-size: .84rem;
}

.price-matrix th,
.price-matrix td {
  padding: .85rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--matrix-row-border);
  vertical-align: middle;
}

.price-matrix thead th {
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--matrix-head-bg);
}

.price-matrix tbody th {
  font-weight: 600;
  color: var(--text-strong);
  width: 32%;
}

.price-matrix td { color: var(--muted); }

.price-matrix tbody tr:hover td,
.price-matrix tbody tr:hover th { background: var(--matrix-row-hover); }

.cell-dash { color: var(--cell-dash); }
.cell-soon { color: #fbbf24; font-weight: 600; font-size: .78rem; }
.cell-fee { color: var(--violet-bright); font-weight: 600; font-size: .78rem; }
.cell-incl { color: var(--success-bright); font-weight: 600; font-size: .78rem; }

.price-footnote {
  margin-top: 1.1rem;
  color: var(--muted-2);
  font-size: .78rem;
  line-height: 1.5;
  max-width: 820px;
}

.modal-actions { display: flex; gap: .7rem; }

.modal-actions .btn { flex: 1; justify-content: center; }

/* ---- Footer glossary link ---- */
.footer-glossary-btn {
  background: none;
  border: none;
  color: var(--muted);
  font-size: .88rem;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
  transition: color var(--transition);
}
.footer-glossary-btn:hover {
  color: var(--emphasis);
}

/* ---- Glossary Preview Section ---- */
.glossary-preview-box {
  margin-top: 2rem;
  padding: 2rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--glass-bg-alt);
}

.glossary-preview-search {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .6rem 1rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--search-fill);
  margin-bottom: 1.5rem;
}

.glossary-preview-search input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text-strong);
  font-size: .95rem;
  outline: none;
}

.glossary-preview-search input::placeholder {
  color: var(--muted-2);
}

.glossary-featured-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.glossary-featured-grid .plain-term {
  transition: border-color var(--transition), transform var(--transition);
}

.glossary-featured-grid .plain-term:hover {
  border-color: rgba(99, 102, 241, .4);
  transform: translateY(-2px);
}

.glossary-preview-actions {
  margin-top: 1.5rem;
  display: flex;
  justify-content: center;
}

/* ---- Glossary Modal Drawer ---- */
.glossary-modal-card {
  max-width: 900px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  padding: 2rem;
  background: var(--modal-bg);
  border: 1px solid var(--modal-border);
  box-shadow: var(--shadow-modal);
}

.glossary-modal-header {
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border);
}

.glossary-modal-search {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .65rem 1rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--search-fill);
  margin: 1.25rem 0 .9rem;
}

.glossary-modal-search input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text-strong);
  font-size: .95rem;
  outline: none;
}

.glossary-modal-search input::placeholder {
  color: var(--muted-2);
}

.glossary-filters {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.glossary-filter-chip {
  padding: .35rem .85rem;
  border-radius: 9999px;
  font-size: .78rem;
  font-weight: 550;
  background: var(--chip-bg);
  border: 1px solid var(--border);
  color: var(--muted);
  cursor: pointer;
  transition: all var(--transition);
}

.glossary-filter-chip:hover {
  background: var(--hover-bg-strong);
  color: var(--emphasis);
}

.glossary-filter-chip.active {
  background: rgba(99, 102, 241, .2);
  border-color: rgba(99, 102, 241, .6);
  color: var(--text-strong);
}

.glossary-modal-body {
  flex: 1;
  overflow-y: auto;
  padding-top: 1.25rem;
  padding-right: .5rem;
}

.glossary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .9rem;
}

.glossary-card {
  padding: 1.1rem 1.25rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--glass-bg);
  display: flex;
  flex-direction: column;
}

.glossary-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: .5rem;
  margin-bottom: .4rem;
}

.glossary-term {
  font-family: var(--font-display);
  font-weight: 650;
  font-size: .95rem;
  letter-spacing: -.01em;
  color: var(--text-strong);
}

.glossary-category-tag {
  font-size: .68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: .2rem .5rem;
  border-radius: 4px;
  background: var(--chip-bg);
  color: var(--muted-2);
  white-space: nowrap;
}

.glossary-def {
  margin: 0;
  color: var(--muted);
  font-size: .85rem;
  line-height: 1.5;
}

.glossary-empty {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--muted);
}

/* ---- Line-of-business grid (12 sections) ---- */
.lob-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 2.4rem;
}

.lob-card {
  display: flex;
  flex-direction: column;
  padding: 1.35rem 1.4rem 1.25rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--glass-bg);
  text-decoration: none;
  color: inherit;
  transition: transform .28s var(--ease), border-color .28s, box-shadow .28s;
  min-height: 100%;
}

.lob-card:hover {
  transform: translateY(-4px);
  border-color: rgba(156, 163, 255, .4);
  box-shadow: var(--shadow-card-hover);
}

.lob-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .65rem;
}

.lob-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  height: 2.25rem;
  padding: 0 .45rem;
  border-radius: .55rem;
  font-family: var(--font-display);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1;
  color: var(--brand-2);
  background: var(--chip-bg);
  border: 1px solid var(--border);
  flex-shrink: 0;
}

.lob-tag {
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .18rem .5rem;
  border-radius: 999px;
  border: 1px solid var(--border);
}

.lob-tag.live {
  color: var(--success-bright);
  background: rgba(52, 211, 153, .1);
  border-color: rgba(52, 211, 153, .28);
}

.lob-tag.catalog {
  color: var(--muted);
  background: var(--chip-bg);
}

.lob-card h3 {
  font-size: 1.08rem;
  margin: 0 0 .45rem;
  color: var(--text-strong);
}

.lob-desc {
  margin: 0;
  color: var(--muted);
  font-size: .86rem;
  line-height: 1.5;
}

.lob-list {
  list-style: none;
  margin: .75rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .48rem;
  flex: 1;
}

.lob-list li {
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.5;
}

.lob-cta {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-top: .85rem;
  font-size: .78rem;
  font-weight: 650;
  color: var(--brand-2);
}

.lob-cta .ico { width: 14px; height: 14px; transition: transform .25s var(--ease); }
.lob-card:hover .lob-cta .ico { transform: translateX(3px); }

/* ---- Underwriter quote band ---- */
.uw-quote-band {
  padding: 3.5rem 0 0;
  border-top: 1px solid var(--border);
}

.uw-quote-band blockquote {
  margin: 0 auto;
  max-width: 720px;
  text-align: center;
  padding: 2rem 1.5rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--glass-bg-alt);
}

.uw-quote-band blockquote p {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.5vw, 1.45rem);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.45;
  color: var(--text-strong);
}

.uw-quote-band footer {
  margin-top: 1rem;
  font-size: .88rem;
  color: var(--muted);
  font-style: normal;
}

/* ---- State regulatory showcase ---- */
.reg-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 2rem;
}

.reg-card {
  padding: 1.25rem 1.35rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--glass-bg);
}

.reg-card h4 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin: 0 0 .55rem;
  font-size: 1rem;
}

.reg-card h4 span {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--brand-2);
  padding: .15rem .45rem;
  border-radius: 999px;
  background: rgba(124, 108, 255, .12);
  border: 1px solid rgba(156, 163, 255, .25);
}

.reg-card ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}

.reg-card li {
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.5;
}

.reg-strip {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-top: 1.4rem;
}

.reg-chip {
  padding: .35rem .75rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--chip-bg);
  color: var(--muted);
  font-size: .76rem;
  font-weight: 600;
}

.keyword-strip {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin-top: 1.6rem;
}

.keyword-strip span {
  padding: .45rem .85rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--chip-bg);
  color: var(--muted);
  font-size: .82rem;
  font-weight: 600;
}

.privacy-band {
  padding: 4.5rem 0 0;
}

.privacy-head {
  max-width: 640px;
}

.privacy-head .section-desc {
  max-width: none;
}

.privacy-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 1rem;
  align-items: stretch;
  margin-top: 2rem;
}

.privacy-card {
  position: relative;
  padding: 1.5rem 1.45rem 1.4rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--glass-bg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.privacy-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
}

.privacy-card.human::before {
  background: linear-gradient(90deg, var(--green), rgba(52, 211, 153, .35));
}

.privacy-card.ai::before {
  background: linear-gradient(90deg, var(--violet), rgba(167, 139, 250, .35));
}

.privacy-badge {
  display: inline-block;
  margin-bottom: .85rem;
  padding: .2rem .55rem;
  border-radius: 999px;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  border: 1px solid var(--border);
  background: var(--chip-bg);
  color: var(--muted);
}

.privacy-card.human .privacy-badge {
  color: var(--success-bright);
  border-color: rgba(52, 211, 153, .28);
  background: rgba(52, 211, 153, .08);
}

.privacy-card.ai .privacy-badge {
  color: var(--violet-bright);
  border-color: rgba(167, 139, 250, .28);
  background: rgba(167, 139, 250, .08);
}

.privacy-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: .85rem;
  border-radius: .85rem;
  border: 1px solid var(--border);
}

.privacy-icon.human {
  color: var(--green);
  background: linear-gradient(135deg, rgba(52, 211, 153, .18), rgba(52, 211, 153, .05));
  border-color: rgba(52, 211, 153, .32);
}

.privacy-icon.ai {
  color: var(--violet);
  background: linear-gradient(135deg, rgba(167, 139, 250, .2), rgba(167, 139, 250, .06));
  border-color: rgba(167, 139, 250, .32);
}

.privacy-icon .ico {
  width: 22px;
  height: 22px;
}

.privacy-card h3 {
  margin: 0 0 .45rem;
  font-size: 1.08rem;
  color: var(--text-strong);
}

.privacy-card p {
  margin: 0;
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.55;
}

.privacy-gate {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-width: 7.5rem;
  padding: 0 .25rem;
}

.privacy-gate-line {
  flex: 1;
  width: 2px;
  min-height: 1.4rem;
  border-radius: 999px;
  background: linear-gradient(180deg, transparent, var(--border-strong), transparent);
}

.privacy-gate-chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .45rem .65rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--glass-bg-alt);
  color: var(--brand-2);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: var(--shadow-card);
}

.privacy-scope {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin-top: 1.15rem;
  padding: .85rem 1rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--glass-bg-alt);
}

.privacy-scope-item {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .7rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--chip-bg);
  color: var(--muted);
  font-size: .78rem;
  font-weight: 600;
}

.privacy-scope-item .ico {
  color: var(--green);
}

@media (max-width: 900px) {
  .lob-grid,
  .reg-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .privacy-flow {
    grid-template-columns: 1fr;
    gap: .85rem;
  }

  .privacy-gate {
    flex-direction: row;
    min-width: 0;
    padding: .15rem 0;
  }

  .privacy-gate-line {
    flex: 1;
    width: auto;
    height: 2px;
    min-height: 0;
    background: linear-gradient(90deg, transparent, var(--border-strong), transparent);
  }
}

@media (max-width: 560px) {
  .lob-grid,
  .reg-grid,
  .zta-share-legend {
    grid-template-columns: 1fr;
  }
}

/* ---- Day theme — targeted polish (tokens handle most colors) ---- */
[data-theme="day"] .nav-desktop > .nav-item > a.active {
  background: rgba(79, 93, 255, .12);
  box-shadow: inset 0 0 0 1px rgba(79, 93, 255, .22);
}

[data-theme="day"] .compare-col.ai {
  border-color: rgba(79, 93, 255, .22);
  background: linear-gradient(180deg, rgba(79, 93, 255, .07), rgba(79, 93, 255, .02));
  box-shadow: 0 0 40px rgba(79, 93, 255, .06);
}

[data-theme="day"] .mockup {
  box-shadow: var(--shadow-mockup), inset 0 1px 0 rgba(255, 255, 255, .95);
}

[data-theme="day"] .contact-box::before { opacity: .35; }
[data-theme="day"] .contact-box::after { opacity: .25; }

[data-theme="day"] .contact-email:hover {
  background: rgba(79, 93, 255, .14);
  box-shadow: 0 12px 30px rgba(79, 93, 255, .15);
}

[data-theme="day"] .punch-row span {
  border-color: rgba(4, 120, 87, .22);
  background: rgba(16, 185, 129, .1);
}

[data-theme="day"] .field select option {
  background: #ffffff;
  color: var(--text);
}

[data-theme="day"] .price-card.featured {
  box-shadow: 0 18px 44px rgba(79, 93, 255, .12), inset 0 1px 0 rgba(255, 255, 255, .95);
}

[data-theme="day"] .faq-item.open {
  box-shadow: 0 0 24px rgba(79, 93, 255, .08);
}

[data-theme="day"] .faq-item.open .chev {
  background: rgba(79, 93, 255, .1);
  border-color: rgba(79, 93, 255, .28);
}

[data-theme="day"] .hero-badge,
[data-theme="day"] .section-label {
  border-color: rgba(79, 93, 255, .2);
  background: linear-gradient(180deg, rgba(79, 93, 255, .1), rgba(79, 93, 255, .03));
  box-shadow: 0 0 20px rgba(79, 93, 255, .08);
}

[data-theme="day"] .eyebrow,
[data-theme="day"] .section-label {
  color: var(--brand-2);
}

[data-theme="day"] .bg-noise {
  opacity: .025;
}

[data-theme="day"] .modal-close {
  background: var(--chip-bg);
}

[data-theme="day"] .glossary-filter-chip.active {
  background: rgba(79, 93, 255, .12);
  border-color: rgba(79, 93, 255, .35);
}

[data-theme="day"] .zta-ladder.zta-interactive .zta-step.active.L1 {
  background: linear-gradient(180deg, rgba(4, 120, 87, .12), var(--glass-bg));
}

[data-theme="day"] .zta-ladder.zta-interactive .zta-step.active.L2 {
  background: linear-gradient(180deg, rgba(3, 105, 161, .1), var(--glass-bg));
}

[data-theme="day"] .zta-ladder.zta-interactive .zta-step.active.L3 {
  background: linear-gradient(180deg, rgba(162, 28, 175, .1), var(--glass-bg));
}

[data-theme="day"] .tokens.zero {
  color: #047857;
  background: rgba(4, 120, 87, .1);
  border-color: rgba(4, 120, 87, .28);
}

[data-theme="day"] .tokens.one {
  color: #9d174d;
  background: rgba(190, 24, 93, .08);
  border-color: rgba(190, 24, 93, .25);
}

[data-theme="day"] .lob-tag.live {
  color: #047857;
  background: rgba(4, 120, 87, .1);
  border-color: rgba(4, 120, 87, .25);
}

[data-theme="day"] .nav-pill.live {
  color: #047857;
  background: rgba(4, 120, 87, .1);
}

[data-theme="day"] .m-badge,
[data-theme="day"] .m-stage.done {
  color: #047857;
}

[data-theme="day"] .zta-swatch {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45);
}

[data-theme="day"] .challenge-pain {
  background: rgba(225, 29, 72, .06);
}

[data-theme="day"] .challenge-fix {
  background: rgba(4, 120, 87, .07);
}

[data-theme="day"] .sev-critical { color: #be123c; }
[data-theme="day"] .sev-high { color: #b45309; }

[data-theme="day"] .zta-flow {
  background: rgba(79, 93, 255, .06);
  border-color: rgba(79, 93, 255, .18);
}

[data-theme="day"] .zstat-ico {
  background: rgba(15, 23, 42, .04);
}

[data-theme="day"] .zstat-ico.blue {
  background: linear-gradient(135deg, rgba(79, 93, 255, .14), rgba(79, 93, 255, .05));
  border-color: rgba(79, 93, 255, .28);
}

[data-theme="day"] .zstat-ico.green {
  background: linear-gradient(135deg, rgba(4, 120, 87, .12), rgba(4, 120, 87, .04));
  border-color: rgba(4, 120, 87, .25);
}

[data-theme="day"] .zstat-ico.violet {
  background: linear-gradient(135deg, rgba(109, 40, 217, .12), rgba(109, 40, 217, .04));
  border-color: rgba(109, 40, 217, .25);
}

[data-theme="day"] .reg-card h4 span {
  background: rgba(79, 93, 255, .1);
  border-color: rgba(79, 93, 255, .22);
}

[data-theme="day"] .lob-tag.catalog {
  color: var(--muted);
  background: rgba(15, 23, 42, .04);
  border-color: rgba(15, 23, 42, .1);
}

[data-theme="day"] .privacy-card.human .privacy-badge {
  color: #047857;
  background: rgba(4, 120, 87, .1);
  border-color: rgba(4, 120, 87, .22);
}

[data-theme="day"] .privacy-card.ai .privacy-badge {
  color: #6d28d9;
  background: rgba(109, 40, 217, .08);
  border-color: rgba(109, 40, 217, .22);
}

[data-theme="day"] .privacy-icon.human {
  background: linear-gradient(135deg, rgba(4, 120, 87, .12), rgba(4, 120, 87, .04));
  border-color: rgba(4, 120, 87, .25);
}

[data-theme="day"] .privacy-icon.ai {
  background: linear-gradient(135deg, rgba(109, 40, 217, .12), rgba(109, 40, 217, .04));
  border-color: rgba(109, 40, 217, .25);
}

[data-theme="day"] .privacy-gate-chip {
  background: rgba(255, 255, 255, .95);
  border-color: rgba(79, 93, 255, .2);
}

/* =========================================================================
   2026 MODERN UI ENHANCEMENTS
   3D tilt, animated gradient borders, morphing dividers, magnetic buttons,
   glow follower, staggered reveals, text scramble, parallax, ripple
   ========================================================================= */

/* ---- 3D Card Tilt ---- */
.tilt-card {
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform .15s ease-out, box-shadow .35s var(--ease), border-color .35s;
}

.tilt-card .tilt-inner {
  transform: translateZ(0);
}

/* ---- Animated Gradient Border ---- */
.gradient-border-wrap {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.gradient-border-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1.5px;
  border-radius: inherit;
  background: conic-gradient(
    from var(--border-angle, 0deg),
    var(--brand),
    var(--violet),
    var(--cyan),
    var(--pink),
    var(--brand)
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: borderRotate 4s linear infinite;
  opacity: 0;
  transition: opacity .4s var(--ease);
  z-index: 1;
  pointer-events: none;
}

.gradient-border-wrap:hover::before {
  opacity: 1;
}

@property --border-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@keyframes borderRotate {
  to { --border-angle: 360deg; }
}

/* Fallback for browsers without @property */
@supports not (background: conic-gradient(from 0deg, red, blue)) {
  .gradient-border-wrap::before {
    background: linear-gradient(135deg, var(--brand), var(--violet), var(--cyan));
  }
}

/* ---- Glow Mouse Follower ---- */
.glow-follower {
  position: fixed;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity .8s var(--ease);
  background: radial-gradient(circle, rgba(124, 108, 255, .12) 0%, rgba(139, 92, 246, .06) 35%, transparent 70%);
  transform: translate(-50%, -50%);
  will-change: left, top;
}

.glow-follower.active {
  opacity: 1;
}

/* ---- Section Morphing Dividers ---- */
.section-divider {
  position: relative;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  margin-top: -1px;
}

.section-divider svg {
  display: block;
  width: 100%;
  height: auto;
}

.section-divider.flip {
  transform: rotate(180deg);
  margin-bottom: -1px;
  margin-top: 0;
}

/* ---- Magnetic Button ---- */
.magnetic-btn {
  position: relative;
  transition: transform .2s var(--ease);
}

/* ---- Ripple Effect on Buttons ---- */
.btn-ripple {
  position: relative;
  overflow: hidden;
}

.btn-ripple .ripple-circle {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, .35);
  transform: scale(0);
  animation: rippleExpand .6s ease-out forwards;
  pointer-events: none;
}

@keyframes rippleExpand {
  to { transform: scale(4); opacity: 0; }
}

/* ---- Staggered Reveal ---- */
.stagger-reveal > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .65s var(--ease), transform .65s var(--ease);
}

.stagger-reveal.visible > *:nth-child(1) { transition-delay: 0s; }
.stagger-reveal.visible > *:nth-child(2) { transition-delay: .08s; }
.stagger-reveal.visible > *:nth-child(3) { transition-delay: .16s; }
.stagger-reveal.visible > *:nth-child(4) { transition-delay: .24s; }
.stagger-reveal.visible > *:nth-child(5) { transition-delay: .32s; }
.stagger-reveal.visible > *:nth-child(6) { transition-delay: .4s; }

.stagger-reveal.visible > * {
  opacity: 1;
  transform: none;
}

/* ---- Text Scramble ---- */
.scramble-char {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px) rotateX(-40deg);
  animation: scrambleIn .5s var(--ease) forwards;
}

@keyframes scrambleIn {
  to { opacity: 1; transform: none; }
}

/* ---- Parallax Layers ---- */
.parallax-wrap {
  position: relative;
  overflow: hidden;
}

.parallax-layer {
  will-change: transform;
  transition: transform .1s linear;
}

/* ---- Floating Particles ---- */
.particle-field {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.particle {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(124, 108, 255, .35);
  animation: particleFloat linear infinite;
}

@keyframes particleFloat {
  0% { transform: translateY(0) translateX(0); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateY(-100vh) translateX(40px); opacity: 0; }
}

/* ---- Glass Shimmer ---- */
.glass-shimmer {
  position: relative;
  overflow: hidden;
}

.glass-shimmer::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255, 255, 255, .06) 45%,
    rgba(255, 255, 255, .12) 50%,
    rgba(255, 255, 255, .06) 55%,
    transparent 60%
  );
  transform: translateX(-100%);
  transition: none;
  pointer-events: none;
}

.glass-shimmer:hover::after {
  animation: shimmerSlide 1.2s ease forwards;
}

@keyframes shimmerSlide {
  to { transform: translateX(100%); }
}

/* ---- Animated Stats Ring ---- */
.stat-ring {
  position: relative;
  width: 56px;
  height: 56px;
  flex-shrink: 0;
}

.stat-ring svg {
  transform: rotate(-90deg);
}

.stat-ring circle {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
}

.stat-ring .ring-track { stroke: var(--bar-track); }

.stat-ring .ring-fill {
  stroke: url(#ring-grad);
  stroke-dasharray: 151;
  stroke-dashoffset: 151;
  transition: stroke-dashoffset 1.8s var(--ease);
}

.stat-ring.visible .ring-fill {
  stroke-dashoffset: var(--ring-offset, 0);
}

/* ---- Glow Orb Divider ---- */
.glow-orb-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  padding: 3rem 0;
  position: relative;
}

.glow-orb-divider::before,
.glow-orb-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-strong), transparent);
}

.glow-orb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--grad);
  box-shadow: 0 0 24px rgba(124, 108, 255, .6), 0 0 60px rgba(139, 92, 246, .3);
  animation: orbPulse 3s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes orbPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 24px rgba(124, 108, 255, .6), 0 0 60px rgba(139, 92, 246, .3); }
  50% { transform: scale(1.3); box-shadow: 0 0 40px rgba(124, 108, 255, .8), 0 0 80px rgba(139, 92, 246, .5); }
}

/* ---- Bento Layout ---- */
.bento-layout {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
.bento-item {
  border-radius: 14px;
  padding: 1.4rem 1.6rem;
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  border: 1px solid var(--border);
  background: var(--surface-1);
  transition: border-color .25s, box-shadow .3s;
}
.bento-item:hover {
  border-color: rgba(124,108,255,.35);
  box-shadow: 0 0 24px rgba(124,108,255,.12);
}
.bento-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--surface-2);
}
.bento-icon .ico { width: 18px; height: 18px; }
.bento-item h3 { font-size: .95rem; margin: 0 0 .3rem; }
.bento-item p { font-size: .82rem; margin: 0; opacity: .82; line-height: 1.45; }
.bento-tag {
  display: inline-block;
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: .15rem .5rem;
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--muted);
  margin-bottom: .35rem;
}
.bento-wide { grid-column: span 2; }
.bento-blue .bento-icon { color: var(--sky); }
.bento-green .bento-icon { color: var(--green); }
.bento-amber .bento-icon { color: var(--amber); }
.bento-violet .bento-icon { color: var(--violet); }

/* ---- LOB Directory (Desks section) ---- */
.lob-directory {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.6rem 1.8rem;
}
.lob-group { display: flex; flex-direction: column; gap: .6rem; }
.lob-group-label {
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: .1rem;
}
.lob-entry {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .8rem 1rem;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  text-decoration: none;
  color: inherit;
  transition: border-color .25s, box-shadow .3s, transform .2s;
}
.lob-entry:hover {
  border-color: rgba(124,108,255,.35);
  box-shadow: 0 0 20px rgba(124,108,255,.12);
  transform: translateX(2px);
}
.lob-num {
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--muted-2);
  min-width: 24px;
}
.lob-entry-main { flex: 1; min-width: 0; }
.lob-entry-title {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .9rem;
  font-weight: 600;
  color: var(--text);
}
.lob-entry-desc {
  display: block;
  font-size: .78rem;
  color: var(--muted);
  margin-top: .2rem;
  line-height: 1.4;
}
.lob-arrow {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  color: var(--muted-2);
  transition: transform .2s, color .2s;
}
.lob-entry:hover .lob-arrow { color: var(--brand-2); transform: translateX(3px); }
.lob-status {
  display: inline-block;
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: .1rem .35rem;
  border-radius: 999px;
  vertical-align: middle;
}
.lob-status.live { background: rgba(16,185,129,.16); color: #34d399; }
.lob-status.soon { background: rgba(251,191,36,.14); color: #fbbf24; }

/* ---- Pillars Grid (Trust section) ---- */
.pillars-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
.pillar-row {
  display: flex;
  gap: 1.2rem;
  align-items: flex-start;
  padding: 1.2rem 1.4rem;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface-1);
  transition: border-color .25s, box-shadow .3s;
}
.pillar-row:hover {
  border-color: rgba(124,108,255,.3);
  box-shadow: 0 0 20px rgba(124,108,255,.1);
}
.pillar-wide {
  grid-column: span 2;
}
.pillar-label {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  min-width: 100px;
  text-align: center;
}
.pillar-label .icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--surface-2);
}
.pillar-label .icon .ico { width: 20px; height: 20px; }
.pillar-label h3 { font-size: .82rem; margin: 0; font-weight: 600; white-space: nowrap; }
.pillar-body { flex: 1; }
.pillar-title {
  font-size: .88rem;
  font-weight: 600;
  margin: 0 0 .5rem;
  color: var(--text);
}
.pillar-body ul {
  margin: 0;
  padding-left: 1.1rem;
  list-style: disc;
}
.pillar-body li {
  font-size: .8rem;
  line-height: 1.5;
  margin-bottom: .25rem;
  color: var(--muted);
}

/* ---- Timeline List (Evolution section) ---- */
.timeline-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  counter-reset: none;
}
.timeline-item {
  display: flex;
  gap: 1.2rem;
  align-items: flex-start;
  padding: 1.2rem 1.4rem;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface-1);
  transition: border-color .25s, box-shadow .3s;
}
.timeline-item:hover {
  border-color: rgba(124,108,255,.3);
  box-shadow: 0 0 20px rgba(124,108,255,.1);
}
.timeline-num {
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--brand);
  min-width: 36px;
  line-height: 1;
}
.timeline-content { flex: 1; }
.timeline-tag {
  display: inline-block;
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: .15rem .5rem;
  border-radius: 6px;
  margin-bottom: .35rem;
}
.tag-ship {
  background: rgba(52,211,153,.15);
  color: var(--green);
}
.tag-core {
  background: rgba(124,108,255,.15);
  color: var(--brand);
}
.timeline-item h3 { font-size: .95rem; margin: 0 0 .3rem; }
.timeline-item p { font-size: .82rem; margin: 0; opacity: .82; line-height: 1.45; }

/* ---- Responsive ---- */
@media (max-width: 1100px) {
  .pricing-grid { grid-template-columns: repeat(2, 1fr); }
  .buy-gates { grid-template-columns: 1fr; }
  .price-card.featured { transform: none; }
}

@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; gap: 3rem; }
  .hero { padding-top: calc(var(--header-h) + 2rem); }
  .hero .lead { max-width: 640px; }
  .hero-media { max-width: 640px; margin: 0 auto; width: 100%; }
  .integration-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px) {
  .nav-desktop { display: none; }
  .nav-dash { display: none !important; }
  .menu-btn { display: grid; }
  .nav-inner { padding-left: .9rem; }
  .stats, .zta-stats { grid-template-columns: repeat(2, 1fr); }
  .agent-grid, .audience-grid, .feature-grid, .testimonial-grid, .bento, .pricing-grid, .buy-gates { grid-template-columns: repeat(2, 1fr); }
  .bento-card.wide { grid-column: span 1; }
  .price-card.featured { transform: none; }
  .float-chip { display: none; }
  .glossary-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  main { padding: 0 1rem 2rem; }
  section { padding: 4.5rem 0; }
  h1 { font-size: clamp(2.5rem, 10vw, 3.4rem); }
  .mock-body { grid-template-columns: 1fr; }
  .mock-side { flex-direction: row; flex-wrap: wrap; border-right: none; border-bottom: 1px solid var(--border); }
  .side-item.brand-tag { margin-top: 0; }
  .compare, .pipeline-steps { grid-template-columns: 1fr; }
  .pipeline-panel { padding: 1.4rem; }
  .panel-list { grid-template-columns: 1fr; }
  .m-grid { grid-template-columns: 1fr; }
  .contact-box { padding: 3rem 1.5rem; }
  .footer-grid { flex-direction: column; align-items: flex-start; gap: 1.2rem; }
  .glossary-featured-grid { grid-template-columns: 1fr; }
  .bento-layout { grid-template-columns: 1fr; }
  .bento-wide { grid-column: span 1; }
  .lob-directory { grid-template-columns: 1fr; }
  .pillars-grid { grid-template-columns: 1fr; }
  .pillar-wide { grid-column: span 1; }
  .pillar-row { flex-direction: column; gap: .7rem; }
  .pillar-label { flex-direction: row; min-width: auto; text-align: left; }
  .timeline-item { flex-direction: column; gap: .5rem; }
  .glossary-preview-search { flex-direction: column; align-items: stretch; }
  .glossary-preview-search .btn { width: 100%; justify-content: center; }
  .glossary-modal-card { padding: 1.4rem; max-height: 90vh; }
}

@media (max-width: 560px) {
  .stats, .zta-stats, .agent-grid, .audience-grid, .feature-grid, .testimonial-grid, .bento, .integration-grid, .pricing-grid, .buy-gates, .plain-grid, .glossary-grid { grid-template-columns: 1fr; }
  .fc-1, .fc-2, .fc-3 { display: none; }
  .trust-strip { justify-content: flex-start; }
  .btn { padding: .75rem 1.25rem; }
  .glow-follower { display: none; }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
  .reveal, .stagger-reveal, .stagger-reveal > * { opacity: 1; transform: none; }
  .scramble-char { opacity: 1; transform: none; }
  .glow-follower { display: none; }
}

/* ---------------------------------------------------------------------------
   Trust-detail additions (hero citation crop, ZTA gloss, stat footnote,
   practice-mode note, commercial-property feature links, exam-pack tree)
   Extends existing tokens only — no new design language.
--------------------------------------------------------------------------- */

.practice-note {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin-top: .7rem;
  font-size: .8rem;
  color: var(--muted-2);
}

.practice-note .ico { color: var(--success-bright, var(--success-soft)); flex: none; }

.punch-gloss {
  position: relative;
  cursor: help;
}

.punch-gloss::after {
  content: attr(data-gloss);
  position: absolute;
  bottom: calc(100% + .5rem);
  left: 50%;
  transform: translateX(-50%);
  width: min(280px, 70vw);
  padding: .55rem .7rem;
  border-radius: .6rem;
  background: var(--bg-2);
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: .72rem;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0;
  text-align: left;
  white-space: normal;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
  opacity: 0;
  visibility: hidden;
  transition: opacity .15s ease;
  z-index: 30;
  pointer-events: none;
}

.punch-gloss:hover::after,
.punch-gloss:focus-visible::after {
  opacity: 1;
  visibility: visible;
}

.stats-note {
  margin-top: .9rem;
  color: var(--muted-2);
  font-size: .72rem;
  line-height: 1.5;
}

.citation-crop {
  max-width: 1080px;
  margin: 1.1rem auto 0;
  border: 1px solid var(--border);
  border-radius: .8rem;
  background: var(--bg-2);
  overflow: hidden;
  text-align: left;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .18);
}

.cc-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .55rem .9rem;
  border-bottom: 1px solid var(--border);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: .68rem;
  color: var(--muted-2);
}

.cc-title { color: var(--muted); }

.cc-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem .7rem;
  padding: .6rem .9rem;
}

.cc-row + .cc-row { border-top: 1px dashed var(--border); }

.cc-field {
  font-size: .64rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted-2);
  min-width: 118px;
}

.cc-value {
  font-size: .95rem;
  font-weight: 750;
  letter-spacing: -.02em;
  color: var(--text-strong);
}

.cc-cite {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .28rem .6rem;
  border-radius: 999px;
  background: var(--chip-bg);
  border: 1px solid var(--border);
  color: var(--muted);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: .68rem;
  white-space: nowrap;
}

.cc-cite .ico { width: 11px; height: 11px; color: var(--success-soft, var(--success)); }

.bento-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.1rem;
  margin-top: .7rem;
}

.bento-links a {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .78rem;
  font-weight: 650;
  color: var(--sky, #38bdf8);
  text-decoration: none;
}

.bento-links a:hover { text-decoration: underline; }

.bento-sub {
  margin-top: .55rem !important;
  font-size: .74rem !important;
  opacity: .62 !important;
}

.exam-tree {
  margin-top: .75rem;
  padding: .6rem .75rem;
  border: 1px solid var(--border);
  border-radius: .6rem;
  background: var(--chip-bg);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: .66rem;
  line-height: 1.7;
  color: var(--muted);
  overflow-x: auto;
}

.exam-tree span { display: block; white-space: nowrap; }

.exam-tree .xt-head {
  display: flex;
  align-items: center;
  gap: .4rem;
  color: var(--text-strong);
  font-weight: 650;
  margin-bottom: .2rem;
}

.exam-tree .xt-head .ico { width: 12px; height: 12px; }

.exam-tree em {
  font-style: normal;
  color: var(--muted-2);
  margin-left: .5rem;
}

[data-theme="day"] .punch-gloss::after { box-shadow: 0 8px 24px rgba(15, 23, 42, .12); }
[data-theme="day"] .citation-crop { box-shadow: 0 12px 40px rgba(15, 23, 42, .08); }

/* ---------------------------------------------------------------------------
   Brand: category line + manifesto block (Grounded Underwriting / Rytera Memo)
--------------------------------------------------------------------------- */

.category-line {
  margin: .8rem 0 0;
  font-size: .72rem;
  font-weight: 650;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.category-line strong { color: var(--success-bright, var(--success-soft)); }

.manifesto-box {
  max-width: 900px;
  margin: 0 auto;
  padding: clamp(1.4rem, 4vw, 2.4rem);
  border: 1px solid var(--border);
  border-radius: 1rem;
  background: var(--bg-2);
}

.manifesto-box p {
  margin: 0 0 .9rem;
  font-size: .95rem;
  line-height: 1.65;
  color: var(--text-strong);
}

.manifesto-box strong { color: var(--text-strong); }

.manifesto-fine,
.manifesto-box .manifesto-fine {
  margin-top: 1.1rem;
  padding-top: .8rem;
  border-top: 1px dashed var(--border);
  font-size: .72rem;
  color: var(--muted-2);
}

/* ── Amplification section ─────────────────────────────────────────── */
.ampli-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: start;
}
@media (max-width: 960px) { .ampli-grid { grid-template-columns: 1fr; } }

.ampli-left h2 { margin-top: 1rem; }
.ampli-lead { margin-top: 1rem; font-size: 1.05rem; line-height: 1.7; color: var(--text); }

.ampli-table {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.25rem;
  overflow: hidden;
}
.ampli-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: .88rem;
}
.ampli-table th,
.ampli-table td {
  padding: .7rem .65rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.ampli-table thead th { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted-2); font-weight: 600; }
.ampli-role { font-weight: 600; color: var(--text-strong); white-space: nowrap; }
.ampli-highlight { color: var(--accent); font-weight: 700; }
.ampli-footnote {
  margin: .8rem 0 0;
  font-size: .78rem;
  color: var(--muted-2);
  line-height: 1.5;
}

.ampli-quote {
  margin-top: 1.25rem;
  padding: 1.15rem 1.25rem;
  border-left: 3px solid var(--accent);
  background: var(--surface-1);
  border-radius: 0 10px 10px 0;
  font-size: .88rem;
  line-height: 1.65;
  color: var(--text-strong);
  font-style: italic;
}

/* ── Phase roadmap ─────────────────────────────────────────────────── */
.phase-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  margin-top: 2rem;
}
@media (max-width: 960px) { .phase-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .phase-grid { grid-template-columns: 1fr; } }

.phase-card {
  position: relative;
  padding: 1.6rem 1.4rem 1.4rem;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color .2s;
}
.phase-card:hover { border-color: var(--accent); }
.phase-card.phase-active { border-color: var(--accent); background: var(--accent-dim); }

.phase-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 999px;
  background: var(--accent-dim);
  color: var(--accent);
  font-size: .78rem;
  font-weight: 700;
  margin-bottom: .8rem;
}
.phase-active .phase-num { background: var(--accent); color: #fff; }

.phase-card h3 { font-size: 1rem; font-weight: 700; color: var(--text-strong); margin-bottom: .5rem; }
.phase-card p { font-size: .86rem; line-height: 1.6; color: var(--text); }