/* ===================================================================
   RedStaff Этап 2 — сайт-предложение
   Red Petroleum palette: red + black + white + light grey
   Typography: Onest + JetBrains Mono
   =================================================================== */

:root {
  --bg: #FFFFFF;
  --bg-2: #F6F6F6;
  --bg-3: #EFEFEF;
  --ink: #0B0B0C;
  --ink-2: #3A3A3D;
  --ink-3: #6B6B70;
  --ink-4: #A8A8AD;
  --line: #E5E5E7;
  --line-2: #D1D1D5;

  --rp-red: #E30613;          /* primary brand red */
  --rp-red-2: #B30410;        /* darker */
  --rp-red-soft: #FCE7E9;     /* tinted bg */
  --rp-black: #0B0B0C;
  --rp-yellow: #FFC700;       /* very sparing accent */

  --sans: "Onest", -apple-system, system-ui, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;

  --container: 1440px;
  --pad-x: clamp(20px, 5vw, 96px);
  --pad-y: clamp(80px, 10vw, 160px);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }

/* ====================== LAYOUT ====================== */
.wrap {
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
  position: relative;
}
.section {
  padding-top: var(--pad-y);
  padding-bottom: var(--pad-y);
  position: relative;
}
.section.dark {
  background: var(--rp-black);
  color: #fff;
}
.section.gray { background: var(--bg-2); }

/* ====================== TYPOGRAPHY ====================== */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rp-red);
  font-weight: 500;
  margin: 0 0 28px;
}
.eyebrow::before {
  content: "";
  width: 8px; height: 8px;
  background: var(--rp-red);
  display: inline-block;
}
.dark .eyebrow { color: #fff; }
.dark .eyebrow::before { background: var(--rp-red); }

.h-display {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(48px, 7.5vw, 116px);
  line-height: 0.96;
  letter-spacing: -0.035em;
  margin: 0;
  text-wrap: balance;
}
.h-display em { font-style: normal; color: var(--rp-red); }
.h-section {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(40px, 5.5vw, 80px);
  line-height: 1.0;
  letter-spacing: -0.025em;
  margin: 0 0 32px;
  text-wrap: balance;
}
.h-section em { font-style: normal; color: var(--rp-red); }
.h-block {
  font-family: var(--sans);
  font-weight: 600;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0;
}
.lede {
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1.4;
  color: var(--ink-2);
  margin: 0;
  max-width: 880px;
  text-wrap: pretty;
}
.dark .lede { color: rgba(255,255,255,0.78); }
.body {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 720px;
}
.dark .body { color: rgba(255,255,255,0.72); }
.mono {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
}
.dark .mono { color: rgba(255,255,255,0.5); }

.section-id {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 24px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.dark .section-id { color: rgba(255,255,255,0.5); }
.section-id .num { color: var(--rp-red); font-weight: 600; }
.section-id .bar {
  width: 56px; height: 1px;
  background: var(--line-2);
}
.dark .section-id .bar { background: rgba(255,255,255,0.2); }

/* ====================== NAV ====================== */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 14px 0;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid transparent;
  transition: background 200ms ease, border-color 200ms ease;
}
.nav.scrolled { border-bottom-color: var(--line); }
.nav .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.nav-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink);
}
.nav-brand .mark {
  width: 28px; height: 28px;
  background: var(--rp-red);
  border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0;
}
.nav-links {
  display: flex;
  gap: 32px;
  font-size: 14px;
  color: var(--ink-2);
}
.nav-links a {
  position: relative;
  padding: 6px 0;
  transition: color 150ms ease;
}
.nav-links a:hover { color: var(--rp-red); }
.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--rp-red);
  color: #fff;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: background 150ms ease, transform 150ms ease;
}
.nav-cta:hover { background: var(--rp-red-2); transform: translateY(-1px); }
.nav-cta .arr {
  display: inline-block;
  transition: transform 200ms ease;
}
.nav-cta:hover .arr { transform: translateX(3px); }

@media (max-width: 900px) {
  .nav-links { display: none; }
}

/* ====================== HERO ====================== */
.hero {
  background: var(--rp-black);
  color: #fff;
  padding-top: 180px;
  padding-bottom: 80px;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(800px 600px at 80% 20%, rgba(227,6,19,0.25), transparent 60%),
    radial-gradient(600px 500px at 10% 100%, rgba(227,6,19,0.15), transparent 60%);
  pointer-events: none;
}
.hero .wrap { position: relative; z-index: 1; }
.hero .top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin-bottom: 80px;
}
.hero .top-row .mark-row {
  display: flex; align-items: center; gap: 14px;
}
.hero .top-row .mark-row .dot {
  width: 6px; height: 6px; background: var(--rp-red); border-radius: 50%;
}
.hero h1.h-display {
  color: #fff;
  font-size: clamp(56px, 9vw, 144px);
  font-weight: 700;
}
.hero h1 em { color: var(--rp-red); }
.hero .hero-lede {
  margin-top: 40px;
  max-width: 760px;
  font-size: clamp(20px, 1.7vw, 26px);
  line-height: 1.4;
  color: rgba(255,255,255,0.78);
}
.hero-meta {
  margin-top: 100px;
  display: grid;
  grid-template-columns: repeat(3, 1fr) auto;
  gap: 32px;
  align-items: end;
  padding-top: 40px;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.hero-meta .cell .l {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin-bottom: 12px;
}
.hero-meta .cell .v {
  font-size: clamp(36px, 4vw, 56px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1;
  color: #fff;
}
.hero-meta .cell .v em { color: var(--rp-red); font-style: normal; }
.hero-meta .cta-cell { text-align: right; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 28px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 500;
  transition: background 150ms ease, transform 150ms ease;
  cursor: pointer;
  white-space: nowrap;
}
.btn-primary {
  background: var(--rp-red);
  color: #fff;
}
.btn-primary:hover { background: var(--rp-red-2); transform: translateY(-2px); }
.btn-ghost {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.25);
}
.btn-ghost:hover { background: rgba(255,255,255,0.08); }
.btn-dark {
  background: var(--rp-black);
  color: #fff;
}
.btn-dark:hover { background: #1d1d1f; }
.btn .arr {
  display: inline-block;
  transition: transform 200ms ease;
}
.btn:hover .arr { transform: translateX(4px); }

@media (max-width: 900px) {
  .hero-meta { grid-template-columns: 1fr 1fr; }
  .hero-meta .cta-cell { grid-column: 1 / -1; text-align: left; margin-top: 16px; }
}

/* ====================== HEADER ROW (section intros) ====================== */
.section-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: end;
  margin-bottom: 80px;
}
.section-head .right { padding-bottom: 12px; }
@media (max-width: 900px) {
  .section-head { grid-template-columns: 1fr; gap: 24px; }
}

/* ====================== CARDS ====================== */
.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 32px;
  transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}
.card.hover-lift:hover {
  transform: translateY(-4px);
  border-color: var(--line-2);
  box-shadow: 0 24px 60px -28px rgba(11, 11, 12, 0.18);
}
.dark .card { background: #131315; border-color: rgba(255,255,255,0.08); color: #fff; }
.dark .card.hover-lift:hover { border-color: rgba(255,255,255,0.18); }

.card-red {
  background: var(--rp-red);
  color: #fff;
  border-color: var(--rp-red);
}
.card-red .mono { color: rgba(255,255,255,0.72); }

/* ====================== TIMELINE (context) ====================== */
.timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.timeline .tl-line {
  position: absolute;
  left: 28px; right: 28px;
  top: 22px;
  height: 2px;
  background: var(--line-2);
  z-index: 0;
}
.dark .timeline .tl-line { background: rgba(255,255,255,0.15); }
.tl-item {
  position: relative;
  padding-top: 64px;
}
.tl-item .tl-dot {
  position: absolute;
  left: 0; top: 8px;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--line-2);
  z-index: 1;
}
.dark .tl-item .tl-dot { background: var(--rp-black); border-color: rgba(255,255,255,0.2); }
.tl-item .tl-dot.done { background: var(--ink); border-color: var(--ink); }
.dark .tl-item .tl-dot.done { background: rgba(255,255,255,0.4); border-color: rgba(255,255,255,0.4); }
.tl-item .tl-dot.now {
  background: var(--rp-red);
  border-color: var(--rp-red);
  box-shadow: 0 0 0 6px var(--rp-red-soft);
}
.dark .tl-item .tl-dot.now { box-shadow: 0 0 0 6px rgba(227,6,19,0.2); }
.tl-item .tl-date {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 10px;
}
.tl-item .tl-title {
  font-size: 26px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin-bottom: 10px;
}
.tl-item .tl-body { font-size: 15px; color: var(--ink-3); line-height: 1.55; }

@media (max-width: 900px) {
  .timeline { grid-template-columns: 1fr; }
  .timeline .tl-line { left: 14px; top: 32px; bottom: 32px; width: 2px; height: auto; right: auto; }
}

