/* ==========================================================================
   AI Social Cashflow - TitZay26
   Design system: dark violet base, orange/gold gradient, K2D + League Spartan
   Built mobile first. No frameworks, no build step.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  --ink-900: #120620;
  --ink-800: #17092b;
  --ink-700: #1d0e34;
  --ink-600: #220f3c;
  --ink-500: #271e42;
  --ink-400: #2d1b4d;
  --ink-300: #3a2560;

  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.18);

  --gold: #faaa1b;
  --orange: #f84002;
  --violet: #9d66fd;
  --magenta: #eb65f7;
  --indigo: #4b55d5;
  --green: #1ed94f;

  --paper: #fdf9f3;
  --text: #f3ecff;
  --muted: #bdaed8;
  --muted-2: #9184ae;

  --grad-fire: linear-gradient(96deg, #f84002 0%, #faaa1b 62%, #ffd76a 100%);
  --grad-violet: linear-gradient(96deg, #4b55d5 0%, #9d66fd 55%, #eb65f7 100%);
  --grad-mix: linear-gradient(96deg, #eb65f7 0%, #f84002 100%);

  --r-sm: 10px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-xl: 36px;

  --shadow-card: 0 18px 40px rgba(4, 0, 16, 0.45);
  --shadow-pop: 0 24px 70px rgba(120, 30, 255, 0.22);

  --font-head: "K2D", system-ui, sans-serif;
  --font-body: "League Spartan", system-ui, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "Consolas", monospace;

  --wrap: 1160px;
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ink-800);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.62;
  letter-spacing: 0.1px;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5 { font-family: var(--font-head); margin: 0; line-height: 1.14; letter-spacing: -0.4px; }
p { margin: 0; }
img { max-width: 100%; height: auto; display: block; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
strong { color: #fff; }
em { font-style: italic; }

::selection { background: var(--gold); color: #2a1000; }

::-webkit-scrollbar { width: 9px; }
::-webkit-scrollbar-track { background: #120620; }
::-webkit-scrollbar-thumb { background: var(--grad-violet); border-radius: 20px; }

/* ---------- 3. Layout helpers ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.wrap-narrow { max-width: 860px; }
section { position: relative; }
.sec { padding: 76px 0; }
.sec-tight { padding: 52px 0; }
.center { text-align: center; }
.hide-sm { display: none; }

@media (min-width: 700px) {
  .hide-sm { display: block; }
  .sec { padding: 104px 0; }
}

/* ---------- 4. Type scale ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--gold);
}
.eyebrow::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 4px rgba(248, 64, 2, 0.18);
}

.h1 {
  font-size: clamp(31px, 7.2vw, 62px);
  font-weight: 800;
  margin: 18px 0 0;
}

.h2 {
  font-size: clamp(26px, 5vw, 44px);
  font-weight: 800;
  margin: 14px 0 0;
}

.h3 { font-size: clamp(20px, 3.4vw, 27px); font-weight: 700; }

.lead { font-size: clamp(16.5px, 2.4vw, 20px); color: var(--muted); margin-top: 18px; }
.small { font-size: 14px; color: var(--muted-2); }
.tiny { font-size: 12.5px; color: var(--muted-2); letter-spacing: 0.3px; }

.grad {
  background: var(--grad-fire);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.grad-v {
  background: var(--grad-violet);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.mark {
  background: linear-gradient(180deg, transparent 62%, rgba(250, 170, 27, 0.32) 62%);
  padding: 0 2px;
}

/* ---------- 5. Buttons ---------- */
.cta-block { text-align: center; margin: 34px auto 0; }
.cta-block .wp-buy {
  display: inline-block;
  max-width: 470px;
  width: 100%;
  border-radius: 60px;
  animation: pulseFire 2.4s infinite;
  transition: transform 0.25s ease;
}
.cta-block .wp-buy img { width: 100%; border-radius: 60px; }
.cta-block .wp-buy:hover { transform: translateY(-3px) scale(1.012); }

@keyframes pulseFire {
  0%   { box-shadow: 0 0 0 0 rgba(248, 64, 2, 0.48); }
  70%  { box-shadow: 0 0 0 26px rgba(248, 64, 2, 0); }
  100% { box-shadow: 0 0 0 0 rgba(248, 64, 2, 0); }
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px 34px;
  border-radius: 60px;
  background: var(--grad-fire);
  color: #2a1000;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: 0.2px;
  border: 0;
  cursor: pointer;
  box-shadow: 0 12px 30px rgba(248, 64, 2, 0.28);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 18px 40px rgba(248, 64, 2, 0.42); }
.btn svg { width: 19px; height: 19px; }

.btn-ghost {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  border: 1px solid var(--line-strong);
  box-shadow: none;
  font-weight: 700;
}
.btn-ghost:hover { background: rgba(255, 255, 255, 0.1); box-shadow: none; }

.btn-block { width: 100%; }

.cta-note {
  margin-top: 14px;
  font-size: 13.5px;
  color: var(--muted-2);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  justify-content: center;
}
.cta-note span { display: inline-flex; align-items: center; gap: 6px; }
.cta-note svg { width: 14px; height: 14px; color: var(--green); }

.text-link { color: var(--gold); border-bottom: 1px solid rgba(250, 170, 27, 0.4); }

