:root {
  --navy-990: #020713;
  --navy-970: #050f22;
  --navy-940: #0a1a35;
  --navy-900: #0e2444;
  --navy-820: #143358;
  --ink: #0f1a31;
  --ink-2: #1c2742;
  --muted: #5b6a83;
  --line: #e3eaf2;
  --soft: #f4f7fb;
  --soft-2: #eef2f8;
  --gold: #e6aa2f;
  --gold-2: #ffc95b;
  --gold-3: #b97916;
  --gold-soft: #fff2d2;
  --red: #ff463d;
  --green: #34b871;
  --shell: 1280px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Manrope, "Inter", "Segoe UI", Arial, sans-serif;
  color: var(--ink);
  background: #fff;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
.shell { width: min(var(--shell), calc(100% - 80px)); margin: 0 auto; }

/* ============ HEADER ============ */
.site-header {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 20;
  color: #fff;
}
.nav {
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}
.brand { display: inline-flex; align-items: center; gap: 12px; font-weight: 900; }
.brand-logo { width: 42px; height: 42px; object-fit: contain; }
.brand-copy { display: grid; line-height: 1; letter-spacing: .01em; }
.brand-copy b { color: #ffd36d; font-size: 17px; }
.brand-copy small { color: #c6d4e7; font-size: 10px; margin-top: 5px; letter-spacing: .12em; }
.nav-links { display: flex; gap: 30px; font-size: 13px; font-weight: 600; color: rgba(232,240,252,.85); }
.nav-links a:hover { color: #fff; }
.brand-mark.small {
  width: 28px; height: 28px;
  display: inline-grid; place-items: center;
  border: 2px solid rgba(255,201,91,.72);
  border-left-width: 5px;
  border-radius: 2px 14px 14px 2px;
  color: var(--gold-2);
  font-family: Georgia, serif;
  font-size: 18px;
  margin-right: 6px;
  vertical-align: middle;
}

/* ============ BUTTONS ============ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  min-height: 46px;
  padding: 13px 30px;
  border-radius: 10px;
  border: 1px solid rgba(255,209,112,.55);
  background: linear-gradient(180deg, #ffd97a 0%, #f0b13c 55%, #d18d1a 100%);
  color: #1a1f2e;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: .01em;
  box-shadow:
    0 10px 24px rgba(230,170,47,.38),
    inset 0 1px 0 rgba(255,255,255,.55);
  transition: transform .15s ease, box-shadow .15s ease;
  cursor: pointer;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 14px 30px rgba(230,170,47,.5), inset 0 1px 0 rgba(255,255,255,.6); }
.btn-small { min-height: 40px; padding: 10px 22px; font-size: 12.5px; border-radius: 8px; }
.btn-cta .arr { display: inline-block; transform: translateY(-1px); font-weight: 900; }
.btn-cta.lg { min-height: 56px; padding: 17px 36px; font-size: 15px; border-radius: 12px; }

/* ============ HERO ============ */
.hero {
  position: relative;
  padding: 110px 0 130px;
  overflow: hidden;
  color: #fff;
  isolation: isolate;
}
.hero-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(1100px 600px at 18% -10%, rgba(58,128,220,.28), transparent 60%),
    radial-gradient(800px 500px at 85% 18%, rgba(237,173,44,.18), transparent 60%),
    radial-gradient(900px 700px at 65% 90%, rgba(20,60,120,.45), transparent 65%),
    linear-gradient(180deg, #04122a 0%, #061a36 55%, #04132c 100%);
  z-index: -2;
}
.hero-bg::after {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse at center, #000 50%, transparent 90%);
  opacity: .55;
}
.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 540px) minmax(0, 1fr);
  gap: 44px;
  align-items: start;
  padding-top: 8px;
}
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px;
  border: 1px solid rgba(255,201,91,.35);
  border-radius: 999px;
  background: rgba(255,201,91,.08);
  color: var(--gold-2);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  margin-bottom: 22px;
}
.pill i { width: 6px; height: 6px; border-radius: 50%; background: var(--gold-2); box-shadow: 0 0 10px var(--gold-2); }
.hero h1 {
  margin: 0 0 20px;
  font-size: 46px;
  line-height: 1.06;
  letter-spacing: -.022em;
  font-weight: 800;
  color: #fff;
}
.hero h1 em { color: var(--gold-2); font-style: normal; }
.hero-lead {
  max-width: 500px;
  margin: 0 0 32px;
  color: #c8d3e6;
  font-size: 15.5px;
  line-height: 1.6;
}
.hero-benefits {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  max-width: 520px;
}
.hero-benefits > div {
  display: grid; justify-items: center;
  padding: 14px 6px 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  text-align: center;
}
.hero-benefits b { display: block; font-size: 12.5px; color: #fff; margin-top: 9px; font-weight: 700; line-height: 1.15; }
.hero-benefits small { display: block; color: #99a8c3; font-size: 10.5px; margin-top: 3px; line-height: 1.2; }


.bi {
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 2px solid var(--gold);
  display: grid; place-items: center;
  position: relative;
  color: var(--gold-2);
  background: radial-gradient(circle at 30% 30%, rgba(255,201,91,.18), transparent 70%);
}
.bi::before, .bi::after { content: ""; position: absolute; display: block; background: var(--gold-2); }
.bi.clock::before { width: 3px; height: 11px; left: 19px; top: 9px; transform-origin: bottom; transform: rotate(38deg); border-radius: 2px; }
.bi.clock::after { width: 11px; height: 3px; left: 19px; top: 20px; border-radius: 2px; }
.bi.gift::before { width: 26px; height: 16px; left: 6px; top: 13px; background: transparent; border: 2px solid var(--gold-2); border-radius: 2px; }
.bi.gift::after { width: 3px; height: 26px; left: 19px; top: 6px; border-radius: 2px; box-shadow: -1px -4px 0 var(--gold-2); }
.bi.bulb::before { width: 14px; height: 18px; left: 12px; top: 6px; background: transparent; border: 2px solid var(--gold-2); border-radius: 50% 50% 6px 6px; }
.bi.bulb::after { width: 10px; height: 3px; left: 14px; bottom: 6px; border-radius: 2px; box-shadow: 0 4px 0 var(--gold-2); }
.bi.shield::before { width: 18px; height: 22px; left: 10px; top: 6px; background: transparent; border: 2px solid var(--gold-2); border-radius: 4px 4px 12px 12px; }
.bi.shield::after { width: 7px; height: 4px; left: 14px; top: 16px; background: transparent; border-bottom: 2px solid var(--gold-2); border-left: 2px solid var(--gold-2); transform: rotate(-45deg); }

/* HERO STAGE — unified glass wrapper around dashboard + side panel */
.hero-stage { position: relative; }
.hero-stage-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 230px;
  gap: 16px;
  padding: 18px;
  border-radius: 22px;
  background: linear-gradient(160deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,.02) 50%, rgba(255,255,255,.05) 100%);
  border: 1px solid rgba(255,201,91,.18);
  box-shadow:
    0 40px 100px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,255,255,.03) inset,
    0 0 60px rgba(230,170,47,.08) inset;
  backdrop-filter: blur(8px);
}
.hero-stage-inner::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 22px;
  padding: 1px;
  background: linear-gradient(135deg, rgba(255,201,91,.45), rgba(255,201,91,0) 35%, rgba(255,201,91,0) 65%, rgba(255,201,91,.35));
  -webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