/* ====================== HUB DIAGRAM ====================== */
.hub-wrap {
  position: relative;
  aspect-ratio: 5 / 3;
  width: 100%;
  max-width: 720px;
}
.hub-center {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: clamp(180px, 24%, 240px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--rp-red);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 18px;
  box-shadow:
    0 30px 80px -20px rgba(227, 6, 19, 0.5),
    inset 0 0 0 1px rgba(255,255,255,0.1);
  z-index: 3;
}
.hub-center .lbl {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
}
.hub-center .nm {
  font-size: clamp(24px, 3.5vw, 38px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  margin: 6px 0;
}
.hub-center .sub {
  font-size: 12px;
  color: rgba(255,255,255,0.78);
  line-height: 1.4;
}
.hub-ring {
  position: absolute;
  left: 50%; top: 50%;
  width: 65%;
  aspect-ratio: 1;
  border: 1px dashed var(--line-2);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}
.dark .hub-ring { border-color: rgba(255,255,255,0.15); }
.hub-svg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  z-index: 0;
}
.hub-spoke {
  position: absolute;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 18px;
  z-index: 2;
  transition: border-color 150ms, transform 150ms;
  min-width: 140px;
}
.hub-spoke:hover { border-color: var(--rp-red); transform: translateY(-2px); }
.dark .hub-spoke { background: #131315; border-color: rgba(255,255,255,0.1); color: #fff; }
.dark .hub-spoke:hover { border-color: var(--rp-red); }
.hub-spoke .sp-l {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 2px;
}
.dark .hub-spoke .sp-l { color: rgba(255,255,255,0.5); }
.hub-spoke .sp-n {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

/* ====================== COMPARISON TABLE ====================== */
.compare {
  display: grid;
  grid-template-columns: 240px 1fr 1fr;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
}
.dark .compare { background: #131315; border-color: rgba(255,255,255,0.08); }
.compare > div {
  padding: 20px 24px;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  font-size: 16px;
}
.dark .compare > div { border-color: rgba(255,255,255,0.06); }
.compare > div:nth-child(3n) { border-right: none; }
.compare > div:nth-last-child(-n+3) { border-bottom: none; }
.compare .hd {
  background: var(--bg-2);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
}
.dark .compare .hd { background: #1a1a1c; color: rgba(255,255,255,0.55); }
.compare .hd.now {
  background: var(--rp-red);
  color: #fff;
}
.compare .asp { font-weight: 600; color: var(--ink); }
.dark .compare .asp { color: #fff; }

@media (max-width: 900px) {
  .compare { grid-template-columns: 1fr; }
  .compare > div { border-right: none; }
}

/* ====================== BLOCK GRID (8 blocks) ====================== */
.blocks-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.blk {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 220px;
  transition: border-color 200ms ease, transform 200ms ease;
  position: relative;
}
.blk:hover {
  border-color: var(--rp-red);
  transform: translateY(-3px);
}
.blk .blk-n {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--rp-red);
  font-weight: 600;
}
.blk .blk-t {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  flex: 1;
}
.blk .blk-sub {
  font-size: 13px;
  color: var(--ink-3);
  line-height: 1.45;
}
.blk .blk-p {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: 0.02em;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.blk.feat {
  background: var(--rp-red);
  border-color: var(--rp-red);
  color: #fff;
}
.blk.feat .blk-n { color: rgba(255,255,255,0.75); }
.blk.feat .blk-sub { color: rgba(255,255,255,0.78); }
.blk.feat .blk-p { color: #fff; border-color: rgba(255,255,255,0.18); }

.blocks-extra {
  display: grid;
  grid-template-columns: repeat(4, 1fr) 1.3fr;
  gap: 12px;
  margin-top: 16px;
}
.blk-mini {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.blk-mini .l { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.blk-mini .t { font-size: 14px; line-height: 1.4; color: var(--ink); }
.blk-mini .p { font-family: var(--mono); font-size: 13px; color: var(--rp-red); margin-top: 4px; font-weight: 500; }
.total-card {
  background: var(--rp-black);
  border-radius: 12px;
  padding: 22px 26px;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}
.total-card .l { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.5); }
.total-card .v {
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
}
.total-card .s { font-size: 13px; color: rgba(255,255,255,0.6); margin-top: 4px; }

@media (max-width: 900px) {
  .blocks-grid { grid-template-columns: repeat(2, 1fr); }
  .blocks-extra { grid-template-columns: 1fr; }
}

/* ====================== IDEAS (sverh ТЗ) ====================== */
.ideas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.idea {
  background: #131315;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 320px;
  transition: border-color 200ms ease, background 200ms ease, transform 200ms ease;
}
.idea:hover {
  border-color: var(--rp-red);
  background: #18181a;
  transform: translateY(-4px);
}
.idea .glyph {
  width: 56px; height: 56px;
  border-radius: 12px;
  background: rgba(227,6,19,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--rp-red);
}
.idea .glyph svg { width: 28px; height: 28px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.idea .num { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; color: var(--rp-red); text-transform: uppercase; font-weight: 500; }
.idea .it { font-size: 24px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.2; color: #fff; }
.idea .ib { font-size: 15px; line-height: 1.55; color: rgba(255,255,255,0.66); }

.idea.statement {
  background: var(--rp-red);
  border-color: var(--rp-red);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.idea.statement .num { color: rgba(255,255,255,0.7); }
.idea.statement .it { color: #fff; font-size: 28px; }
.idea.statement .ib { color: rgba(255,255,255,0.85); font-size: 16px; }

@media (max-width: 1100px) { .ideas { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .ideas { grid-template-columns: 1fr; } }

/* ====================== ROADMAP / GANTT ====================== */
.gantt {
  display: grid;
  grid-template-columns: 140px repeat(4, 1fr);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
}
.gantt > div {
  padding: 14px 18px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  min-height: 56px;
}
.gantt > div:nth-child(5n) { border-right: none; }
.gantt > div:nth-last-child(-n+5) { border-bottom: none; }
.gantt .gh { background: var(--bg-2); font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; display: flex; align-items: center; }
.gantt .gh.month { background: var(--rp-red); color: #fff; }
.gantt .row-l { background: var(--bg-2); font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; display: flex; align-items: center; }
.bar {
  background: var(--rp-red-soft);
  border-left: 3px solid var(--rp-red);
  padding: 8px 12px;
  font-size: 13px;
  border-radius: 0 6px 6px 0;
  margin: 2px 0;
  line-height: 1.35;
}
.bar.crit { background: var(--rp-red); color: #fff; border-color: var(--rp-red-2); }
.bar.discover { background: var(--bg-3); border-color: var(--ink); color: var(--ink); }

@media (max-width: 1100px) {
  .gantt { grid-template-columns: 1fr; }
}

/* ====================== BUDGET ====================== */
.budget-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 64px;
  align-items: start;
}
.budget-bar {
  display: grid;
  grid-template-columns: 1fr 100px;
  gap: 16px;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.budget-bar:last-child { border-bottom: none; }
.budget-bar .bn { font-size: 16px; color: #fff; }
.budget-bar .bn.sub { color: rgba(255,255,255,0.55); font-size: 14px; }
.budget-bar .ba { font-family: var(--mono); font-size: 15px; color: #fff; text-align: right; font-weight: 500; }
.budget-progress {
  position: relative;
  height: 3px;
  background: rgba(255,255,255,0.08);
  border-radius: 999px;
  margin-top: 6px;
}
.budget-progress > span {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  background: var(--rp-red);
  border-radius: 999px;
}
.budget-progress.subtle > span { background: rgba(255,255,255,0.4); }

.pay-card {
  display: grid;
  grid-template-columns: 88px 1fr auto;
  gap: 20px;
  align-items: center;
  background: #131315;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 22px 26px;
  transition: border-color 200ms, background 200ms;
}
.pay-card:hover { border-color: rgba(255,255,255,0.16); }
.pay-card.first { background: var(--rp-red); border-color: var(--rp-red); }
.pay-card .pp {
  font-size: 56px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.025em;
  color: #fff;
}
.pay-card.first .pp { color: #fff; }
.pay-card:not(.first) .pp { color: var(--rp-red); }
.pay-card .pn { font-size: 18px; font-weight: 600; color: #fff; letter-spacing: -0.01em; }
.pay-card .pd { font-size: 13px; color: rgba(255,255,255,0.55); margin-top: 4px; line-height: 1.45; }
.pay-card .pa { font-family: var(--mono); font-size: 17px; color: #fff; white-space: nowrap; font-weight: 500; }

@media (max-width: 1100px) {
  .budget-grid { grid-template-columns: 1fr; gap: 40px; }
}

/* ====================== TEAM ====================== */
.team-list {
  display: grid;
  grid-template-columns: 1fr;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
}
.team-row {
  display: grid;
  grid-template-columns: 80px 1fr 1fr auto;
  gap: 24px;
  align-items: center;
  padding: 20px 28px;
  border-bottom: 1px solid var(--line);
  transition: background 150ms;
}
.team-row:last-child { border-bottom: none; }
.team-row:hover { background: var(--bg-2); }
.team-mono {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--bg-2);
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.01em;
}
.team-mono.red { background: var(--rp-red); color: #fff; border-color: var(--rp-red); }
.team-mono.dark { background: var(--ink); color: #fff; border-color: var(--ink); }
.team-name { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.team-name small { display: block; font-size: 13px; color: var(--ink-3); font-weight: 400; margin-top: 2px; letter-spacing: 0; }
.team-stack { font-family: var(--mono); font-size: 13px; color: var(--ink-3); }
.team-load { font-family: var(--mono); font-size: 13px; color: var(--ink); font-weight: 500; }

@media (max-width: 900px) {
  .team-row { grid-template-columns: 56px 1fr; }
  .team-stack, .team-load { grid-column: 2 / -1; font-size: 12px; }
}

/* ====================== GUARANTEES ====================== */
.guarantees-hero {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 16px;
}
.gua-big {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 36px;
  transition: border-color 200ms, transform 200ms;
}
.gua-big:hover { border-color: var(--rp-red); transform: translateY(-3px); }
.gua-big .kpi {
  font-size: 80px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--rp-red);
  margin-bottom: 18px;
}
.gua-big .kpi small { font-size: 36px; vertical-align: 0.05em; }
.gua-big .gt { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 8px; }
.gua-big .gb { font-size: 15px; color: var(--ink-3); line-height: 1.55; }
.guarantees-mini {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.gua-mini {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px;
  transition: border-color 200ms;
}
.gua-mini:hover { border-color: var(--rp-red); }
.gua-mini .l { font-family: var(--mono); font-size: 11px; color: var(--rp-red); margin-bottom: 10px; font-weight: 600; letter-spacing: 0.1em; }
.gua-mini .t { font-size: 17px; font-weight: 600; line-height: 1.25; margin-bottom: 6px; letter-spacing: -0.005em; }
.gua-mini .b { font-size: 13px; color: var(--ink-3); line-height: 1.5; }

@media (max-width: 1100px) { .guarantees-hero { grid-template-columns: 1fr; } .guarantees-mini { grid-template-columns: repeat(2, 1fr); } }

/* ====================== NOT PROMISE ====================== */
.not-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.not-row {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px 26px;
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 18px;
  align-items: start;
  transition: border-color 200ms;
}
.not-row:hover { border-color: var(--rp-red); }
.not-row .nn {
  font-size: 32px;
  font-weight: 700;
  color: var(--rp-red);
  letter-spacing: -0.02em;
  line-height: 1;
}
.not-row .nt { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 6px; }
.not-row .nb { font-size: 14px; color: var(--ink-3); line-height: 1.5; }

.boundary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  margin-top: 24px;
}
.boundary > div { padding: 14px 20px; border-bottom: 1px solid var(--line); font-size: 14px; }
.boundary > div:nth-child(2n) { border-left: 1px solid var(--line); }
.boundary > div:nth-last-child(-n+2) { border-bottom: none; }
.boundary .b-hd {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  background: var(--bg-2);
  font-weight: 600;
}
.boundary .b-hd.us { color: var(--rp-red); }

@media (max-width: 900px) { .not-grid { grid-template-columns: 1fr; } }

/* ====================== STEPS / CTA ====================== */
.steps {
  display: flex;
  flex-direction: column;
  margin-top: 40px;
}
.step {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 24px;
  padding: 28px 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
}
.step:last-child { border-bottom: none; }
.step .sn {
  font-size: 56px;
  font-weight: 700;
  color: var(--rp-red);
  letter-spacing: -0.025em;
  line-height: 1;
}
.step .st { font-size: 22px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.3; }
.step .sd { font-size: 15px; color: var(--ink-3); margin-top: 8px; line-height: 1.55; }

.contact-card {
  background: var(--rp-black);
  color: #fff;
  border-radius: 20px;
  padding: 48px;
}
.contact-card .ch {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin-bottom: 18px;
}
.contact-card .cn { font-size: 32px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; margin-bottom: 28px; }
.contact-card .caddr { font-size: 16px; color: rgba(255,255,255,0.78); line-height: 1.6; }
.contact-card .cmail {
  display: inline-flex;
  margin-top: 8px;
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,0.3);
  padding-bottom: 1px;
  transition: border-color 150ms;
}
.contact-card .cmail:hover { border-color: var(--rp-red); }
.contact-card .cinfo {
  display: flex;
  gap: 32px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.contact-card .cinfo .l { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.45); }
.contact-card .cinfo .v { font-family: var(--mono); font-size: 14px; color: #fff; margin-top: 4px; }

.deadline {
  background: var(--bg-2);
  border-radius: 16px;
  padding: 32px;
  margin-top: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.deadline .l { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rp-red); margin-bottom: 6px; font-weight: 600; }
.deadline .v { font-size: 40px; font-weight: 700; letter-spacing: -0.02em; line-height: 1; }
.deadline .s { font-size: 13px; color: var(--ink-3); margin-top: 6px; }

@media (max-width: 1100px) {
  .step { grid-template-columns: 60px 1fr; gap: 16px; }
  .step .sn { font-size: 40px; }
  .contact-card { padding: 32px; }
}

/* ====================== FOOTER ====================== */
.footer {
  background: var(--rp-black);
  color: #fff;
  padding: 80px 0 40px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 60px;
  align-items: start;
  margin-bottom: 80px;
}
.footer .h-section { color: #fff; margin: 0; }
.footer .mono { color: rgba(255,255,255,0.5); }
.footer-bot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 32px;
  border-top: 1px solid rgba(255,255,255,0.1);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
}
@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr; gap: 40px; }
}

/* ====================== ARCHITECTURE SCHEMA ====================== */
.arch {
  display: grid;
  grid-template-columns: 1fr 1.4fr 1fr;
  gap: 20px;
  margin-top: 32px;
  align-items: center;
}
.arch-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.arch-node {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px 24px;
  transition: border-color 200ms;
}
.arch-node:hover { border-color: var(--rp-red); }
.arch-node.dash { border-style: dashed; background: transparent; }
.arch-node.master {
  background: var(--rp-red);
  border-color: var(--rp-red);
  color: #fff;
  text-align: center;
  padding: 32px 28px;
}
.arch-node .label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 4px;
}
.arch-node.master .label { color: rgba(255,255,255,0.7); }
.arch-node .title {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.1;
}
.arch-node.master .title { font-size: 32px; margin: 4px 0 8px; }
.arch-node .desc {
  font-size: 13px;
  color: var(--ink-3);
  margin-top: 6px;
  line-height: 1.5;
}
.arch-node.master .desc { color: rgba(255,255,255,0.78); margin-top: 8px; font-size: 14px; }

.arch-mid {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}
.arch-arrow {
  width: 100%;
  height: 1px;
  background: var(--line-2);
  position: relative;
}
.arch-arrow::after {
  content: "";
  position: absolute;
  right: -1px; top: -3px;
  border-left: 6px solid var(--line-2);
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;
}
.arch-arrow.left::after {
  right: auto; left: -1px;
  border-left: none;
  border-right: 6px solid var(--line-2);
}
.arch-arrow .lbl {
  position: absolute;
  top: -22px;
  left: 50%; transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
  background: var(--bg);
  padding: 0 8px;
}

@media (max-width: 1100px) {
  .arch { grid-template-columns: 1fr; }
  .arch-mid { padding: 12px 0; }
  .arch-arrow { display: none; }
}

/* ====================== INFRA NOTES ====================== */
.notes-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 40px;
}
.note {
  background: var(--bg-2);
  border-radius: 14px;
  padding: 20px 24px;
}
.note .l { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rp-red); margin-bottom: 8px; font-weight: 600; }
.note .b { font-size: 15px; line-height: 1.5; color: var(--ink); }
.note .b strong { font-weight: 600; }

@media (max-width: 1100px) { .notes-grid { grid-template-columns: repeat(2, 1fr); } }

/* ====================== SCROLL ANIMATIONS ====================== */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1), transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}
.reveal.delay-1 { transition-delay: 80ms; }
.reveal.delay-2 { transition-delay: 160ms; }
.reveal.delay-3 { transition-delay: 240ms; }
.reveal.delay-4 { transition-delay: 320ms; }
.reveal.delay-5 { transition-delay: 400ms; }

/* ====================== STICKY CTA ====================== */
.sticky-cta {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(120%);
  z-index: 90;
  background: var(--rp-black);
  color: #fff;
  border-radius: 999px;
  padding: 10px 12px 10px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 20px 50px -10px rgba(0,0,0,0.3);
  transition: transform 350ms cubic-bezier(0.16, 1, 0.3, 1);
}
.sticky-cta.show { transform: translateX(-50%) translateY(0); }
.sticky-cta .l { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.55); }
.sticky-cta .v { font-size: 14px; font-weight: 500; }
.sticky-cta .btn { padding: 12px 22px; font-size: 14px; }

@media (max-width: 700px) {
  .sticky-cta { left: 12px; right: 12px; transform: translateY(120%); }
  .sticky-cta.show { transform: translateY(0); }
  .sticky-cta .l { display: none; }
}

/* ====================== UTILS ====================== */
.divider { height: 1px; background: var(--line); margin: 32px 0; }
.dark .divider { background: rgba(255,255,255,0.1); }

.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tag {
  display: inline-flex;
  align-items: center;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--bg-2);
  color: var(--ink-2);
  border: 1px solid var(--line);
}
.dark .tag {
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.78);
  border-color: rgba(255,255,255,0.12);
}
.tag.red { background: var(--rp-red); color: #fff; border-color: var(--rp-red); }

/* number ticker */
.tick {
  display: inline-block;
  font-variant-numeric: tabular-nums;
}

/* ====================== ECOSYSTEM — Hero stats strip ====================== */
.hero-strip {
  margin-top: 80px;
  padding-top: 40px;
  border-top: 1px solid rgba(255,255,255,0.12);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
}
.hero-strip .cell .v {
  font-size: clamp(28px, 3.2vw, 44px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  color: #fff;
}
.hero-strip .cell .v em { color: var(--rp-red); font-style: normal; }
.hero-strip .cell .v small {
  font-size: 0.45em;
  font-weight: 500;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0;
  margin-left: 2px;
}
.hero-strip .cell .l {
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  line-height: 1.4;
}
@media (max-width: 1100px) {
  .hero-strip { grid-template-columns: repeat(2, 1fr); gap: 28px; }
}

.scroll-hint {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: rgba(255,255,255,0.4);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.scroll-hint .arr { animation: bob 1.6s ease-in-out infinite; }
@keyframes bob { 0%,100% { transform: translateY(0); opacity: 0.5; } 50% { transform: translateY(4px); opacity: 1; } }

/* ====================== Сегодня — 6 cards ====================== */
.today-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.today-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: border-color 200ms, transform 200ms, box-shadow 200ms;
  position: relative;
  min-height: 240px;
}
.today-card:hover {
  border-color: var(--rp-red);
  transform: translateY(-3px);
  box-shadow: 0 20px 50px -20px rgba(11,11,12,0.15);
}
.today-card .l {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rp-red);
  font-weight: 600;
}
.today-card .t {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.2;
}
.today-card .b {
  font-size: 14.5px;
  color: var(--ink-3);
  line-height: 1.55;
}
@media (max-width: 1100px) { .today-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) { .today-grid { grid-template-columns: 1fr; } }

/* ====================== Группа — 3 entities + flow ====================== */
.group-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 48px;
}
.entity {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: border-color 200ms, transform 200ms;
}
.entity:hover { border-color: var(--rp-red); transform: translateY(-3px); }
.entity .role {
  display: inline-flex;
  align-self: flex-start;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  background: var(--rp-red);
  padding: 5px 12px;
  border-radius: 999px;
  font-weight: 600;
}
.entity .name {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.entity .addr { font-size: 13px; color: var(--ink-3); }
.entity .desc { font-size: 15px; color: var(--ink-2); line-height: 1.55; }
.entity .pull {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.entity .pull .l { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rp-red); font-weight: 600; }
.entity .pull .v { font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }

@media (max-width: 1100px) { .group-grid { grid-template-columns: 1fr; } }

/* Flow diagram */
.flow {
  background: var(--rp-black);
  color: #fff;
  border-radius: 20px;
  padding: 48px;
  position: relative;
  overflow: hidden;
}
.flow::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(800px 600px at 80% 0%, rgba(227,6,19,0.18), transparent 60%);
  pointer-events: none;
}
.flow .ftitle {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin-bottom: 36px;
  position: relative;
  z-index: 1;
}
.flow-svg {
  position: relative;
  z-index: 1;
}

.flow-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  position: relative;
  z-index: 1;
}
.flow-node {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  padding: 14px 22px;
  font-family: var(--sans);
  display: inline-flex;
  flex-direction: column;
  text-align: center;
  gap: 3px;
  min-width: 180px;
  transition: border-color 200ms, background 200ms;
}
.flow-node:hover { border-color: var(--rp-red); background: rgba(255,255,255,0.1); }
.flow-node.red { background: var(--rp-red); border-color: var(--rp-red); }
.flow-node .ll { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.55); }
.flow-node.red .ll { color: rgba(255,255,255,0.78); }
.flow-node .nn { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: #fff; }
.flow-arrow {
  width: 1px; height: 24px;
  background: rgba(255,255,255,0.25);
  position: relative;
}
.flow-arrow::after {
  content: "";
  position: absolute;
  bottom: -1px; left: -3px;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  border-top: 6px solid rgba(255,255,255,0.25);
}
.flow-fork {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  position: relative;
  width: 100%;
  max-width: 720px;
}
.flow-fork::before {
  content: "";
  position: absolute;
  left: 50%; top: -24px;
  width: 1px; height: 24px;
  background: rgba(255,255,255,0.25);
}
.flow-fork::after {
  content: "";
  position: absolute;
  left: 25%; right: 25%;
  top: -1px;
  height: 1px;
  background: rgba(255,255,255,0.25);
}
.flow-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  position: relative;
}
.flow-side::before {
  content: "";
  position: absolute;
  left: 50%; top: -24px;
  width: 1px; height: 24px;
  background: rgba(255,255,255,0.25);
}
.flow-leaf {
  font-family: var(--mono);
  font-size: 12px;
  color: rgba(255,255,255,0.65);
  padding: 8px 16px;
  border-left: 2px solid var(--rp-red);
  background: rgba(255,255,255,0.03);
  border-radius: 0 6px 6px 0;
  width: 100%;
  text-align: left;
}
.flow-finance {
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid rgba(255,255,255,0.1);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  position: relative; z-index: 1;
}
.flow-finance .fin-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  padding: 18px 22px;
}
.flow-finance .fin-card .ll { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rp-red); margin-bottom: 6px; font-weight: 600; }
.flow-finance .fin-card .nn { font-size: 16px; font-weight: 600; color: #fff; line-height: 1.3; }
.flow-finance .fin-card .ss { font-size: 13px; color: rgba(255,255,255,0.55); margin-top: 4px; }

@media (max-width: 900px) {
  .flow { padding: 24px; }
  .flow-fork { grid-template-columns: 1fr; gap: 24px; }
  .flow-fork::before, .flow-fork::after { display: none; }
  .flow-finance { grid-template-columns: 1fr; }
}

/* ====================== Разрывы — 11 точек ====================== */
.gaps {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.gap-row {
  background: #131315;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 22px 26px;
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 18px;
  align-items: start;
  transition: border-color 200ms, background 200ms, transform 200ms;
}
.gap-row:hover { border-color: var(--rp-red); background: #17171a; transform: translateY(-2px); }
.gap-row .gn {
  font-size: 28px;
  font-weight: 700;
  color: var(--rp-red);
  letter-spacing: -0.02em;
  line-height: 1;
  padding-top: 4px;
}
.gap-row .gt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.gap-row .gt .name {
  font-size: 17px;
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.01em;
}
.gap-row .badge {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  padding: 3px 8px;
  border-radius: 4px;
  font-weight: 600;
}
.gap-row .badge.pub { background: rgba(227,6,19,0.18); color: var(--rp-red); }
.gap-row .badge.hyp { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.65); }
.gap-row .gb { font-size: 14px; color: rgba(255,255,255,0.65); line-height: 1.5; margin-bottom: 12px; }
.gap-row .gs {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rp-red);
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.08);
  font-weight: 600;
  width: 100%;
}
.gap-row .gs::before { content: "→"; }

@media (max-width: 900px) { .gaps { grid-template-columns: 1fr; } }

/* ====================== Видение — 3 large cards ====================== */
.vision {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.vision-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  transition: border-color 200ms, transform 200ms;
  position: relative;
  overflow: hidden;
}
.vision-card:hover { border-color: var(--rp-red); transform: translateY(-4px); }
.vision-card .vn {
  font-size: 72px;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--rp-red);
  line-height: 0.9;
  margin-bottom: 8px;
}
.vision-card .vt {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.15;
}
.vision-card .vb { font-size: 15px; color: var(--ink-3); line-height: 1.55; }

.vision-card.featured {
  background: var(--rp-red);
  border-color: var(--rp-red);
  color: #fff;
}
.vision-card.featured .vn { color: rgba(255,255,255,0.7); }
.vision-card.featured .vb { color: rgba(255,255,255,0.85); }

@media (max-width: 1100px) { .vision { grid-template-columns: 1fr; } }

/* ====================== Модули — big grouped cards ====================== */
.module {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 48px;
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
}
.dark .module { background: #131315; border-color: rgba(255,255,255,0.1); }
.module.featured { background: var(--rp-black); color: #fff; border-color: var(--rp-black); }
.module.featured .mod-sub-card { background: #1c1c1f; border-color: rgba(255,255,255,0.08); color: #fff; }

.module-head {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 32px;
  align-items: start;
  margin-bottom: 36px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--line);
}
.module.featured .module-head { border-color: rgba(255,255,255,0.12); }
.module-letter {
  font-size: 88px;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--rp-red);
  line-height: 0.9;
}
.module-meta .l { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; font-weight: 600; }
.module.featured .module-meta .l { color: rgba(255,255,255,0.5); }
.module-meta .t { font-size: clamp(28px, 3vw, 40px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; margin-bottom: 14px; }
.module-meta .d { font-size: 16px; line-height: 1.6; max-width: 800px; color: var(--ink-2); }
.module.featured .module-meta .d { color: rgba(255,255,255,0.75); }
.module-price {
  text-align: right;
}
.module-price .ll { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; margin-bottom: 6px; }
.module.featured .module-price .ll { color: rgba(255,255,255,0.55); }
.module-price .vv { font-size: 38px; font-weight: 700; letter-spacing: -0.02em; line-height: 1; color: var(--rp-red); white-space: nowrap; }
.module-price .ss { font-family: var(--mono); font-size: 12px; color: var(--ink-3); margin-top: 6px; }
.module.featured .module-price .ss { color: rgba(255,255,255,0.5); }

.mod-subs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.mod-sub-card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color 200ms, transform 200ms;
}
.mod-sub-card:hover { border-color: var(--rp-red); transform: translateY(-2px); }
.mod-sub-card .ll { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rp-red); font-weight: 600; }
.mod-sub-card .tt { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; }
.mod-sub-card ul {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mod-sub-card li {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-2);
  padding-left: 16px;
  position: relative;
}
.module.featured .mod-sub-card li { color: rgba(255,255,255,0.7); }
.mod-sub-card li::before {
  content: "";
  position: absolute;
  left: 0; top: 9px;
  width: 6px; height: 6px;
  background: var(--rp-red);
  border-radius: 50%;
}
.mod-sub-card .foot {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--mono);
  font-size: 13px;
}
.module.featured .mod-sub-card .foot { border-color: rgba(255,255,255,0.1); }
.mod-sub-card .foot .term { color: var(--ink-3); }
.module.featured .mod-sub-card .foot .term { color: rgba(255,255,255,0.55); }
.mod-sub-card .foot .price { font-weight: 600; color: var(--rp-red); }

@media (max-width: 900px) {
  .module { padding: 28px; }
  .module-head { grid-template-columns: 1fr; gap: 16px; }
  .module-letter { font-size: 64px; }
  .module-price { text-align: left; }
  .mod-subs { grid-template-columns: 1fr; }
}

/* 9 AI sub-modules (B) — denser grid */
.ai-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.ai-card {
  background: #1c1c1f;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color 200ms, transform 200ms, background 200ms;
}
.ai-card:hover { border-color: var(--rp-red); background: #232327; transform: translateY(-2px); }
.ai-card .ll { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rp-red); font-weight: 600; }
.ai-card .tt { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; color: #fff; }
.ai-card .bb { font-size: 13px; color: rgba(255,255,255,0.6); line-height: 1.5; flex: 1; }
.ai-card .foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 12px;
  margin-top: auto;
  border-top: 1px solid rgba(255,255,255,0.08);
  font-family: var(--mono);
  font-size: 12px;
}
.ai-card .foot .term { color: rgba(255,255,255,0.5); }
.ai-card .foot .price { color: #fff; font-weight: 600; }

.pack-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 16px;
}
.pack-card {
  background: #1c1c1f;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 24px 28px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  align-items: center;
  transition: border-color 200ms;
}
.pack-card:hover { border-color: var(--rp-red); }
.pack-card.gold {
  background: var(--rp-red);
  border-color: var(--rp-red);
}
.pack-card .ll { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.55); margin-bottom: 4px; }
.pack-card.gold .ll { color: rgba(255,255,255,0.75); }
.pack-card .tt { font-size: 19px; font-weight: 700; color: #fff; letter-spacing: -0.01em; line-height: 1.2; }
.pack-card .dd { font-size: 13px; color: rgba(255,255,255,0.6); margin-top: 4px; }
.pack-card.gold .dd { color: rgba(255,255,255,0.85); }
.pack-card .pp { font-size: 28px; font-weight: 700; color: #fff; letter-spacing: -0.02em; line-height: 1; white-space: nowrap; text-align: right; }

@media (max-width: 1100px) { .ai-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) { .ai-grid, .pack-row { grid-template-columns: 1fr; } }

/* ====================== Roadmap timeline (vertical) ====================== */
.rm-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.rm-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 32px;
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 32px;
  align-items: center;
  transition: border-color 200ms, transform 200ms;
}
.rm-card:hover { border-color: var(--rp-red); transform: translateX(4px); }
.rm-card .step-circle {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--rp-red);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.rm-card .rm-meta .ll { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rp-red); font-weight: 600; margin-bottom: 6px; }
.rm-card .rm-meta .tt { font-size: 24px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.2; margin-bottom: 8px; }
.rm-card .rm-meta .dd { font-size: 14.5px; color: var(--ink-3); line-height: 1.55; }
.rm-card .rm-pr { text-align: right; font-family: var(--mono); font-size: 13px; color: var(--ink-2); white-space: nowrap; line-height: 1.5; }
.rm-card .rm-pr .pv { font-size: 18px; font-weight: 600; color: var(--ink); }

@media (max-width: 900px) {
  .rm-card { grid-template-columns: 56px 1fr; }
  .rm-card .rm-pr { grid-column: 1 / -1; text-align: left; padding-top: 12px; border-top: 1px solid var(--line); }
}

/* ====================== Эффект — economy cards + simulator ====================== */
.impact-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 48px;
}
.impact-card {
  background: #131315;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 32px;
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: 28px;
  align-items: start;
  transition: border-color 200ms;
}
.impact-card:hover { border-color: var(--rp-red); }
.impact-card .ll { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rp-red); font-weight: 600; margin-bottom: 10px; }
.impact-card .tt { font-size: 20px; font-weight: 700; color: #fff; letter-spacing: -0.015em; margin-bottom: 14px; line-height: 1.2; }
.impact-card ul {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.impact-card li {
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255,255,255,0.7);
  padding-left: 16px;
  position: relative;
}
.impact-card li::before {
  content: "·";
  position: absolute;
  left: 4px; top: 0;
  color: var(--rp-red);
  font-weight: 700;
}
.impact-card .pull {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  padding: 18px;
  text-align: center;
}
.impact-card .pull .pl { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin-bottom: 10px; }
.impact-card .pull .pv { font-size: 28px; font-weight: 700; color: var(--rp-red); letter-spacing: -0.02em; line-height: 1; }
.impact-card .pull .ps { font-size: 11px; color: rgba(255,255,255,0.55); margin-top: 8px; line-height: 1.4; }

@media (max-width: 1100px) {
  .impact-grid { grid-template-columns: 1fr; }
  .impact-card { grid-template-columns: 1fr; }
}

/* Simulator */
.simulator {
  background: linear-gradient(135deg, #131315 0%, #18181a 100%);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 22px;
  padding: 48px;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 56px;
  position: relative;
  overflow: hidden;
}
.simulator::before {
  content: "";
  position: absolute;
  right: -120px; top: -120px;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(227,6,19,0.12) 0%, transparent 70%);
  pointer-events: none;
}
.sim-head .ll { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rp-red); font-weight: 600; margin-bottom: 12px; }
.sim-head .tt { font-size: 28px; font-weight: 700; color: #fff; letter-spacing: -0.02em; line-height: 1.2; margin-bottom: 36px; }
.sim-controls { display: flex; flex-direction: column; gap: 28px; position: relative; z-index: 1; }
.sim-row { display: flex; flex-direction: column; gap: 8px; }
.sim-row .top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--sans);
}
.sim-row .top .lbl { font-size: 13px; color: rgba(255,255,255,0.75); }
.sim-row .top .val {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  background: rgba(227,6,19,0.15);
  padding: 4px 12px;
  border-radius: 6px;
  color: var(--rp-red);
}
.sim-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  background: rgba(255,255,255,0.1);
  border-radius: 999px;
  outline: none;
}
.sim-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px; height: 20px;
  background: var(--rp-red);
  border-radius: 50%;
  cursor: grab;
  border: 3px solid #131315;
  box-shadow: 0 0 0 2px var(--rp-red);
  transition: transform 100ms;
}
.sim-slider::-webkit-slider-thumb:hover { transform: scale(1.15); }
.sim-slider::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.2); }
.sim-slider::-moz-range-thumb {
  width: 20px; height: 20px;
  background: var(--rp-red);
  border-radius: 50%;
  cursor: grab;
  border: 3px solid #131315;
  box-shadow: 0 0 0 2px var(--rp-red);
}
.sim-row .range-l {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.4);
  margin-top: 4px;
}

