/* =============================================================
   AEPRAX // CASE STUDY — AI RUNNER
   ============================================================= */

:root {
  /* Backgrounds */
  --bg-0: #0A0A0A;
  --bg-1: #121212;
  --bg-2: #1A1A1A;
  --bg-3: #222222;

  /* Bordas */
  --border-faint: #1F1F1F;
  --border-soft:  #2A2A2A;
  --border-loud:  #3A3A3A;

  /* Texto */
  --text-primary:   #F2F2EC;
  --text-secondary: #9A9A93;
  --text-muted:     #5C5C56;

  /* Accents */
  --accent-pace:   #CEDC00;
  --accent-live:   #00E676;
  --accent-warn:   #FFB400;
  --accent-danger: #FF1744;

  /* Grid telemétrico */
  --grid-line: rgba(206, 220, 0, 0.06);

  /* Fontes */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* Spacing */
  --container-px: clamp(1.25rem, 4vw, 4rem);
  --section-py: clamp(5rem, 10vw, 9rem);
}

/* =============================================================
   PRELOADER
   ============================================================= */
html.is-preloading,
html.is-preloading body {
  overflow: hidden;
  height: 100%;
}

.preloader {
  position: fixed;
  inset: 0;
  z-index: 999;
  background-color: var(--bg-0);
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: 80px 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  transition: opacity 600ms ease, visibility 600ms ease;
}
.preloader.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.preloader__inner {
  position: relative;
  padding: 3rem clamp(2rem, 8vw, 4.5rem) 2.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  background: var(--bg-1);
  border: 1px solid var(--border-soft);
  min-width: 280px;
  max-width: 420px;
}

/* Corner brackets */
.preloader__corner {
  position: absolute;
  width: 18px;
  height: 18px;
  border-color: var(--accent-pace);
  border-style: solid;
  border-width: 0;
}
.preloader__corner--tl { top: -1px; left: -1px;  border-top-width: 2px; border-left-width: 2px;  }
.preloader__corner--tr { top: -1px; right: -1px; border-top-width: 2px; border-right-width: 2px; }
.preloader__corner--bl { bottom: -1px; left: -1px;  border-bottom-width: 2px; border-left-width: 2px;  }
.preloader__corner--br { bottom: -1px; right: -1px; border-bottom-width: 2px; border-right-width: 2px; }

/* Top label */
.preloader__top {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.2em;
  color: var(--text-secondary);
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}
.preloader__top-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-live);
  box-shadow: 0 0 8px var(--accent-live);
  animation: pulse 1.6s ease-in-out infinite;
}

/* Logo */
.preloader__logo-wrap {
  position: relative;
  padding: 0.25rem 0;
}
.preloader__logo {
  height: 36px;
  width: auto;
  opacity: 0.95;
  animation: preloader-logo-pulse 2.4s ease-in-out infinite;
}
@keyframes preloader-logo-pulse {
  0%, 100% { opacity: 0.85; filter: drop-shadow(0 0 0 rgba(206, 220, 0, 0)); }
  50%      { opacity: 1;    filter: drop-shadow(0 0 18px rgba(206, 220, 0, 0.45)); }
}

/* Meta text */
.preloader__meta {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  color: var(--text-muted);
  text-transform: uppercase;
  position: relative;
}
.preloader__meta::after {
  content: "▍";
  color: var(--accent-pace);
  margin-left: 4px;
  animation: blink 1s ease infinite;
}

/* Loading bar */
.preloader__bar {
  width: 100%;
  max-width: 240px;
  height: 2px;
  background: var(--border-soft);
  position: relative;
  overflow: hidden;
}
.preloader__bar-fill {
  position: absolute;
  inset: 0;
  background: var(--accent-pace);
  transform-origin: left center;
  transform: scaleX(0);
  animation: preloader-load 1.7s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}
@keyframes preloader-load {
  0%   { transform: scaleX(0); }
  60%  { transform: scaleX(0.65); }
  100% { transform: scaleX(1); }
}

/* Readouts (boot sequence) */
.preloader__readouts {
  display: flex;
  gap: 1.25rem;
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.preloader__readouts li {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: color 200ms ease;
}
.preloader__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-danger);
  box-shadow: 0 0 6px rgba(255, 23, 68, 0.55);
  animation: preloader-dot-on 0.5s ease-out forwards;
}
.preloader__readouts li:nth-child(1) .preloader__dot { animation-delay: 0.3s; }
.preloader__readouts li:nth-child(2) .preloader__dot { animation-delay: 0.85s; }
.preloader__readouts li:nth-child(3) .preloader__dot { animation-delay: 1.45s; }
.preloader__readouts li:nth-child(1).is-lit,
.preloader__readouts li:nth-child(2).is-lit,
.preloader__readouts li:nth-child(3).is-lit { color: var(--text-secondary); }
@keyframes preloader-dot-on {
  0%   { background: var(--accent-danger); box-shadow: 0 0 6px rgba(255, 23, 68, 0.55); }
  60%  { background: var(--accent-warn);   box-shadow: 0 0 7px rgba(255, 180, 0, 0.65); }
  100% { background: var(--accent-live);   box-shadow: 0 0 8px var(--accent-live);      }
}

/* Tag at the bottom outside the panel */
.preloader__footer {
  position: absolute;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  color: var(--text-muted);
  text-transform: uppercase;
}

/* =============================================================
   RESET / BASE
   ============================================================= */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--text-primary);
  background-color: var(--bg-0);
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: 80px 80px;
  background-position: -1px -1px;
  overflow-x: hidden;
  font-feature-settings: 'ss01', 'ss02';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  animation: grid-drift 40s linear infinite;
}
@keyframes grid-drift {
  from { background-position: -1px -1px, -1px -1px; }
  to   { background-position: -1px 79px, -1px 79px; }
}

img, svg { max-width: 100%; display: block; }

button { font-family: inherit; cursor: pointer; background: none; border: 0; color: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

::selection { background: var(--accent-pace); color: var(--bg-0); }

/* Focus visível */
:focus-visible {
  outline: 2px solid var(--accent-pace);
  outline-offset: 3px;
}

/* =============================================================
   GENERIC UTILITIES
   ============================================================= */
.accent { color: var(--accent-pace); }
.strike {
  position: relative;
  color: var(--text-secondary);
}
.strike::after {
  content: "";
  position: absolute;
  left: -2%;
  right: -2%;
  top: 52%;
  height: 3px;
  background: var(--accent-pace);
  transform: skewY(-2deg);
  box-shadow: 0 0 10px rgba(206, 220, 0, 0.5);
}

.display-h2 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--text-primary);
}

/* Eyebrow + tag-line wrapper */
.section-tag-line {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}
.section-tag-line::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border-faint);
}
.section-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  white-space: pre;
  display: inline-block;
  position: relative;
}
.section-eyebrow.is-typing::after {
  content: "▍";
  color: var(--accent-pace);
  margin-left: 2px;
  animation: blink 1s ease infinite;
}

/* Section base */
section {
  padding-top: var(--section-py);
  padding-bottom: var(--section-py);
  padding-left: var(--container-px);
  padding-right: var(--container-px);
  max-width: 1440px;
  margin: 0 auto;
  position: relative;
}

/* =============================================================
   STATUS BAR
   ============================================================= */
.status-bar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(10, 10, 10, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border-soft);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
}
.status-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.625rem var(--container-px);
  max-width: 1440px;
  margin: 0 auto;
}
.status-bar__left, .status-bar__right {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}
.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-live);
  box-shadow: 0 0 8px var(--accent-live);
  animation: pulse 1.6s ease-in-out infinite;
}
.status-label {
  color: var(--accent-live);
  font-weight: 500;
}
.status-divider { color: var(--border-loud); }
.status-time { color: var(--text-primary); }
.status-tag {
  color: var(--accent-pace);
  font-weight: 500;
}
.status-meta { color: var(--text-muted); }

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.85); }
}

/* =============================================================
   HEADER
   ============================================================= */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem var(--container-px);
  max-width: 1440px;
  margin: 0 auto;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  color: var(--text-primary);
  line-height: 0;
}
.brand__logo {
  height: 22px;
  width: auto;
  display: block;
  opacity: 0.95;
  transition: opacity 200ms ease;
}
.brand__logo--footer {
  height: 20px;
  opacity: 0.7;
}
.brand:hover .brand__logo { opacity: 1; }
.header-back {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
  text-transform: uppercase;
  padding: 0.5rem 0.875rem;
  border: 1px solid var(--border-soft);
  transition: border-color 200ms ease, color 200ms ease;
}
.header-back:hover {
  border-color: var(--accent-pace);
  color: var(--text-primary);
}

/* =============================================================
   BUTTONS
   ============================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.875rem 1.25rem;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
  border-radius: 2px;
  transition: transform 200ms ease, background-color 200ms ease, border-color 200ms ease, color 200ms ease;
  border: 1px solid transparent;
  cursor: pointer;
  position: relative;
}
.btn__arrow { transition: transform 200ms ease; }
.btn:hover .btn__arrow { transform: translateX(4px); }

.btn--primary {
  background: var(--accent-pace);
  color: var(--bg-0);
  border-color: var(--accent-pace);
}
.btn--primary:hover {
  background: var(--text-primary);
  border-color: var(--text-primary);
  color: var(--bg-0);
}

.btn--ghost {
  background: transparent;
  color: var(--text-primary);
  border-color: var(--border-loud);
}
.btn--ghost:hover {
  border-color: var(--accent-pace);
  color: var(--accent-pace);
}

/* =============================================================
   STORE BADGES (Google Play + App Store)
   ============================================================= */
.store-badges {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1.75rem;
}
.store-badges__label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.store-badges__arrow {
  color: var(--accent-pace);
  font-weight: 500;
  animation: arrow-nudge 1.8s ease-in-out infinite;
}
@keyframes arrow-nudge {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(4px); }
}
.store-badges__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
}

.store-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 1rem 0.625rem 0.875rem;
  background: var(--bg-0);
  border: 1px solid var(--border-loud);
  border-radius: 6px;
  transition: border-color 200ms ease, transform 200ms ease, background-color 200ms ease;
  min-width: 168px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.store-badge::before {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(206, 220, 0, 0.12) 50%,
    transparent 100%
  );
  z-index: -1;
  transition: left 600ms ease;
}
.store-badge:hover {
  border-color: var(--accent-pace);
  transform: translateY(-2px);
}
.store-badge:hover::before { left: 130%; }

.store-badge__icon {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  color: var(--text-primary);
}
.store-badge__text {
  display: flex;
  flex-direction: column;
  line-height: 1;
  gap: 3px;
}
.store-badge__small {
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.14em;
  color: var(--text-muted);
  text-transform: uppercase;
}
.store-badge__name {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--text-primary);
}

/* Larger variant for the proof section */
.store-badge--lg {
  padding: 0.875rem 1.5rem 0.875rem 1.125rem;
  min-width: 200px;
  gap: 0.875rem;
}
.store-badge--lg .store-badge__icon { width: 32px; height: 32px; }
.store-badge--lg .store-badge__name { font-size: 1.0625rem; }
.store-badge--lg .store-badge__small { font-size: 0.625rem; }

/* Proof section download row */
.proof__download {
  margin-bottom: clamp(4rem, 7vw, 6rem);
  padding: 2.25rem clamp(1.5rem, 3vw, 2.5rem);
  background: var(--bg-1);
  border: 1px solid var(--border-soft);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
  position: relative;
}
.proof__download::before {
  content: "";
  position: absolute;
  top: -1px; left: -1px;
  width: 32px; height: 32px;
  border-top: 2px solid var(--accent-pace);
  border-left: 2px solid var(--accent-pace);
}
.proof__download::after {
  content: "";
  position: absolute;
  bottom: -1px; right: -1px;
  width: 32px; height: 32px;
  border-bottom: 2px solid var(--accent-pace);
  border-right: 2px solid var(--accent-pace);
}
/* Header strip — label + meta tag on the right */
.proof__download-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  width: 100%;
}
.proof__download-label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-pace);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
}
.proof__download-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-pace);
  box-shadow: 0 0 8px rgba(206, 220, 0, 0.7);
  animation: pulse 1.6s ease-in-out infinite;
}
.proof__download-meta {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0;
}

