/* =================================================================
   CONTENT SYSTEM COURSE — v5
   Brand: black + orange + blood orange (Inter only, no display font)
   ================================================================= */

:root {
  --bg: #000000;
  --bg-elev: #0a0a0a;
  --bg-card: #0f0f0f;
  --bg-card-2: #131313;
  --bg-card-3: #181818;
  --bg-sidebar: #050505;

  --orange: #ff6a1a;
  --orange-bright: #ff7a2a;
  --orange-soft: #ffb380;
  --orange-glow: rgba(255, 106, 26, 0.5);

  --blood: #c1361b;
  --blood-deep: #8a1f0a;
  --blood-bright: #e64525;

  --text: #f3ece4;
  --text-dim: #c9beb0;
  --text-mute: #7a7068;
  --text-faint: #4f4842;

  --line: rgba(255, 106, 26, 0.18);
  --line-soft: rgba(255, 255, 255, 0.06);
  --line-blood: rgba(193, 54, 27, 0.25);

  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --sidebar-w: 320px;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; }
html, body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
  min-height: 100vh;
  overflow-x: hidden;
}
button { font-family: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; }
a { color: inherit; text-decoration: none; }
input, textarea, select { font-family: inherit; }
::selection { background: var(--orange); color: #000; }

/* =================================================================
   APP SHELL
   ================================================================= */
.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 100vh;
}

.main { position: relative; background: var(--bg); overflow-x: hidden; min-height: 100vh; }
.view { position: relative; min-height: 100vh; }

/* Mobile top bar */
.mobile-top {
  display: none;
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line-soft);
  padding: 14px 18px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.mobile-menu-btn {
  width: 36px; height: 36px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px;
  border-radius: 8px;
  background: rgba(255, 106, 26, 0.08);
  border: 1px solid var(--line);
}
.mobile-menu-btn span { width: 16px; height: 2px; background: var(--orange); border-radius: 2px; }
.mobile-brand {
  display: flex; align-items: center; gap: 8px;
  font-family: 'Inter', sans-serif; font-weight: 900;
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--orange);
}
.mobile-progress {
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--text-mute);
  font-weight: 700;
}

/* =================================================================
   SIDEBAR
   ================================================================= */
.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  background: var(--bg-sidebar);
  border-right: 1px solid var(--line-soft);
  overflow-y: auto;
  z-index: 50;
}

.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255, 106, 26, 0.2); border-radius: 3px; }

.sidebar-inner {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 24px 18px;
}

.sidebar-brand {
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--line-soft);
}

.brand-mark { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }

.brand-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 12px var(--orange);
  animation: glow-pulse 2.5s ease-in-out infinite;
}

@keyframes glow-pulse {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.12); }
}

.brand-text {
  font-family: 'Inter', sans-serif; font-weight: 900;
  font-size: 14px;
  letter-spacing: 0.18em;
  color: var(--orange);
  text-transform: uppercase;
}

.brand-sub {
  font-size: 9px;
  letter-spacing: 0.2em;
  color: var(--text-mute);
  font-weight: 700;
}

.sidebar-progress { margin-bottom: 24px; }

.sp-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 10px;
}
.sp-label {
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--text-mute);
  font-weight: 700;
}
.sp-pct {
  font-family: 'Inter', sans-serif; font-weight: 900;
  font-size: 20px;
  background: linear-gradient(135deg, var(--orange-bright), var(--blood));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.sp-bar {
  height: 6px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 8px;
}
.sp-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--blood), var(--orange), var(--orange-bright));
  border-radius: 999px;
  box-shadow: 0 0 12px var(--orange-glow);
  transition: width 0.6s var(--ease);
}
.sp-meta {
  font-size: 11px;
  color: var(--text-mute);
  letter-spacing: 0.05em;
  display: flex; gap: 6px;
}
.sp-divider { color: var(--text-faint); }

/* Sidebar nav */
.sidebar-nav { flex: 1; }

.snav-link {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  font-size: 13px;
  color: var(--text-dim);
  transition: all 0.15s var(--ease);
}
.snav-link:hover { background: rgba(255, 106, 26, 0.06); color: var(--text); }
.snav-link.active { background: rgba(255, 106, 26, 0.12); color: var(--orange); }

.snav-home {
  margin-bottom: 16px;
  background: rgba(255, 106, 26, 0.04);
  border: 1px solid var(--line-soft);
}
.snav-home:hover { background: rgba(255, 106, 26, 0.1); }
.snav-icon {
  flex-shrink: 0;
  width: 18px;
  text-align: center;
  font-size: 16px;
  color: var(--orange);
}
.snav-text { flex: 1; line-height: 1.3; }

/* Chapter accordion */
.snav-chapter {
  margin-bottom: 8px;
  background: rgba(255, 255, 255, 0.015);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  overflow: hidden;
}

.snav-chapter.complete {
  background: linear-gradient(135deg, rgba(255, 106, 26, 0.05), rgba(255, 255, 255, 0.015));
  border-color: var(--line);
}

.snav-chapter-header {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 12px;
  text-align: left;
  transition: background 0.15s;
}
.snav-chapter-header:hover { background: rgba(255, 106, 26, 0.05); }

.sch-arrow {
  flex-shrink: 0;
  width: 14px;
  font-size: 9px;
  color: var(--orange);
  transition: transform 0.2s var(--ease);
}
.snav-chapter.open .sch-arrow { transform: rotate(90deg); }

.sch-info { flex: 1; }
.sch-num {
  font-size: 9px;
  letter-spacing: 0.22em;
  color: var(--orange);
  font-weight: 800;
  margin-bottom: 2px;
}
.sch-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
}

.sch-prog {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-mute);
  font-weight: 700;
}
.sch-check {
  color: var(--orange);
  font-weight: 800;
}

.snav-chapter-lessons {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s var(--ease);
  padding: 0 6px;
}
.snav-chapter.open .snav-chapter-lessons {
  max-height: 800px;
  padding: 0 6px 8px;
}

.snav-lesson, .snav-quiz {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 6px;
  font-size: 12px;
  color: var(--text-dim);
  transition: all 0.15s;
  margin-bottom: 1px;
}
.snav-lesson:hover, .snav-quiz:hover {
  background: rgba(255, 106, 26, 0.06);
  color: var(--text);
}
.snav-lesson.active, .snav-quiz.active {
  background: rgba(255, 106, 26, 0.15);
  color: var(--orange);
}
.snav-lesson.done .snl-num, .snav-quiz.done .snl-num {
  color: var(--orange);
}

.snl-num {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-mute);
  letter-spacing: 0.03em;
  width: 28px;
  text-align: left;
}
.snl-text {
  flex: 1;
  line-height: 1.3;
  font-size: 11.5px;
}
.snl-status {
  flex-shrink: 0;
  width: 14px;
  text-align: center;
  font-size: 10px;
  color: var(--orange);
  font-weight: 800;
}

.snav-quiz {
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px dashed var(--line-soft);
  font-weight: 600;
}
.snav-quiz .snl-num { font-size: 12px; }

.snav-link-claim {
  margin-top: 20px;
  background: linear-gradient(135deg, rgba(255, 106, 26, 0.15), rgba(193, 54, 27, 0.08));
  border: 1px solid var(--orange);
  font-weight: 700;
  color: var(--orange) !important;
  padding: 12px 14px;
}
.snav-link-claim:hover {
  background: linear-gradient(135deg, rgba(255, 106, 26, 0.22), rgba(193, 54, 27, 0.15));
}

.sidebar-footer {
  padding-top: 18px;
  margin-top: 18px;
  border-top: 1px solid var(--line-soft);
}
.reset-btn {
  font-size: 11px;
  color: var(--text-mute);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 8px 14px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  transition: all 0.15s;
}
.reset-btn:hover { color: var(--blood-bright); border-color: var(--line-blood); }

/* Mobile sidebar */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 49;
  opacity: 0;
  transition: opacity 0.2s;
}
.sidebar-overlay.open { opacity: 1; }

@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .mobile-top { display: flex; }
  .sidebar {
    position: fixed;
    top: 0; left: 0;
    width: 300px;
    height: 100vh;
    transform: translateX(-100%);
    transition: transform 0.25s var(--ease);
  }
  .sidebar.open { transform: translateX(0); }
  .sidebar-overlay.open { display: block; }
}

/* =================================================================
   REVEAL ANIMATIONS
   ================================================================= */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes scaleIn { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: scale(1); } }
@keyframes slideInLeft { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: translateX(0); } }
@keyframes spin { to { transform: rotate(360deg); } }

.orange-grad {
  background: linear-gradient(135deg, var(--orange-bright) 0%, var(--orange) 40%, var(--blood) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* =================================================================
   DASHBOARD
   ================================================================= */
.dash {
  max-width: 940px;
  margin: 0 auto;
  padding: 60px 40px 80px;
}

.dash-hero {
  text-align: center;
  margin-bottom: 60px;
  padding: 40px 0;
  position: relative;
}
.dash-hero::before {
  content: '';
  position: absolute;
  inset: -40px;
  background:
    radial-gradient(600px 300px at 50% 0%, rgba(255, 106, 26, 0.2), transparent 70%),
    radial-gradient(400px 200px at 80% 80%, rgba(193, 54, 27, 0.12), transparent 70%);
  z-index: -1;
  pointer-events: none;
}

.dash .brand-row {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 106, 26, 0.05);
  margin-bottom: 24px;
}
.dash .brand-row .brand-text {
  font-size: 11px;
  letter-spacing: 0.22em;
  font-weight: 700;
}

.dash-title {
  font-family: 'Inter', sans-serif;
  font-size: clamp(34px, 5vw, 60px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--text);
  margin-bottom: 24px;
  font-weight: 800;
  text-transform: none;
}

.dash-sub {
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-dim);
  max-width: 640px;
  margin: 0 auto 36px;
}

.dash-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 20px 40px;
  background: linear-gradient(135deg, var(--orange-bright), var(--orange) 50%, var(--blood));
  color: #000;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.1em;
  border-radius: 999px;
  text-transform: uppercase;
  box-shadow: 0 20px 50px rgba(255, 106, 26, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
  transition: all 0.2s var(--ease);
  margin-bottom: 48px;
}
.dash-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 28px 60px rgba(255, 106, 26, 0.55);
}
.dash-cta svg { width: 16px; height: 16px; }

.dash-progress {
  max-width: 600px;
  margin: 0 auto;
  padding: 28px 32px;
  background: var(--bg-card);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
}
.dp-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
  margin-bottom: 18px;
}
.dp-stat { text-align: center; }
.dp-num {
  font-family: 'Inter', sans-serif; font-weight: 900;
  font-size: 36px;
  line-height: 1;
  background: linear-gradient(135deg, var(--orange-bright), var(--blood));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.dp-label {
  font-size: 11px;
  color: var(--text-mute);
  letter-spacing: 0.1em;
  margin-top: 6px;
  text-transform: uppercase;
  font-weight: 600;
}
.dp-bar {
  height: 6px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 999px;
  overflow: hidden;
}
.dp-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--blood), var(--orange), var(--orange-bright));
  border-radius: 999px;
  box-shadow: 0 0 12px var(--orange-glow);
  transition: width 0.6s var(--ease);
}

/* Dashboard chapters */
.dash-chapters {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin-bottom: 60px;
}

.dash-chapter {
  background: var(--bg-card);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  padding: 32px;
  position: relative;
  overflow: hidden;
}
.dash-chapter::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--orange), transparent);
}
.dash-chapter.complete {
  border-color: var(--orange);
  background: linear-gradient(135deg, rgba(255, 106, 26, 0.06), var(--bg-card));
}

.dchap-header {
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--line-soft);
}
.dchap-num {
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--orange);
  font-weight: 800;
  margin-bottom: 10px;
}
.dchap-title {
  font-family: 'Inter', sans-serif;
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text);
  margin-bottom: 12px;
  font-weight: 800;
  text-transform: none;
}
.dchap-sub {
  font-size: 15px;
  color: var(--text-dim);
  line-height: 1.55;
  margin-bottom: 14px;
}
.dchap-meta {
  display: flex;
  gap: 8px;
  font-size: 12px;
  color: var(--text-mute);
  letter-spacing: 0.05em;
}
.dchap-meta strong { color: var(--orange); }

.dchap-lessons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
@media (max-width: 640px) { .dchap-lessons { grid-template-columns: 1fr; } }

.dlesson {
  display: grid;
  grid-template-columns: 40px 1fr 28px;
  gap: 12px;
  padding: 12px 14px;
  background: var(--bg-card-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  align-items: center;
  transition: all 0.15s var(--ease);
  font-size: 13px;
}
.dlesson:hover {
  border-color: var(--orange);
  background: var(--bg-card-3);
  transform: translateX(2px);
}
.dlesson.done {
  background: linear-gradient(135deg, rgba(255, 106, 26, 0.06), var(--bg-card-2));
  border-color: var(--line);
}

.dl-num {
  font-family: 'Inter', sans-serif; font-weight: 900;
  font-size: 16px;
  line-height: 1;
  background: linear-gradient(135deg, var(--orange-bright), var(--blood));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: normal;
}

.dl-title {
  color: var(--text);
  font-weight: 500;
  line-height: 1.35;
}

.dl-status {
  width: 24px; height: 24px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800;
  font-size: 13px;
  background: rgba(255, 106, 26, 0.1);
  color: var(--orange);
  border: 1px solid var(--line);
}
.dlesson.done .dl-status {
  background: linear-gradient(135deg, var(--orange-bright), var(--blood));
  color: #000;
  border-color: var(--orange);
}

.dlesson-quiz {
  grid-column: span 2;
  background: linear-gradient(135deg, rgba(255, 106, 26, 0.08), var(--bg-card-2));
  border-color: var(--line);
  margin-top: 4px;
}
.dlesson-quiz.done {
  background: linear-gradient(135deg, rgba(255, 106, 26, 0.15), rgba(193, 54, 27, 0.06));
  border-color: var(--orange);
}
.dlesson-quiz .dl-num { font-size: 18px; }
@media (max-width: 640px) { .dlesson-quiz { grid-column: span 1; } }

/* Dashboard bonus */
.dash-bonus {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 28px;
  padding: 36px;
  background: linear-gradient(135deg, rgba(255, 106, 26, 0.1), rgba(193, 54, 27, 0.05));
  border: 1px solid var(--orange);
  border-radius: var(--r-lg);
  box-shadow: 0 30px 80px rgba(255, 106, 26, 0.15);
}
.db-icon {
  font-size: 48px;
  color: var(--orange);
  width: 80px; height: 80px;
  border-radius: 50%;
  background: rgba(255, 106, 26, 0.1);
  display: flex; align-items: center; justify-content: center;
}
.db-eyebrow {
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--orange);
  font-weight: 800;
  margin-bottom: 8px;
}
.db-title {
  font-family: 'Inter', sans-serif; font-weight: 900;
  font-size: 26px;
  color: var(--text);
  text-transform: uppercase;
  margin-bottom: 12px;
}
.db-content p {
  color: var(--text-dim);
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 14px;
}
.db-link {
  color: var(--orange);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.05em;
}
.db-link:hover { color: var(--orange-bright); }

@media (max-width: 640px) {
  .dash { padding: 32px 20px 60px; }
  .dash-hero { padding: 24px 0; margin-bottom: 40px; }
  .dp-row { grid-template-columns: 1fr; gap: 14px; }
  .dash-chapter { padding: 24px 20px; }
  .dash-bonus { grid-template-columns: 1fr; padding: 24px; gap: 18px; }
  .db-icon { width: 60px; height: 60px; font-size: 32px; }
}

/* =================================================================
   LESSON VIEW
   ================================================================= */
.lesson {
  max-width: 820px;
  margin: 0 auto;
  padding: 50px 40px 80px;
}

.lesson-header { margin-bottom: 36px; }

.lesson-breadcrumb {
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--text-mute);
  margin-bottom: 24px;
  display: flex;
  gap: 8px;
  align-items: center;
  font-weight: 600;
  flex-wrap: wrap;
}
.lesson-breadcrumb a { color: var(--orange); }
.lesson-breadcrumb a:hover { color: var(--orange-bright); }
.lb-current { color: var(--text); }

.lesson-numtitle {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 24px;
  align-items: start;
}

.lesson-bignum {
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-size: clamp(48px, 7vw, 84px);
  line-height: 0.9;
  letter-spacing: -0.04em;
  background: linear-gradient(135deg, var(--orange-bright) 0%, var(--orange) 50%, var(--blood) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 4px 24px rgba(255, 106, 26, 0.3));
}

.lesson-eyebrow {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--orange);
  font-weight: 700;
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 106, 26, 0.05);
  margin-bottom: 16px;
}

.lesson-title {
  font-family: 'Inter', sans-serif;
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text);
  font-weight: 800;
  text-transform: none;
}

/* Lesson body */
.lesson-body { margin-bottom: 36px; }

.lb-text {
  font-size: 18px;
  line-height: 1.75;
  color: var(--text-dim);
  margin-bottom: 28px;
}
.lb-text strong { color: var(--text); font-weight: 600; }
.lb-text em { color: var(--orange-soft); font-style: italic; }

.lb-anim { margin: 32px 0; }

.lb-callout {
  margin: 28px 0;
  padding: 22px 26px;
  background: linear-gradient(135deg, rgba(255, 106, 26, 0.08), var(--bg-card));
  border-left: 3px solid var(--orange);
  border-radius: var(--r-md);
}
.lbc-label {
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--orange);
  font-weight: 800;
  margin-bottom: 10px;
  text-transform: uppercase;
}
.lb-callout p {
  font-size: 15px;
  color: var(--text-dim);
  line-height: 1.6;
}
.lb-callout strong { color: var(--text); }

.lb-list {
  margin: 28px 0;
  padding: 22px 26px;
  background: var(--bg-card);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
}
.lbl-label {
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--orange);
  font-weight: 800;
  margin-bottom: 14px;
  text-transform: uppercase;
}
.lb-list ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.lb-list li {
  font-size: 15px;
  color: var(--text-dim);
  line-height: 1.6;
  padding-left: 22px;
  position: relative;
}
.lb-list li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--orange);
  font-weight: 800;
}
.lb-list strong { color: var(--text); }