.sim-output {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.sim-output .ll { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin-bottom: 16px; }
.sim-output .big-num {
  font-size: clamp(56px, 7vw, 96px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 0.95;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.sim-output .big-num em { color: var(--rp-red); font-style: normal; }
.sim-output .sub-num {
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 13px;
  color: rgba(255,255,255,0.65);
  letter-spacing: 0.04em;
}
.sim-output .payback {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.1);
  display: flex;
  align-items: baseline;
  gap: 14px;
}
.sim-output .payback .ll { margin: 0; }
.sim-output .payback .pv { font-size: 28px; font-weight: 700; color: var(--rp-red); letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; }

.sim-disclaimer {
  margin-top: 24px;
  padding: 14px 18px;
  background: rgba(255,255,255,0.04);
  border-left: 2px solid var(--rp-red);
  font-size: 12px;
  color: rgba(255,255,255,0.55);
  line-height: 1.5;
  border-radius: 0 6px 6px 0;
}

@media (max-width: 1100px) {
  .simulator { grid-template-columns: 1fr; gap: 36px; padding: 32px; }
}

/* ====================== Почему ASYSTEM — 6 cards ====================== */
.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.why-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: border-color 200ms, transform 200ms;
}
.why-card:hover { border-color: var(--rp-red); transform: translateY(-3px); }
.why-card .wn {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--rp-red);
  letter-spacing: 0.04em;
}
.why-card .wt { font-size: 22px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.15; }
.why-card .wb { font-size: 14.5px; color: var(--ink-3); line-height: 1.55; }