/* ---------- 6. Cards & panels ---------- */
.card {
  background: linear-gradient(160deg, rgba(255,255,255,0.055), rgba(255,255,255,0.015));
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 24px;
  backdrop-filter: blur(8px);
}
.card-solid { background: var(--ink-500); }

.grid { display: grid; gap: 16px; }
@media (min-width: 700px) { .grid-2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 700px) and (max-width: 899px) { .grid-3 { grid-template-columns: 1fr 1fr; } }

.divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-strong), transparent);
  border: 0;
  margin: 0;
}

/* ---------- 7. Scroll progress ---------- */
#scrollbar {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0;
  background: var(--grad-fire);
  z-index: 999;
  transition: width 0.08s linear;
}

/* ---------- 8. Announcement bar ---------- */
.announce {
  background: var(--grad-violet);
  color: #fff;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.4px;
  padding: 9px 16px;
}
.announce b { color: #fff5c9; }
.announce button {
  background: none; border: 0; color: #fff; cursor: pointer;
  font-size: 15px; line-height: 1; padding: 0 0 0 10px; opacity: 0.75;
}
.announce button:hover { opacity: 1; }

/* ---------- 9. Nav ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 500;
  background: rgba(23, 9, 43, 0.82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark {
  width: 40px; height: 40px;
  flex: 0 0 40px;
  border-radius: 12px;
  background: var(--grad-fire);
  display: grid;
  place-items: center;
  font-family: var(--font-head);
  font-weight: 800;
  color: #2a1000;
  font-size: 16px;
  letter-spacing: -0.5px;
  box-shadow: 0 8px 20px rgba(248, 64, 2, 0.3);
}
.brand-text b { display: block; font-family: var(--font-head); font-size: 16px; line-height: 1.1; }
.brand-text span { font-size: 11px; color: var(--muted-2); letter-spacing: 1.2px; text-transform: uppercase; }

.nav-links { display: none; gap: 26px; font-size: 14.5px; font-weight: 600; color: var(--muted); }
.nav-links a:hover { color: var(--gold); }
@media (min-width: 940px) { .nav-links { display: flex; } }

.nav .btn { padding: 13px 22px; font-size: 15px; }

/* ---------- 10. Hero ---------- */
.hero {
  position: relative;
  padding: 54px 0 70px;
  overflow: hidden;
  background:
    radial-gradient(900px 520px at 78% -6%, rgba(157, 102, 253, 0.28), transparent 62%),
    radial-gradient(700px 480px at 6% 12%, rgba(248, 64, 2, 0.16), transparent 60%),
    linear-gradient(180deg, var(--ink-700), var(--ink-800));
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: radial-gradient(70% 60% at 50% 0%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(70% 60% at 50% 0%, #000 20%, transparent 75%);
  pointer-events: none;
}
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.42;
  pointer-events: none;
}
.orb-a { width: 340px; height: 340px; background: #f84002; top: -90px; right: -80px; animation: float1 11s ease-in-out infinite; }
.orb-b { width: 300px; height: 300px; background: #9d66fd; bottom: -110px; left: -90px; animation: float2 13s ease-in-out infinite; }
@keyframes float1 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-26px, 30px); } }
@keyframes float2 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(30px, -24px); } }

.hero-grid { position: relative; z-index: 2; display: grid; gap: 40px; }
@media (min-width: 1000px) {
  .hero-grid { grid-template-columns: 1.06fr 0.94fr; align-items: center; gap: 54px; }
}

.hero-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.045);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
}
.chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); display: block; }
.chip.v i { background: var(--violet); }
.chip.g i { background: var(--green); }

.hero-list { margin-top: 28px; display: grid; gap: 12px; }
.hero-list li { display: flex; gap: 11px; font-size: 15.5px; color: #e7ddf8; }
.tick {
  flex: 0 0 21px;
  width: 21px; height: 21px;
  margin-top: 3px;
  border-radius: 50%;
  background: rgba(30, 217, 79, 0.14);
  border: 1px solid rgba(30, 217, 79, 0.42);
  display: grid;
  place-items: center;
}
.tick svg { width: 11px; height: 11px; color: var(--green); }

/* ---------- 11. Ticker ---------- */
.ticker {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #140727;
  overflow: hidden;
  padding: 13px 0;
}
.ticker-track {
  display: flex;
  gap: 40px;
  width: max-content;
  animation: slide 34s linear infinite;
}
.ticker-track span {
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--muted-2);
  display: inline-flex;
  align-items: center;
  gap: 40px;
  white-space: nowrap;
}
.ticker-track span::after { content: "\25CF"; color: var(--orange); font-size: 9px; }
@keyframes slide { to { transform: translateX(-50%); } }