/* Stats line below the store badges */
.proof__download-stats {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  padding-top: 1rem;
  margin-top: 0.5rem;
  border-top: 1px dashed var(--border-faint);
  width: 100%;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-secondary);
  letter-spacing: 0.04em;
}
.proof__stat {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.proof__stat strong {
  color: var(--text-primary);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.proof__stat-star {
  color: var(--accent-pace);
  font-size: 0.875em;
}
.proof__stat-key {
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.proof__stat-sep { color: var(--border-loud); }

@media (min-width: 768px) {
  .proof__download {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
  }
}

/* =============================================================
   DEVICE MOCKUP
   ============================================================= */
.device {
  position: relative;
  aspect-ratio: 9 / 19;
  width: 100%;
  max-width: 260px;
  background: var(--bg-0);
  border: 1px solid var(--border-loud);
  border-radius: 34px;
  padding: 6px;
  box-shadow:
    0 0 0 1px var(--border-faint) inset,
    0 14px 36px -16px rgba(0, 0, 0, 0.85);
  transition: transform 300ms ease, border-color 200ms ease, box-shadow 400ms ease;
  z-index: 1;
}
/* Hero device gets the lime breathe — gallery devices stay clean */
.device--hero {
  max-width: 300px;
  animation: device-breathe-hero 7s ease-in-out infinite;
}
@keyframes device-breathe-hero {
  0%, 100% {
    box-shadow:
      0 0 0 1px var(--border-faint) inset,
      0 14px 36px -16px rgba(0, 0, 0, 0.85),
      0 16px 50px -22px rgba(206, 220, 0, 0.10),
      0 0 50px -28px rgba(206, 220, 0, 0.16);
  }
  50% {
    box-shadow:
      0 0 0 1px var(--border-faint) inset,
      0 14px 36px -16px rgba(0, 0, 0, 0.85),
      0 22px 70px -22px rgba(206, 220, 0, 0.18),
      0 0 90px -28px rgba(206, 220, 0, 0.28);
  }
}
.device__notch {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 16px;
  background: var(--bg-0);
  border-radius: 0 0 10px 10px;
  z-index: 2;
}
.device__screen {
  width: 100%;
  height: 100%;
  border: 1px dashed var(--border-loud);
  background: var(--bg-2);
  border-radius: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.25rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--text-muted);
  letter-spacing: 0.06em;
}

/* When the screen holds a real screenshot, drop placeholder styling */
.device__screen--image {
  border: 0;
  padding: 0;
  background: var(--bg-0);
  overflow: hidden;
}
.device__screen--image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  border-radius: inherit;
}

/* =============================================================
   HERO DEVICE — interactive in-app quiz (AI Runner onboarding)
   ============================================================= */
.device__screen--quiz {
  --qz-lime: #CEDC00;
  --qz-bg:   #0A0A0A;
  --qz-bg-1: #161616;
  --qz-bg-2: #1F1F1F;
  --qz-border: #2A2A2A;
  --qz-text: #F2F2EC;
  --qz-muted: #8A8A82;
  --qz-fg-on-lime: #0A0A0A;

  position: relative;
  border: 0;
  padding: 0;
  background: var(--qz-bg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  text-align: left;
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--qz-text);
  font-size: 11px;
  line-height: 1.35;
  border-radius: 28px;
  isolation: isolate;
}

/* Quiz preloader — full-screen overlay shown for ~2s before the quiz starts */
.qz-preload {
  position: absolute;
  inset: 0;
  z-index: 50;
  background: var(--qz-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 40px 24px 60px;
  border-radius: inherit;
  transition: opacity 450ms ease, visibility 450ms ease;
}
.qz-preload.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.qz-preload__gif {
  width: 120px;
  height: auto;
  display: block;
  filter: drop-shadow(0 0 20px rgba(206, 220, 0, 0.35));
}
.qz-preload__text {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: lowercase;
  color: var(--qz-muted);
  text-align: center;
  margin: 0;
}
.qz-preload__bar {
  width: 140px;
  height: 2px;
  background: var(--qz-border);
  overflow: hidden;
  position: relative;
  border-radius: 1px;
}
.qz-preload__bar-fill {
  position: absolute;
  inset: 0;
  background: var(--qz-lime);
  transform-origin: left center;
  transform: scaleX(0);
  animation: qz-preload-fill 3s cubic-bezier(0.45, 0, 0.4, 1) forwards;
  animation-play-state: paused;
  box-shadow: 0 0 8px rgba(206, 220, 0, 0.6);
}
.qz-preload.is-playing .qz-preload__bar-fill {
  animation-play-state: running;
}
@keyframes qz-preload-fill {
  0%   { transform: scaleX(0); }
  100% { transform: scaleX(1); }
}

/* iOS-style status bar — pushed below the notch decoration */
.qz-statusbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 22px 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: -0.01em;
  flex-shrink: 0;
  line-height: 1;
}
.qz-statusbar__time {
  color: var(--qz-text);
  font-variant-numeric: tabular-nums;
}
.qz-statusbar__icons {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--qz-text);
}
.qz-icon {
  display: inline-block;
  width: 13px;
  height: auto;
  fill: currentColor;
}
.qz-icon--battery { width: 22px; }

/* App header (back button + brand mark) */
.qz-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 18px 12px;
  flex-shrink: 0;
}
.qz-back {
  width: 34px;
  height: 32px;
  background: transparent;
  border: 1px solid var(--qz-lime);
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--qz-lime);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: background 150ms ease, transform 100ms ease, opacity 150ms ease;
}
.qz-back svg { width: 16px; height: 16px; display: block; }
.qz-back:active { transform: scale(0.92); background: rgba(206, 220, 0, 0.1); }
.qz-back:disabled { opacity: 0.3; cursor: default; }
.qz-brand {
  height: 24px;
  width: auto;
  display: block;
}

/* Progress bar */
.qz-progress {
  position: relative;
  height: 4px;
  background: var(--qz-border);
  margin: 0 18px 14px;
  border-radius: 2px;
  overflow: hidden;
  flex-shrink: 0;
}
.qz-progress__fill {
  position: absolute;
  inset: 0;
  background: var(--qz-lime);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 400ms cubic-bezier(0.16, 1, 0.3, 1);
  border-radius: 2px;
}

/* Main content scroll area */
.qz-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 18px 8px;
  position: relative;
  scrollbar-width: none;
}
.qz-content::-webkit-scrollbar { display: none; }

/* Slide transitions between screens */
.qz-screen {
  display: flex;
  flex-direction: column;
  gap: 12px;
  opacity: 0;
  transform: translateX(24px);
  transition:
    opacity 260ms ease,
    transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
}
.qz-screen.is-active { opacity: 1; transform: translateX(0); }
.qz-screen.is-exiting-back {
  opacity: 0;
  transform: translateX(24px);
}
.qz-screen.is-exiting-forward {
  opacity: 0;
  transform: translateX(-24px);
}
.qz-screen.is-entering-back {
  opacity: 0;
  transform: translateX(-24px);
}

/* Question title */
.qz-title {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin: 0;
}
.qz-subtitle {
  font-size: 10.5px;
  color: var(--qz-muted);
  line-height: 1.45;
  margin: 0;
}

/* Big option card — used for objective / level questions */
.qz-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  background: var(--qz-bg-1);
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  transition: border-color 180ms ease, background 180ms ease, transform 120ms ease;
  position: relative;
}
.qz-card:active { transform: scale(0.985); }
.qz-card.is-selected {
  border-color: var(--qz-lime);
  background: var(--qz-bg-2);
  box-shadow: 0 0 0 1px rgba(206, 220, 0, 0.18);
}
.qz-card__icon {
  width: 28px;
  height: 22px;
  flex-shrink: 0;
  display: inline-block;
  background: url("logo-classic.webp") center/contain no-repeat;
}
.qz-card__icon--cal {
  background: none;
  position: relative;
}
.qz-card__icon--cal::before {
  content: "";
  position: absolute;
  inset: 1px 0 0;
  background:
    linear-gradient(var(--qz-lime), var(--qz-lime)) 0 0/100% 5px no-repeat,
    linear-gradient(var(--qz-lime), var(--qz-lime)) 0 0/3px 100% no-repeat,
    linear-gradient(var(--qz-lime), var(--qz-lime)) 100% 0/3px 100% no-repeat,
    linear-gradient(var(--qz-lime), var(--qz-lime)) 0 100%/100% 3px no-repeat,
    radial-gradient(circle, var(--qz-lime) 1.2px, transparent 1.5px) 4px 9px/6px 6px;
}
.qz-card__body { flex: 1; min-width: 0; }
.qz-card__title {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--qz-text);
  margin-bottom: 2px;
  line-height: 1.15;
}
.qz-card__desc {
  font-size: 10px;
  color: var(--qz-muted);
  line-height: 1.35;
}

/* Wide CTA pill (Buscar próximas provas, etc.) */
.qz-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  background: var(--qz-lime);
  color: var(--qz-fg-on-lime);
  border: 0;
  border-radius: 6px;
  font-weight: 700;
  font-size: 11.5px;
  cursor: pointer;
  font-family: inherit;
}
.qz-pill svg { width: 14px; height: 14px; }
.qz-note {
  font-size: 10px;
  color: var(--qz-muted);
  text-align: center;
  font-style: italic;
  line-height: 1.45;
}

/* Checkbox row — selectable list with square check */
.qz-check {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--qz-bg-1);
  border: 1px solid var(--qz-border);
  border-radius: 6px;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease;
}
.qz-check:hover { border-color: rgba(206, 220, 0, 0.4); }
.qz-check.is-selected { border-color: var(--qz-lime); }
.qz-check__box {
  width: 16px;
  height: 16px;
  border: 1.4px solid var(--qz-lime);
  border-radius: 3px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: transparent;
}
.qz-check.is-selected .qz-check__box {
  background: var(--qz-lime);
}
.qz-check.is-selected .qz-check__box::after {
  content: "";
  width: 9px;
  height: 5px;
  border-left: 1.6px solid var(--qz-fg-on-lime);
  border-bottom: 1.6px solid var(--qz-fg-on-lime);
  transform: rotate(-45deg) translate(0.5px, -1px);
}
.qz-check__label {
  font-weight: 600;
  font-size: 12px;
  color: var(--qz-text);
  transition: color 160ms ease;
}
.qz-check.is-selected .qz-check__label { color: var(--qz-lime); }

/* Chip selector row (5km / 10km / etc) */
.qz-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px 0;
}
.qz-chip {
  flex: 1;
  min-width: 56px;
  text-align: center;
  padding: 9px 8px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--qz-text);
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}
.qz-chip.is-selected {
  background: var(--qz-bg-1);
  border-color: var(--qz-lime);
}

/* Big-number readout (selected distance, etc.) */
.qz-bignum {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 30px;
  font-weight: 900;
  color: var(--qz-lime);
  letter-spacing: -0.04em;
  line-height: 1;
  margin: 2px 0 2px;
}

/* Time spinner — h / min / seg display */
.qz-time {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: 'JetBrains Mono', monospace;
  margin-top: 8px;
}
.qz-time__current {
  font-size: 12px;
  color: var(--qz-text);
  letter-spacing: 0.04em;
}
.qz-time__parts {
  display: inline-flex;
  gap: 10px;
  font-size: 13px;
}
.qz-time__part b {
  font-weight: 700;
  color: var(--qz-text);
  margin-right: 2px;
}
.qz-time__part span {
  color: var(--qz-muted);
  font-size: 9px;
  text-transform: lowercase;
}

/* Info banners (the tag-with-icon panels under questions) */
.qz-banner {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px;
  background: var(--qz-bg-1);
  border: 1px solid rgba(206, 220, 0, 0.18);
  border-radius: 6px;
  font-size: 10.5px;
  color: var(--qz-muted);
  line-height: 1.45;
}
.qz-banner__icon {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  color: var(--qz-lime);
}
.qz-banner em {
  color: var(--qz-lime);
  font-style: normal;
  font-weight: 600;
}

/* Day-of-week toggle (SEG TER QUA ...) */
.qz-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}
.qz-day {
  font-family: inherit;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 8px 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 5px;
  color: var(--qz-muted);
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}
.qz-day.is-selected {
  background: var(--qz-bg-1);
  border-color: var(--qz-lime);
  color: var(--qz-lime);
}

/* Calendar (Sep/Nov 2025 mockups) */
.qz-cal {
  padding: 12px;
  background: var(--qz-bg-1);
  border-radius: 8px;
  border: 1px solid var(--qz-border);
}
.qz-cal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 11px;
  color: var(--qz-text);
}
.qz-cal__nav {
  background: transparent;
  border: 0;
  color: var(--qz-lime);
  font-family: inherit;
  cursor: pointer;
  padding: 4px 6px;
}
.qz-cal__brand {
  display: inline-block;
  width: 20px;
  height: 16px;
  background: url("logo-classic.webp") center/contain no-repeat;
  margin-bottom: 4px;
}
.qz-cal__weekdays,
.qz-cal__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
}
.qz-cal__weekdays {
  color: var(--qz-lime);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}
.qz-cal__grid {
  font-size: 9.5px;
  gap: 2px;
}
.qz-cal__day {
  padding: 5px 0;
  border-radius: 50%;
  cursor: pointer;
  background: transparent;
  border: 0;
  color: var(--qz-text);
  font-family: inherit;
  transition: background 150ms ease, color 150ms ease;
}
.qz-cal__day--muted { color: rgba(255,255,255,0.18); pointer-events: none; }
.qz-cal__day.is-selected {
  background: var(--qz-bg-2);
  border: 1px solid var(--qz-lime);
  color: var(--qz-text);
  font-weight: 700;
}

/* Form fields (date, text) */
.qz-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.qz-field__label {
  font-size: 10px;
  color: var(--qz-muted);
}
.qz-field__input {
  background: var(--qz-bg-1);
  border: 1px solid var(--qz-border);
  border-radius: 6px;
  padding: 9px 10px;
  color: var(--qz-text);
  font-family: inherit;
  font-size: 11.5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: text;
}
.qz-field__input input {
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  width: 100%;
  outline: none;
}
.qz-field__input svg { width: 14px; height: 14px; color: var(--qz-lime); }

/* Summary table */
.qz-summary {
  background: var(--qz-bg-1);
  border: 1px solid var(--qz-border);
  border-radius: 8px;
  padding: 4px 12px;
  display: flex;
  flex-direction: column;
}
.qz-summary__row {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 8px;
  align-items: flex-start;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.qz-summary__row:last-child { border-bottom: 0; }
.qz-summary__icon {
  width: 13px;
  height: 13px;
  color: var(--qz-lime);
  margin-top: 1px;
  flex-shrink: 0;
}
.qz-summary__label {
  display: block;
  font-size: 9.5px;
  color: var(--qz-muted);
  text-align: right;
}
.qz-summary__value {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--qz-text);
  text-align: right;
}

/* Footer with next button */
.qz-footer {
  padding: 12px 14px 18px;
  flex-shrink: 0;
}
.qz-btn {
  display: block;
  box-sizing: border-box;
  width: 100%;
  padding: 18px 16px;
  background: var(--qz-text);
  color: var(--qz-fg-on-lime);
  border: 0;
  border-radius: 8px;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: background 180ms ease, opacity 180ms ease, transform 100ms ease;
}
.qz-btn:disabled {
  background: var(--qz-bg-2);
  color: var(--qz-muted);
  cursor: not-allowed;
}
.qz-btn:not(:disabled):active { transform: scale(0.985); }

/* Subtle dotted divider for in-card splits */
.qz-divider {
  height: 0;
  border-top: 1px dashed rgba(255,255,255,0.08);
  margin: 4px 0;
}

