/* ============================================================
   BRILLIANTICS — LANDING, DIRECTION A (visual layer)
   ------------------------------------------------------------
   Chosen 2026-11-05 from two mockups (_design-ref/direction-a.html).
   Playful and Spark-led, light with one bold navy band. Loaded LAST.

   How it works: most of the old look came from shared tokens, so this
   file first REDEFINES those tokens (glass, shadows, radii, gradients)
   and every component that read them goes flat at once. The rules after
   that style the new blocks and the components that hard-coded their
   look.

   The system, in four rules:
     · Flat. No glass, no blur, no grain, no glow, no ambient spinning.
       Depth is a solid "edge" under a card or button (0 4-8px 0).
     · Two radii: 16px (controls, small cards) and 28px (big cards).
     · Chunky controls: a solid face on a darker edge that presses down.
     · Text is never thin: body copy at 400, darker grey.
   Palette unchanged: #004a99 #00aab0 #2563ff #0b1020 #f8fafc, and
   #fb2c36 only for what something costs.
   ============================================================ */

/* ---- 1. TOKENS ---- */
:root {
  --a-line: #e3e8ef;
  --a-line-2: #cfd8e3;
  --a-navy-edge: #00356e;
  --a-teal-tint: #e6f7f7;
  --a-teal-wash: #eefafa;

  --glass-bg: #ffffff;
  --glass-blur: none;
  --glass-border: 2px solid var(--a-line);
  --shadow-sm: 0 4px 0 var(--a-line);
  --shadow-md: 0 5px 0 var(--a-line);
  --shadow-glow: 0 6px 0 var(--a-line-2);
  --shadow-glow-lg: 0 8px 0 var(--a-line-2);
  --gradient-brand: linear-gradient(var(--color-primary), var(--color-primary));
  --gradient-text: linear-gradient(var(--color-primary), var(--color-primary));
  --color-text-muted: #364152;

  --radius-sm: 16px;
  --radius-md: 16px;
  --radius-lg: 28px;
  --radius-xl: 28px;
  --radius-2xl: 28px;
}

