@font-face {
  font-family: 'LTSuperiorMono';
  src: url('../fonts/LTSuperiorMono/LTSuperiorMono-Regular.otf') format('opentype');
  font-weight: 400;
}

@font-face {
  font-family: 'LTSuperiorMono';
  src: url('../fonts/LTSuperiorMono/LTSuperiorMono-Medium.otf') format('opentype');
  font-weight: 500;
}

@font-face {
  font-family: 'LTSuperiorMono';
  src: url('../fonts/LTSuperiorMono/LTSuperiorMono-Semibold.otf') format('opentype');
  font-weight: 600;
}

@font-face {
  font-family: 'LTSuperiorMono';
  src: url('../fonts/LTSuperiorMono/LTSuperiorMono-Bold.otf') format('opentype');
  font-weight: 700;
}

@font-face {
  font-family: 'ClashGrotesk';
  src: url('../fonts/ClashGrotesk_Complete/Fonts/OTF/ClashGrotesk-Extralight.otf') format('opentype');
  font-weight: 200;
}

@font-face {
  font-family: 'ClashGrotesk';
  src: url('../fonts/ClashGrotesk_Complete/Fonts/OTF/ClashGrotesk-Light.otf') format('opentype');
  font-weight: 300;
}

@font-face {
  font-family: 'ClashGrotesk';
  src: url('../fonts/ClashGrotesk_Complete/Fonts/OTF/ClashGrotesk-Regular.otf') format('opentype');
  font-weight: 400;
}

@font-face {
  font-family: 'ClashGrotesk';
  src: url('../fonts/ClashGrotesk_Complete/Fonts/OTF/ClashGrotesk-Medium.otf') format('opentype');
  font-weight: 500;
}

@font-face {
  font-family: 'ClashGrotesk';
  src: url('../fonts/ClashGrotesk_Complete/Fonts/OTF/ClashGrotesk-Semibold.otf') format('opentype');
  font-weight: 600;
}

@font-face {
  font-family: 'ClashGrotesk';
  src: url('../fonts/ClashGrotesk_Complete/Fonts/OTF/ClashGrotesk-Bold.otf') format('opentype');
  font-weight: 600;
}

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

a, button { outline: none; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

:root {
  --bg: #080808;
  --bg-2: #111111;
  --bg-3: #181818;
  --accent: #d2ff4d;
  --accent-dark: #a9d617;
  --bg-light: #ffffff;
  --accent-dim: rgba(212, 255, 79, 0.12);
  --accent-border: rgba(212, 255, 79, 0.15);
  --text: #F0EDE6;
  --text-muted: rgba(240, 237, 230, 0.45);
  --text-mid: rgba(240, 237, 230, 0.7);
  --text-inverted: rgba(0, 0, 0, 0.7);
  --border: rgba(150, 150, 150, 0.08);
  --border-mid: rgba(192, 192, 192, 0.14);
  --border-muted: rgba(30, 29, 29, 0.5);
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 16px;
  --border-radius-xl: 24px;
  --border-radius-pill: 999px;
  --page-padding-x: 5%;
  --container-max: 1200px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 64px;
  --space-9: 80px;
  --space-10: 100px;
  --space-11: 120px;
  --space-12: 160px;
  --section-padding: var(--space-12) var(--page-padding-x);
  --section-padding-tight: var(--space-11) var(--page-padding-x) var(--space-10);
  --section-padding-compact: var(--space-10) var(--page-padding-x);
  --duration-fast: 0.2s;
  --duration-base: 0.3s;
  --duration-slow: 0.4s;
  --duration-slower: 0.5s;
  --font-display: 'LTSuperiorMono', monospace;
  --font-body: 'Bricolage Grotesque', sans-serif;
  --font-mono: 'LTSuperiorMono', monospace;
}

html { scroll-behavior: auto; }

body {
  background-color: var(--bg);
  font-weight: 400;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-body);
}

#grain-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.05;
}

.grid-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.6;
  background-image:
    linear-gradient(#90938914 1px, transparent 1px),
    linear-gradient(90deg, rgba(183, 183, 183, 0.08) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 80% 80% at 20% 30%, black 40%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 20% 30%, black 40%, transparent 80%);
}

/* ── NAV ── */

nav {
  position: fixed;
  top: 40px;
  left: 0; right: 0;
  z-index: 100;
  padding: 0 var(--page-padding-x);
  background: transparent;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
}

nav.nav--hidden {
  transform: translateY(-120%);
  opacity: 0;
  pointer-events: none;
}

.nav-inner {
  box-shadow: inset 0 0 18px 2px rgba(207, 207, 207, 0.15);
  backdrop-filter: blur(12px);
  border: 1px solid transparent;
  outline: 4px solid var(--border-muted);
  background-image: linear-gradient(var(--bg-2), var(--bg-2)), linear-gradient(to bottom, rgba(255,255,255,0.2), transparent);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  border-radius: var(--border-radius-lg);
  padding: 12px 12px 12px 32px;
  width: fit-content;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  transition: transform 0.3s ease, border-radius 0.3s ease-out;
}

.nav-inner:has(.nav-cta:hover) {
  border-radius: var(--border-radius-pill);
  transition: border-radius 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  justify-content: center;
}

.nav-link {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-decoration: none;
  padding: 8px 16px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  transition: color 0.2s;
  white-space: nowrap;
}

.nav-link:hover {
  color: var(--text);
  background: var(--bg-2);
}

.nav-link.active {
  color: var(--accent);
  border-color: var(--accent);
}


.nav-logo {
  padding-right: 32px;
  font-family: var(--font-display);
  font-size: 24px;
  color: var(--text);
  letter-spacing: 0.05em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.nav-tagline-bar {
  position: fixed;
  top: 0;
  left: 0; right: 0;
  z-index: 101;
  overflow: hidden;
  background: var(--bg);
  border-bottom: 1px solid var(--border-muted);
  height: 28px;
  display: flex;
  align-items: center;
}

.nav-tagline-track {
  display: flex;
  align-items: center;
  gap: 0;
  white-space: nowrap;
  will-change: transform;
}

.nav-tagline-track span {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 0 24px;
}

.nav-tagline-sep {
  color: var(--accent) !important;
  padding: 0 4px !important;
  display: inline-block;
  animation: tagline-sep-spin 4s linear infinite;
}

@keyframes tagline-sep-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes tagline-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(var(--tagline-offset)); }
}

.nav-cta {
  font-size: 13px;
}

/* ── HERO ── */
.hero {
  min-height: 70vh;
  display: flex;
  align-items: center;
  padding: 320px 5% 48px;
  position: relative;
  overflow: hidden;
}

.hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 80px;
  max-width: var(--container-max);
  margin: 0 auto;
  width: 100%;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: var(--border-radius-pill);
  box-shadow: inset 0 0 18px 2px rgba(207, 207, 207, 0.15);
  color: var(--text-mid);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 7px 14px;
  margin-bottom: 28px;
  border: 1px solid transparent;
  background-origin: border-box;
  background-clip: padding-box, border-box;
  background-image: linear-gradient(#080808, #080808), linear-gradient(to bottom, rgba(210,255,77,0.18), var(--border));
}

.hero-badge::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.hero h1 {
  font-family: var(--font-body);
  font-size: clamp(80px, 5.5vw, 96px);
  font-weight: 700;
  line-height: 1.05;
  margin-bottom: 24px;
}

.hero h1 em {
  font-style: normal;
  font-weight: 700;
  color: var(--accent);
  text-decoration: underline 2px var(--accent);
  text-underline-offset: 8px;
  color: var(--accent);
}

.hero-desc {
  font-size: 20px;
  color: var(--text-mid);
  line-height: 1.7;
  max-width: 80%;
  margin-bottom: 40px;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.btn-label { white-space: nowrap; }

.btn-primary {
  color: #080808;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  padding: 4px 4px 4px 16px;
  border: 1px solid transparent;
  outline: 4px solid var(--border-muted);
  border-radius: 12px;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.2s, transform 0.2s, border-radius 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 16px;
  background-image: linear-gradient(#e0e0e0, #e0e0e0), linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,0.2) 100%);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

.btn-icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 18px 2px rgba(255, 242, 242, 0.25);
  background: linear-gradient(300deg,#ffffff,#ffffff, #ffffff);
  background-size: 120% 120%;
  animation: gradient-animation 18s ease infinite;
  border-radius: 8px;
  
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
  transition: border-radius 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.icon-main,
.icon-enter {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
}

.icon-enter {
  position: absolute;
  transform: translateX(-200%);
  opacity: 0;
}

.btn-primary:hover .icon-main {
  transform: translateX(200%);
  opacity: 0;
}

.btn-primary:hover .icon-enter {
  transform: translateX(0);
  opacity: 1;
}

.btn-primary:hover { opacity: 0.88; transform: translateY(-1px); border-radius: var(--border-radius-pill); box-shadow: 0 0 24px rgba(255, 255, 255, 0.4), 0 0 60px rgba(212, 255, 79, 0.15); }
.btn-primary:hover .btn-icon-wrap { border-radius: var(--border-radius-pill); }

.hero-note {
  font-size: 13px;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

/* Hero right: visual terminal */
.hero-visual {
  position: relative;
  animation: slide-up 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;
}

#matrix-canvas {
  position: absolute;
  top: -60px;
  left: -60px;
  width: calc(100% + 120px);
  height: calc(100% + 120px);
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
  mask-image: radial-gradient(ellipse at top left, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at top left, black 30%, transparent 75%);
}

.hero-visual .terminal {
  position: relative;
  z-index: 1;
}

.terminal {
  background: radial-gradient(circle at top right, rgb(21, 21, 21) 0%, var(--bg) 70%);
  outline: 4px solid var(--border-muted);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: 13px;
  backdrop-filter: blur(8px);
  box-shadow:
    0 0 15px rgba(212, 255, 79, 0.05),
    0 0 40px rgba(212, 255, 79, 0.03);
}

.terminal-bar {
  background: radial-gradient(circle at top right, rgb(21, 21, 21) 0%, var(--bg) 70%);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--border);
}

.dot { width: 10px; height: 10px; border-radius: 50%; }
.dot-r { background: #FF5F57; }
.dot-y { background: #FFBD2E; }
.dot-g { background: #28C840; }

.terminal-title {
  margin-left: auto;
  font-size: 11px;
  color: var(--text-muted);
}

.terminal-body { padding: 24px; line-height: 2; }

.t-prompt { color: var(--accent); }
.t-cmd { color: var(--text); }
.t-comment { color: var(--text-muted); }
.t-success { color: #5CFF8F; }
.t-file { color: #79C0FF; }
.t-dim { color: rgba(240,237,230,0.35); }

.terminal-cursor {
  display: inline-block;
  width: 8px; height: 14px;
  background: var(--accent);
  vertical-align: middle;
  animation: blink 1.1s step-end infinite;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: radial-gradient(circle at bottom right, rgb(21, 21, 21) 0%, var(--bg) 70%);
  border-top: 1px solid var(--border);
}

.stat {
  padding: 20px;
  text-align: center;
  backdrop-filter: blur(8px);
}

.stat-num {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 700;
  color: var(--accent);
  display: block;
}

.stat-label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-family: var(--font-mono);
}

/* ── MARQUEE ── */
.marquee-wrap {
  overflow: hidden;
  padding: 20px 0;
  margin: 80px;
  position: relative;
  mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
}

.equalizer-wrap {
  position: relative;
  width: 100%;
  height: 240px;
  mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
  z-index: 1;
}

.marquee-wrap {
  position: relative;
  z-index: 1;
}

.equalizer-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.22) 0,
      rgba(0, 0, 0, 0.22) 1px,
      transparent 1px,
      transparent 3px
    ),
    linear-gradient(to top,
      rgba(210, 255, 77, 0.35) 0%,
      rgba(210, 255, 77, 0.20) 30%,
      rgba(210, 255, 77, 0.08) 60%,
      rgba(210, 255, 77, 0.02) 80%,
      transparent 100%
    );
  pointer-events: none;
  z-index: 0;
}

#equalizer-canvas {
  display: block;
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  margin-bottom: 0;
}

.marquee-track {
  display: flex;
  gap: 24px;
  width: max-content;
}

.marquee-item {
  display: flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
  flex-shrink: 0;
}

.marquee-item img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.7;
}

.marquee-item span {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  color: var(--text-muted);
}

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(var(--marquee-offset)); }
}

/* ── BUILDER ASCII ── */
.builder-ascii {
  overflow: hidden;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: var(--space-6) var(--page-padding-x);
  background: var(--bg);
}

.builder-pre {
  font-family: var(--font-mono);
  font-size: clamp(10px, 2.2vw, 22px);
  line-height: 1.2;
  color: var(--accent);
  white-space: pre;
  overflow: hidden;
  margin: 0 auto;
  display: table;
}

/* ── GRADIENT BORDER CARDS ── */
.terminal,
.prompt-example,
.price-card,
.section-tag,
.pain-card,
.aprenda-bento-wrap,
.prompt-anatomy,
.outcome-list,
.tutor-avatar-img {
  border: 1px solid transparent;
  outline: 4px solid var(--border-muted);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

.price-card      { background-image: linear-gradient(var(--bg-2),  var(--bg-2)),  linear-gradient(to bottom, rgba(210,255,77,0.18), var(--border)); }
.section-tag     { background-image: linear-gradient(#080808,      #080808),      linear-gradient(to bottom, rgba(210,255,77,0.18), var(--border)); }
.pain-card       { background-image: linear-gradient(var(--bg-2),  var(--bg-2)),  linear-gradient(to bottom, rgba(210,255,77,0.18), var(--border)); }
.outcome-list    { background-image: linear-gradient(var(--bg-3),  var(--bg-3)),  linear-gradient(to bottom, rgba(210,255,77,0.18), var(--border)); }
.aprenda-bento-wrap { background-image: linear-gradient(var(--bg-2), var(--bg-2)), linear-gradient(to bottom, rgba(255,255,255,0.12), var(--border-mid)); }
.prompt-anatomy  { background-image: linear-gradient(var(--bg-3),  var(--bg-3)),  linear-gradient(to bottom, rgba(210,255,77,0.18), var(--border)); }
.terminal        { background-image: radial-gradient(circle at top right, rgb(21,21,21) 0%, var(--bg) 70%), linear-gradient(to bottom, rgba(210,255,77,0.18), var(--border)); }
.prompt-example  { background-image: radial-gradient(circle at top right, rgb(41,43,38) 0%, var(--bg) 70%), linear-gradient(to bottom, rgba(210,255,77,0.18), var(--border)); }

/* ── SECTION BASE ── */
section { padding: var(--section-padding); }

.section-tag {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 8px;
  border-radius: var(--border-radius-pill);
  box-shadow: inset 0 0 18px 2px rgba(207, 207, 207, 0.15);
  color: var(--text-mid);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 7px 14px;
  margin-bottom: 28px;
}

h1 {
  font-weight: 700;
}

h2 {
  font-family: var(--font-body);
  font-size: clamp(32px, 4vw, 54px);
  font-weight: 700;
  line-height: 1.1;
}

h2 em {
  font-style: normal;
  color: var(--accent);
  text-decoration: underline 2px var(--accent);
  text-underline-offset: 8px;
}

/* ── PROBLEMA ── */

.problem {
  background: var(--bg-2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  position: relative;
}

.problem::before,
.problem::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 800px;
  height: 1px;
  opacity: 0.55;
  background: linear-gradient(
    to right,
    transparent,
    rgba(210, 255, 77, 0.2) 30%,
    rgba(210, 255, 77, 0.5) 50%,
    rgba(210, 255, 77, 0.2) 70%,
    transparent
  );
}

.problem::before { top: 0; }
.problem::after  { bottom: 0; }

.problem-header {
  max-width: var(--container-max);
  margin: 0 auto 48px;
}

.problem-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: stretch;
  max-width: var(--container-max);
  margin: 0 auto;
}

.problem h2 { margin-bottom: 24px; max-width: 75%; }

.problem-lead {
  font-size: 18px;
  color: var(--text-mid);
  line-height: 1.4;
  margin-bottom: 32px;
}

.pain-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 10px;
  align-self: stretch;
}

.pain-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  background: var(--bg-2);
  background-image: linear-gradient(var(--bg-2), var(--bg-2)), linear-gradient(to bottom, rgba(134, 134, 134, 0.2), var(--border));
  background-origin: border-box;
  background-clip: padding-box, border-box;
  border: 1px solid var(--border-muted);
  border-radius: var(--border-radius-md);
  height: 100%;
}

.pain-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: rgba(239, 68, 68, 0.12);
  border-radius: var(--border-radius-sm);
  color: rgb(239, 68, 68);
}

.pain-icon svg {
  width: 16px;
  height: 16px;
}

.pain-card p {
  font-size: 14px;
  color: var(--text-mid);
  line-height: 1.5;
  margin-top: auto;
}

.problem-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.outcome-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
}

.outcome-box {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.outcome-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--bg-3);
  border-radius: var(--border-radius-md);
  overflow: hidden;
}

.outcome-list li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-size: 15px;
  line-height: 1.5;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}

.outcome-list li:last-child {
  border-bottom: none;
}

.check {
  width: 20px; height: 20px;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
  border-radius: 2px;
  color: #080808;
}

.check svg {
  width: 12px;
  height: 12px;
  stroke-width: 3;
}

/* ── MODULOS ── */
.modulos { max-width: var(--container-max); margin: 0 auto; flex: 1; display: flex; flex-direction: column; width: 100%; }
.modulos-header { margin-bottom: 64px; }

.timeline-toast-area {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  position: relative;
}

.modules-timeline { display: flex; flex-direction: column; gap: 192px; }

.timeline-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  position: relative;
}

.timeline-row::before {
  content: '';
  position: absolute;
  top: 6px;
  left: 0; right: 0;
  height: 1px;
  background: var(--border-mid);
}

.timeline-row::after {
  content: '';
  position: absolute;
  top: 6px;
  left: 0;
  height: 1px;
  width: calc(var(--line-progress, 0) * 100%);
  background: var(--accent);
  z-index: 1;
  box-shadow: 0 0 8px rgba(212, 255, 79, 0.5);
}

.timeline-col {
  padding: 0 32px 0 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
}

.timeline-col--empty { pointer-events: none; }

.timeline-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--bg-3);
  box-shadow: 0 0 0 8px var(--bg), 0 0 0 9px var(--border-mid);
  flex-shrink: 0;
  position: relative;
  transition: background 0.3s ease, box-shadow 0.3s ease;
  z-index: 1;
  margin-bottom: 24px;
}

.timeline-dot--accent,
.timeline-col--active .timeline-dot {
  background: var(--accent);
  box-shadow: 0 0 0 8px var(--bg), 0 0 0 9px var(--accent), 0 0 16px rgba(212, 255, 79, 0.4);
}

.timeline-col--active .timeline-tag {
  color: var(--accent);
  transition: color 0.3s ease;
}

.timeline-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.timeline-col h3 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text);
}

.timeline-col p {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.6;
  flex: 1;
}

.timeline-outcome {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-mid);
  letter-spacing: 0.03em;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 6px;
}

.outcome-icon {
  position: relative;
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.outcome-arrow,
.outcome-check {
  position: absolute;
  inset: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.outcome-check { opacity: 0; transform: scale(0.5); }
.outcome-check svg { width: 13px; height: 13px; }

.timeline-col--complete .outcome-arrow { opacity: 0; transform: scale(0.5); }
.timeline-col--complete .outcome-check { opacity: 1; transform: scale(1); }

.timeline-outcome--accent {
  color: var(--accent);
  border-top-color: var(--accent-border);
}

/* ── WORKFLOW ── */
.workflow-section {
  position: relative;
  padding: var(--space-11) var(--page-padding-x) 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 50%, rgba(210, 255, 77, 0.06) 0%, rgba(210, 255, 77, 0.015) 22%, transparent 55%),
    linear-gradient(180deg, rgba(17, 17, 17, 0.92) 0%, rgba(8, 8, 8, 0.98) 100%);
}

.workflow-section::before {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 800px;
  height: 1px;
  opacity: 0.55;
  background: linear-gradient(
    to right,
    transparent,
    rgba(210, 255, 77, 0.2) 30%,
    rgba(210, 255, 77, 0.5) 50%,
    rgba(210, 255, 77, 0.2) 70%,
    transparent
  );
}

.workflow-section::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, rgba(8, 8, 8, 0.98) 0%, rgba(8, 8, 8, 0.68) 18%, transparent 34%, transparent 66%, rgba(8, 8, 8, 0.68) 82%, rgba(8, 8, 8, 0.98) 100%),
    linear-gradient(to bottom, rgba(8, 8, 8, 0.95) 0%, rgba(8, 8, 8, 0.3) 22%, rgba(8, 8, 8, 0.18) 55%, rgba(8, 8, 8, 0.9) 100%);
  pointer-events: none;
  z-index: 1;
}

#workflow-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.9;
}

.workflow-header,
.workflow-graph {
  position: relative;
  z-index: 2;
}

.workflow-graph {
  position: relative;
  height: 420px;
  max-width: var(--container-max);
  margin: 0 auto;
}

.equalizer-section {
  position: relative;
  min-height: 160px;
  padding: 0;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
  z-index: 1;
}

.wf-node {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  cursor: default;
}

.wf-node-icon {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  border-radius: var(--border-radius-pill);
  border: 1px solid transparent;
  outline: 4px solid var(--border-muted);
  box-shadow: inset 0 0 12px 2px rgba(207, 207, 207, 0.10);
  background-image: linear-gradient(var(--bg-2), var(--bg-2)), linear-gradient(to bottom, rgba(210,255,77,0.18), var(--border));
  background-origin: border-box;
  background-clip: padding-box, border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
  overflow: hidden;
}

.wf-node--hub .wf-node-icon {
  width: 88px;
  height: 88px;
  color: var(--accent);
  background-image: linear-gradient(var(--bg-2), var(--bg-2)), linear-gradient(to bottom, rgba(210,255,77,0.45), rgba(210,255,77,0.1));
  box-shadow: 
  inset 0 0 12px 2px rgba(207, 207, 207, 0.10),
  0 0 48px rgba(210,255,77,0.12),
  0 0 80px rgba(210,255,77,0.05);
}

.wf-node:hover .wf-node-icon {
  transform: translateY(-6px) scale(1.05);
  box-shadow: 0 16px 40px rgba(0,0,0,0.4), 0 0 24px rgba(210,255,77,0.1);
}

.wf-node-icon svg { width: 24px !important; height: 24px !important; display: block; }
.wf-node--hub .wf-node-icon svg { width: 32px !important; height: 32px !important; }

.wf-node-label {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.04em;
  white-space: nowrap;
  margin-top: 8px;
}

.wf-node-sub {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.wf-node--figma    { left: 8%;  top: 28%; }
.wf-node--mcp      { left: 8%;  top: 72%; }
.wf-node--claude   { left: 38%; top: 50%; }
.wf-node--obsidian { left: 63%; top: 18%; }
.wf-node--ds       { left: 63%; top: 50%; }
.wf-node--vscode   { left: 63%; top: 82%; }
.wf-node--vercel   { left: 90%; top: 50%; }

/* ── APRENDA ── */
.aprenda-section {
  padding: var(--space-9) var(--page-padding-x) 240px;
  background: var(--bg);
}

.section-header {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 40px;
  max-width: var(--container-max);
  margin: 0 auto 96px;
}

.section-header-title {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.section-header-desc-col {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.section-header-desc {
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1.7;
}

.aprenda-visual {
  position: relative;
  max-width: var(--container-max);
  margin: 0 auto;
}

#aprenda-matrix-canvas {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40%;
  height: 100%;
  pointer-events: none;
  opacity: 0.5;
  z-index: 1;
}

.aprenda-bento-wrap {
  position: absolute;
  right: 0;
  bottom: -240px;
  background: radial-gradient(circle at top right, rgb(20, 20, 20) 0%, var(--bg) 70%);
  z-index: 10;
  border: 1px solid var(--border-mid);
  border-radius: var(--border-radius-xl);
  padding: 12px;
  transform-origin: bottom right;
  transform: scale(0.85) translateX(80px);
  mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
  animation: bento-enter 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.55s both;
}

@keyframes bento-enter {
  from {
    opacity: 0;
    transform: scale(0.85) translateX(120px);
  }
  to {
    opacity: 1;
    transform: scale(0.85) translateX(80px);
  }
}

.aprenda-bento-wrap .bento {
  max-width: 100%;
  margin: 0;
}

.aprenda-terminal {
  position: relative;
  z-index: 2;
  width: 60%;
  min-height: 600px;
  margin-top: 60px;
  will-change: transform;
  background: var(--bg);
  border-radius: 24px;
  display: flex;
  flex-direction: column;
}

.aprenda-terminal .terminal-wrap,
.aprenda-terminal .terminal {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.aprenda-terminal .terminal-body {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.aprenda-terminal .terminal-footer {
  margin-top: auto;
}

.terminal-wrap {
  background: transparent;
}

.aprenda-desc {
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1.7;
}

/* Bento grid */
.bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  max-width: var(--container-max);
  margin: 0 auto;
}

.bento-card {
  background: var(--bg);
  border: 0;
  border-radius: var(--border-radius-lg);
  outline: none;
  background-image: none;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.bento-label {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.08em;
}

/* Colors card */
.bento-colors {
  grid-column: 1;
  grid-row: 1 / 3;
}

.color-tokens {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
}

.color-token {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.color-info {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  width: 100%;
}

.color-name {
  font-family: var(--font-body);
  font-size: 13px;
  color: rgba(255,255,255,0.9);
  font-weight: 500;
}

.color-hex {
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(255,255,255,0.55);
}

.color-swatch-main {
  width: 100%;
  height: 72px;
  border-radius: var(--border-radius-md);
  display: flex;
  align-items: flex-end;
  padding: 10px 12px;
  border: 1px solid var(--border-mid);
}

.color-scale {
  display: flex;
  width: 100%;
  border-radius: var(--border-radius-sm);
  overflow: hidden;
  height: 20px;
}

.shade {
  flex: 1;
  height: 100%;
}

.shade-base { display: none; }

/* Typography card */
.bento-type {
  grid-column: 2;
  grid-row: 1;
}

.type-samples {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
  gap: 8px;
}

.type-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
  padding-bottom: 8px;
}

.type-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.type-scale-label {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
}

.type-sample { font-weight: 500; }
.type-headline { font-size: 64px; font-family: var(--font-display); }
.type-body-sample { font-size: 24px; font-family: var(--font-body); color: var(--text-mid); }
.type-label-sample { font-size: 16px; font-family: var(--font-body); color: var(--text-muted); }

/* Buttons card */
.bento-buttons {
  grid-column: 3;
  grid-row: 1;
}

.btn-samples {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-content: center;
  flex: 1;
  gap: 8px;
}

.ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 0 18px;
  border-radius: 12px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  cursor: default;
  border: none;
}

.ds-btn svg {
  width: 15px;
  height: 15px;
}

.ds-btn-primary { background: #6366F1; color: #fff; }
.ds-btn-secondary { background: #7B67D1; color: #fff; }
.ds-btn-inverted { background: var(--text); color: var(--bg); }
.ds-btn-outlined { background: transparent; color: var(--text); border: 1px solid var(--border-mid); }

/* Icons card */
.bento-icons {
  grid-column: 2 / 4;
  grid-row: 2;
}

.icon-samples {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-content: center;
  gap: 10px;
  flex: 1;
}

.icon-chip {
  width: fit-content;
  height: fit-content;
  border-radius: 50%;
  background: rgba(99, 102, 241, 0.15);
  transition: transform 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6366F1;
  padding: 8px;
}

.icon-chip svg {
  width: 32px !important;
  height: 32px !important;
}

.icon-chip:hover { transform: scale(1.1); }

/* Input card */
.bento-input {
  grid-column: 4;
  grid-row: 2;
}

/* Toggle card */
.bento-toggle {
  grid-column: 4;
  grid-row: 1;
}

.input-samples {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
  gap: 10px;
}

.ds-input-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-3);
  border: 1px solid var(--border-mid);
  border-radius: var(--border-radius-md);
  height: 48px;
  padding: 0 14px;
  color: var(--text-muted);
  transition: border-color 0.2s;
}

.ds-input-wrap:focus-within {
  border-color: #6366F1;
  color: var(--text);
}

.ds-input-wrap svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.ds-input {
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-mid);
  font-family: var(--font-body);
  font-size: 14px;
  width: 100%;
}

.ds-input::placeholder { color: var(--text-muted); }

/* Toggle card */
.toggle-samples {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex: 1;
}

.ds-toggle {
  position: relative;
  width: 84px;
  height: 48px;
  border-radius: 999px;
  background: var(--border-mid);
  border: none;
  cursor: pointer;
  transition: background 0.2s;
  flex-shrink: 0;
}

.ds-toggle--on {
  background: #6366F1;
}

.ds-toggle-thumb {
  position: absolute;
  top: 5px;
  left: 5px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6366F1;
}

.ds-toggle-thumb svg {
  width: 16px;
  height: 16px;
  position: absolute;
  transition: opacity 0.2s;
}

.toggle-icon-off { opacity: 0; }
.toggle-icon-on  { opacity: 1; }

.ds-toggle:not(.ds-toggle--on) .toggle-icon-off { opacity: 1; }
.ds-toggle:not(.ds-toggle--on) .toggle-icon-on  { opacity: 0; }

.ds-toggle--on .ds-toggle-thumb {
  transform: translateX(36px);
}

/* Spacing card */
.bento-spacing {
  grid-column: 1 / 3;
}

.spacing-samples {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 24px;
  flex: 1;
  padding-bottom: 20px;
}

.spacing-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.spacing-bar {
  height: 8px;
  background: var(--accent);
  border-radius: 2px;
}

.spacing-row span {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
}

/* Border radius card */
.bento-radius {
  grid-column: 3 / 5;
}

.radius-samples {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  flex: 1;
  padding-top: 20px;
}

.radius-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.radius-box {
  position: relative;
  width: 56px;
  height: 56px;
  background: var(--accent-dim);
  border: 1px solid var(--border);
}

.radius-box::before {
  content: '';
  position: absolute;
  top: -1px;
  right: -1px;
  width: 24px;
  height: 24px;
  border-top: 2px solid var(--accent);
  border-right: 2px solid var(--accent);
  border-top-right-radius: inherit;
  pointer-events: none;
}

.radius-item span {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
}

/* ── BONUS ── */
.bonus {
  background: linear-gradient(300deg,#d4ff4f,#efff4e, #fbffd1);
  background-size: 180% 180%;
  animation: gradient-animation 18s ease infinite;
  color: #080808;
  padding: var(--section-padding);
  margin-bottom: -80px;
}

@keyframes gradient-animation {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.bonus-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  display: grid;
  gap: 64px;
  align-items: center;
}

.bonus-header {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 40px;
  align-items: flex-start;
}

.bonus-header-right {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 8px;
}

.prompt-visual {
  grid-column: 1 / -1;
  position: relative;
  padding-bottom: 60px;
}

.prompt-example {
  background: radial-gradient(circle at top right, rgb(41, 43, 38) 0%, var(--bg) 70%);
  outline: 4px solid var(--bg-3);
  border-radius: var(--border-radius-xl);
  overflow: hidden;
}

.prompt-example-bar {
  border-bottom: 1px solid var(--border-mid);
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.prompt-example-filename {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
  margin-left: 4px;
}

.prompt-example-code {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.8;
  color: var(--text-mid);
  padding: 24px 28px;
  margin: 0;
  white-space: pre;
  overflow-x: auto;
}

.pe-comment {
  color: var(--accent);
  font-weight: 600;
}

.bonus .section-tag {
  background: transparent;
  border: 1px solid var(--accent-dark);
  border-color: rgba(0, 0, 0, 0.12);
  box-shadow: inset 0 0 18px 2px rgba(0, 0, 0, 0.2);
  color: var(--text-inverted);
  font-size: 12px;
  margin-bottom: 16px;
}

.bonus h2 {
  font-family: var(--font-body);
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 700;
  text-align: left;
  color: #080808;
  margin-bottom: 20px;
  line-height: 1.1;
}

.bonus p {
  font-size: 16px;
  font-weight: 600;
  text-align: left;
  color: rgba(8,8,8,0.65);
  line-height: 1.7;
  margin-bottom: 32px;
}

.prompt-anatomy {
  background-color: var(--bg);
  outline: 4px solid var(--bg-3);
  border-radius: var(--border-radius-xl);
  padding: 8px;
  display: flex;
  flex-direction: column;
  z-index: 2;
  gap: 4px;
}

.anatomy-item {
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--border);
  padding: 16px 20px;
}

.anatomy-item:last-child { border-bottom: none; }

.anatomy-item > div {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
}

.anatomy-num {
  font-family: var(--font-body);
  font-size: 24px;
  font-weight: 700;
  color: var(--accent);
  min-width: 52px;
  line-height: 1;
}

.anatomy-title {
  font-weight: 500;
  font-size: 16px;
  color: var(--text);
}

.anatomy-desc {
  font-size: 14px;
  color: var(--text-mid);
  margin-top: 0;
  margin-left: auto;
}

/* ── TIMELINE TOAST ── */
@keyframes toast-pop {
  0%   { opacity: 0; transform: translateY(32px) scale(0.88); }
  60%  { opacity: 1; transform: translateY(-6px) scale(1.04); }
  80%  { transform: translateY(3px) scale(0.98); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.timeline-toast {
  display: none;
  align-items: center;
  gap: 16px;
  margin: 0;
  padding: 14px 20px;
  background: var(--bg-2);
  border: 1px solid rgba(212, 255, 79, 0.3);
  outline: 4px solid rgba(212, 255, 79, 0.1);
  border-radius: var(--border-radius-lg);
  width: fit-content;
  opacity: 0;
  box-shadow: 0 0 0 0 rgba(212, 255, 79, 0);
}

.timeline-toast.visible {
  display: flex;
}

.timeline-toast.show {
  animation: toast-pop 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  box-shadow:
    0 0 24px rgba(212, 255, 79, 0.2),
    0 0 60px rgba(212, 255, 79, 0.08),
    0 8px 32px rgba(0, 0, 0, 0.4);
}

.timeline-toast-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--border-radius-md);
  background: rgba(212, 255, 79, 0.1);
  border: 1px solid rgba(212, 255, 79, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  flex-shrink: 0;
}

.timeline-toast-icon svg {
  width: 18px;
  height: 18px;
}

.timeline-toast-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.timeline-toast-title {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.03em;
}

.timeline-toast-sub {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent);
  letter-spacing: 0.05em;
}

/* Reaction emojis */
@keyframes reaction-float {
  0%   { opacity: 0;   transform: translateY(0)      scale(0.4); }
  15%  { opacity: 1;   transform: translateY(-30px)   scale(1.1); }
  80%  { opacity: 0.8; transform: translateY(-180px)  scale(1); }
  100% { opacity: 0;   transform: translateY(-260px)  scale(0.8); }
}

.reaction {
  position: absolute;
  bottom: 0;
  font-size: 28px;
  pointer-events: none;
  z-index: 9999;
  animation: reaction-float 2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.3));
}

@media (max-width: 900px) {
  .timeline-toast { margin-top: 24px; }
}

/* ── TUTOR ── */
.tutor-section {
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  position: relative;
  padding: var(--section-padding-tight);
}

.tutor-section::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, var(--bg) 0%, transparent 45%, transparent 55%, var(--bg) 100%),
    linear-gradient(to bottom, var(--bg) 0%, transparent 50%, transparent 50%, var(--bg) 100%);
  pointer-events: none;
  z-index: 1;
}