/* Completion overlay — once user reaches the end */
.qz-done {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center top, rgba(206, 220, 0, 0.18) 0%, transparent 60%), var(--qz-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 20px;
  text-align: center;
  z-index: 5;
  opacity: 0;
  pointer-events: none;
  transition: opacity 400ms ease;
}
.qz-done.is-visible { opacity: 1; pointer-events: auto; }
.qz-done__logo {
  width: 80px;
  height: auto;
  filter: drop-shadow(0 0 24px rgba(206, 220, 0, 0.7));
  animation: qz-done-bob 2.4s ease-in-out infinite;
}
@keyframes qz-done-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}
.qz-done__title {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 900;
  font-size: 18px;
  color: var(--qz-text);
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.qz-done__sub {
  font-size: 11px;
  color: var(--qz-muted);
  max-width: 220px;
  line-height: 1.45;
}
.qz-done__restart {
  margin-top: 4px;
  padding: 9px 18px;
  background: var(--qz-lime);
  color: var(--qz-fg-on-lime);
  border: 0;
  border-radius: 6px;
  font-family: inherit;
  font-weight: 700;
  font-size: 11px;
  cursor: pointer;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Splash screen inside hero device */
.device__screen--splash {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1.25rem;
  border-style: solid;
  border-color: var(--border-faint);
  background:
    radial-gradient(ellipse at center top, rgba(206, 220, 0, 0.08) 0%, transparent 60%),
    var(--bg-0);
  padding: 1.5rem 1.25rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}
/* Scanline that sweeps top→bottom */
.device__screen--splash::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 30%;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(206, 220, 0, 0.05) 35%,
    rgba(206, 220, 0, 0.16) 50%,
    rgba(206, 220, 0, 0.05) 65%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: screen;
  animation: device-scan 5.5s cubic-bezier(0.55, 0, 0.45, 1) infinite;
}
@keyframes device-scan {
  0%   { transform: translateY(-110%); opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { transform: translateY(380%); opacity: 0; }
}

/* CRT line pattern + corner brackets */
.device__screen--splash::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    /* top-left bracket */
    linear-gradient(to right, var(--accent-pace) 0, var(--accent-pace) 12px, transparent 12px) top left / 12px 1px no-repeat,
    linear-gradient(to bottom, var(--accent-pace) 0, var(--accent-pace) 12px, transparent 12px) top left / 1px 12px no-repeat,
    /* top-right bracket */
    linear-gradient(to left, var(--accent-pace) 0, var(--accent-pace) 12px, transparent 12px) top right / 12px 1px no-repeat,
    linear-gradient(to bottom, var(--accent-pace) 0, var(--accent-pace) 12px, transparent 12px) top right / 1px 12px no-repeat,
    /* bottom-left bracket */
    linear-gradient(to right, var(--accent-pace) 0, var(--accent-pace) 12px, transparent 12px) bottom left / 12px 1px no-repeat,
    linear-gradient(to top, var(--accent-pace) 0, var(--accent-pace) 12px, transparent 12px) bottom left / 1px 12px no-repeat,
    /* bottom-right bracket */
    linear-gradient(to left, var(--accent-pace) 0, var(--accent-pace) 12px, transparent 12px) bottom right / 12px 1px no-repeat,
    linear-gradient(to top, var(--accent-pace) 0, var(--accent-pace) 12px, transparent 12px) bottom right / 1px 12px no-repeat,
    /* CRT lines */
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 3px,
      rgba(255, 255, 255, 0.018) 3px,
      rgba(255, 255, 255, 0.018) 4px
    );
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  padding: 18px;
  background-origin: padding-box;
}

/* Splash content sits above the overlays */
.device__screen--splash > * { position: relative; z-index: 1; }

.device__splash-logo {
  height: 56px;
  width: auto;
  filter: drop-shadow(0 0 16px rgba(206, 220, 0, 0.55));
  animation: splash-pulse 2.4s ease-in-out infinite;
}
@keyframes splash-pulse {
  0%, 100% { transform: translateY(0) scale(1); filter: drop-shadow(0 0 16px rgba(206, 220, 0, 0.55)); }
  50%      { transform: translateY(-3px) scale(1.03); filter: drop-shadow(0 0 24px rgba(206, 220, 0, 0.85)); }
}

.device__splash-text {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.125rem;
  letter-spacing: 0.04em;
  color: var(--text-primary);
  line-height: 1;
}
.device__splash-meta {
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-top: -0.5rem;
}
.device__splash-bar {
  width: 70%;
  height: 2px;
  background: var(--border-soft);
  position: relative;
  overflow: hidden;
  margin-top: 0.25rem;
}
.device__splash-bar-fill {
  position: absolute;
  inset: 0;
  background: var(--accent-pace);
  transform-origin: left center;
  animation: splash-load 2.4s ease-in-out infinite;
}
@keyframes splash-load {
  0%   { transform: scaleX(0); }
  60%  { transform: scaleX(1); }
  100% { transform: scaleX(1); opacity: 0; }
}

/* =============================================================
   // 01 — HERO
   ============================================================= */
.hero {
  padding-top: clamp(2rem, 5vw, 4rem);
  padding-bottom: clamp(5rem, 10vw, 9rem);
}
.hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(3rem, 6vw, 5rem);
  align-items: center;
}
.hero__crest {
  display: inline-flex;
  align-items: center;
  gap: 0.875rem;
  margin-bottom: 1.5rem;
  padding: 0.5rem 0.75rem 0.5rem 0.5rem;
  border: 1px solid var(--border-soft);
  background: var(--bg-1);
  position: relative;
}
.hero__crest::before {
  content: "";
  position: absolute;
  top: -1px; left: -1px;
  width: 14px; height: 14px;
  border-top: 2px solid var(--accent-pace);
  border-left: 2px solid var(--accent-pace);
}
.hero__crest-mark {
  height: 28px;
  width: auto;
  display: block;
}
.hero__crest .hero__crumb {
  margin-bottom: 0;
}
.hero__crumb {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  color: var(--accent-pace);
  text-transform: uppercase;
  margin-bottom: 1.25rem;
  font-weight: 500;
}

/* ================================================================
   AWARD BADGE — "Semi-finalista Gramado Summit 2026"
   ================================================================ */
.hero__award {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.75rem 1.1rem 0.75rem 0.875rem;
  margin-bottom: 1.5rem;
  text-decoration: none;
  cursor: pointer;
  background: var(--bg-1);
  border: 1px solid var(--accent-pace);
  border-radius: 4px;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 0 0 0 rgba(206, 220, 0, 0);
  transition:
    transform 280ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 220ms ease,
    background-color 220ms ease,
    box-shadow 320ms ease;
  animation: hero-award-glow 2.8s ease-in-out infinite;
  max-width: 100%;
}

/* Lime ribbon on the left edge */
.hero__award-ribbon {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  background: var(--accent-pace);
  box-shadow: 0 0 12px rgba(206, 220, 0, 0.7);
}

/* Shimmer that crosses the badge diagonally on loop */
.hero__award::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -55%;
  width: 55%;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(206, 220, 0, 0.16) 50%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 0;
  animation: hero-award-shimmer 4.2s cubic-bezier(0.45, 0, 0.4, 1) infinite;
}

.hero__award > * { position: relative; z-index: 1; }

.hero__award-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  color: var(--accent-pace);
  border: 1px solid var(--accent-pace);
  background: rgba(206, 220, 0, 0.08);
  border-radius: 4px;
  filter: drop-shadow(0 0 10px rgba(206, 220, 0, 0.45));
}
.hero__award-icon svg {
  width: 18px;
  height: 18px;
  display: block;
}

.hero__award-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.1;
}
.hero__award-label {
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.18em;
  color: var(--text-muted);
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.hero__award-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent-pace);
  box-shadow: 0 0 6px rgba(206, 220, 0, 0.75);
  animation: pulse 1.6s ease-in-out infinite;
}
.hero__award-event {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.9375rem;
  letter-spacing: -0.005em;
  color: var(--text-primary);
}
.hero__award-event strong {
  color: var(--accent-pace);
  font-weight: 700;
}

.hero__award-arrow {
  display: inline-block;
  margin-left: 0.35rem;
  color: var(--accent-pace);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.9375rem;
  transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Hover state */
.hero__award:hover {
  transform: translateY(-3px);
  background: var(--bg-2);
  box-shadow: 0 0 36px rgba(206, 220, 0, 0.55);
}
.hero__award:hover .hero__award-arrow {
  transform: translateX(4px);
}
.hero__award:active {
  transform: translateY(-1px);
}

@keyframes hero-award-glow {
  0%, 100% { box-shadow: 0 0 16px rgba(206, 220, 0, 0.25); }
  50%      { box-shadow: 0 0 32px rgba(206, 220, 0, 0.55); }
}
@keyframes hero-award-shimmer {
  0%   { left: -55%; }
  60%  { left: 110%; }
  100% { left: 110%; }
}

@media (max-width: 640px) {
  .hero__award {
    width: 100%;
    padding: 0.65rem 0.85rem;
    gap: 0.65rem;
  }
  .hero__award-event { font-size: 0.875rem; }
}
.hero__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(3.5rem, 11vw, 7rem);
  line-height: 0.88;
  letter-spacing: -0.04em;
  color: var(--text-primary);
  margin-bottom: 1.5rem;
}
.cursor {
  display: inline-block;
  color: var(--accent-pace);
  animation: blink 1s ease infinite;
  margin-left: 0.05em;
  font-weight: 700;
}
@keyframes blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
.hero__subtitle {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.125rem, 2.2vw, 1.5rem);
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--text-secondary);
  margin-bottom: 2rem;
  max-width: 32ch;
}
.hero__subtitle em {
  font-style: normal;
  color: var(--accent-pace);
  font-weight: 700;
}
.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 3rem;
}

/* Metric strip */
.metric-strip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.875rem;
  margin-top: 2.25rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border-soft);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
}
.metric-strip__item {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
}
.metric-strip__key { color: var(--text-muted); }
.metric-strip__val { color: var(--text-primary); }
.metric-strip__val--live { color: var(--accent-live); }
.metric-strip__divider { color: var(--border-loud); }

/* Hero device wrap */
.hero__device-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 0;
  isolation: isolate;
}
/* Aura: conic gradient rotating behind the device — kept subtle */
.hero__device-wrap::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(280px, 40vw, 460px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: conic-gradient(
    from 0deg at 50% 50%,
    transparent 0deg,
    rgba(206, 220, 0, 0.12) 50deg,
    transparent 140deg,
    transparent 230deg,
    rgba(206, 220, 0, 0.07) 290deg,
    transparent 360deg
  );
  filter: blur(60px);
  animation: aura-spin 22s linear infinite;
  pointer-events: none;
  z-index: 0;
  border-radius: 50%;
}
/* Slower counter-rotating ghost layer for depth */
.hero__device-wrap::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(220px, 32vw, 380px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: conic-gradient(
    from 180deg at 50% 50%,
    transparent 0deg,
    rgba(0, 230, 118, 0.04) 90deg,
    transparent 180deg,
    rgba(206, 220, 0, 0.05) 270deg,
    transparent 360deg
  );
  filter: blur(50px);
  animation: aura-spin-rev 32s linear infinite;
  pointer-events: none;
  z-index: 0;
  border-radius: 50%;
}
@keyframes aura-spin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes aura-spin-rev {
  from { transform: translate(-50%, -50%) rotate(360deg); }
  to   { transform: translate(-50%, -50%) rotate(0deg); }
}
.hero__device-labels {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  color: var(--text-muted);
}
.hero__device-labels span {
  position: relative;
  padding-left: 18px;
}
.hero__device-labels span::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 12px; height: 1px;
  background: var(--border-loud);
}
.hero__device-meta {
  position: absolute;
  right: 0;
  bottom: 2rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.15em;
  color: var(--text-muted);
  text-transform: uppercase;
}
.dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-muted);
}
.dot--live {
  background: var(--accent-live);
  box-shadow: 0 0 8px var(--accent-live);
  animation: pulse 1.6s ease-in-out infinite;
}

/* "↓ INTERAJA AQUI ↓" hint sitting above the hero mockup */
.hero__interact-hint {
  position: absolute;
  top: 0.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 0.875rem;
  background: var(--bg-1);
  border: 1px solid var(--accent-pace);
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-pace);
  white-space: nowrap;
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  box-shadow: 0 0 14px rgba(206, 220, 0, 0.3);
  transition: opacity 500ms ease, visibility 500ms ease, transform 500ms ease;
}
.hero__interact-hint.is-visible {
  opacity: 1;
  visibility: visible;
  animation: hero-hint-glow 2.4s ease-in-out infinite;
}
.hero__interact-hint.is-dismissed {
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(-10px);
  animation: none;
}
.hero__interact-arrow {
  display: inline-block;
  font-size: 0.875em;
  font-weight: 700;
  animation: hero-hint-bounce 1.3s ease-in-out infinite;
}
.hero__interact-arrow:last-child { animation-delay: 0.15s; }
@keyframes hero-hint-glow {
  0%, 100% { box-shadow: 0 0 14px rgba(206, 220, 0, 0.3); }
  50%      { box-shadow: 0 0 28px rgba(206, 220, 0, 0.65); }
}
@keyframes hero-hint-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(3px); }
}

@media (max-width: 640px) {
  .hero__interact-hint {
    top: 0;
    font-size: 0.5625rem;
    letter-spacing: 0.14em;
    padding: 0.4rem 0.75rem;
  }
}

@media (min-width: 1024px) {
  .hero__grid {
    grid-template-columns: 1.4fr 1fr;
    gap: 4rem;
  }
}

/* =============================================================
   // 02 — A DOR
   ============================================================= */
.pain {
  background: var(--bg-1);
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}
.pain__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  max-width: 1440px;
  margin: 0 auto;
  padding-left: var(--container-px);
  padding-right: var(--container-px);
}
.prose {
  max-width: 60ch;
  margin-top: 2rem;
}
.prose p {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--text-secondary);
  margin-bottom: 1.25rem;
}
.prose p em {
  color: var(--text-primary);
  font-style: normal;
  font-weight: 500;
}

/* =============================================================
   SYMPTOMS — live telemetry panel
   ============================================================= */
.symptoms {
  border: 1px solid var(--border-soft);
  background: var(--bg-0);
  padding: 1.5rem 1.5rem 1.75rem;
  position: relative;
  align-self: start;
  overflow: hidden;
  isolation: isolate;
}

