/* ==========================================================================
   OzyOps Marketing Site — site.css (June 2026 rebuild)
   Layered on design-tokens.css (which stays untouched).
   Static HTML + vanilla JS. No Tailwind, no React, no build step.
   Design language: "the loop" — circular geometry echoing the Ouroboros mark.
   ========================================================================== */

/* ---- Typography: self-hosted Inter variable (latin), system fallback ---- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('./fonts/inter-var-latin.woff2') format('woff2');
}

:root {
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --text-secondary-2: #b6bdc7;
  --hairline: rgba(255, 255, 255, 0.08);
  --hairline-strong: rgba(255, 255, 255, 0.14);
  --surface-1: #0d1117;
  --surface-2: #11161d;
  --nav-h: 4.25rem;
}

html { scroll-padding-top: calc(var(--nav-h) + 1rem); }

body {
  font-family: var(--font-sans);
  background-color: var(--bg-dark);
  color: var(--text-primary);
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ---- Type scale ---- */
.h-display {
  font-size: clamp(2.75rem, 7vw, 4.5rem);
  font-weight: 750;
  letter-spacing: -0.03em;
  line-height: 1.04;
}
.h-section {
  font-size: clamp(1.875rem, 4vw, 2.625rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.h-card { font-size: 1.1875rem; font-weight: 650; letter-spacing: -0.01em; }
.eyebrow {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent-teal);
  margin-bottom: 1rem;
}
.lead { font-size: clamp(1.125rem, 2vw, 1.3125rem); color: var(--text-secondary-2); line-height: 1.6; }
.muted { color: var(--text-secondary-2); }
.small { font-size: 0.875rem; }
.brand-gradient {
  background: linear-gradient(135deg, var(--primary-purple) 0%, var(--accent-teal) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ---- Layout primitives ---- */
.container { max-width: 1140px; margin-inline: auto; padding-inline: 1.5rem; }
.container-narrow { max-width: 880px; margin-inline: auto; padding-inline: 1.5rem; }
.section { padding-block: clamp(4rem, 9vw, 7rem); position: relative; }
.section-alt { background: var(--surface-1); border-block: 1px solid var(--hairline); }
.section-head { max-width: 640px; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head p { margin-top: 0.875rem; }
.grid { display: grid; gap: 1.25rem; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 992px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

/* ---- Nav ---- */
.site-nav {
  position: fixed; inset-inline: 0; top: 0; z-index: 60;
  height: var(--nav-h);
  display: flex; align-items: center;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}
.site-nav.is-scrolled {
  background: rgba(10, 10, 10, 0.86);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom-color: var(--hairline);
}
.site-nav .container { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; }
.nav-brand { display: flex; align-items: center; gap: 0.625rem; text-decoration: none; min-width: 0; }
.nav-brand img { height: 2.25rem; width: 2.25rem; filter: brightness(1.5); }
.nav-brand .word { font-size: 1.25rem; font-weight: 750; letter-spacing: -0.02em; }
.nav-brand .tag { color: var(--text-secondary-2); font-size: 0.875rem; font-weight: 450; white-space: nowrap; }
@media (max-width: 820px) { .nav-brand .tag { display: none; } }
.nav-links { display: flex; align-items: center; gap: 1.5rem; }
.nav-links a { color: var(--text-secondary-2); text-decoration: none; font-size: 0.9375rem; font-weight: 500; transition: color 0.15s ease; }
.nav-links a:hover { color: var(--text-primary); }
.nav-links a.nav-phone { color: var(--accent-teal); display: inline-flex; align-items: center; gap: 0.375rem; }
.nav-links a.nav-active { color: var(--text-primary); }
@media (max-width: 820px) { .nav-links { display: none; } }
.nav-toggle {
  display: none; background: none; border: 1px solid var(--hairline); border-radius: 0.5rem;
  color: var(--text-primary); padding: 0.5rem 0.625rem; cursor: pointer;
}
@media (max-width: 820px) { .nav-toggle { display: inline-flex; } }
.nav-mobile {
  display: none; position: fixed; top: var(--nav-h); inset-inline: 0; z-index: 59;
  background: rgba(10, 10, 10, 0.97); border-bottom: 1px solid var(--hairline);
  padding: 1rem 1.5rem 1.5rem; flex-direction: column; gap: 0.25rem;
}
.nav-mobile.is-open { display: flex; }
.nav-mobile a { color: var(--text-secondary-2); text-decoration: none; padding: 0.75rem 0.25rem; font-size: 1.0625rem; border-bottom: 1px solid var(--hairline); }
.nav-mobile a:last-child { border-bottom: 0; }
.nav-mobile a:hover { color: var(--text-primary); }

/* ---- Buttons ---- */
.btn-cta, .btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  border-radius: 999px; font-weight: 600; text-decoration: none; cursor: pointer;
  padding: 0.875rem 1.75rem; font-size: 1rem; line-height: 1.2;
  transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
  min-height: 44px;
}
.btn-cta {
  background: linear-gradient(135deg, var(--primary-purple) 0%, var(--accent-purple) 100%);
  color: #fff; border: 0;
}
.btn-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(77, 101, 255, 0.35); }
.btn-ghost { background: transparent; color: var(--text-primary); border: 1px solid var(--hairline-strong); }
.btn-ghost:hover { border-color: var(--accent-teal); color: var(--accent-teal); }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.875rem; align-items: center; }

/* ---- Hero with closing ring ---- */
.hero {
  position: relative;
  min-height: min(88vh, 60rem);
  display: flex; align-items: center;
  padding-top: calc(var(--nav-h) + 2rem);
  background:
    radial-gradient(60rem 30rem at 70% -10%, rgba(77, 101, 255, 0.10), transparent 60%),
    radial-gradient(40rem 24rem at 10% 110%, rgba(0, 212, 170, 0.06), transparent 60%),
    var(--bg-dark);
  overflow: hidden;
}
.hero-inner { position: relative; z-index: 2; }
.hero .lead { max-width: 38rem; margin-top: 1.25rem; }
.hero .btn-row { margin-top: 2.25rem; }
.hero-trust { margin-top: 2rem; font-size: 0.9375rem; color: var(--text-muted); }
/* ---- Scroll ouroboros (mathematical): a thin line traces down the page;
   in each section it draws a circle that completes exactly as the section
   reaches the middle of the viewport — the loop closes (dot + one soft
   pulse), rests while you read, then the line continues to the next
   section. Whisper-quiet by design: text always wins.
   Injected by site.js — no-JS visitors see clean pages. ---- */
.section-loop { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.section-loop svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
main .section > .container,
main .section > .container-narrow { position: relative; z-index: 1; }
.sl-track { stroke: rgba(255, 255, 255, 0.04); fill: none; }
.sl-body {
  stroke: url(#slGrad); stroke-width: 1.5; fill: none; opacity: 0.3;
  stroke-linecap: round; transition: opacity 0.4s ease;
}
.section-loop.is-closed .sl-body { opacity: 0.45; }
/* the spiral binding braided around the center line and the loops */
.sl-wire {
  stroke: url(#slGrad); stroke-width: 1.1; fill: none; opacity: 0.14;
  stroke-linecap: round; transition: opacity 0.4s ease;
}
.section-loop.is-closed .sl-wire { opacity: 0.24; }
/* the color each completed loop seals in — faint, dark-theme-true */
.sl-fill { opacity: 0; transition: opacity 0.7s ease 0.1s; }
.section-loop.is-closed .sl-fill { opacity: 0.07; }
/* tiny four-color lights riding the spiral wires */
.sl-spark { filter: drop-shadow(0 0 4px currentColor); }
/* the beacon at each wire's drawn tip, sparking the path downward */
.sl-beacon { filter: drop-shadow(0 0 7px currentColor); }
.sl-dot {
  fill: var(--accent-teal); opacity: 0;
  transform-box: fill-box; transform-origin: center;
  transition: opacity 0.35s ease;
}
.section-loop.is-closed .sl-dot { opacity: 0.7; animation: sl-bite 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes sl-bite { 0% { transform: scale(0); } 100% { transform: scale(1); } }
.sl-pulse {
  stroke: var(--accent-teal); stroke-width: 1; fill: none; opacity: 0;
  transform-box: fill-box; transform-origin: center;
}
.section-loop.is-closed .sl-pulse { animation: sl-pulse 0.9s ease-out; }
@keyframes sl-pulse { 0% { opacity: 0.45; transform: scale(1); } 100% { opacity: 0; transform: scale(1.14); } }

/* ---- Cards ---- */
.card-min {
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  border-radius: 1rem;
  padding: 1.75rem;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.card-min:hover { border-color: var(--hairline-strong); transform: translateY(-3px); }
.card-min .icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; border-radius: 999px;
  border: 1px solid var(--hairline-strong);
  color: var(--accent-teal);
  margin-bottom: 1.125rem;
}
.card-min h3 { margin-bottom: 0.5rem; }
.card-min p { color: var(--text-secondary-2); font-size: 0.9844rem; }
.check-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.625rem; }
.check-list li { display: flex; gap: 0.625rem; align-items: flex-start; color: var(--text-secondary-2); font-size: 0.9844rem; }
.check-list svg { flex: 0 0 auto; margin-top: 0.3rem; color: var(--accent-teal); }

/* ---- Stat band ---- */
.stat-band { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--hairline); border-block: 1px solid var(--hairline); }
.stat-band > div { background: var(--bg-dark); padding: 1.75rem 1rem; text-align: center; }
.stat-band .num { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; }
.stat-band .lbl { font-size: 0.8438rem; color: var(--text-muted); margin-top: 0.25rem; text-transform: uppercase; letter-spacing: 0.08em; }
@media (max-width: 720px) { .stat-band { grid-template-columns: repeat(2, 1fr); } }

/* ---- The loop journey (signature section) ---- */
.loop-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
@media (max-width: 992px) { .loop-wrap { grid-template-columns: 1fr; } }
.loop-figure { position: relative; aspect-ratio: 1; max-width: 30rem; margin-inline: auto; width: 100%; }
.loop-figure svg { width: 100%; height: 100%; display: block; }
.loop-figure .loop-track { stroke: rgba(255, 255, 255, 0.07); }
.loop-figure .loop-progress {
  stroke: url(#loopGrad);
  stroke-dasharray: var(--loop-c, 1257);
  stroke-dashoffset: var(--loop-c, 1257);
}
.loop-center {
  position: absolute; inset: 0; display: grid; place-items: center; text-align: center; pointer-events: none;
}
.loop-center .mark { font-weight: 750; font-size: clamp(1.25rem, 2.6vw, 1.625rem); letter-spacing: -0.02em; opacity: 0.55; transition: opacity 0.6s ease; }
.loop-figure.is-complete .loop-center .mark { opacity: 1; }
.loop-node {
  position: absolute; width: 2.25rem; height: 2.25rem; border-radius: 999px;
  background: var(--bg-dark); border: 1px solid var(--hairline-strong);
  display: grid; place-items: center; font-size: 0.8125rem; font-weight: 650; color: var(--text-secondary-2);
  transform: translate(-50%, -50%);
  transition: border-color 0.3s ease, color 0.3s ease, background-color 0.3s ease;
}
.loop-node.is-on { border-color: var(--accent-teal); color: var(--accent-teal); }
.loop-node { transition: border-color 0.3s ease, color 0.3s ease, background-color 0.3s ease, box-shadow 0.5s ease; }
.loop-node.is-bing { border-color: var(--accent-teal); color: var(--accent-teal); box-shadow: 0 0 18px rgba(0, 212, 170, 0.35); }
.loop-orbit { fill: var(--accent-teal); opacity: 0.3; filter: drop-shadow(0 0 9px var(--accent-teal)); }
.loop-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.375rem; counter-reset: loopstep; }
.loop-steps li {
  position: relative; padding: 0.875rem 1rem 0.875rem 3.25rem;
  border-radius: 0.75rem; border: 1px solid transparent;
  transition: border-color 0.25s ease, background-color 0.25s ease;
}
.loop-steps li::before {
  counter-increment: loopstep; content: counter(loopstep);
  position: absolute; left: 0.875rem; top: 0.9375rem;
  width: 1.75rem; height: 1.75rem; border-radius: 999px;
  display: grid; place-items: center;
  border: 1px solid var(--hairline-strong);
  font-size: 0.8125rem; font-weight: 650; color: var(--text-secondary-2);
}
.loop-steps li.is-on { border-color: var(--hairline); background: var(--surface-1); }
.loop-steps li.is-on::before { border-color: var(--accent-teal); color: var(--accent-teal); }
.loop-steps h3 { font-size: 1.0313rem; font-weight: 650; }
.loop-steps p { color: var(--text-secondary-2); font-size: 0.9375rem; margin-top: 0.125rem; }

/* ---- Demo line band ---- */
.demo-band {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, var(--surface-2), var(--surface-1));
  border-block: 1px solid var(--hairline);
  text-align: center;
}
.demo-band .kicker { color: var(--text-secondary-2); font-size: clamp(1.125rem, 2.2vw, 1.375rem); font-weight: 500; }
.demo-band .believe { font-size: clamp(1.875rem, 4.6vw, 3rem); font-weight: 750; letter-spacing: -0.025em; margin-top: 0.25rem; }
.demo-band .demo-tel {
  display: inline-flex; align-items: center; gap: 0.75rem;
  margin-top: 1.75rem; padding: 1rem 2.25rem; border-radius: 999px;
  border: 1px solid var(--hairline-strong);
  font-size: clamp(1.375rem, 3.4vw, 2rem); font-weight: 700; letter-spacing: -0.01em;
  color: var(--text-primary); text-decoration: none;
  transition: border-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}
.demo-band .demo-tel:hover { border-color: var(--accent-teal); transform: translateY(-2px); box-shadow: 0 8px 30px rgba(0, 212, 170, 0.18); }
.demo-band .demo-sub { margin-top: 1rem; color: var(--text-muted); font-size: 0.9375rem; }

/* ---- Pricing ---- */
.plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; align-items: stretch; }
@media (max-width: 1100px) { .plans { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .plans { grid-template-columns: 1fr; } }
.plan {
  position: relative; display: flex; flex-direction: column;
  background: var(--surface-1); border: 1px solid var(--hairline); border-radius: 1rem; padding: 1.75rem;
}
.plan--rec { border-color: var(--primary-purple); box-shadow: 0 0 0 1px var(--primary-purple), 0 12px 40px rgba(77, 101, 255, 0.16); }
.plan .badge {
  position: absolute; top: -0.8125rem; left: 50%; transform: translateX(-50%);
  background: linear-gradient(135deg, var(--primary-purple), var(--accent-teal));
  color: #fff; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.3125rem 0.875rem; border-radius: 999px; white-space: nowrap;
}
.plan .name { font-size: 1.0625rem; font-weight: 650; }
.plan .subtitle { color: var(--text-muted); font-size: 0.875rem; margin-top: 0.125rem; }
.plan .price { font-size: 2.375rem; font-weight: 750; letter-spacing: -0.03em; margin-top: 0.875rem; }
.plan .price .per { font-size: 1rem; font-weight: 500; color: var(--text-muted); letter-spacing: 0; }
.plan .mins { color: var(--accent-teal); font-size: 0.9063rem; font-weight: 550; margin-top: 0.125rem; }
.plan .savings { color: #6ee7b7; font-size: 0.8438rem; margin-top: 0.5rem; }
.plan .diff { color: var(--text-secondary-2); font-size: 0.9063rem; margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--hairline); }
.plan .check-list { margin-top: 1rem; margin-bottom: 1.5rem; }
.plan .plan-cta { margin-top: auto; }
.plan .note { text-align: center; color: var(--text-muted); font-size: 0.8125rem; margin-top: 0.625rem; }
.plans-foot { text-align: center; color: var(--text-muted); font-size: 0.9063rem; margin-top: 2rem; }

/* ---- ROI calculator ---- */
.calc { background: var(--surface-1); border: 1px solid var(--hairline); border-radius: 1.25rem; padding: clamp(1.5rem, 4vw, 2.5rem); display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); }
@media (max-width: 860px) { .calc { grid-template-columns: 1fr; } }
.calc label { display: block; font-size: 0.9375rem; font-weight: 550; margin-bottom: 0.375rem; }
.calc .calc-row { margin-bottom: 1.5rem; }
.calc output { float: right; font-weight: 700; color: var(--accent-teal); }
.calc input[type="range"] { width: 100%; accent-color: var(--primary-purple); height: 2rem; }
.calc .calc-out { border-left: 1px solid var(--hairline); padding-left: clamp(1.5rem, 4vw, 3rem); display: flex; flex-direction: column; justify-content: center; }
@media (max-width: 860px) { .calc .calc-out { border-left: 0; padding-left: 0; border-top: 1px solid var(--hairline); padding-top: 1.5rem; } }
.calc .leak { font-size: clamp(2.25rem, 5vw, 3.25rem); font-weight: 750; letter-spacing: -0.03em; }
.calc .leak-lbl { color: var(--text-secondary-2); margin-top: 0.25rem; }
.calc .vs { margin-top: 1.25rem; color: var(--text-secondary-2); font-size: 0.9375rem; }
.calc .vs strong { color: var(--text-primary); }
.calc .disclaimer { margin-top: 1.25rem; color: var(--text-muted); font-size: 0.8125rem; }

/* ---- FAQ ---- */
.faq { display: grid; gap: 0.75rem; max-width: 800px; margin-inline: auto; }
.faq-item { border: 1px solid var(--hairline); border-radius: 0.875rem; background: var(--surface-1); overflow: hidden; }
.faq-q {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  background: none; border: 0; color: var(--text-primary); cursor: pointer; text-align: left;
  padding: 1.125rem 1.375rem; font-size: 1.0313rem; font-weight: 600; font-family: inherit;
}
.faq-q .chev { flex: 0 0 auto; transition: transform 0.25s ease; color: var(--text-muted); }
.faq-q[aria-expanded="true"] .chev { transform: rotate(180deg); }
/* Collapsed state only exists when JS runs (.js on <html>): no-JS visitors
   see every answer expanded. visibility:hidden keeps closed panels out of
   the tab order and away from screen readers. */
.faq-a { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 0.3s ease; }
.faq-a > div { overflow: hidden; transition: visibility 0.3s; }
.js .faq-item:not(.is-open) .faq-a { grid-template-rows: 0fr; }
.js .faq-item:not(.is-open) .faq-a > div { visibility: hidden; }
.faq-a p { padding: 0 1.375rem 1.25rem; color: var(--text-secondary-2); font-size: 0.9844rem; }
.faq-item.is-open .faq-a { grid-template-rows: 1fr; }

/* ---- Comparison table ---- */
.cmp-scroll { overflow-x: auto; border: 1px solid var(--hairline); border-radius: 1rem; -webkit-overflow-scrolling: touch; }
.cmp-scroll::-webkit-scrollbar { height: 8px; }
.cmp-scroll::-webkit-scrollbar-thumb { background: var(--primary-purple); border-radius: 4px; }
table.cmp { width: 100%; border-collapse: collapse; min-width: 760px; font-size: 0.9375rem; }
table.cmp th, table.cmp td { padding: 0.9375rem 1.125rem; text-align: left; border-bottom: 1px solid var(--hairline); vertical-align: top; }
table.cmp thead th { font-size: 0.8438rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); background: var(--surface-2); position: sticky; top: 0; }
table.cmp tbody tr:hover td { background: rgba(255, 255, 255, 0.02); }
table.cmp tbody tr:last-child td { border-bottom: 0; }
table.cmp .col-us { background: rgba(77, 101, 255, 0.07); }
table.cmp thead th.col-us { color: var(--text-primary); }
table.cmp td:first-child, table.cmp th:first-child {
  position: sticky; left: 0; background: var(--surface-2); z-index: 1; font-weight: 600; min-width: 11rem;
}
.cmp-note { color: var(--text-muted); font-size: 0.8438rem; margin-top: 0.75rem; }
.cell-note { display: block; color: var(--text-muted); font-size: 0.8125rem; font-weight: 400; margin-top: 0.125rem; }
.mark-yes { color: var(--accent-teal); font-weight: 700; }
.mark-no { color: #8b95a1; }
.mark-part { color: var(--accent-orange); font-weight: 600; }
.rec-chip { display: inline-block; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #fff; background: linear-gradient(135deg, var(--primary-purple), var(--accent-teal)); border-radius: 999px; padding: 0.1875rem 0.5625rem; margin-left: 0.5rem; vertical-align: middle; }

/* ---- Industry cards (corporate) ---- */
.industry-card {
  display: flex; flex-direction: column; gap: 0.875rem; height: 100%;
  background: var(--surface-1); border: 1px solid var(--hairline); border-radius: 1.125rem; padding: 2rem;
  text-decoration: none; color: inherit;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
a.industry-card:hover { border-color: var(--accent-teal); transform: translateY(-4px); box-shadow: 0 14px 44px rgba(0, 0, 0, 0.4); }
.industry-card.is-soon { opacity: 0.6; cursor: default; }
.industry-card .ind-emoji { font-size: 1.875rem; }
.industry-card .ind-sub { color: var(--text-muted); font-size: 0.8438rem; letter-spacing: 0.04em; }
.industry-card p { color: var(--text-secondary-2); font-size: 0.9844rem; }
.industry-card .ind-cta { margin-top: auto; font-weight: 650; color: var(--accent-teal); }
.industry-card.is-soon .ind-cta { color: var(--text-muted); }
.soon-pill { display: inline-block; background: rgba(245, 158, 11, 0.14); color: #fbbf24; border: 1px solid rgba(245, 158, 11, 0.35); font-size: 0.75rem; font-weight: 650; border-radius: 999px; padding: 0.1875rem 0.625rem; }

/* ---- Final CTA ---- */
.final-cta { position: relative; text-align: center; overflow: hidden; }
.final-cta .inner { position: relative; z-index: 1; }
.final-cta p { max-width: 36rem; margin: 1rem auto 0; }
.final-cta .btn-row { justify-content: center; margin-top: 2rem; }
.final-cta .fine { margin-top: 1.25rem; color: var(--text-muted); font-size: 0.875rem; }

/* ---- Footer ---- */
.site-footer { border-top: 1px solid var(--hairline); padding-block: 3.5rem 2.5rem; background: var(--bg-dark); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2rem; }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-brand { display: flex; align-items: center; gap: 0.625rem; margin-bottom: 0.875rem; }
.footer-brand img { height: 1.75rem; width: 1.75rem; filter: brightness(1.5); }
.footer-brand .word { font-weight: 750; font-size: 1.125rem; }
.site-footer .tagline { color: var(--text-secondary-2); font-style: normal; font-weight: 550; }
.site-footer .blurb { color: var(--text-muted); font-size: 0.9063rem; margin-top: 0.625rem; max-width: 20rem; }
.site-footer h4 { font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); margin-bottom: 0.875rem; font-weight: 650; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.site-footer ul a { color: var(--text-secondary-2); text-decoration: none; font-size: 0.9375rem; }
.site-footer ul a:hover { color: var(--text-primary); }
.footer-bottom { border-top: 1px solid var(--hairline); margin-top: 2.5rem; padding-top: 1.5rem; color: var(--text-muted); font-size: 0.875rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; }

/* ---- Audio demo cards ---- */
.demo-card audio { width: 100%; margin-top: 0.875rem; filter: invert(0.86) hue-rotate(180deg); border-radius: 999px; }
.demo-card .dur { color: var(--text-muted); font-size: 0.8438rem; }

/* ---- Timeline (how-it-works) ---- */
.timeline { position: relative; max-width: 760px; margin-inline: auto; display: grid; gap: 1.25rem; }
.timeline::before { content: ""; position: absolute; left: 1.375rem; top: 0.5rem; bottom: 0.5rem; width: 2px; background: linear-gradient(180deg, var(--primary-purple), var(--accent-teal)); opacity: 0.5; }
.timeline .t-step { position: relative; padding-left: 4rem; }
.timeline .t-dot {
  position: absolute; left: 0; top: 0;
  width: 2.75rem; height: 2.75rem; border-radius: 999px;
  background: var(--surface-1); border: 1px solid var(--hairline-strong);
  display: grid; place-items: center; font-size: 1.125rem;
}
.timeline h3 { font-size: 1.0938rem; font-weight: 650; }
.timeline p { color: var(--text-secondary-2); font-size: 0.9688rem; }

/* ---- Reveal animations ----
   Content is visible by default; the hidden initial state only applies when
   an inline head script adds .js to <html> (so no-JS visitors and failed
   script loads still see everything). */
.reveal, .reveal-stagger > * { transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
.js .reveal:not(.reveal-visible) { opacity: 0; transform: translateY(16px); }
.js .reveal-stagger:not(.reveal-visible) > * { opacity: 0; transform: translateY(16px); }
.reveal-stagger.reveal-visible > *:nth-child(2) { transition-delay: 0.07s; }
.reveal-stagger.reveal-visible > *:nth-child(3) { transition-delay: 0.14s; }
.reveal-stagger.reveal-visible > *:nth-child(4) { transition-delay: 0.21s; }
.reveal-stagger.reveal-visible > *:nth-child(5) { transition-delay: 0.28s; }
.reveal-stagger.reveal-visible > *:nth-child(6) { transition-delay: 0.35s; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-stagger > * { opacity: 1 !important; transform: none !important; transition: none !important; }
  .sl-dot { opacity: 0.7 !important; animation: none !important; }
  .sl-pulse { animation: none !important; }
  .loop-figure .loop-progress { stroke-dashoffset: 0 !important; }
  .loop-center .mark { opacity: 1 !important; }
  .loop-node, .loop-steps li { transition: none !important; }
  html { scroll-behavior: auto !important; }
  *, *::before, *::after { animation-duration: 0.001s !important; transition-duration: 0.001s !important; }
}

/* ---- Dawn: when the last loop closes at the bottom of the page, light
   rises from below and the dark theme becomes light. One-way per visit;
   token overrides below carry the whole design system across. ---- */
.dawn-sweep {
  position: fixed; inset: 0; z-index: 90; pointer-events: none;
  background: linear-gradient(to top, rgba(247, 249, 251, 0.96) 30%, rgba(247, 249, 251, 0));
  transform: translateY(100%);
  animation: dawn-rise 1.8s ease-out forwards;
}
@keyframes dawn-rise { to { transform: translateY(-110%); } }

/* The slow cross-fade exists ONLY during the temporary is-dawning window
   (added with is-dawn, removed ~1.7s later) — normal interaction
   transitions are untouched before and after the switch. */
html.is-dawning body, html.is-dawning body * {
  transition: background-color 1.1s ease, border-color 1.1s ease, color 1.1s ease, fill 1.1s ease !important;
}

html.is-dawn {
  --bg-dark: #f7f9fb;
  --bg-navy-dark: #e9eff5;
  --bg-dark-lighter: #eef2f6;
  --bg-dark-card: #ffffff;
  --surface-1: #ffffff;
  --surface-2: #eef2f6;
  --text-primary: #0e141b;
  --text-secondary: #3f4b59;
  --text-secondary-2: #3f4b59;
  --text-muted: #5d6877;
  --hairline: rgba(13, 17, 23, 0.08);
  --hairline-strong: rgba(13, 17, 23, 0.18);
  /* accent text fails AA on light backgrounds — darken under dawn
     (#0b8068 = 4.63:1 on #f7f9fb, 4.88:1 on #fff; verified) */
  --accent-teal: #0b8068;
  --accent-teal-light: #0d8f74;
  --accent-orange: #b45309;
}
html.is-dawn body { background-color: var(--bg-dark); color: var(--text-primary); }
html.is-dawn .site-nav.is-scrolled { background: rgba(247, 249, 251, 0.88); }
html.is-dawn .nav-mobile { background: rgba(247, 249, 251, 0.97); }
html.is-dawn .nav-brand img, html.is-dawn .footer-brand img { filter: none; }
html.is-dawn .sl-track { stroke: rgba(13, 17, 23, 0.06); }
html.is-dawn .loop-figure .loop-track { stroke: rgba(13, 17, 23, 0.08); }
html.is-dawn table.cmp tbody tr:hover td { background: rgba(13, 17, 23, 0.03); }
html.is-dawn .plan .savings { color: #047857; }
html.is-dawn .demo-card audio { filter: none; }
html.is-dawn .soon-pill { background: rgba(180, 83, 9, 0.12); border-color: rgba(180, 83, 9, 0.4); color: #92400e; }
/* darken the four wire/spark colors so yellow stays visible on light */
html.is-dawn .sl-wire { filter: brightness(0.78); }
html.is-dawn .sl-spark, html.is-dawn .sl-beacon { filter: drop-shadow(0 0 4px currentColor) brightness(0.78); }
/* a beat after the light arrives, the final CTA glows once */
html.is-dawn .final-cta .btn-cta { animation: cta-dawn 1.4s ease 1s 1; }
@keyframes cta-dawn {
  0%, 100% { box-shadow: 0 0 0 rgba(77, 101, 255, 0); transform: none; }
  40% { box-shadow: 0 0 44px rgba(77, 101, 255, 0.5); transform: translateY(-2px) scale(1.03); }
}

/* ---- Utility ---- */
.center { text-align: center; }
.mt-1 { margin-top: 0.5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.5rem; } .mt-4 { margin-top: 2rem; } .mt-6 { margin-top: 3rem; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }