/* ============================================================
   MINOTA LANDING — Design System
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Space+Grotesk:wght@700;800&display=swap');

:root {
  --bg: #0f0f11;
  --bg-card: #18181b;
  --bg-card-hover: #27272a;
  --primary: #0d99ff;
  --primary-dim: rgba(13, 153, 255, 0.15);
  --primary-glow: rgba(13, 153, 255, 0.08);
  --gradient: linear-gradient(135deg, #0d99ff 0%, #3baef8 50%, #60c3fa 100%);
  /* Deeper + a touch of violet at the tail — used only where something
     needs to read as the premium tier (Pro's CTA) without leaving the
     site's blue family the standard --gradient lives in. */
  --gradient-premium: linear-gradient(135deg, #0a5fd6 0%, #2f7dfb 45%, #8b7bff 100%);
  --text: #f4f4f5;
  --text-secondary: rgba(244, 244, 245, 0.65);
  /* 0.35 measured ~3:1 against --bg, failing WCAG AA (4.5:1) for the small
     body text (timestamps, captions, footer) this is used on — 0.8 clears
     AAA (7:1) comfortably. */
  --text-tertiary: rgba(244, 244, 245, 0.8);
  --border: #27272a;
  --border-hover: rgba(13, 153, 255, 0.3);
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: 'Space Grotesk', 'Inter', sans-serif;
  --radius: 16px;
  --radius-sm: 12px;
  --radius-xs: 8px;
  --max-w: 1200px;
  --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

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

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color-scheme: dark;
}

body {
  font-family: var(--font-body);
  background-color: var(--bg);
  /* Positioned to land on sections with an opaque card background (the
     #features grid, #pricing) — #pain-points and #pillars use translucent
     cards (rgba(255,255,255,0.015)) that these glows show straight
     through, which reads as a stray colored blob sitting on the cards. */
  background-image:
    radial-gradient(640px 560px at 92% 4300px, rgba(46, 204, 91, 0.08), transparent 70%),
    radial-gradient(680px 480px at 5% 6300px, rgba(0, 168, 132, 0.07), transparent 70%);
  color: var(--text);
  line-height: 1.6;
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font: inherit;
  color: inherit;
}

img {
  max-width: 100%;
  height: auto;
}

ul {
  list-style: none;
}

.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 20px;
}

/* ============================================================
   HEADER / NAV
   ============================================================ */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 12px 20px;
}

.nav-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: rgba(10, 15, 13, 0.75);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 10px 16px;
}

.nav-logo {
  height: 26px;
  width: auto;
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav-lang {
  position: relative;
  display: flex;
  align-items: center;
}

.nav-lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1;
  transition: var(--transition);
}

.nav-lang-btn svg {
  display: block;
  flex-shrink: 0;
}

.nav-lang-btn span.lang-text {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

.nav-lang-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
}

.nav-lang-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px;
  min-width: 140px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  transition: var(--transition);
  z-index: 200;
}

.nav-lang-dropdown.open {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
}

.nav-lang-option {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  border-radius: var(--radius-xs);
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  transition: var(--transition);
}

.nav-lang-option:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
}

.nav-lang-option.active {
  color: var(--primary);
}

.btn-ghost {
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  transition: var(--transition);
}

.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
}

.btn-primary {
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background: var(--gradient);
  box-shadow: 0 4px 20px rgba(46, 204, 91, 0.2);
  transition: var(--transition);
}

.btn-primary:hover {
  opacity: 0.9;
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(46, 204, 91, 0.3);
}

.btn-primary-lg {
  padding: 14px 28px;
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  background: var(--gradient);
  box-shadow: 0 6px 30px rgba(46, 204, 91, 0.25);
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.btn-primary-lg:hover {
  opacity: 0.9;
  transform: translateY(-2px);
  box-shadow: 0 8px 36px rgba(46, 204, 91, 0.35);
}

.btn-primary-lg svg {
  transition: transform 0.2s;
}

.btn-primary-lg:hover svg {
  transform: translateX(3px);
}

.btn-outline {
  padding: 14px 28px;
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(18, 18, 22, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  transition: var(--transition);
}

.btn-outline:hover {
  border-color: var(--primary);
  background: rgba(26, 26, 32, 0.95);
  box-shadow: 0 8px 28px rgba(13, 153, 255, 0.25);
}

/* Mobile Menu */
.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
}

.nav-hamburger span {
  display: block;
  width: 20px;
  height: 2px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 2px;
  transition: var(--transition);
}

.nav-hamburger.open span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.nav-hamburger.open span:nth-child(2) {
  opacity: 0;
}

.nav-hamburger.open span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

.mobile-menu {
  display: none;
  position: fixed;
  top: 84px;
  left: 12px;
  right: 12px;
  background: rgba(24, 24, 27, 0.95);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  z-index: 99;
  flex-direction: column;
  gap: 8px;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
}

.mobile-menu.open {
  display: flex;
}

.mobile-menu > a,
.mobile-menu > button {
  display: block;
  width: 100%;
  padding: 12px 16px;
  border-radius: var(--radius-xs);
  font-size: 15px;
  font-weight: 500;
  text-align: left;
  transition: var(--transition);
}

/* .mobile-menu > a above (var(--radius-xs), a menu-item convention) would
   otherwise also flatten the CTA button's corner — .btn-primary already
   sets var(--radius-sm), this just wins the specificity fight so the real
   button keeps the same radius as every other button on the site. */
.mobile-menu .btn-primary {
  border-radius: var(--radius-sm);
}

.mobile-menu a:hover {
  background: rgba(255, 255, 255, 0.05);
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  padding: 140px 20px 80px;
  overflow: hidden;
  text-align: center;
}

.hero-glow {
  position: absolute;
  left: 50%;
  top: 0;
  width: 760px;
  height: 480px;
  transform: translateX(-50%);
  background: var(--primary-glow);
  border-radius: 50%;
  filter: blur(130px);
  pointer-events: none;
}

.hero-grid {
  position: absolute;
  inset: 0;
  opacity: 0.25;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(80% 60% at 50% 0%, black, transparent 75%);
  -webkit-mask-image: radial-gradient(80% 60% at 50% 0%, black, transparent 75%);
  pointer-events: none;
}

/* Floating bubbles */
.hero-bubbles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  mask-image: radial-gradient(56% 52% at 50% 46%, transparent 0%, transparent 20%, black 58%);
  -webkit-mask-image: radial-gradient(56% 52% at 50% 46%, transparent 0%, transparent 20%, black 58%);
}

.bubble {
  position: absolute;
  white-space: nowrap;
  padding: 6px 12px;
  border-radius: 16px 4px 16px 16px;
  border: 1px solid rgba(46, 204, 91, 0.2);
  background: rgba(28, 107, 71, 0.7);
  color: #e9f5ee;
  font-size: 12px;
  backdrop-filter: blur(4px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  animation: float-bubble 6s ease-in-out infinite;
  opacity: 0;
}

@keyframes float-bubble {

  0%,
  100% {
    transform: translateY(0) rotate(var(--rot, 0deg));
    opacity: 0.6;
  }

  50% {
    transform: translateY(-12px) rotate(var(--rot, 0deg));
    opacity: 0.9;
  }
}

.hero-content {
  position: relative;
  z-index: 2;
  /* Wide enough that each <br>-separated half of the H1 fits on one line
     on desktop instead of wrapping to two (4 lines total down to 2). */
  max-width: 960px;
  margin: 0 auto;
}

/* Same radial scrim mobile already used to quiet the grid/glow/bubbles
   behind the text (was mobile-only) — desktop has more of those elements
   on screen at once, so it reads even noisier without it. */
.hero-content::before {
  content: '';
  position: absolute;
  inset: -60px;
  background: radial-gradient(circle, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 70%);
  z-index: -1;
  pointer-events: none;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.02);
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.6);
}

.hero-badge svg {
  color: var(--primary);
}

.hero-title {
  margin-top: 24px;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.text-gradient {
  background: var(--gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-subtitle {
  margin-top: 20px;
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
  font-size: 21px;
  line-height: 1.7;
  /* var(--text-secondary) is 65% opacity — bumped to 85% here (own value,
     not sitewide) so the hero subtitle reads clearly against the now
     quieter-but-still-present background. */
  color: rgba(244, 244, 245, 0.85);
}

/* Two copies of the subtitle exist (full desktop version, shorter mobile
   version) — only one renders at a time per breakpoint, swapped below. */
.hero-subtitle-compact {
  display: none;
}

/* ============================================================
   HERO MESSAGES — no phone chrome, just the two bubbles for the
   active rotation pair, bigger and floating directly on the hero
   background. Right/left alignment mirrors real WhatsApp (outgoing
   green on the right, incoming gray on the left) via .wa-msg-out /
   .wa-msg-in's own align-self — untouched here. See
   initHeroRotator() in script.js for the cycling behavior.
   ============================================================ */
.hero-messages {
  margin: 32px auto 0;
  width: 100%;
  max-width: 480px;
  /* .hero centers all its text by default — bubbles need their own text
     left-aligned (standard chat convention), independent of which side
     the bubble itself sits on via .wa-msg-out/.wa-msg-in's align-self. */
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* Fixed (not min-) height, sized for the longest pair (a 2-line user
     bubble + a 1-line reply) — everything below (integrations row, CTA,
     checks) stays put as shorter/longer pairs cycle through instead of
     shifting position each time. 150px, not the ~142px the longest pair
     actually measures at, for slack across browsers/font rendering. */
  height: 150px;
  justify-content: center;
}

.hero-rotation-pair {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* An author rule setting `display` on this element would otherwise
   outrank the UA stylesheet's `[hidden] { display: none }` — restore it
   explicitly so the JS-toggled `hidden` attribute actually hides pairs. */
.hero-rotation-pair[hidden] {
  display: none;
}

/* Same WhatsApp bubble look as the phone-mockup .wa-msg (color, tail,
   checkmarks, alignment — defined later, in the WA-PHONE section) — only
   bigger here, since there's no phone screen constraining their width.
   Scoped via descendant selector rather than a modifier class so it
   reliably wins regardless of source order (.wa-msg sets padding/font-size
   — a same-specificity modifier class placed earlier in the file would
   lose that fight to the later .wa-msg rule). */
.hero-messages .wa-msg {
  padding: 12px 18px 14px;
  font-size: clamp(15px, 2.4vw, 17px);
}

.hero-messages .wa-msg-meta {
  font-size: 12px;
}

.hero-integrations {
  /* More top margin + its own opaque backdrop: the floating chaos bubbles
     behind the hero content have no z-index of their own (they just sit
     under .hero-content), so a bubble landing right behind the icon row
     read as visually overlapping it. The backdrop card gives the icons a
     surface a bubble can't show through, instead of chasing bubble
     positions to avoid this one spot. */
  margin: 40px auto 0;
  width: fit-content;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  background: rgba(15, 15, 17, 0.6);
  backdrop-filter: blur(6px);
}

.hero-integrations-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.02);
  display: flex;
  align-items: center;
  justify-content: center;
}

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

.hero-cta {
  margin-top: 32px;
  display: flex;
  /* Row on desktop — primary + secondary side by side (see
     .hero-cta-desktop-only). The mobile media query below switches this
     back to a column with just the secondary button; the sticky bar
     covers the primary action there instead. */
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

/* Google sign-in styling */
.google-user-pill {
  display: none;
  /* shown via JS when Google user detected */
  align-items: center;
  gap: 10px;
  padding: 4px 8px 4px 4px;
  border-radius: 999px;
  border: 1px solid rgba(46, 204, 91, 0.3);
  background: rgba(46, 204, 91, 0.08);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
}

.google-user-pill img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
}

.google-user-pill.visible {
  display: inline-flex;
}

.hero-checks {
  margin-top: 24px;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 20px;
  padding: 8px 22px;
  border-radius: 999px;
  background: rgba(14, 14, 17, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6);
  font-size: 13px;
  color: rgba(244, 244, 245, 0.9);
}

.hero-checks-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.hero-checks-item svg {
  color: rgba(46, 204, 91, 0.8);
  flex-shrink: 0;
}

/* ============================================================
   SECTIONS — GENERAL
   ============================================================ */
section {
  padding: 80px 20px;
}

.section-badge {
  display: inline-block;
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--primary);
}

.section-title {
  margin-top: 12px;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

.section-subtitle {
  margin-top: 16px;
  font-size: 15px;
  color: var(--text-secondary);
  max-width: 520px;
}

.section-header {
  text-align: center;
  margin-bottom: 48px;
}

.section-header .section-subtitle {
  margin-left: auto;
  margin-right: auto;
}

/* ============================================================
   RECALL — the single emotional-recognition line between the
   pain-points cards and the WhatsApp-habit section. No card, no
   visual, no icon — the copy is the whole section. Second line
   reuses .text-gradient (defined in HERO above) rather than
   duplicating the gradient-clip declaration.
   ============================================================ */
#recall {
  text-align: center;
}

.recall-line {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

/* ============================================================
   PAIN POINTS — 2x2 grid of muted, minimalist cards naming the
   user's current friction. Deliberately grayscale (no accent
   color, no icons) so it reads as "the problem", contrasting
   with the accent-colored "solution" pillars below it.
   ============================================================ */
.pain-grid {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.pain-card {
  padding: 28px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.015);
}

.pain-num {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-tertiary);
}

.pain-visual {
  margin-top: 16px;
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pain-visual-art {
  width: 100%;
  height: 100%;
}

.pain-title {
  margin-top: 16px;
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
}

.pain-desc {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-secondary);
}

/* ============================================================
   FEATURE DEMOS — static stacked sections, one per WhatsApp demo
   ============================================================ */
#demo-sections {
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 96px;
}

.demo-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  padding: 0 32px;
}

.demo-section .slide-info {
  order: 1;
}

.demo-section .wa-phone {
  order: 2;
}

.demo-section.reverse .slide-info {
  order: 2;
}

.demo-section.reverse .wa-phone {
  order: 1;
}

.slide-info {
  text-align: left;
}

.slide-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.02);
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.7);
}

.slide-title {
  margin-top: 16px;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

.slide-desc {
  margin-top: 12px;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--text-secondary);
  max-width: 440px;
}

/* ============================================================
   DAILY HELP GRID — reusable card grid of bare WhatsApp
   message-thread cards (no phone frame)
   ============================================================ */
.dh-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.dh-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: #111114;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}

.dh-card-title {
  padding: 28px 20px 0;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  flex-shrink: 0;
}

.dh-card-body {
  /* Fills whatever vertical space is left once the grid has stretched
     .dh-card to match the tallest card in its row — otherwise a card
     with shorter chat content leaves a gap of plain card background
     below it, which read as the texture getting "cut off". */
  flex: 1;
  margin-top: 20px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 240px;
  background-color: #0b141a;
  /* Tiled, not stretched to "cover" — cover rescales/crops the texture
     differently depending on each card's content height, which is what
     made it look inconsistently cut off from one card to the next. */
  background-image: url('/assets/wa-texture.png');
  background-size: 420px;
  background-repeat: repeat;
}

/* Voice-note message bubble */
.wa-voice-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 160px;
}

.wa-voice-play {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wa-voice-play svg {
  width: 14px;
  height: 14px;
}

.wa-voice-wave {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 2px;
  height: 20px;
}

.wa-voice-wave span {
  display: block;
  width: 2px;
  border-radius: 1px;
  background: rgba(255, 255, 255, 0.7);
}

.wa-voice-duration {
  flex-shrink: 0;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.7);
}

/* Photo message — placeholder box standing in for a real thumbnail,
   optional caption below (same slot a real WhatsApp photo caption sits in). */
.chat-photo-placeholder {
  width: 100%;
  height: 120px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.35);
}

.chat-photo-placeholder svg {
  width: 32px;
  height: 32px;
}

.chat-photo-caption {
  margin-top: 6px;
}

/* Real photo, same footprint as the placeholder box above. */
.chat-photo-img {
  display: block;
  width: 100%;
  height: 120px;
  border-radius: 6px;
  object-fit: cover;
}

/* Sticker — no bubble chrome, matching how WhatsApp renders them: just the
   image (here, a big emoji standing in for sticker art) with its meta row
   below, no background/tail. */
.wa-msg-sticker {
  align-self: flex-end;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.wa-sticker-emoji {
  font-size: 64px;
  line-height: 1;
}

.wa-msg-sticker .wa-msg-meta {
  margin-top: 2px;
}

/* WhatsApp phone mockup — mirrors WhatsApp's real dark-mode UI */
.wa-phone {
  position: relative;
  max-width: 340px;
  margin: 0 auto;
  /* Never inherit text-align from whatever section wraps the mockup (the
     hero centers its own text; the phone's internal header/bubbles must
     stay left-aligned regardless) — this is the phone component's own
     rule to own, not something every call site should have to reset. */
  text-align: left;
}

.wa-phone::before {
  content: '';
  position: absolute;
  inset: -40px;
  z-index: -1;
  /* A true radial gradient instead of a blurred flat shape — CSS filter: blur()
     on a solid color band-steps visibly at low opacity. This renders smooth. */
  background: radial-gradient(closest-side, rgba(13, 153, 255, 0.22), rgba(13, 153, 255, 0.1) 55%, transparent 80%);
  pointer-events: none;
}

.wa-frame {
  border-radius: 44px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: #000;
  padding: 10px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.7);
}

.wa-screen {
  position: relative;
  border-radius: 34px;
  overflow: hidden;
}

.wa-island {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 96px;
  height: 24px;
  border-radius: 999px;
  background: #000;
  z-index: 10;
}

.wa-statusbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 24px 4px;
  background: #202c33;
  color: #e9edef;
}

.wa-statusbar-time {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.wa-statusbar-icons {
  display: flex;
  align-items: center;
  gap: 6px;
}

.wa-statusbar-icons svg {
  width: 14px;
  height: 14px;
}

.wa-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: #202c33;
}

.wa-header-back {
  color: #00a884;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.wa-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  /* Only affects emoji-avatar contact chips (e.g. #whatsapp-habit's "Notas
     sueltas" group) — a full-size SVG like the Minota logo already fills
     the box and covers this. */
  display: flex;
  align-items: center;
  justify-content: center;
  background: #2a3942;
  font-size: 18px;
}

.wa-header-info {
  flex: 1;
  min-width: 0;
}

.wa-header-name {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  color: #e9edef;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wa-header-status {
  font-size: 11.5px;
  line-height: 1.2;
  color: #86969a;
}

.wa-header-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  color: #86969a;
}

.wa-header-actions svg {
  width: 18px;
  height: 18px;
}

.wa-body {
  padding: 12px;
  min-height: 300px;
  background-color: #0b141a;
  /* Tiled, not "cover" — see .dh-card-body for why. */
  background-image: url('/assets/wa-texture.png');
  background-size: 420px;
  background-repeat: repeat;
}

/* Holds the daypill + message bubbles — .wa-body is just the padded/
   textured viewport around it. Split out so the autoscroll variant below
   can translate this alone, independent of .wa-body's own padding/bg. */
.wa-body-inner {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ============================================================
   AUTO-SCROLLING PHONE — fixed 9:16 silhouette for chats too long
   to show all at once (see #whatsapp-habit). script.js's
   initAutoScrollPhones() measures the real overflow at runtime and
   sets --wa-scroll-distance + starts the loop; until then (or under
   prefers-reduced-motion) this is a static crop of the top of the
   conversation — never a broken/default animation. Compound
   selector (.wa-phone.wa-phone--autoscroll, not just the modifier
   class alone) so this reliably wins over the plain .wa-phone /
   .wa-frame / .wa-screen / .wa-body rules in the mobile media query
   further down, regardless of source order.
   ============================================================ */
.wa-phone.wa-phone--autoscroll {
  aspect-ratio: 9 / 16;
  height: auto;
}

.wa-phone.wa-phone--autoscroll .wa-frame {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.wa-phone.wa-phone--autoscroll .wa-screen {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.wa-phone.wa-phone--autoscroll .wa-statusbar,
.wa-phone.wa-phone--autoscroll .wa-header,
.wa-phone.wa-phone--autoscroll .wa-inputbar {
  flex-shrink: 0;
}

.wa-phone.wa-phone--autoscroll .wa-body {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  position: relative;
}

.wa-body-inner.is-autoscrolling {
  animation: wa-autoscroll 26s ease-in-out infinite alternate;
}

@keyframes wa-autoscroll {

  0%,
  8% {
    transform: translateY(0);
  }

  92%,
  100% {
    transform: translateY(var(--wa-scroll-distance, 0));
  }
}

/* ============================================================
   HABIT CHAOS ORBIT — the #whatsapp-habit section keeps its normal
   .demo-section layout (text beside phone); a stage box (.habit-orbit)
   replaces the plain phone slot. Fragment cards (photo, voice note,
   password, receipt, flight, PDF...) are arranged in a circle around
   the stage's center by HABIT_CHAOS/orbitPos() (build.js), which bakes
   each card's `left`/`top` as calc(50% + Npx) trig offsets. The phone
   is positioned absolutely at the stage's exact center on its own
   top layer (z-index above .habit-chaos), so it visually overlaps —
   sits on top of — whichever cards land close enough to the middle of
   the circle, per the CMO's brief.

   .habit-orbit-inner holds the phone+cards at their real 700x700 layout
   size on desktop (plain 100%/100% pass-through, no visual effect). On
   mobile (see media query) it's scaled down as a single unit via
   transform, so the whole composition — phone and all 9 hand-tuned
   card positions — shrinks together to fit the viewport instead of any
   individual position being recalculated or anything getting clipped.
   ============================================================ */
.habit-orbit {
  position: relative;
  width: 700px;
  max-width: 100%;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
}

.demo-section .habit-orbit-col {
  order: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

/* Small pill sitting right above the phone — labels it as the "chat with
   yourself" so the self-chat concept (see .habit-orbit's contact: "Notas
   sueltas" / "Solo tú") reads clearly even out of context. .slide-badge's
   transparent/low-contrast treatment (its original model) was nearly
   invisible against the dark background, so this uses WhatsApp's own
   solid brand green instead — reads instantly as "this is WhatsApp"
   and stands out on purpose, unlike the quieter section badges. */
.habit-orbit-label {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 999px;
  background: #25d366;
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #06301c;
}

.habit-orbit-inner {
  position: relative;
  width: 100%;
  height: 100%;
}

.habit-chaos {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.habit-orbit .wa-phone {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

.chaos-card,
.chaos-bubble {
  position: absolute;
  /* left/top land on the card's center point (calc(50% + Npx) from
     orbitPos()); translate(-50%,-50%) is baked into the keyframe below
     so the float animation doesn't clobber the centering transform. */
  transform: translate(-50%, -50%);
  animation: chaos-float 7s ease-in-out infinite;
}

.chaos-card {
  width: 145px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: rgba(24, 24, 27, 0.92);
  border: 1px solid var(--border);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
}

.chaos-card-icon {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.7);
}

.chaos-card-icon svg {
  width: 14px;
  height: 14px;
}

.chaos-card--amber .chaos-card-icon {
  background: rgba(242, 177, 52, 0.18);
  color: #f2b134;
}

.chaos-card--green .chaos-card-icon {
  background: rgba(46, 204, 91, 0.18);
  color: #2ecb5b;
}

.chaos-card--blue .chaos-card-icon {
  background: rgba(13, 153, 255, 0.18);
  color: #0d99ff;
}

.chaos-card-title {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.25;
}

.chaos-card-value {
  margin-top: 2px;
  font-size: 10px;
  color: var(--text-secondary);
  line-height: 1.25;
}

.chaos-card-time {
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 9.5px;
  color: var(--text-tertiary);
}

.chaos-card-time svg {
  width: 12px;
  height: 12px;
  color: #53bdeb;
}

/* Voice-note variant — icon + waveform-less duration, compact pill. */
.chaos-card--voice {
  width: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
}

.chaos-card--voice svg {
  width: 16px;
  height: 16px;
  color: rgba(255, 255, 255, 0.6);
  flex-shrink: 0;
}

.chaos-voice-duration {
  font-size: 12px;
  color: var(--text-secondary);
}

.chaos-card--voice .chaos-card-time {
  margin-top: 0;
  margin-left: 4px;
}

.chaos-card--purple svg {
  color: #c084fc;
}

/* Photo variant — gradient fill stands in for a real thumbnail, same
   treatment as .chat-photo-placeholder elsewhere: a placeholder, not a
   pretend-real photo. */
.chaos-card--photo {
  width: 130px;
  height: 90px;
  padding: 0;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}

.chaos-photo-fill {
  position: absolute;
  inset: 0;
  /* Same green as .chaos-bubble's #1c6b47 (not the brighter accent green
     used for icons) — this card ends up the most visible in the cloud, so
     it should match the cloud's calmest, most-used tone rather than
     standing apart from it. */
  background: linear-gradient(160deg, #1f7a52 0%, #1c6b47 55%, #123f2c 100%);
}

/* Camera glyph over the gradient fill — without it the placeholder reads
   as an empty color swatch rather than "this is a photo message". */
.chaos-photo-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: rgba(255, 255, 255, 0.55);
}

.chaos-photo-icon svg {
  width: 26px;
  height: 26px;
}

.chaos-card--photo .chaos-card-time {
  position: relative;
  margin: 0 8px 6px 0;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* Caption — gives the placeholder actual content (what the photo is of)
   instead of just a camera glyph on a color swatch. */
.chaos-photo-caption {
  position: absolute;
  left: 10px;
  bottom: 8px;
  max-width: 90px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.25;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* Bubble variant — a smaller, standalone echo of the real WhatsApp
   outgoing bubble (.wa-msg-out), not that class itself: no tail, and it
   needs its own animation/positioning without inheriting phone-specific
   sizing rules. */
.chaos-bubble {
  max-width: 155px;
  padding: 7px 11px 8px;
  border-radius: 8px;
  background: #1c6b47;
  border: 1px solid rgba(46, 204, 91, 0.2);
  color: #e9f5ee;
  font-size: 12.5px;
  line-height: 1.4;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35);
}

.chaos-bubble .wa-msg-meta {
  color: rgba(255, 255, 255, 0.6);
}

.chaos-bubble--muted {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--border);
  color: var(--text);
}

.chaos-bubble--muted .wa-msg-meta {
  color: var(--text-tertiary);
}

@keyframes chaos-float {

  0%,
  100% {
    transform: translate(-50%, -50%) translateY(0);
  }

  50% {
    transform: translate(-50%, -50%) translateY(-8px);
  }
}

@media (prefers-reduced-motion: reduce) {

  .chaos-card,
  .chaos-bubble {
    animation: none;
  }
}

.wa-daypill {
  align-self: center;
  margin-bottom: 4px;
  padding: 4px 10px;
  border-radius: 6px;
  background: #182229;
  color: #86969a;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.wa-msg {
  position: relative;
  max-width: 84%;
  padding: 6px 12px 8px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.4;
  animation: msg-appear 0.4s ease-out both;
}

@keyframes msg-appear {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

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

.wa-msg-out {
  align-self: flex-end;
  background: #005c4b;
  color: #e9edef;
  border-top-right-radius: 0;
}

.wa-msg-out::before {
  content: '';
  position: absolute;
  top: 0;
  right: -6px;
  width: 10px;
  height: 10px;
  background: #005c4b;
  clip-path: polygon(0 0, 0 100%, 100% 0);
}

.wa-msg-in {
  align-self: flex-start;
  background: #202c33;
  color: #e9edef;
  border-top-left-radius: 0;
}

.wa-msg-in::before {
  content: '';
  position: absolute;
  top: 0;
  left: -6px;
  width: 10px;
  height: 10px;
  background: #202c33;
  clip-path: polygon(100% 0, 0 0, 100% 100%);
}

.wa-msg-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
  margin-top: 2px;
  font-size: 10px;
}

.wa-msg-out .wa-msg-meta {
  color: rgba(255, 255, 255, 0.6);
}

.wa-msg-in .wa-msg-meta {
  color: #86969a;
}

.wa-msg-meta svg {
  width: 13px;
  height: 13px;
  color: #53bdeb;
}

.wa-inputbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  background: #202c33;
}

.wa-input-pill {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: #2a3942;
  color: #86969a;
}

.wa-input-pill svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.wa-input-placeholder {
  flex: 1;
  font-size: 13px;
}

.wa-mic-btn {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #00a884;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wa-mic-btn svg {
  width: 18px;
  height: 18px;
  color: #fff;
}

/* ============================================================
   LIGHT WHATSAPP THEME — opt-in via renderWaPhone's `light` option
   (build.js), used only by the #whatsapp-habit phone per feedback that
   the dark wallpaper felt heavy there. Real WhatsApp light-mode
   reference colors: white incoming bubbles, light green outgoing, dark
   text — the dark-mode bubble fills above (light text on a dark fill)
   would be unreadable against a light wallpaper, so every color that
   touches the wallpaper or a bubble gets a light-mode value here.
   Header/status bar/input bar are left as-is: solid colored chrome, not
   wallpaper-dependent, doesn't need to match the body theme.
   ============================================================ */
.wa-phone--light .wa-body {
  background-color: #efeae2;
  background-image: url('/assets/wa-texture-light.png');
}

.wa-phone--light .wa-daypill {
  background: #fff;
  color: #54656f;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.wa-phone--light .wa-msg-out {
  background: #d9fdd3;
  color: #111b21;
}

.wa-phone--light .wa-msg-out::before {
  background: #d9fdd3;
}

.wa-phone--light .wa-msg-in {
  background: #fff;
  color: #111b21;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.wa-phone--light .wa-msg-in::before {
  background: #fff;
}

.wa-phone--light .wa-msg-out .wa-msg-meta {
  color: rgba(0, 0, 0, 0.45);
}

.wa-phone--light .wa-msg-in .wa-msg-meta {
  color: #667781;
}

.wa-phone--light .wa-voice-play {
  background: rgba(0, 0, 0, 0.08);
  color: #111b21;
}

.wa-phone--light .wa-voice-wave span {
  background: rgba(0, 0, 0, 0.35);
}

.wa-phone--light .wa-voice-duration {
  color: rgba(0, 0, 0, 0.55);
}

.wa-phone--light .chat-photo-placeholder {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(0, 0, 0, 0.35);
}

/* Chat mockup cards */
.chat-card {
  margin-top: 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.02);
  overflow: hidden;
}

.chat-card-header {
  padding: 8px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  font-family: 'SF Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--primary);
}

.chat-task-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

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

.chat-task-checkbox {
  width: 16px;
  height: 16px;
  border-radius: 5px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  flex-shrink: 0;
}

.chat-task-name {
  font-size: 12.5px;
  font-weight: 500;
}

.chat-task-time {
  font-size: 10.5px;
  color: var(--text-tertiary);
}

/* Finance card in chat */
.chat-finance-card {
  margin-top: 8px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(46, 204, 91, 0.12);
  background: linear-gradient(180deg, var(--primary-glow), transparent);
  padding: 14px;
}

.finance-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.finance-label {
  font-family: 'SF Mono', monospace;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-tertiary);
}

.finance-amount {
  font-size: 20px;
  font-weight: 800;
  margin-top: 2px;
}

.finance-budget {
  font-family: 'SF Mono', monospace;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--primary);
}

.finance-bar-group {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.finance-bar-label {
  display: flex;
  justify-content: space-between;
  font-size: 10.5px;
  margin-bottom: 4px;
}

.finance-bar-label span:first-child {
  color: rgba(255, 255, 255, 0.65);
}

.finance-bar-label span:last-child {
  color: var(--text-tertiary);
}

.finance-bar {
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  overflow: hidden;
}

.finance-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--gradient);
  transition: width 0.8s ease-out;
}

/* Vault card in chat */
.chat-vault-card {
  margin-top: 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.02);
  overflow: hidden;
}

.vault-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  font-family: 'SF Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.5);
}

.vault-body {
  padding: 12px;
}

.vault-dots {
  font-family: monospace;
  font-size: 13px;
  letter-spacing: 0.2em;
  color: var(--text-tertiary);
}

.vault-link {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 8px 12px;
  border-radius: var(--radius-xs);
  border: 1px solid rgba(46, 204, 91, 0.2);
  background: var(--primary-dim);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--primary);
}

.vault-expire {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  color: var(--text-tertiary);
}

/* ============================================================
   4 PILLARS
   ============================================================ */
.pillars-grid {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.pillar-card {
  padding: 28px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.015);
}

.pillar-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-xs);
  background: var(--primary-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
}

.pillar-icon svg {
  width: 20px;
  height: 20px;
}

.pillar-title {
  margin-top: 16px;
  font-size: 18px;
  font-weight: 700;
}

.pillar-desc {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-secondary);
  /* Normalizes 1-line vs 2-line descriptions so the widget below starts
     at the same y-position across every card in the row. */
  min-height: 48px;
}

/* Pillar widgets */
.pillar-search,
.pillar-slots,
.pillar-vault {
  margin-top: 20px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.02);
  overflow: hidden;
}

.pillar-search-input {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.6);
}

.pillar-search-input svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--text-tertiary);
}