@media (max-width: 1100px) { .why-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) { .why-grid { grid-template-columns: 1fr; } }

/* ====================== Final CTA ====================== */
.cta-final {
  background: var(--rp-black);
  color: #fff;
  border-radius: 24px;
  padding: 80px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-final::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(600px 400px at 20% 0%, rgba(227,6,19,0.25), transparent 60%),
    radial-gradient(500px 400px at 80% 100%, rgba(227,6,19,0.18), transparent 60%);
  pointer-events: none;
}
.cta-final .inner { position: relative; z-index: 1; max-width: 880px; margin: 0 auto; }
.cta-final h2 { font-size: clamp(40px, 6vw, 80px); font-weight: 700; letter-spacing: -0.025em; line-height: 1.05; margin: 0 0 24px; color: #fff; }
.cta-final h2 em { color: var(--rp-red); font-style: normal; }
.cta-final p { font-size: 19px; color: rgba(255,255,255,0.75); line-height: 1.5; max-width: 640px; margin: 0 auto 48px; }
.cta-channels {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}
.cta-channels a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 28px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.2);
  font-size: 15px;
  transition: background 200ms, border-color 200ms, transform 200ms;
}
.cta-channels a:hover {
  background: rgba(255,255,255,0.06);
  border-color: var(--rp-red);
  transform: translateY(-2px);
}
.cta-channels a.primary {
  background: var(--rp-red);
  border-color: var(--rp-red);
}
.cta-channels a.primary:hover { background: var(--rp-red-2); }
.cta-channels .l {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
.cta-channels a.primary .l { color: rgba(255,255,255,0.78); }
.cta-channels .v { font-size: 16px; font-weight: 500; color: #fff; }

@media (max-width: 900px) {
  .cta-final { padding: 48px 24px; border-radius: 16px; }
  .cta-channels { flex-direction: column; align-items: stretch; }
}

/* status pill for module D */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,199,0,0.15);
  color: var(--rp-yellow);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
  font-weight: 600;
}
.status-pill::before {
  content: "";
  width: 6px; height: 6px;
  background: var(--rp-yellow);
  border-radius: 50%;
}