.lb-steps {
  list-style: none;
  counter-reset: step;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 28px 0;
}
.lb-steps li {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  counter-increment: step;
  padding: 16px 22px;
  background: var(--bg-card);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  transition: all 0.15s;
  font-size: 15px;
  color: var(--text-dim);
  line-height: 1.6;
}
.lb-steps li:hover { border-color: var(--line); transform: translateX(4px); }
.lb-steps li::before {
  content: counter(step, decimal-leading-zero);
  flex-shrink: 0;
  font-family: 'Inter', sans-serif; font-weight: 900;
  font-size: 22px;
  background: linear-gradient(135deg, var(--orange-bright), var(--blood));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  width: 32px;
}

/* Frameworks */
.lb-frameworks {
  margin: 28px 0;
  background: var(--bg-card);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  overflow: hidden;
}
.lbf-row {
  display: grid;
  grid-template-columns: 50px 140px 1fr;
  gap: 14px;
  align-items: center;
  padding: 16px 22px;
  border-bottom: 1px solid var(--line-soft);
  transition: background 0.15s;
}
.lbf-row:last-child { border-bottom: 0; }
.lbf-row:hover { background: var(--bg-card-2); }
.lbf-num {
  font-family: 'Inter', sans-serif; font-weight: 900;
  font-size: 22px;
  background: linear-gradient(135deg, var(--orange-bright), var(--blood));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.lbf-name { font-size: 14px; color: var(--orange); font-weight: 700; }
.lbf-ex { font-size: 14px; color: var(--text-dim); font-style: italic; }
@media (max-width: 640px) {
  .lbf-row { grid-template-columns: 36px 1fr; }
  .lbf-ex { grid-column: span 2; padding-left: 50px; }
}

/* VS cards */
.lb-vs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 28px 0;
}
.lbv-card {
  padding: 22px;
  background: var(--bg-card);
  border-radius: var(--r-md);
}
.lbv-bad { border-left: 3px solid var(--blood); background: linear-gradient(135deg, rgba(193, 54, 27, 0.06), var(--bg-card)); }
.lbv-good { border-left: 3px solid var(--orange); background: linear-gradient(135deg, rgba(255, 106, 26, 0.08), var(--bg-card)); }
.lbv-label {
  font-size: 11px;
  letter-spacing: 0.2em;
  font-weight: 800;
  margin-bottom: 12px;
}
.lbv-bad .lbv-label { color: var(--blood-bright); }
.lbv-good .lbv-label { color: var(--orange); }
.lbv-quote {
  font-style: italic;
  font-size: 14px;
  color: var(--text);
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
  margin-bottom: 12px;
  line-height: 1.5;
}
.lbv-card p { font-size: 13px; color: var(--text-dim); line-height: 1.55; }
.lbv-card strong { color: var(--text); }
@media (max-width: 640px) { .lb-vs { grid-template-columns: 1fr; } }

/* Script example */
.lb-script {
  margin: 28px 0;
  padding: 26px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.lbs-label {
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--orange);
  font-weight: 800;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line-soft);
}
.lbs-line {
  padding: 14px 0;
  border-bottom: 1px dashed var(--line-soft);
}
.lbs-line:last-child { border-bottom: 0; }
.lbs-text {
  font-size: 15px;
  color: var(--text);
  font-weight: 500;
  margin-bottom: 6px;
  line-height: 1.5;
}
.lbs-note {
  font-size: 12px;
  color: var(--text-mute);
  font-style: italic;
  padding-left: 16px;
  border-left: 2px solid var(--orange);
}
.lbs-cta {
  background: rgba(255, 106, 26, 0.06);
  margin: 8px -26px -26px;
  padding: 16px 26px;
  border-radius: 0 0 var(--r-md) var(--r-md);
  border-bottom: 0;
}
.lbs-cta .lbs-text { color: var(--orange-soft); font-weight: 600; }

/* Setup list */
.lb-setup {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 28px 0;
}
.lbst-row {
  display: flex;
  gap: 20px;
  padding: 20px 22px;
  background: var(--bg-card);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  align-items: flex-start;
  transition: all 0.15s;
}
.lbst-row:hover { border-color: var(--line); background: var(--bg-card-2); }
.lbst-rank {
  font-family: 'Inter', sans-serif; font-weight: 900;
  font-size: 30px;
  line-height: 1;
  background: linear-gradient(135deg, var(--orange-bright), var(--blood));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  flex-shrink: 0;
  width: 50px;
}
.lbst-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}
.lbst-desc {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.55;
}

/* MOFU list */
.lb-mofu { display: flex; flex-direction: column; gap: 10px; margin: 28px 0; }
.lbm-row {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 20px;
  padding: 18px 22px;
  background: var(--bg-card);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  align-items: start;
  transition: all 0.15s;
}
.lbm-row:hover { border-color: var(--line); }
@media (max-width: 640px) { .lbm-row { grid-template-columns: 1fr; gap: 6px; } }
.lbm-name { font-size: 14px; font-weight: 700; color: var(--orange); }
.lbm-desc { font-size: 14px; color: var(--text-dim); line-height: 1.55; }

/* Precall list */
.lb-precall { display: flex; flex-direction: column; gap: 10px; margin: 28px 0; }
.lbp-row {
  display: flex;
  gap: 20px;
  padding: 20px 22px;
  background: var(--bg-card);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  align-items: center;
  transition: all 0.15s;
}
.lbp-row:hover { border-color: var(--line); transform: translateX(4px); }
.lbp-letter {
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--orange-bright), var(--blood));
  display: flex; align-items: center; justify-content: center;
  font-family: 'Inter', sans-serif; font-weight: 900;
  font-size: 18px;
  color: #000;
}
.lbp-name { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.lbp-desc { font-size: 13px; color: var(--text-dim); line-height: 1.55; }

/* Takeaway */
.lesson-takeaway {
  margin: 36px 0;
  padding: 26px 30px;
  background: linear-gradient(135deg, rgba(255, 106, 26, 0.1), rgba(193, 54, 27, 0.04));
  border: 1px solid var(--orange);
  border-radius: var(--r-md);
  box-shadow: 0 20px 50px rgba(255, 106, 26, 0.08);
}
.lt-label {
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--orange);
  font-weight: 800;
  margin-bottom: 12px;
  text-transform: uppercase;
}
.lesson-takeaway p {
  font-size: 16px;
  color: var(--text);
  line-height: 1.65;
  font-weight: 500;
}

/* Mark Complete button */
.lesson-complete-bar {
  text-align: center;
  margin: 36px 0;
}
.lc-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 36px;
  background: var(--bg-card);
  color: var(--text);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 2px solid var(--line);
  border-radius: 999px;
  transition: all 0.2s var(--ease);
}
.lc-btn:hover:not(.lc-done) {
  background: linear-gradient(135deg, var(--orange-bright), var(--orange), var(--blood));
  color: #000;
  border-color: var(--orange);
  transform: translateY(-2px);
  box-shadow: 0 20px 50px rgba(255, 106, 26, 0.4);
}
.lc-btn.lc-done {
  background: linear-gradient(135deg, var(--orange-bright), var(--orange), var(--blood));
  color: #000;
  border-color: var(--orange);
  cursor: default;
}
.lc-btn svg { width: 18px; height: 18px; }

/* Lesson nav */
.lesson-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 36px;
}
.ln-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 24px;
  background: var(--bg-card);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  transition: all 0.2s var(--ease);
}
.ln-btn:hover { border-color: var(--orange); transform: translateY(-2px); }
.ln-prev { justify-content: flex-start; text-align: left; }
.ln-next {
  justify-content: flex-end;
  text-align: right;
  background: linear-gradient(135deg, rgba(255, 106, 26, 0.06), var(--bg-card));
  border-color: var(--line);
}
.ln-next:hover { background: linear-gradient(135deg, rgba(255, 106, 26, 0.12), var(--bg-card-2)); }
.ln-next-quiz {
  background: linear-gradient(135deg, rgba(255, 106, 26, 0.15), rgba(193, 54, 27, 0.06));
  border-color: var(--orange);
  box-shadow: 0 10px 30px rgba(255, 106, 26, 0.15);
}
.ln-label {
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--text-mute);
  font-weight: 700;
  margin-bottom: 4px;
  text-transform: uppercase;
}
.ln-name { font-size: 15px; font-weight: 700; color: var(--text); }
.ln-btn svg { width: 18px; height: 18px; color: var(--orange); flex-shrink: 0; }

@media (max-width: 640px) {
  .lesson { padding: 28px 20px 60px; }
  .lesson-numtitle { grid-template-columns: 1fr; gap: 0; }
  .lesson-bignum { font-size: 54px; margin-bottom: 12px; }
  .ln-btn { padding: 16px 18px; }
  .ln-name { font-size: 13px; }
}

/* =================================================================
   CHAPTER QUIZ VIEW
   ================================================================= */
.quiz-view {
  max-width: 760px;
  margin: 0 auto;
  padding: 50px 40px 80px;
}

.quiz-header {
  margin-bottom: 36px;
}

.qh-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px;
  background: linear-gradient(135deg, rgba(255, 106, 26, 0.15), rgba(193, 54, 27, 0.06));
  border: 1px solid var(--orange);
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: 0.22em;
  color: var(--orange);
  font-weight: 800;
  margin-bottom: 20px;
}
.qh-badge span:first-child { font-size: 16px; }

.qh-title {
  font-family: 'Inter', sans-serif;
  font-size: clamp(30px, 4.5vw, 46px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--text);
  margin-bottom: 16px;
  font-weight: 800;
  text-transform: none;
}

.qh-sub {
  font-size: 16px;
  color: var(--text-dim);
  line-height: 1.6;
  max-width: 560px;
}

.qv-card {
  padding: 40px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  position: relative;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4), 0 0 60px rgba(255, 106, 26, 0.08);
}
.qv-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--orange), var(--blood), transparent);
}

.qv-progress {
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 14px;
}
.qv-progress-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--orange), var(--blood));
  border-radius: 999px;
  box-shadow: 0 0 12px var(--orange-glow);
  transition: width 0.5s var(--ease);
}

.qv-step {
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--text-mute);
  font-weight: 700;
  margin-bottom: 24px;
  text-transform: uppercase;
}

.qv-area { animation: fadeUp 0.4s var(--ease-out); }

.qv-q {
  font-size: clamp(18px, 2.4vw, 22px);
  font-weight: 600;
  color: var(--text);
  margin-bottom: 24px;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.qv-options { display: flex; flex-direction: column; gap: 12px; }

.qv-option {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 22px;
  background: var(--bg-card-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  text-align: left;
  transition: all 0.15s var(--ease);
  font-size: 15px;
  color: var(--text);
  line-height: 1.5;
  width: 100%;
}
.qvo-letter {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px;
  font-weight: 800;
  color: var(--text-dim);
  letter-spacing: 0.05em;
  transition: all 0.15s;
}
.qv-option:hover:not(:disabled) {
  border-color: var(--line);
  background: var(--bg-card-3);
  transform: translateY(-1px);
}
.qv-option:hover:not(:disabled) .qvo-letter { border-color: var(--orange); color: var(--orange); }
.qv-option.correct {
  background: linear-gradient(135deg, rgba(255, 106, 26, 0.18), var(--bg-card-2));
  border-color: var(--orange);
  box-shadow: 0 0 0 1px var(--orange) inset, 0 0 30px rgba(255, 106, 26, 0.2);
}
.qv-option.correct .qvo-letter { background: var(--orange); color: #000; border-color: var(--orange); }
.qv-option.incorrect {
  background: linear-gradient(135deg, rgba(193, 54, 27, 0.15), var(--bg-card-2));
  border-color: var(--blood);
  opacity: 0.8;
}
.qv-option.incorrect .qvo-letter { background: var(--blood); color: #fff; border-color: var(--blood); }
.qv-option.disabled { opacity: 0.4; cursor: not-allowed; }

.qv-feedback {
  margin-top: 20px;
  padding: 18px 22px;
  background: var(--bg-card-2);
  border-left: 3px solid var(--orange);
  border-radius: var(--r-sm);
  animation: fadeUp 0.3s var(--ease-out);
}
.qv-feedback.incorrect {
  border-left-color: var(--blood);
  background: linear-gradient(135deg, rgba(193, 54, 27, 0.08), var(--bg-card-2));
}
.qvf-label {
  font-size: 11px;
  letter-spacing: 0.2em;
  font-weight: 800;
  margin-bottom: 8px;
  text-transform: uppercase;
}
.qv-feedback.correct .qvf-label { color: var(--orange); }
.qv-feedback.incorrect .qvf-label { color: var(--blood-bright); }
.qvf-text { font-size: 14px; color: var(--text-dim); line-height: 1.6; }
.qvf-text strong { color: var(--text); }

.qv-next {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  padding: 14px 28px;
  background: var(--orange);
  color: #000;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 999px;
  transition: all 0.15s;
}
.qv-next:hover { transform: translateY(-2px); box-shadow: 0 15px 40px rgba(255, 106, 26, 0.4); }
.qv-next svg { width: 14px; height: 14px; }

.qv-result {
  text-align: center;
  padding: 20px 0;
  animation: fadeUp 0.5s var(--ease-out);
}
.qvr-score {
  font-family: 'Inter', sans-serif; font-weight: 900;
  font-size: 80px;
  line-height: 1;
  background: linear-gradient(135deg, var(--orange-bright), var(--blood));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 6px;
  letter-spacing: -0.02em;
}
.qvr-score span { font-size: 0.4em; opacity: 0.5; }
.qvr-out {
  font-size: 11px;
  color: var(--text-mute);
  letter-spacing: 0.22em;
  font-weight: 800;
  margin-bottom: 24px;
}
.qvr-title {
  font-family: 'Inter', sans-serif; font-weight: 900;
  font-size: 28px;
  color: var(--text);
  text-transform: uppercase;
  margin-bottom: 14px;
}
.qvr-msg {
  font-size: 15px;
  color: var(--text-dim);
  line-height: 1.6;
  max-width: 460px;
  margin: 0 auto 24px;
}
.qvr-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.qv-retake {
  padding: 14px 28px;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--text-dim);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 999px;
  transition: all 0.15s;
}
.qv-retake:hover { color: var(--orange); border-color: var(--orange); }
.qv-continue {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  background: linear-gradient(135deg, var(--orange-bright), var(--orange), var(--blood));
  color: #000;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 999px;
  box-shadow: 0 15px 40px rgba(255, 106, 26, 0.35);
  transition: all 0.15s;
}
.qv-continue:hover { transform: translateY(-2px); box-shadow: 0 22px 50px rgba(255, 106, 26, 0.5); }
.qv-continue svg { width: 14px; height: 14px; }

@media (max-width: 640px) {
  .quiz-view { padding: 32px 20px 60px; }
  .qv-card { padding: 24px 18px; }
  .qv-q { font-size: 17px; }
  .qv-option { padding: 14px 16px; font-size: 13px; }
}

/* =================================================================
   CLAIM + CERT (unchanged from v2)
   ================================================================= */
.claim {
  max-width: 940px;
  margin: 0 auto;
  padding: 60px 40px 80px;
}
.claim-hero {
  text-align: center;
  margin-bottom: 60px;
  padding: 40px 0;
  position: relative;
}
.claim-hero::before {
  content: '';
  position: absolute;
  inset: -40px;
  background: radial-gradient(700px 350px at 50% 0%, rgba(255, 106, 26, 0.18), transparent 70%);
  z-index: -1;
}
.claim-title {
  font-family: 'Inter', sans-serif;
  font-size: clamp(30px, 4.5vw, 50px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--text);
  margin: 24px 0;
  font-weight: 800;
  text-transform: none;
}
.claim-sub {
  font-size: 17px;
  line-height: 1.65;
  color: var(--text-dim);
  max-width: 620px;
  margin: 0 auto 32px;
}
.claim-stats {
  display: inline-flex;
  gap: 36px;
  padding: 20px 32px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.cs-stat { text-align: center; }
.cs-num {
  font-family: 'Inter', sans-serif; font-weight: 900;
  font-size: 32px;
  line-height: 1;
  background: linear-gradient(135deg, var(--orange-bright), var(--blood));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.cs-label {
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--text-mute);
  font-weight: 700;
  margin-top: 4px;
  text-transform: uppercase;
}
.claim-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}
.claim-bonus { display: flex; flex-direction: column; gap: 14px; }
.cb-item {
  display: flex;
  gap: 14px;
  padding: 18px 20px;
  background: var(--bg-card);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  align-items: flex-start;
  transition: all 0.15s;
}
.cb-item:hover { border-color: var(--orange); transform: translateX(4px); }
.cb-check {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--orange-bright), var(--blood));
  display: flex; align-items: center; justify-content: center;
  color: #000;
  font-weight: 800;
  font-size: 14px;
}
.cb-name { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.cb-desc { font-size: 13px; color: var(--text-mute); line-height: 1.55; }

.claim-form {
  position: sticky;
  top: 40px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 32px;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.6), 0 0 80px rgba(255, 106, 26, 0.08);
  overflow: hidden;
}
.claim-form::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--orange), var(--blood), transparent);
}
.cf-brand {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 24px;
}
.cf-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 12px var(--orange);
  animation: glow-pulse 2.5s ease-in-out infinite;
}
.cf-text {
  font-family: 'Inter', sans-serif; font-weight: 900;
  font-size: 13px;
  letter-spacing: 0.2em;
  color: var(--orange);
  text-transform: uppercase;
}
.cf-field { margin-bottom: 14px; }
.cf-field label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.15em;
  color: var(--text-mute);
  font-weight: 700;
  margin-bottom: 6px;
  text-transform: uppercase;
}
.cf-field input,
.cf-field select {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  padding: 14px 16px;
  font-size: 14px;
  color: var(--text);
  outline: 0;
  transition: border-color 0.2s;
}
.cf-field input:focus,
.cf-field select:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 1px var(--orange) inset;
}
.cf-field select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff6a1a' stroke-width='2.5'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 14px;
  padding-right: 38px;
  cursor: pointer;
}
.cf-field select option { background: var(--bg-card); color: var(--text); }
.vc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.vc-opt { position: relative; cursor: pointer; }
.vc-opt input { position: absolute; opacity: 0; pointer-events: none; }
.vc-card {
  padding: 16px 12px;
  background: var(--bg);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  text-align: center;
  transition: all 0.15s;
}
.vc-opt:hover .vc-card { border-color: var(--line); background: var(--bg-card-2); }
.vc-opt input:checked + .vc-card {
  background: linear-gradient(135deg, rgba(255, 106, 26, 0.18), rgba(193, 54, 27, 0.08));
  border-color: var(--orange);
  box-shadow: 0 0 0 1px var(--orange) inset;
}
.vc-num {
  font-family: 'Inter', sans-serif; font-weight: 900;
  font-size: 26px;
  line-height: 1;
  background: linear-gradient(135deg, var(--orange-bright), var(--blood));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.vc-label {
  font-size: 9px;
  letter-spacing: 0.15em;
  color: var(--text-mute);
  font-weight: 700;
  margin-top: 4px;
  text-transform: uppercase;
}
.vc-opt input:checked + .vc-card .vc-label { color: var(--orange); }
.cf-consent {
  margin: 18px 0 20px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  font-size: 11px;
  color: var(--text-mute);
  line-height: 1.55;
  font-style: italic;
}
.cf-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  background: linear-gradient(135deg, var(--orange-bright), var(--orange) 50%, var(--blood));
  color: #000;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.1em;
  padding: 18px 28px;
  border-radius: 999px;
  box-shadow: 0 20px 50px rgba(255, 106, 26, 0.4);
  text-transform: uppercase;
  transition: all 0.2s;
}
.cf-submit:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 28px 60px rgba(255, 106, 26, 0.55);
}
.cf-submit:disabled { opacity: 0.5; cursor: wait; }
.cf-submit svg { width: 14px; height: 14px; }
.cfs-spinner {
  width: 14px; height: 14px;
  border: 2px solid rgba(0, 0, 0, 0.2);
  border-top-color: #000;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}
.cf-error {
  margin-top: 14px;
  padding: 10px 14px;
  background: rgba(193, 54, 27, 0.12);
  border: 1px solid var(--blood);
  border-radius: 8px;
  color: var(--blood-bright);
  font-size: 13px;
  text-align: center;
}
.claim-success {
  text-align: center;
  padding: 60px 30px;
  background: var(--bg-card);
  border: 1px solid var(--orange);
  border-radius: var(--r-lg);
  box-shadow: 0 30px 80px rgba(255, 106, 26, 0.15);
}
.cs-check {
  width: 80px; height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--orange-bright), var(--blood));
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 24px;
  color: #000;
  box-shadow: 0 20px 50px rgba(255, 106, 26, 0.4);
}
.cs-check svg { width: 36px; height: 36px; }
.cs-title {
  font-family: 'Inter', sans-serif; font-weight: 900;
  font-size: 36px;
  color: var(--text);
  text-transform: uppercase;
  margin-bottom: 14px;
}
.claim-success p { font-size: 15px; color: var(--text-dim); line-height: 1.6; max-width: 380px; margin: 0 auto 20px; }
.cs-link { color: var(--orange); font-weight: 700; font-size: 14px; letter-spacing: 0.05em; }
@media (max-width: 800px) {
  .claim-inner { grid-template-columns: 1fr; }
  .claim-form { position: static; }
}
@media (max-width: 640px) {
  .claim { padding: 32px 20px 60px; }
  .claim-stats { flex-direction: row; gap: 20px; padding: 16px 20px; }
}

