/* =================================================================
   LOOPTIGHT — design system
   Direction: dark "after-hours ops console, brought to order."
   Deep slate, edge-lit surfaces, mono evidence. The drama is the
   red→green state transition and the loop — never a generic glow.
   Color carries meaning: --risk = found/open, --fixed = closed/proven.
   Those two hues are reserved. Never decorative.
   ================================================================= */

:root {
  color-scheme: dark;

  /* ---- surfaces (deep slate, not pure black) ---- */
  --paper:        #0B0E14;   /* page background */
  --card:         #11151D;   /* raised cards / panels */
  --well:         #080B10;   /* inset mono/evidence wells */
  --line:         #1D2430;   /* hairlines, borders */
  --line-strong:  #2B3444;

  /* ---- ink (on dark, ink = light) ---- */
  --ink:          #EEF2F8;   /* headings + strong text */
  --ink-soft:     #2A3240;
  --void:         #06080D;   /* the final CTA band — deepest moment */
  --text:         #E2E8F1;   /* primary text */
  --text-dim:     #97A2B5;   /* secondary text — AA on slate */
  --text-faint:   #6E7A8E;   /* captions, mono meta */

  /* ---- brand + reserved semantics ---- */
  --brand:        #5B7CFA;   /* interactive / links / primary CTA */
  --brand-deep:   #7690FF;   /* hover (brighter, not darker, on dark) */
  --risk:         #F2555A;   /* RESERVED: open / found / unfixed */
  --risk-bright:  #FF5F65;   /* RESERVED: risk fills, bars, arcs */
  --fixed:        #1FD292;   /* RESERVED: closed / proven / safe */
  --fixed-bright: #19D08B;   /* RESERVED: fixed fills, bars, arcs */

  /* ---- type ---- */
  --font-display: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ---- radii & spacing ---- */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 26px;
  --wrap: 1200px;
  --pad-section: clamp(76px, 11vw, 156px);

  /* ---- effects (edge-lit depth: a hairline of light + a deep drop) ---- */
  --shadow-card:
    inset 0 1px 0 rgba(255, 255, 255, .04),
    0 20px 50px -28px rgba(0, 0, 0, .85);
  --shadow-pop:
    inset 0 1px 0 rgba(255, 255, 255, .06),
    0 34px 80px -34px rgba(0, 0, 0, .9);
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ----------------------------- reset / base ----------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-weight: 400;
  letter-spacing: -0.003em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.028em;
  margin: 0;
  color: var(--ink);
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
strong { font-weight: 700; color: var(--ink); }
::selection { background: rgba(91, 124, 250, .35); color: #fff; }

/* film grain — kills flat banding on large dark fields, reads as "screen" */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 3; pointer-events: none;
  opacity: .04; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* custom scrollbar — dark, quiet */
* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--paper); }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 8px; border: 3px solid var(--paper); }
::-webkit-scrollbar-thumb:hover { background: #3A455A; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(20px, 5vw, 48px); }

/* skip link */
.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 200;
  background: var(--brand); color: #fff; padding: 10px 16px; border-radius: var(--r-sm);
  font-weight: 600; transition: top .2s var(--ease);
}
.skip-link:focus { top: 16px; }