/* Reveal fallback: if JS doesn't run within 2s, show */
.no-js .reveal { opacity: 1; transform: none; }

/* ===================================================================
   EDITORIAL LAYER — long-form dossier structure
   Breaks the SaaS-landing template: cover, TOC, marquee, ledger,
   sticky-scroll narrative, horizontal scroll, marginalia, colophon
   =================================================================== */

/* ---- 12-col grid helpers ---- */
.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 32px;
}
.col-1-3  { grid-column: 1 / 4; }
.col-1-4  { grid-column: 1 / 5; }
.col-1-5  { grid-column: 1 / 6; }
.col-1-6  { grid-column: 1 / 7; }
.col-1-7  { grid-column: 1 / 8; }
.col-2-12 { grid-column: 2 / 13; }
.col-3-9  { grid-column: 3 / 10; }
.col-3-11 { grid-column: 3 / 12; }
.col-4-12 { grid-column: 4 / 13; }
.col-5-12 { grid-column: 5 / 13; }
.col-6-12 { grid-column: 6 / 13; }
.col-7-12 { grid-column: 7 / 13; }
.col-8-12 { grid-column: 8 / 13; }
.col-9-12 { grid-column: 9 / 13; }
.col-span-12 { grid-column: 1 / -1; }
@media (max-width: 900px) {
  .grid-12 { grid-template-columns: 1fr; gap: 24px; }
  [class*="col-"] { grid-column: 1 / -1 !important; }
}