.pillar-search-row,
.pillar-slots-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  font-size: 12.5px;
}

.pillar-search-row:last-child,
.pillar-slots-row:last-child {
  border-bottom: none;
}

.pillar-search-tag {
  font-family: 'SF Mono', monospace;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--primary);
}

.pillar-slots-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  font-family: 'SF Mono', monospace;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-tertiary);
}

.pillar-slots-header svg {
  width: 13px;
  height: 13px;
}

.pillar-slots-time {
  color: rgba(255, 255, 255, 0.6);
}

.pillar-vault-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  font-size: 12.5px;
}

.pillar-vault-row svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: var(--primary);
}

.pillar-vault-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.pillar-vault-label {
  font-weight: 500;
}

.pillar-vault-masked {
  font-family: monospace;
  font-size: 10px;
  letter-spacing: 0.15em;
  color: var(--text-tertiary);
}

.pillar-vault-type {
  font-family: 'SF Mono', monospace;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.3);
}

.pillar-vault-footer {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  font-size: 11px;
  color: var(--text-tertiary);
}

.pillar-vault-footer svg {
  width: 12px;
  height: 12px;
  color: rgba(46, 204, 91, 0.7);
}

.pillar-finance {
  margin-top: 20px;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(46, 204, 91, 0.12);
  background: linear-gradient(180deg, var(--primary-glow), transparent);
}

.pillar-finance-top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.pillar-finance-label {
  display: block;
  font-family: 'SF Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-tertiary);
}

.pillar-finance-amount {
  display: block;
  margin-top: 4px;
  font-size: 24px;
  font-weight: 800;
}

.pillar-finance-status {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--primary);
}

.pillar-finance-status svg {
  width: 14px;
  height: 14px;
}

.pillar-finance-chart {
  margin-top: 12px;
  width: 100%;
  height: 56px;
}

/* ============================================================
   TRANSFORMATION CTA ("El salto")
   ============================================================ */
.transformation-inner {
  /* Widened from 640px so the manifesto title reads in ~3 lines instead of
     wrapping each <br>-separated half further. */
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.transformation-inner .section-title {
  margin-top: 16px;
}

.transformation-inner .section-subtitle {
  margin-left: auto;
  margin-right: auto;
}

.transformation-inner .btn-primary-lg {
  margin-top: 32px;
}

/* ============================================================
   INTEGRATIONS GRID
   ============================================================ */
.integrations-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.integration-card {
  padding: 28px 24px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg-card);
  transition: var(--transition);
}

.integration-card:hover {
  border-color: var(--border-hover);
  background: var(--bg-card-hover);
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
}

.integration-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  background: var(--primary-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.integration-icon svg {
  color: var(--primary);
  width: 24px;
  height: 24px;
}

.integration-title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 6px;
}

.integration-desc {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* ============================================================
   HOW IT WORKS
   ============================================================ */
.how-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}

.how-step {
  padding: 32px 24px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg-card);
  text-align: center;
  transition: var(--transition);
}

.how-step:hover {
  border-color: var(--border-hover);
  transform: translateY(-4px);
}

.how-num {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 800;
  background: var(--gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
  margin-bottom: 16px;
}

.how-title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 8px;
}

.how-desc {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* ============================================================
   PRICING
   ============================================================ */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  max-width: 800px;
  margin: 0 auto;
}

.pricing-card {
  padding: 32px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg-card);
  display: flex;
  flex-direction: column;
  transition: var(--transition);
}

.pricing-card:hover {
  transform: translateY(-4px);
}

.pricing-card.featured {
  border-color: rgba(46, 204, 91, 0.25);
  background: linear-gradient(180deg, rgba(46, 204, 91, 0.06), var(--bg-card));
  position: relative;
}

.pricing-badge {
  position: absolute;
  top: -12px;
  right: 24px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--gradient);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.pricing-name {
  font-size: 20px;
  font-weight: 800;
}

.pricing-price {
  margin-top: 8px;
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 900;
  line-height: 1;
}

.pricing-period {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-tertiary);
}

.pricing-yearly {
  font-size: 12px;
  color: var(--primary);
  margin-top: 4px;
}

.pricing-desc {
  font-size: 14px;
  color: var(--text-secondary);
  margin-top: 12px;
}

.pricing-features {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.pricing-feature {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.8);
}

.pricing-feature svg {
  color: var(--primary);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.pricing-cta {
  margin-top: 28px;
  width: 100%;
  padding: 14px;
  /* var(--radius-sm), matching every other button on the site
     (.btn-primary, .btn-primary-lg, .btn-outline, .btn-ghost). */
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  transition: var(--transition);
}

.pricing-card:not(.featured) .pricing-cta {
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.03);
  color: #fff;
}

.pricing-card:not(.featured) .pricing-cta:hover {
  border-color: var(--border-hover);
}

.pricing-card.featured .pricing-cta {
  background: var(--gradient-premium);
  color: #fff;
  box-shadow: 0 4px 24px rgba(60, 100, 255, 0.3);
}

.pricing-card.featured .pricing-cta:hover {
  opacity: 0.9;
}

/* ============================================================
   FAQ
   ============================================================ */
.faq-list {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.faq-item {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  overflow: hidden;
  transition: var(--transition);
}

.faq-item:hover {
  border-color: rgba(255, 255, 255, 0.12);
}

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 18px 20px;
  font-size: 15px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.faq-question svg {
  width: 18px;
  height: 18px;
  color: var(--text-tertiary);
  flex-shrink: 0;
  transition: transform 0.3s;
}

.faq-item.open .faq-question svg {
  transform: rotate(180deg);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease-out;
}

.faq-item.open .faq-answer {
  max-height: 300px;
}

.faq-answer-inner {
  padding: 0 20px 18px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-secondary);
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  border-top: 1px solid var(--border);
  padding: 48px 20px 32px;
}