/* Certificate */
.cert { max-width: 760px; margin: 0 auto; padding: 80px 40px; }
.cert-card {
  position: relative;
  padding: 70px 50px;
  background: linear-gradient(135deg, rgba(255, 106, 26, 0.08), var(--bg-card));
  border: 1px solid var(--orange);
  border-radius: var(--r-lg);
  text-align: center;
  box-shadow: 0 40px 120px rgba(255, 106, 26, 0.2);
  overflow: hidden;
}
.cert-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 106, 26, 0.1), transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(193, 54, 27, 0.08), transparent 50%);
  pointer-events: none;
}
.cert-corners .cc {
  position: absolute;
  width: 30px; height: 30px;
  border: 2px solid var(--orange);
}
.cc.tl { top: 20px; left: 20px; border-right: 0; border-bottom: 0; }
.cc.tr { top: 20px; right: 20px; border-left: 0; border-bottom: 0; }
.cc.bl { bottom: 20px; left: 20px; border-right: 0; border-top: 0; }
.cc.br { bottom: 20px; right: 20px; border-left: 0; border-top: 0; }
.cert-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 30px;
  font-family: 'Inter', sans-serif; font-weight: 900;
  font-size: 13px;
  letter-spacing: 0.22em;
  color: var(--orange);
  position: relative;
}
.cert-eyebrow {
  font-size: 11px;
  letter-spacing: 0.3em;
  color: var(--text-mute);
  font-weight: 700;
  margin-bottom: 20px;
  position: relative;
}
.cert-title {
  font-family: 'Inter', sans-serif;
  font-size: clamp(30px, 4.5vw, 50px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--text);
  margin-bottom: 24px;
  position: relative;
  font-weight: 800;
  text-transform: none;
}
.cert-sub {
  font-size: 16px;
  color: var(--text-dim);
  line-height: 1.65;
  max-width: 500px;
  margin: 0 auto 36px;
  position: relative;
}
.cert-stats {
  display: flex;
  justify-content: center;
  gap: 48px;
  margin-bottom: 36px;
  padding: 24px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: var(--r-md);
  position: relative;
}
.ct-stat { text-align: center; }
.ct-num {
  font-family: 'Inter', sans-serif; font-weight: 900;
  font-size: 38px;
  line-height: 1;
  background: linear-gradient(135deg, var(--orange-bright), var(--blood));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.ct-label {
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--text-mute);
  font-weight: 700;
  margin-top: 6px;
  text-transform: uppercase;
}
.cert-date {
  font-size: 13px;
  color: var(--text-mute);
  letter-spacing: 0.05em;
  margin-bottom: 36px;
  position: relative;
}
.cert-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 30px;
  background: linear-gradient(135deg, var(--orange-bright), var(--orange), var(--blood));
  color: #000;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 999px;
  box-shadow: 0 15px 40px rgba(255, 106, 26, 0.4);
  position: relative;
  transition: all 0.2s;
}
.cert-btn:hover { transform: translateY(-2px); box-shadow: 0 22px 50px rgba(255, 106, 26, 0.55); }

.not-found {
  text-align: center;
  padding: 120px 40px;
}
.not-found h2 {
  font-family: 'Inter', sans-serif; font-weight: 900;
  font-size: 36px;
  color: var(--text);
  text-transform: uppercase;
  margin-bottom: 20px;
}
.btn-link {
  color: var(--orange);
  font-weight: 700;
}

/* =================================================================
   ANIMATION BLOCKS — shared base
   ================================================================= */
.anim-block {
  background: var(--bg-card);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  padding: 28px;
  position: relative;
  overflow: hidden;
}
.anim-block::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--orange), transparent);
  opacity: 0.4;
}
.anim-label {
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--orange);
  font-weight: 800;
  margin-bottom: 20px;
  text-transform: uppercase;
}

/* fiveGames */
.games-stage {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}
.game-tile {
  padding: 18px 16px;
  background: var(--bg-card-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  opacity: 0;
  transform: translateY(20px);
  animation: tileIn 0.5s var(--ease-out) forwards;
  animation-delay: var(--delay);
  transition: transform 0.2s, border-color 0.2s;
}
.game-tile:hover { transform: translateY(-3px); border-color: var(--line); }
.tile-highlight {
  background: linear-gradient(135deg, rgba(255, 106, 26, 0.18), rgba(193, 54, 27, 0.08));
  border-color: var(--orange);
  box-shadow: 0 0 30px rgba(255, 106, 26, 0.15);
}
@keyframes tileIn { to { opacity: 1; transform: translateY(0); } }
.gt-num {
  font-family: 'Inter', sans-serif; font-weight: 900;
  font-size: 22px;
  background: linear-gradient(135deg, var(--orange-bright), var(--blood));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 8px;
}
.gt-name { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 6px; line-height: 1.3; }
.gt-desc { font-size: 11px; color: var(--text-dim); line-height: 1.4; margin-bottom: 10px; }
.gt-tag {
  display: inline-block;
  font-size: 9px;
  letter-spacing: 0.15em;
  padding: 3px 8px;
  border-radius: 999px;
  font-weight: 800;
  text-transform: uppercase;
}
.gt-tag.bad { background: rgba(193, 54, 27, 0.18); color: var(--blood-bright); }
.gt-tag.neutral { background: rgba(255, 255, 255, 0.05); color: var(--text-mute); }
.gt-tag.good { background: var(--orange); color: #000; box-shadow: 0 0 12px rgba(255, 106, 26, 0.4); }

/* dollarsPerView */
.dpv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 640px) { .dpv-grid { grid-template-columns: 1fr; } }
.dpv-card {
  padding: 24px 22px;
  background: var(--bg-card-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  text-align: center;
}
.dpv-card-good {
  background: linear-gradient(135deg, rgba(255, 106, 26, 0.12), var(--bg-card-2));
  border-color: var(--orange);
}
.dpv-stat-num {
  font-family: 'Inter', sans-serif; font-weight: 900;
  font-size: 38px;
  line-height: 1;
  color: var(--text);
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}
.dpv-stat-label {
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--text-mute);
  font-weight: 700;
  margin-bottom: 12px;
}
.dpv-divider {
  width: 60%;
  height: 1px;
  background: var(--line-soft);
  margin: 14px auto;
}
.dpv-result.dpv-bad { color: var(--blood-bright); }
.dpv-result.dpv-good {
  background: linear-gradient(135deg, var(--orange-bright), var(--blood));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.dpv-bottom {
  margin-top: 14px;
  font-size: 11px;
  color: var(--text-mute);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
}
.dpv-card-good .dpv-bottom { color: var(--orange); }

/* swipeStack */
.swipe-stage { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 640px) { .swipe-stage { grid-template-columns: repeat(2, 1fr); } }
.swipe-pillar { text-align: center; }
.sp-label { font-size: 10px; letter-spacing: 0.15em; color: var(--orange); font-weight: 700; margin-bottom: 10px; }
.sp-cards { position: relative; height: 110px; margin-bottom: 8px; }
.sp-card {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--bg-card-3), var(--bg-card));
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  opacity: 0;
  transform: translateY(20px) scale(0.95);
  animation: cardStack 0.6s var(--ease-out) forwards;
  animation-delay: var(--d);
}
.sp-card:nth-child(odd) { border-color: var(--line); }
.sp-cards .sp-card:nth-child(1) { top: 0; }
.sp-cards .sp-card:nth-child(2) { top: 2px; left: 2px; }
.sp-cards .sp-card:nth-child(3) { top: 4px; left: 4px; }
.sp-cards .sp-card:nth-child(4) { top: 6px; left: 6px; }
.sp-cards .sp-card:nth-child(n+5) { top: 8px; left: 8px; }
@keyframes cardStack { to { opacity: 1; transform: translateY(0) scale(1); } }
.sp-count { font-size: 12px; color: var(--text-mute); font-weight: 700; letter-spacing: 0.05em; }

/* swipeAnnotations */
.swipe-annotated { display: grid; grid-template-columns: 200px 1fr; gap: 24px; align-items: start; }
@media (max-width: 640px) { .swipe-annotated { grid-template-columns: 1fr; } }
.sa-video {
  aspect-ratio: 9 / 16;
  background: linear-gradient(135deg, var(--bg-card-3), var(--bg));
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
}
.sa-screen { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 106, 26, 0.1), transparent); }
.sa-play-icon {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 50px; height: 50px;
  border-radius: 50%;
  background: rgba(255, 106, 26, 0.2);
  border: 2px solid var(--orange);
  display: flex; align-items: center; justify-content: center;
  color: var(--orange);
  font-size: 18px;
}
.sa-likes {
  position: absolute;
  bottom: 14px; right: 14px;
  font-size: 11px;
  color: var(--orange);
  font-weight: 700;
  background: rgba(0, 0, 0, 0.5);
  padding: 4px 10px;
  border-radius: 999px;
}
.sa-notes { display: flex; flex-direction: column; gap: 8px; }
.sa-note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 14px;
  background: var(--bg-card-2);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.5;
  opacity: 0;
  animation: fadeUp 0.4s var(--ease-out) forwards;
}
.sa-note:nth-child(1) { animation-delay: 0.1s; }
.sa-note:nth-child(2) { animation-delay: 0.2s; }
.sa-note:nth-child(3) { animation-delay: 0.3s; }
.sa-note:nth-child(4) { animation-delay: 0.4s; }
.sa-note:nth-child(5) { animation-delay: 0.5s; }
.sa-bullet { color: var(--orange); font-size: 8px; margin-top: 6px; }
.sa-key {
  color: var(--orange);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 10px;
  margin-right: 6px;
}

/* hookStructure */
.hook-stage { display: grid; grid-template-columns: 180px 1fr; gap: 28px; align-items: start; }
@media (max-width: 640px) { .hook-stage { grid-template-columns: 1fr; } }
.hook-phone {
  position: relative;
  width: 180px; height: 320px;
  margin: 0 auto;
  background: #1a1a1a;
  border-radius: 24px;
  padding: 12px;
  border: 2px solid #333;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.hp-screen {
  position: relative;
  width: 100%; height: 100%;
  background: linear-gradient(180deg, var(--bg-card-2), var(--bg));
  border-radius: 16px;
  overflow: hidden;
}
.hp-text-overlay {
  position: absolute;
  top: 20px; left: 12px; right: 12px;
  font-family: 'Inter', sans-serif; font-weight: 900;
  font-size: 14px;
  color: #fff;
  text-align: center;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8);
  letter-spacing: -0.01em;
  animation: hookTextPulse 3s ease-in-out infinite;
}
@keyframes hookTextPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
.hp-subject {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 80px; height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--bg-card-3), #2a2a2a);
  border: 1px solid var(--line);
  animation: subjectPulse 2s ease-in-out infinite;
}
@keyframes subjectPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 106, 26, 0.3); }
  50% { box-shadow: 0 0 0 20px rgba(255, 106, 26, 0); }
}
.hp-captions {
  position: absolute;
  bottom: 30px; left: 12px; right: 12px;
  text-align: center;
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
  line-height: 1.3;
  text-transform: uppercase;
}
.hp-pulse {
  position: absolute;
  top: 50%; left: 50%;
  width: 200px; height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 106, 26, 0.2), transparent 70%);
  transform: translate(-50%, -50%);
  pointer-events: none;
  animation: pulseRing 2.5s ease-in-out infinite;
}
@keyframes pulseRing {
  0%, 100% { opacity: 0.3; transform: translate(-50%, -50%) scale(0.9); }
  50% { opacity: 0.7; transform: translate(-50%, -50%) scale(1.1); }
}
.hook-components { display: flex; flex-direction: column; gap: 10px; }
.hook-comp {
  display: grid;
  grid-template-columns: 36px 32px 1fr;
  gap: 14px;
  padding: 14px 16px;
  background: var(--bg-card-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  align-items: center;
  transition: all 0.15s;
}
.hook-comp:hover { border-color: var(--orange); transform: translateX(4px); }
.hc-num {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--orange-bright), var(--blood));
  display: flex; align-items: center; justify-content: center;
  font-family: 'Inter', sans-serif; font-weight: 900;
  font-size: 14px;
  color: #000;
}
.hc-icon { font-size: 22px; text-align: center; }
.hc-name { font-size: 11px; letter-spacing: 0.2em; color: var(--orange); font-weight: 800; margin-bottom: 4px; }
.hc-desc { font-size: 12px; color: var(--text-dim); line-height: 1.45; }