/* focus visibility — non-negotiable */
:focus-visible {
  outline: 2px solid var(--brand-deep);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---- semantic text tints (used sparingly) ---- */
.t-risk  { color: var(--risk); }
.t-fixed { color: var(--fixed); }
.t-fixed-strong { color: var(--fixed); }

/* ---- shared bits ---- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 11px;
  font-family: var(--font-mono);
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 22px;
}
.eyebrow::before {
  content: ""; width: 22px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--brand), transparent);
  flex: none;
}
.sec-head { max-width: 680px; margin-bottom: 56px; }
.sec-head--wide { max-width: 920px; }
.sec-title { font-size: clamp(1.9rem, 4.2vw, 3rem); }
.sec-sub { color: var(--text-dim); font-size: 1.125rem; margin-top: 20px; max-width: 64ch; }

/* ----------------------------- buttons ----------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-body);
  font-weight: 600; font-size: .9375rem;
  padding: 12px 22px; border-radius: var(--r-md);
  border: 1px solid transparent; cursor: pointer;
  transition: transform .18s var(--ease), background .18s var(--ease),
              border-color .18s var(--ease), box-shadow .18s var(--ease),
              color .18s var(--ease);
  white-space: nowrap;
}
.btn--lg { padding: 15px 28px; font-size: 1rem; }
.btn--block { width: 100%; justify-content: center; }
.btn--primary {
  background: var(--brand); color: #fff;
  box-shadow: 0 12px 32px -12px rgba(91, 124, 250, .65), inset 0 1px 0 rgba(255,255,255,.18);
}
.btn--primary:hover { background: var(--brand-deep); transform: translateY(-2px); box-shadow: 0 18px 42px -14px rgba(91, 124, 250, .75), inset 0 1px 0 rgba(255,255,255,.2); }
.btn--ghost { background: rgba(255,255,255,.02); color: var(--text); border-color: var(--line-strong); }
.btn--ghost:hover { border-color: var(--text-faint); transform: translateY(-2px); background: rgba(255,255,255,.05); }

.link-quiet { color: var(--text-dim); font-weight: 600; font-size: .9375rem; transition: color .18s; }
.link-quiet:hover { color: var(--ink); }
.link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--brand-deep); font-weight: 600; margin-top: 28px;
  transition: gap .2s var(--ease), color .18s;
}
.link-arrow:hover { gap: 13px; color: #97ABFF; }

/* ----------------------------- NAV ----------------------------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  transition: background .3s var(--ease), border-color .3s var(--ease), backdrop-filter .3s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
  background: rgba(11, 14, 20, .76);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom-color: var(--line);
}
.nav__inner {
  max-width: var(--wrap); margin-inline: auto;
  padding: 16px clamp(20px, 5vw, 48px);
  display: flex; align-items: center; gap: 32px;
}
.nav__brand { display: inline-flex; align-items: center; gap: 11px; font-family: var(--font-display); font-weight: 700; font-size: 1.0625rem; letter-spacing: -0.02em; color: var(--ink); }
/* the mark performs the brand gesture: an open loop sweeps closed,
   the proven dot pops the instant it lands, holds, then releases */
.loopmark { width: 26px; height: 26px; color: var(--ink); flex: none; }
.loopmark path {
  stroke-dasharray: 100;
  animation: markclose 6s var(--ease) infinite;
}
@keyframes markclose {
  0%       { stroke-dashoffset: 55; }   /* open C */
  38%, 82% { stroke-dashoffset: 0; }    /* swept closed — hold */
  100%     { stroke-dashoffset: 55; }   /* gentle release */
}
.loopmark__dot {
  fill: var(--fixed-bright);
  transform-box: fill-box; transform-origin: center;
  animation: markdot 6s var(--ease) infinite;
}
@keyframes markdot {
  0%, 28%  { opacity: .25; transform: scale(.7); }   /* waiting, dim */
  38%      { opacity: 1;   transform: scale(1.25); } /* the close — pop */
  46%, 82% { opacity: 1;   transform: scale(1); }    /* proven — hold */
  100%     { opacity: .25; transform: scale(.7); }
}
.nav__word { white-space: nowrap; }
.nav__links { display: flex; gap: 28px; margin-left: 8px; }
.nav__links a { position: relative; color: var(--text-dim); font-size: .9375rem; font-weight: 500; transition: color .18s; }
.nav__links a:hover { color: var(--ink); }
.nav__links a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -7px; height: 2px;
  background: linear-gradient(90deg, var(--brand), var(--brand-deep)); border-radius: 2px;
  transition: right .28s var(--ease);
}
.nav__links a:hover::after { right: 40%; }
.nav__links a.is-active { color: var(--ink); }
.nav__links a.is-active::after { right: 0; }
.nav__actions { display: flex; align-items: center; gap: 18px; margin-left: auto; }

.nav__burger { display: none; margin-left: auto; background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--r-sm); width: 42px; height: 38px; cursor: pointer; padding: 0; align-items: center; justify-content: center; flex-direction: column; gap: 5px; }
.nav__burger span { display: block; width: 18px; height: 2px; background: var(--ink); transition: transform .25s var(--ease), opacity .2s; }
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }

.nav__mobile { display: none; flex-direction: column; gap: 4px; padding: 8px clamp(20px,5vw,48px) 24px; background: rgba(11, 14, 20, .96); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.nav__mobile a { padding: 13px 4px; color: var(--ink); font-weight: 500; border-bottom: 1px solid var(--line); }
.nav__mobile .btn { margin-top: 14px; }

/* ----------------------------- HERO ----------------------------- */
/* centered, theatrical: pill → display type → CTAs → the proof card
   on a lit stage, evidence chips floating around it */
.hero { position: relative; padding: clamp(120px, 16vh, 180px) 0 clamp(70px, 9vw, 110px); overflow: hidden; }
/* blueprint grid, masked to the top — the ops-console floor */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .5;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 58px 58px;
  -webkit-mask-image: radial-gradient(115% 75% at 50% -5%, #000 0%, transparent 62%);
  mask-image: radial-gradient(115% 75% at 50% -5%, #000 0%, transparent 62%);
}
/* ---- flat scene: solid slate, grid lines, sparks. no gradient washes ---- */
.hero__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }

/* sparks — signals in the dark, one risk-red, one proven-green */
.hero__spark {
  position: absolute; left: var(--x); top: var(--y);
  width: var(--s, 3px); height: var(--s, 3px); border-radius: 50%;
  background: var(--c, #9FB4E8);
  box-shadow: 0 0 10px var(--c, rgba(159, 180, 232, .8));
  opacity: 0;
  animation: twinkle 6s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}
@keyframes twinkle { 0%, 100% { opacity: 0; transform: scale(.5); } 50% { opacity: .85; transform: scale(1); } }

.hero__inner { position: relative; z-index: 1; }
.hero__copy { display: flex; flex-direction: column; align-items: center; text-align: center; }

/* announcement pill — a live micro-demo of the loop, not a label.
   The mini ring closes red→green and ticks; beside it a status word
   walks one finding through the pipeline: found → reachable → owned
   → fixed → proven. The same journey the proof card tells below. */
.hero__pill {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: .76rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-dim);
  padding: 8px 18px 8px 14px; border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, .02);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* the mini loop: open + red → closed + green → tick → reset */
.pillloop { width: 15px; height: 15px; flex: none; }
.pillloop circle, .pillloop path { fill: none; }
.pillloop__track { stroke: var(--ink-soft); stroke-width: 2; }
.pillloop__arc {
  stroke: var(--risk-bright); stroke-width: 2; stroke-linecap: round;
  stroke-dasharray: 37.7; stroke-dashoffset: 14;
  transform: rotate(-90deg); transform-origin: center;
  animation: pillclose 5.4s var(--ease) infinite;
}
.pillloop__tick {
  stroke: var(--fixed-bright); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 12; stroke-dashoffset: 12;
  animation: pilltick 5.4s var(--ease) infinite;
}
@keyframes pillclose {
  0%        { stroke-dashoffset: 14; stroke: var(--risk-bright); }
  55%       { stroke: var(--risk-bright); }
  72%, 96%  { stroke-dashoffset: 0; stroke: var(--fixed-bright); }
  100%      { stroke-dashoffset: 14; stroke: var(--risk-bright); }
}
@keyframes pilltick {
  0%, 74%   { stroke-dashoffset: 12; opacity: 1; }
  84%, 94%  { stroke-dashoffset: 0; opacity: 1; }
  97%, 100% { stroke-dashoffset: 12; opacity: 0; }
}

/* the status word — a vertical rotator, width pinned to the longest word */
.pill__cycle {
  display: inline-block; width: 12ch; height: 1.2em;
  overflow: hidden; text-align: center;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent);
}
.pill__words { display: block; transform: translateY(-4.8em); animation: pillwords 5.4s var(--ease) infinite; }
.pill__word { display: block; height: 1.2em; line-height: 1.2; color: var(--text); }
.pill__word--risk  { color: var(--risk); }
.pill__word--fixed { color: var(--fixed); }
@keyframes pillwords {
  0%, 16%   { transform: translateY(0); }
  20%, 36%  { transform: translateY(-1.2em); }
  40%, 56%  { transform: translateY(-2.4em); }
  60%, 76%  { transform: translateY(-3.6em); }
  80%, 96%  { transform: translateY(-4.8em); }
  100%      { transform: translateY(-6em); }
}

.pill__sep { color: var(--text-faint); }
.pill__label { color: var(--text-dim); }