.tutor-section .tutor-inner,
.tutor-section .tutor-visual {
  position: relative;
  z-index: 2;
}

.tutor-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 80px;
  align-items: center;
  overflow: visible;
}


#tutor-matrix-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}


.tutor-visual {
  position: relative;
  z-index: 3;
  border-radius: var(--border-radius-xl);
  overflow: hidden;
  border: 1px solid var(--border);
  outline: 4px solid var(--border-muted);
  aspect-ratio: 3 / 4;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.5s ease, border-color 0.3s ease;
  cursor: pointer;
}

.tutor-visual:hover {
  transform: translateY(-20px) scale(1.03);
  border-color: rgba(210, 255, 77, 0.5);
  box-shadow:
    0 40px 80px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(210, 255, 77, 0.4),
    0 0 60px rgba(210, 255, 77, 0.15),
    inset 0 0 30px rgba(210, 255, 77, 0.05);
}

.tutor-avatar-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

.tutor-content .section-tag { margin-bottom: 16px; }

.tutor-content h2 {
  font-size: clamp(40px, 4vw, 56px);
  margin-bottom: 8px;
}

.tutor-role {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 24px;
}

.tutor-bio {
  font-size: 18px;
  color: var(--text-mid);
  line-height: 1.7;
  max-width: 560px;
  margin-bottom: 40px;
}

.tutor-stats {
  list-style: none;
  display: flex;
  gap: 40px;
}

.tutor-stats li {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
}

.tutor-stat-icon {
  width: 16px;
  height: 16px;
  color: var(--accent);
  flex-shrink: 0;
  margin-top: 2px;
}

.tutor-stats li > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tutor-stat-value {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.tutor-stat-label {
  font-size: 12px;
  color: var(--text-muted);
}

/* ── CTA / PREÇO ── */
.cta-section {
  padding: var(--section-padding);
  text-align: center;
  position: relative;
  overflow: hidden;
}


.cta-section .section-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-mid);
  margin-bottom: 16px;
  text-align: center !important;
}

.cta-section h2 {
  margin: 0 auto 24px;
  max-width: 700px;
}

.cta-section p {
  color: var(--text-muted);
  font-size: 17px;
  max-width: 500px;
  margin: 0 auto 56px;
  line-height: 1.7;
}

.price-card-wrap {
  position: relative;
  max-width: 480px;
  margin: 0 auto;
  
}

.builder-ascii--cta {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: none;
  padding: 0;
  background: transparent;
  opacity: 1;
  pointer-events: none;
  z-index: 0;
  white-space: nowrap;
}


.price-divider {
  border: none;
  border-top: 1px solid var(--bg-light);
  margin: 24px 0;
}

.price-card {
  background: linear-gradient(to bottom, #cacaca, #fff);
  border: 1.5px solid white;
  outline: 8px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--border-radius-xl);
  margin: 0 auto;
  padding: 48px 48px;
  position: relative;
  z-index: 1;
}

.price-tag {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: #080808;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 18px;
  white-space: nowrap;
  border-radius: var(--border-radius-pill);
}