/* ---------- 12. Browser / cockpit mockup ---------- */
.mock {
  border-radius: var(--r-md);
  border: 1px solid var(--line-strong);
  background: #1a0b30;
  box-shadow: var(--shadow-pop);
  overflow: hidden;
}
.mock-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 11px 14px;
  background: #241041;
  border-bottom: 1px solid var(--line);
}
.mock-bar i { width: 10px; height: 10px; border-radius: 50%; display: block; }
.mock-bar i:nth-child(1) { background: #ff5f56; }
.mock-bar i:nth-child(2) { background: #ffbd2e; }
.mock-bar i:nth-child(3) { background: #27c93f; }
.mock-url {
  margin-left: 8px;
  flex: 1;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--muted-2);
  background: #17092b;
  border-radius: 20px;
  padding: 4px 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mock-body { padding: 16px; display: grid; gap: 12px; }

.doc-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.doc-title { font-family: var(--font-head); font-weight: 700; font-size: 14px; }
.doc-pill {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(30, 217, 79, 0.15);
  color: #7bf39b;
  border: 1px solid rgba(30, 217, 79, 0.3);
}

.doc-row {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 10px;
  align-items: center;
  font-size: 12px;
}
.doc-row .k { color: var(--muted-2); font-weight: 600; }
.bar { height: 8px; border-radius: 20px; background: rgba(255,255,255,0.07); overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: 20px; width: 0; transition: width 1.4s cubic-bezier(.2,.7,.3,1); }
.bar i.f { background: var(--grad-fire); }
.bar i.v { background: var(--grad-violet); }
.bar i.g { background: linear-gradient(90deg, #12924a, #43e07a); }

.chat { display: grid; gap: 10px; }
.bubble {
  border-radius: 14px;
  padding: 11px 13px;
  font-size: 12.4px;
  line-height: 1.5;
  max-width: 92%;
}
.bubble.user {
  background: rgba(75, 85, 213, 0.22);
  border: 1px solid rgba(157, 102, 253, 0.34);
  justify-self: end;
  color: #e6dcff;
}
.bubble.ai {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line);
  color: #d8cdf0;
}
.bubble .who {
  display: block;
  font-size: 9.5px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 5px;
  font-weight: 700;
}
.caret { display: inline-block; width: 7px; height: 13px; background: var(--gold); vertical-align: -2px; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.float-card {
  position: absolute;
  background: #241041;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  padding: 11px 14px;
  box-shadow: var(--shadow-card);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 600;
  animation: bob 5s ease-in-out infinite;
}
.float-card .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(30,217,79,0.15); }
.float-card small { display: block; font-size: 10px; color: var(--muted-2); font-weight: 500; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-11px); } }

/* ---------- 13. Section headings ---------- */
.sec-head { max-width: 760px; margin: 0 auto; text-align: center; }
.sec-head .h2 { margin-top: 14px; }
.sec-head .lead { margin-top: 16px; }

/* ---------- 14. Pain list ---------- */
.pain { background: linear-gradient(180deg, var(--ink-800), var(--ink-600)); }
.pain-grid { display: grid; gap: 12px; margin-top: 34px; }
@media (min-width: 760px) { .pain-grid { grid-template-columns: 1fr 1fr; gap: 14px; } }
.pain-item {
  display: flex;
  gap: 12px;
  padding: 16px 18px;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--line);
  border-left: 3px solid rgba(248, 64, 2, 0.6);
  font-size: 15.4px;
  color: #ded2f3;
}
.pain-item svg { flex: 0 0 17px; width: 17px; height: 17px; margin-top: 4px; color: #ff7a4d; }

.pull {
  margin: 40px auto 0;
  max-width: 820px;
  text-align: center;
  font-family: var(--font-head);
  font-size: clamp(19px, 3.6vw, 30px);
  font-weight: 700;
  line-height: 1.34;
  padding: 30px 24px;
  border-radius: var(--r-md);
  background: linear-gradient(160deg, rgba(157,102,253,0.14), rgba(248,64,2,0.08));
  border: 1px solid var(--line-strong);
}

/* ---------- 15. Cost of waiting ---------- */
.math-grid { display: grid; gap: 14px; margin-top: 34px; }
@media (min-width: 820px) { .math-grid { grid-template-columns: repeat(3, 1fr); } }
.math-card {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 22px;
  background: rgba(255,255,255,0.03);
}
.math-card b { display: block; font-family: var(--font-head); font-size: 34px; font-weight: 800; line-height: 1; }
.math-card span { display: block; margin-top: 9px; color: var(--muted); font-size: 14.5px; }

/* ---------- 16. Compare ---------- */
.compare { display: grid; gap: 16px; margin-top: 34px; }
@media (min-width: 860px) { .compare { grid-template-columns: 1fr 1fr; gap: 22px; } }
.cmp {
  border-radius: var(--r-md);
  padding: 24px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.028);
}
.cmp.new { border-color: rgba(30, 217, 79, 0.34); background: linear-gradient(165deg, rgba(30,217,79,0.09), rgba(255,255,255,0.02)); }
.cmp-tag {
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  margin-bottom: 16px;
  display: block;
}
.cmp.old .cmp-tag { color: #ff7a4d; }
.cmp.new .cmp-tag { color: #7bf39b; }
.cmp ul { display: grid; gap: 12px; }
.cmp li { display: flex; gap: 10px; font-size: 15px; color: #ded2f3; }
.cmp li svg { flex: 0 0 16px; width: 16px; height: 16px; margin-top: 4px; }
.cmp.old li svg { color: #ff6a3d; }
.cmp.new li svg { color: var(--green); }
.cmp-foot {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px dashed var(--line-strong);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 15.5px;
}
.cmp.old .cmp-foot { color: #ff8f66; }
.cmp.new .cmp-foot { color: #8ff5ac; }

/* ---------- 17. Layer stack ---------- */
.stack { display: grid; gap: 10px; margin-top: 36px; }
.layer {
  border-radius: var(--r-sm);
  padding: 18px 20px;
  border: 1px solid var(--line-strong);
  display: grid;
  gap: 4px;
  position: relative;
  overflow: hidden;
}
.layer b { font-family: var(--font-head); font-size: 15.5px; }
.layer span { font-size: 14px; color: var(--muted); }
.layer::before {
  content: attr(data-tier);
  position: absolute;
  right: 14px;
  top: 10px;
  font-family: var(--font-head);
  font-size: 40px;
  font-weight: 800;
  color: rgba(255,255,255,0.05);
  line-height: 1;
}
.layer.l4 { background: linear-gradient(96deg, rgba(250,170,27,0.22), rgba(248,64,2,0.12)); border-color: rgba(250,170,27,0.5); }
.layer.l3 { background: rgba(157, 102, 253, 0.13); }
.layer.l2 { background: rgba(75, 85, 213, 0.13); }
.layer.l1 { background: rgba(255, 255, 255, 0.04); }

.flow-note {
  margin-top: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  font-size: 13.5px;
  color: var(--muted-2);
}
.flow-note svg { width: 16px; height: 16px; color: var(--violet); animation: bob 3s ease-in-out infinite; }

/* ---------- 18. Three banks ---------- */
.banks { display: grid; gap: 16px; margin-top: 34px; }
@media (min-width: 880px) { .banks { grid-template-columns: repeat(3, 1fr); } }
.bank {
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  padding: 22px;
  background: rgba(255,255,255,0.03);
  display: grid;
  gap: 12px;
  align-content: start;
}
.bank-ico {
  width: 44px; height: 44px;
  border-radius: 13px;
  display: grid;
  place-items: center;
}
.bank-ico svg { width: 22px; height: 22px; }
.bank.tr .bank-ico { background: rgba(250, 170, 27, 0.16); color: var(--gold); }
.bank.tf .bank-ico { background: rgba(157, 102, 253, 0.18); color: var(--violet); }
.bank.as .bank-ico { background: rgba(30, 217, 79, 0.14); color: var(--green); }
.bank b { font-family: var(--font-head); font-size: 17px; }
.bank p { font-size: 14.6px; color: var(--muted); }
.meter { height: 9px; border-radius: 20px; background: rgba(255,255,255,0.07); overflow: hidden; }
.meter i { display: block; height: 100%; width: 0; border-radius: 20px; transition: width 1.6s cubic-bezier(.2,.7,.3,1); }
.bank.tr .meter i { background: var(--grad-fire); }
.bank.tf .meter i { background: var(--grad-violet); }
.bank.as .meter i { background: linear-gradient(90deg, #12924a, #43e07a); }
.bank .cap { font-size: 11.5px; color: var(--muted-2); letter-spacing: 0.4px; }

/* ---------- 19. Pillars wheel ---------- */
.wheel-wrap { margin-top: 36px; display: grid; gap: 26px; }
@media (min-width: 940px) { .wheel-wrap { grid-template-columns: 1.05fr 0.95fr; align-items: center; gap: 46px; } }
.wheel { position: relative; aspect-ratio: 1/1; max-width: 430px; margin: 0 auto; width: 100%; }
.wheel-ring {
  position: absolute; inset: 7%;
  border-radius: 50%;
  border: 1px dashed rgba(255,255,255,0.16);
}
.wheel-ring.two { inset: 24%; border-style: solid; border-color: rgba(255,255,255,0.09); }
.wheel-core {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 40%; aspect-ratio: 1/1;
  border-radius: 50%;
  background: var(--grad-fire);
  display: grid;
  place-items: center;
  text-align: center;
  padding: 8%;
  box-shadow: 0 0 60px rgba(248, 64, 2, 0.35);
}
.wheel-core b { color: #2a1000; font-family: var(--font-head); font-size: clamp(12px, 2.6vw, 16px); font-weight: 800; line-height: 1.2; }
.node {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.4px;
  font-weight: 700;
  font-family: var(--font-head);
  background: #241041;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 8px 13px;
  white-space: nowrap;
  box-shadow: var(--shadow-card);
  transform: translate(-50%, -50%);
}
.node i { width: 7px; height: 7px; border-radius: 50%; background: var(--violet); }
.node.n1 { left: 50%; top: 3%; }
.node.n2 { left: 88%; top: 32%; }
.node.n3 { left: 78%; top: 84%; }
.node.n4 { left: 22%; top: 84%; }
.node.n5 { left: 12%; top: 32%; }

.pillars-list { display: grid; gap: 12px; }
.pillar-row {
  display: flex;
  gap: 13px;
  padding: 15px 17px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.03);
}
.pillar-row .num {
  flex: 0 0 30px;
  width: 30px; height: 30px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 13px;
  background: rgba(250,170,27,0.14);
  color: var(--gold);
}
.pillar-row b { font-family: var(--font-head); font-size: 15.5px; display: block; }
.pillar-row p { font-size: 14.2px; color: var(--muted); margin-top: 3px; }

/* ---------- 20. Engine flow ---------- */
.engine { margin-top: 38px; display: grid; gap: 10px; }
@media (min-width: 900px) { .engine { grid-template-columns: repeat(7, 1fr); align-items: stretch; } }
.step {
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.032);
  padding: 16px 14px;
  position: relative;
  text-align: center;
}
.step .n {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--violet);
  letter-spacing: 1px;
}
.step b { display: block; font-family: var(--font-head); font-size: 14.6px; margin-top: 7px; }
.step span { display: block; font-size: 12.6px; color: var(--muted-2); margin-top: 5px; }
.step.leak { border-color: rgba(248,64,2,0.5); background: linear-gradient(165deg, rgba(248,64,2,0.12), rgba(255,255,255,0.02)); }
.step.leak::after {
  content: "leak";
  position: absolute;
  bottom: -9px; left: 50%;
  transform: translateX(-50%);
  font-size: 9.5px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  background: var(--orange);
  color: #fff;
  border-radius: 20px;
  padding: 2px 9px;
  font-weight: 700;
}

/* ---------- 21. Product reveal ---------- */
.reveal { background: linear-gradient(180deg, var(--ink-600), var(--ink-800)); }
.showcase { margin-top: 40px; display: grid; gap: 34px; align-items: center; }
@media (min-width: 940px) { .showcase { grid-template-columns: 1.06fr 0.94fr; gap: 48px; } }

/* --- over-the-shoulder screenshare walkthrough mock --- */
.walk {
  position: relative;
  border-radius: var(--r-md);
  border: 1px solid var(--line-strong);
  background: #1a0b30;
  box-shadow: var(--shadow-pop);
  overflow: hidden;
}
.walk-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 11px 14px;
  background: #241041;
  border-bottom: 1px solid var(--line);
}
.walk-bar i { width: 10px; height: 10px; border-radius: 50%; display: block; }
.walk-bar i:nth-child(1) { background: #ff5f56; }
.walk-bar i:nth-child(2) { background: #ffbd2e; }
.walk-bar i:nth-child(3) { background: #27c93f; }
.walk-status {
  margin-left: 8px;
  flex: 1;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--muted-2);
  background: #17092b;
  border-radius: 20px;
  padding: 4px 12px;
  white-space: nowrap;
  overflow: hidden;
}
.walk-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #ff9d7a;
}
.walk-live em {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--orange);
  animation: blink 1.6s ease-in-out infinite;
}

.walk-body { display: grid; grid-template-columns: 1fr; gap: 0; }
@media (min-width: 560px) { .walk-body { grid-template-columns: 152px 1fr; } }

.walk-side {
  padding: 14px 12px;
  background: #1d0d36;
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 6px;
  align-content: start;
}
@media (min-width: 560px) { .walk-side { border-bottom: 0; border-right: 1px solid var(--line); } }
.ps-head {
  font-size: 9.5px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--muted-2);
  font-weight: 700;
  margin-bottom: 4px;
}
.stg {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.6px;
  color: #b9aad6;
  padding: 5px 8px;
  border-radius: 8px;
  background: rgba(255,255,255,0.035);
}
.stg b { font-family: var(--font-mono); font-size: 9.5px; color: var(--muted-2); font-weight: 600; }
.stg.done { color: #8ff5ac; }
.stg.done b { color: #5ed884; }
.stg.now {
  background: linear-gradient(96deg, rgba(250,170,27,0.22), rgba(248,64,2,0.1));
  color: #fff;
  border: 1px solid rgba(250,170,27,0.45);
}
.stg.now b { color: var(--gold); }
.stg.rest { opacity: 0.42; }

.walk-screen { position: relative; padding: 16px 15px 52px; min-height: 250px; }
.screen-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 1.4px;
  color: var(--gold);
  border: 1px solid rgba(250,170,27,0.35);
  background: rgba(250,170,27,0.08);
  border-radius: 20px;
  padding: 3px 10px;
}
.screen-title { display: block; font-family: var(--font-head); font-weight: 700; font-size: 14.5px; margin: 9px 0 12px; }
.sline {
  height: 8px;
  border-radius: 20px;
  background: rgba(255,255,255,0.075);
  margin-bottom: 8px;
}
.sline.hi {
  background: linear-gradient(96deg, rgba(250,170,27,0.85), rgba(248,64,2,0.55));
  position: relative;
}
.sline.hi::after {
  content: "this is the line";
  position: absolute;
  top: -15px;
  left: 2px;
  font-size: 9px;
  font-family: var(--font-mono);
  color: var(--gold);
  letter-spacing: 0.6px;
}
.cursor {
  position: absolute;
  right: 44px;
  bottom: 74px;
  width: 15px;
  height: 15px;
  animation: cursorMove 5.5s ease-in-out infinite;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,0.6));
}
@keyframes cursorMove {
  0%, 100% { transform: translate(0, 0); }
  30% { transform: translate(-72px, -26px); }
  60% { transform: translate(-30px, 12px); }
}
.annot {
  position: absolute;
  top: 12px;
  right: 12px;
  max-width: 148px;
  font-size: 10.6px;
  line-height: 1.45;
  color: #ffeed0;
  background: rgba(248,64,2,0.16);
  border: 1px solid rgba(250,170,27,0.4);
  border-radius: 10px;
  padding: 8px 10px;
}
.walk-cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.42);
  border-top: 1px solid var(--line);
  padding: 9px 14px;
  font-size: 11.4px;
  color: #e2d8f6;
}
.walk-cap b { color: var(--gold); font-weight: 700; }

.specs { display: grid; gap: 12px; }
.spec {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--r-sm);
  background: rgba(255,255,255,0.035);
  border: 1px solid var(--line);
  font-size: 14.8px;
}
.spec svg { flex: 0 0 17px; width: 17px; height: 17px; margin-top: 4px; color: var(--gold); }
.spec b { color: #fff; }

/* ---------- 22. Walkthrough quote ---------- */
.excerpt {
  margin-top: 40px;
  border-radius: var(--r-md);
  border: 1px solid var(--line-strong);
  background: linear-gradient(160deg, rgba(157,102,253,0.14), rgba(255,255,255,0.02));
  padding: 28px 24px;
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
}
.excerpt::before {
  content: "\201C";
  position: absolute;
  right: 12px;
  top: -22px;
  font-family: Georgia, serif;
  font-size: 140px;
  line-height: 1;
  color: rgba(255,255,255,0.05);
}
.excerpt .tag {
  font-size: 10.5px;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--gold);
}
.excerpt p { font-size: 15.4px; line-height: 1.68; margin-top: 14px; color: #ded2f3; }
.excerpt p + p { margin-top: 12px; }
.excerpt .quote {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(17px, 3.2vw, 22px);
  line-height: 1.4;
  padding-left: 18px;
  border-left: 4px solid var(--orange);
  color: #fff;
  margin: 18px 0;
}
.excerpt .sign-off {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px dashed var(--line-strong);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  color: var(--muted-2);
}
.excerpt .sign-off b { color: var(--gold); font-family: var(--font-head); font-size: 13px; letter-spacing: 0.4px; }

/* ---------- 23. Journey acts ---------- */
.acts { display: grid; gap: 16px; margin-top: 36px; }
@media (min-width: 820px) { .acts { grid-template-columns: 1fr 1fr; } }
.act {
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  padding: 24px;
  background: linear-gradient(165deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015));
  position: relative;
  overflow: hidden;
}
.act::before {
  content: attr(data-n);
  position: absolute;
  right: 16px; top: 6px;
  font-family: var(--font-head);
  font-size: 66px;
  font-weight: 800;
  line-height: 1;
  color: rgba(255,255,255,0.045);
}
.act .a-tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: 1.6px; color: var(--gold); }
.act b { display: block; font-family: var(--font-head); font-size: 19px; margin-top: 8px; }
.act p { font-size: 14.6px; color: var(--muted); margin-top: 9px; }
.act ul { margin-top: 14px; display: grid; gap: 9px; }
.act li { display: flex; gap: 9px; font-size: 14.2px; color: #ded2f3; }
.act li i { flex: 0 0 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--violet); margin-top: 8px; }

