/* ============================================================================
   Vicipulse — landing page styles

   TYPOGRAPHY, and why (the justification the brief asked for):

   Space Grotesk  — display / headlines. A grotesque with deliberately engineered
                    letterforms: flat terminals, tight apertures, a squared-off
                    'a' and 'g'. It reads as instrumentation rather than as a
                    consumer brand. Vicipulse is sold on the claim that its
                    numbers are *measured*, so the voice has to sound built, not
                    styled. A softer humanist face (or anything rounded) would
                    undercut the one thing a supervisor has to believe.

   Inter          — body prose. The neutral UI workhorse: high x-height, open
                    counters, unremarkable at 15–17px, which is exactly the job.
                    Prose here exists to get out of the way of the argument.

   JetBrains Mono — every metric, formula, table name, threshold and code path.
                    Tabular figures mean a column of numbers aligns and a
                    counting number doesn't shimmy as digits change width. It
                    also does semantic work: monospace marks a value as computed
                    output rather than marketing copy, which is the whole
                    editorial line of this product.

   No serif anywhere. This is an operations console's front door, not an essay.
   ============================================================================ */

:root {
  /* Ground — deeper and cooler than the dashboard's, so the page reads as a
     cinema rather than a console. */
  --ground:    #05070C;
  --ground-2:  #080C15;
  --panel:     rgba(14, 20, 32, 0.62);
  --hairline:  rgba(255, 255, 255, 0.09);
  --hairline-2:rgba(255, 255, 255, 0.05);

  --ink:   #EAF0F7;
  --ink-2: #97A5BB;
  --ink-3: #5D6B82;

  /* Signal cyan = live data off the phone floor.
     Violet        = the layer Vicipulse computes on top of it.
     Status hues are reserved for bands and severities, exactly as the product
     reserves them — never used as decoration. */
  --cyan:   #5FE3F5;
  --cyan-2: #38BDD8;
  --teal:   #1E6E86;
  --violet: #8B6CFF;
  --good:   #2FD98A;
  --warn:   #F5B93B;
  --crit:   #F4645F;

  --ease: cubic-bezier(.16, 1, .3, 1);
  --gut: clamp(20px, 5vw, 64px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: auto; }

body {
  background: var(--ground);
  color: var(--ink);
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

::selection { background: rgba(95, 227, 245, .26); color: #fff; }

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

code, .mono { font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace; }

code {
  font-size: .86em;
  color: var(--cyan);
  background: rgba(95, 227, 245, .07);
  border: 1px solid rgba(95, 227, 245, .14);
  border-radius: 4px;
  padding: .08em .38em;
  white-space: nowrap;
}

em { font-style: normal; color: var(--cyan); }

/* ---------------------------------------------------------------- canvas ---- */
#gl {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  /* The WebGL layer never intercepts input; all interaction is scroll. */
  pointer-events: none;
}

/* A painted vignette costs nothing and does what a post-processing pass would. */
.vignette {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% 45%, transparent 38%, rgba(5, 7, 12, .72) 100%),
    linear-gradient(to bottom, rgba(5, 7, 12, .55) 0%, transparent 18%, transparent 82%, rgba(5, 7, 12, .75) 100%);
}

.grain {
  position: fixed;
  inset: -50%;
  z-index: 2;
  pointer-events: none;
  opacity: .028;
  background-image: 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='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 6s steps(6) infinite;
}
@keyframes grain {
  0%,100% { transform: translate(0,0) }
  20% { transform: translate(-2%, 1%) }
  40% { transform: translate(1%, -2%) }
  60% { transform: translate(-1%, -1%) }
  80% { transform: translate(2%, 2%) }
}

/* ----------------------------------------------------------- annotations ---- */
#annotations { position: fixed; inset: 0; z-index: 6; pointer-events: none; }

.anno {
  position: absolute;
  top: 0; left: 0;
  will-change: transform, opacity;
  opacity: 0;
  transform: translate3d(-50%, -50%, 0);
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 7px 11px;
  border-radius: 7px;
  border: 1px solid var(--hairline);
  background: rgba(5, 7, 12, .78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  white-space: nowrap;
}
.anno b {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--ink);
}
.anno span {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: .04em;
  color: var(--ink-3);
}
.anno--cyan   { border-color: rgba(95, 227, 245, .34); }
.anno--cyan b { color: var(--cyan); }
.anno--violet   { border-color: rgba(139, 108, 255, .34); }
.anno--violet b { color: var(--violet); }
.anno--warn   { border-color: rgba(245, 185, 59, .36); }
.anno--warn b { color: var(--warn); }
.anno--crit   { border-color: rgba(244, 100, 95, .36); }
.anno--crit b { color: var(--crit); }
.anno--mono b { font-weight: 500; letter-spacing: .02em; }

/* ---------------------------------------------------------------- chrome ---- */
.progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 40;
  background: rgba(255, 255, 255, .05);
}
.progress i {
  display: block;
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--teal), var(--cyan) 60%, var(--violet));
  box-shadow: 0 0 14px rgba(95, 227, 245, .55);
}