@media (min-width: 1024px) {
  .symptoms {
    align-self: center;
  }
}
.symptoms::before {
  content: "";
  position: absolute;
  top: -1px; left: -1px;
  width: 28px; height: 28px;
  border-top: 2px solid var(--accent-pace);
  border-left: 2px solid var(--accent-pace);
  z-index: 4;
  transition: width 350ms ease, height 350ms ease, filter 350ms ease;
}
.symptoms::after {
  content: "";
  position: absolute;
  bottom: -1px; right: -1px;
  width: 28px; height: 28px;
  border-bottom: 2px solid var(--accent-pace);
  border-right: 2px solid var(--accent-pace);
  z-index: 4;
  transition: width 350ms ease, height 350ms ease, filter 350ms ease;
}

/* ---- Sprint mode: panel-wide reaction when the symptom rotates ---- */
.symptoms.is-sprinting {
  animation: symptom-panel-flash 700ms cubic-bezier(0.25, 0.1, 0.3, 1);
}
@keyframes symptom-panel-flash {
  0%   { border-color: var(--border-soft);  box-shadow: 0 0 0 0 rgba(206, 220, 0, 0); }
  20%  { border-color: var(--accent-pace);
         box-shadow:
           0 0 0 2px rgba(206, 220, 0, 0.45),
           0 0 0 8px rgba(206, 220, 0, 0.10),
           0 0 36px rgba(206, 220, 0, 0.35); }
  100% { border-color: var(--border-soft);  box-shadow: 0 0 0 0 rgba(206, 220, 0, 0); }
}

/* Corner brackets bloom while sprinting */
.symptoms.is-sprinting::before,
.symptoms.is-sprinting::after {
  width: 38px;
  height: 38px;
  filter: drop-shadow(0 0 10px rgba(206, 220, 0, 0.85));
}

/* Live dot speeds up during sprint */
.symptoms.is-sprinting .symptoms__live-dot {
  animation-duration: 0.4s;
}

/* Scan light sweeps across the ENTIRE panel */
.symptoms__scan {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 5;
}
.symptoms__scan::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -50%;
  width: 50%;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(206, 220, 0, 0.12) 35%,
    rgba(206, 220, 0, 0.28) 50%,
    rgba(206, 220, 0, 0.12) 65%,
    transparent 100%
  );
  opacity: 0;
  mix-blend-mode: screen;
  filter: blur(1px);
}
.symptoms.is-sprinting .symptoms__scan::before {
  animation: symptom-panel-scan 850ms cubic-bezier(0.45, 0, 0.2, 1);
}
@keyframes symptom-panel-scan {
  0%   { left: -50%; opacity: 0; }
  10%  {             opacity: 1; }
  90%  {             opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

/* Header strip */
.symptoms__header {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding-bottom: 0.875rem;
  border-bottom: 1px solid var(--border-faint);
  margin-bottom: 1.25rem;
  position: relative;
  z-index: 3;
}
.symptoms__live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-danger);
  box-shadow: 0 0 8px var(--accent-danger);
  animation: pulse 1.4s ease-in-out infinite;
}
.symptoms__label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  color: var(--text-secondary);
  text-transform: uppercase;
  margin: 0;
  flex: 1;
}
.symptoms__count {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--accent-pace);
  font-weight: 500;
}
.symptoms__count span { color: var(--text-muted); }

/* Runner track — animated background behind the active panel */
.symptoms__runner-track {
  position: absolute;
  top: 56px;
  left: 0;
  right: 0;
  height: 200px;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
  /* Fade the runner softly into the panel edges */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%);
}
.symptoms__runner {
  position: absolute;
  top: 50%;
  left: 0;
  height: 140px;
  width: auto;
  margin-top: -70px;
  opacity: 0;
  filter: drop-shadow(0 0 16px rgba(206, 220, 0, 0.5));
  animation: symptom-runner-run 3s linear infinite;
  transition: opacity 220ms ease, filter 250ms ease;
  will-change: left, opacity;
}
/* Hide the trail spans — the mask + drop-shadow already feels enough */
.symptoms__runner-trail { display: none; }

@keyframes symptom-runner-run {
  0%   { left: -25%;  opacity: 0;    }
  12%  {              opacity: 0.18; }
  88%  {              opacity: 0.18; }
  100% { left: 115%;  opacity: 0;    }
}

/* When the symptom rotates, do NOT restart the runner — just punch up its glow */
.symptoms.is-sprinting .symptoms__runner {
  opacity: 0.42;
  filter: drop-shadow(0 0 22px rgba(206, 220, 0, 0.9))
          drop-shadow(0 0 8px rgba(206, 220, 0, 0.6));
}

/* Active symptom card */
.symptoms__active {
  position: relative;
  z-index: 3;
  padding: 0.5rem 0 1.25rem;
  border-bottom: 1px solid var(--border-faint);
  margin-bottom: 1.25rem;
  min-height: 150px;
}
.symptoms__active-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.symptoms__active-id {
  color: var(--text-muted);
}
.symptoms__active-sep { color: var(--border-loud); }
.symptoms__active-icon {
  display: inline-flex;
  width: 18px;
  height: 18px;
  align-items: center;
  justify-content: center;
  border: 1px solid currentColor;
  font-size: 0.6875rem;
  color: var(--accent-danger);
  transition: color 250ms ease;
}
.symptoms__active-severity {
  font-weight: 500;
  color: var(--accent-danger);
  letter-spacing: 0.14em;
  transition: color 250ms ease;
}
.symptoms__active-severity[data-severity="HIGH"],
.symptoms__active-severity[data-severity="HIGH"] ~ * { color: var(--accent-warn); }
.symptoms__active-meta:has([data-severity="HIGH"]) .symptoms__active-icon { color: var(--accent-warn); }

.symptoms__active-text {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.5rem, 3.6vw, 2.4rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--text-primary);
  text-transform: uppercase;
  min-height: 3.2em;
  position: relative;
  text-shadow: 0 0 0 transparent;
  transition:
    opacity 320ms ease,
    transform 380ms cubic-bezier(0.16, 1, 0.3, 1),
    text-shadow 700ms ease;
}
.symptoms__active.is-changing .symptoms__active-text {
  opacity: 0;
  transform: translateY(16px) scale(0.94);
}
/* Lime flash on the text right after a rotation */
.symptoms.is-sprinting .symptoms__active-text {
  text-shadow:
    0 0 24px rgba(206, 220, 0, 0.5),
    0 0 8px rgba(206, 220, 0, 0.7);
}
.symptoms__active.is-changing .symptoms__active-meta {
  opacity: 0.5;
}

/* Intensity bar that fills until the next symptom rotates in */
.symptoms__bar {
  height: 2px;
  background: var(--border-soft);
  margin-top: 1rem;
  position: relative;
  overflow: hidden;
}
.symptoms__bar-fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, var(--accent-danger), var(--accent-pace));
  transform-origin: left center;
  transform: scaleX(0);
  animation: symptom-bar-fill 4s linear forwards;
}
.symptoms.is-sprinting .symptoms__bar-fill {
  animation: symptom-bar-fill 4s linear forwards;
  animation-play-state: running;
}
@keyframes symptom-bar-fill {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* Compact list of all 5 symptoms */
.symptoms__list {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--border-faint);
  border: 1px solid var(--border-faint);
}
.symptoms__item {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  gap: 0.625rem;
  align-items: center;
  padding: 0.625rem 0.75rem;
  background: var(--bg-0);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-muted);
  line-height: 1.4;
  transition: background-color 200ms ease, color 200ms ease;
  position: relative;
}
.symptoms__item-num {
  color: var(--text-muted);
  font-size: 0.6875rem;
}
.symptoms__item-icon {
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.625rem;
  color: var(--text-muted);
  border: 1px solid var(--border-loud);
  transition: color 200ms ease, border-color 200ms ease;
}
.symptoms__item-text {
  color: var(--text-secondary);
}
.symptoms__item-marker {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border-loud);
  transition: background-color 200ms ease, box-shadow 200ms ease;
}
.symptoms__item.is-active {
  background: var(--bg-1);
  animation: symptom-item-pulse 850ms cubic-bezier(0.25, 0.1, 0.3, 1);
}
@keyframes symptom-item-pulse {
  0% {
    box-shadow:
      0 0 0 0 rgba(206, 220, 0, 0.7),
      inset 0 0 20px rgba(206, 220, 0, 0.18);
  }
  100% {
    box-shadow:
      0 0 0 10px rgba(206, 220, 0, 0),
      inset 0 0 0 rgba(206, 220, 0, 0);
  }
}
.symptoms__item.is-active .symptoms__item-num,
.symptoms__item.is-active .symptoms__item-text {
  color: var(--text-primary);
}
.symptoms__item.is-active[data-severity="CRITICAL"] .symptoms__item-icon {
  color: var(--accent-danger);
  border-color: var(--accent-danger);
}
.symptoms__item.is-active[data-severity="HIGH"] .symptoms__item-icon {
  color: var(--accent-warn);
  border-color: var(--accent-warn);
}
.symptoms__item.is-active .symptoms__item-marker {
  background: var(--accent-pace);
  box-shadow: 0 0 8px var(--accent-pace);
}
.symptoms__item.is-active::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--accent-pace);
  box-shadow: 0 0 8px var(--accent-pace);
}

@media (min-width: 1024px) {
  .pain__grid {
    grid-template-columns: 1.6fr 1fr;
    gap: 5rem;
  }
}

/* =============================================================
   // 03 — A SOLUÇÃO
   ============================================================= */
.solution {
  overflow: hidden;
}
.solution__decor {
  position: absolute;
  top: clamp(2rem, 6vw, 5rem);
  right: -8%;
  width: clamp(280px, 38vw, 540px);
  height: auto;
  opacity: 0.06;
  pointer-events: none;
  z-index: 0;
  filter: brightness(0) saturate(0) invert(1);
  display: none;
}
.solution > *:not(.solution__decor) {
  position: relative;
  z-index: 1;
}
.solution__title {
  max-width: 16ch;
  margin-bottom: clamp(3rem, 6vw, 5rem);
}

@media (min-width: 1024px) {
  .solution__decor { display: block; }
}
.pillars {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-bottom: clamp(3rem, 6vw, 5rem);
}
.pillar {
  background: var(--bg-1);
  border: 1px solid var(--border-soft);
  padding: 2.25rem 1.75rem 2.5rem;
  transition: border-color 250ms ease, transform 250ms cubic-bezier(0.16, 1, 0.3, 1), background-color 250ms ease;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* Top lime sweep — draws left → right when the card enters the viewport */
.pillar::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 0;
  height: 1px;
  background: var(--accent-pace);
  box-shadow: 0 0 12px rgba(206, 220, 0, 0.7);
  transition: width 750ms cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: 200ms;
  z-index: 3;
}
.pillar.is-visible::before { width: calc(100% + 2px); }

/* Bottom-left corner accent (kept) */
.pillar::after {
  content: "";
  position: absolute;
  bottom: -1px; left: -1px;
  width: 24px; height: 24px;
  border-bottom: 2px solid var(--border-loud);
  border-left: 2px solid var(--border-loud);
  transition: border-color 250ms ease, width 250ms ease, height 250ms ease;
  z-index: 2;
}

/* Pillar stagger delays — overrides generic reveal delay for these 3 cards */
.pillars .pillar:nth-child(1) { transition-delay: 0ms; }
.pillars .pillar:nth-child(2) { transition-delay: 180ms; }
.pillars .pillar:nth-child(3) { transition-delay: 360ms; }
.pillars .pillar:nth-child(1)::before { transition-delay: 250ms; }
.pillars .pillar:nth-child(2)::before { transition-delay: 430ms; }
.pillars .pillar:nth-child(3)::before { transition-delay: 610ms; }

/* Hover state — marching-ants dashed border */
.pillar:hover,
.pillar.is-active {
  border-color: transparent;
  background-color: var(--bg-2);
  background-image:
    repeating-linear-gradient(to right,  var(--accent-pace) 0 7px, transparent 7px 14px),
    repeating-linear-gradient(to right,  var(--accent-pace) 0 7px, transparent 7px 14px),
    repeating-linear-gradient(to bottom, var(--accent-pace) 0 7px, transparent 7px 14px),
    repeating-linear-gradient(to bottom, var(--accent-pace) 0 7px, transparent 7px 14px);
  background-size: 100% 1px, 100% 1px, 1px 100%, 1px 100%;
  background-position: 0 0, 0 100%, 0 0, 100% 0;
  background-repeat: no-repeat;
  transform: translateY(-4px);
  animation: pillar-marching 0.75s linear infinite;
}
/* The top reveal sweep would overlap the marching border — hide it on hover */
.pillar:hover::before,
.pillar.is-active::before { opacity: 0; }

@keyframes pillar-marching {
  to {
    background-position:
      14px 0,
      -14px 100%,
      0 14px,
      100% -14px;
  }
}
.pillar:hover::after,
.pillar.is-active::after {
  border-color: var(--accent-pace);
  width: 32px;
  height: 32px;
}
.pillar:hover .pillar__num,
.pillar.is-active .pillar__num {
  color: rgba(206, 220, 0, 0.16);
  transform: translate(0.25rem, -0.25rem) scale(1.05);
}
.pillar:hover .pillar__icon,
.pillar.is-active .pillar__icon {
  transform: rotate(45deg) scale(1.08);
}
.pillar:hover .pillar__title,
.pillar.is-active .pillar__title,
.pillar:hover .pillar__body,
.pillar.is-active .pillar__body { transform: translateX(2px); }
.pillar:hover .pillar__hint-line,
.pillar.is-active .pillar__hint-line { width: 32px; }
.pillar:hover .pillar__hint-text,
.pillar.is-active .pillar__hint-text { color: var(--accent-pace); }

/* Number on the back of the card — adds curiosity weight */
.pillar__num {
  position: absolute;
  top: 0.85rem;
  right: 1.25rem;
  font-family: var(--font-mono);
  font-size: clamp(4.5rem, 8vw, 6.5rem);
  font-weight: 500;
  letter-spacing: -0.04em;
  color: rgba(206, 220, 0, 0.06);
  line-height: 1;
  pointer-events: none;
  z-index: 1;
  transition: color 350ms ease, transform 450ms cubic-bezier(0.16, 1, 0.3, 1);
}