/* ---- COVER ---- */
.cover {
  background: var(--rp-black);
  color: #fff;
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: 110px var(--pad-x) 0;
  position: relative;
  overflow: hidden;
}
.cover::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(800px 600px at 90% 10%, rgba(227,6,19,0.25), transparent 60%),
    radial-gradient(600px 600px at 0% 100%, rgba(227,6,19,0.12), transparent 60%);
  pointer-events: none;
}
.cover .wrap { position: relative; z-index: 1; max-width: var(--container); margin: 0 auto; width: 100%; }

.cover-meta {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.cover-meta .item .l {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  margin-bottom: 6px;
}
.cover-meta .item .v {
  font-family: var(--mono);
  font-size: 13px;
  color: #fff;
  font-weight: 500;
  letter-spacing: 0.04em;
}
.cover-meta .item .v.red { color: var(--rp-red); }
@media (max-width: 700px) { .cover-meta { grid-template-columns: 1fr; gap: 16px; padding-bottom: 24px; } }

.cover-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 80px 0;
}
.cover-no {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  color: var(--rp-red);
  margin-bottom: 32px;
}
.cover-title {
  font-size: clamp(56px, 11vw, 200px);
  font-weight: 800;
  line-height: 0.88;
  letter-spacing: -0.045em;
  margin: 0;
  text-wrap: balance;
}
.cover-title .alt {
  display: block;
  color: rgba(255,255,255,0.42);
  font-weight: 500;
}
.cover-title em {
  font-style: normal;
  color: var(--rp-red);
  /* inline-block to allow indent */
}
.cover-thesis {
  margin-top: 80px;
  max-width: 720px;
  margin-left: auto;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.55;
  color: rgba(255,255,255,0.78);
  position: relative;
  padding-left: 32px;
}
.cover-thesis::before {
  content: "";
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 2px;
  background: var(--rp-red);
}
.cover-thesis .author {
  display: block;
  margin-top: 18px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
}

.cover-foot {
  padding: 32px 0;
  border-top: 1px solid rgba(255,255,255,0.12);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
.cover-foot .scroll {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.cover-foot .scroll::after {
  content: "↓";
  display: inline-block;
  animation: bob 1.6s ease-in-out infinite;
}

/* ---- MARQUEE TICKER ---- */
.marquee {
  background: var(--rp-red);
  color: #fff;
  padding: 16px 0;
  overflow: hidden;
  position: relative;
  border-top: 1px solid rgba(0,0,0,0.1);
  border-bottom: 1px solid rgba(0,0,0,0.1);
}
.marquee-track {
  display: flex;
  gap: 80px;
  white-space: nowrap;
  animation: marquee 50s linear infinite;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
}
.marquee-track span {
  display: inline-flex;
  align-items: center;
  gap: 16px;
}
.marquee-track span::after {
  content: "✦";
  margin-left: 80px;
  color: rgba(255,255,255,0.4);
}
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---- TABLE OF CONTENTS ---- */
.toc {
  padding: 120px var(--pad-x);
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.toc .wrap { max-width: var(--container); margin: 0 auto; }
.toc-head {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 80px;
  padding-bottom: 48px;
  margin-bottom: 32px;
  border-bottom: 1px solid var(--line);
}
.toc-head .l {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rp-red);
  font-weight: 600;
}
.toc-head .t {
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0;
  text-wrap: balance;
}
.toc-list {
  display: flex;
  flex-direction: column;
}
.toc-row {
  display: grid;
  grid-template-columns: 56px 1fr 240px 80px;
  gap: 24px;
  align-items: baseline;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
  transition: padding-left 200ms, color 200ms, background 200ms;
  position: relative;
}
.toc-row:hover {
  padding-left: 16px;
  background: linear-gradient(90deg, rgba(227,6,19,0.04), transparent 30%);
}
.toc-row .tn {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--rp-red);
  font-weight: 600;
  letter-spacing: 0.04em;
}
.toc-row .tt {
  font-size: clamp(22px, 2.2vw, 32px);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: var(--ink);
}
.toc-row:hover .tt { color: var(--rp-red); }
.toc-row .ts {
  font-size: 14px;
  color: var(--ink-3);
  line-height: 1.4;
}
.toc-row .tp {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink-3);
  text-align: right;
  letter-spacing: 0.06em;
  position: relative;
}
.toc-row .tp::before {
  content: "→";
  position: absolute;
  left: -22px;
  color: var(--rp-red);
  opacity: 0;
  transition: opacity 200ms, transform 200ms;
}
.toc-row:hover .tp::before { opacity: 1; transform: translateX(4px); }
@media (max-width: 1100px) {
  .toc-head { grid-template-columns: 1fr; gap: 24px; }
  .toc-row { grid-template-columns: 40px 1fr; }
  .toc-row .ts, .toc-row .tp { grid-column: 2; }
  .toc-row .tp { text-align: left; padding-top: 6px; font-size: 11px; }
}

/* ---- CHAPTER OPENING ---- */
.chap-open {
  padding: 200px var(--pad-x) 80px;
  position: relative;
}
.chap-open .wrap { max-width: var(--container); margin: 0 auto; }
.chap-open .chap-no {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.24em;
  color: var(--rp-red);
  font-weight: 600;
  margin-bottom: 32px;
}
.chap-open .chap-no::before {
  content: "—— ";
  letter-spacing: 0;
}
.chap-open h2 {
  font-size: clamp(48px, 7vw, 120px);
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.04em;
  margin: 0;
  text-wrap: balance;
}
.chap-open h2 em { font-style: normal; color: var(--rp-red); }
.chap-open .chap-intro {
  margin-top: 40px;
  max-width: 720px;
  font-size: clamp(18px, 1.4vw, 22px);
  line-height: 1.55;
  color: var(--ink-2);
}
.chap-open.dark { background: var(--rp-black); color: #fff; }
.chap-open.dark h2 { color: #fff; }
.chap-open.dark .chap-intro { color: rgba(255,255,255,0.78); }

/* small drop cap on chapter intros */
.dropcap::first-letter {
  font-size: 4.2em;
  font-weight: 700;
  line-height: 0.9;
  float: left;
  margin: 0.04em 0.14em 0 -0.04em;
  color: var(--rp-red);
}

/* ---- STICKY-SCROLL NARRATIVE (FACTS) ---- */
.sticky-narrative {
  padding: 80px var(--pad-x) 120px;
  background: var(--bg);
}
.sticky-narrative .wrap { max-width: var(--container); margin: 0 auto; }
.sn-grid {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 80px;
  align-items: start;
}
.sn-left {
  position: sticky;
  top: 100px;
  align-self: start;
}
.sn-left .ll {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rp-red);
  font-weight: 600;
  margin-bottom: 18px;
}
.sn-left .tt {
  font-size: clamp(36px, 4vw, 56px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin-bottom: 28px;
}
.sn-left .dd {
  font-size: 15px;
  color: var(--ink-3);
  line-height: 1.6;
}
.sn-right { display: flex; flex-direction: column; gap: 32px; }
.fact-block {
  padding: 48px 0;
  border-bottom: 1px solid var(--line);
}
.fact-block:last-child { border-bottom: none; }
.fact-block .fl {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rp-red);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}
.fact-block .fl .num {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.fact-block .ft {
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 18px;
}
.fact-block .fb {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 640px;
}
.fact-block .fb strong { color: var(--ink); font-weight: 600; }
.fact-block .footnote {
  margin-top: 18px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--ink-3);
  padding-top: 14px;
  border-top: 1px dotted var(--line-2);
  max-width: 640px;
}
@media (max-width: 1100px) {
  .sn-grid { grid-template-columns: 1fr; gap: 32px; }
  .sn-left { position: static; }
}

/* ---- GROUP SPREAD ---- */
.group-spread {
  padding: 120px var(--pad-x);
  background: var(--bg-2);
}
.group-spread .wrap { max-width: var(--container); margin: 0 auto; }
.gs-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 32px;
}
.gs-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 28px;
  transition: border-color 200ms, transform 200ms;
}
.gs-card:hover { border-color: var(--rp-red); transform: translateY(-3px); }
.gs-card .role {
  display: inline-flex;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: var(--rp-red);
  color: #fff;
  padding: 5px 12px;
  border-radius: 999px;
  font-weight: 600;
  margin-bottom: 18px;
}
.gs-card .name {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin-bottom: 6px;
}
.gs-card .addr {
  font-size: 12px;
  color: var(--ink-3);
  margin-bottom: 14px;
  font-family: var(--mono);
  letter-spacing: 0.04em;
}
.gs-card .desc {
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.55;
  margin-bottom: 14px;
}
.gs-card .source {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rp-red);
  padding-top: 12px;
  border-top: 1px dotted var(--line-2);
}