.topbar::before {
  content: "";
  position: absolute;
  inset: -2px 0 -26px;
  background: linear-gradient(to bottom, rgba(5, 7, 12, .88), transparent);
  pointer-events: none;
  z-index: -1;
}
.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 30;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px var(--gut);
  mix-blend-mode: normal;
}

.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.brand-word {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -.01em;
  color: var(--ink);
}
.brand-mark { display: flex; align-items: flex-end; gap: 3px; height: 16px; }
.brand-mark i {
  display: block;
  width: 3px;
  border-radius: 2px;
  background: var(--cyan);
  box-shadow: 0 0 8px rgba(95, 227, 245, .7);
  animation: bar 1.5s var(--ease) infinite;
}
.brand-mark i:nth-child(1) { height: 6px;  animation-delay: 0s }
.brand-mark i:nth-child(2) { height: 15px; animation-delay: .18s }
.brand-mark i:nth-child(3) { height: 9px;  animation-delay: .36s }
@keyframes bar { 0%,100% { transform: scaleY(.45) } 45% { transform: scaleY(1) } }

.topbar-meta { display: flex; align-items: center; gap: 10px; }
.chip {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: .1em;
  color: var(--ink-3);
  border: 1px solid var(--hairline);
  border-radius: 99px;
  padding: 6px 12px;
  background: rgba(8, 12, 21, .5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  text-decoration: none;
}
.chip b { color: var(--cyan); font-weight: 500; }
.chip--link {
  color: var(--ink);
  border-color: rgba(95, 227, 245, .3);
  transition: background .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease);
}
.chip--link:hover { background: rgba(95, 227, 245, .12); border-color: var(--cyan); color: #fff; }

/* chapter rail */
.rail {
  position: fixed;
  right: max(18px, calc(var(--gut) - 20px));
  top: 50%;
  transform: translateY(-50%);
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.rail a {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  text-decoration: none;
}
.rail span {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .18);
  transition: background .4s var(--ease), transform .4s var(--ease), box-shadow .4s var(--ease);
}
.rail em {
  font-family: "JetBrains Mono", monospace;
  font-style: normal;
  font-size: 10px;
  letter-spacing: .08em;
  color: var(--ink-3);
  opacity: 0;
  transform: translateX(6px);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.rail a:hover em { opacity: 1; transform: none; }
.rail a.is-active span {
  background: var(--cyan);
  transform: scale(1.5);
  box-shadow: 0 0 12px rgba(95, 227, 245, .8);
}
.rail a.is-active em { opacity: 1; transform: none; color: var(--ink-2); }

/* ------------------------------------------------------------------ type ---- */
.h-display {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 600;
  letter-spacing: -.035em;
  line-height: 1.02;
  font-size: clamp(38px, 6.4vw, 88px);
}
.h-display .line { display: block; overflow: hidden; }
.h-display .line > span { display: block; will-change: transform; }
.line--accent > span {
  background: linear-gradient(96deg, var(--cyan) 0%, #A9F0FA 42%, var(--violet) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: .17em;
  color: var(--ink-3);
  margin-bottom: 26px;
}
.eyebrow .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 0 0 rgba(95, 227, 245, .55);
  animation: ping 2.6s var(--ease) infinite;
}
@keyframes ping {
  0%   { box-shadow: 0 0 0 0 rgba(95, 227, 245, .55) }
  70%  { box-shadow: 0 0 0 9px rgba(95, 227, 245, 0) }
  100% { box-shadow: 0 0 0 0 rgba(95, 227, 245, 0) }
}

.lede {
  font-size: clamp(15px, 1.35vw, 18px);
  line-height: 1.68;
  color: var(--ink-2);
  max-width: 60ch;
  margin-top: 24px;
}

/* ------------------------------------------------------------------ hero ---- */
main { position: relative; z-index: 5; }

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 120px var(--gut) 90px;
}
.hero-inner { max-width: 1100px; width: 100%; }

.pillars {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 260px));
  gap: 14px;
  margin-top: 40px;
}
.pillar {
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 16px 18px;
  background: var(--panel);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.pillar-k {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: .14em;
  color: var(--teal);
}
.pillar b {
  display: block;
  font-family: "Space Grotesk", sans-serif;
  font-size: 17px;
  font-weight: 600;
  margin: 6px 0 4px;
  letter-spacing: -.01em;
}
.pillar p { font-size: 13.5px; line-height: 1.5; color: var(--ink-3); }

.stat-strip {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(22px, 4vw, 52px);
  margin-top: 46px;
  padding-top: 26px;
  border-top: 1px solid var(--hairline-2);
}
.stat-strip div { display: flex; flex-direction: column; gap: 3px; }
.stat-strip b {
  font-family: "JetBrains Mono", monospace;
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.stat-strip span {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: .1em;
  color: var(--ink-3);
}

.scroll-cue {
  position: absolute;
  left: var(--gut);
  bottom: 34px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: .22em;
  color: var(--ink-3);
}
.scroll-cue i {
  display: block;
  width: 1px; height: 42px;
  background: linear-gradient(to bottom, var(--cyan), transparent);
  transform-origin: top;
  animation: cue 2.4s var(--ease) infinite;
}
@keyframes cue { 0% { transform: scaleY(0); opacity: 0 } 30% { opacity: 1 } 100% { transform: scaleY(1); opacity: 0 } }

/* --------------------------------------------------------------- chapter ---- */
.chapter { position: relative; }
.track { position: relative; }

/* Two rows rather than absolute positioning: the prose takes the free space and
   centres in it, the kicker takes what it needs at the bottom. On a short
   viewport they compress instead of overlapping. */
.stage {
  height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  padding: 86px var(--gut) clamp(24px, 5vh, 54px);
  position: relative;
  isolation: isolate;
}

/* A one-sided scrim under the copy column. The 3D stays fully visible where it
   matters and the prose keeps its contrast — the cheapest legibility fix there
   is, and it doubles as depth. */
.stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(5, 7, 12, .96) 0%,
    rgba(5, 7, 12, .92) 26%,
    rgba(5, 7, 12, .62) 40%,
    rgba(5, 7, 12, .20) 50%,
    transparent 62%);
}
.chapter:has(.copy--right) .stage::before { transform: scaleX(-1); }