/* ---- 2. GROUND AND TYPE ---- */
body { background: #ffffff; }
.grain,
.hero-bg { display: none; }
.section-alt { background: var(--color-light-base); }

.hero-title {
  font-size: clamp(2.5rem, 5.4vw, 4.4rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.02;
}
.grad-italic { font-style: normal; }
.section-title { font-weight: 800; letter-spacing: -0.025em; line-height: 1.06; }

.section-sub, .hero-sub, .faq-item p, .footer-tagline, .try-tab-meta, .try-lead,
.quiz-consequence p, .quiz-live-note, .quiz-result p, .radar-panel-body,
.radar-example p, .sim-sub, .sim-outcome p, .scenario-feedback p, .closer p,
.gets-card p, .step3 p, .sit-learn { font-weight: 400; }
.hero-sub { color: var(--color-text-muted); }

/* Labels: sentence case in a pill, instead of tiny tracked capitals. */
.eyebrow,
.badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  border: 0;
  border-radius: 999px;
  background: var(--a-teal-tint);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: var(--color-accent-text);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}
.badge-dot { display: none; }
.trust-title { font-size: 0.95rem; letter-spacing: 0; text-transform: none; }
.step3-meta, .rc-label, .rc-example { letter-spacing: 0.02em; text-transform: none; font-size: 0.82rem; }

/* ---- 3. BUTTONS: a solid face on a darker edge ---- */
.btn {
  border-radius: 16px;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.01em;
  transition: transform 0.08s ease, box-shadow 0.08s ease, background 0.15s ease;
}
.btn-primary,
.btn-primary:hover {
  background: var(--color-primary);
  color: #fff;
  box-shadow: 0 5px 0 var(--a-navy-edge);
  transform: none;
}
.btn-primary:hover { background: #0a56ad; }
.btn-primary:active { transform: translateY(5px); box-shadow: 0 0 0 var(--a-navy-edge); }
.btn-sm.btn-primary { box-shadow: 0 4px 0 var(--a-navy-edge); }
.btn-sm.btn-primary:active { transform: translateY(4px); box-shadow: 0 0 0 var(--a-navy-edge); }
.btn-ghost,
.btn-ghost:hover {
  background: #fff;
  border: 2px solid var(--a-line);
  box-shadow: 0 4px 0 var(--a-line);
  transform: none;
}
.btn-ghost:active { transform: translateY(4px); box-shadow: 0 0 0 var(--a-line); }

/* ---- 4. NAV: white, one solid rule ---- */
.nav,
.nav.scrolled {
  background: #fff;
  border-bottom: 2px solid var(--a-line);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.nav-link { font-weight: 600; }

/* ---- 5. HERO: copy + the scene you can tap ---- */
.hero { padding: clamp(40px, 6vw, 80px) 0 clamp(56px, 8vw, 96px); }
.hero-note { color: var(--color-text-muted); font-weight: 600; }
.hero-scene {
  display: block;
  min-height: 0;
  place-items: initial;
}

.scene-card {
  background: #fff;
  border: 2px solid var(--a-line);
  border-radius: 28px;
  padding: 26px;
  box-shadow: 0 8px 0 var(--a-line);
}
.scene-top { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.scene-spark { flex: none; width: 128px; height: 128px; margin: -26px -14px -22px -22px; }
.scene-spark svg { width: 128px; height: 128px; }
.scene-bubble {
  position: relative;
  background: var(--color-light-base);
  border: 2px solid var(--a-line);
  border-radius: 16px;
  padding: 12px 16px;
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--color-text);
}
.scene-bubble::before {
  content: '';
  position: absolute;
  left: -9px;
  top: calc(50% - 7px);
  width: 14px;
  height: 14px;
  background: var(--color-light-base);
  border-left: 2px solid var(--a-line);
  border-bottom: 2px solid var(--a-line);
  transform: rotate(45deg);
}
.scene-ctx { display: inline-block; margin-bottom: 6px; font-size: 0.85rem; font-weight: 700; color: var(--color-accent-text); }
.scene-q {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1.38;
  color: var(--color-text);
  margin-bottom: 16px;
}
.scene-opts { display: flex; flex-direction: column; gap: 10px; }
.scene-opt {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  text-align: left;
  padding: 13px 16px;
  background: #fff;
  border: 2px solid var(--a-line);
  border-radius: 16px;
  box-shadow: 0 4px 0 var(--a-line);
  font-size: 0.98rem;
  font-weight: 500;
  line-height: 1.45;
  color: var(--color-text);
  transition: transform 0.08s ease, box-shadow 0.08s ease, border-color 0.15s ease, background 0.15s ease, opacity 0.2s ease;
}
.scene-opt:hover { border-color: #b9e6e7; background: #fbfefe; }
.scene-opt:active { transform: translateY(4px); box-shadow: 0 0 0 var(--a-line); }
.scene-key {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 2px solid var(--a-line);
  border-radius: 9px;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}
.scene-opt.is-picked { border-color: var(--color-accent); background: var(--a-teal-wash); box-shadow: 0 4px 0 var(--color-accent); }
.scene-opt.is-picked .scene-key { background: var(--color-accent-text); border-color: var(--color-accent-text); color: #fff; }
.scene-opt.is-dim { opacity: 0.5; }

.scene-fb { display: grid; gap: 10px; margin-top: 16px; }
.scene-fb[hidden] { display: none; }
.scene-fb.is-in { animation: scene-rise 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.2) both; }
@keyframes scene-rise {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}
.scene-fb-row { padding: 12px 16px; border-radius: 16px; font-size: 0.94rem; line-height: 1.5; }
.scene-fb-row b { display: block; margin-bottom: 2px; font-size: 0.82rem; }
.scene-gain { background: var(--a-teal-wash); }
.scene-gain b { color: var(--color-accent-text); }
.scene-cost { background: #fff1f1; }
.scene-cost b { color: var(--color-red-text); }
.scene-next { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 6px; }
.scene-retry {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--color-text-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.scene-note { margin-top: 14px; text-align: center; font-size: 0.86rem; color: var(--color-text-muted); }

/* ---- 6. TRY IT: chunky tabs, cards and options ---- */
.try-tab,
.try-tab:hover {
  border: 2px solid var(--a-line);
  box-shadow: 0 4px 0 var(--a-line);
  transform: none;
}
.try-tab:hover { border-color: #b9e6e7; }
.try-tab.is-on {
  border-color: var(--color-accent);
  background: var(--a-teal-wash);
  box-shadow: 0 4px 0 var(--color-accent);
}
.demo { background: #fff; border: 2px solid var(--a-line); box-shadow: 0 6px 0 var(--a-line); }
.quiz-option {
  background: #fff;
  border: 2px solid var(--a-line);
  border-radius: 16px;
  box-shadow: 0 4px 0 var(--a-line);
}
.quiz-option:hover:not(:disabled) { transform: none; border-color: #b9e6e7; box-shadow: 0 4px 0 var(--a-line); }
.quiz-option:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 0 0 var(--a-line); }
.quiz-option.picked { border-color: var(--color-accent); background: var(--a-teal-wash); box-shadow: 0 4px 0 var(--color-accent); }
.sim { background: var(--color-secondary); box-shadow: 0 8px 0 var(--a-line-2); }
.sim::before { display: none; }

/* ---- 7. WHAT YOU GET: the sample result beside what it shows ---- */
.result-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: center;
  margin-bottom: 28px;
}
.result-sample { display: flex; justify-content: center; }
.result-card {
  width: min(400px, 100%);
  padding: 26px;
  background: #fff;
  border: 2px solid var(--a-line);
  border-radius: 28px;
  box-shadow: 0 8px 0 var(--a-line-2);
}
.gets-list { display: grid; gap: 16px; }
.gets-card {
  display: grid;
  grid-template-columns: 58px 1fr;
  column-gap: 18px;
  align-items: start;
  padding: 22px 24px;
}
.gets-card .sym-plate { grid-row: span 2; margin: 0; border-radius: 16px; }
.gets-card h3 { margin-bottom: 4px; }
.quote-block { background: var(--color-light-base); border: 2px solid var(--a-line); }

/* ---- 8. HOW IT WORKS: the navy band ---- */
.band-navy { background: var(--color-primary); color: #fff; }
.band-navy .section-title { color: #fff; }
/* Solid, not translucent: #8ee3e6 on a 12% white wash over navy measured
   right at 4.5:1 and failed axe on phones. On #00356e it is ~8.6:1. */
.band-navy .eyebrow { background: var(--a-navy-edge); color: #8ee3e6; }
.how-layout { display: grid; grid-template-columns: 1fr; gap: 48px; align-items: center; }
.band-navy .steps3 { grid-template-columns: 1fr; gap: 16px; }
.band-navy .step3 {
  display: grid;
  grid-template-columns: 104px 1fr;
  gap: 14px;
  align-items: center;
  padding: 18px 22px;
  background: #0a3f80;
  border: 2px solid #1b5aa3;
  border-radius: 28px;
  box-shadow: 0 6px 0 #00336b;
}
.band-navy .step3::after { display: none; }
.step3-spark { width: 104px; height: 104px; margin: -12px 0; }
.step3-spark svg { width: 104px; height: 104px; }
.step3-body { display: block; }
.band-navy .step3-num {
  display: inline-grid;
  width: 30px;
  height: 30px;
  margin: 0 8px 0 0;
  vertical-align: middle;
  background: #8ee3e6;
  color: var(--color-secondary);
  font-size: 0.92rem;
}
.band-navy .step3-meta { display: inline-block; vertical-align: middle; color: #cfe0f3; font-weight: 600; }
.band-navy .step3 h3 { margin: 8px 0 4px; color: #fff; font-size: 1.35rem; }
.band-navy .step3 p { margin-bottom: 8px; color: #d6e4f4; }
.band-navy .step3-out { margin-top: 0; background: rgba(142, 227, 230, 0.14); color: #8ee3e6; }
.band-navy .workflow-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin-top: 32px;
  text-align: left;
}
.band-navy .workflow-cta .btn-primary,
.band-navy .workflow-cta .btn-primary:hover { background: #fff; color: var(--color-primary); box-shadow: 0 5px 0 #9fbbe0; }
.band-navy .workflow-cta .btn-primary:active { box-shadow: 0 0 0 #9fbbe0; }
.workflow-note { font-size: 0.92rem; color: #cfe0f3; }

.phone { width: min(300px, 78vw); margin: 0 auto; }
.phone-screen {
  overflow: hidden;
  border: 12px solid var(--color-secondary);
  border-radius: 44px;
  background: #fff;
  box-shadow: 0 10px 0 #002a57;
}
.phone-screen img { display: block; width: 100%; height: auto; }
.phone figcaption { margin-top: 18px; text-align: center; font-size: 0.86rem; color: #cfe0f3; }

/* ---- 9. WHAT YOU PRACTISE ---- */
.sit-art { width: 64px; height: 64px; }

/* ---- 10. TRUST, FAQ, CLOSER ---- */
.media-plate,
.media-plate:hover,
.media-plate:focus-visible {
  background: #fff;
  border: 2px solid var(--a-line);
  box-shadow: 0 4px 0 var(--a-line);
  transform: none;
}
.media-plate:hover { border-color: #b9e6e7; }

.faq-item { border: 2px solid var(--a-line); box-shadow: 0 4px 0 var(--a-line); }
.faq-item[open] { border-color: var(--color-accent); box-shadow: 0 4px 0 var(--color-accent); }
.faq-item.faq-todo { border: 2px dashed rgba(251, 44, 54, 0.5); }

.closer {
  background: var(--color-secondary);
  border-radius: 28px;
  box-shadow: none;
}
.closer::before { display: none; }
.closer .btn-primary,
.closer .btn-primary:hover { background: #fff; color: var(--color-primary); box-shadow: 0 5px 0 #8c9ab8; }
.closer .btn-primary:active { box-shadow: 0 0 0 #8c9ab8; }
.quote-block figcaption,
.closer-eyebrow { font-size: 0.9rem; letter-spacing: 0; text-transform: none; }

/* ---- 11. RESPONSIVE ---- */
@media (min-width: 900px) {
  .result-layout { grid-template-columns: 400px 1fr; gap: 56px; }
}
@media (min-width: 980px) {
  .how-layout { grid-template-columns: 1fr 300px; gap: 64px; }
}

/* Phones and tablets: the scene comes straight after the button, so the
   first answer is reachable without scrolling far. The hero copy's own
   wrapper steps aside (display: contents) so its children and the scene
   can be ordered as one list. */
@media (max-width: 1023px) {
  .hero-grid { gap: 0; }
  .hero-copy { display: contents; }
  .hero .badge   { order: 1; justify-self: start; }
  .hero-title    { order: 2; }
  .hero-sub      { order: 3; }
  .hero-cta      { order: 4; }
  .hero-note     { order: 5; }
  .hero-scene    { order: 6; margin: 22px 0 22px; }
  .hero-links    { order: 7; }
}
@media (max-width: 560px) {
  .scene-card { padding: 18px; }
  .scene-spark, .scene-spark svg { width: 104px; height: 104px; }
  .scene-spark { margin: -20px -12px -18px -18px; }
  .hero-cta .btn { width: 100%; }
  .band-navy .step3 { grid-template-columns: 72px 1fr; padding: 16px; }
  .step3-spark, .step3-spark svg { width: 72px; height: 72px; }
  .step3-spark { margin: -6px 0; align-self: start; }
  .gets-card { grid-template-columns: 48px 1fr; column-gap: 14px; padding: 18px; }
  .gets-card .sym-plate { width: 48px; height: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .scene-fb.is-in { animation: none; }
  .btn, .scene-opt, .quiz-option { transition: none; }
}

/* ---- FAQ fold (js/landing-faq-fold.js): folded, only the heading and
   one button show; the section shrinks to match ---- */
#faq.is-folded { padding-top: 72px; padding-bottom: 72px; }
#faq.is-folded .section-head { margin-bottom: 24px; }
.faq-toggle-row { display: flex; justify-content: center; margin: 0 0 32px; }
#faq.is-folded .faq-toggle-row { margin-bottom: 0; }
.faq-toggle {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 24px;
  font: 700 1rem/1.2 var(--font-display, 'Outfit', sans-serif);
  color: var(--color-primary, #004a99);
  background: #fff;
  border: 2px solid var(--a-line, #dbe3ee);
  border-radius: 16px;
  box-shadow: 0 4px 0 var(--a-line, #dbe3ee);
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.faq-toggle:hover { border-color: var(--color-accent, #00aab0); box-shadow: 0 4px 0 var(--color-accent, #00aab0); }
.faq-toggle:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--a-line, #dbe3ee); }
.faq-toggle:focus-visible { outline: 3px solid var(--color-accent, #00aab0); outline-offset: 3px; }
.faq-toggle[hidden] { display: none; }
.faq-toggle[aria-expanded="true"] .faq-toggle-open,
.faq-toggle[aria-expanded="false"] .faq-toggle-close { display: none; }
.faq-toggle-chev { transform: rotate(90deg); transition: transform .2s ease; }
.faq-toggle[aria-expanded="true"] .faq-toggle-chev { transform: rotate(-90deg); }
.faq-fold[hidden] { display: none; }

/* ---- Science advisor card (#science, in the trust strip): readable at a
   glance instead of a small grey line. Wording is fixed: keep the verb at
   «συμβάλλει» or weaker (see the note above #media in index.html). ---- */
.trust-lines { gap: 18px; }
.sci-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 22px;
  width: 100%;
  max-width: 860px;
  margin: 8px auto 6px;
  padding: 26px 28px;
  text-align: left;
  background: #fff;
  border: 2px solid var(--a-line, #dbe3ee);
  border-radius: 24px;
  box-shadow: 0 6px 0 var(--a-line, #dbe3ee);
}
.sci-mark {
  display: grid; place-items: center;
  width: 64px; height: 64px; border-radius: 18px;
  background: var(--color-accent, #00aab0);
  box-shadow: 0 5px 0 #008286;
  color: #fff;
}
.sci-mark .sym { width: 30px; height: 30px; }
.sci-body p { margin: 0; }
.sci-lead {
  font: 700 1.2rem/1.35 var(--font-display, 'Outfit', sans-serif);
  color: var(--color-text, #0b1020);
  margin-bottom: 10px !important;
}
.sci-person { display: flex; flex-direction: column; gap: 2px; }
.sci-role {
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-accent-text, #007a7e);
}
.sci-name { font: 800 1.15rem/1.3 var(--font-display, 'Outfit', sans-serif); color: var(--color-primary, #004a99); }
.sci-title { font-size: 1rem; line-height: 1.5; color: #334155; }
.sci-link {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 20px;
  border-radius: 14px;
  font: 700 1rem/1.2 var(--font-display, 'Outfit', sans-serif);
  color: #fff; background: var(--color-primary, #004a99);
  box-shadow: 0 4px 0 #00356e;
  text-decoration: none; white-space: nowrap;
  transition: transform .12s ease, box-shadow .12s ease;
}
.sci-link:hover { color: #fff; }
.sci-link:active { transform: translateY(3px); box-shadow: 0 1px 0 #00356e; }
.sci-link:focus-visible { outline: 3px solid var(--color-accent, #00aab0); outline-offset: 3px; }
@media (max-width: 759px) {
  .sci-card { grid-template-columns: 1fr; gap: 16px; padding: 22px 20px; text-align: left; }
  .sci-mark { width: 52px; height: 52px; border-radius: 15px; }
  .sci-lead { font-size: 1.1rem; }
  .sci-link { justify-content: center; }
}
[data-theme="dark"] .sci-card { background: var(--color-surface, #111a2e); }
[data-theme="dark"] .sci-lead { color: #f1f5f9; }
[data-theme="dark"] .sci-name { color: #8fb8ff; }
[data-theme="dark"] .sci-title { color: #cbd5e1; }