/* ============================================================
   Kybercel — quiz landing page
   ============================================================ */

/* minimal nav variant */
.nav.minimal .nav-links { gap: 0; }

/* ---------- HERO ---------- */
.q-hero { padding-top: clamp(64px, 9vw, 120px); padding-bottom: clamp(56px, 7vw, 96px); text-align: left; }
.q-hero .eyebrow { margin-bottom: 30px; }
.q-hero .eyebrow::before { display: none; }
.q-hero h1 {
  font-size: clamp(2.6rem, 6vw, 5rem);
  letter-spacing: -0.03em;
  line-height: 0.98;
  max-width: 16ch;
}
.q-hero h1 .accent {
  color: var(--acc);
  -webkit-text-fill-color: transparent;
  background-image:
    repeating-linear-gradient(0deg, oklch(0 0 0 / 0.30) 0 1px, transparent 1px 3px),
    linear-gradient(var(--acc), var(--acc));
  -webkit-background-clip: text;
  background-clip: text;
}
.q-hero .sub {
  font-size: clamp(1.15rem, 1.9vw, 1.5rem);
  color: var(--ink-mid);
  margin: 30px 0 0;
  max-width: 46ch;
  line-height: 1.45;
}
.q-hero .sub b { color: var(--ink); font-weight: 500; }
.q-hero-actions { margin-top: 42px; display: flex; gap: 14px; flex-wrap: wrap; }
.q-hero-meta {
  margin-top: 26px;
  font-family: var(--font-mono); font-size: 0.78rem; color: var(--ink-low);
  letter-spacing: 0.04em;
  display: flex; gap: 22px; flex-wrap: wrap;
}
.q-hero-meta span { display: inline-flex; align-items: center; gap: 8px; }
.q-hero-meta span::before { content: "✓"; color: var(--acc); }

/* progress-style hint bar under hero */
.q-scan {
  max-width: none; margin: 56px 0 0;
  border: 1px solid var(--acc-line); border-radius: var(--r-lg);
  background:
    radial-gradient(100% 120% at 100% 0%, color-mix(in oklch, var(--acc) 12%, transparent), transparent 55%),
    oklch(0.17 0.016 262);
  box-shadow:
    0 1px 0 0 color-mix(in oklch, var(--acc) 24%, transparent) inset,
    0 36px 90px -50px color-mix(in oklch, var(--acc) 40%, transparent);
  font-family: var(--font-mono); font-size: 0.8rem;
  overflow: hidden;
}
.q-scan .top { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); color: var(--ink-low); }
.q-scan .top .live { margin-left: auto; color: var(--acc); }
.q-scan .body { padding: 16px; text-align: left; color: var(--ink-mid); line-height: 1.9; }
.q-scan .body .q { color: var(--ink-faint); }
.q-scan .body .a { color: var(--acc); }
.q-scan .bar { height: 4px; background: var(--line-soft); }
.q-scan .bar i { display: block; height: 100%; width: 40%; background: var(--acc); }

/* ---------- VALUE PROP (3 areas) ---------- */
.q-value { border-top: 1px solid var(--line-soft); }
.q-value .section-head { text-align: left; }
.q-value .section-head .eyebrow { }
.q-value .section-head .eyebrow::before { display: none; }
.v-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); border-radius: var(--r-lg); overflow: hidden; }
.v-card { background: var(--bg); padding: clamp(28px, 3vw, 40px); }
.v-card .vn { font-family: var(--font-mono); font-size: 0.74rem; color: var(--acc); letter-spacing: 0.1em; margin-bottom: 20px; }
.v-card h3 { font-size: 1.4rem; margin-bottom: 12px; }
.v-card p { color: var(--ink-mid); font-size: 0.97rem; margin-bottom: 20px; }
.v-card .measures { font-family: var(--font-mono); font-size: 0.78rem; color: var(--ink-low); line-height: 1.95; border-top: 1px solid var(--line-soft); padding-top: 16px; }
.v-card .measures div { display: flex; gap: 9px; align-items: baseline; }
.v-card .measures div::before { content: "·"; color: var(--acc); }
@media (max-width: 820px){ .v-grid { grid-template-columns: 1fr; } }

/* ---------- CREDIBILITY ---------- */
.q-cred { border-top: 1px solid var(--line-soft); }
.cred-grid { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: clamp(36px, 5vw, 72px); align-items: center; }
.cred-bio .eyebrow { margin-bottom: 24px; }
.cred-person { display: flex; gap: 18px; align-items: center; margin-bottom: 26px; }
.cred-avatar { width: 64px; height: 64px; flex: none; border-radius: 8px; border: 1px solid var(--line); background:
  repeating-linear-gradient(135deg, oklch(0.21 0.016 262) 0 6px, oklch(0.18 0.016 262) 6px 12px);
  display: grid; place-items: center; font-family: var(--font-mono); font-size: 0.6rem; color: var(--ink-faint); }
.cred-person .who .nm { font-family: var(--font-display); font-weight: 600; color: var(--ink); font-size: 1.15rem; }
.cred-person .who .ti { font-family: var(--font-mono); font-size: 0.78rem; color: var(--ink-low); margin-top: 3px; }
.cred-bio h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); margin-bottom: 18px; }
.cred-bio p { color: var(--ink-mid); margin-bottom: 16px; }
.cred-bio p .ph { color: var(--ink-faint); }

.cred-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); border-radius: var(--r-lg); overflow: hidden; }
.cred-stat { background: var(--bg); padding: clamp(24px, 3vw, 36px); }
.cred-stat .num { font-family: var(--font-display); font-size: clamp(2.2rem, 4vw, 3rem); font-weight: 600; color: var(--ink); letter-spacing: -0.02em; }
.cred-stat .num .u { color: var(--acc); }
.cred-stat .cap { color: var(--ink-low); font-size: 0.9rem; margin-top: 8px; line-height: 1.45; }
@media (max-width: 860px){ .cred-grid { grid-template-columns: 1fr; } }

/* ---------- FINAL CTA ---------- */
.q-final { border-top: 1px solid var(--line-soft); text-align: left; }
.q-final .eyebrow { margin-bottom: 26px; }
.q-final .eyebrow::before { display: none; }
.q-final h2 { font-size: clamp(2.2rem, 4.5vw, 3.4rem); max-width: 18ch; }
.q-final .ff { margin: 30px 0 0; display: flex; gap: 0; flex-wrap: wrap; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; max-width: 640px; }
.q-final .ff > div { flex: 1 1 0; min-width: 130px; padding: 22px 18px; border-right: 1px solid var(--line); font-family: var(--font-mono); }
.q-final .ff > div:last-child { border-right: none; }
.q-final .ff .big { color: var(--acc); font-size: 1.3rem; }
.q-final .ff .lbl { color: var(--ink-low); font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; margin-top: 8px; }
.q-final-actions { margin-top: 40px; }
.q-final .reassure { margin-top: 22px; font-family: var(--font-mono); font-size: 0.76rem; color: var(--ink-faint); letter-spacing: 0.03em; }