.price-includes {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 48px;
  text-align: left;
  padding-left: 32px;
  padding-top: 48px;
}

.price-includes li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  color: var(--text-mid);
}

.price-includes li .check {
  width: 18px; height: 18px;
  font-size: 10px;
}

.price-amount {
  text-align: center;
  margin-bottom: 32px;
}

.price-label {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  display: block;
  margin-top: 48px;
  margin-bottom: 8px;
}

.price-value {
  font-family: var(--font-body);
  font-size: 44px;
  font-weight: 800;
  color: var(--text);
  line-height: 1;
}

.price-installments {
  font-size: 12px;
  vertical-align: top;
}

.price-value sup {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-muted);
  vertical-align: super;
  margin-right: 4px;
}

.price-cash {
  margin-top: 10px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-mid);
}

.price-cash strong {
  color: var(--text);
}

.btn-buy {
  align-self: flex-start;
  margin-bottom: 48px;
  font-size: 14px;
}

.price-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.hotmart-logo {
  height: 18px;
  width: auto;
  opacity: 0.3;
  filter: grayscale(1);
}

.price-card .price-guarantee {
  margin: 0;
  text-align: center;
}


.price-card .price-includes li { color: #444; }
.price-card .price-label { color: #888; }
.price-card .price-value { color: #080808; }
.price-card .price-value sup { color: #888; }
.price-card .price-cash { color: #666; }
.price-card .price-cash strong { color: #080808; }
.price-card .price-divider { border-top-color: rgba(0, 0, 0, 0.1); }
.price-card .price-guarantee { color: #888; }

.price-card .btn-buy {
  background: #080808;
  color: #fff;
}
.price-card .btn-buy .btn-icon-wrap {
  color: #080808;
}

.price-card .btn-buy:hover {
  opacity: 0.88;
  transform: translateY(-1px);
  box-shadow: 0 0 24px rgba(0, 0, 0, 0.15);
}

/* ── FLOATING PRICE ── */
.floating-price {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 120;
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.floating-price.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.floating-price-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 10px 10px 16px;
  border: 1px solid transparent;
  outline: 4px solid var(--border-muted);
  border-radius: var(--border-radius-xl);
  background-image: linear-gradient(var(--bg-2), var(--bg-2)), linear-gradient(to bottom, rgba(210,255,77,0.18), var(--border));
  background-origin: border-box;
  background-clip: padding-box, border-box;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(14px);
}

.floating-price-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.floating-price-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.floating-price-value {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.1;
  color: var(--text);
}

.floating-price-value span {
  color: var(--accent);
}

.floating-price-cash {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--text-muted);
}

.floating-price-cash strong {
  color: var(--text);
}

.floating-price-cta {
  flex-shrink: 0;
}

/* ── DEPOIMENTOS ── */
.testimonials-section {
  background: var(--bg-2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: var(--section-padding-compact);
  position: relative;
  overflow: hidden;
}

.testimonials-section::before,
.testimonials-section::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 800px;
  height: 1px;
  opacity: 0.55;
  background: linear-gradient(
    to right,
    transparent,
    rgba(210, 255, 77, 0.2) 30%,
    rgba(210, 255, 77, 0.5) 50%,
    rgba(210, 255, 77, 0.2) 70%,
    transparent
  );
}

.testimonials-section::before { top: 0; }
.testimonials-section::after  { bottom: 0; }

.testimonials-header {
  max-width: var(--container-max);
  margin: 0 auto 64px;
}

/* Track wrapper com fade nas bordas */
.testimonials-track-wrap {
  overflow: hidden;
  margin: 0 -5%;
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.testimonials-track-wrap:hover .testimonials-track {
  animation-play-state: paused;
}

/* Animação infinita */
@keyframes testimonials-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.testimonials-track {
  display: flex;
  gap: 20px;
  width: max-content;
  animation: testimonials-scroll 36s linear infinite;
}

/* Card */
.testimonial-card {
  width: 320px;
  flex-shrink: 0;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: var(--border-radius-lg);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.testimonial-stars {
  color: var(--accent);
  font-size: 13px;
  letter-spacing: 2px;
}

.testimonial-quote {
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-mid);
  flex: 1;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.testimonial-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg-2);
  border: 1px solid var(--border-mid);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-mid);
  letter-spacing: 0.05em;
  flex-shrink: 0;
}

.testimonial-name {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.testimonial-role {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* ── FAQ ── */
.faq-section {
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
  padding: var(--section-padding-compact);
  position: relative;
}

.faq-section::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 800px;
  height: 1px;
  opacity: 0.55;
  background: linear-gradient(
    to right,
    transparent,
    rgba(210, 255, 77, 0.2) 30%,
    rgba(210, 255, 77, 0.5) 50%,
    rgba(210, 255, 77, 0.2) 70%,
    transparent
  );
}

.faq-section::after  { bottom: 0; }

.faq-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}

.faq-header {
  position: sticky;
  top: 100px;
}

.faq-header .section-tag { margin-bottom: 16px; }

.faq-lead {
  font-size: 16px;
  color: var(--text-muted);
  line-height: 1.7;
  margin-top: 16px;
}

.faq-list {
  display: flex;
  flex-direction: column;
}

.faq-item {
  border-bottom: 1px solid var(--border);
  transition: border-color 0.2s;
}

.faq-item:first-child {
  border-top: 1px solid var(--border);
}

.faq-item.open {
  border-bottom-color: rgba(212, 255, 79, 0.2);
}

.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  transition: color 0.2s;
}

.faq-item.open .faq-question span { color: var(--accent); }
.faq-question:hover span { color: var(--accent); transition: color 0.2s; }
.faq-question:hover .faq-icon { transform: rotate(90deg); color: var(--accent); }

.faq-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--text-muted);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s;
}

.faq-item.open .faq-icon {
  transform: rotate(45deg);
  color: var(--accent);
}

.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.faq-item.open .faq-answer {
  grid-template-rows: 1fr;
}

.faq-answer > div {
  overflow: hidden;
}

.faq-answer p {
  font-size: 15px;
  color: var(--text-mid);
  line-height: 1.7;
  padding-bottom: 24px;
}

/* ── FOOTER ── */

footer {
  padding: 80px 5% 24px;
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-end;
  gap: 24px;
  text-align: center;
  overflow: hidden;
}

footer::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.22) 0,
      rgba(0, 0, 0, 0.22) 1px,
      transparent 1px,
      transparent 3px
    ),
    linear-gradient(to top,
      rgba(210, 255, 77, 0.35) 0%,
      rgba(210, 255, 77, 0.20) 30%,
      rgba(210, 255, 77, 0.08) 60%,
      rgba(210, 255, 77, 0.02) 80%,
      transparent 100%
    );
  pointer-events: none;
  z-index: 0;
}

footer p {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
  position: relative;
  z-index: 1;
}

footer .accent { color: var(--accent); }
.footer-sep { opacity: 0.3; margin: 0 4px; }
.footer-link { color: var(--accent); text-decoration: none; }
.footer-link:hover { color: var(--accent); opacity: 0.7; }

/* ── TOOLTIP ── */
.ds-tooltip {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  background: var(--bg-3);
  border: 1px solid var(--border-mid);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 5px 10px;
  border-radius: var(--border-radius-sm);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.15s;
}

.ds-tooltip--visible {
  opacity: 1;
}

/* ── LUCIDE ICONS ── */
.btn-primary svg {
  width: 16px;
  height: 16px;
}

.nav-logo-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  border-radius: var(--border-radius-pill);
  width: 28px;
  height: 28px;
  color: #080808;
  flex-shrink: 0;
}

.nav-logo-arrow svg {
  width: 14px;
  height: 14px;
}

.btn-icon-wrap svg {
  width: 20px;
  height: 20px;
  vertical-align: middle;
  stroke-width: 2.5;
}

.module-num svg {
  width: 12px;
  height: 12px;
  vertical-align: middle;
  stroke-width: 2;
  margin-right: 8px;
}