/* ---------- 24. Rule clock ---------- */
.rule { display: grid; gap: 30px; margin-top: 36px; align-items: center; }
@media (min-width: 900px) { .rule { grid-template-columns: 0.8fr 1.2fr; gap: 48px; } }
.dial {
  position: relative;
  aspect-ratio: 1/1;
  max-width: 290px;
  width: 100%;
  margin: 0 auto;
  border-radius: 50%;
  background: conic-gradient(from 200deg, var(--orange), var(--gold) 38%, var(--violet) 72%, var(--orange));
  padding: 3px;
  box-shadow: 0 0 60px rgba(250,170,27,0.24);
  animation: spinSlow 22s linear infinite;
}
@keyframes spinSlow { to { transform: rotate(360deg); } }
.dial-in {
  width: 100%; height: 100%;
  border-radius: 50%;
  background: #1a0b30;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 24px;
  animation: spinSlowR 22s linear infinite;
}
@keyframes spinSlowR { to { transform: rotate(-360deg); } }
.dial-in b { display: block; font-family: var(--font-head); font-size: 44px; font-weight: 800; background: var(--grad-fire); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; line-height: 1; }
.dial-in span { font-size: 12.5px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--muted-2); margin-top: 8px; }
.dial-in small { display: block; font-size: 12.5px; color: var(--muted); margin-top: 10px; line-height: 1.5; }