.hero__h1 { font-size: clamp(2.5rem, 6vw, 4.5rem); margin: 28px 0 24px; max-width: 24ch; }
/* gradient-lit display type — bright at the top edge, like a lit panel */
@supports (-webkit-background-clip: text) {
  .hero__h1 {
    background: linear-gradient(180deg, #F7FAFF 38%, #AAB6CC 110%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .hero__h1 .t-fixed-strong { -webkit-text-fill-color: var(--fixed); }
}
.hero__sub { color: var(--text-dim); font-size: clamp(1.0625rem, 1.6vw, 1.25rem); max-width: 62ch; margin: 0 auto 36px; }
.hero__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }

/* --- the stage: proof card center, halo beneath, evidence in orbit --- */
.hero__stage { position: relative; max-width: 680px; margin: clamp(48px, 7vw, 76px) auto 0; perspective: 1400px; }
.js .hero__stage.reveal { transition-delay: .12s; }

/* floating evidence chips — fragments of the proof, in orbit */
.hero__float {
  position: absolute; z-index: 2;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .02em;
  color: var(--text-dim); white-space: nowrap;
  padding: 8px 13px; border-radius: 9px;
  border: 1px solid var(--line-strong);
  background: rgba(13, 17, 24, .74);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 16px 36px -18px rgba(0, 0, 0, .85), inset 0 1px 0 rgba(255, 255, 255, .04);
  animation: floaty 7s ease-in-out infinite;
}
.hero__float-dot { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.hero__float-dot--risk  { background: var(--risk-bright);  box-shadow: 0 0 8px rgba(242, 85, 90, .55); }
.hero__float-dot--fixed { background: var(--fixed-bright); box-shadow: 0 0 8px rgba(25, 208, 139, .55); }
/* anchored just off the card's edges — a ~22px tuck over the border only,
   never over the rows (card padding is wider than the overlap) */
.hero__float--a { top: 18%; right: calc(100% - 22px); border-color: rgba(242, 85, 90, .35); color: var(--risk); }
.hero__float--b { top: 46%; left: calc(100% - 22px); border-color: rgba(31, 210, 146, .35); color: var(--fixed); animation-delay: 1.3s; }
.hero__float--c { bottom: 16%; right: calc(100% - 22px); animation-delay: 2.4s; }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* short proof points — a quiet rail under the stage */
.hero__strip { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 28px; margin-top: 46px; font-family: var(--font-mono); font-size: .8125rem; letter-spacing: .03em; color: var(--text-dim); }
.hero__strip li { display: inline-flex; align-items: center; gap: 8px; }
.hero__strip-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--fixed-bright); box-shadow: 0 0 8px rgba(25, 208, 139, .55); flex: none; }

.hero__scroll { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); width: 26px; height: 42px; border: 1px solid var(--line-strong); border-radius: 14px; display: grid; place-items: start center; padding-top: 8px; z-index: 1; background: rgba(255,255,255,.02); }
.hero__scroll span { width: 4px; height: 8px; border-radius: 2px; background: var(--text-dim); animation: scrolldot 1.8s var(--ease) infinite; }
@keyframes scrolldot { 0%{opacity:0; transform: translateY(0);} 30%{opacity:1;} 80%{opacity:0; transform: translateY(12px);} 100%{opacity:0;} }

/* --- signature visual: proof of closure --- */
.proof {
  position: relative; z-index: 1;
  background: linear-gradient(180deg, #131822, var(--card));
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-pop);
  padding: clamp(20px, 2.6vw, 28px);
}
.proof__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.proof__title { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-dim); }

/* the closing ring: open + red → closed + green, then the tick draws */
.ring { width: 36px; height: 36px; }
.ring circle { fill: none; stroke-width: 3; stroke-linecap: round; }
.ring__track { stroke: var(--ink-soft); }
.ring__prog {
  stroke: var(--risk-bright); stroke-dasharray: 88; stroke-dashoffset: 34;
  transform: rotate(-90deg); transform-origin: center;
  animation: closering 2.4s var(--ease) forwards .3s;
}
.ring__tick {
  stroke: var(--fixed-bright); stroke-width: 3.2; fill: none; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 18; stroke-dashoffset: 18;
  animation: drawtick .5s var(--ease) forwards 2.7s;
}
@keyframes closering {
  0%   { stroke-dashoffset: 34; stroke: var(--risk-bright); filter: none; }
  70%  { stroke: var(--risk-bright); }
  100% { stroke-dashoffset: 0; stroke: var(--fixed-bright); filter: drop-shadow(0 0 6px rgba(25, 208, 139, .6)); }
}
@keyframes drawtick { to { stroke-dashoffset: 0; } }

.prow {
  display: flex; align-items: center; gap: 11px; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: .8125rem;
  padding: 10px 0; border-bottom: 1px solid var(--line);
  opacity: 0; transform: translateY(6px);
  animation: rowin .5s var(--ease) forwards;
}
.prow:last-child { border-bottom: 0; }
.prow:nth-child(1) { animation-delay: .25s; }
.prow:nth-child(2) { animation-delay: .6s; }
.prow:nth-child(3) { animation-delay: .95s; }
.prow:nth-child(4) { animation-delay: 1.3s; }
.prow:nth-child(5) { animation-delay: 1.65s; }
.prow:nth-child(6) { animation-delay: 2s; }
@keyframes rowin { to { opacity: 1; transform: none; } }
.prow__k { color: var(--text-faint); min-width: 78px; }
.prow__v { color: var(--text); }
.prow__meta { color: var(--text-faint); }
.pdot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.pdot--risk  { background: var(--risk-bright);  box-shadow: 0 0 0 4px rgba(242, 85, 90, .14), 0 0 10px rgba(242, 85, 90, .5); }
.pdot--fixed { background: var(--fixed-bright); box-shadow: 0 0 0 4px rgba(25, 208, 139, .16), 0 0 10px rgba(25, 208, 139, .5); }
.pchip {
  display: inline-block; font-size: .72rem; padding: 2px 9px; margin-right: 6px;
  border: 1px solid rgba(31, 210, 146, .4); border-radius: 6px; color: var(--fixed);
  background: rgba(31, 210, 146, .06);
}