.module-duration svg {
  width: 12px;
  height: 12px;
  vertical-align: middle;
  stroke-width: 2.5;
}

/* ── HERO ENTRANCE ── */
@keyframes hero-enter {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes hero-enter-right {
  from { opacity: 0; transform: translateX(48px) scale(0.97); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}

.hero-badge   { animation: hero-enter 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both; }
.hero h1      { animation: hero-enter 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both; }
.hero-desc    { animation: hero-enter 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.35s both; }
.hero-actions { animation: hero-enter 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.5s both; }
.hero-visual  { animation: hero-enter-right 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both; }
.marquee-wrap { animation: hero-enter 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.65s both; }

/* ── ANIMATIONS ── */
@keyframes slide-up {
  from { opacity: 0; transform: translateY(48px); }
  to   { opacity: 1; transform: translateY(0); }
}

.fade-in {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

.slide-in-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.slide-in-left.visible {
  opacity: 1;
  transform: translateX(0);
}

.slide-in-left .anatomy-item {
  opacity: 0;
  transform: translateX(-32px);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.slide-in-left.visible .anatomy-item:nth-child(1) { opacity: 1; transform: translateX(0); transition-delay: 0.05s; }
.slide-in-left.visible .anatomy-item:nth-child(2) { opacity: 1; transform: translateX(0); transition-delay: 0.15s; }
.slide-in-left.visible .anatomy-item:nth-child(3) { opacity: 1; transform: translateX(0); transition-delay: 0.25s; }
.slide-in-left.visible .anatomy-item:nth-child(4) { opacity: 1; transform: translateX(0); transition-delay: 0.35s; }


/* ════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════ */

@media (min-width: 1024px) and (max-width: 1600px) {
  .timeline-toast-area { transform: scale(0.75); transform-origin: center center; }
}

@media (max-width: 1512px) {
  .nav-inner { transform: scale(0.85); transform-origin: center center; }
  .hero { padding: 200px 5% 48px; }
  .hero h1 { font-size: 64px; }
}

@media (min-width: 1601px) {
  .hero-inner,
  .section-header,
  .problem-header,
  .problem-grid,
  .bento,
  .aprenda-visual,
  .modulos,
  .tutor-inner,
  .faq-inner,
  .bonus-inner { max-width: 1680px; }
}


@media (min-width: 901px) {
  .prompt-anatomy {
    position: absolute;
    bottom: -50px;
    right: 0;
    width: 700px;
  }
}

/* ── TABLET / 900px ── */
@media (max-width: 900px) {

  .faq-inner { grid-template-columns: 1fr; gap: 40px; }
  .faq-header { position: static; text-align: center; }
  .faq-header .section-tag { margin: 0 auto 16px; }

  .nav-links { display: none; }

  /* Nav — sem scale, reduz padding e fonte diretamente */
  nav { padding: 16px 5%; top: 28px; }
  .nav-inner {
    width: 100%;
    max-width: 420px;
    padding: 10px 12px 10px 20px;
    gap: 10px;
  }
  .nav-logo {
    font-size: 18px;
    padding-right: 0;
    white-space: nowrap;
    flex: 1 1 auto;
    min-width: 0;
  }
  .nav-cta {
    margin-left: auto;
    flex: 0 1 auto;
    min-width: 0;
    gap: 10px;
    padding: 4px 4px 4px 12px;
  }
  .nav-cta .btn-label {
    font-size: 13px;
    letter-spacing: 0.05em;
  }

  .floating-price {
    right: 16px;
    left: 16px;
    bottom: 16px;
  }

  .floating-price-card {
    justify-content: space-between;
    gap: 12px;
    padding: 8px 8px 8px 12px;
  }

  .floating-price-value {
    font-size: 16px;
  }

  /* Hero */
  .hero {
    min-height: auto;
    padding: 100px 5% 60px;
  }

  .hero-inner {
    grid-template-columns: 1fr;
    gap: 40px;
    max-width: 100%;
  }

  .hero h1 { font-size: clamp(40px, 10vw, 64px); }

  .hero-visual {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .hero-visual .terminal {
    margin-top: -80px;
    position: relative;
    z-index: 1;
  }

  #matrix-canvas {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    height: 200px;
    z-index: 0;
    mask-image: radial-gradient(ellipse at center, black 40%, transparent 90%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 40%, transparent 90%);
  }

  .hero-stats { grid-template-columns: repeat(3, 1fr); }

  /* Problem */
  .problem-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }


  .pain-cards {
    grid-template-columns: 1fr 1fr;
  }

  /* Section headers */
  .section-header {
    grid-template-columns: 1fr;
    gap: 16px;
    max-width: 100%;
  }

  .section-header-title,
  .section-header-desc-col {
    text-align: center;
    align-items: center;
  }

  .section-tag {
    align-self: center;
    transform: scale(0.75);
    transform-origin: center;
  }

  /* Centraliza tags, títulos e descrições globalmente no mobile,
     mas exclui .bonus que tem seu próprio alinhamento */
  section:not(.bonus) .section-tag { margin-left: auto; margin-right: auto; }
  section:not(.bonus) h2,
  section:not(.bonus) h3,
  section:not(.bonus) p,
  .section-header-title,
  .section-header-desc-col,
  .problem-lead { text-align: center; }

  /* Timeline */
  .timeline-row {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }

  .timeline-row::before { display: none; }

  /* Aprenda */
  .aprenda-visual {
    max-width: 100%;
    display: flex;
    flex-direction: column;
  }

  .aprenda-bento-wrap {
    position: relative;
    right: auto;
    bottom: auto;
    transform: none;
    animation: none;
    width: 100%;
    mask-image: none;
    -webkit-mask-image: none;
  }

  /* FIX: sem overflow horizontal */
  .aprenda-terminal {
    order: -1;
    width: 100%;
    min-height: auto;
    margin-bottom: 24px;
  }

  /* FIX: reset de todos os grid-column/grid-row hardcoded do bento */
  .bento { grid-template-columns: 1fr 1fr; }

  .bento-colors,
  .bento-type,
  .bento-buttons,
  .bento-icons,
  .bento-toggle,
  .bento-input,
  .bento-spacing,
  .bento-radius {
    grid-column: auto;
    grid-row: auto;
  }

  .aprenda-bento-wrap .bento {
    grid-template-columns: 1fr 1fr;
  }

  .aprenda-bento-wrap .bento > .bento-card,
  .aprenda-bento-wrap .bento > .prompt-visual {
    grid-column: auto;
    grid-row: auto;
    min-width: 0;
    overflow: hidden;
  }

  .aprenda-bento-wrap .bento > .bento-colors,
  .aprenda-bento-wrap .bento > .prompt-visual {
    grid-column: 1 / -1;
  }

  .color-tokens { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .color-swatch-main { height: 56px; }

  .aprenda-bento-wrap .bento-type    { order: 2; }
  .aprenda-bento-wrap .bento-icons   { order: 3; }
  .aprenda-bento-wrap .bento > .bento-buttons { order: 4; grid-column: 1 / -1; }
  .aprenda-bento-wrap .bento-input   { order: 5; }
  .aprenda-bento-wrap .bento-toggle  { order: 6; }
  .aprenda-bento-wrap .bento-spacing { order: 7; }
  .aprenda-bento-wrap .bento-radius  { order: 8; }
  .aprenda-bento-wrap .bento > .bento-spacing,
  .aprenda-bento-wrap .bento > .bento-radius { grid-column: 1 / -1; }
  .btn-samples { grid-template-columns: 1fr 1fr; }

  .bento-spacing .spacing-samples { gap: 8px; }
  .bento-spacing .spacing-bar { max-width: 48px; }

  /* Aprenda */
  .aprenda-section { padding: var(--space-8) var(--page-padding-x); }

  /* Bonus */
  .bonus { padding: var(--space-9) var(--page-padding-x); margin-bottom: 0; }
  .bonus-inner { gap: 40px; }
  .bonus-header { grid-template-columns: 1fr; gap: 24px; }
  .bonus-header-left { width: 100%; }
  .bonus-header-right { width: 100%; }

  .bonus .prompt-visual { padding-bottom: 0; }
  .bonus .prompt-example { max-width: 100%; overflow: hidden; }
  .bonus .prompt-example-code { white-space: pre-wrap; font-size: 11px; padding: 16px; }

  .bonus .prompt-anatomy {
    width: 100%;
    box-sizing: border-box;
    margin-top: 16px;
  }

  .bonus .anatomy-item { align-items: center; }
  .bonus .anatomy-item > div { flex-direction: column; align-items: flex-start; gap: 2px; }
  .bonus .anatomy-desc { margin-left: 0; }

  /* Modules */
  .modules-grid { grid-template-columns: 1fr 1fr; }

  /* CTA */
  .cta-section { padding: var(--space-9) var(--page-padding-x); }
  .price-card { padding: 40px 24px; }
  .price-includes { padding-top: 32px; }
  .price-value { font-size: 48px; }
  .builder-ascii--cta { display: none; }
}

@media (max-width: 420px) {
  .nav-inner {
    padding: 8px;
    gap: 8px;
  }

  .nav-logo {
    font-size: 16px;
    letter-spacing: 0.03em;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .nav-cta {
    gap: 8px;
    padding: 3px 3px 3px 10px;
  }

  .nav-cta .btn-label {
    font-size: 12px;
    letter-spacing: 0.03em;
  }

  .nav-cta .btn-icon-wrap {
    width: 40px;
    height: 40px;
  }

  .floating-price-copy {
    gap: 1px;
  }

  .floating-price-label {
    font-size: 9px;
  }

  .floating-price-value {
    font-size: 14px;
  }

  .floating-price-cta {
    padding: 3px 3px 3px 10px;
    gap: 8px;
  }

  .floating-price-cta .btn-label {
    font-size: 11px;
    letter-spacing: 0.03em;
  }

  .floating-price-cta .btn-icon-wrap {
    width: 38px;
    height: 38px;
  }
}

/* ── MOBILE / 600px ── */
@media (max-width: 600px) {

  /* Workflow — layout vertical mobile */
  .workflow-header .section-header-desc-col { display: none; }
  .workflow-graph { height: 680px; }

  .wf-node--figma    { left: 28%; top: 8%;  }
  .wf-node--mcp      { left: 72%; top: 8%;  }
  .wf-node--claude   { left: 50%; top: 32%; }
  .wf-node--obsidian { left: 22%; top: 60%; }
  .wf-node--ds       { left: 50%; top: 60%; }
  .wf-node--vscode   { left: 78%; top: 60%; }
  .wf-node--vercel   { left: 50%; top: 88%; }

  section { padding: var(--space-8) var(--page-padding-x); }

  #s-modulos { padding: 64px 5% 0 !important; }

  /* Marquee — só ícones, 4 por vez */
  .marquee-item span { display: none; }
  .marquee-item { gap: 0; }
  .marquee-track { gap: 24px; }
  .marquee-wrap { margin: 40px 0; }

  /* Hero */
  .hero { padding: 80px 5% 48px; }
  .hero h1 { font-size: clamp(36px, 12vw, 52px); }
  .hero-left { display: flex; flex-direction: column; align-items: center; text-align: center; }
  .hero-badge { margin-top: 80px; }
  .hero-actions { justify-content: center; }
  .hero-desc { width: 90%; font-size: 1.2rem; line-height: 1.3; }
  .hero-stats { grid-template-columns: repeat(3, 1fr); }

  /* Pain cards — coluna única, ícone à esquerda */
  .pain-cards { grid-template-columns: 1fr; }
  .pain-card { flex-direction: row; align-items: flex-start; gap: 12px; }
  .pain-cards .pain-card p { text-align: left; margin-top: 0; }
  .outcome-list li { font-size: 13px; padding: 12px 14px; gap: 10px; }

  /* Timeline — vertical */
  .modules-timeline { gap: 0; }

  .timeline-row {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .timeline-row::before { display: none; }
  .timeline-row::after  { display: none; }

  .timeline-col::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 12px;
    width: 1px;
    height: calc(var(--col-progress, 0) * (100% - 12px));
    background: var(--accent);
    box-shadow: 0 0 8px rgba(212, 255, 79, 0.5);
    z-index: 1;
  }

  .timeline-col--final::after { display: none; }

  .timeline-col {
    position: relative;
    padding-left: 36px;
    padding-bottom: 40px;
    text-align: left !important;
  }

  .timeline-col h3,
  .timeline-col p,
  .timeline-tag,
  .timeline-outcome {
    text-align: left !important;
  }

  .timeline-col--empty { display: none; }

  .timeline-col::before {
    content: '';
    position: absolute;
    left: 5px;
    top: 12px;
    bottom: 0;
    width: 1px;
    background: var(--border-mid);
  }

  .timeline-col--final::before { display: none; }

  .timeline-dot {
    position: absolute;
    left: 0;
    top: 4px;
    margin-bottom: 0;
  }

  /* Bento — coluna única */
  .bento { grid-template-columns: 1fr; }

  /* Modules */
  .modules-grid { grid-template-columns: 1fr; }

  .modules-grid .module-card[style*="grid-column: 4"] {
    grid-column: 1;
    grid-row: auto;
  }

  /* Bonus */
  .bonus { padding: var(--space-8) var(--page-padding-x); }
  .bonus h2 { font-size: 28px; text-align: center; }
  .bonus-header-left { display: flex; flex-direction: column; align-items: center; text-align: center; }
  .bonus .section-tag { margin-left: auto; margin-right: auto; }
  .bonus p { text-align: center; }

  /* Aprenda bento internals */
  .aprenda-visual {
    position: relative;
    overflow: hidden;
    min-height: auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
    margin-left: 0;
  }
  .aprenda-bento-wrap {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    width: 100%;
    overflow: hidden;
    transform: none;
    transform-origin: center top;
    mask-image: none;
    -webkit-mask-image: none;
    z-index: 2;
    order: 2;
  }

  .aprenda-terminal {
    position: relative;
    z-index: 2;
    width: 100%;
    min-height: auto;
    margin: 0;
    order: 1;
  }

  #aprenda-matrix-canvas { width: 100%; height: 100%; left: 0; transform: none; }
  .btn-samples { grid-template-columns: 1fr 1fr; }
  .icon-samples { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .icon-samples .icon-chip { width: 100%; height: auto; aspect-ratio: 1; max-width: 48px; border-radius: var(--border-radius-md); }
  .type-headline { font-size: 36px; }
  .type-body-sample { font-size: 18px; }
  .bento-card { overflow: hidden; }
  .aprenda-bento-wrap .bento {
    width: 100%;
    max-width: 100%;
    transform: none;
  }
  .aprenda-bento-wrap .bento {
    width: 100%;
    max-width: 100%;
    transform: none;
  }

  /* Tutor */
  .tutor-inner {
    grid-template-columns: 1fr;
    gap: 32px;
    text-align: left;
  }
  .tutor-stats { flex-direction: column; gap: 16px; }
  .tutor-stats li > div { flex-direction: column; gap: 2px; }
  .tutor-content { display: flex; flex-direction: column; align-items: center; }
  .tutor-content .section-tag { width: fit-content; }
  .tutor-visual { width: 200px; height: 200px; aspect-ratio: unset; margin: 0 auto; flex-shrink: 0; order: -1; }
  .tutor-content { order: 0; }

  /* CTA */
  .cta-section p { max-width: 80%; }
  .price-card { padding: 32px 20px; }
  .price-value { font-size: 40px; }

  /* Grid bg menor no mobile */
  .grid-bg { background-size: 32px 32px; }

}