.q-list { display: grid; gap: 12px; }
.q-item {
  display: flex;
  gap: 14px;
  padding: 16px 18px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.032);
  font-size: 15px;
}
.q-item .qn {
  font-family: var(--font-head);
  font-weight: 800;
  color: var(--orange);
  flex: 0 0 auto;
}

/* ---------- 25. Features ---------- */
.feat { display: grid; gap: 14px; margin-top: 34px; }
@media (min-width: 880px) { .feat { grid-template-columns: repeat(3, 1fr); } }
.feat-card {
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.032);
  padding: 22px;
  transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}
.feat-card:hover { transform: translateY(-4px); border-color: rgba(250,170,27,0.4); background: rgba(250,170,27,0.05); }
.feat-ico {
  width: 42px; height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(157,102,253,0.16);
  color: var(--violet);
  margin-bottom: 15px;
}
.feat-ico svg { width: 21px; height: 21px; }
.feat-card b { display: block; font-family: var(--font-head); font-size: 16.5px; }
.feat-card p { font-size: 14.4px; color: var(--muted); margin-top: 8px; }

/* ---------- 26. Bonuses ---------- */
.bonus-sec { background: linear-gradient(180deg, var(--ink-800), var(--ink-600)); }
.bonus-grid { display: grid; gap: 16px; margin-top: 36px; }
@media (min-width: 860px) { .bonus-grid { grid-template-columns: 1fr 1fr; } }
.bonus {
  display: flex;
  gap: 16px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: linear-gradient(150deg, rgba(255,255,255,0.055), rgba(255,255,255,0.015));
  padding: 22px;
  position: relative;
  overflow: hidden;
}
.bonus::after {
  content: "";
  position: absolute;
  right: -40px; top: -40px;
  width: 130px; height: 130px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(157,102,253,0.28), transparent 70%);
}
.bonus-num {
  flex: 0 0 52px;
  width: 52px; height: 52px;
  border-radius: 14px;
  background: var(--grad-violet);
  display: grid;
  place-items: center;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 17px;
  color: #fff;
  box-shadow: 0 10px 24px rgba(157,102,253,0.3);
}
.bonus b { display: block; font-family: var(--font-head); font-size: 17px; }
.bonus p { font-size: 14.4px; color: var(--muted); margin-top: 7px; }
.bonus .val {
  display: inline-block;
  margin-top: 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.6px;
  color: var(--gold);
  background: rgba(250,170,27,0.1);
  border: 1px solid rgba(250,170,27,0.3);
  border-radius: 999px;
  padding: 4px 11px;
}
.bonus.aha { border-color: rgba(250,170,27,0.45); background: linear-gradient(150deg, rgba(250,170,27,0.13), rgba(248,64,2,0.05)); grid-column: 1 / -1; }
.bonus.aha .bonus-num { background: var(--grad-fire); color: #2a1000; }

/* ---------- 27. Value stack ---------- */
.stack-table {
  margin-top: 34px;
  border-radius: var(--r-md);
  border: 1px solid var(--line-strong);
  overflow: hidden;
  background: rgba(255,255,255,0.028);
}
.stack-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 15px 18px;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
}
.stack-row:last-child { border-bottom: 0; }
.stack-row .it { color: #ded2f3; display: flex; align-items: center; gap: 10px; }
.stack-row .it i { width: 6px; height: 6px; border-radius: 50%; background: var(--violet); flex: 0 0 6px; }
.stack-row .amt { color: var(--muted); font-family: var(--font-mono); font-size: 13.5px; white-space: nowrap; }
.stack-row.total { background: rgba(255,255,255,0.045); }
.stack-row.total .it, .stack-row.total .amt { font-family: var(--font-head); font-weight: 800; color: #fff; font-size: 16px; }
.stack-row.now { background: linear-gradient(96deg, rgba(248,64,2,0.2), rgba(250,170,27,0.1)); }
.stack-row.now .it { font-family: var(--font-head); font-weight: 800; font-size: 16.5px; }
.stack-row.now .amt { font-family: var(--font-head); font-weight: 800; font-size: 24px; color: var(--gold); }

/* ---------- 28. Price card ---------- */
.price-wrap { display: grid; gap: 20px; margin-top: 34px; }
@media (min-width: 880px) { .price-wrap { grid-template-columns: 1.1fr 0.9fr; align-items: center; gap: 40px; } }
.price-card {
  border-radius: var(--r-lg);
  border: 1px solid rgba(250,170,27,0.42);
  background: linear-gradient(165deg, rgba(250,170,27,0.11), rgba(157,102,253,0.08));
  padding: 30px 24px;
  text-align: center;
  box-shadow: var(--shadow-pop);
}
.price-was { font-size: 15px; color: var(--muted-2); }
.price-was s { color: #ff8f66; }
.price-now { font-family: var(--font-head); font-size: clamp(52px, 12vw, 78px); font-weight: 800; line-height: 1; margin: 6px 0 2px; }
.price-fine { font-size: 13.5px; color: var(--muted); }
.price-includes { margin-top: 20px; display: grid; gap: 9px; text-align: left; }
.price-includes li { display: flex; gap: 9px; font-size: 14.2px; color: #e2d8f6; }
.price-includes svg { flex: 0 0 15px; width: 15px; height: 15px; margin-top: 4px; color: var(--green); }

.timer { display: flex; gap: 10px; justify-content: center; margin-top: 22px; }
.timer-unit {
  min-width: 66px;
  border-radius: 14px;
  border: 1px solid var(--line-strong);
  background: rgba(0,0,0,0.28);
  padding: 10px 6px;
}
.timer-unit b { display: block; font-family: var(--font-head); font-size: 25px; font-weight: 800; line-height: 1; }
.timer-unit span { display: block; font-size: 9.5px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted-2); margin-top: 5px; }

/* ---------- 29. Who for ---------- */
.who { display: grid; gap: 16px; margin-top: 34px; }
@media (min-width: 860px) { .who { grid-template-columns: 1fr 1fr; gap: 22px; } }
.who-col { border-radius: var(--r-md); border: 1px solid var(--line); padding: 24px; }
.who-col.yes { border-color: rgba(30,217,79,0.34); background: linear-gradient(165deg, rgba(30,217,79,0.075), rgba(255,255,255,0.015)); }
.who-col.no { border-color: rgba(248,64,2,0.3); background: linear-gradient(165deg, rgba(248,64,2,0.07), rgba(255,255,255,0.015)); }
.who-col h3 { font-size: 18px; margin-bottom: 16px; }
.who-col.yes h3 { color: #8ff5ac; }
.who-col.no h3 { color: #ff9d7a; }
.who-col ul { display: grid; gap: 11px; }
.who-col li { display: flex; gap: 10px; font-size: 14.7px; color: #ded2f3; }
.who-col li svg { flex: 0 0 16px; width: 16px; height: 16px; margin-top: 4px; }
.who-col.yes li svg { color: var(--green); }
.who-col.no li svg { color: #ff6a3d; }

/* ---------- 30. FAQ ---------- */
.faq { margin-top: 32px; display: grid; gap: 10px; }
.qa {
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.03);
  overflow: hidden;
  transition: border-color 0.25s ease, background 0.25s ease;
}
.qa[open] { border-color: rgba(250,170,27,0.4); background: rgba(250,170,27,0.045); }
.qa summary {
  cursor: pointer;
  list-style: none;
  padding: 17px 52px 17px 18px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 15.6px;
  position: relative;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
  content: "+";
  position: absolute;
  right: 18px; top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-head);
  font-size: 22px;
  font-weight: 400;
  color: var(--gold);
  transition: transform 0.25s ease;
}
.qa[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.qa .a { padding: 0 18px 19px; font-size: 14.8px; color: var(--muted); }

/* ---------- 31. Founder note ---------- */
.founder {
  border-radius: var(--r-lg);
  border: 1px solid var(--line-strong);
  background: linear-gradient(160deg, rgba(157,102,253,0.14), rgba(248,64,2,0.06));
  padding: 30px 24px;
  margin-top: 34px;
}
.founder .who-row { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.avatar {
  width: 54px; height: 54px;
  flex: 0 0 54px;
  border-radius: 50%;
  background: var(--grad-fire);
  display: grid;
  place-items: center;
  font-family: var(--font-head);
  font-weight: 800;
  color: #2a1000;
  font-size: 17px;
}
.founder .who-row b { display: block; font-family: var(--font-head); font-size: 16px; }
.founder .who-row span { font-size: 12.5px; color: var(--muted-2); }
.founder p { font-size: 15.3px; color: #e3d9f7; }
.founder p + p { margin-top: 13px; }
.founder .sig { font-family: var(--font-head); font-weight: 800; font-size: 17px; margin-top: 20px; background: var(--grad-fire); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* ---------- 32. Final CTA ---------- */
.final {
  background:
    radial-gradient(700px 400px at 50% 0%, rgba(248,64,2,0.22), transparent 65%),
    linear-gradient(180deg, var(--ink-600), #0f0519);
  border-top: 1px solid var(--line);
}
.final .h2 { max-width: 760px; margin-left: auto; margin-right: auto; }

/* ---------- 33. Footer ---------- */
.footer { background: #0f0519; border-top: 1px solid var(--line); padding: 46px 0 34px; }
.foot-grid { display: grid; gap: 26px; }
@media (min-width: 780px) { .foot-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.footer h4 { font-size: 14px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted-2); margin-bottom: 14px; }
.footer ul { display: grid; gap: 10px; }
.footer a { font-size: 14.4px; color: var(--muted); }
.footer a:hover { color: var(--gold); }
.foot-bottom {
  margin-top: 34px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 14px;
  font-size: 12.5px;
  color: var(--muted-2);
}
.disclaimer-box {
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.025);
  padding: 16px 18px;
  font-size: 12.4px;
  line-height: 1.65;
  color: var(--muted-2);
}

/* ---------- 34. Sticky mobile CTA ---------- */
.sticky-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 600;
  background: rgba(18, 6, 32, 0.94);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--line-strong);
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  gap: 12px;
  transform: translateY(120%);
  transition: transform 0.35s ease;
}
.sticky-cta.show { transform: translateY(0); }
.sticky-cta .sp { flex: 1; min-width: 0; }
.sticky-cta .sp b { display: block; font-family: var(--font-head); font-size: 14px; }
.sticky-cta .sp span { font-size: 11.5px; color: var(--muted-2); }
.sticky-cta .btn { padding: 13px 20px; font-size: 14.5px; }
@media (min-width: 900px) { .sticky-cta { display: none; } }

/* ---------- 35. Reveal animation ---------- */
.rv { opacity: 0; transform: translateY(22px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(.2,.7,.3,1); }
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; }
  * { animation: none !important; }
}

/* ---------- 36. Legal pages ---------- */
.legal { padding: 54px 0 80px; }
.legal-head { border-bottom: 1px solid var(--line); padding-bottom: 24px; margin-bottom: 32px; }
.legal-body { max-width: 800px; }
.legal-body h2 { font-size: clamp(19px, 3.4vw, 25px); margin: 36px 0 12px; }
.legal-body h3 { font-size: 17px; margin: 24px 0 8px; }
.legal-body p { color: #d9cdec; font-size: 15.4px; margin-bottom: 13px; }
.legal-body ul { display: grid; gap: 9px; margin: 0 0 16px; }
.legal-body li { display: flex; gap: 10px; color: #d9cdec; font-size: 15.2px; }
.legal-body li::before { content: ""; flex: 0 0 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--violet); margin-top: 9px; }
.legal-body .note {
  border-radius: var(--r-sm);
  border: 1px solid rgba(250,170,27,0.32);
  background: rgba(250,170,27,0.07);
  padding: 16px 18px;
  font-size: 14.6px;
  color: #f0e6cf;
  margin: 20px 0;
}
.contact-card {
  border-radius: var(--r-md);
  border: 1px solid var(--line-strong);
  background: rgba(255,255,255,0.04);
  padding: 22px;
  margin: 24px 0;
}
.contact-card b { font-family: var(--font-head); font-size: 16px; display: block; }
.contact-card a { color: var(--gold); }