.copy { width: min(46ch, 42vw); position: relative; align-self: center; }
/* Right-hand columns keep clear of the chapter rail and its labels. */
.copy--right { justify-self: end; padding-right: 78px; }

.chapter-tag {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 22px;
}
.chapter-tag i {
  font-style: normal;
  color: var(--ground);
  background: var(--cyan);
  border-radius: 4px;
  padding: 2px 6px;
  font-weight: 700;
  font-size: 10px;
}

.beats { position: relative; min-height: 300px; }
.beat {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  opacity: 0;
  will-change: transform, opacity;
}
.beat h2 {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 600;
  font-size: clamp(26px, 3.1vw, 42px);
  line-height: 1.1;
  letter-spacing: -.028em;
  margin-bottom: 16px;
}
.beat p {
  font-size: clamp(14px, 1.1vw, 15.5px);
  line-height: 1.7;
  color: var(--ink-2);
  max-width: 46ch;
}
.beat p + p { margin-top: 12px; }
.formula-inline code {
  display: inline-block;
  white-space: normal;
  line-height: 2.1;
  font-size: 12.5px;
}

.kicker {
  width: min(46ch, 42vw);
  justify-self: start;
  align-self: end;
  margin-top: 26px;
  border: 1px solid var(--hairline);
  border-left: 2px solid var(--cyan);
  border-radius: 10px;
  padding: 16px 18px;
  background: var(--panel);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  opacity: 0;
}
.copy--right ~ .kicker { justify-self: end; margin-right: 78px; }
.kicker--wide { width: min(58ch, 48vw); }
.kicker-label {
  display: block;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 8px;
}
.kicker p { font-size: 13.5px; line-height: 1.62; color: var(--ink-2); }
.kicker .formula {
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  color: var(--ink);
  margin-bottom: 10px;
}
.kicker .formula b { color: var(--cyan); font-weight: 500; }