.pillar__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  font-size: 1.5rem;
  color: var(--accent-pace);
  margin-bottom: 1.5rem;
  line-height: 1;
  border: 1px solid rgba(206, 220, 0, 0.3);
  background: rgba(206, 220, 0, 0.06);
  transform: scale(0.4) rotate(-30deg);
  opacity: 0;
  transition:
    transform 600ms cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 350ms ease,
    border-color 250ms ease,
    background-color 250ms ease;
  position: relative;
  z-index: 2;
}
.pillar.is-visible .pillar__icon {
  transform: scale(1) rotate(0);
  opacity: 1;
}
.pillars .pillar:nth-child(1).is-visible .pillar__icon { transition-delay: 400ms; }
.pillars .pillar:nth-child(2).is-visible .pillar__icon { transition-delay: 580ms; }
.pillars .pillar:nth-child(3).is-visible .pillar__icon { transition-delay: 760ms; }

.pillar__title {
  font-family: var(--font-mono);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-primary);
  margin-bottom: 1rem;
  line-height: 1.3;
  position: relative;
  z-index: 2;
  transition: transform 250ms ease;
}
.pillar__body {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-secondary);
  position: relative;
  z-index: 2;
  transition: transform 250ms ease;
}

/* Bottom hint label */
.pillar__hint {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  position: relative;
  z-index: 2;
}
.pillar__hint-line {
  display: inline-block;
  width: 18px;
  height: 1px;
  background: var(--accent-pace);
  transition: width 350ms ease;
}
.pillar__hint-text {
  color: var(--text-muted);
  transition: color 250ms ease;
}

/* ===== LIVE CALLOUT (its own section, transparent over grid) ===== */
.live-callout {
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: clamp(4.5rem, 9vw, 7rem);
  padding-bottom: clamp(4.5rem, 9vw, 7rem);
}

.solution__closing {
  position: relative;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.875rem, 4vw, 3rem);
  line-height: 1.18;
  letter-spacing: -0.028em;
  color: var(--text-primary);
  text-align: center;
  max-width: 42ch;
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--container-px);
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
}
/* Invisible anchor — reserves vertical space matching the longest line */
.solution__closing-anchor {
  visibility: hidden;
  pointer-events: none;
  user-select: none;
}
/* The 3 lines are stacked on top of each other; only one is visible at a time */
.solution__closing-line {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  will-change: transform, opacity, filter;
  transform: translateY(60px) scale(0.94);
  filter: blur(10px);
  animation: solution-closing-cycle 4s infinite;
  animation-play-state: paused;
}

/* Store name inline with its colored mark — no lime tint */
.closing-store {
  display: inline-flex;
  align-items: center;
  gap: 0.32em;
  color: var(--text-primary);
  white-space: nowrap;
  vertical-align: middle;
}
.closing-store__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0.95em;
  height: 0.95em;
  flex-shrink: 0;
  position: relative;
  top: -0.04em;
}
.closing-store__mark svg {
  width: 100%;
  height: 100%;
  display: block;
}
.closing-store__mark--apple svg {
  color: var(--text-primary);
}
/* Inline-block wrapper keeps natural word spacing — flex on the line would
   otherwise eat the spaces around the .accent spans. */
.solution__closing-text {
  display: inline-block;
  max-width: 100%;
}
.solution__closing-line .accent {
  color: var(--accent-pace);
  /* Subtle text shadow so the lime feels alive */
  text-shadow: 0 0 18px rgba(206, 220, 0, 0.35);
}
/* Play only when the section is in view (JS toggles .is-playing) */
.solution__closing.is-playing .solution__closing-line {
  animation-play-state: running;
}
/* Stagger the 3 lines: each is on-screen for ~1.33s of the 4s loop */
.solution__closing-line:nth-child(2) { animation-delay: 0s; }
.solution__closing-line:nth-child(3) { animation-delay: -2.667s; }
.solution__closing-line:nth-child(4) { animation-delay: -1.333s; }

@keyframes solution-closing-cycle {
  0% {
    opacity: 0;
    transform: translateY(60px) scale(0.94) skewY(3deg);
    filter: blur(10px);
    letter-spacing: -0.06em;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  }
  6% {
    opacity: 1;
    transform: translateY(0) scale(1) skewY(0);
    filter: blur(0);
    letter-spacing: -0.025em;
    animation-timing-function: linear;
  }
  28% {
    opacity: 1;
    transform: translateY(0) scale(1) skewY(0);
    filter: blur(0);
    letter-spacing: -0.025em;
    animation-timing-function: cubic-bezier(0.65, 0, 0.84, 0);
  }
  33% {
    opacity: 0;
    transform: translateY(-60px) scale(1.06) skewY(-3deg);
    filter: blur(12px);
    letter-spacing: 0.02em;
  }
  /* Snap back to bottom while invisible, ready for the next loop */
  34%, 100% {
    opacity: 0;
    transform: translateY(60px) scale(0.94) skewY(3deg);
    filter: blur(10px);
    letter-spacing: -0.06em;
  }
}

@media (min-width: 768px) {
  .pillars { grid-template-columns: repeat(3, 1fr); }
}

/* =============================================================
   // 04 — PROCESS / TIMELINE
   ============================================================= */
.process__title {
  margin-bottom: clamp(3rem, 6vw, 5rem);
  max-width: 20ch;
}
.timeline {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  position: relative;
}
.timeline__node {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "num   content"
    "conn  content";
  gap: 1rem 1.5rem;
  padding-bottom: 2.5rem;
  position: relative;
}
.timeline__node:last-child { padding-bottom: 0; }
.timeline__number {
  grid-area: num;
  font-family: var(--font-mono);
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--accent-pace);
  letter-spacing: 0.04em;
  line-height: 1;
}
.timeline__connector {
  grid-area: conn;
  width: 1px;
  background: linear-gradient(
    to bottom,
    rgba(206, 220, 0, 0.45) 0%,
    rgba(206, 220, 0, 0.18) 100%
  );
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  margin: 0.5rem auto 0;
  min-height: 60px;
  position: relative;
}
.timeline__connector--end {
  display: flex;
  background: linear-gradient(
    to bottom,
    rgba(206, 220, 0, 0.45) 0%,
    rgba(206, 220, 0, 0) 100%
  );
  align-items: flex-end;
  justify-content: center;
}
/* Endpoint of node 04 — gray by default, single bloom when .is-lit */
.timeline__connector--end::after {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--border-loud);
  position: relative;
  bottom: -6px;
  transform: scale(1);
  box-shadow: 0 0 0 0 rgba(206, 220, 0, 0);
  transition:
    background-color 380ms ease,
    transform 380ms cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 380ms ease;
}
.timeline__connector--end.is-lit::after {
  background: var(--accent-pace);
  transform: scale(1.3);
  box-shadow: 0 0 14px rgba(206, 220, 0, 0.7);
  animation: timeline-endpoint-bloom 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes timeline-endpoint-bloom {
  0%   { box-shadow: 0 0 0 0 rgba(206, 220, 0, 0); }
  40%  { box-shadow: 0 0 0 14px rgba(206, 220, 0, 0.5), 0 0 32px rgba(206, 220, 0, 1); }
  100% { box-shadow: 0 0 0 22px rgba(206, 220, 0, 0), 0 0 14px rgba(206, 220, 0, 0.7); }
}

/* Dots — gray by default, single "punch" of lime when .is-lit, then settle */
.timeline__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--border-loud);
  margin-left: -2.5px;
  transform: scale(1);
  box-shadow: 0 0 0 0 rgba(206, 220, 0, 0);
  transition:
    background-color 320ms ease,
    transform 380ms cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 380ms ease;
}
.timeline__dot.is-lit {
  background: var(--accent-pace);
  transform: scale(1.55);
  box-shadow: 0 0 12px rgba(206, 220, 0, 0.6);
  animation: timeline-dot-punch 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes timeline-dot-punch {
  0%   { box-shadow: 0 0 0 0 rgba(206, 220, 0, 0); }
  40%  { box-shadow: 0 0 0 9px rgba(206, 220, 0, 0.5), 0 0 26px rgba(206, 220, 0, 1); }
  100% { box-shadow: 0 0 0 14px rgba(206, 220, 0, 0), 0 0 12px rgba(206, 220, 0, 0.6); }
}
.timeline__content {
  grid-area: content;
  padding-bottom: 0.5rem;
}
.timeline__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.25rem, 2vw, 1.625rem);
  letter-spacing: -0.015em;
  margin-bottom: 0.625rem;
  color: var(--text-primary);
  line-height: 1.1;
}
@media (min-width: 1024px) {
  /* Reserve space for 2 lines so all 4 titles align horizontally
     even when some have a single line (DISCOVERY, BUILD) and others two. */
  .timeline__title {
    min-height: 2.4em;
  }
  /* Push the meta line to the bottom of each node so all 4 align */
  .timeline__content {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  .timeline__meta {
    margin-top: auto !important;
  }
}
.timeline__content p {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--text-secondary);
  margin-bottom: 0.625rem;
}
.timeline__meta {
  font-family: var(--font-mono) !important;
  font-size: 0.6875rem !important;
  color: var(--text-muted) !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 0 !important;
}

@media (min-width: 1024px) {
  .timeline {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
  }
  .timeline__node {
    grid-template-columns: 1fr;
    grid-template-areas:
      "num"
      "conn"
      "content";
    grid-template-rows: auto auto 1fr;
    gap: 1rem;
    padding-bottom: 0;
  }
  .timeline__connector {
    align-self: start;
  }
  .timeline__connector {
    flex-direction: row;
    width: 100%;
    height: 1px;
    background: linear-gradient(
      to right,
      rgba(206, 220, 0, 0.45) 0%,
      rgba(206, 220, 0, 0.18) 100%
    );
    margin: 0;
    justify-content: space-around;
    min-height: 0;
  }
  .timeline__connector--end {
    display: flex;
    background: linear-gradient(
      to right,
      rgba(206, 220, 0, 0.45) 0%,
      rgba(206, 220, 0, 0) 100%
    );
    align-items: center;
    justify-content: flex-end;
  }
  .timeline__connector--end::after {
    /* Reposition the endpoint to sit at the right of the horizontal line */
    bottom: auto;
    right: -6px;
  }
  .timeline__dot {
    margin-left: 0;
    margin-top: -2.5px;
  }
}

/* =============================================================
   // 05 — MANIFESTO
   ============================================================= */
.manifesto {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
  background: var(--bg-1);
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
}
.manifesto__frame {
  max-width: 1100px;
  margin: 0 auto;
  padding: clamp(3rem, 6vw, 5rem) clamp(1.5rem, 4vw, 4rem);
  border: 1px solid var(--border-soft);
  box-shadow: 0 0 0 6px var(--bg-1), 0 0 0 7px var(--border-faint);
  background: var(--bg-2);
  position: relative;
}
.manifesto__frame > .section-tag-line {
  margin-bottom: 2rem;
}
/* Visually hidden but accessible to screen readers */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Document header (top of the statement) ---------- */
.manifesto__doc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px dashed var(--border-soft);
  margin-bottom: 2.25rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.manifesto__doc-id {
  color: var(--accent-pace);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 500;
}
.manifesto__doc-bullet {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-pace);
  box-shadow: 0 0 8px rgba(206, 220, 0, 0.6);
  font-size: 0;
  animation: pulse 1.8s ease-in-out infinite;
}
.manifesto__doc-meta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.manifesto__doc-status {
  color: var(--accent-live);
  font-weight: 500;
}
.manifesto__doc-sep { color: var(--border-loud); }

/* ---------- Numbered rules (the manifesto itself) ---------- */
.manifesto__rules {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0 0 2.5rem;
  padding: 0;
}
.manifesto__rule {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  gap: 0.875rem;
  padding: 1rem 0.5rem 1rem 0.25rem;
  position: relative;
  opacity: 0;
  transform: translateX(-12px);
  transition: opacity 500ms ease, transform 500ms cubic-bezier(0.16, 1, 0.3, 1);
}
.manifesto__rule.is-visible {
  opacity: 1;
  transform: translateX(0);
}
.manifesto__rule + .manifesto__rule {
  border-top: 1px solid var(--border-faint);
}
.manifesto__rule-num {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  min-width: 1.4em;
}
.manifesto__rule-bar {
  width: 3px;
  height: 1.4em;
  background: var(--text-muted);
  border-radius: 1.5px;
  transition: background-color 400ms ease, height 400ms ease;
}
.manifesto__rule.is-visible .manifesto__rule-bar {
  height: 2.4em;
}
.manifesto__rule--approved .manifesto__rule-bar {
  background: var(--accent-pace);
  box-shadow: 0 0 10px rgba(206, 220, 0, 0.5);
}
.manifesto__rule-text {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.4rem, 3.6vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--text-primary);
}
.manifesto__rule-text em {
  font-style: normal;
  color: var(--text-secondary);
  font-weight: 700;
  position: relative;
  display: inline-block;
}

/* Strikethrough that draws from left to right when the rule reveals */
.manifesto__strike::after {
  content: "";
  position: absolute;
  top: 53%;
  left: -2%;
  width: 0;
  height: 3px;
  background: var(--text-muted);
  border-radius: 1.5px;
  transform: translateY(-50%) skewY(-2deg);
  transition: width 750ms cubic-bezier(0.5, 0, 0.2, 1);
  transition-delay: 450ms;
}
.manifesto__rule.is-visible .manifesto__strike::after {
  width: 104%;
}

/* The "approved" highlight (problem resolved) — lime with subtle glow */
.manifesto__highlight {
  color: var(--accent-pace) !important;
  text-shadow: 0 0 22px rgba(206, 220, 0, 0.35);
  position: relative;
}
.manifesto__highlight::before {
  content: "";
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 0;
  height: 3px;
  background: var(--accent-pace);
  border-radius: 1.5px;
  box-shadow: 0 0 10px rgba(206, 220, 0, 0.7);
  transition: width 850ms cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: 500ms;
}
.manifesto__rule.is-visible .manifesto__highlight::before {
  width: 100%;
}