.gs-flow {
  background: var(--rp-black);
  color: #fff;
  border-radius: 18px;
  padding: 48px;
  position: relative;
  overflow: hidden;
  grid-column: 1 / -1;
  margin-top: 48px;
}
.gs-flow::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(800px 600px at 0% 100%, rgba(227,6,19,0.18), transparent 60%);
  pointer-events: none;
}
.gs-flow .inner { position: relative; z-index: 1; }
.gs-flow .ftitle {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin-bottom: 40px;
}

@media (max-width: 1100px) {
  .gs-flow { padding: 24px; }
}

/* ---- LEDGER (11 TENSIONS) ---- */
.ledger-section {
  padding: 120px var(--pad-x);
  background: var(--rp-black);
  color: #fff;
}
.ledger-section .wrap { max-width: var(--container); margin: 0 auto; }
.ledger-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 64px;
  align-items: start;
}
.ledger-list {
  border-top: 1px solid rgba(255,255,255,0.1);
}
.ledger-row {
  display: grid;
  grid-template-columns: 50px 1fr 24px;
  gap: 20px;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  cursor: pointer;
  transition: padding-left 200ms, color 200ms;
}
.ledger-row:hover, .ledger-row.active {
  padding-left: 12px;
  background: linear-gradient(90deg, rgba(227,6,19,0.1), transparent 50%);
}
.ledger-row .lr-n {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--rp-red);
  font-weight: 700;
  letter-spacing: 0.04em;
}
.ledger-row .lr-t {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: #fff;
}
.ledger-row .lr-b {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  padding: 3px 7px;
  border-radius: 3px;
  font-weight: 700;
  margin-top: 4px;
  display: inline-block;
}
.ledger-row .lr-b.pub { background: rgba(227,6,19,0.2); color: var(--rp-red); }
.ledger-row .lr-b.hyp { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.6); }
.ledger-row .lr-arr {
  color: rgba(255,255,255,0.3);
  font-family: var(--mono);
  font-size: 14px;
  transition: color 200ms, transform 200ms;
}
.ledger-row:hover .lr-arr, .ledger-row.active .lr-arr { color: var(--rp-red); transform: translateX(4px); }

.ledger-detail {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px;
  padding: 40px;
  position: sticky;
  top: 100px;
  min-height: 400px;
}
.ledger-detail .ld-no {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--rp-red);
  font-weight: 600;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.ledger-detail .ld-no .num {
  font-size: 56px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--rp-red);
}
.ledger-detail .ld-meta {
  display: flex; flex-direction: column; gap: 4px;
}
.ledger-detail .ld-meta .badges { display: flex; gap: 6px; flex-wrap: wrap; }
.ledger-detail .ld-meta .b {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  padding: 3px 7px;
  border-radius: 3px;
  font-weight: 700;
}
.ledger-detail .ld-meta .b.pub { background: rgba(227,6,19,0.2); color: var(--rp-red); }
.ledger-detail .ld-meta .b.hyp { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.6); }
.ledger-detail .ld-t {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: #fff;
  margin-bottom: 20px;
}
.ledger-detail .ld-b {
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255,255,255,0.72);
  margin-bottom: 28px;
}
.ledger-detail .ld-fix {
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.1);
}
.ledger-detail .ld-fix .ll {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  margin-bottom: 10px;
}
.ledger-detail .ld-fix .vv {
  font-size: 22px;
  font-weight: 700;
  color: var(--rp-red);
  letter-spacing: -0.015em;
  line-height: 1.2;
}
@media (max-width: 1100px) {
  .ledger-grid { grid-template-columns: 1fr; }
  .ledger-detail { position: static; }
}

/* ---- MANIFESTO ---- */
.manifesto {
  padding: 160px var(--pad-x);
  background: var(--bg);
}
.manifesto .wrap { max-width: var(--container); margin: 0 auto; }
.manifesto-pillar {
  padding: 80px 0;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: 160px 1fr 1fr;
  gap: 64px;
  align-items: start;
}
.manifesto-pillar:last-child { border-bottom: 1px solid var(--line); }
.manifesto-pillar .roman {
  font-size: clamp(80px, 10vw, 160px);
  font-weight: 800;
  letter-spacing: -0.06em;
  line-height: 0.85;
  color: var(--rp-red);
  font-family: var(--sans);
}
.manifesto-pillar .ll {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rp-red);
  margin-bottom: 14px;
  font-weight: 600;
}
.manifesto-pillar .tt {
  font-size: clamp(32px, 3.5vw, 56px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin-bottom: 24px;
}
.manifesto-pillar .bb {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-2);
  padding-top: 32px;
  border-left: 2px solid var(--rp-red);
  padding-left: 24px;
}
@media (max-width: 1100px) {
  .manifesto-pillar { grid-template-columns: 1fr; gap: 24px; }
  .manifesto-pillar .roman { font-size: 80px; }
  .manifesto-pillar .bb { padding-top: 0; }
}

/* ---- HORIZONTAL MODULE SCROLL ---- */
.modules-h {
  background: var(--rp-black);
  color: #fff;
  padding: 120px 0 80px;
  position: relative;
}
.modules-h .head {
  padding: 0 var(--pad-x);
  max-width: var(--container);
  margin: 0 auto 60px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: end;
}
.modules-h .head .ll {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rp-red);
  margin-bottom: 18px;
  font-weight: 600;
}
.modules-h .head h2 {
  font-size: clamp(40px, 5vw, 72px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.0;
  margin: 0;
  color: #fff;
}
.modules-h .head h2 em { font-style: normal; color: var(--rp-red); }
.modules-h .head p {
  font-size: 17px;
  color: rgba(255,255,255,0.7);
  line-height: 1.55;
  margin: 0;
}
.h-scroll-bar {
  padding: 0 var(--pad-x);
  max-width: var(--container);
  margin: 0 auto 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}
.h-scroll-bar .progress {
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,0.1);
  position: relative;
}
.h-scroll-bar .progress span {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 25%;
  background: var(--rp-red);
  transition: left 200ms ease, width 200ms ease;
}
.h-scroll-bar .controls { display: flex; gap: 8px; }
.h-scroll-bar .controls button {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.2);
  background: transparent;
  color: #fff;
  font-size: 16px;
  transition: background 150ms, border-color 150ms, transform 150ms;
}
.h-scroll-bar .controls button:hover { background: var(--rp-red); border-color: var(--rp-red); transform: translateY(-2px); }
.h-scroll-bar .pages {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: rgba(255,255,255,0.5);
}
.h-scroll-bar .pages .cur { color: var(--rp-red); }