/* contrastArcs */
.contrast-stage { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 640px) { .contrast-stage { grid-template-columns: 1fr; } }
.contrast-arc {
  padding: 18px;
  background: var(--bg-card-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  text-align: center;
}
.ca-label { font-size: 11px; letter-spacing: 0.2em; color: var(--orange); font-weight: 800; margin-bottom: 8px; }
.ca-svg { width: 100%; max-width: 240px; height: auto; margin: 0 auto; }
.ca-path-anim { stroke-dasharray: 300; stroke-dashoffset: 300; animation: drawArc 1.5s var(--ease-out) forwards; }
@keyframes drawArc { to { stroke-dashoffset: 0; } }
.ca-arc-value { font-family: 'Inter', sans-serif; font-weight: 900; font-size: 18px; color: var(--orange); margin: 6px 0; }
.ca-arc-quote { font-size: 12px; color: var(--text-dim); font-style: italic; line-height: 1.4; }

/* legoBricks */
.lego-stage { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; position: relative; }
@media (max-width: 640px) { .lego-stage { grid-template-columns: repeat(2, 1fr); } }
.lego-brick {
  padding: 16px 12px;
  background: var(--bg-card-2);
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  text-align: center;
  opacity: 0;
  transform: translateY(40px) scale(0.8);
  animation: brickDrop 0.5s var(--ease-out) forwards;
  animation-delay: var(--d);
  position: relative;
}
.lego-brick::before {
  content: '';
  position: absolute;
  top: -4px; left: 20%; right: 20%;
  height: 4px;
  background: var(--orange);
  border-radius: 4px 4px 0 0;
  opacity: 0.4;
}
@keyframes brickDrop { to { opacity: 1; transform: translateY(0) scale(1); } }
.lb-num {
  font-family: 'Inter', sans-serif; font-weight: 900;
  font-size: 18px;
  background: linear-gradient(135deg, var(--orange-bright), var(--blood));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
  margin-bottom: 4px;
}
.lb-name { font-size: 11px; font-weight: 700; color: var(--text); letter-spacing: 0.03em; }
.lego-output {
  grid-column: span 4;
  margin-top: 14px;
  padding: 24px;
  background: linear-gradient(135deg, rgba(255, 106, 26, 0.15), rgba(193, 54, 27, 0.08));
  border: 1px solid var(--orange);
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  gap: 20px;
  opacity: 0;
  animation: fadeUp 0.6s var(--ease-out) forwards;
  animation-delay: var(--d);
}
@media (max-width: 640px) { .lego-output { grid-column: span 2; } }
.lo-label { font-size: 11px; letter-spacing: 0.22em; color: var(--orange); font-weight: 800; }
.lo-video {
  width: 60px; height: 80px;
  background: var(--bg);
  border-radius: 8px;
  border: 2px solid var(--orange);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px;
}
.lo-play { color: var(--orange); font-size: 16px; }
.lo-label2 { font-size: 8px; color: var(--orange); letter-spacing: 0.1em; font-weight: 700; }

/* qaStaircase */
.qa-stairs { display: flex; flex-direction: column; gap: 8px; }
.qa-step {
  padding: 14px 18px;
  background: var(--bg-card-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  opacity: 0;
  transform: translateX(-20px);
  animation: slideInLeft 0.5s var(--ease-out) forwards;
  animation-delay: var(--d);
  margin-left: 0;
}
.qa-step:nth-child(2) { margin-left: 20px; }
.qa-step:nth-child(3) { margin-left: 40px; }
.qa-step:nth-child(4) { margin-left: 60px; }
.qa-step:nth-child(5) { margin-left: 80px; }
.qa-cta {
  background: linear-gradient(135deg, rgba(255, 106, 26, 0.15), rgba(193, 54, 27, 0.08));
  border-color: var(--orange);
  box-shadow: 0 0 30px rgba(255, 106, 26, 0.1);
}
.qa-line { font-size: 14px; color: var(--text); margin-bottom: 6px; line-height: 1.4; font-weight: 500; }
.qa-q { font-size: 12px; color: var(--text-mute); font-style: italic; }
.qa-arrow { color: var(--orange); font-weight: 800; margin-right: 4px; }
.qa-arrow.good { color: var(--orange-bright); }
.qa-q em { color: var(--orange-soft); }

/* comprehensionDecay */
.decay-stage { background: var(--bg); border-radius: var(--r-md); padding: 20px; }
.decay-svg { width: 100%; height: auto; }
.decay-path { stroke-dasharray: 800; stroke-dashoffset: 800; animation: drawDecay 2.5s var(--ease-out) forwards; }
@keyframes drawDecay { to { stroke-dashoffset: 0; } }
.decay-bounce { opacity: 0; animation: bouncePop 0.5s var(--ease-out) 2.5s forwards; }
@keyframes bouncePop { 0% { opacity: 0; r: 0; } 60% { opacity: 1; r: 10; } 100% { opacity: 1; r: 6; } }

/* dopamineHits */
.dopa-stage-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.dopa-card {
  padding: 22px 18px;
  background: var(--bg-card-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  text-align: center;
}
.dopa-0 { background: linear-gradient(135deg, rgba(193, 54, 27, 0.12), var(--bg-card-2)); }
.dopa-1 { background: linear-gradient(135deg, rgba(255, 106, 26, 0.08), var(--bg-card-2)); }
.dopa-2 {
  background: linear-gradient(135deg, rgba(255, 106, 26, 0.18), var(--bg-card-2));
  border-color: var(--orange);
  box-shadow: 0 0 30px rgba(255, 106, 26, 0.15);
}
.dopa-num {
  font-family: 'Inter', sans-serif; font-weight: 900;
  font-size: 48px;
  line-height: 1;
  background: linear-gradient(135deg, var(--orange-bright), var(--blood));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 14px;
}
.dopa-bar {
  width: 100%; height: 6px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 12px;
}
.dopa-fill {
  height: 100%; width: 0;
  background: linear-gradient(90deg, var(--orange), var(--blood));
  border-radius: 999px;
  animation: fillBar 1.2s var(--ease-out) 0.3s forwards;
}
.dopa-fill { --w: 0%; }
@keyframes fillBar { to { width: var(--w); } }
.dopa-label { font-size: 10px; letter-spacing: 0.2em; color: var(--text-mute); font-weight: 700; margin-bottom: 6px; text-transform: uppercase; }
.dopa-status { font-size: 13px; font-weight: 700; color: var(--text); }

/* sequenceCarousel */
.seq-stage { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.seq-tile {
  padding: 16px;
  background: var(--bg-card-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  opacity: 0;
  transform: translateY(20px);
  animation: tileIn 0.5s var(--ease-out) forwards;
  animation-delay: var(--d);
  position: relative;
  transition: transform 0.2s, border-color 0.2s;
}
.seq-tile:hover { transform: translateY(-3px); border-color: var(--orange); }
.seq-hot {
  background: linear-gradient(135deg, rgba(255, 106, 26, 0.15), rgba(193, 54, 27, 0.08));
  border-color: var(--orange);
  box-shadow: 0 0 20px rgba(255, 106, 26, 0.15);
}
.st-num {
  font-family: 'Inter', sans-serif; font-weight: 900;
  font-size: 20px;
  background: linear-gradient(135deg, var(--orange-bright), var(--blood));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 8px;
}
.st-name { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.st-formula { font-size: 11px; color: var(--orange); font-weight: 600; letter-spacing: 0.03em; }
.st-badge {
  display: inline-block;
  margin-top: 8px;
  font-size: 8px;
  padding: 3px 7px;
  background: var(--orange);
  color: #000;
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: 0.1em;
}

/* seriesLoop */
.series-stage { padding: 8px 0; }
.series-row { display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; margin-bottom: 14px; }
@media (max-width: 640px) { .series-row { grid-template-columns: repeat(5, 1fr); } }
.ser-tile {
  aspect-ratio: 1;
  background: var(--bg-card-2);
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: var(--text-mute);
  font-weight: 700;
  position: relative;
}
.ser-done {
  background: linear-gradient(135deg, rgba(255, 106, 26, 0.18), rgba(193, 54, 27, 0.08));
  border-color: var(--orange);
  color: var(--orange);
}
.ser-check { position: absolute; bottom: 4px; right: 4px; font-size: 9px; color: var(--orange); }
.ser-current {
  background: linear-gradient(135deg, rgba(255, 106, 26, 0.3), rgba(193, 54, 27, 0.15));
  border-color: var(--orange);
  color: #fff;
  box-shadow: 0 0 20px rgba(255, 106, 26, 0.3);
}
.ser-pulse {
  position: absolute;
  inset: -2px;
  border-radius: 6px;
  border: 2px solid var(--orange);
  animation: pulseRing2 1.5s ease-in-out infinite;
}
@keyframes pulseRing2 { 0%, 100% { opacity: 0.6; transform: scale(1); } 50% { opacity: 0; transform: scale(1.1); } }
.series-caption { text-align: center; font-size: 13px; color: var(--text-dim); font-style: italic; }
.series-caption em { color: var(--orange-soft); }

/* contentMinutes */
.cm-stage { display: grid; grid-template-columns: 1fr 1fr 1.5fr; gap: 14px; }
@media (max-width: 640px) { .cm-stage { grid-template-columns: 1fr; } }
.cm-card {
  padding: 20px 18px;
  background: var(--bg-card-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  text-align: center;
}
.cm-card-big {
  background: linear-gradient(135deg, rgba(255, 106, 26, 0.15), rgba(193, 54, 27, 0.08));
  border-color: var(--orange);
  box-shadow: 0 0 30px rgba(255, 106, 26, 0.15);
}
.cm-bar-wrap {
  width: 100%; height: 6px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 14px;
}
.cm-bar {
  height: 100%; width: 0;
  background: linear-gradient(90deg, var(--orange), var(--blood));
  border-radius: 999px;
  animation: fillBar 1.5s var(--ease-out) 0.3s forwards;
}
.cm-bar { --w: 0%; }
.cm-num {
  font-family: 'Inter', sans-serif; font-weight: 900;
  font-size: 44px;
  line-height: 1;
  background: linear-gradient(135deg, var(--orange-bright), var(--blood));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.02em;
}
.cm-unit { font-size: 9px; letter-spacing: 0.22em; color: var(--text-mute); font-weight: 700; margin: 6px 0 10px; text-transform: uppercase; }
.cm-label { font-size: 12px; color: var(--text); font-weight: 500; }

/* phoneFraming */
.frame-stage { display: flex; justify-content: center; padding: 20px 0; }
.frame-phone {
  position: relative;
  width: 240px; height: 420px;
  background: #1a1a1a;
  border-radius: 28px;
  padding: 14px;
  border: 3px solid #333;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}
.fp-screen {
  position: relative;
  width: 100%; height: 100%;
  background: linear-gradient(180deg, #2a2a2a, #1a1a1a);
  border-radius: 18px;
  overflow: hidden;
}
.fp-grid { position: absolute; inset: 0; }
.fp-line { position: absolute; background: rgba(255, 106, 26, 0.4); }
.fp-h { left: 0; right: 0; height: 1px; }
.fp-v { top: 0; bottom: 0; width: 1px; }
.fp-h1 { top: 33.3%; }
.fp-h2 { top: 66.6%; }
.fp-v1 { left: 33.3%; }
.fp-v2 { left: 66.6%; }
.fp-subject {
  position: absolute;
  left: 50%; top: 26%;
  transform: translate(-50%, 0);
  width: 90px;
  display: flex; flex-direction: column; align-items: center;
}
.fp-head {
  width: 60px; height: 70px;
  background: linear-gradient(180deg, #3a3a3a, #2a2a2a);
  border-radius: 50% 50% 45% 45%;
  position: relative;
}
.fp-eyes {
  position: absolute;
  top: 32%; left: 50%;
  transform: translateX(-50%);
  width: 24px; height: 4px;
  background: var(--orange);
  border-radius: 2px;
  box-shadow: 0 0 12px rgba(255, 106, 26, 0.5);
}
.fp-body {
  width: 90px; height: 140px;
  background: linear-gradient(180deg, #2a2a2a, #1a1a1a);
  border-radius: 12px 12px 0 0;
  margin-top: -8px;
}
.fp-annot {
  position: absolute;
  font-size: 9px;
  color: var(--orange);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: rgba(0, 0, 0, 0.7);
  padding: 4px 8px;
  border-radius: 4px;
}
.fp-annot-eyes { top: 32%; right: 10px; border: 1px solid var(--orange); }
.fp-annot-space { top: 10%; left: 10px; border: 1px solid var(--orange); }

/* lightingPositions */
.lighting-stage { background: var(--bg); border-radius: var(--r-md); padding: 20px; }
.light-svg { width: 100%; height: auto; max-width: 480px; margin: 0 auto; display: block; }
.light-key {
  filter: drop-shadow(0 0 12px rgba(255, 106, 26, 0.6));
  animation: keyPulse 2.5s ease-in-out infinite;
}
@keyframes keyPulse { 0%, 100% { opacity: 0.9; } 50% { opacity: 1; filter: drop-shadow(0 0 20px rgba(255, 106, 26, 0.9)); } }

/* silenceRemoval */
.wave-stage { padding: 10px 0; }
.wave-row {
  display: grid;
  grid-template-columns: 60px 1fr 50px;
  gap: 14px;
  align-items: center;
  margin-bottom: 10px;
}
.wave-label { font-size: 11px; letter-spacing: 0.15em; color: var(--orange); font-weight: 800; text-align: right; }
.wave-bars { display: flex; align-items: center; height: 60px; gap: 1px; }
.wave-bar {
  flex: 1;
  background: var(--text-dim);
  border-radius: 1px;
  min-height: 4px;
}
.wave-bar.silence { background: rgba(193, 54, 27, 0.4); }
.wave-bar.good { background: linear-gradient(180deg, var(--orange), var(--blood)); }
.wave-duration { font-family: 'Inter', sans-serif; font-weight: 900; font-size: 18px; color: var(--text); text-align: center; }
.wave-arrow {
  text-align: center;
  font-size: 12px;
  color: var(--orange);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 8px 0;
}

/* captionTyping */
.caption-stage { display: grid; grid-template-columns: 200px 1fr; gap: 24px; align-items: center; }
@media (max-width: 640px) { .caption-stage { grid-template-columns: 1fr; } }
.cap-phone {
  width: 200px; height: 360px;
  background: #1a1a1a;
  border-radius: 26px;
  padding: 12px;
  border: 2px solid #333;
  margin: 0 auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.cap-screen {
  position: relative;
  width: 100%; height: 100%;
  background: linear-gradient(180deg, #2a2a2a, #1a1a1a);
  border-radius: 16px;
  overflow: hidden;
}
.cap-subject {
  position: absolute;
  top: 35%; left: 50%;
  transform: translate(-50%, -50%);
  width: 100px; height: 100px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3a3a3a, #2a2a2a);
  border: 1px solid #444;
}
.cap-caption-area {
  position: absolute;
  bottom: 30px; left: 12px; right: 12px;
  text-align: center;
}
.cap-text {
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.3;
}
.cap-word {
  display: inline-block;
  margin: 0 2px;
  opacity: 0;
  animation: capWord 3.5s ease-out infinite;
}
.cap-word:nth-child(1) { animation-delay: 0s; }
.cap-word:nth-child(2) { animation-delay: 0.4s; }
.cap-word:nth-child(3) { animation-delay: 0.8s; }
.cap-word:nth-child(4) { animation-delay: 1.2s; }
.cap-word:nth-child(5) { animation-delay: 1.6s; }
@keyframes capWord {
  0% { opacity: 0; transform: translateY(8px); }
  15%, 65% { opacity: 1; transform: translateY(0); }
  85%, 100% { opacity: 0; transform: translateY(0); }
}
.cap-highlight { color: var(--orange); text-shadow: 0 2px 6px rgba(255, 106, 26, 0.5); }
.caption-callout {
  padding: 18px 22px;
  background: var(--bg-card-2);
  border-left: 3px solid var(--orange);
  border-radius: var(--r-sm);
  font-size: 14px;
  color: var(--text-dim);
  line-height: 1.6;
}
.caption-callout strong { color: var(--text); }

/* repsTimeline */
.reps-stage { padding: 20px 0; }
.reps-track {
  position: relative;
  height: 100px;
  margin: 30px 0;
  padding: 0 40px;
}
.reps-track::before {
  content: '';
  position: absolute;
  left: 40px; right: 40px;
  top: 50%;
  height: 4px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 999px;
}
.reps-fill {
  position: absolute;
  left: 40px;
  top: 50%;
  height: 4px;
  width: 0;
  background: linear-gradient(90deg, var(--blood), var(--orange), var(--orange-bright));
  border-radius: 999px;
  box-shadow: 0 0 12px var(--orange-glow);
  animation: fillTrack 2s var(--ease-out) 0.5s forwards;
}
@keyframes fillTrack { to { width: calc(100% - 80px); } }
.reps-milestone { position: absolute; top: 50%; transform: translate(-50%, -50%); }
.rm-dot {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--bg);
  border: 3px solid var(--orange);
  position: relative;
  z-index: 1;
  box-shadow: 0 0 16px rgba(255, 106, 26, 0.5);
}
.reps-major .rm-dot {
  width: 22px; height: 22px;
  background: linear-gradient(135deg, var(--orange-bright), var(--blood));
  border-color: var(--orange-bright);
}
.rm-num {
  position: absolute;
  top: -40px; left: 50%;
  transform: translateX(-50%);
  font-family: 'Inter', sans-serif; font-weight: 900;
  font-size: 22px;
  background: linear-gradient(135deg, var(--orange-bright), var(--blood));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.rm-label {
  position: absolute;
  top: 28px; left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 600;
}

/* postingCalendar */
.cal-stage { padding: 6px 0; }
.cal-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 6px;
}
.cal-header span {
  text-align: center;
  font-size: 9px;
  letter-spacing: 0.15em;
  color: var(--text-mute);
  font-weight: 700;
  text-transform: uppercase;
}
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 18px;
}
.cal-day {
  aspect-ratio: 1;
  background: var(--bg-card-2);
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  padding: 4px;
  position: relative;
  opacity: 0;
  animation: tileIn 0.3s var(--ease-out) forwards;
  animation-delay: var(--d);
}
.cd-num { font-size: 9px; color: var(--text-mute); font-weight: 700; }
.cd-pillar { position: absolute; bottom: 4px; left: 4px; right: 4px; height: 4px; border-radius: 2px; }
.cal-p1 .cd-pillar { background: #ff6a1a; }
.cal-p2 .cd-pillar { background: #ff9050; }
.cal-p3 .cd-pillar { background: #c1361b; }
.cal-p4 .cd-pillar { background: #ffb380; }
.cal-legend { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; font-size: 11px; color: var(--text-dim); }
.cl-item { display: flex; align-items: center; gap: 6px; }
.cl-dot { width: 10px; height: 4px; border-radius: 2px; }
.cl-p1 { background: #ff6a1a; }
.cl-p2 { background: #ff9050; }
.cl-p3 { background: #c1361b; }
.cl-p4 { background: #ffb380; }

/* algorithmSampling */
.algo-stage-row {
  display: grid;
  grid-template-columns: 1fr 24px 1fr 24px 1fr 24px 1fr;
  gap: 8px;
  align-items: center;
}
@media (max-width: 700px) {
  .algo-stage-row { grid-template-columns: 1fr; }
  .algo-arrow { display: none; }
}
.algo-pool {
  padding: 14px 10px;
  background: var(--bg-card-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  text-align: center;
}
.algo-pool-viral {
  background: linear-gradient(135deg, rgba(255, 106, 26, 0.2), rgba(193, 54, 27, 0.1));
  border-color: var(--orange);
  box-shadow: 0 0 30px rgba(255, 106, 26, 0.2);
}
.ap-label { font-size: 9px; letter-spacing: 0.18em; color: var(--orange); font-weight: 800; margin-bottom: 6px; text-transform: uppercase; }
.ap-count {
  font-family: 'Inter', sans-serif; font-weight: 900;
  font-size: 26px;
  line-height: 1;
  background: linear-gradient(135deg, var(--orange-bright), var(--blood));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 8px;
}
.ap-dots {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 2px;
  min-height: 50px;
  margin-bottom: 8px;
}
.algo-pool-2 .ap-dots, .algo-pool-3 .ap-dots { grid-template-columns: repeat(10, 1fr); }
.ap-dot {
  width: 100%;
  aspect-ratio: 1;
  background: var(--orange);
  border-radius: 50%;
  opacity: 0;
  animation: dotPop 0.3s var(--ease-out) forwards;
  animation-delay: var(--d);
}
@keyframes dotPop { to { opacity: 0.7; } }
.ap-dots-viral {
  background:
    radial-gradient(circle at 20% 30%, var(--orange) 1px, transparent 2px),
    radial-gradient(circle at 70% 60%, var(--orange) 1px, transparent 2px),
    radial-gradient(circle at 40% 80%, var(--orange-bright) 1px, transparent 2px),
    radial-gradient(circle at 90% 20%, var(--blood) 1px, transparent 2px),
    radial-gradient(circle at 10% 70%, var(--orange) 1px, transparent 2px);
  background-size: 8px 8px;
  min-height: 50px;
}
.ap-desc { font-size: 10px; color: var(--text-mute); letter-spacing: 0.05em; }
.algo-arrow { font-size: 20px; color: var(--orange); text-align: center; }

/* minutesStacking */
.stack-stage { padding: 20px 0; }
.stack-track {
  position: relative;
  height: 80px;
  padding: 0 30px;
  margin: 30px 0;
}
.stack-track::before {
  content: '';
  position: absolute;
  left: 30px; right: 30px;
  top: 50%;
  height: 8px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
}
.stack-fill {
  position: absolute;
  left: 30px;
  top: 50%;
  height: 8px;
  width: 0;
  background: linear-gradient(90deg, var(--blood), var(--orange), var(--orange-bright));
  border-radius: 4px;
  box-shadow: 0 0 12px var(--orange-glow);
  animation: fillTrack2 2s var(--ease-out) 0.5s forwards;
}
@keyframes fillTrack2 { to { width: calc(100% - 60px); } }
.stack-marker { position: absolute; top: 50%; transform: translate(-50%, -50%); z-index: 2; }
.stack-marker::before {
  content: '';
  display: block;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--bg);
  border: 3px solid var(--orange);
  margin: 0 auto;
  box-shadow: 0 0 12px var(--orange-glow);
}
.stack-major::before {
  width: 22px; height: 22px;
  background: linear-gradient(135deg, var(--orange-bright), var(--blood));
}
.sm-label {
  position: absolute;
  top: 20px; left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  color: var(--orange);
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
  line-height: 1.3;
}
.sm-label span {
  display: block;
  font-size: 9px;
  color: var(--text-mute);
  font-weight: 600;
  letter-spacing: 0.05em;
}
.stack-blocks { display: none; }

/* downsellLadder */
.ladder-stage { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.ladder-step {
  display: grid;
  grid-template-columns: 70px 1fr 130px;
  gap: 16px;
  padding: 16px 22px;
  background: var(--bg-card-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  align-items: center;
  opacity: 0;
  transform: translateY(20px);
  animation: tileIn 0.5s var(--ease-out) forwards;
  animation-delay: var(--d);
}
.ladder-step-1 { margin-left: 0; }
.ladder-step-2 { margin-left: 20px; }
.ladder-step-3 { margin-left: 40px; }
.ladder-step-4 { margin-left: 60px; }
.ladder-step-5 { margin-left: 80px; }
@media (max-width: 640px) {
  .ladder-step { grid-template-columns: 50px 1fr; }
  .ls-exchange { grid-column: span 2; padding-left: 66px; }
  .ladder-step-1, .ladder-step-2, .ladder-step-3, .ladder-step-4, .ladder-step-5 { margin-left: 0; }
}
.ls-tier { font-size: 10px; letter-spacing: 0.2em; color: var(--orange); font-weight: 800; }
.ls-name { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.ls-price { font-size: 12px; color: var(--orange-soft); font-weight: 600; }
.ls-exchange { font-size: 11px; color: var(--text-mute); font-style: italic; line-height: 1.4; }
.ladder-arrow {
  text-align: center;
  font-size: 11px;
  color: var(--text-mute);
  letter-spacing: 0.05em;
  margin: 2px 0;
}

/* sprintTimeline */
.sprint-stage { padding: 14px 0; }
.sprint-track {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
@media (max-width: 700px) { .sprint-track { grid-template-columns: 1fr; } }
.sprint-phase {
  padding: 18px 16px;
  background: var(--bg-card-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  opacity: 0;
  transform: translateY(20px);
  animation: tileIn 0.5s var(--ease-out) forwards;
  animation-delay: var(--d);
  position: relative;
}
.sprint-quitting {
  background: linear-gradient(135deg, rgba(193, 54, 27, 0.12), var(--bg-card-2));
  border-color: var(--blood);
}
.spp-week { font-size: 10px; letter-spacing: 0.2em; color: var(--orange); font-weight: 800; margin-bottom: 6px; }
.spp-name {
  font-family: 'Inter', sans-serif; font-weight: 900;
  font-size: 20px;
  color: var(--text);
  text-transform: uppercase;
  margin-bottom: 10px;
  letter-spacing: -0.005em;
}
.spp-tasks { font-size: 12px; color: var(--text-dim); line-height: 1.5; }
.spp-warn {
  margin-top: 10px;
  padding: 6px 10px;
  background: rgba(193, 54, 27, 0.15);
  border-radius: 4px;
  font-size: 10px;
  color: var(--blood-bright);
  letter-spacing: 0.05em;
  font-weight: 700;
  text-align: center;
}

@media (max-width: 640px) { .anim-block { padding: 18px; } }

/* =================================================================
   CHAPTER PROGRESS BAR (top of every lesson)
   ================================================================= */
.chap-progress {
  margin-bottom: 32px;
  padding: 20px 24px;
  background: linear-gradient(135deg, rgba(255, 106, 26, 0.06), var(--bg-card));
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  position: relative;
  overflow: hidden;
}
.chap-progress::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--orange), transparent);
}

.cp-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  flex-wrap: wrap;
  gap: 8px;
}
.cp-chapter {
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--orange);
  font-weight: 800;
}
.cp-motivator {
  font-size: 12px;
  color: var(--text);
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 4px 12px;
  background: rgba(255, 106, 26, 0.12);
  border: 1px solid var(--line);
  border-radius: 999px;
}

.cp-track {
  position: relative;
  height: 16px;
  margin: 16px 0 14px;
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 999px;
  padding: 0 4px;
  overflow: hidden;
}
.cp-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0;
  background: linear-gradient(90deg, var(--blood), var(--orange), var(--orange-bright));
  border-radius: 999px;
  box-shadow: 0 0 16px var(--orange-glow);
  transition: width 1.6s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 1;
  position: relative;
}
.cp-fill::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 30px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  animation: cpShine 2.2s ease-in-out infinite;
}
@keyframes cpShine {
  0% { transform: translateX(-100px); opacity: 0; }
  20%, 80% { opacity: 1; }
  100% { transform: translateX(60px); opacity: 0; }
}
.cp-dot {
  flex: 1;
  height: 8px;
  background: transparent;
  border-radius: 4px;
  margin: 0 1px;
  position: relative;
  z-index: 2;
  transition: all 0.15s var(--ease);
}
.cp-dot:hover {
  background: rgba(255, 255, 255, 0.08);
  transform: scaleY(1.4);
}
.cp-dot.done {
  background: rgba(255, 255, 255, 0.15);
}
.cp-dot.current {
  background: rgba(255, 255, 255, 0.3);
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.4);
  transform: scaleY(1.4);
}

.cp-meta {
  display: flex;
  gap: 8px;
  font-size: 12px;
  color: var(--text-mute);
  letter-spacing: 0.04em;
}
.cp-meta strong { color: var(--orange); font-weight: 700; }
.cp-divider { color: var(--text-faint); }

/* =================================================================
   FLASHCARD DECK
   ================================================================= */
.fc-deck { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.fc-progress {
  font-size: 11px;
  letter-spacing: 0.15em;
  color: var(--text-mute);
  font-weight: 700;
  text-transform: uppercase;
}
.fc-progress span { color: var(--orange); font-family: 'Inter', sans-serif; font-weight: 900; font-size: 16px; }

.fc-stage {
  width: 100%;
  max-width: 440px;
  perspective: 1200px;
}

.fc-card {
  position: relative;
  width: 100%;
  min-height: 200px;
  cursor: pointer;
  transition: transform 0.7s var(--ease);
  transform-style: preserve-3d;
}
.fc-card.flipped { transform: rotateY(180deg); }

.fc-inner {
  position: relative;
  width: 100%;
  min-height: 200px;
  transform-style: preserve-3d;
}

.fc-front, .fc-back {
  position: absolute;
  inset: 0;
  padding: 28px 24px;
  background: var(--bg-card-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}
.fc-back {
  background: linear-gradient(135deg, rgba(255, 106, 26, 0.15), var(--bg-card-2));
  border-color: var(--orange);
  transform: rotateY(180deg);
}

.fc-eyebrow {
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--orange);
  font-weight: 800;
  margin-bottom: 14px;
  text-transform: uppercase;
}
.fc-q { font-size: 17px; color: var(--text); font-weight: 600; line-height: 1.45; margin-bottom: 18px; }
.fc-a { font-size: 15px; color: var(--text); line-height: 1.6; margin-bottom: 18px; }
.fc-hint {
  font-size: 11px;
  color: var(--text-mute);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: auto;
}

.fc-controls { display: flex; gap: 12px; }
.fc-btn {
  padding: 10px 22px;
  background: var(--bg-card-2);
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: all 0.15s;
}
.fc-btn:hover { color: var(--orange); border-color: var(--orange); }

/* =================================================================
   TOGGLE SWITCH
   ================================================================= */
.ts-wrap { display: flex; flex-direction: column; gap: 14px; }
.ts-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 4px;
  background: var(--bg);
  border-radius: 999px;
  border: 1px solid var(--line-soft);
}
.ts-tab {
  padding: 12px 20px;
  background: transparent;
  color: var(--text-mute);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 999px;
  transition: all 0.2s var(--ease);
}
.ts-tab.active.ts-tab-bad {
  background: linear-gradient(135deg, rgba(193, 54, 27, 0.2), rgba(193, 54, 27, 0.1));
  color: var(--blood-bright);
  box-shadow: 0 0 0 1px var(--blood) inset;
}
.ts-tab.active.ts-tab-good {
  background: linear-gradient(135deg, var(--orange-bright), var(--orange), var(--blood));
  color: #000;
  box-shadow: 0 0 20px rgba(255, 106, 26, 0.3);
}

.ts-content {
  padding: 22px 24px;
  background: var(--bg-card-2);
  border-radius: var(--r-md);
  border: 1px solid var(--line-soft);
  animation: fadeIn 0.3s var(--ease-out);
}
.ts-bad { border-left: 3px solid var(--blood); }
.ts-good { border-left: 3px solid var(--orange); }
.ts-quote {
  font-style: italic;
  font-size: 15px;
  color: var(--text);
  line-height: 1.5;
  margin-bottom: 14px;
}
.ts-note { font-size: 13px; color: var(--text-dim); line-height: 1.55; }

/* =================================================================
   INTERACTIVE SLIDER
   ================================================================= */
.is-wrap { display: flex; flex-direction: column; gap: 18px; }
.is-display {
  text-align: center;
  padding: 24px;
  background: var(--bg-card-2);
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  min-height: 120px;
}
.is-value-big {
  font-family: 'Inter', sans-serif; font-weight: 900;
  font-size: 44px;
  line-height: 1;
  background: linear-gradient(135deg, var(--orange-bright), var(--blood));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 10px;
  letter-spacing: -0.02em;
}
.is-context {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.55;
}
.is-context strong { color: var(--text); }

.is-track { padding: 12px 6px 0; }
.is-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 999px;
  outline: none;
}
.is-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--orange-bright), var(--blood));
  cursor: pointer;
  box-shadow: 0 0 12px var(--orange-glow), 0 0 0 1px rgba(255, 255, 255, 0.15) inset;
  transition: transform 0.15s;
}
.is-range::-webkit-slider-thumb:hover { transform: scale(1.2); }
.is-range::-moz-range-thumb {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--orange-bright), var(--blood));
  cursor: pointer;
  border: 0;
}

.is-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  font-size: 11px;
  color: var(--text-mute);
  letter-spacing: 0.05em;
}
.is-labels span {
  transition: color 0.2s;
  text-align: center;
  flex: 1;
}
.is-labels span.active { color: var(--orange); font-weight: 700; }

/* =================================================================
   CLICK REVEAL — proper 3D flip animation
   ================================================================= */
.cr-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.cr-card {
  position: relative;
  width: 100%;
  min-height: 110px;
  background: transparent;
  border: 0;
  padding: 0;
  text-align: left;
  cursor: pointer;
  perspective: 1200px;
  -webkit-perspective: 1200px;
}

.cr-inner {
  position: relative;
  width: 100%;
  min-height: 110px;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transition: transform 0.7s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.cr-card.flipped .cr-inner {
  transform: rotateY(180deg);
}

.cr-face {
  position: absolute;
  inset: 0;
  width: 100%;
  min-height: 110px;
  padding: 18px 22px;
  border-radius: var(--r-md);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.cr-front {
  background: var(--bg-card-2);
  border: 1px solid var(--line);
}

.cr-back {
  background: linear-gradient(135deg, rgba(255, 106, 26, 0.18), var(--bg-card-2));
  border: 1px solid var(--orange);
  box-shadow: 0 0 24px rgba(255, 106, 26, 0.15) inset;
  transform: rotateY(180deg);
}

.cr-prompt {
  font-size: 15px;
  color: var(--text);
  font-weight: 600;
  line-height: 1.45;
  margin-bottom: 10px;
}
.cr-hint {
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--orange);
  font-weight: 800;
  text-transform: uppercase;
  margin-top: auto;
}
.cr-hint-back { color: var(--orange-bright); }
.cr-answer {
  font-size: 14px;
  color: var(--text);
  line-height: 1.6;
  font-weight: 500;
}

/* =================================================================
   CHECKLIST
   ================================================================= */
.cl-list { display: flex; flex-direction: column; gap: 8px; }
.cl-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: var(--bg-card-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  width: 100%;
  text-align: left;
  transition: all 0.15s var(--ease);
}
.cl-item:hover:not(.done) {
  border-color: var(--line);
  background: var(--bg-card-3);
  transform: translateX(2px);
}
.cl-item.done {
  background: linear-gradient(135deg, rgba(255, 106, 26, 0.08), var(--bg-card-2));
  border-color: var(--line);
}
.cl-item.done .cl-text { color: var(--text-mute); text-decoration: line-through; }

.cl-check {
  flex-shrink: 0;
  width: 22px; height: 22px;
  border-radius: 6px;
  border: 2px solid var(--line-soft);
  transition: all 0.2s var(--ease);
  position: relative;
}
.cl-item:hover:not(.done) .cl-check { border-color: var(--orange); }
.cl-item.done .cl-check {
  background: linear-gradient(135deg, var(--orange-bright), var(--blood));
  border-color: var(--orange);
}
.cl-item.done .cl-check::after {
  content: '✓';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000;
  font-weight: 800;
  font-size: 13px;
}

.cl-text { font-size: 14px; color: var(--text); line-height: 1.5; transition: color 0.2s; }

.cl-progress {
  margin-top: 14px;
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.15em;
  color: var(--text-mute);
  font-weight: 700;
  text-transform: uppercase;
}
.cl-progress.all-done {
  color: var(--orange);
  font-size: 14px;
}

/* =================================================================
   SCENARIO PICKER
   ================================================================= */
.sp-wrap { display: flex; flex-direction: column; gap: 14px; }
.sp-prompt {
  padding: 18px 20px;
  background: var(--bg-card-2);
  border-left: 3px solid var(--orange);
  border-radius: var(--r-sm);
  font-size: 15px;
  color: var(--text);
  font-weight: 500;
  line-height: 1.55;
}
.sp-options { display: flex; flex-direction: column; gap: 8px; }
.sp-option {
  padding: 14px 18px;
  background: var(--bg-card-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  text-align: left;
  font-size: 14px;
  color: var(--text);
  line-height: 1.45;
  transition: all 0.15s var(--ease);
}
.sp-option:hover { border-color: var(--line); transform: translateX(3px); }
.sp-option.picked {
  background: linear-gradient(135deg, rgba(255, 106, 26, 0.12), var(--bg-card-2));
  border-color: var(--orange);
  box-shadow: 0 0 0 1px var(--orange) inset;
}

.sp-result:empty { display: none; }
.sp-answer {
  padding: 18px 22px;
  background: linear-gradient(135deg, rgba(255, 106, 26, 0.1), var(--bg-card-2));
  border: 1px solid var(--orange);
  border-radius: var(--r-md);
  animation: fadeUp 0.4s var(--ease-out);
}
.sp-answer-label {
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--orange);
  font-weight: 800;
  margin-bottom: 10px;
}
.sp-answer-body { font-size: 14px; color: var(--text); line-height: 1.6; }

/* =================================================================
   HOTSPOT
   ================================================================= */
.hs-wrap { display: flex; flex-direction: column; gap: 14px; }
.hs-prompt { font-size: 14px; color: var(--text-dim); line-height: 1.55; }
.hs-stage {
  position: relative;
  background: var(--bg-card-2);
  border-radius: var(--r-md);
  border: 1px solid var(--line-soft);
  padding: 24px;
  min-height: 200px;
}
.hs-spot {
  position: absolute;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(255, 106, 26, 0.2);
  border: 2px solid var(--orange);
  cursor: pointer;
  animation: hsPulse 2s ease-in-out infinite;
  transform: translate(-50%, -50%);
}
@keyframes hsPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 106, 26, 0.6); }
  50% { box-shadow: 0 0 0 12px rgba(255, 106, 26, 0); }
}
.hs-spot.hit {
  background: linear-gradient(135deg, var(--orange-bright), var(--blood));
  animation: none;
}
.hs-spot.miss { animation: hsShake 0.6s ease-in-out; }
@keyframes hsShake {
  0%, 100% { transform: translate(-50%, -50%); }
  25% { transform: translate(-60%, -50%); }
  75% { transform: translate(-40%, -50%); }
}
.hs-correct { color: var(--orange); font-weight: 700; padding: 12px 16px; background: rgba(255,106,26,0.08); border-radius: 8px; }
.hs-wrong { color: var(--blood-bright); font-weight: 700; padding: 12px 16px; background: rgba(193,54,27,0.08); border-radius: 8px; }

/* =================================================================
   NEW QUIZ TYPES — type tag + T/F + slider + multi + reorder + match
   ================================================================= */
.qv-typetag {
  display: inline-block;
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--orange);
  font-weight: 800;
  margin-bottom: 14px;
  padding: 4px 12px;
  background: rgba(255, 106, 26, 0.1);
  border: 1px solid var(--line);
  border-radius: 999px;
  text-transform: uppercase;
}

/* True / False */
.qv-tf {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.qv-tfbtn {
  padding: 36px 20px;
  background: var(--bg-card-2);
  border: 2px solid var(--line-soft);
  border-radius: var(--r-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  transition: all 0.2s var(--ease);
}
.qv-tfbtn:hover:not(:disabled) {
  border-color: var(--orange);
  transform: translateY(-3px);
}
.qvtf-icon {
  font-size: 38px;
  font-family: 'Inter', sans-serif; font-weight: 900;
  color: var(--text-dim);
  width: 60px; height: 60px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.04);
  border: 2px solid var(--line-soft);
  transition: all 0.2s;
}
.qv-tfbtn:hover:not(:disabled) .qvtf-icon { border-color: var(--orange); color: var(--orange); }
.qvtf-label {
  font-family: 'Inter', sans-serif; font-weight: 900;
  font-size: 20px;
  letter-spacing: 0.15em;
  color: var(--text);
}
.qv-tfbtn.correct {
  background: linear-gradient(135deg, rgba(255, 106, 26, 0.18), var(--bg-card-2));
  border-color: var(--orange);
  box-shadow: 0 0 0 1px var(--orange) inset, 0 0 30px rgba(255, 106, 26, 0.2);
}
.qv-tfbtn.correct .qvtf-icon { background: var(--orange); color: #000; border-color: var(--orange); }
.qv-tfbtn.correct .qvtf-label { color: var(--orange); }
.qv-tfbtn.incorrect {
  background: linear-gradient(135deg, rgba(193, 54, 27, 0.15), var(--bg-card-2));
  border-color: var(--blood);
  opacity: 0.85;
}
.qv-tfbtn.incorrect .qvtf-icon { background: var(--blood); color: #fff; border-color: var(--blood); }
.qv-tfbtn.disabled { opacity: 0.4; cursor: not-allowed; }

/* Slider quiz */
.qv-slider {
  padding: 24px 16px;
  background: var(--bg-card-2);
  border-radius: var(--r-md);
  border: 1px solid var(--line-soft);
}
.qvs-value {
  text-align: center;
  font-family: 'Inter', sans-serif; font-weight: 900;
  font-size: 48px;
  line-height: 1;
  background: linear-gradient(135deg, var(--orange-bright), var(--blood));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 22px;
  letter-spacing: -0.02em;
}
.qvs-value.correct {
  background: linear-gradient(135deg, #4ade80, var(--orange));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.qvs-value.incorrect {
  background: linear-gradient(135deg, var(--blood-bright), var(--blood));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.qvs-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 999px;
  outline: none;
}
.qvs-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--orange-bright), var(--blood));
  cursor: pointer;
  box-shadow: 0 0 16px var(--orange-glow), 0 0 0 1px rgba(255, 255, 255, 0.15) inset;
  transition: transform 0.15s;
}
.qvs-range::-webkit-slider-thumb:hover { transform: scale(1.15); }
.qvs-bounds {
  display: flex;
  justify-content: space-between;
  margin: 10px 0 22px;
  font-size: 11px;
  color: var(--text-mute);
  letter-spacing: 0.05em;
}
.qvs-submit {
  width: 100%;
  padding: 14px 22px;
  background: linear-gradient(135deg, var(--orange-bright), var(--orange), var(--blood));
  color: #000;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 999px;
  transition: all 0.15s;
  box-shadow: 0 15px 30px rgba(255, 106, 26, 0.3);
}
.qvs-submit:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 22px 45px rgba(255, 106, 26, 0.45); }
.qvs-submit:disabled { opacity: 0.5; cursor: not-allowed; }

/* Multi-select */
.qv-multi { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.qv-mopt {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: var(--bg-card-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  text-align: left;
  font-size: 14px;
  color: var(--text);
  line-height: 1.4;
  transition: all 0.15s;
}
.qv-mopt:hover:not(:disabled) { border-color: var(--line); transform: translateX(2px); }
.qvm-check {
  flex-shrink: 0;
  width: 22px; height: 22px;
  border-radius: 6px;
  border: 2px solid var(--line-soft);
  position: relative;
  transition: all 0.15s;
}
.qv-mopt.picked {
  background: linear-gradient(135deg, rgba(255, 106, 26, 0.1), var(--bg-card-2));
  border-color: var(--orange);
}
.qv-mopt.picked .qvm-check {
  background: linear-gradient(135deg, var(--orange-bright), var(--blood));
  border-color: var(--orange);
}
.qv-mopt.picked .qvm-check::after {
  content: '✓';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000;
  font-weight: 800;
  font-size: 13px;
}
.qv-mopt.correct {
  background: linear-gradient(135deg, rgba(255, 106, 26, 0.2), var(--bg-card-2));
  border-color: var(--orange);
  box-shadow: 0 0 0 1px var(--orange) inset, 0 0 20px rgba(255, 106, 26, 0.15);
}
.qv-mopt.incorrect {
  background: linear-gradient(135deg, rgba(193, 54, 27, 0.15), var(--bg-card-2));
  border-color: var(--blood);
}
.qv-mopt.incorrect .qvm-check { background: var(--blood); color: #fff; border-color: var(--blood); }
.qv-mopt.missed {
  background: rgba(255, 106, 26, 0.04);
  border-color: var(--line);
  opacity: 0.6;
}
.qv-mopt.missed::after {
  content: '← should\'ve picked';
  position: absolute;
  right: 22px;
  color: var(--orange);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
}

/* Reorder (drag-and-drop) */
.qv-reorder {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
  padding: 14px;
  background: var(--bg);
  border-radius: var(--r-md);
  border: 1px dashed var(--line);
}
.qv-ritem {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: var(--bg-card-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  cursor: grab;
  transition: all 0.15s;
  user-select: none;
}
.qv-ritem:hover { border-color: var(--line); background: var(--bg-card-3); }
.qv-ritem.dragging {
  opacity: 0.5;
  cursor: grabbing;
}
.qv-ritem.tap-selected {
  border-color: var(--orange);
  background: linear-gradient(135deg, rgba(255, 106, 26, 0.1), var(--bg-card-2));
  box-shadow: 0 0 0 1px var(--orange) inset;
}
.qv-ritem.correct {
  background: linear-gradient(135deg, rgba(255, 106, 26, 0.15), var(--bg-card-2));
  border-color: var(--orange);
  cursor: default;
}
.qv-ritem.incorrect {
  background: linear-gradient(135deg, rgba(193, 54, 27, 0.12), var(--bg-card-2));
  border-color: var(--blood);
  opacity: 0.7;
  cursor: default;
}
.qvr-grip {
  flex-shrink: 0;
  color: var(--text-mute);
  font-size: 14px;
  letter-spacing: -0.3em;
}
.qvr-text { font-size: 14px; color: var(--text); line-height: 1.45; flex: 1; }

/* Match pairs */
.qv-match {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}
.qvm-col { display: flex; flex-direction: column; gap: 8px; }
.qvm-cell {
  padding: 14px 16px;
  background: var(--bg-card-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  text-align: left;
  font-size: 13px;
  color: var(--text);
  line-height: 1.45;
  transition: all 0.15s var(--ease);
  position: relative;
}
.qvm-cell:hover:not(.matched) { border-color: var(--line); transform: translateX(2px); }
.qvm-cell.selected {
  background: linear-gradient(135deg, rgba(255, 106, 26, 0.15), var(--bg-card-2));
  border-color: var(--orange);
  box-shadow: 0 0 0 1px var(--orange) inset, 0 0 20px rgba(255, 106, 26, 0.2);
}
.qvm-cell.matched {
  background: linear-gradient(135deg, rgba(255, 106, 26, 0.08), var(--bg-card-2));
  border-color: var(--line);
  cursor: default;
  opacity: 0.75;
}
.qvm-cell.matched::after {
  content: '✓';
  position: absolute;
  top: 6px;
  right: 8px;
  color: var(--orange);
  font-weight: 800;
}
.qvm-cell.wrong { animation: hsShake 0.6s ease-in-out; background: rgba(193, 54, 27, 0.1); border-color: var(--blood); }
.qv-match-status {
  text-align: center;
  font-size: 12px;
  color: var(--text-mute);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 14px;
}

@media (max-width: 640px) {
  .qv-tf { grid-template-columns: 1fr; }
  .qv-tfbtn { padding: 24px 20px; }
  .qvtf-icon { width: 50px; height: 50px; font-size: 28px; }
  .qv-match { grid-template-columns: 1fr; }
  .qvs-value { font-size: 38px; }
  .cp-header { flex-direction: column; align-items: flex-start; }
}

/* =================================================================
   MANYCHAT FLOW
   ================================================================= */
.mc-flow {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  padding: 10px 0;
}

.mc-step {
  width: 100%;
  max-width: 540px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s, transform 0.6s;
}
.mc-flow.mc-playing .mc-step-1 { opacity: 1; transform: translateY(0); transition-delay: 0.2s; }
.mc-flow.mc-playing .mc-step-2 { opacity: 1; transform: translateY(0); transition-delay: 1.4s; }
.mc-flow.mc-playing .mc-step-3 { opacity: 1; transform: translateY(0); transition-delay: 2.6s; }
.mc-flow.mc-playing .mc-step-4 { opacity: 1; transform: translateY(0); transition-delay: 4.0s; }
.mc-flow.mc-playing .mc-step-5 { opacity: 1; transform: translateY(0); transition-delay: 5.4s; }

.mc-flow .mc-arrow-down {
  font-size: 24px;
  color: var(--orange);
  opacity: 0;
  transition: opacity 0.4s;
  text-align: center;
}
.mc-flow.mc-playing .mc-step-1 ~ .mc-arrow-down:nth-of-type(1) { opacity: 0.6; transition-delay: 1.1s; }
.mc-flow.mc-playing .mc-step-2 ~ .mc-arrow-down:nth-of-type(2) { opacity: 0.6; transition-delay: 2.3s; }

.mc-step-label {
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--text);
  font-weight: 600;
  margin-bottom: 10px;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 10px;
}
.mc-stepnum {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--orange-bright), var(--blood));
  color: #000;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
}

.mc-phone-frame {
  background: #1a1a1a;
  border-radius: 18px;
  padding: 10px;
  border: 2px solid #333;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
  max-width: 360px;
  margin: 0 auto;
}
.mc-screen {
  background: linear-gradient(180deg, #0a0a0a, #050505);
  border-radius: 12px;
  padding: 14px;
  min-height: 200px;
}

/* Step 1: Post + comments */
.mc-post-thumb {
  height: 100px;
  background: linear-gradient(135deg, #2a2a2a, #1a1a1a);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-bottom: 12px;
  border: 1px solid var(--line-soft);
}
.mc-post-play {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255, 106, 26, 0.2);
  border: 2px solid var(--orange);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--orange);
  font-size: 14px;
  margin-bottom: 8px;
}
.mc-post-caption {
  font-size: 11px;
  color: var(--text-dim);
  text-align: center;
  padding: 0 12px;
}

.mc-comments {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mc-comment {
  font-size: 12px;
  color: var(--text-dim);
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 6px;
}
.mc-handle {
  color: var(--orange);
  font-weight: 700;
  margin-right: 6px;
}
.mc-comment.mc-new {
  background: linear-gradient(135deg, rgba(255, 106, 26, 0.15), rgba(255, 106, 26, 0.05));
  border: 1px solid var(--orange);
  opacity: 0;
  transform: translateX(-20px);
}
.mc-flow.mc-playing .mc-comment.mc-new {
  animation: mcCommentIn 0.5s ease-out forwards;
  animation-delay: 0.6s;
}
@keyframes mcCommentIn {
  to { opacity: 1; transform: translateX(0); }
}
.mc-keyword {
  background: var(--orange);
  color: #000;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.05em;
}

/* Step 2: Bot detect */
.mc-bot-detect {
  background: var(--bg-card-2);
  border: 1px solid var(--orange);
  border-radius: 14px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 18px;
  max-width: 360px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}
.mc-bot-icon {
  font-size: 38px;
  position: relative;
  z-index: 2;
  animation: mcBotPulse 1.5s ease-in-out infinite;
}
@keyframes mcBotPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}
.mc-bot-radar {
  position: absolute;
  left: 38px;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  pointer-events: none;
}
.mc-radar-ring {
  position: absolute;
  inset: 0;
  border: 2px solid var(--orange);
  border-radius: 50%;
  opacity: 0;
}
.mc-flow.mc-playing .mc-radar-ring {
  animation: mcRadar 2s ease-out infinite;
}
.mc-flow.mc-playing .mc-radar-ring:nth-child(2) { animation-delay: 0.6s; }
.mc-flow.mc-playing .mc-radar-ring:nth-child(3) { animation-delay: 1.2s; }
@keyframes mcRadar {
  0% { opacity: 0.8; transform: scale(0.5); }
  100% { opacity: 0; transform: scale(2.5); }
}
.mc-bot-title {
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--orange);
  font-weight: 800;
  margin-bottom: 4px;
}
.mc-bot-sub {
  font-size: 13px;
  color: var(--text);
}

/* Step 3, 4: DM screen */
.mc-dm-screen {
  background: linear-gradient(180deg, #0a0a0a, #050505);
}
.mc-dm-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 12px;
}
.mc-dm-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--orange-bright), var(--blood));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}
.mc-dm-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  flex: 1;
}
.mc-dm-status {
  font-size: 10px;
  color: var(--orange);
  letter-spacing: 0.05em;
}

.mc-dm-thread {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mc-bubble {
  font-size: 12px;
  padding: 9px 13px;
  border-radius: 14px;
  max-width: 80%;
  line-height: 1.45;
}
.mc-bubble-in {
  background: var(--bg-card-3);
  color: var(--text);
  border-bottom-left-radius: 4px;
  align-self: flex-start;
  opacity: 0;
  transform: translateY(8px);
}
.mc-bubble-out {
  background: linear-gradient(135deg, var(--orange-bright), var(--orange));
  color: #000;
  border-bottom-right-radius: 4px;
  align-self: flex-end;
  font-weight: 500;
}
.mc-flow.mc-playing .mc-bubble-anim-1 {
  animation: mcBubbleIn 0.4s ease-out forwards;
  animation-delay: 3.0s;
}
.mc-flow.mc-playing .mc-bubble-anim-2 {
  animation: mcBubbleIn 0.4s ease-out forwards;
  animation-delay: 3.4s;
}
@keyframes mcBubbleIn {
  to { opacity: 1; transform: translateY(0); }
}
.mc-typing {
  display: flex;
  gap: 3px;
  padding: 8px 12px;
  background: var(--bg-card-3);
  border-radius: 14px;
  width: fit-content;
  border-bottom-left-radius: 4px;
}
.mc-typing span {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--text-mute);
  animation: mcType 1.4s ease-in-out infinite;
}
.mc-typing span:nth-child(2) { animation-delay: 0.2s; }
.mc-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes mcType {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

/* Step 5: Result */
.mc-result {
  display: flex;
  align-items: center;
  gap: 18px;
  max-width: 540px;
  margin: 0 auto;
  flex-wrap: wrap;
  justify-content: center;
}
.mc-cal {
  background: var(--bg-card-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  flex: 1;
  min-width: 200px;
}
.mc-cal-header {
  font-size: 11px;
  letter-spacing: 0.15em;
  color: var(--orange);
  font-weight: 800;
  margin-bottom: 10px;
}
.mc-cal-slots {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mc-cal-slot {
  padding: 8px 12px;
  background: var(--bg);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  font-size: 12px;
  color: var(--text-dim);
}
.mc-cal-picked {
  background: linear-gradient(135deg, rgba(255, 106, 26, 0.2), rgba(255, 106, 26, 0.08));
  border-color: var(--orange);
  color: var(--orange);
  font-weight: 700;
}
.mc-result-arrow {
  font-size: 22px;
  color: var(--orange);
}
.mc-result-card {
  background: linear-gradient(135deg, rgba(255, 106, 26, 0.15), var(--bg-card-2));
  border: 1px solid var(--orange);
  border-radius: 12px;
  padding: 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  min-width: 200px;
  box-shadow: 0 0 30px rgba(255, 106, 26, 0.15);
}
.mc-result-icon {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--orange-bright), var(--blood));
  color: #000;
  font-weight: 800;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mc-result-title {
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--orange);
  font-weight: 800;
  margin-bottom: 4px;
}
.mc-result-sub {
  font-size: 12px;
  color: var(--text);
}

.mc-replay {
  margin: 18px auto 0;
  display: block;
  padding: 10px 22px;
  background: rgba(255, 106, 26, 0.08);
  color: var(--orange);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: all 0.15s;
}
.mc-replay:hover { background: rgba(255, 106, 26, 0.15); transform: translateY(-1px); }

/* =================================================================
   DM SEQUENCE
   ================================================================= */
.dms-stage {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 28px;
  align-items: start;
}
@media (max-width: 720px) { .dms-stage { grid-template-columns: 1fr; } }

.dms-phone {
  background: #1a1a1a;
  border-radius: 24px;
  padding: 10px;
  border: 2px solid #333;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  max-width: 320px;
  margin: 0 auto;
}
.dms-screen {
  background: linear-gradient(180deg, #0a0a0a, #050505);
  border-radius: 16px;
  padding: 14px;
  min-height: 460px;
}
.dms-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 14px;
}
.dms-avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--orange-bright), var(--blood));
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
}
.dms-name { font-size: 13px; font-weight: 600; color: var(--text); flex: 1; }
.dms-status { font-size: 10px; color: var(--orange); letter-spacing: 0.05em; }

.dms-thread { display: flex; flex-direction: column; gap: 10px; }

.dms-msg {
  position: relative;
  opacity: 0;
  transform: translateY(8px);
  animation: dmsMsgIn 0.5s ease-out forwards;
}
.dms-msg-1 { animation-delay: 0.3s; }
.dms-msg-reply { animation-delay: 1.2s; }
.dms-msg-2 { animation-delay: 2.0s; }
.dms-msg-3 { animation-delay: 2.9s; }
.dms-msg-yes { animation-delay: 3.6s; }

@keyframes dmsMsgIn {
  to { opacity: 1; transform: translateY(0); }
}

.dms-label {
  font-size: 9px;
  letter-spacing: 0.22em;
  color: var(--orange);
  font-weight: 800;
  margin-bottom: 4px;
  margin-left: 4px;
}

.dms-bubble {
  font-size: 12px;
  padding: 10px 14px;
  border-radius: 14px;
  max-width: 85%;
  line-height: 1.5;
}
.dms-in {
  background: var(--bg-card-3);
  color: var(--text);
  border-bottom-left-radius: 4px;
  align-self: flex-start;
}
.dms-out {
  background: linear-gradient(135deg, var(--orange-bright), var(--orange));
  color: #000;
  border-bottom-right-radius: 4px;
  align-self: flex-end;
  margin-left: auto;
  font-weight: 500;
}

.dms-breakdown {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.dms-row {
  display: flex;
  gap: 14px;
  padding: 16px 18px;
  background: var(--bg-card-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  align-items: flex-start;
}
.dms-rownum {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--orange-bright), var(--blood));
  color: #000;
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: 14px;
}
.dms-rowtext { font-size: 13px; color: var(--text-dim); line-height: 1.55; }
.dms-rowtext strong { color: var(--text); }

/* =================================================================
   THUMBNAIL DEMO
   ================================================================= */
.thumb-stage {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 18px;
  align-items: center;
}
@media (max-width: 720px) { .thumb-stage { grid-template-columns: 1fr; } .thumb-vs { display: none; } }

.thumb-col { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.thumb-coltag {
  font-size: 10px;
  letter-spacing: 0.22em;
  font-weight: 800;
  padding: 5px 12px;
  border-radius: 999px;
}
.thumb-coltag-bad { background: rgba(193, 54, 27, 0.15); color: var(--blood-bright); border: 1px solid var(--line-blood); }
.thumb-coltag-good { background: rgba(255, 106, 26, 0.15); color: var(--orange); border: 1px solid var(--line); }

.thumb-dm {
  background: var(--bg-card-2);
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  padding: 14px;
  width: 100%;
  max-width: 220px;
}
.thumb-dm-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.thumb-dm-avatar {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, #444, #222);
  color: var(--text-dim);
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px;
}
.thumb-dm-name { font-size: 11px; color: var(--text-dim); }

.thumb-video {
  aspect-ratio: 9 / 16;
  border-radius: 10px;
  position: relative;
  overflow: hidden;
}
.thumb-video-bad { background: linear-gradient(135deg, #2a2a2a, #1a1a1a); }
.thumb-video-good { background: linear-gradient(135deg, var(--bg-card-3), var(--bg-card)); }
.thumb-video-icon {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 32px; height: 32px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
  z-index: 2;
}
.thumb-cover-bad { position: absolute; inset: 0; }
.thumb-bad-face {
  position: absolute;
  top: 30%; left: 50%;
  transform: translate(-50%, 0);
  width: 50px; height: 50px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3a3a3a, #2a2a2a);
}

.thumb-cover-good {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 14px 10px 10px;
}
.thumb-good-title {
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  line-height: 1.1;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
  margin-bottom: auto;
  letter-spacing: -0.01em;
}
.thumb-good-face {
  width: 50px; height: 50px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--orange-bright), var(--blood));
  align-self: flex-end;
  border: 2px solid #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.thumb-stats { width: 100%; max-width: 220px; }
.thumb-stat-bad, .thumb-stat-good {
  font-size: 11px;
  font-weight: 700;
  padding: 8px 12px;
  border-radius: 8px;
  text-align: center;
}
.thumb-stat-bad { background: rgba(193, 54, 27, 0.12); color: var(--blood-bright); border: 1px solid var(--line-blood); }
.thumb-stat-good { background: rgba(255, 106, 26, 0.15); color: var(--orange); border: 1px solid var(--orange); }

.thumb-note {
  font-size: 12px;
  color: var(--text-mute);
  text-align: center;
  line-height: 1.5;
  max-width: 220px;
}
.thumb-note-good { color: var(--orange-soft); }

.thumb-vs {
  font-size: 24px;
  font-weight: 800;
  color: var(--orange);
  letter-spacing: 0.1em;
  align-self: center;
}

.thumb-callout {
  margin-top: 20px;
  padding: 14px 18px;
  background: linear-gradient(135deg, rgba(255, 106, 26, 0.08), var(--bg-card));
  border-left: 3px solid var(--orange);
  border-radius: 8px;
  font-size: 14px;
  color: var(--text-dim);
  line-height: 1.55;
}
.thumb-callout strong { color: var(--orange); }

/* =================================================================
   MIC TIERS
   ================================================================= */
.mic-stage {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 720px) { .mic-stage { grid-template-columns: 1fr; } }

.mic-tier {
  background: var(--bg-card-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  padding: 22px 18px;
  text-align: center;
  position: relative;
}
.mic-tier-recommended {
  background: linear-gradient(135deg, rgba(255, 106, 26, 0.12), var(--bg-card-2));
  border-color: var(--orange);
  box-shadow: 0 20px 40px rgba(255, 106, 26, 0.15);
}
.mic-badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, var(--orange-bright), var(--blood));
  color: #000;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.15em;
  padding: 5px 12px;
  border-radius: 999px;
  white-space: nowrap;
}
.mic-icon { font-size: 38px; margin-bottom: 10px; }
.mic-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}
.mic-price {
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--orange);
  font-weight: 700;
  margin-bottom: 14px;
}
.mic-quality {
  margin-bottom: 14px;
}
.mic-bar {
  height: 6px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 999px;
  overflow: hidden;
}
.mic-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--blood), var(--orange), var(--orange-bright));
  border-radius: 999px;
  animation: micFill 1.5s ease-out forwards;
  --w: 0%;
}
.mic-fill { width: 0; }
@keyframes micFill { to { width: var(--w); } }
.mic-tier-0 .mic-fill { background: var(--blood); }
.mic-verdict { font-size: 12px; color: var(--text-dim); line-height: 1.5; }
.mic-verdict-bad { color: var(--blood-bright); }
.mic-verdict-good { color: var(--orange); font-weight: 600; }