.footer-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 40px;
}

.footer-brand img {
  height: 28px;
  margin-bottom: 12px;
}

.footer-tagline {
  font-size: 14px;
  color: var(--text-secondary);
  max-width: 280px;
  line-height: 1.6;
}

.footer-col-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-tertiary);
  margin-bottom: 16px;
}

.footer-link {
  display: block;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  padding: 4px 0;
  transition: var(--transition);
}

.footer-link:hover {
  color: #fff;
}

.footer-bottom {
  max-width: var(--max-w);
  margin: 32px auto 0;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  text-align: center;
  font-size: 13px;
  color: var(--text-tertiary);
}

/* ============================================================
   SCROLL ANIMATIONS
   ============================================================ */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animate-on-scroll.in-view {
  opacity: 1;
  transform: translateY(0);
}

.stagger-1 {
  transition-delay: 0.1s;
}

.stagger-2 {
  transition-delay: 0.2s;
}

.stagger-3 {
  transition-delay: 0.3s;
}

.stagger-4 {
  transition-delay: 0.4s;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .integrations-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .demo-section {
    gap: 32px;
    padding: 0 16px;
  }

  .dh-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .hero-bubbles {
    opacity: 0.4;
    /* Wider clearing around the text block so the fewer remaining bubbles
       don't fight with the headline for attention on small screens. */
    mask-image: radial-gradient(72% 62% at 50% 46%, transparent 0%, transparent 32%, black 66%);
    -webkit-mask-image: radial-gradient(72% 62% at 50% 46%, transparent 0%, transparent 32%, black 66%);
  }

  /* Keep only a curated subset of bubbles on mobile — 14 of them on a
     narrow viewport reads as clutter and crowds out the hero text. */
  .bubble:nth-child(n + 7) {
    display: none;
  }

  .nav-right .btn-ghost,
  .nav-right .btn-primary {
    display: none;
  }

  .nav-hamburger {
    display: flex;
  }

  .desktop-lang .nav-lang-btn span.lang-text {
    display: none;
  }

  .mobile-lang {
    position: relative;
    width: 100%;
    margin-top: 12px;
  }

  .mobile-lang .nav-lang-btn {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    padding: 12px 16px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-xs) !important;
    color: #fff !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    gap: 10px !important;
    box-sizing: border-box !important;
  }

  .mobile-lang .nav-lang-btn svg {
    display: block !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
  }

  .mobile-lang .nav-lang-btn span.lang-text {
    display: inline-block !important;
    flex-grow: 1 !important;
    text-align: left !important;
    line-height: 1 !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    text-transform: none !important;
    color: #fff !important;
  }

  .mobile-lang .nav-lang-dropdown {
    position: absolute;
    bottom: calc(100% + 8px);
    top: auto;
    left: 0;
    right: 0;
    width: 100%;
    transform: translateY(8px);
    z-index: 300;
    background: #18181b;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.6);
    box-sizing: border-box;
  }

  .mobile-lang .nav-lang-dropdown.open {
    transform: translateY(0);
  }

  .hero {
    /* Fallback for browsers without dvh, overridden by the line below. */
    min-height: 100vh;
    min-height: 100dvh;
    padding: 120px 16px 65px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
  }

  .hero-content {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  /* Dropped on mobile — with the badge, headline, subtitle, phone and CTA
     all competing for one viewport, the badge is the least load-bearing
     piece of the stack (the H1 already carries the message). Freeing its
     ~40px helps keep the CTA reachable without scrolling. */
  .hero-badge {
    display: none;
  }

  /* Auto margin above the headline and below the hero messages (see
     #hero-messages below) split the free vertical space evenly, centering
     the title->messages block in the middle of the screen while still
     pinning the CTA (+ checks row right after it) to sit at the foot of the
     viewport, ~65px above the bottom edge via .hero's padding. Was on
     .hero-badge before the badge was hidden on mobile. */
  .hero-title {
    margin-top: auto;
  }

  /* Tighter than desktop's -60px — mobile's .hero-content is full-width,
     not capped at 960px, so a wider inset would push the scrim past the
     badge/title/subtitle it's meant to sit behind. */
  .hero-content::before {
    inset: -40px;
  }

  .hero-title {
    font-size: clamp(1.75rem, 8vw, 2.5rem);
  }

  .hero-subtitle {
    font-size: 17px;
    color: rgba(244, 244, 245, 0.9);
  }

  /* Swap to the shorter copy on mobile — every line here competes with the
     phone and CTA for a viewport that doesn't have room to spare. */
  .hero-subtitle-full {
    display: none;
  }

  .hero-subtitle-compact {
    display: block;
  }

  #hero-messages {
    margin-bottom: auto;
  }

  /* The mobile sticky bar is the primary CTA here — the hero's own inline
     copy stays a single secondary button, back to a column since there's
     only one item in it now. */
  .hero-cta {
    flex-direction: column;
  }

  .hero-cta-desktop-only {
    display: none;
  }

  /* Mobile: scaling the whole 700x700 composition down (tried first)
     shrank the phone along with the cards, making it too small to read —
     the phone is the actual content here, it shouldn't pay for the
     cards' sake. Instead: .habit-orbit becomes a viewport-width "window"
     sized to the phone's own footprint (matching .wa-phone's own mobile
     height formula below, so the window snugly fits it) with
     overflow:hidden as a hard boundary. The phone (position:absolute,
     centered, own natural size — unaffected by any of this) renders full
     size and fully legible. Cards keep their exact desktop-tuned
     calc(50% + Npx) offsets from that same center point — width doesn't
     factor into that math, only the center does — so they still extend
     out past the window's edges and get clipped, same effect as "just
     let the stickers run off-screen". A radial mask on .habit-chaos
     (cards layer only, not the phone) fades them out before the hard
     edge instead of cutting them off abruptly, so the clip reads as
     deliberate framing rather than breakage. */
  /* minmax(0, 1fr), not plain 1fr — a grid item's default min-width is
     its content's max-content size, not 0, so the track itself grows to
     fit the tallest/widest min-content among its items regardless of any
     width:100% set on the item. .habit-orbit-col (now the actual grid
     item here, with the label living above the stage) doesn't have an
     obviously "wide" min-content itself, but something in that subtree
     was still enough to blow the track — and from there the whole
     page — out to ~720px on a 390px viewport. minmax(0, 1fr) caps the
     track at the container's available space regardless. */
  .demo-section {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    padding: 0 8px;
  }

  .habit-orbit-col {
    width: 100%;
    max-width: 100%;
  }

  .habit-orbit {
    width: 100%;
    max-width: 100%;
    height: calc(100dvh - 150px);
    overflow: hidden;
  }

  .habit-orbit-inner {
    position: absolute;
    inset: 0;
  }

  .habit-chaos {
    mask-image: radial-gradient(circle, black 45%, transparent 78%);
    -webkit-mask-image: radial-gradient(circle, black 45%, transparent 78%);
  }

  .demo-section .slide-info,
  .demo-section.reverse .slide-info {
    text-align: center;
    order: 1;
  }

  /* .slide-desc's own max-width:440px (base rule) has no margin:auto —
     harmless on desktop (text-align:left there, box positioning doesn't
     matter), but here it left the box itself pinned to the left edge of
     the now-centered .slide-info while only the text inside it centered,
     reading as misaligned. Centers the box itself to match. */
  .demo-section .slide-desc,
  .demo-section.reverse .slide-desc {
    margin-left: auto;
    margin-right: auto;
  }

  .demo-section .wa-phone,
  .demo-section.reverse .wa-phone {
    order: 2;
  }

  /* The phone mockup was growing to fit each conversation's full length —
     some ran taller than the viewport itself. Capped so the fixed nav
     (~90px) plus the phone plus a 60px bottom margin always fit in one
     screen; the frame/screen stack fills that height and only the message
     body scrolls internally, like a real phone. */
  .wa-phone {
    height: calc(100dvh - 150px);
  }

  .wa-frame {
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .wa-screen {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  .wa-statusbar,
  .wa-header,
  .wa-inputbar {
    flex-shrink: 0;
  }

  .wa-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
  }

  #demo-sections {
    gap: 56px;
  }

  .dh-grid {
    grid-template-columns: 1fr;
  }

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

  .pillars-grid {
    grid-template-columns: 1fr;
  }

  .integrations-grid {
    grid-template-columns: 1fr;
  }

  .how-steps {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .pricing-grid {
    grid-template-columns: 1fr;
  }

  .footer-inner {
    grid-template-columns: 1fr;
    gap: 24px;
    text-align: center;
  }

  .footer-tagline {
    max-width: 100%;
    margin: 0 auto;
  }

  section {
    padding: 60px 20px;
  }

  /* section now provides the 20px horizontal gutter — without this,
     .container's own 20px padding stacked on top of it, doubling the
     gutter to 40px on mobile. */
  .container {
    padding: 0;
  }

  .desktop-lang {
    display: none !important;
  }

  body.is-logged-in .nav-logo {
    content: url('logo_icon_dark.svg');
    height: 32px;
  }
}