/* Tag chip on the right of each rule (REJECTED / APPROVED) */
.manifesto__rule-tag {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--text-muted);
  border: 1px solid var(--border-loud);
  padding: 4px 8px;
  border-radius: 3px;
  white-space: nowrap;
  align-self: center;
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 400ms ease, transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
  transition-delay: 900ms;
}
.manifesto__rule.is-visible .manifesto__rule-tag {
  opacity: 1;
  transform: scale(1);
}
.manifesto__rule-tag--approved {
  color: var(--accent-pace);
  border-color: var(--accent-pace);
  box-shadow: 0 0 0 0 rgba(206, 220, 0, 0.4);
}
.manifesto__rule.is-visible .manifesto__rule-tag--approved {
  animation: manifesto-tag-pulse 1.4s ease-out 1.2s 1;
}
@keyframes manifesto-tag-pulse {
  0%   { box-shadow: 0 0 0 0  rgba(206, 220, 0, 0.7); }
  60%  { box-shadow: 0 0 0 9px rgba(206, 220, 0, 0); }
  100% { box-shadow: 0 0 0 0  rgba(206, 220, 0, 0); }
}

/* ---------- Sub text ---------- */
.manifesto__sub {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 64ch;
  border-top: 1px dashed var(--border-soft);
  padding-top: 1.75rem;
}
.manifesto__sub strong {
  color: var(--accent-pace);
  font-weight: 600;
  position: relative;
  text-shadow: 0 0 18px rgba(206, 220, 0, 0.3);
}

/* ---------- Signature footer ---------- */
.manifesto__signature {
  margin-top: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding-top: 1.75rem;
  border-top: 1px solid var(--border-soft);
}
.manifesto__sig-badge {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.875rem 1.125rem;
  border: 1px solid var(--border-soft);
  background: var(--bg-1);
  position: relative;
  transition: border-color 250ms ease, transform 250ms ease;
}
.manifesto__sig-badge::before,
.manifesto__sig-badge::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  border-color: var(--accent-pace);
  border-style: solid;
  border-width: 0;
}
.manifesto__sig-badge::before { top: -1px; left: -1px; border-top-width: 2px; border-left-width: 2px; }
.manifesto__sig-badge::after  { bottom: -1px; right: -1px; border-bottom-width: 2px; border-right-width: 2px; }
.manifesto__sig-badge:hover {
  border-color: var(--accent-pace);
  transform: translateY(-2px);
}
.manifesto__sig-badge-label {
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.18em;
  color: var(--text-muted);
  text-transform: uppercase;
  margin: 0;
}
.manifesto__sig-badge-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: 0.04em;
  color: var(--text-primary);
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.manifesto__sig-mark {
  color: var(--accent-pace);
  font-size: 0.7em;
}
.manifesto__sig-badge-meta {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin: 0;
}

/* The "VERIFIED" stamp — prints in on reveal completion */
.manifesto__sig-stamp {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  padding: 0.625rem 1rem;
  border: 2px solid var(--accent-pace);
  border-radius: 4px;
  color: var(--accent-pace);
  background: transparent;
  transform: rotate(-7deg) scale(1.6);
  opacity: 0;
  filter: blur(3px);
  transition:
    transform 550ms cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 380ms ease,
    filter 380ms ease;
  transition-delay: 1600ms;
  position: relative;
}
.manifesto__sig-stamp::before {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px solid rgba(206, 220, 0, 0.4);
  border-radius: 2px;
  pointer-events: none;
}
.manifesto.is-revealed .manifesto__sig-stamp {
  opacity: 0.92;
  transform: rotate(-7deg) scale(1);
  filter: blur(0);
}
.manifesto__sig-stamp-text {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: 0.22em;
  line-height: 1;
}
.manifesto__sig-stamp-sub {
  font-family: var(--font-mono);
  font-size: 0.5rem;
  letter-spacing: 0.18em;
  margin-top: 4px;
  opacity: 0.7;
}

/* Mobile: stack signature elements vertically */
@media (max-width: 640px) {
  .manifesto__rule {
    grid-template-columns: auto auto 1fr;
    grid-template-areas:
      "num bar text"
      "tag tag tag";
    gap: 0.625rem;
  }
  .manifesto__rule-num { grid-area: num; }
  .manifesto__rule-bar { grid-area: bar; }
  .manifesto__rule-text { grid-area: text; }
  .manifesto__rule-tag { grid-area: tag; justify-self: end; margin-top: 0.5rem; }
  .manifesto__signature {
    flex-direction: column;
    align-items: flex-start;
  }
  .manifesto__sig-stamp {
    align-self: flex-end;
  }
}

/* the section-tag-line for manifesto is aligned to the frame */
.manifesto > .section-tag-line {
  max-width: 1100px;
  margin: 0 auto clamp(2rem, 4vw, 3.5rem);
  padding: 0 clamp(1.5rem, 4vw, 4rem);
}

/* =============================================================
   // 06 — PROVA
   ============================================================= */
.proof__title {
  margin-bottom: clamp(3rem, 6vw, 5rem);
  max-width: 14ch;
}
.kpi-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--border-soft);
  border: 1px solid var(--border-soft);
  margin-bottom: clamp(4rem, 7vw, 6rem);
}
.kpi {
  background: var(--bg-0);
  padding: 1.5rem 1.5rem 1.25rem;
  text-align: left;
  transition: background-color 220ms ease;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  isolation: isolate;
}
.kpi::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 40px; height: 1px;
  background: var(--accent-pace);
  transform: translateX(-100%);
  transition: transform 400ms ease;
  z-index: 2;
}
.kpi:hover { background: var(--bg-1); }
.kpi:hover::before { transform: translateX(0); }

/* Top row: meta + STREAMING live indicator */
.kpi__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.kpi__meta {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.kpi__live {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.18em;
  color: var(--text-muted);
  text-transform: uppercase;
}
.kpi__live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-live);
  box-shadow: 0 0 6px var(--accent-live);
  animation: pulse 1.6s ease-in-out infinite;
}

/* The big number (animated count-up via JS) */
.kpi__value {
  font-family: var(--font-mono);
  font-size: clamp(2rem, 5vw, 3.25rem);
  font-weight: 500;
  color: var(--accent-pace);
  letter-spacing: -0.02em;
  line-height: 1;
  margin: 0.25rem 0 0;
  display: flex;
  align-items: baseline;
  gap: 0.1em;
  text-shadow: 0 0 24px rgba(206, 220, 0, 0.18);
}
.kpi__number {
  display: inline-block;
  font-variant-numeric: tabular-nums;
}
.kpi__unit {
  font-size: 0.42em;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  font-weight: 500;
  vertical-align: 0.45em;
  text-shadow: none;
}
.kpi__label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin: 0;
}

/* Sparkline mini-chart */
.kpi__sparkline {
  width: 100%;
  height: 32px;
  color: var(--accent-pace);
  margin-top: 0.25rem;
  display: block;
  overflow: visible;
}
.kpi__spark-line {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 320;
  stroke-dashoffset: 320;
  filter: drop-shadow(0 0 6px rgba(206, 220, 0, 0.55));
  transition: stroke-dashoffset 1.7s cubic-bezier(0.45, 0, 0.2, 1);
  transition-delay: 600ms;
}
.kpi__spark-fill {
  fill: currentColor;
  opacity: 0;
  transition: opacity 900ms ease;
  transition-delay: 1500ms;
}
.kpi.is-revealed .kpi__spark-line { stroke-dashoffset: 0; }
.kpi.is-revealed .kpi__spark-fill { opacity: 0.10; }

/* Trend line at the bottom */
.kpi__trend {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  margin: 0;
  padding-top: 0.5rem;
  border-top: 1px dashed var(--border-faint);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 500ms ease, transform 500ms ease;
  transition-delay: 1700ms;
}
.kpi.is-revealed .kpi__trend {
  opacity: 1;
  transform: translateY(0);
}
.kpi__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: var(--accent-pace);
  font-size: 0.9em;
  font-weight: 500;
  border: 1px solid var(--accent-pace);
  border-radius: 50%;
  line-height: 1;
}
.kpi__arrow--steady {
  color: var(--accent-warn);
  border-color: var(--accent-warn);
}

@media (min-width: 768px) {
  .kpi-grid { grid-template-columns: repeat(4, 1fr); }
}

.proof__gallery-label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 1.5rem;
}
/* ---------- Gallery head ---------- */
.gallery__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px dashed var(--border-faint);
}
.gallery__label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.gallery__head-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-pace);
  box-shadow: 0 0 8px rgba(206, 220, 0, 0.7);
  animation: pulse 1.6s ease-in-out infinite;
}
.gallery__counter {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-pace);
  margin: 0;
}

/* ---------- Gallery items ---------- */
.gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.5rem 1.5rem;
  margin-bottom: clamp(4rem, 7vw, 6rem);
}
.gallery__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  position: relative;
  transition: transform 450ms cubic-bezier(0.16, 1, 0.3, 1);
}
.gallery__item .device {
  max-width: 200px;
  transition: border-color 350ms ease, box-shadow 400ms ease;
}

/* Chip floating above each device — numbered */
.gallery__chip {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  background: var(--bg-0);
  border: 1px solid var(--border-soft);
  padding: 4px 10px;
  color: var(--text-muted);
  transition: border-color 300ms ease, color 300ms ease, padding 300ms ease;
}

/* Caption — title + sub-description */
.gallery__item figcaption {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  text-align: center;
}
.gallery__title {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  color: var(--text-secondary);
  text-transform: uppercase;
  transition: color 300ms ease;
}
.gallery__sub {
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: var(--text-muted);
  letter-spacing: 0.02em;
  text-transform: none;
}

/* Spotlight state — auto-rotates every 4s OR triggered on hover */
.gallery__item.is-spotlight {
  transform: translateY(-6px);
}
.gallery__item.is-spotlight .device {
  border-color: var(--accent-pace);
  box-shadow:
    0 0 0 1px var(--border-faint) inset,
    0 14px 36px -16px rgba(0, 0, 0, 0.85),
    0 18px 60px -24px rgba(206, 220, 0, 0.35),
    0 0 80px -30px rgba(206, 220, 0, 0.55);
}
.gallery__item.is-spotlight .gallery__chip {
  border-color: var(--accent-pace);
  color: var(--accent-pace);
  padding: 4px 14px;
  box-shadow: 0 0 12px rgba(206, 220, 0, 0.4);
}
.gallery__item.is-spotlight .gallery__title {
  color: var(--accent-pace);
}

/* User-hovered (priority over auto-rotate spotlight) */
.gallery__item:hover {
  transform: translateY(-8px);
}
.gallery__item:hover .device {
  border-color: var(--accent-pace);
}

@media (min-width: 768px) {
  .gallery { grid-template-columns: repeat(4, 1fr); }
}

/* ============================================================
   Testimonial — restyled as "field report"
   ============================================================ */
.testimonial {
  border: 1px solid var(--border-soft);
  background: var(--bg-1);
  padding: clamp(1.75rem, 4vw, 2.75rem);
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  isolation: isolate;
}
.testimonial::before,
.testimonial::after {
  content: "";
  position: absolute;
  width: 18px; height: 18px;
  border-color: var(--accent-pace);
  border-style: solid;
  border-width: 0;
}
.testimonial::before {
  top: -1px; left: -1px;
  border-top-width: 2px;
  border-left-width: 2px;
}
.testimonial::after {
  bottom: -1px; right: -1px;
  border-bottom-width: 2px;
  border-right-width: 2px;
}

.testimonial__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px dashed var(--border-soft);
  margin-bottom: 1.75rem;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.testimonial__id {
  color: var(--accent-pace);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 500;
}
.testimonial__id-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-pace);
  box-shadow: 0 0 8px rgba(206, 220, 0, 0.7);
}
.testimonial__meta { color: var(--text-muted); }

.testimonial__body {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.0625rem, 1.9vw, 1.4rem);
  line-height: 1.45;
  letter-spacing: -0.012em;
  color: var(--text-primary);
  margin: 0 0 1.75rem;
  position: relative;
  padding-left: 1.4rem;
}
.testimonial__prompt {
  position: absolute;
  left: 0;
  top: 0.1em;
  color: var(--accent-pace);
  font-family: var(--font-mono);
  font-weight: 700;
}

.testimonial__source {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border-soft);
}
.testimonial__sig {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.testimonial__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}
.testimonial__name strong { color: var(--accent-pace); font-weight: 700; }
.testimonial__role {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  text-transform: uppercase;
}
.testimonial__signature-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, var(--border-soft), transparent);
  min-width: 40px;
}
.testimonial__verified {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  color: var(--accent-pace);
  text-transform: uppercase;
  padding: 5px 9px;
  border: 1px solid var(--accent-pace);
  border-radius: 3px;
}
.testimonial__verified-check {
  font-weight: 700;
  font-size: 0.875em;
}

/* =============================================================
   // 07 — FIT CHECK
   ============================================================= */
.fit__title {
  max-width: 20ch;
  margin-bottom: 1.25rem;
}
.fit__intro {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--text-secondary);
  max-width: 60ch;
  margin: 0 0 clamp(2.5rem, 5vw, 4rem);
}

/* ========================================================
   FIT CHECK — interactive compatibility diagnostic
   ======================================================== */
.fit-check {
  border: 1px solid var(--border-soft);
  background: var(--bg-1);
  padding: clamp(1.75rem, 3.5vw, 2.5rem);
  position: relative;
  isolation: isolate;
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}
.fit-check::before,
.fit-check::after {
  content: "";
  position: absolute;
  width: 26px; height: 26px;
  border-color: var(--accent-pace);
  border-style: solid;
  border-width: 0;
  transition: filter 350ms ease;
}
.fit-check::before {
  top: -1px; left: -1px;
  border-top-width: 2px;
  border-left-width: 2px;
}
.fit-check::after {
  bottom: -1px; right: -1px;
  border-bottom-width: 2px;
  border-right-width: 2px;
}
.fit-check.is-active::before,
.fit-check.is-active::after {
  filter: drop-shadow(0 0 8px rgba(206, 220, 0, 0.6));
}

/* Header — system identifier + counter */
.fit-check__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px dashed var(--border-soft);
  margin-bottom: 1.75rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.fit-check__id {
  color: var(--accent-pace);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 500;
}
.fit-check__id-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-pace);
  box-shadow: 0 0 8px rgba(206, 220, 0, 0.7);
  animation: pulse 1.6s ease-in-out infinite;
}
.fit-check__counter {
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
#fit-counter-num {
  color: var(--text-primary);
  font-weight: 500;
  transition: color 250ms ease;
}
.fit-check.is-complete #fit-counter-num { color: var(--accent-pace); }