.proven {
  margin-top: 16px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: rgba(31, 210, 146, .09); border: 1px solid rgba(31, 210, 146, .38);
  border-radius: var(--r-md); padding: 13px 15px;
  box-shadow: 0 0 44px -18px rgba(31, 210, 146, .55);
  opacity: 0; animation: rowin .6s var(--ease) forwards 2.5s;
}
.proven__badge { font-family: var(--font-display); font-weight: 700; color: var(--fixed); font-size: .9375rem; }
.proven__meta { font-family: var(--font-mono); font-size: .72rem; color: var(--text-dim); margin-left: auto; text-align: right; line-height: 1.45; }

/* ----------------------------- 02 REFRAME ----------------------------- */
.reframe { padding: var(--pad-section) 0; border-top: 1px solid var(--line); }
.reframe__inner { max-width: 980px; }
.reframe__h2 { font-size: clamp(1.9rem, 4.4vw, 3.1rem); }
.reframe__body { color: var(--text-dim); font-size: clamp(1.0625rem,1.7vw,1.3rem); margin-top: 32px; max-width: 64ch; }
.pull {
  margin: 48px 0 0; padding: 26px 0 26px 30px;
  border-left: 3px solid var(--brand);
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.3rem, 2.6vw, 1.9rem); line-height: 1.32; letter-spacing: -0.02em;
  color: var(--ink); max-width: 60ch;
}

/* ----------------------------- 03 MOAT ----------------------------- */
.moat { padding: var(--pad-section) 0; border-top: 1px solid var(--line); }
.moat__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(36px, 6vw, 80px); align-items: center; }
.moat__body { color: var(--text-dim); font-size: 1.0625rem; margin-top: 24px; max-width: 56ch; }

/* the estate graph: one finding resolving to everything it really is */
.estate {
  margin: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-card); padding: clamp(20px, 2.6vw, 28px);
  font-family: var(--font-mono); font-size: .8125rem;
  position: relative;
}
/* the resolve rail: risk at the finding, brand down the spine */
.estate::before {
  content: ""; position: absolute; left: calc(clamp(20px, 2.6vw, 28px) - 2px); top: 22%; bottom: 12%;
  width: 2px; border-radius: 2px;
  background: linear-gradient(var(--risk-bright), var(--brand) 36%, var(--brand));
  opacity: .5;
}
.estate__node {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--well);
  color: var(--text-dim); margin-bottom: 9px;
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.estate__node:hover { border-color: var(--line-strong); transform: translateX(3px); }
.estate__node:last-child { margin-bottom: 0; }
.estate__node b { color: var(--text); font-weight: 500; }
.estate__node--head { border-color: rgba(91, 124, 250, .55); background: rgba(91, 124, 250, .07); color: var(--text); box-shadow: 0 0 30px -14px rgba(91, 124, 250, .6); }
.estate__link { position: relative; color: var(--text-faint); font-size: .72rem; padding-left: 14px; margin-bottom: 9px; }

/* ----------------------------- 04 HOW ----------------------------- */
.how { padding: var(--pad-section) 0; border-top: 1px solid var(--line); }
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.pillar {
  position: relative; overflow: hidden;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 32px 30px; box-shadow: var(--shadow-card);
  transition: border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
/* hairline of light that traces the top edge on hover */
.pillar::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--brand), transparent);
  opacity: 0; transition: opacity .3s var(--ease);
}
.pillar:hover { border-color: var(--line-strong); transform: translateY(-4px); box-shadow: var(--shadow-pop); }
.pillar:hover::before { opacity: .8; }
.pillar__mark { width: 46px; height: 46px; border-radius: var(--r-md); display: grid; place-items: center; background: rgba(91,124,250,.1); color: var(--brand-deep); margin-bottom: 22px; border: 1px solid rgba(91,124,250,.25); }
.pillar__mark svg { width: 24px; height: 24px; }
.pillar__mark--proven { background: rgba(31,210,146,.1); color: var(--fixed); border-color: rgba(31,210,146,.28); }
.pillar__step { position: absolute; top: 28px; right: 30px; font-family: var(--font-mono); font-size: .8rem; font-weight: 700; letter-spacing: .05em; color: var(--text-faint); }
.pillar__step--proven { color: var(--fixed); opacity: .75; }
.pillar__title { font-size: 1.5rem; margin-bottom: 12px; }
.pillar__body { color: var(--text-dim); font-size: 1rem; }
.js .pillars .reveal:nth-child(2) { transition-delay: .09s; }
.js .pillars .reveal:nth-child(3) { transition-delay: .18s; }