.stage-main, .stage-side {
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 18px 42px rgba(0,0,0,.55);
  background: #050f22;
}
.stage-main img, .stage-side img { width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; }
.stage-main { aspect-ratio: 16 / 11; background: #04122a; }
.stage-side { aspect-ratio: 230 / 420; height: 100%; background: #04122a; }

.stage-glow {
  position: absolute;
  inset: -60px -60px -60px -60px;
  background: radial-gradient(60% 60% at 50% 50%, rgba(230,170,47,.18), transparent 70%);
  z-index: -1;
  filter: blur(20px);
}

/* HERO FLOATING CTA — premium card on dark/white boundary */
.hero-cta-floating {
  position: relative;
  z-index: 4;
  width: min(900px, calc(100% - 80px));
  margin: 40px auto -70px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 24px;
  background: #fff;
  color: var(--ink);
  padding: 24px 32px;
  border-radius: 20px;
  box-shadow:
    0 30px 80px rgba(8,20,45,.45),
    0 6px 14px rgba(8,20,45,.15),
    inset 0 1px 0 rgba(255,255,255,.9);
}
.hero-cta-floating h2 {
  margin: 0;
  font-size: 21px;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--ink);
  font-weight: 800;
}
.hero-cta-floating h2 span { color: var(--muted); font-weight: 600; }


/* ============ SECTIONS ============ */
.section { padding: 100px 0; position: relative; }
.section-light { background: linear-gradient(180deg, #fff 0%, #f7f9fd 100%); }
.section-dark {
  color: #fff;
  background:
    radial-gradient(900px 600px at 18% 10%, rgba(58,128,220,.22), transparent 60%),
    radial-gradient(700px 500px at 85% 80%, rgba(237,173,44,.10), transparent 65%),
    linear-gradient(180deg, #050f24 0%, #061a36 55%, #04132c 100%);
  position: relative;
  overflow: hidden;
}
.section-dark::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse at center, #000 40%, transparent 90%);
  opacity: .5;
  pointer-events: none;
}
.section-title { max-width: 900px; margin: 0 auto 50px; text-align: left; }
.section-title.centered, .centered { text-align: center; }
.kicker {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(230,170,47,.12);
  color: var(--gold-3);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.kicker.centered { display: inline-block; margin: 0 auto 14px; }
.section-dark .kicker { background: rgba(255,201,91,.12); color: var(--gold-2); }

h2.centered-heading, .section-title h2 {
  margin: 0;
  font-size: 38px;
  line-height: 1.14;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--ink);
  max-width: 900px;
}
h2.centered-heading.invert { color: #fff; }
.section-title.centered, .centered-heading { margin-left: auto; margin-right: auto; }
.centered-heading em, .section-title h2 em { color: var(--gold-3); font-style: normal; }
.section-dark .centered-heading em { color: var(--gold-2); }
.section-title p { margin: 18px auto 0; max-width: 760px; color: var(--muted); font-size: 16px; line-height: 1.6; }
.dark-subtitle { text-align: center; color: #aebfd6; font-size: 15px; margin: 16px auto 40px; max-width: 760px; }
.dark-note { text-align: center; color: #99a8c3; font-size: 14px; margin: 38px auto 0; max-width: 820px; }

/* ============ PROBLEM GRID ============ */
.problem-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 22px;
}
.problem-grid article, .monthly-grid article {
  background: #fff;
  border: 1px solid #e8edf4;
  border-radius: 16px;
  padding: 28px 26px;
  display: grid;
  gap: 14px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  box-shadow: 0 4px 18px rgba(16,32,57,.04);
}
.problem-grid article:hover, .monthly-grid article:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 38px rgba(16,32,57,.10);
  border-color: rgba(230,170,47,.4);
}
.pc-icon {
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(230,170,47,.16), rgba(230,170,47,.04));
  color: var(--gold-3);
}
.pc-icon svg { width: 26px; height: 26px; }
.problem-grid h3, .monthly-grid h3 {
  margin: 0;
  color: var(--ink);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: -.005em;
}
.problem-grid p, .monthly-grid p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.55; }

/* ============ CORE / CHIP ============ */
.core { padding: 110px 0; }
.core-layout {
  display: grid;
  grid-template-columns: 1fr 380px 1fr;
  gap: 32px;
  align-items: center;
  margin-top: 50px;
}
.core-col { display: grid; gap: 16px; }
.core-col article {
  padding: 22px 22px;
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid rgba(255,201,91,.14);
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 16px;
  align-items: start;
  position: relative;
  transition: border-color .2s ease, background .2s ease;
}
.core-col article:hover { border-color: rgba(255,201,91,.32); }
.core-col article::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 38px;
  height: 1px;
  background: linear-gradient(90deg, rgba(255,201,91,.5), transparent);
}
.core-col:first-child article::after { right: -38px; }
.core-col:last-child article::after { left: -38px; background: linear-gradient(270deg, rgba(255,201,91,.5), transparent); }
.ci {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: rgba(255,201,91,.12);
  color: var(--gold-2);
}
.ci svg { width: 22px; height: 22px; }
.core-col h3 { margin: 0 0 6px; font-size: 16px; color: #fff; font-weight: 700; }
.core-col p { margin: 0; color: #aebfd6; font-size: 13.5px; line-height: 1.5; }

.chip-stage {
  position: relative;
  width: 380px; height: 380px;
  display: grid; place-items: center;
  justify-self: center;
}
.chip-img {
  width: 100%; height: 100%;
  object-fit: contain;
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 0 40px rgba(230,170,47,.4)) drop-shadow(0 25px 60px rgba(0,0,0,.6));
}
.chip-rings {
  position: absolute;
  inset: -30px;
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 38%, rgba(230,170,47,.18) 39%, rgba(230,170,47,0) 41%),
    radial-gradient(circle, transparent 50%, rgba(230,170,47,.10) 51%, rgba(230,170,47,0) 53%);
  z-index: 1;
}
.chip-lines {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  width: 80px; height: 2px;
  z-index: 1;
}
.chip-lines-left { left: -80px; background: linear-gradient(90deg, transparent, rgba(255,201,91,.7)); }
.chip-lines-right { right: -80px; background: linear-gradient(270deg, transparent, rgba(255,201,91,.7)); }

/* ============ STEPS ============ */
.action-map { padding: 100px 0; }
.steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
  margin-top: 50px;
  position: relative;
}
.steps article {
  position: relative;
  padding: 32px 22px 26px;
  background: #fff;
  border: 1px solid #e8edf4;
  border-radius: 16px;
  box-shadow: 0 6px 22px rgba(16,32,57,.05);
  transition: transform .2s ease, box-shadow .2s ease;
}
.steps article:hover { transform: translateY(-3px); box-shadow: 0 18px 38px rgba(16,32,57,.10); }
.steps b {
  display: inline-block;
  font-size: 30px;
  font-weight: 800;
  background: linear-gradient(180deg, var(--gold-2), var(--gold-3));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  letter-spacing: -.03em;
  margin-bottom: 12px;
}
.steps h3 { margin: 0 0 8px; font-size: 15px; line-height: 1.3; color: var(--ink); font-weight: 700; }
.steps p { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.5; }
.steps article:not(:last-child)::after {
  content: "→";
  position: absolute;
  right: -18px;
  top: 38px;
  color: var(--gold);
  font-weight: 800;
  font-size: 16px;
  z-index: 2;
  background: #f7f9fd;
  width: 22px;
  text-align: center;
}