/* List of checkable items */
.fit-check__list {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.fit-item { margin: 0; }
.fit-item__btn {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: 0.875rem;
  width: 100%;
  background: var(--bg-0);
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 0.875rem 1rem;
  cursor: pointer;
  text-align: left;
  transition: border-color 220ms ease, background-color 220ms ease, transform 180ms ease;
  position: relative;
}
.fit-item__btn:hover {
  border-color: var(--border-loud);
  background: var(--bg-2);
}
.fit-item__btn:active { transform: scale(0.995); }
.fit-item__btn[aria-pressed="true"] {
  border-color: var(--accent-pace);
  background: rgba(206, 220, 0, 0.04);
  box-shadow: 0 0 0 1px rgba(206, 220, 0, 0.25);
}

.fit-item__num {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  transition: color 220ms ease;
}
.fit-item__btn[aria-pressed="true"] .fit-item__num { color: var(--accent-pace); }

.fit-item__box {
  width: 22px;
  height: 22px;
  border: 1px solid var(--border-loud);
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-pace);
  transition: border-color 220ms ease, background 220ms ease;
  flex-shrink: 0;
}
.fit-item__btn[aria-pressed="true"] .fit-item__box {
  border-color: var(--accent-pace);
  background: rgba(206, 220, 0, 0.1);
}
.fit-item__box svg {
  width: 16px;
  height: 16px;
}
.fit-item__check {
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  transition: stroke-dashoffset 400ms cubic-bezier(0.5, 0, 0.2, 1);
}
.fit-item__btn[aria-pressed="true"] .fit-item__check {
  stroke-dashoffset: 0;
}

.fit-item__text {
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--text-secondary);
  transition: color 220ms ease;
}
.fit-item__text strong {
  color: var(--text-primary);
  font-weight: 500;
}
.fit-item__btn[aria-pressed="true"] .fit-item__text {
  color: var(--text-primary);
}
.fit-item__btn[aria-pressed="true"] .fit-item__text strong {
  color: var(--accent-pace);
}

/* Output — bar + verdict */
.fit-check__output {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-top: 1.5rem;
  border-top: 1px dashed var(--border-soft);
}
.fit-check__bar {
  position: relative;
  height: 4px;
  background: var(--bg-0);
  border: 1px solid var(--border-soft);
  border-radius: 2px;
  overflow: hidden;
}
.fit-check__bar-fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, var(--accent-danger), var(--accent-warn) 50%, var(--accent-pace));
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 500ms cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 0 12px rgba(206, 220, 0, 0.5);
}
.fit-check__bar-ticks {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  pointer-events: none;
  z-index: 2;
}
.fit-check__bar-ticks span {
  border-right: 1px solid var(--bg-0);
}
.fit-check__bar-ticks span:last-child { border-right: 0; }

.fit-check__verdict {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.625rem;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
}
.fit-check__verdict-prefix {
  color: var(--text-muted);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 0.6875rem;
}
.fit-check__verdict-text {
  color: var(--text-primary);
  font-weight: 500;
}
.fit-check[data-tier="awaiting"] .fit-check__verdict-text { color: var(--text-muted); }
.fit-check[data-tier="low"]      .fit-check__verdict-text { color: var(--accent-warn); }
.fit-check[data-tier="mid"]      .fit-check__verdict-text { color: var(--accent-pace); }
.fit-check[data-tier="high"]     .fit-check__verdict-text { color: var(--accent-pace); }
.fit-check[data-tier="full"]     .fit-check__verdict-text {
  color: var(--accent-pace);
  text-shadow: 0 0 18px rgba(206, 220, 0, 0.5);
}

/* CTA appears after a strong match */
.fit-check__cta {
  margin-top: 0.5rem;
  animation: fit-cta-in 450ms cubic-bezier(0.16, 1, 0.3, 1);
}
.fit-check__cta-link {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.875rem 1.25rem;
  background: var(--accent-pace);
  color: var(--bg-0);
  border: 0;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: background 200ms ease, transform 180ms ease;
  box-shadow: 0 0 24px rgba(206, 220, 0, 0.35);
}
.fit-check__cta-link:hover {
  background: var(--text-primary);
  transform: translateX(2px);
}
.fit-check__cta-arrow {
  font-weight: 700;
  font-size: 1em;
}
@keyframes fit-cta-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ========================================================
   RED FLAGS — non-interactive warning block
   ======================================================== */
.fit-redflags {
  border: 1px solid var(--border-soft);
  border-left: 3px solid var(--accent-danger);
  background: var(--bg-1);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  position: relative;
}
.fit-redflags__head {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px dashed var(--border-faint);
}
.fit-redflags__icon {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-danger);
  font-size: 0.875rem;
  border: 1px solid var(--accent-danger);
  border-radius: 4px;
  flex-shrink: 0;
  background: rgba(255, 23, 68, 0.06);
}
.fit-redflags__head-text { flex: 1; }
.fit-redflags__title {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-danger);
  font-weight: 500;
  margin: 0 0 0.35rem;
}
.fit-redflags__sub {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--text-secondary);
  margin: 0;
}
.fit-redflags__sub strong { color: var(--accent-danger); font-weight: 500; }
.fit-redflags__sub em { color: var(--text-primary); font-style: normal; font-weight: 500; }

.fit-redflags__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.fit-redflags__list li {
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--text-secondary);
  padding: 0.625rem 0.75rem 0.625rem 0;
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  border-bottom: 1px dashed var(--border-faint);
}
.fit-redflags__list li:last-child { border-bottom: 0; }
.fit-redflags__bullet {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 1px solid var(--accent-danger);
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--accent-danger);
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .fit-item__btn {
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "num text"
      "box text";
    gap: 0.5rem 0.875rem;
  }
  .fit-item__num { grid-area: num; }
  .fit-item__box { grid-area: box; }
  .fit-item__text { grid-area: text; align-self: center; }
}

/* =============================================================
   // 08 — FAQ
   ============================================================= */
.faq__title {
  margin-bottom: 1.25rem;
  max-width: 18ch;
}
.faq__intro {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 clamp(2rem, 4vw, 3rem);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.faq__intro-marker { color: var(--accent-pace); }

/* ================================================================
   FAQ INSPECTOR — split pane (index left, detail right)
   ================================================================ */
.faq-shell {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--border-soft);
  border: 1px solid var(--border-soft);
  position: relative;
}
@media (min-width: 1024px) {
  .faq-shell {
    grid-template-columns: minmax(280px, 40%) 1fr;
  }
}

/* --- LEFT: INDEX --- */
.faq-index {
  background: var(--bg-1);
  display: flex;
  flex-direction: column;
}
.faq-index__head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border-soft);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.faq-index__head-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-pace);
  box-shadow: 0 0 8px rgba(206, 220, 0, 0.65);
  animation: pulse 1.6s ease-in-out infinite;
}
.faq-index__count {
  margin-left: auto;
  color: var(--accent-pace);
  font-weight: 500;
}
.faq-index__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.faq-index__list li {
  border-bottom: 1px solid var(--border-faint);
}
.faq-index__list li:last-child { border-bottom: 0; }

.faq-q {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  gap: 0.625rem 0.75rem;
  width: 100%;
  background: transparent;
  border: 0;
  padding: 0.875rem 1.125rem;
  cursor: pointer;
  text-align: left;
  color: var(--text-secondary);
  transition: background-color 200ms ease, color 200ms ease;
  position: relative;
}
.faq-q::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: transparent;
  transition: background-color 200ms ease, box-shadow 200ms ease;
}
.faq-q:hover {
  background: var(--bg-2);
  color: var(--text-primary);
}
.faq-q.is-active {
  background: var(--bg-2);
  color: var(--text-primary);
}
.faq-q.is-active::before {
  background: var(--accent-pace);
  box-shadow: 0 0 10px rgba(206, 220, 0, 0.7);
}
.faq-q__num {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  transition: color 200ms ease;
}
.faq-q.is-active .faq-q__num { color: var(--accent-pace); }
.faq-q__tag {
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.16em;
  padding: 3px 6px;
  border: 1px solid var(--border-loud);
  border-radius: 2px;
  color: var(--text-muted);
  text-transform: uppercase;
  transition: border-color 200ms ease, color 200ms ease;
}
.faq-q.is-active .faq-q__tag {
  border-color: var(--accent-pace);
  color: var(--accent-pace);
}
.faq-q__text {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.9375rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.faq-q__arrow {
  font-family: var(--font-mono);
  color: var(--text-muted);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 200ms ease, transform 200ms ease, color 200ms ease;
}
.faq-q:hover .faq-q__arrow,
.faq-q.is-active .faq-q__arrow {
  opacity: 1;
  transform: translateX(0);
  color: var(--accent-pace);
}

/* --- RIGHT: DETAIL --- */
.faq-detail {
  background: var(--bg-0);
  display: flex;
  flex-direction: column;
  min-height: 320px;
  position: relative;
}
.faq-detail__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--border-soft);
  background: var(--bg-1);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}
.faq-detail__filename {
  color: var(--accent-pace);
  font-weight: 500;
  text-transform: lowercase;
}
.faq-detail__tag {
  color: var(--text-primary);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.faq-detail__sep { color: var(--border-loud); }
.faq-detail__sep--push { margin-left: auto; }
.faq-detail__time {
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.faq-detail__pane {
  flex: 1;
  padding: 1.75rem 1.75rem 1rem;
  position: relative;
}

/* Each answer is hidden by default — JS swaps .is-active */
.faq-a { display: none; }
.faq-a.is-active { display: block; }

/* Reveal each line with a clip-path "print" — staggered */
.faq-a.is-active p {
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  transform: translateY(4px);
  animation: faq-reveal-line 520ms cubic-bezier(0.5, 0, 0.2, 1) forwards;
}
.faq-a.is-active p:nth-child(1) { animation-delay: 50ms; }
.faq-a.is-active p:nth-child(2) { animation-delay: 160ms; }
.faq-a.is-active p:nth-child(3) { animation-delay: 270ms; }
.faq-a.is-active p:nth-child(4) { animation-delay: 380ms; }
.faq-a.is-active p:nth-child(5) { animation-delay: 490ms; }
@keyframes faq-reveal-line {
  to {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transform: translateY(0);
  }
}

.faq-a p {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text-secondary);
  margin: 0 0 0.875rem;
  max-width: 56ch;
}
.faq-a__title {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-primary);
  font-weight: 500;
  margin-bottom: 1.25rem !important;
}
.faq-a strong {
  color: var(--accent-pace);
  font-weight: 500;
}
.faq-a__prompt {
  color: var(--accent-pace);
  font-weight: 700;
  margin-right: 0.4rem;
}
.faq-a__close {
  font-family: var(--font-mono);
  font-size: 0.875rem !important;
  color: var(--text-muted) !important;
  border-top: 1px dashed var(--border-faint);
  padding-top: 1rem;
  margin-top: 0.5rem !important;
}
.faq-a__close em {
  color: var(--text-primary);
  font-style: normal;
  font-weight: 500;
}

/* Footer of the detail pane */
.faq-detail__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding: 0.875rem 1.5rem 1rem;
  border-top: 1px dashed var(--border-soft);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.faq-detail__foot-meta { color: var(--text-muted); }
.faq-detail__foot-link {
  color: var(--accent-pace);
  font-weight: 500;
  letter-spacing: 0.14em;
  transition: opacity 200ms ease, transform 200ms ease;
}
.faq-detail__foot-link:hover { transform: translateX(2px); }

@media (max-width: 1023px) {
  .faq-detail__head { padding: 0.875rem 1.25rem; }
  .faq-detail__pane { padding: 1.25rem; }
}
@media (max-width: 640px) {
  .faq-q {
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "num  tag    arrow"
      "text text   text";
    padding: 0.875rem 1rem;
  }
  .faq-q__num   { grid-area: num; }
  .faq-q__tag   { grid-area: tag; justify-self: start; }
  .faq-q__arrow { grid-area: arrow; }
  .faq-q__text  { grid-area: text; }
}

/* =============================================================
   // 09 — CTA FINAL
   ============================================================= */
/* ================================================================
   // 09 — TRANSMISSION CONSOLE
   ================================================================ */
.cta__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.5rem 2rem;
  margin-bottom: 1.5rem;
}
.cta__title {
  margin-bottom: 0;
  max-width: 16ch;
}
.cta__meta {
  list-style: none;
  margin: 0;
  padding: 1rem 1.25rem;
  border: 1px solid var(--border-soft);
  background: var(--bg-1);
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  min-width: 200px;
  position: relative;
}
.cta__meta::before {
  content: "";
  position: absolute;
  top: -1px; left: -1px;
  width: 12px; height: 12px;
  border-top: 2px solid var(--accent-pace);
  border-left: 2px solid var(--accent-pace);
}
.cta__meta::after {
  content: "";
  position: absolute;
  bottom: -1px; right: -1px;
  width: 12px; height: 12px;
  border-bottom: 2px solid var(--accent-pace);
  border-right: 2px solid var(--accent-pace);
}
.cta__meta-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.cta__meta-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-pace);
  box-shadow: 0 0 8px rgba(206, 220, 0, 0.7);
  animation: pulse 1.6s ease-in-out infinite;
}
.cta__meta-label {
  color: var(--text-muted);
}
.cta__meta-value {
  margin-left: auto;
  color: var(--text-primary);
  font-weight: 500;
}

.cta__sub {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 clamp(2.5rem, 5vw, 3.5rem);
  padding-left: 1rem;
  border-left: 2px solid var(--accent-pace);
}
.cta__sub strong { color: var(--text-primary); font-weight: 500; }

/* Grid of 3 channels */
.cta__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 768px) {
  .cta__grid { grid-template-columns: repeat(2, 1fr); }
  .channel--form { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .cta__grid { grid-template-columns: repeat(3, 1fr); }
  .channel--form { grid-column: auto; }
}

/* ---------- Channel card ---------- */
.channel {
  background: var(--bg-1);
  border: 1px solid var(--border-soft);
  padding: 1.25rem 1.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  text-align: left;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: border-color 240ms ease, transform 280ms cubic-bezier(0.16, 1, 0.3, 1), background-color 240ms ease;
}
.channel:hover {
  border-color: var(--accent-pace);
  background: var(--bg-2);
  transform: translateY(-4px);
}
.channel--form {
  cursor: default;
}
.channel--form:hover {
  transform: none;
}

/* Channel header — ID + status */
.channel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding-bottom: 0.875rem;
  border-bottom: 1px dashed var(--border-faint);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.channel__id { color: var(--accent-pace); font-weight: 500; }
.channel__status {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--text-muted);
}
.channel__status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-live);
  box-shadow: 0 0 6px var(--accent-live);
  animation: pulse 1.8s ease-in-out infinite;
}
.channel__status--live .channel__status-dot {
  animation: pulse 1.1s ease-in-out infinite;
}