/* =================================================================
   PHONE SETTINGS UI MOCKUP
   ================================================================= */
.psett-stage {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 28px;
  align-items: center;
}
@media (max-width: 720px) { .psett-stage { grid-template-columns: 1fr; } }

.psett-phone {
  width: 240px;
  height: 460px;
  background: #1a1a1a;
  border-radius: 30px;
  padding: 12px;
  border: 3px solid #333;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6);
  margin: 0 auto;
}
.psett-screen {
  width: 100%; height: 100%;
  background: linear-gradient(180deg, #0a0a0a, #050505);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.psett-topbar {
  display: flex;
  align-items: center;
  padding: 14px 16px;
  font-size: 11px;
  color: var(--text);
  border-bottom: 1px solid var(--line-soft);
}
.psett-toggle {
  padding: 5px 10px;
  border-radius: 14px;
  border: 1px solid var(--line-soft);
  font-weight: 700;
}
.psett-toggle-on {
  background: rgba(255, 106, 26, 0.15);
  color: var(--orange);
  border-color: var(--orange);
}
.psett-spacer { flex: 1; }
.psett-icon { color: var(--text-mute); }

.psett-viewfinder {
  flex: 1;
  position: relative;
  background: linear-gradient(180deg, #2a2a2a, #1a1a1a);
  overflow: hidden;
}
.psett-grid {
  position: absolute;
  inset: 0;
}
.psett-gridline {
  position: absolute;
  background: rgba(255, 255, 255, 0.15);
}
.psett-h1, .psett-h2 { left: 0; right: 0; height: 1px; }
.psett-v1, .psett-v2 { top: 0; bottom: 0; width: 1px; }
.psett-h1 { top: 33.3%; }
.psett-h2 { top: 66.6%; }
.psett-v1 { left: 33.3%; }
.psett-v2 { left: 66.6%; }

.psett-subject {
  position: absolute;
  left: 50%;
  top: 30%;
  transform: translate(-50%, 0);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.psett-head {
  width: 36px; height: 44px;
  background: linear-gradient(180deg, #3a3a3a, #2a2a2a);
  border-radius: 50% 50% 45% 45%;
}
.psett-body {
  width: 60px; height: 70px;
  background: linear-gradient(180deg, #2a2a2a, #1a1a1a);
  border-radius: 8px 8px 0 0;
  margin-top: -4px;
}

.psett-focus-box {
  position: absolute;
  top: 28%;
  left: 50%;
  transform: translateX(-50%);
  width: 64px;
  height: 64px;
  border: 2px solid var(--orange);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: psFocus 1.5s ease-in-out infinite;
}
.psett-focus-box span {
  position: absolute;
  bottom: -22px;
  font-size: 9px;
  letter-spacing: 0.15em;
  color: var(--orange);
  font-weight: 800;
  white-space: nowrap;
  text-align: center;
}
@keyframes psFocus {
  0%, 100% { transform: translateX(-50%) scale(1); border-color: var(--orange); }
  50% { transform: translateX(-50%) scale(1.05); border-color: var(--orange-bright); }
}

.psett-modebar {
  display: flex;
  justify-content: center;
  gap: 22px;
  padding: 12px;
  border-top: 1px solid var(--line-soft);
}
.psett-mode {
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--text-mute);
  font-weight: 700;
}
.psett-mode-active { color: var(--orange); }

.psett-recordbar {
  display: flex;
  justify-content: center;
  padding: 10px 0 18px;
}
.psett-rec-btn {
  width: 50px; height: 50px;
  border-radius: 50%;
  background: var(--blood);
  border: 3px solid #fff;
}

.psett-callouts { display: flex; flex-direction: column; gap: 10px; }
.psett-callout {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--bg-card-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  transition: all 0.15s;
}
.psett-callout:hover { border-color: var(--orange); transform: translateX(4px); }
.psett-co-num {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--orange-bright), var(--blood));
  color: #000;
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
}
.psett-co-text { font-size: 13px; color: var(--text-dim); }
.psett-co-text strong { color: var(--text); }

/* =================================================================
   EYES CLOSED TEST
   ================================================================= */
.ect-stage {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 28px;
  align-items: center;
}
@media (max-width: 720px) { .ect-stage { grid-template-columns: 1fr; } }

.ect-person {
  position: relative;
  width: 140px;
  height: 140px;
  margin: 0 auto;
}
.ect-head {
  position: absolute;
  inset: 10px;
  background: radial-gradient(circle at 50% 40%, #3a3a3a, #1a1a1a);
  border-radius: 50%;
}
.ect-eyes-closed {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translateX(-50%);
  width: 50%;
  height: 6px;
}
.ect-eyes-closed::before,
.ect-eyes-closed::after {
  content: '';
  position: absolute;
  top: 0;
  width: 22px;
  height: 4px;
  background: var(--text);
  border-radius: 4px;
}
.ect-eyes-closed::before { left: 0; transform: rotate(-8deg); }
.ect-eyes-closed::after { right: 0; transform: rotate(8deg); }

.ect-headphones-band {
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 76%;
  height: 30px;
  border: 4px solid var(--orange);
  border-bottom: none;
  border-radius: 60px 60px 0 0;
}
.ect-headphones-left, .ect-headphones-right {
  position: absolute;
  top: 36%;
  width: 18px;
  height: 28px;
  background: linear-gradient(135deg, var(--orange-bright), var(--blood));
  border-radius: 6px;
}
.ect-headphones-left { left: -6px; }
.ect-headphones-right { right: -6px; }

.ect-waves {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 80px;
  margin: 20px 0 28px;
  grid-column: span 2;
  justify-content: center;
}
@media (max-width: 720px) { .ect-waves { grid-column: span 1; } }

.ect-wave {
  width: 4px;
  height: var(--h);
  background: linear-gradient(180deg, var(--orange-bright), var(--orange), var(--blood));
  border-radius: 4px;
  animation: ectWave 1.2s ease-in-out infinite;
  animation-delay: var(--d);
}
@keyframes ectWave {
  0%, 100% { transform: scaleY(0.3); }
  50% { transform: scaleY(1); }
}

.ect-diagnoses {
  display: flex;
  flex-direction: column;
  gap: 8px;
  grid-column: 2;
}
@media (max-width: 720px) { .ect-diagnoses { grid-column: 1; } }

.ect-diagnosis {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  background: var(--bg-card-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
}
.ect-diag-bored { border-left: 3px solid var(--blood); }
.ect-diag-good { border-left: 3px solid var(--orange); background: linear-gradient(135deg, rgba(255, 106, 26, 0.08), var(--bg-card-2)); }
.ect-diag-confused { border-left: 3px solid var(--blood); }
.ect-diag-emoji { font-size: 24px; }
.ect-diag-label {
  font-size: 11px;
  letter-spacing: 0.18em;
  font-weight: 800;
  color: var(--orange);
  width: 70px;
}
.ect-diag-bored .ect-diag-label, .ect-diag-confused .ect-diag-label { color: var(--blood-bright); }
.ect-diag-text { font-size: 13px; color: var(--text-dim); flex: 1; }
.ect-diag-text strong { color: var(--orange); }

/* =================================================================
   VISUAL HOOK DEMO — two phones side by side
   ================================================================= */
.vhd-stage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
@media (max-width: 720px) { .vhd-stage { grid-template-columns: 1fr; } }

.vhd-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.vhd-tag {
  font-size: 11px;
  letter-spacing: 0.22em;
  font-weight: 800;
  padding: 6px 14px;
  border-radius: 999px;
}
.vhd-tag-bad { background: rgba(193, 54, 27, 0.15); color: var(--blood-bright); border: 1px solid var(--line-blood); }
.vhd-tag-good { background: linear-gradient(135deg, var(--orange-bright), var(--blood)); color: #000; border: 1px solid var(--orange); }

.vhd-phone {
  width: 160px;
  height: 280px;
  background: #1a1a1a;
  border-radius: 22px;
  padding: 8px;
  border: 2px solid #333;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.5);
}
.vhd-screen {
  width: 100%; height: 100%;
  border-radius: 14px;
  position: relative;
  overflow: hidden;
}
.vhd-screen-bad { background: linear-gradient(180deg, #2a2622, #1a1816); }
.vhd-screen-good { background: linear-gradient(135deg, #ff6a1a, #c1361b, #ff7a2a); animation: vhdColorShift 3s ease-in-out infinite; }
@keyframes vhdColorShift {
  0%, 100% { filter: hue-rotate(0deg) brightness(1); }
  50% { filter: hue-rotate(20deg) brightness(1.15); }
}

.vhd-bg-flash {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.25), transparent 50%);
  animation: vhdFlash 2.5s ease-in-out infinite;
}
@keyframes vhdFlash {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}

.vhd-subject {
  position: absolute;
  left: 50%;
  top: 25%;
  transform: translate(-50%, 0);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.vhd-subject-moving {
  animation: vhdSway 1.5s ease-in-out infinite;
}
@keyframes vhdSway {
  0%, 100% { transform: translate(-55%, 0) rotate(-2deg); }
  50% { transform: translate(-45%, -3px) rotate(2deg); }
}

.vhd-head {
  width: 42px;
  height: 50px;
  background: linear-gradient(180deg, #4a4a4a, #2a2a2a);
  border-radius: 50% 50% 45% 45%;
}
.vhd-head-static { background: linear-gradient(180deg, #3a3835, #2a2825); }
.vhd-head-moving {
  background: linear-gradient(180deg, #fff5e0, #ffb380);
}
.vhd-body {
  width: 70px;
  height: 100px;
  background: linear-gradient(180deg, #2a2a2a, #1a1a1a);
  border-radius: 12px 12px 0 0;
  margin-top: -4px;
}
.vhd-body-moving {
  background: linear-gradient(180deg, #000, #1a0d05);
}

.vhd-motion-line {
  position: absolute;
  width: 30px;
  height: 3px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 4px;
  animation: vhdMotionLine 1.2s ease-out infinite;
}
.vhd-line-1 { top: 30%; left: -20px; animation-delay: 0s; }
.vhd-line-2 { top: 50%; left: -25px; animation-delay: 0.2s; }
.vhd-line-3 { top: 70%; left: -15px; animation-delay: 0.4s; }
@keyframes vhdMotionLine {
  0% { transform: translateX(0); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translateX(30px); opacity: 0; }
}

.vhd-text-overlay {
  position: absolute;
  bottom: 14px;
  left: 8px;
  right: 8px;
  text-align: center;
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8);
  letter-spacing: -0.01em;
  line-height: 1.1;
  animation: vhdTextPulse 2s ease-in-out infinite;
}
@keyframes vhdTextPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}

.vhd-meters { width: 100%; max-width: 180px; display: flex; flex-direction: column; gap: 6px; }
.vhd-meter { display: flex; align-items: center; gap: 8px; }
.vhd-meter-label { font-size: 9px; letter-spacing: 0.1em; color: var(--text-mute); font-weight: 700; width: 64px; }
.vhd-meter-bar { flex: 1; height: 4px; background: rgba(255, 255, 255, 0.06); border-radius: 999px; overflow: hidden; }
.vhd-meter-fill { height: 100%; --w: 0%; width: 0; border-radius: 999px; animation: vhdMeterFill 1.5s ease-out forwards; }
.vhd-meter-low { background: var(--blood); }
.vhd-meter-high { background: linear-gradient(90deg, var(--orange-bright), var(--blood)); }
@keyframes vhdMeterFill { to { width: var(--w); } }

.vhd-verdict {
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  padding: 8px 14px;
  border-radius: 999px;
  white-space: nowrap;
}
.vhd-verdict-bad { background: rgba(193, 54, 27, 0.12); color: var(--blood-bright); border: 1px solid var(--line-blood); }
.vhd-verdict-good { background: rgba(255, 106, 26, 0.15); color: var(--orange); border: 1px solid var(--orange); }

/* =================================================================
   SPOKEN HOOK DEMO — vague vs clear with waveforms
   ================================================================= */
.shd-stage { display: flex; flex-direction: column; gap: 12px; }

.shd-row {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 18px;
  align-items: start;
  padding: 20px 22px;
  background: var(--bg-card-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
}
.shd-row-bad { border-left: 3px solid var(--blood); background: linear-gradient(135deg, rgba(193, 54, 27, 0.06), var(--bg-card-2)); }
.shd-row-good { border-left: 3px solid var(--orange); background: linear-gradient(135deg, rgba(255, 106, 26, 0.08), var(--bg-card-2)); }

.shd-emoji { font-size: 38px; text-align: center; line-height: 1; padding-top: 6px; }

.shd-body { display: flex; flex-direction: column; gap: 10px; }

.shd-tag {
  display: inline-block;
  align-self: flex-start;
  font-size: 10px;
  letter-spacing: 0.22em;
  font-weight: 800;
  padding: 5px 12px;
  border-radius: 999px;
}
.shd-tag-bad { background: rgba(193, 54, 27, 0.18); color: var(--blood-bright); }
.shd-tag-good { background: linear-gradient(135deg, var(--orange-bright), var(--orange)); color: #000; }

.shd-quote {
  font-size: 16px;
  font-style: italic;
  color: var(--text);
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
  line-height: 1.4;
}

.shd-waveform {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 36px;
}
.shd-bar {
  width: 100%;
  height: var(--h);
  border-radius: 2px;
  animation: shdWave 1.4s ease-in-out infinite;
  animation-delay: var(--d);
}
.shd-bar-bad { background: rgba(193, 54, 27, 0.5); animation-duration: 2.5s; }
.shd-bar-good { background: linear-gradient(180deg, var(--orange-bright), var(--blood)); }
@keyframes shdWave {
  0%, 100% { transform: scaleY(0.4); }
  50% { transform: scaleY(1); }
}

.shd-thoughts { display: flex; gap: 8px; flex-wrap: wrap; }
.shd-thought {
  font-size: 12px;
  padding: 5px 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  color: var(--text-dim);
}
.shd-thought-clear { background: rgba(255, 106, 26, 0.08); color: var(--text); border-color: var(--line); }
.shd-thought-out { background: rgba(193, 54, 27, 0.12); color: var(--blood-bright); border-color: var(--line-blood); font-weight: 600; }
.shd-thought-good { background: linear-gradient(135deg, var(--orange-bright), var(--orange)); color: #000; border-color: var(--orange); font-weight: 700; }

.shd-absorption {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 4px;
}
.shd-abs-label { font-size: 10px; letter-spacing: 0.2em; color: var(--text-mute); font-weight: 700; }
.shd-abs-val { font-family: 'Inter', sans-serif; font-weight: 800; font-size: 22px; line-height: 1; }
.shd-abs-bad { color: var(--blood-bright); }
.shd-abs-good {
  background: linear-gradient(135deg, var(--orange-bright), var(--blood));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.shd-rule {
  margin-top: 8px;
  padding: 14px 18px;
  background: linear-gradient(135deg, rgba(255, 106, 26, 0.08), var(--bg-card));
  border-left: 3px solid var(--orange);
  border-radius: 8px;
  font-size: 14px;
  color: var(--text-dim);
  line-height: 1.55;
}
.shd-rule strong { color: var(--orange); }

/* =================================================================
   TEXT HOOK DEMO — phone showing captions vs title text overlays
   ================================================================= */
.thd-stage {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 28px;
  align-items: start;
}
@media (max-width: 720px) { .thd-stage { grid-template-columns: 1fr; } }

.thd-phone {
  width: 240px;
  height: 420px;
  background: #1a1a1a;
  border-radius: 28px;
  padding: 12px;
  border: 3px solid #333;
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.5);
  margin: 0 auto;
}
.thd-screen {
  width: 100%; height: 100%;
  background: linear-gradient(180deg, #2a2a2a, #1a1a1a);
  border-radius: 18px;
  position: relative;
  overflow: hidden;
}

.thd-title-area {
  position: absolute;
  top: 14px;
  left: 10px;
  right: 10px;
  text-align: center;
}
.thd-title-text {
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
  letter-spacing: -0.01em;
  line-height: 1.05;
  margin-bottom: 6px;
  animation: thdTitlePulse 3s ease-in-out infinite;
}
@keyframes thdTitlePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); }
}

.thd-subject {
  position: absolute;
  left: 50%;
  top: 38%;
  transform: translate(-50%, 0);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.thd-subject .thd-head {
  width: 56px;
  height: 68px;
  background: linear-gradient(180deg, #4a4a4a, #2a2a2a);
  border-radius: 50% 50% 45% 45%;
}
.thd-subject .thd-body {
  width: 90px;
  height: 120px;
  background: linear-gradient(180deg, #2a2a2a, #1a1a1a);
  border-radius: 12px 12px 0 0;
  margin-top: -6px;
}

.thd-caption-area {
  position: absolute;
  bottom: 14px;
  left: 10px;
  right: 10px;
  text-align: center;
}
.thd-caption {
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.3;
  display: flex;
  justify-content: center;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.thd-word {
  display: inline-block;
  opacity: 0;
  animation: thdCapWord 2.8s ease-out infinite;
}
.thd-word:nth-child(1) { animation-delay: 0s; }
.thd-word:nth-child(2) { animation-delay: 0.4s; }
.thd-word:nth-child(3) { animation-delay: 0.8s; }
.thd-word:nth-child(4) { animation-delay: 1.2s; }
@keyframes thdCapWord {
  0% { opacity: 0; transform: translateY(6px); }
  15%, 65% { opacity: 1; transform: translateY(0); }
  80%, 100% { opacity: 0; }
}
.thd-word-hl { color: var(--orange-bright); }

.thd-label {
  font-size: 9px;
  letter-spacing: 0.22em;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 999px;
  display: inline-block;
}
.thd-label-title {
  background: linear-gradient(135deg, var(--orange-bright), var(--blood));
  color: #000;
}
.thd-label-caption {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-dim);
  border: 1px solid var(--line-soft);
}

.thd-breakdown { display: flex; flex-direction: column; gap: 12px; }
.thd-card {
  padding: 18px 20px;
  background: var(--bg-card-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
}
.thd-card-title {
  background: linear-gradient(135deg, rgba(255, 106, 26, 0.1), var(--bg-card-2));
  border-color: var(--orange);
}
.thd-card-tag {
  font-size: 10px;
  letter-spacing: 0.22em;
  font-weight: 800;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line-soft);
}
.thd-card-title .thd-card-tag { color: var(--orange); }
.thd-card-caption .thd-card-tag { color: var(--text-dim); }
.thd-card-row {
  font-size: 13px;
  color: var(--text-dim);
  padding: 4px 0;
  line-height: 1.5;
}
.thd-card-row strong { color: var(--text); }

/* =================================================================
   GAPS CLOSING — interactive grid that fills as you "do reps"
   ================================================================= */
.gaps-stage { display: flex; flex-direction: column; gap: 18px; }

.gaps-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.gaps-stat {
  text-align: center;
  padding: 16px 12px;
  background: var(--bg-card-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
}
.gaps-stat-num {
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-size: 32px;
  line-height: 1;
  background: linear-gradient(135deg, var(--orange-bright), var(--blood));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
  transition: transform 0.3s var(--ease);
}
.gaps-stat-label {
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--text-mute);
  font-weight: 700;
  text-transform: uppercase;
}

.gaps-grid {
  display: grid;
  grid-template-columns: repeat(20, 1fr);
  gap: 4px;
  padding: 16px;
  background: var(--bg);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
}
@media (max-width: 640px) {
  .gaps-grid { grid-template-columns: repeat(10, 1fr); }
}
.gap-dot {
  aspect-ratio: 1;
  background: rgba(193, 54, 27, 0.18);
  border: 1px solid rgba(193, 54, 27, 0.3);
  border-radius: 3px;
  transition: all 0.3s var(--ease);
}
.gap-dot.closed {
  background: linear-gradient(135deg, var(--orange-bright), var(--orange));
  border-color: var(--orange);
  box-shadow: 0 0 8px rgba(255, 106, 26, 0.6);
  animation: gapClose 0.5s var(--ease-out);
}
@keyframes gapClose {
  0% { transform: scale(0.6); opacity: 0; }
  60% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

.gaps-message {
  padding: 18px 22px;
  background: linear-gradient(135deg, rgba(193, 54, 27, 0.08), var(--bg-card-2));
  border-left: 3px solid var(--blood);
  border-radius: var(--r-md);
  transition: all 0.4s var(--ease);
}
.gaps-message.gaps-done {
  background: linear-gradient(135deg, rgba(255, 106, 26, 0.15), var(--bg-card-2));
  border-left-color: var(--orange);
  box-shadow: 0 0 30px rgba(255, 106, 26, 0.15);
}
.gaps-message-tag {
  font-size: 10px;
  letter-spacing: 0.22em;
  font-weight: 800;
  color: var(--blood-bright);
  margin-bottom: 8px;
  transition: color 0.4s;
}
.gaps-done .gaps-message-tag { color: var(--orange); }
.gaps-message-body { font-size: 14px; color: var(--text); line-height: 1.55; }

.gaps-controls {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}
.gaps-btn {
  padding: 12px 22px;
  background: var(--bg-card-2);
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  transition: all 0.15s;
}
.gaps-btn:hover { background: var(--bg-card-3); border-color: var(--orange); color: var(--orange); transform: translateY(-1px); }
.gaps-btn-big {
  background: linear-gradient(135deg, var(--orange-bright), var(--orange), var(--blood));
  color: #000;
  border-color: var(--orange);
  font-weight: 800;
  box-shadow: 0 12px 28px rgba(255, 106, 26, 0.3);
}
.gaps-btn-big:hover { color: #000; transform: translateY(-2px); box-shadow: 0 18px 36px rgba(255, 106, 26, 0.4); }
.gaps-reset { color: var(--text-mute); border-color: var(--line-soft); }
.gaps-reset:hover { color: var(--text-mute); border-color: var(--text-mute); background: transparent; }

/* =================================================================
   CLAIM PAGE v2 — offer-first layout
   ================================================================= */

/* Override claim container to single column (no longer side-by-side bonus+form) */
.claim {
  max-width: 920px;
  margin: 0 auto;
  padding: 60px 40px 100px;
}
@media (max-width: 720px) { .claim { padding: 32px 18px 80px; } }

/* HOW IT WORKS - 4 steps */
.hiw {
  margin: 80px 0 60px;
  padding: 40px;
  background: var(--bg-card);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
}
.hiw-label {
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--orange);
  font-weight: 800;
  margin-bottom: 28px;
  text-align: center;
}
.hiw-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
@media (max-width: 480px) { .hiw-grid { grid-template-columns: 1fr; } }

.hiw-step {
  position: relative;
  padding: 26px 28px;
  background: var(--bg-card-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  display: flex;
  align-items: flex-start;
  gap: 18px;
}
.hiw-num {
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--orange-bright), var(--blood));
  display: flex; align-items: center; justify-content: center;
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  color: #000;
  font-size: 17px;
}
.hiw-body { flex: 1; min-width: 0; }
.hiw-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
}
.hiw-desc {
  font-size: 14px;
  color: var(--text-dim);
  line-height: 1.6;
}

/* PRICING TIERS */
.pricing {
  margin: 0 0 70px;
}
.pricing-label {
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--orange);
  font-weight: 800;
  margin-bottom: 24px;
  text-align: center;
}
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 900px) { .pricing-grid { grid-template-columns: 1fr; } }

.ptier {
  position: relative;
  padding: 32px 28px;
  background: var(--bg-card);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  transition: all 0.2s var(--ease);
  display: flex;
  flex-direction: column;
}
.ptier:hover {
  border-color: var(--line);
  transform: translateY(-3px);
}
.ptier-popular {
  background: linear-gradient(135deg, rgba(255, 106, 26, 0.1), var(--bg-card));
  border-color: var(--orange);
  box-shadow: 0 30px 60px rgba(255, 106, 26, 0.18);
  transform: scale(1.02);
}
.ptier-popular:hover {
  transform: scale(1.02) translateY(-3px);
}

.ptier-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--text-mute);
  font-weight: 800;
  padding: 5px 14px;
  background: var(--bg);
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  white-space: nowrap;
}
.ptier-badge-popular {
  background: linear-gradient(135deg, var(--orange-bright), var(--orange), var(--blood));
  color: #000;
  border-color: var(--orange);
  box-shadow: 0 8px 24px rgba(255, 106, 26, 0.3);
}

.ptier-count {
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-size: 64px;
  line-height: 1;
  background: linear-gradient(135deg, var(--orange-bright), var(--blood));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.04em;
  margin-bottom: 4px;
  text-align: center;
}
.ptier-unit {
  font-size: 12px;
  letter-spacing: 0.15em;
  color: var(--text-mute);
  font-weight: 700;
  text-align: center;
  margin-bottom: 20px;
}

.ptier-price {
  text-align: center;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 22px;
}
.ptier-dollars {
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: 32px;
  color: var(--text);
  letter-spacing: -0.02em;
}
.ptier-period {
  font-size: 14px;
  color: var(--text-mute);
  margin-left: 4px;
}

.ptier-list {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.ptier-list li {
  position: relative;
  padding-left: 26px;
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.5;
}
.ptier-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(255, 106, 26, 0.15);
  color: var(--orange);
  font-size: 10px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ptier-best {
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  font-size: 11px;
  color: var(--text-mute);
  line-height: 1.45;
  text-align: center;
}
.ptier-popular .ptier-best {
  background: rgba(255, 106, 26, 0.06);
  border-color: var(--line);
  color: var(--orange-soft);
}

/* CLAIM FORM v2 — full-width comprehensive */
.claim-form-big {
  position: static;
  max-width: 720px;
  margin: 0 auto;
  padding: 40px;
}
@media (max-width: 640px) { .claim-form-big { padding: 28px 22px; } }

.cf-intro {
  font-size: 14px;
  color: var(--text-dim);
  line-height: 1.6;
  padding: 16px 18px;
  background: rgba(255, 106, 26, 0.05);
  border-left: 3px solid var(--orange);
  border-radius: 8px;
  margin-bottom: 30px;
}

.cf-section {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 34px 0 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line-soft);
}
.cf-section:first-of-type { margin-top: 18px; }

.cf-section-num {
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-size: 24px;
  background: linear-gradient(135deg, var(--orange-bright), var(--blood));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.02em;
}
.cf-section-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}

.cf-row {
  display: grid;
  gap: 12px;
}
.cf-row-2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 480px) { .cf-row-2 { grid-template-columns: 1fr; } }

.cf-field textarea {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  padding: 14px 16px;
  font-size: 14px;
  color: var(--text);
  outline: 0;
  resize: vertical;
  min-height: 80px;
  font-family: inherit;
  line-height: 1.5;
  transition: border-color 0.2s;
}
.cf-field textarea:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 1px var(--orange) inset;
}
.cf-field textarea::placeholder { color: var(--text-faint); }

/* Package selector with price */
.vc-price {
  font-size: 12px;
  color: var(--text-mute);
  font-weight: 700;
  margin-top: 4px;
}
.vc-opt input:checked + .vc-card .vc-price { color: var(--orange); }

/* =================================================================
   TELEGRAM CTA — replaces the form
   ================================================================= */
.tg-cta {
  position: relative;
  margin: 0 auto;
  max-width: 720px;
  padding: 56px 48px;
  background: linear-gradient(135deg, rgba(255, 106, 26, 0.12), rgba(193, 54, 27, 0.06) 60%, var(--bg-card));
  border: 1px solid var(--orange);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 40px 100px rgba(255, 106, 26, 0.25), 0 0 0 1px var(--line) inset;
  text-align: center;
}
@media (max-width: 640px) { .tg-cta { padding: 36px 24px; } }

.tg-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(800px 400px at 50% 0%, rgba(255, 106, 26, 0.25), transparent 60%),
    radial-gradient(400px 200px at 50% 100%, rgba(193, 54, 27, 0.15), transparent 60%);
  pointer-events: none;
  animation: tgGlow 4s ease-in-out infinite;
}
@keyframes tgGlow {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

.tg-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  margin-bottom: 22px;
  position: relative;
}

.tg-icon {
  width: 72px;
  height: 72px;
  position: relative;
  animation: tgFloat 3s ease-in-out infinite;
}
.tg-icon svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 12px 30px rgba(255, 106, 26, 0.5));
}
@keyframes tgFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.tg-eyebrow {
  font-size: 11px;
  letter-spacing: 0.25em;
  color: var(--orange);
  font-weight: 800;
  padding: 6px 16px;
  background: rgba(255, 106, 26, 0.1);
  border: 1px solid var(--line);
  border-radius: 999px;
}

.tg-title {
  font-family: 'Inter', sans-serif;
  font-size: clamp(26px, 3.4vw, 36px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0 auto 18px;
  max-width: 540px;
  position: relative;
}

.tg-desc {
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-dim);
  max-width: 520px;
  margin: 0 auto 32px;
  position: relative;
}

.tg-benefits {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  max-width: 580px;
  margin: 0 auto 36px;
  position: relative;
}
@media (max-width: 540px) { .tg-benefits { grid-template-columns: 1fr; } }

.tg-benefit {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  text-align: left;
}
.tg-benefit-icon {
  font-size: 22px;
  flex-shrink: 0;
}
.tg-benefit-text {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.45;
}
.tg-benefit-text strong { color: var(--text); }

.tg-button {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 20px 40px;
  background: linear-gradient(135deg, var(--orange-bright), var(--orange) 50%, var(--blood));
  color: #000;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 999px;
  box-shadow: 0 24px 60px rgba(255, 106, 26, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.15) inset;
  transition: all 0.2s var(--ease);
  position: relative;
  white-space: nowrap;
}
.tg-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 32px 70px rgba(255, 106, 26, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.2) inset;
}
.tg-button-icon svg, .tg-button-arrow {
  width: 20px; height: 20px;
}
.tg-button-arrow { transition: transform 0.2s var(--ease); }
.tg-button:hover .tg-button-arrow { transform: translateX(4px); }

.tg-meta {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 24px;
  font-size: 12px;
  color: var(--text-mute);
  letter-spacing: 0.05em;
  flex-wrap: wrap;
  position: relative;
}
.tg-meta-item { font-weight: 600; }
.tg-meta-dot { color: var(--text-faint); }

.claim-cert-link {
  text-align: center;
  margin-top: 40px;
}
.claim-cert-link a {
  font-size: 13px;
  color: var(--text-mute);
  letter-spacing: 0.05em;
}
.claim-cert-link a:hover { color: var(--orange); }