/* ============ EVIDENCE ============ */
.evidence { padding: 100px 0; }
.evidence-stage {
  margin-top: 50px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 22px;
  padding: 22px;
  border-radius: 22px;
  background: linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid rgba(255,201,91,.16);
  box-shadow: 0 40px 80px rgba(0,0,0,.45);
}
.evidence-stage img { border-radius: 14px; box-shadow: 0 18px 42px rgba(0,0,0,.45); width: 100%; height: auto; }
.evidence-stage > img:first-child { aspect-ratio: 4 / 3; object-fit: cover; object-position: top; }
.evidence-stage > img:last-child { aspect-ratio: 320 / 520; object-fit: cover; object-position: top; }
.proof-row {
  margin-top: 42px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 22px;
}
.proof-row > div { padding-left: 18px; border-left: 2px solid rgba(255,201,91,.45); }
.proof-row b { display: block; color: var(--gold-2); font-size: 13px; margin-bottom: 6px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.proof-row span { color: #c8d3e6; font-size: 13.5px; line-height: 1.55; }

/* ============ MEMORY FLOW ============ */
.memory { padding: 100px 0; }
.memory-flow {
  margin-top: 50px;
  display: grid;
  grid-template-columns: 1fr 18px 1fr 18px 1fr 18px 1fr 18px 1fr 18px 1fr;
  gap: 10px;
  align-items: stretch;
}
.memory-flow article {
  padding: 22px 18px;
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid rgba(255,201,91,.16);
  text-align: left;
}
.memory-flow .mi {
  display: inline-block;
  font-size: 22px;
  font-weight: 800;
  color: var(--gold-2);
  letter-spacing: -.02em;
  margin-bottom: 10px;
}
.memory-flow h3 { margin: 0 0 6px; color: #fff; font-size: 14.5px; font-weight: 700; }
.memory-flow p { margin: 0; color: #aebfd6; font-size: 12.5px; line-height: 1.5; }
.mflow-arrow { align-self: center; color: var(--gold-2); font-weight: 800; opacity: .55; }

/* ============ BEFORE / AFTER ============ */
.before-after { padding: 100px 0; }
.ba-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 320px;
  gap: 22px;
  margin-top: 50px;
}
.ba-card {
  background: #fff;
  border: 1px solid #e8edf4;
  border-radius: 18px;
  padding: 26px 28px;
  box-shadow: 0 6px 22px rgba(16,32,57,.05);
}
.ba-card header { margin-bottom: 16px; }
.ba-pill {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.ba-pill.bad { background: #ffeceb; color: #c63a32; }
.ba-pill.good { background: #e7f7ee; color: #1f8c4d; }
.ba-card ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.ba-card li { position: relative; padding-left: 28px; font-size: 14.5px; color: var(--ink-2); }
.ba-card.bad li::before {
  content: "✕";
  position: absolute; left: 0; top: 0;
  width: 18px; height: 18px;
  display: grid; place-items: center;
  background: #ffeceb; color: #c63a32; font-weight: 800;
  border-radius: 50%; font-size: 11px;
}
.ba-card.good li::before {
  content: "✓";
  position: absolute; left: 0; top: 0;
  width: 18px; height: 18px;
  display: grid; place-items: center;
  background: #e7f7ee; color: #1f8c4d; font-weight: 800;
  border-radius: 50%; font-size: 11px;
}
.bonus-card {
  position: relative;
  background: linear-gradient(160deg, #0a1a35 0%, #061730 100%);
  border: 1px solid rgba(255,201,91,.25);
  border-radius: 18px;
  padding: 26px;
  color: #fff;
  display: grid;
  gap: 18px;
  text-align: center;
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(8,20,45,.25);
}
.bonus-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  overflow: hidden;
  background: #04102a;
}
.bonus-img img { width: 100%; height: 100%; object-fit: cover; }
.bonus-card h3 { margin: 0; font-size: 16px; line-height: 1.35; color: #fff; font-weight: 700; }
.bonus-card .btn { width: 100%; }

/* ============ TOOLS ============ */
.tools { padding: 110px 0; }
.tools-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 40px;
}
.tool-card {
  background: linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid rgba(255,201,91,.18);
  border-radius: 18px;
  padding: 22px;
  display: grid;
  gap: 16px;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.tool-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255,201,91,.42);
  box-shadow: 0 22px 50px rgba(0,0,0,.4);
}
.tool-preview {
  aspect-ratio: 16 / 10;
  border-radius: 12px;
  overflow: hidden;
  background: #050f22;
  box-shadow: 0 8px 22px rgba(0,0,0,.4);
}
.tool-preview img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
}
.tool-card h3 { margin: 0; font-size: 17px; color: #fff; font-weight: 700; }
.tool-card p { margin: 0; color: #aebfd6; font-size: 13.5px; line-height: 1.5; }

/* ============ COMPARE ============ */
.compare { padding: 110px 0; }
.compare-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 40px;
  align-items: stretch;
}
.compare-grid article {
  padding: 26px 24px;
  border-radius: 16px;
  background: linear-gradient(160deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
  border: 1px solid rgba(255,255,255,.08);
  display: grid;
  gap: 14px;
  align-content: start;
}
.compare-grid h3 { margin: 0; color: #fff; font-size: 17px; font-weight: 700; }
.compare-grid ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.compare-grid li { color: #c8d3e6; font-size: 13px; position: relative; padding-left: 18px; }
.compare-grid li::before { content: "·"; position: absolute; left: 4px; top: -3px; color: var(--gold-2); font-size: 22px; }
.compare-grid b { font-size: 12px; color: #99a8c3; padding-top: 10px; border-top: 1px dashed rgba(255,255,255,.12); margin-top: auto; }
.compare-grid .gold {
  background: linear-gradient(160deg, rgba(255,201,91,.18), rgba(255,201,91,.04));
  border: 1px solid rgba(255,201,91,.45);
  box-shadow: 0 18px 44px rgba(230,170,47,.16);
}
.compare-grid .gold li::before { color: var(--gold-2); }
.compare-grid .gold b { color: var(--gold-2); border-top-color: rgba(255,201,91,.3); }

/* ============ MONTHLY ============ */
.monthly-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  margin-top: 50px;
}

/* ============ FINAL CTA ============ */
.final-cta { padding: 100px 0; background: #f7f9fd; }
.cta-panel {
  position: relative;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: center;
  border-radius: 28px;
  overflow: hidden;
  background:
    radial-gradient(900px 600px at 80% 50%, rgba(230,170,47,.18), transparent 60%),
    linear-gradient(135deg, #051330 0%, #082248 60%, #04132c 100%);
  box-shadow: 0 40px 90px rgba(8,20,45,.35);
  border: 1px solid rgba(255,201,91,.22);
  min-height: 380px;
}
.cta-copy { padding: 60px 60px; color: #fff; }
.cta-copy .kicker { background: rgba(255,201,91,.16); color: var(--gold-2); }
.cta-copy h2 { margin: 14px 0 16px; font-size: 38px; line-height: 1.12; color: #fff; font-weight: 800; letter-spacing: -.02em; }
.cta-copy p { margin: 0 0 32px; color: #c8d3e6; font-size: 16px; max-width: 500px; }
.cta-visual {
  position: relative;
  height: 100%;
  min-height: 380px;
  overflow: hidden;
}
.cta-visual img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: right center;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 35%, #000 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 35%, #000 100%);
}

/* ============ FAQ ============ */
.faq { padding: 110px 0; }
.faq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 28px;
  margin-top: 40px;
}
.faq-grid details {
  background: #fff;
  border: 1px solid #e8edf4;
  border-radius: 12px;
  padding: 18px 22px;
  box-shadow: 0 4px 14px rgba(16,32,57,.04);
}
.faq-grid summary {
  list-style: none;
  cursor: pointer;
  font-weight: 700;
  color: var(--ink);
  font-size: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.faq-grid summary::after { content: "+"; color: var(--gold-3); font-size: 22px; font-weight: 800; }
.faq-grid details[open] summary::after { content: "−"; }
.faq-grid p { margin: 12px 0 0; color: var(--muted); font-size: 14px; line-height: 1.55; }

/* ============ FOOTER ============ */
.footer {
  background: linear-gradient(180deg, #050f24 0%, #03091a 100%);
  color: #c8d3e6;
  padding: 60px 0 40px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr 1.3fr;
  gap: 28px;
  align-items: start;
}
.footer-grid > div { display: grid; gap: 10px; }
.footer-grid b { color: #fff; font-size: 14px; margin-bottom: 6px; }
.footer-grid a { color: #99a8c3; font-size: 13.5px; cursor: pointer; }
.footer-grid a:hover { color: var(--gold-2); }
.footer-grid .contacts span { color: #c8d3e6; font-size: 13.5px; }

/* ============================================================
   V10_HARD_VISUAL_QA_POLISH — overrides only, no structure changes
   ============================================================ */

/* --- design tokens (additive) --- */
:root {
  --r-card: 16px;
  --r-card-lg: 20px;
  --r-pill: 999px;
  --border-soft: #e6ecf3;
  --border-dark: rgba(255,201,91,.18);
  --shadow-card: 0 1px 0 rgba(255,255,255,.6) inset, 0 10px 28px rgba(16,32,57,.06), 0 2px 6px rgba(16,32,57,.04);
  --shadow-card-hover: 0 1px 0 rgba(255,255,255,.7) inset, 0 22px 48px rgba(16,32,57,.12), 0 4px 12px rgba(16,32,57,.06);
  --shadow-dark-card: 0 0 0 1px rgba(255,255,255,.02) inset, 0 18px 44px rgba(0,0,0,.45);
}

/* --- HEADER / NAV --- */
.nav { height: 88px; }
.brand-logo { width: 46px; height: 46px; filter: drop-shadow(0 4px 14px rgba(230,170,47,.35)); }
.brand-copy b { font-size: 18px; letter-spacing: .015em; }
.brand-copy small { font-size: 10.5px; color: #d6e0ef; letter-spacing: .16em; }
.nav-links { gap: 34px; font-size: 13.5px; color: rgba(238,244,255,.92); }
.nav-links a { position: relative; padding: 6px 0; transition: color .15s ease; }
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--gold-2); transform: scaleX(0); transform-origin: center;
  transition: transform .2s ease;
}
.nav-links a:hover::after { transform: scaleX(1); }

/* --- HERO --- */
.hero { padding: 120px 0 150px; }
.hero-grid { grid-template-columns: minmax(0, 560px) minmax(0, 1fr); gap: 56px; }
.hero h1 { font-size: 48px; line-height: 1.05; letter-spacing: -.024em; max-width: 560px; }
.hero-lead { font-size: 16px; color: #d4dded; max-width: 520px; line-height: 1.6; }
.hero-benefits { grid-template-columns: repeat(4, 1fr); gap: 14px; max-width: 560px; }
.hero-benefits > div {
  padding: 16px 8px 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid rgba(255,201,91,.16);
  border-radius: 14px;
  min-height: 116px;
  align-content: start;
  row-gap: 4px;
}
.hero-benefits b { font-size: 13px; margin-top: 10px; letter-spacing: .005em; }
.hero-benefits small { font-size: 11px; color: #a8b6cf; }
.bi { width: 40px; height: 40px; border-width: 1.5px; }

/* HERO STAGE — chuther border, soft glow */
.hero-stage-inner {
  padding: 16px;
  border-radius: 24px;
  background: linear-gradient(160deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,.015) 60%, rgba(255,255,255,.04) 100%);
  border: 1px solid rgba(255,201,91,.22);
  box-shadow:
    0 50px 110px rgba(0,0,0,.6),
    0 0 0 1px rgba(255,255,255,.04) inset,
    0 0 80px rgba(230,170,47,.10) inset;
}
.stage-main, .stage-side {
  border-radius: 12px;
  box-shadow: 0 14px 36px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.04) inset;
}

/* HERO FLOATING CTA — sits cleanly on dark/light boundary */
.hero-cta-floating {
  width: min(960px, calc(100% - 80px));
  margin: 60px auto -80px;
  padding: 26px 34px;
  border-radius: 22px;
  box-shadow:
    0 40px 100px rgba(8,20,45,.5),
    0 8px 18px rgba(8,20,45,.18),
    inset 0 1px 0 rgba(255,255,255,.95),
    0 0 0 1px rgba(230,170,47,.18);
}
.hero-cta-floating h2 { font-size: 22px; line-height: 1.3; }
.hero-cta-floating h2 span { color: #6a7790; font-weight: 600; font-size: 16px; }
.hero-cta-floating .btn-cta { min-height: 56px; padding: 16px 32px; font-size: 14.5px; border-radius: 12px; }

/* --- SECTIONS uniform rhythm --- */
.section { padding: 120px 0; }
.core, .action-map, .evidence, .memory, .before-after, .tools, .compare, .faq { padding: 120px 0; }

/* --- PROBLEM GRID --- */
.problem-grid { gap: 24px; }
.problem-grid article, .monthly-grid article {
  border-radius: var(--r-card);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-card);
  padding: 30px 28px;
  min-height: 240px;
  align-content: start;
  position: relative;
  overflow: hidden;
}
.problem-grid article::before, .monthly-grid article::before {
  content: ""; position: absolute; left: 24px; right: 24px; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(230,170,47,.45), transparent);
  opacity: .7;
}
.problem-grid article:hover, .monthly-grid article:hover {
  box-shadow: var(--shadow-card-hover);
  border-color: rgba(230,170,47,.35);
}
.pc-icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(230,170,47,.20), rgba(230,170,47,.05));
  box-shadow: inset 0 0 0 1px rgba(230,170,47,.18);
}
.pc-icon svg { width: 24px; height: 24px; stroke-width: 1.6; }
.problem-grid h3, .monthly-grid h3 { font-size: 16.5px; line-height: 1.3; }
.problem-grid p, .monthly-grid p { font-size: 14px; line-height: 1.6; color: #647186; }

/* --- CORE / CHIP --- */
.core-layout { grid-template-columns: 1fr 360px 1fr; gap: 48px; }
.core-col { gap: 18px; }
.core-col article {
  padding: 22px 22px;
  border-radius: var(--r-card);
  border: 1px solid rgba(255,201,91,.16);
  background: linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  box-shadow: var(--shadow-dark-card);
  min-height: 112px;
  align-content: center;
}
.core-col article::after { width: 44px; height: 1px; opacity: .85; }
.core-col:first-child article::after { right: -44px; }
.core-col:last-child article::after { left: -44px; }
.ci {
  width: 46px; height: 46px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(255,201,91,.20), rgba(255,201,91,.05));
  box-shadow: inset 0 0 0 1px rgba(255,201,91,.22);
}
.ci svg { width: 22px; height: 22px; stroke-width: 1.6; }
.core-col h3 { font-size: 15.5px; }
.core-col p { font-size: 13px; line-height: 1.55; }

.chip-stage { width: 360px; height: 360px; }
.chip-img { filter: drop-shadow(0 0 50px rgba(230,170,47,.32)) drop-shadow(0 30px 60px rgba(0,0,0,.6)); }
.chip-rings { inset: -20px; }
.chip-lines { width: 96px; height: 1px; }
.chip-lines-left  { left: -96px; background: linear-gradient(90deg, transparent, rgba(255,201,91,.85)); }
.chip-lines-right { right: -96px; background: linear-gradient(270deg, transparent, rgba(255,201,91,.85)); }

/* --- STEPS --- */
.steps { gap: 22px; }
.steps article {
  padding: 28px 22px 26px;
  border-radius: var(--r-card);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
}
.steps article::before {
  content: ""; position: absolute; left: 22px; right: 22px; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(230,170,47,.55), transparent);
}
.steps article:hover { box-shadow: var(--shadow-card-hover); }
.steps b { font-size: 26px; margin-bottom: 10px; }
.steps h3 { font-size: 14.5px; }
.steps p { font-size: 12.8px; line-height: 1.5; }
.steps article:not(:last-child)::after {
  content: ""; right: -16px; top: 50%; transform: translateY(-50%);
  width: 22px; height: 1px;
  background: linear-gradient(90deg, rgba(230,170,47,.7), rgba(230,170,47,.2));
  border-radius: 0;
  font-size: 0;
}
.steps article:not(:last-child) {
  position: relative;
}

/* keep a small triangle marker over the line for direction */
.steps article:not(:last-child)::after {
  content: "›";
  font-size: 18px;
  background: transparent;
  color: var(--gold);
  width: 18px;
  text-align: center;
  font-weight: 700;
}

/* --- EVIDENCE --- */
.evidence-stage {
  gap: 18px;
  padding: 18px;
  border-radius: 22px;
  background: linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  border: 1px solid rgba(255,201,91,.20);
  box-shadow: 0 50px 100px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.04) inset;
}
.evidence-stage img { border-radius: 12px; box-shadow: 0 14px 32px rgba(0,0,0,.5); }
.proof-row { margin-top: 32px; gap: 24px; }
.proof-row > div { padding-left: 20px; border-left: 3px solid rgba(255,201,91,.55); }
.proof-row b { font-size: 12px; letter-spacing: .12em; margin-bottom: 8px; color: var(--gold-2); }
.proof-row span { font-size: 14.5px; color: #d4dded; line-height: 1.55; }

/* --- MEMORY FLOW --- */
.memory-flow { gap: 8px; }
.memory-flow article {
  padding: 24px 20px;
  border-radius: var(--r-card);
  background: linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.015));
  border: 1px solid rgba(255,201,91,.20);
  box-shadow: var(--shadow-dark-card);
  min-height: 154px;
}
.memory-flow .mi { font-size: 20px; margin-bottom: 12px; }
.memory-flow h3 { font-size: 14px; line-height: 1.3; color: #fff; }
.memory-flow p { font-size: 12.5px; line-height: 1.55; color: #b8c4dc; }
.mflow-arrow {
  color: var(--gold-2); font-weight: 800; opacity: .85; font-size: 16px;
}

/* --- BEFORE / AFTER + BONUS --- */
.ba-grid { gap: 24px; grid-template-columns: 1fr 1fr 340px; }
.ba-card {
  border-radius: var(--r-card-lg);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-card);
  padding: 28px 28px 30px;
}
.ba-card header { margin-bottom: 18px; }
.ba-card ul { gap: 13px; }
.ba-card li { font-size: 14.5px; line-height: 1.5; padding-left: 30px; min-height: 22px; }
.ba-card.bad li::before, .ba-card.good li::before {
  width: 20px; height: 20px; font-size: 12px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.05);
}
.ba-card.bad li::before { background: #ffe2e0; color: #c63a32; }
.ba-card.good li::before { background: #d8f4e3; color: #1f8c4d; }
.bonus-card {
  border-radius: var(--r-card-lg);
  padding: 22px;
  gap: 16px;
  box-shadow:
    0 22px 56px rgba(8,20,45,.3),
    0 0 0 1px rgba(255,201,91,.28),
    inset 0 1px 0 rgba(255,255,255,.06);
}
.bonus-img {
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  background: linear-gradient(160deg, #0c1f3e, #04102a);
  display: grid; place-items: center;
}
.bonus-img img { object-fit: contain; padding: 12px; }

/* --- TOOLS --- */
.tools-grid { gap: 24px; }
.tool-card {
  border-radius: var(--r-card-lg);
  border: 1px solid rgba(255,201,91,.20);
  background: linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.015));
  padding: 22px;
  min-height: 360px;
  align-content: start;
  box-shadow: var(--shadow-dark-card);
}
.tool-preview {
  aspect-ratio: 16 / 10;
  border-radius: 12px;
  background: linear-gradient(160deg, #0a1a35, #050f22);
  box-shadow: 0 10px 26px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.04) inset;
}
.tool-card h3 { font-size: 16.5px; line-height: 1.3; }
.tool-card p { font-size: 13.5px; line-height: 1.55; color: #b8c4dc; }

/* --- COMPARE --- */
.compare-grid { gap: 20px; }
.compare-grid article {
  padding: 28px 24px;
  border-radius: var(--r-card);
  background: linear-gradient(160deg, rgba(255,255,255,.045), rgba(255,255,255,.01));
  border: 1px solid rgba(255,255,255,.10);
  min-height: 320px;
  box-shadow: var(--shadow-dark-card);
}
.compare-grid h3 { font-size: 16.5px; }
.compare-grid li { font-size: 13px; line-height: 1.55; padding-left: 18px; }
.compare-grid li::before { content: "•"; font-size: 14px; top: 0; left: 4px; }
.compare-grid b { font-size: 12.5px; padding-top: 14px; }
.compare-grid .gold {
  background: linear-gradient(160deg, rgba(255,201,91,.16), rgba(255,201,91,.03));
  border: 1px solid rgba(255,201,91,.40);
  box-shadow: 0 22px 52px rgba(230,170,47,.14), 0 0 0 1px rgba(255,201,91,.10) inset;
}

/* --- MONTHLY (losses) - upgrade weight --- */
.monthly-grid { gap: 24px; }
.monthly-grid article {
  background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
  min-height: 240px;
  position: relative;
  overflow: hidden;
}
.monthly-grid article::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg, var(--gold-3), var(--gold-2), var(--gold-3));
  opacity: .55;
}
.monthly-grid .pc-icon {
  width: 52px; height: 52px;
  background: linear-gradient(135deg, rgba(230,170,47,.22), rgba(230,170,47,.06));
}
.monthly-grid .pc-icon svg { width: 26px; height: 26px; }
.monthly-grid h3 { font-size: 17px; }

/* --- FINAL CTA --- */
.cta-panel {
  min-height: 420px;
  border-radius: 28px;
  box-shadow: 0 50px 110px rgba(8,20,45,.45), 0 0 0 1px rgba(255,201,91,.22) inset;
}
.cta-copy { padding: 68px 60px; }
.cta-copy h2 { font-size: 40px; line-height: 1.1; }
.cta-copy p { font-size: 16.5px; color: #d4dded; }
.cta-copy .btn-cta { min-height: 60px; padding: 18px 36px; font-size: 15.5px; border-radius: 14px; }
.cta-visual img {
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 45%, #000 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 45%, #000 100%);
  object-position: right center;
}

/* --- FAQ --- */
.faq-grid { gap: 16px 28px; }
.faq-grid details {
  border-radius: 14px;
  border: 1px solid var(--border-soft);
  padding: 20px 24px;
  box-shadow: var(--shadow-card);
  transition: box-shadow .15s ease, border-color .15s ease;
}
.faq-grid details[open] {
  border-color: rgba(230,170,47,.4);
  box-shadow: var(--shadow-card-hover);
}
.faq-grid summary { font-size: 15.5px; }
.faq-grid summary::after {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: rgba(230,170,47,.12);
  color: var(--gold-3);
  font-size: 18px; font-weight: 700;
  display: inline-grid; place-items: center;
  transition: transform .2s ease, background .2s ease;
}
.faq-grid details[open] summary::after { background: rgba(230,170,47,.22); }
.faq-grid p { font-size: 14.5px; line-height: 1.6; margin-top: 14px; }

/* --- FOOTER --- */
.footer { padding: 72px 0 44px; }
.footer-grid { gap: 32px; }
.footer-grid b { font-size: 14.5px; margin-bottom: 10px; letter-spacing: .015em; }
.footer-grid a { font-size: 13.5px; line-height: 1.7; }
.footer-grid .contacts span { font-size: 13.5px; line-height: 1.7; }
.footer .brand-logo { width: 44px; height: 44px; }
.footer::after {
  content: ""; display: block;
  width: min(var(--shell), calc(100% - 80px));
  margin: 36px auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent);
}