.strip {
  margin-top: 40px; padding: 22px 26px; border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--well);
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
}
.strip__label { font-family: var(--font-mono); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint); white-space: nowrap; }
.strip__flow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-family: var(--font-mono); font-size: .9rem; }
.strip__flow li { position: relative; color: var(--text-dim); padding-right: 22px; }
.js .strip__flow li { opacity: 0; transform: translateY(6px); }
.strip__flow li::after { content: "→"; position: absolute; right: 4px; color: var(--text-faint); }
.strip__flow li:last-child::after { content: none; padding-right: 0; }
.strip__key { color: var(--ink); font-weight: 700; }
.strip__end { color: var(--fixed) !important; font-weight: 700; text-shadow: 0 0 14px rgba(31, 210, 146, .45); }
.strip__cursor { width: 9px; height: 17px; background: var(--fixed-bright); border-radius: 1px; align-self: center; opacity: 0; box-shadow: 0 0 10px rgba(25, 208, 139, .5); }
.strip.is-in .strip__cursor { animation: blink 1.05s steps(1) infinite .7s; }
@keyframes blink { 0%,50%{opacity:.9;} 51%,100%{opacity:0;} }
.js .strip.is-in li { animation: stripin .5s var(--ease) forwards; }
@keyframes stripin { to { opacity: 1; transform: none; } }

/* ----------------------------- 05 TRUST ----------------------------- */
/* the "quietest" section — calm, solid, serious. No glow here on purpose. */
.trust { padding: var(--pad-section) 0; border-top: 1px solid var(--line); }
.trust__panel {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-xl);
  padding: clamp(34px, 5vw, 64px); box-shadow: var(--shadow-card);
}
.trust__body { color: var(--text-dim); font-size: clamp(1.0625rem,1.6vw,1.25rem); max-width: 70ch; margin-top: 8px; }
.chips { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.chip {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-mono); font-size: .8125rem;
  padding: 9px 16px 9px 13px; border-radius: 999px;
  border: 1px solid var(--line-strong); color: var(--text-dim); background: var(--well);
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.chip:hover { border-color: var(--text-faint); color: var(--ink); }
.chip__i { color: var(--fixed); font-size: .8rem; line-height: 1; }
.chip--pending { border-style: dashed; color: var(--text-faint); }
.chip--pending .chip__i { color: var(--text-faint); }

/* ----------------------------- 06 INTEGRATIONS ----------------------------- */
.integrations { padding: var(--pad-section) 0; border-top: 1px solid var(--line); }
.intg { display: flex; flex-direction: column; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-card); }
.intg__row { background: var(--paper); display: flex; align-items: center; gap: 24px; padding: 24px clamp(20px,3vw,34px); flex-wrap: wrap; }
.intg__cat { font-family: var(--font-mono); font-size: .8125rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim); width: 150px; flex: none; }
.intg__items { display: flex; flex-wrap: wrap; gap: 10px; }
.intg__chip {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-mono); font-size: .9rem; color: var(--text);
  padding: 8px 15px; border-radius: var(--r-sm); border: 1px solid var(--line-strong); background: var(--card);
  transition: border-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.intg__chip::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: var(--text-faint); transition: background .2s var(--ease), box-shadow .2s var(--ease);
}
.intg__chip:hover { border-color: var(--brand); color: var(--brand-deep); transform: translateY(-2px); }
.intg__chip:hover::before { background: var(--brand-deep); box-shadow: 0 0 8px rgba(91, 124, 250, .65); }