/* Channel body */
.channel__body {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.channel__type {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0;
}
.channel__handle {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.0625rem, 2vw, 1.25rem);
  letter-spacing: -0.015em;
  color: var(--text-primary);
  margin: 0;
  word-break: break-word;
  transition: color 240ms ease;
}
.channel:hover .channel__handle { color: var(--accent-pace); }
.channel__desc {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--text-secondary);
  margin: 0;
}

/* Channel footer */
.channel__foot {
  margin-top: auto;
  padding-top: 0.875rem;
  border-top: 1px dashed var(--border-faint);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.channel__sla { color: var(--text-muted); }
.channel__cta {
  color: var(--accent-pace);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: gap 200ms ease;
}
.channel:hover .channel__cta { gap: 0.7rem; }
.channel__arrow {
  display: inline-block;
  transition: transform 200ms ease;
}
.channel:hover .channel__arrow { transform: translateX(2px); }

/* Big background number behind the card */
.channel__bignum {
  position: absolute;
  bottom: -0.6rem;
  right: -0.25rem;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: clamp(5rem, 9vw, 7.5rem);
  letter-spacing: -0.04em;
  color: rgba(206, 220, 0, 0.04);
  line-height: 1;
  pointer-events: none;
  z-index: 0;
  transition: color 280ms ease, transform 400ms cubic-bezier(0.16, 1, 0.3, 1);
}
.channel > * { position: relative; z-index: 1; }
.channel:hover .channel__bignum {
  color: rgba(206, 220, 0, 0.12);
  transform: translate(-0.25rem, -0.25rem) scale(1.04);
}

/* ---------- TRANSMIT FORM (Channel 03) ---------- */
.transmit-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 0.25rem;
}
.transmit-form__field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.transmit-form__label {
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.16em;
  color: var(--text-muted);
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.transmit-form__prompt {
  color: var(--accent-pace);
  font-weight: 700;
}
.transmit-form__counter {
  margin-left: auto;
  font-size: 0.5rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.transmit-form__counter.is-near { color: var(--accent-warn); }
.transmit-form__counter.is-full  { color: var(--accent-danger); }

.transmit-form__input {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--text-primary);
  background: var(--bg-0);
  border: 0;
  border-bottom: 1px solid var(--border-soft);
  padding: 0.5rem 0.25rem;
  border-radius: 0;
  transition: border-color 200ms ease, background 200ms ease;
}
.transmit-form__input:focus {
  outline: none;
  border-bottom-color: var(--accent-pace);
  background: rgba(206, 220, 0, 0.04);
}
.transmit-form__input::placeholder { color: var(--text-muted); opacity: 0.7; }
.transmit-form__input--area {
  resize: vertical;
  min-height: 56px;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  line-height: 1.5;
}

.transmit-form__submit {
  margin-top: 0.5rem;
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 1rem;
  background: var(--accent-pace);
  color: var(--bg-0);
  border: 0;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 200ms ease, transform 150ms ease, opacity 200ms ease;
  box-shadow: 0 0 0 0 rgba(206, 220, 0, 0.5);
}
.transmit-form__submit:hover {
  background: var(--text-primary);
  box-shadow: 0 0 24px 0 rgba(206, 220, 0, 0.45);
}
.transmit-form__submit:active { transform: scale(0.98); }
.transmit-form__submit-icon {
  font-size: 0.875em;
  transition: transform 220ms ease;
}
.transmit-form__submit:hover .transmit-form__submit-icon {
  transform: translateY(-2px);
}
.transmit-form__submit-progress {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.04));
  transform-origin: left center;
  transform: scaleX(0);
  pointer-events: none;
  z-index: 1;
}
.transmit-form__submit.is-transmitting {
  background: var(--accent-pace);
  cursor: default;
}
.transmit-form__submit.is-transmitting .transmit-form__submit-progress {
  animation: transmit-progress 900ms cubic-bezier(0.45, 0, 0.2, 1) forwards;
}
.transmit-form__submit.is-transmitted {
  background: var(--accent-live);
  color: var(--bg-0);
}
@keyframes transmit-progress {
  to { transform: scaleX(1); }
}

.transmit-form__submit-text,
.transmit-form__submit-icon {
  position: relative;
  z-index: 2;
}

.transmit-form__status {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  color: var(--accent-live);
  text-transform: uppercase;
  min-height: 1em;
  margin: 0.25rem 0 0;
}
.transmit-form__status.is-error { color: var(--accent-danger); }

@media (max-width: 640px) {
  .cta__header {
    flex-direction: column;
    align-items: flex-start;
  }
  .cta__meta { width: 100%; }
}

/* =============================================================
   FOOTER
   ============================================================= */
.site-footer {
  background: var(--bg-1);
  border-top: 1px solid var(--border-soft);
  padding: 3.5rem var(--container-px) 2.5rem;
  margin-top: 4rem;
}
.site-footer__inner {
  max-width: 1440px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: start;
}
.site-footer__brand {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.site-footer__tag {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  text-transform: uppercase;
}

/* Shared column label */
.site-footer__col-label {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.875rem;
}

.site-footer__contact,
.site-footer__address,
.site-footer__nav {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: flex-start;
}

.site-footer__link,
.site-footer__nav a {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: none;
  color: var(--text-secondary);
  transition: color 200ms ease;
  position: relative;
}
.site-footer__nav a {
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.site-footer__link::after,
.site-footer__nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -3px;
  width: 0; height: 1px;
  background: var(--accent-pace);
  transition: width 200ms ease;
}
.site-footer__link:hover,
.site-footer__nav a:hover { color: var(--text-primary); }
.site-footer__link:hover::after,
.site-footer__nav a:hover::after { width: 100%; }

.site-footer__plain {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.65;
  color: var(--text-secondary);
  letter-spacing: 0.02em;
}

.site-footer__legal {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  text-transform: uppercase;
  border-top: 1px solid var(--border-faint);
  padding-top: 1.75rem;
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.875rem;
  line-height: 1.6;
}
.site-footer__legal strong {
  color: var(--text-secondary);
  font-weight: 500;
}
.site-footer__sep {
  color: var(--border-loud);
}

@media (min-width: 768px) {
  .site-footer__inner {
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem 2rem;
  }
}
@media (min-width: 1024px) {
  .site-footer__inner {
    grid-template-columns: 1.4fr 1fr 1.2fr 0.8fr;
    gap: 2.5rem 2.5rem;
  }
}

/* =============================================================
   SCROLL REVEAL
   ============================================================= */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 600ms ease, transform 600ms ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}


/* =============================================================
   RESPONSIVE TWEAKS
   ============================================================= */
@media (max-width: 640px) {
  .status-bar__right { display: none; }
  .status-bar__center .status-tag { font-size: 0.625rem; }
  .header-back { font-size: 0.6875rem; }
  .hero__device-labels { display: none; }
  .hero__device-meta { display: none; }
  .metric-strip { font-size: 0.625rem; }
  .manifesto__frame { box-shadow: none; padding: 2.5rem 1.5rem; }
}

/* ================================================================
   FLOATING WHATSAPP TERMINAL
   ================================================================ */
.wa-term {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 200;
  font-family: var(--font-mono);
}

/* --- FAB (closed state) --- */
.wa-term__fab {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem 0.75rem 0.75rem;
  background: var(--bg-1);
  border: 1px solid var(--accent-pace);
  border-radius: 4px;
  color: var(--accent-pace);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow:
    0 10px 30px -10px rgba(0, 0, 0, 0.55),
    0 0 14px rgba(206, 220, 0, 0.35);
  transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 280ms ease, background 200ms ease;
  animation: wa-fab-pulse 2.8s ease-in-out infinite;
}
.wa-term__fab:hover {
  transform: translateY(-3px);
  background: var(--bg-2);
  box-shadow:
    0 14px 36px -10px rgba(0, 0, 0, 0.65),
    0 0 30px rgba(206, 220, 0, 0.6);
}
.wa-term__fab-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--accent-pace);
  border-radius: 4px;
  background: rgba(206, 220, 0, 0.08);
  color: var(--accent-pace);
  flex-shrink: 0;
}
.wa-term__fab-icon svg {
  width: 16px;
  height: 16px;
  display: block;
}
.wa-term__fab-cursor {
  display: inline-block;
  color: var(--accent-pace);
  font-weight: 700;
  animation: blink 1s ease infinite;
}

@keyframes wa-fab-pulse {
  0%, 100% {
    box-shadow:
      0 10px 30px -10px rgba(0, 0, 0, 0.55),
      0 0 14px rgba(206, 220, 0, 0.35);
  }
  50% {
    box-shadow:
      0 10px 30px -10px rgba(0, 0, 0, 0.55),
      0 0 28px rgba(206, 220, 0, 0.65);
  }
}

/* Hide the FAB when the panel is open */
.wa-term.is-open .wa-term__fab {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.85);
}

/* --- PANEL (open state) --- */
.wa-term__panel {
  position: absolute;
  bottom: 0;
  right: 0;
  width: min(360px, calc(100vw - 3rem));
  background: var(--bg-1);
  border: 1px solid var(--accent-pace);
  border-radius: 6px;
  box-shadow:
    0 20px 60px -20px rgba(0, 0, 0, 0.85),
    0 0 36px rgba(206, 220, 0, 0.35);
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  transform-origin: bottom right;
  opacity: 0;
  transform: scale(0.9) translateY(8px);
  transition: opacity 280ms cubic-bezier(0.16, 1, 0.3, 1), transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
}
/* hidden attribute must hide even though we use display:flex */
.wa-term__panel[hidden] { display: none; }
.wa-term.is-open .wa-term__panel {
  opacity: 1;
  transform: scale(1) translateY(0);
}

/* Panel header */
.wa-term__head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0.875rem;
  background: var(--bg-2);
  border-bottom: 1px solid var(--border-soft);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.wa-term__head-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-live);
  box-shadow: 0 0 8px var(--accent-live);
  animation: pulse 1.6s ease-in-out infinite;
  flex-shrink: 0;
}
.wa-term__head-title {
  color: var(--accent-pace);
  font-weight: 500;
}
.wa-term__close {
  margin-left: auto;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border-loud);
  border-radius: 3px;
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: color 180ms ease, border-color 180ms ease;
}
.wa-term__close:hover {
  color: var(--accent-danger);
  border-color: var(--accent-danger);
}

/* Panel body — boot lines */
.wa-term__body {
  padding: 1rem 1rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.45;
}
.wa-term__line {
  margin: 0;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  color: var(--text-secondary);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 280ms ease, transform 280ms ease;
}
.wa-term.is-open .wa-term__line { opacity: 1; transform: translateY(0); }
.wa-term.is-open .wa-term__line:nth-child(1) { transition-delay: 120ms; }
.wa-term.is-open .wa-term__line:nth-child(2) { transition-delay: 480ms; }
.wa-term.is-open .wa-term__line:nth-child(3) { transition-delay: 820ms; }
.wa-term__prompt {
  flex-shrink: 0;
  font-weight: 700;
  color: var(--text-muted);
}
.wa-term__line--cmd .wa-term__prompt { color: var(--text-muted); }
.wa-term__line--ok { color: var(--text-primary); }
.wa-term__line--ok .wa-term__prompt { color: var(--accent-live); }
.wa-term__line--ask {
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  padding-top: 0.4rem;
  margin-top: 0.25rem;
  border-top: 1px dashed var(--border-faint);
  position: relative;
}
.wa-term__line--ask .wa-term__prompt {
  color: var(--accent-pace);
  font-family: var(--font-mono);
}
.wa-term__line--ask::after {
  content: "▍";
  color: var(--accent-pace);
  margin-left: 4px;
  animation: blink 1s ease infinite;
  font-family: var(--font-mono);
}

/* Form area */
.wa-term__form {
  padding: 0.75rem 1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 320ms ease, transform 320ms ease;
  transition-delay: 1100ms;
}
.wa-term.is-open .wa-term__form { opacity: 1; transform: translateY(0); }

.wa-term__field {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  background: var(--bg-0);
  border: 1px solid var(--border-soft);
  padding: 0.5rem 0.625rem;
  border-radius: 3px;
  transition: border-color 180ms ease;
}
.wa-term__field:focus-within {
  border-color: var(--accent-pace);
}
.wa-term__field-prompt {
  color: var(--accent-pace);
  font-family: var(--font-mono);
  font-weight: 700;
  line-height: 1.5;
}
.wa-term__field textarea {
  flex: 1;
  background: transparent;
  border: 0;
  outline: none;
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.5;
  resize: vertical;
  min-height: 1.5em;
  padding: 0;
}
.wa-term__field textarea::placeholder {
  color: var(--text-muted);
  opacity: 0.6;
}

.wa-term__form-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.wa-term__counter {
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.wa-term__counter.is-near { color: var(--accent-warn); }
.wa-term__counter.is-full { color: var(--accent-danger); }

.wa-term__submit {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.875rem;
  background: var(--accent-pace);
  color: var(--bg-0);
  border: 0;
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 180ms ease, transform 120ms ease, box-shadow 220ms ease;
}
.wa-term__submit:hover {
  background: var(--text-primary);
  box-shadow: 0 0 20px rgba(206, 220, 0, 0.5);
}
.wa-term__submit:active { transform: scale(0.97); }
.wa-term__submit:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.wa-term__submit-meta {
  margin-left: 0.4rem;
  padding-left: 0.5rem;
  border-left: 1px solid rgba(10, 10, 10, 0.25);
  font-size: 0.5625rem;
  opacity: 0.7;
}

@media (max-width: 640px) {
  .wa-term { bottom: 1rem; right: 1rem; left: 1rem; }
  .wa-term__fab { margin-left: auto; display: inline-flex; }
  .wa-term__panel { width: 100%; }
}