@media (max-width: 480px) {
  /* Both hero CTAs get the same treatment — previously only the primary
     button went full-width/downsized here, leaving the secondary button at
     its desktop padding and visibly smaller/narrower next to it. */
  .hero-cta .btn-primary-lg,
  .hero-cta .btn-outline {
    width: 100%;
    justify-content: center;
  }

  .btn-primary-lg,
  .hero-cta .btn-outline {
    font-size: 14px;
    padding: 12px 20px;
  }

  .wa-phone {
    max-width: 100%;
  }

  .nav-inner {
    padding: 8px 12px;
  }

  .nav-logo {
    height: 22px;
  }
}

.vault-link {
  word-break: break-all;
}

/* Nav Profile */
.nav-profile-menu {
  display: flex;
  align-items: center;
  gap: 12px;
}

.nav-profile-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 6px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 100px;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: background 0.2s;
}

.nav-profile-link:hover {
  background: rgba(255, 255, 255, 0.1);
}

.nav-profile-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
}

.nav-profile-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
}

.nav-logout-btn {
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 6px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s, background 0.2s;
}

.nav-logout-btn:hover {
  color: #ff5b5b;
  background: rgba(255, 91, 91, 0.1);
}

/* Mobile Nav Profile */
.mobile-nav-profile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-top: 8px;
}

.mobile-profile-link {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.mobile-logout-btn {
  background: rgba(255, 91, 91, 0.1);
  border: 1px solid rgba(255, 91, 91, 0.2);
  color: #ff5b5b;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  transition: var(--transition);
}

.mobile-logout-btn:hover {
  background: rgba(255, 91, 91, 0.2);
}

.hidden {
  display: none !important;
}

/* Logo Sizes */
.nav-logo,
.footer-logo {
  height: 40px;
  width: auto;
  object-fit: contain;
}

/* Cookie Banner */
/* ============================================================
   MOBILE STICKY CTA — see the comment above it in index.html for
   why this exists. Hidden on desktop, where the hero's own inline
   CTA is always reachable within a couple of scrolls.
   ============================================================ */
.mobile-sticky-cta {
  display: none;
}

@media (max-width: 768px) {
  .mobile-sticky-cta {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 500;
    padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(to top, var(--bg) 60%, transparent);
  }

  .mobile-sticky-cta .btn-primary-lg {
    width: 100%;
    justify-content: center;
    /* Sticky bar sits fixed on screen through the whole scroll, so the
       full blue gradient reads as too loud/persistent — swap it for a
       near-black fill and push the blue out into a glow instead. A thin
       solid border in the same blue adds definition against the near-
       black background the glow alone didn't fully provide. */
    background: #1a1a1d;
    border: 1.5px solid var(--primary);
    box-shadow: 0 0 22px rgba(13, 153, 255, 0.4), 0 4px 14px rgba(0, 0, 0, 0.5);
  }

  .mobile-sticky-cta .btn-primary-lg:hover {
    box-shadow: 0 0 30px rgba(13, 153, 255, 0.55), 0 4px 14px rgba(0, 0, 0, 0.5);
  }

  /* Keeps the footer's own content from sitting underneath the bar. */
  .footer {
    padding-bottom: 84px;
  }
}

.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: var(--bg-card);
  border-top: 1px solid var(--border);
  padding: 16px 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  transform: translateY(100%);
  transition: transform 0.3s ease;
}

.cookie-banner.visible {
  transform: translateY(0);
}

.cookie-content {
  display: flex;
  align-items: center;
  gap: 24px;
  max-width: 1000px;
  width: 100%;
}

.cookie-content p {
  margin: 0;
  font-size: 14px;
  color: var(--text-secondary);
  flex-grow: 1;
}

.cookie-content a {
  color: var(--primary);
  text-decoration: underline;
}

@media (max-width: 600px) {
  .cookie-content {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }

  .cookie-content p {
    text-align: center;
  }

  .cookie-banner button {
    width: 100%;
  }
}