.bands { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.band {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: .06em;
  padding: 4px 8px;
  border-radius: 5px;
  border: 1px solid;
}
.band--green { color: var(--good); border-color: rgba(47, 217, 138, .32); background: rgba(47, 217, 138, .07) }
.band--good  { color: #7FE0C4; border-color: rgba(127, 224, 196, .28); background: rgba(127, 224, 196, .06) }
.band--warn  { color: var(--warn); border-color: rgba(245, 185, 59, .3);  background: rgba(245, 185, 59, .07) }
.band--crit  { color: var(--crit); border-color: rgba(244, 100, 95, .3);  background: rgba(244, 100, 95, .07) }

.sev { list-style: none; display: flex; flex-direction: column; gap: 7px; margin-bottom: 12px; }
.sev li { display: flex; align-items: center; gap: 9px; font-size: 12px; }
.sev li b {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: .1em;
  color: var(--ink-3);
  margin-left: auto;
}
.sev li code { font-size: 11px; }
.sev-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.sev-dot--crit { background: var(--crit); box-shadow: 0 0 9px rgba(244,100,95,.7) }
.sev-dot--warn { background: var(--warn); box-shadow: 0 0 9px rgba(245,185,59,.7) }
.sev-dot--info { background: var(--ink-3) }
.sev-dot--good { background: var(--good); box-shadow: 0 0 9px rgba(47,217,138,.7) }
.sev-dot--violet { background: var(--violet); box-shadow: 0 0 9px rgba(139,108,255,.7) }

/* --------------------------------------------------------- new-feature tag --
   Used twice: once in the hero eyebrow as a link down to the bots chapter, and
   once inline in that chapter's own tag. Violet rather than cyan, because on
   this page cyan is the live phone floor and violet is the layer Vicipulse
   adds on top of it — which is exactly what bot measurement is. */
.tag-new {
  font-family: "JetBrains Mono", monospace;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: .14em;
  color: var(--violet);
  border: 1px solid rgba(139, 108, 255, .38);
  background: rgba(139, 108, 255, .10);
  border-radius: 5px;
  padding: 3px 7px;
  text-decoration: none;
  white-space: nowrap;
  transition: background .25s var(--ease), border-color .25s var(--ease);
}
a.tag-new:hover { background: rgba(139, 108, 255, .2); border-color: var(--violet); }
.tag-new--inline { margin-right: 4px; }

/* ------------------------------------------------------------------- cta ---- */
.cta {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 110px var(--gut) 48px;
}
.cta-inner { width: 100%; max-width: 1080px; margin: 0 auto; }

.cta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 44px;
}
.cta-card {
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: 22px;
  background: var(--panel);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transition: transform .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease);
}
.cta-card:hover {
  transform: translateY(-4px);
  border-color: rgba(95, 227, 245, .3);
  box-shadow: 0 24px 60px -30px rgba(56, 189, 216, .6);
}
.cta-card--accent { border-color: rgba(139, 108, 255, .26); }
.cta-card--accent:hover { border-color: rgba(139, 108, 255, .55); box-shadow: 0 24px 60px -30px rgba(139,108,255,.6) }
.cta-card-k {
  display: inline-block;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: .16em;
  color: var(--cyan);
  border: 1px solid rgba(95, 227, 245, .26);
  border-radius: 5px;
  padding: 3px 8px;
  margin-bottom: 14px;
}
.cta-card--accent .cta-card-k { color: var(--violet); border-color: rgba(139, 108, 255, .3) }
.cta-card p { font-size: 13.5px; line-height: 1.62; color: var(--ink-2); }
.cta-card pre {
  margin: 14px 0 12px;
  padding: 13px 15px;
  border-radius: 9px;
  background: rgba(2, 4, 8, .72);
  border: 1px solid var(--hairline-2);
  overflow-x: auto;
}
.cta-card pre code {
  background: none; border: none; padding: 0;
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.85;
  white-space: pre;
  display: block;
}
.cta-card pre .c { color: var(--cyan) }
.cta-card pre .k { color: var(--violet) }
.cta-note { font-size: 12px !important; color: var(--ink-3) !important; }

.cta-close {
  margin-top: 40px;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--ink-2);
  max-width: 74ch;
}

.foot {
  margin-top: 46px;
  padding-top: 20px;
  border-top: 1px solid var(--hairline-2);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: .1em;
  color: var(--ink-3);
}

.noscript {
  position: relative; z-index: 10;
  margin: 120px auto; max-width: 60ch;
  padding: 20px; border: 1px solid var(--hairline);
  border-radius: 10px; color: var(--ink-2);
}

/* ------------------------------------------------------------ responsive ---- */
@media (max-width: 900px) {
  .rail { display: none; }
  .copy, .copy--right { width: 100%; margin-left: 0; }
  .beats { min-height: 260px; }
  .beat p { max-width: none; }
  .kicker,
  .copy--right ~ .kicker { width: 100%; margin: 18px 0 0; justify-self: stretch; }
  .copy--right { padding-right: 0; justify-self: stretch; }
  .stage::before { background: linear-gradient(to top, rgba(5,7,12,.98) 0%, rgba(5,7,12,.96) 52%, rgba(5,7,12,.72) 64%, transparent 80%); }
  .chapter:has(.copy--right) .stage::before { transform: none; }
  /* Phone: subject above, prose below — the grid rows do the work. */
  .stage { grid-template-rows: 1fr auto auto; align-items: end; padding: 78px var(--gut) 26px; }
  .copy { align-self: end; }
  .pillars { grid-template-columns: 1fr; }
  .hero { align-items: flex-end; padding-bottom: 110px; }
  .stat-strip { gap: 20px 30px; }
}

@media (prefers-reduced-motion: reduce) {
  .grain, .brand-mark i, .eyebrow .dot, .scroll-cue i { animation: none !important; }
  * { transition-duration: .01ms !important; }
}