/* ----------------------------- 07 OUTCOMES ----------------------------- */
.outcomes { padding: var(--pad-section) 0; border-top: 1px solid var(--line); }
.stats { display: grid; grid-template-columns: 1.35fr .85fr .85fr 1.1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: 0 36px 90px -56px rgba(0,0,0,.9); }
.stat { background: var(--paper); padding: 34px 28px; display: flex; flex-direction: column; justify-content: center; min-height: 168px; }
.stat--lead { background: linear-gradient(110deg, rgba(242,85,90,.07), var(--card) 48%, rgba(31,210,146,.10)); }
.stat__transition { display: flex; align-items: center; gap: 13px; flex-wrap: wrap; font-family: var(--font-display); font-weight: 700; letter-spacing: -0.03em; }
.stat__from { font-size: clamp(1.6rem,3.4vw,2.4rem); color: var(--risk); text-decoration: line-through; text-decoration-color: rgba(242,85,90,.45); opacity: .85; }
.stat__arrow { color: var(--brand-deep); font-size: 1.5rem; animation: nudge 2.4s var(--ease) infinite; }
@keyframes nudge { 0%,100%{transform:translateX(0);} 50%{transform:translateX(5px);} }
.stat__to { font-size: clamp(2.2rem,5vw,3.5rem); color: var(--fixed); text-shadow: 0 0 26px rgba(31, 210, 146, .28); }
.stat__transition--sm .stat__from { font-size: clamp(1.2rem,2.2vw,1.6rem); }
.stat__transition--sm .stat__to { font-size: clamp(1.5rem,2.8vw,2.1rem); }
.stat__big { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.2rem,4vw,3rem); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--ink); }
.stat__big.t-fixed { color: var(--fixed); text-shadow: 0 0 26px rgba(31, 210, 146, .22); }
.stat__cap { color: var(--text-dim); font-size: .9375rem; margin-top: 14px; }
.outcomes__lead { color: var(--text-dim); font-size: clamp(1.0625rem,1.6vw,1.25rem); max-width: 62ch; margin-top: 36px; }
.outcomes__note { font-family: var(--font-mono); font-size: .78rem; color: var(--text-faint); margin-top: 14px; }

/* ----------------------------- 08 ROI ----------------------------- */
.roi { padding: var(--pad-section) 0; border-top: 1px solid var(--line); }
.roi__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(36px, 6vw, 80px); align-items: center; }
.roi__body { color: var(--text-dim); font-size: 1.0625rem; margin-top: 24px; max-width: 52ch; }

/* the fix-vs-breach contrast: the asymmetry IS the argument */
.contrast { display: flex; gap: 18px; align-items: stretch; }
.cbox { flex: 1; border-radius: var(--r-lg); padding: 26px 24px; border: 1px solid var(--line); display: flex; flex-direction: column; }
.cbox--fix {
  background: linear-gradient(180deg, rgba(31, 210, 146, .09), rgba(31, 210, 146, .02));
  border-color: rgba(31, 210, 146, .35);
  box-shadow: 0 0 50px -26px rgba(31, 210, 146, .5);
}
.cbox--breach {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, rgba(242, 85, 90, .09), rgba(242, 85, 90, .02));
  border-color: rgba(242, 85, 90, .35);
  box-shadow: 0 0 60px -28px rgba(242, 85, 90, .55);
}
.cbox--breach::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(70% 80% at 70% 24%, rgba(242, 85, 90, .12), transparent 70%);
  animation: breathe 4.6s var(--ease) infinite;
}
@keyframes breathe { 0%,100%{opacity:.5;} 50%{opacity:1;} }
.cbox__k { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim); }
.cbox__amt { position: relative; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.7rem, 3vw, 2.2rem); letter-spacing: -0.02em; margin-top: 12px; }
.cbox--fix .cbox__amt { text-shadow: 0 0 24px rgba(31, 210, 146, .35); }
.cbox--breach .cbox__amt { text-shadow: 0 0 28px rgba(242, 85, 90, .4); }
.cbox__p { position: relative; font-size: .9375rem; color: var(--text-dim); margin-top: 10px; }

/* ----------------------------- 10 FINAL CTA ----------------------------- */
/* the deepest moment on the page — the void where the loop finally closes */
.finalcta { position: relative; padding: clamp(90px,12vw,150px) 0; overflow: hidden; background: var(--void); border-top: 1px solid var(--line); text-align: center; }
.finalcta__glow { position: absolute; inset: auto -10% -40% -10%; height: 480px; background: radial-gradient(50% 70% at 50% 100%, rgba(91, 124, 250, .22), transparent 72%); pointer-events: none; }
.finalcta__inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; }
.finalcta__loopwrap { position: relative; display: inline-grid; place-items: center; margin-bottom: 30px; }
.finalcta__bloom { position: absolute; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle, rgba(31,210,146,.38), transparent 64%); filter: blur(16px); opacity: 0; transition: opacity 1s var(--ease); }
.finalcta.is-closed .finalcta__bloom { opacity: 1; }
.finalcta__loop { width: 64px; height: 64px; display: block; position: relative; }
.finalcta__track { stroke: var(--ink-soft); stroke-width: 4; }
.finalcta__arc { stroke: var(--risk-bright); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 151; stroke-dashoffset: 55; transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset 1s var(--ease), stroke .8s var(--ease); }
.finalcta.is-closed .finalcta__arc { stroke-dashoffset: 0; stroke: var(--fixed-bright); filter: drop-shadow(0 0 8px rgba(25,208,139,.6)); }
.finalcta__h2 { font-size: clamp(2.2rem,5.4vw,3.6rem); }
.finalcta__sub { color: var(--text-dim); font-size: clamp(1.0625rem,1.7vw,1.3rem); max-width: 52ch; margin: 22px 0 38px; }
.finalcta__actions { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }

/* ----------------------------- FOOTER ----------------------------- */
.footer { border-top: 1px solid var(--line); background: var(--paper); padding: 72px 0 36px; }
.footer__inner { display: grid; grid-template-columns: 1.4fr 3fr; gap: clamp(40px,6vw,80px); }
.footer__tag { color: var(--text-dim); font-family: var(--font-mono); font-size: .85rem; margin-top: 18px; }
.footer__cols { display: grid; grid-template-columns: repeat(5, 1fr); gap: 30px; }
.footer__col h4 { font-family: var(--font-mono); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); font-weight: 500; margin-bottom: 16px; }
.footer__col a { display: block; color: var(--text-dim); font-size: .9375rem; padding: 6px 0; transition: color .18s; }
.footer__col a:hover { color: var(--ink); }
.footer__col--trust h4 { color: var(--fixed); }
.footer__trustlink { color: var(--ink) !important; font-weight: 600; }
.footer__base { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--line); color: var(--text-faint); font-size: .875rem; flex-wrap: wrap; }
.footer__motto { font-family: var(--font-mono); }

/* ----------------------------- scroll reveal ----------------------------- */
/* Hidden state only applies once JS is confirmed present (.js on <html>),
   so a failed/blocked script never leaves content invisible. */
.reveal { transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .reveal { opacity: 0; transform: translateY(22px); }
.reveal.is-in { opacity: 1; transform: none; }

/* ----------------------------- responsive ----------------------------- */
/* the orbit chips need open air on both sides of the stage */
@media (max-width: 1120px) {
  .hero__float { display: none; }
}

@media (max-width: 940px) {
  .nav__links { display: none; }
  .nav__actions { display: none; }
  .nav__burger { display: flex; }
  .nav.is-open .nav__mobile { display: flex; }

  .hero__scroll { display: none; }
  .moat__grid { grid-template-columns: 1fr; gap: 40px; }
  .roi__grid { grid-template-columns: 1fr; gap: 40px; }
  .stats { grid-template-columns: 1fr 1fr; }
  .footer__inner { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  /* let the headline wrap naturally — the forced break overflows here */
  .hero__h1 { font-size: clamp(1.9rem, 8.6vw, 2.5rem); }
  .hero__h1 br { display: none; }
  .pillars { grid-template-columns: 1fr; }
  .contrast { flex-direction: column; }
  .footer__cols { grid-template-columns: 1fr 1fr; gap: 24px 30px; }
  .footer__base { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 480px) {
  body { font-size: 1rem; }
  .stats { grid-template-columns: 1fr; }
  .intg__row { gap: 12px; }
  .intg__cat { width: 100%; }
  .prow__k { min-width: 64px; }
  .proven__meta { margin-left: 0; text-align: left; }
  .footer__cols { grid-template-columns: 1fr; }
}

/* ----------------------------- reduced motion ----------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .reveal { opacity: 1; transform: none; }
  .strip__flow li { opacity: 1; transform: none; }
  .hero__scroll span { animation: none; }
  /* proof card lands in its final, proven state — static and dignified */
  .prow, .proven { opacity: 1; transform: none; }
  .ring__prog { stroke: var(--fixed-bright); stroke-dashoffset: 0; animation: none; }
  .ring__tick { stroke-dashoffset: 0; animation: none; }
  /* pill rests in its proven state: loop closed, tick drawn, word "proven" */
  .pillloop__arc { stroke: var(--fixed-bright); stroke-dashoffset: 0; animation: none; }
  .pillloop__tick { stroke-dashoffset: 0; opacity: 1; animation: none; }
  .pill__words { transform: translateY(-4.8em); animation: none; }
  /* logo rests in its closed, proven state */
  .loopmark path { stroke-dashoffset: 0; animation: none; }
  .loopmark__dot { opacity: 1; transform: scale(1); animation: none; }
}