.h-scroll-track {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding: 0 var(--pad-x) 32px;
}
.h-scroll-track::-webkit-scrollbar { display: none; }
.h-book {
  flex: 0 0 calc(min(1100px, 80vw));
  scroll-snap-align: start;
  background: #131315;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px;
  padding: 48px;
  display: flex;
  flex-direction: column;
}
.h-book.feat { background: linear-gradient(135deg, #1c1c1f 0%, #131315 100%); border-color: rgba(227,6,19,0.3); }
.h-book .b-head {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 28px;
  align-items: start;
  padding-bottom: 32px;
  margin-bottom: 32px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.h-book .b-letter {
  font-size: 96px;
  font-weight: 800;
  color: var(--rp-red);
  letter-spacing: -0.04em;
  line-height: 0.85;
}
.h-book .b-meta .ll { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.45); margin-bottom: 8px; font-weight: 600; }
.h-book .b-meta .tt { font-size: clamp(28px, 3vw, 40px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; margin-bottom: 14px; color: #fff; }
.h-book .b-meta .dd { font-size: 16px; line-height: 1.6; color: rgba(255,255,255,0.72); max-width: 720px; }
.h-book .b-price .ll { font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.45); margin-bottom: 6px; font-weight: 600; text-align: right; }
.h-book .b-price .vv { font-size: 32px; font-weight: 700; color: var(--rp-red); letter-spacing: -0.02em; line-height: 1; white-space: nowrap; text-align: right; }
.h-book .b-price .ss { font-family: var(--mono); font-size: 11px; color: rgba(255,255,255,0.5); margin-top: 6px; text-align: right; }

.h-subs { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.h-sub {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 24px;
  transition: border-color 200ms, transform 200ms;
}
.h-sub:hover { border-color: var(--rp-red); transform: translateY(-2px); }
.h-sub .ll { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rp-red); font-weight: 600; margin-bottom: 8px; }
.h-sub .tt { font-size: 18px; font-weight: 600; color: #fff; letter-spacing: -0.01em; line-height: 1.2; margin-bottom: 12px; }
.h-sub ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.h-sub li {
  font-size: 13px;
  color: rgba(255,255,255,0.65);
  line-height: 1.5;
  padding-left: 14px;
  position: relative;
}
.h-sub li::before {
  content: "";
  position: absolute;
  left: 0; top: 8px;
  width: 5px; height: 5px;
  background: var(--rp-red);
  border-radius: 50%;
}
.h-sub .ft {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 12px;
}
.h-sub .ft .term { color: rgba(255,255,255,0.5); }
.h-sub .ft .price { color: var(--rp-red); font-weight: 600; }

.h-book .ai-grid { gap: 12px; }
.h-book .pack-row { margin-top: 14px; }

@media (max-width: 700px) {
  .h-book { padding: 28px; flex: 0 0 90vw; }
  .h-book .b-head { grid-template-columns: 1fr; gap: 16px; }
  .h-subs { grid-template-columns: 1fr; }
}

/* ---- HORIZONTAL TIMELINE ---- */
.h-timeline {
  padding: 120px var(--pad-x);
  background: var(--bg);
  position: relative;
}
.h-timeline .wrap { max-width: var(--container); margin: 0 auto; }
.htl-rail {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  margin-top: 64px;
  position: relative;
}
.htl-rail::before {
  content: "";
  position: absolute;
  left: 32px; right: 32px; top: 24px;
  height: 2px;
  background: var(--line-2);
}
.htl-rail::after {
  content: "";
  position: absolute;
  left: 32px; top: 24px;
  width: 20%;
  height: 2px;
  background: var(--rp-red);
}
.htl-step {
  position: relative;
  padding: 64px 16px 0 0;
}
.htl-step .htl-dot {
  position: absolute;
  left: 16px; top: 14px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--line-2);
  z-index: 1;
}
.htl-step.now .htl-dot {
  background: var(--rp-red);
  border-color: var(--rp-red);
  box-shadow: 0 0 0 6px rgba(227,6,19,0.15);
}
.htl-step .month {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rp-red);
  font-weight: 600;
  margin-bottom: 10px;
}
.htl-step .nm {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin-bottom: 10px;
}
.htl-step .ds { font-size: 13.5px; color: var(--ink-3); line-height: 1.55; margin-bottom: 14px; }
.htl-step .pr {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink);
  font-weight: 600;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

@media (max-width: 1100px) {
  .htl-rail { grid-template-columns: 1fr; gap: 24px; }
  .htl-rail::before, .htl-rail::after { display: none; }
  .htl-step { padding: 16px 0 16px 56px; }
  .htl-step .htl-dot { left: 0; top: 18px; }
}

/* ---- NUMBERS SECTION (impact + simulator) ---- */
.numbers {
  padding: 120px var(--pad-x);
  background: var(--rp-black);
  color: #fff;
}
.numbers .wrap { max-width: var(--container); margin: 0 auto; }
.numbers .marginalia-grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 64px;
  align-items: start;
}
.numbers .marg {
  position: sticky;
  top: 100px;
}
.numbers .marg .ll {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rp-red);
  font-weight: 600;
  margin-bottom: 14px;
}
.numbers .marg .tt {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin-bottom: 18px;
}
.numbers .marg .dd { font-size: 14px; color: rgba(255,255,255,0.6); line-height: 1.6; }
@media (max-width: 1100px) {
  .numbers .marginalia-grid { grid-template-columns: 1fr; }
  .numbers .marg { position: static; }
}

/* ---- SIGNATURE (why ASYSTEM) ---- */
.signature {
  padding: 120px var(--pad-x);
  background: var(--bg);
}
.signature .wrap { max-width: var(--container); margin: 0 auto; }
.sig-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}
.sig-statement {
  font-size: clamp(28px, 3.2vw, 44px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  text-wrap: balance;
}
.sig-statement em { font-style: normal; color: var(--rp-red); }
.sig-statement .small {
  display: block;
  margin-top: 24px;
  font-size: 0.4em;
  font-weight: 400;
  color: var(--ink-3);
  letter-spacing: 0;
  line-height: 1.5;
}
.sig-credentials {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line);
}
.sig-cred {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 24px;
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
  transition: padding-left 200ms, background 200ms;
}
.sig-cred:hover { padding-left: 12px; background: linear-gradient(90deg, rgba(227,6,19,0.03), transparent 30%); }
.sig-cred .cn {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--rp-red);
  font-weight: 700;
  letter-spacing: 0.04em;
  padding-top: 4px;
}
.sig-cred .ct { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; margin-bottom: 6px; }
.sig-cred .cb { font-size: 14.5px; color: var(--ink-3); line-height: 1.55; }
@media (max-width: 900px) { .sig-grid { grid-template-columns: 1fr; gap: 32px; } }

/* ---- COLOPHON (end-page index + CTA) ---- */
.colophon {
  background: var(--rp-black);
  color: #fff;
  padding: 120px var(--pad-x) 48px;
  position: relative;
}
.colophon::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(800px 600px at 50% 0%, rgba(227,6,19,0.18), transparent 60%);
  pointer-events: none;
}
.colophon .wrap { max-width: var(--container); margin: 0 auto; position: relative; z-index: 1; }
.col-top {
  text-align: center;
  margin-bottom: 80px;
}
.col-top .ll {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin-bottom: 24px;
}
.col-top h2 {
  font-size: clamp(48px, 7vw, 100px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 0.95;
  margin: 0 0 32px;
}
.col-top h2 em { font-style: normal; color: var(--rp-red); }
.col-top p {
  font-size: 19px;
  color: rgba(255,255,255,0.75);
  line-height: 1.55;
  max-width: 640px;
  margin: 0 auto 48px;
}

.col-cta-row {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}
.col-cta-row a {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 18px 28px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.2);
  font-size: 15px;
  transition: background 200ms, border-color 200ms, transform 200ms;
}
.col-cta-row a:hover { background: rgba(255,255,255,0.06); border-color: var(--rp-red); transform: translateY(-2px); }
.col-cta-row a.primary { background: var(--rp-red); border-color: var(--rp-red); }
.col-cta-row a.primary:hover { background: var(--rp-red-2); }
.col-cta-row .l { font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.55); }
.col-cta-row a.primary .l { color: rgba(255,255,255,0.78); }
.col-cta-row .v { font-size: 15px; font-weight: 500; color: #fff; }

.col-bottom {
  margin-top: 100px;
  padding-top: 48px;
  border-top: 1px solid rgba(255,255,255,0.1);
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 64px;
}
.col-bottom .ll { font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.45); margin-bottom: 18px; font-weight: 600; }
.col-bottom .bb { font-size: 14px; line-height: 1.6; color: rgba(255,255,255,0.7); }
.col-bottom .index-list { display: flex; flex-direction: column; gap: 6px; }
.col-bottom .index-list a {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 12px;
  color: rgba(255,255,255,0.78);
  font-size: 14px;
  padding: 4px 0;
}
.col-bottom .index-list a .nn { color: var(--rp-red); font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: 0.04em; }
.col-bottom .index-list a:hover { color: var(--rp-red); }

.col-foot {
  margin-top: 64px;
  padding-top: 32px;
  border-top: 1px solid rgba(255,255,255,0.1);
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
}
@media (max-width: 900px) {
  .col-bottom { grid-template-columns: 1fr; gap: 32px; }
  .col-foot { flex-direction: column; gap: 12px; }
}

/* ---- SECTION PROGRESS (right rail) ---- */
.progress-rail {
  position: fixed;
  right: 32px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 12px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms ease;
}
.progress-rail.show { opacity: 1; pointer-events: auto; }
.progress-rail a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--ink-3);
  padding: 4px 0;
}
.progress-rail a .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--line-2);
  transition: background 200ms, transform 200ms;
}
.progress-rail a .lbl {
  opacity: 0;
  transition: opacity 200ms;
  pointer-events: none;
}
.progress-rail a:hover .lbl { opacity: 1; }
.progress-rail a:hover .dot, .progress-rail a.active .dot {
  background: var(--rp-red);
  transform: scale(1.4);
}
.progress-rail a.active .lbl { opacity: 1; color: var(--rp-red); }
@media (max-width: 1200px) { .progress-rail { display: none; } }

/* ---- PULL QUOTE breaks ---- */
.pullquote-break {
  padding: 100px var(--pad-x);
  background: var(--bg-2);
  text-align: center;
}
.pullquote-break .pq {
  max-width: 900px;
  margin: 0 auto;
  font-size: clamp(28px, 3.5vw, 52px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--ink);
  text-wrap: balance;
  position: relative;
}
.pullquote-break .pq em { font-style: normal; color: var(--rp-red); }
.pullquote-break .pq::before, .pullquote-break .pq::after {
  content: "—";
  display: block;
  width: 56px;
  height: 2px;
  background: var(--rp-red);
  margin: 0 auto 32px;
}
.pullquote-break .pq::after { margin: 32px auto 0; }