/* ============================================================
   BRILLIANTICS — LANDING PAGE (light editorial system)
   Soft skills development platform
   Zero-build. Vanilla CSS only.
   ============================================================ */

/* ---- 1. DESIGN TOKENS ---- */
:root {
  /* Brand */
  --color-primary: #004a99;
  --color-primary-deep: #003a78;
  --color-accent: #00aab0;
  /* The teal is a GRAPHICS colour: as 11px uppercase type on white it measures
     2.85:1, and 2.46:1 on the tinted section grounds. Everything that sets it
     as TEXT uses this darker sibling instead. (launch audit 2026-08-23) */
  --color-accent-text: #00727a;
  --color-secondary: #0b1020;
  --color-blue-bright: #2563ff;

  /* Surfaces */
  --color-light-base: #f8fafc;
  --color-light-surface: #ffffff;

  /* Semantic accents */
  --color-red: #fb2c36;
  --color-red-text: #c81e26;   /* fb2c36 is 3.35:1 on its own tinted pill */
  --color-green: #79c000;

  /* Text */
  --color-text: #0b1020;
  --color-text-muted: #4a5568;
  /* 3.06:1 on white — the footer, the media plates, the team roles and the
     stat sources all read through this one token. (launch audit 2026-08-23) */
  --color-text-dim: #5d6675;
  --color-text-invert: #f8fafc;

  /* Gradients */
  --gradient-text: linear-gradient(100deg, #004a99 0%, #00aab0 55%, #2563ff 100%);
  --gradient-brand: linear-gradient(135deg, #004a99 0%, #00aab0 100%);

  /* Glass */
  --glass-bg: rgba(255, 255, 255, 0.7);
  --glass-border: 1px solid rgba(0, 74, 153, 0.05);
  --glass-blur: blur(24px);

  /* Typography */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Outfit', 'Inter', sans-serif;

  /* Layout */
  --container-max: 1200px;
  --container-narrow: 800px;
  --container-px: 20px;
  --section-py: 88px;

  /* Radii — large, per the live system */
  --radius-sm: 0.9rem;
  --radius-md: 1.6rem;
  --radius-lg: 2.5rem;
  --radius-xl: 3rem;
  --radius-2xl: 4rem;
  --radius-full: 9999px;

  /* Shadows / glow */
  --shadow-sm: 0 4px 16px -6px rgba(11, 16, 32, 0.10);
  --shadow-md: 0 12px 30px -12px rgba(11, 16, 32, 0.14);
  --shadow-glow: 0 20px 40px -15px rgba(0, 74, 153, 0.30);
  --shadow-glow-lg: 0 32px 70px -22px rgba(0, 74, 153, 0.38);

  /* Motion */
  --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

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

html {
  scroll-behavior: smooth;
  font-size: 16px;
  scroll-padding-top: 90px; /* sticky navbar offset for #anchors */
}

body {
  font-family: var(--font-sans);
  background: var(--color-light-base);
  color: var(--color-text);
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { cursor: pointer; border: none; background: none; font-family: inherit; color: inherit; }
h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.15; font-weight: 700; letter-spacing: -0.02em; }
ul, ol { list-style: none; }

:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--color-primary);
  color: #fff;
  padding: 12px 20px;
  border-radius: 0 0 var(--radius-sm) 0;
  font-weight: 600;
}
.skip-link:focus { left: 0; }

/* ---- 3. GRAIN OVERLAY ---- */
.grain {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.22;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
}

/* ---- 4. LAYOUT PRIMITIVES ---- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-px);
  position: relative;
  z-index: 2;
}
.container-narrow { max-width: var(--container-narrow); }

.section { padding: var(--section-py) 0; position: relative; }
.section-alt { background: var(--color-light-surface); }

.section-head { max-width: 720px; margin: 0 auto 48px; text-align: center; }

.eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-accent-text);
  margin-bottom: 14px;
}
.eyebrow-light { color: #5ad6da; }

.section-title {
  font-size: clamp(1.9rem, 4.6vw, 3.1rem);
  margin-bottom: 16px;
}
.section-title-light { color: var(--color-text-invert); }

.section-sub {
  font-size: clamp(1rem, 1.6vw, 1.12rem);
  color: var(--color-text-muted);
  font-weight: 300;
}
.section-sub-light { color: rgba(248, 250, 252, 0.72); }

/* ---- 5. UTILITIES ---- */
.glass {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: var(--glass-border);
  border-radius: var(--radius-lg);
}

.grad-text,
.grad-italic {
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.grad-italic { font-style: italic; }

/* ---- 6. BUTTONS ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-weight: 600;
  border-radius: var(--radius-full);
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition);
  white-space: nowrap;
  text-align: center;
}

.btn-primary {
  background: var(--gradient-brand);
  color: #fff;
  box-shadow: var(--shadow-glow);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-glow-lg);
}

.btn-ghost {
  background: rgba(255, 255, 255, 0.6);
  color: var(--color-primary);
  border: 1px solid rgba(0, 74, 153, 0.14);
}
.btn-ghost:hover {
  background: #fff;
  border-color: rgba(0, 74, 153, 0.3);
  transform: translateY(-2px);
}

.btn-sm { padding: 10px 20px; font-size: 0.88rem; }
.btn-lg { padding: 15px 32px; font-size: 1rem; }
.btn-block { display: flex; width: 100%; padding: 15px 24px; margin-top: 20px; }

/* ---- 7. NAVBAR ---- */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
  transition: background var(--transition), box-shadow var(--transition), border-color var(--transition);
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-bottom-color: rgba(0, 74, 153, 0.07);
  box-shadow: var(--shadow-sm);
}

/* The BAR is allowed to be wider than the CONTENT. --container-max (1200px)
   is a measure for reading; a navigation row is not read, it is scanned, and on
   a 1920px screen capping it at 1200 left 720px of empty margin while the row
   itself had 53px of slack. The sections below keep their 1200px measure. */
.nav-container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 14px var(--container-px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.nav-logo { display: inline-flex; align-items: center; gap: 10px; }
/* The identity never shrinks. .nav-logo is a flex item in a row that is
   deliberately tight (see §30 in landing-fx.css), and without this the mark is
   the first thing flexbox compresses — at 1440px it was being squeezed to ZERO
   width, so the wordmark stayed and the symbol silently vanished. A logo is not
   a compressible element; if the row runs out of room, something else gives. */
.nav-logo, .footer-brand .nav-logo { flex: 0 0 auto; }
.logo-mark { display: grid; place-items: center; flex: 0 0 auto; }
.logo-mark svg { flex: 0 0 auto; }
.logo-wordmark { flex: 0 0 auto; }
.logo-wordmark { display: flex; flex-direction: column; line-height: 1.05; }
.logo-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.22rem;
  letter-spacing: -0.02em;
  color: var(--color-secondary);
}

/* 18px, not 22px. css/landing-fx.css §30 already tightens this to 16px below
   1280 because the row was measured to stop fitting; above 1280 it kept the
   looser 22px and a signed-in visitor with a long Greek name still overflowed —
   it just did not LOOK like it, because flexbox was paying the difference by
   crushing the logo mark (see .nav-logo below). Four pixels per gap across six
   links is 24px back, and at this size the change is invisible. */
.nav-links { display: flex; align-items: center; gap: 18px; }

.nav-link {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-text-muted);
  transition: color var(--transition);
  position: relative;
}
.nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 0;
  height: 2px;
  background: var(--gradient-brand);
  border-radius: 2px;
  transition: width var(--transition);
}
.nav-link:hover { color: var(--color-primary); }
.nav-link:hover::after { width: 100%; }

.nav-divider {
  width: 1px;
  height: 20px;
  background: rgba(0, 74, 153, 0.14);
}
.nav-signin { font-weight: 600; color: var(--color-primary); }

.lang-toggle {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 7px 12px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(0, 74, 153, 0.16);
  color: var(--color-primary);
  background: rgba(255, 255, 255, 0.6);
  transition: background var(--transition), border-color var(--transition);
}
.lang-toggle:hover { background: #fff; border-color: var(--color-accent); }

.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
}
.nav-hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  border-radius: 2px;
  background: var(--color-secondary);
  transition: transform var(--transition), opacity var(--transition);
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---- 8. HERO ---- */
.hero {
  position: relative;
  padding: clamp(48px, 8vw, 96px) 0 clamp(64px, 9vw, 110px);
  overflow: hidden;
}

.hero-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.5;
}
.orb-1 { width: 420px; height: 420px; top: -120px; left: -100px; background: rgba(0, 74, 153, 0.22); }
.orb-2 { width: 380px; height: 380px; top: 40px; right: -110px; background: rgba(0, 170, 176, 0.20); }
.orb-3 { width: 320px; height: 320px; bottom: -140px; left: 40%; background: rgba(37, 99, 255, 0.14); }

.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 56px;
  align-items: center;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 16px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: var(--glass-border);
  box-shadow: var(--shadow-sm);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-primary);
  margin-bottom: 22px;
}
.badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-accent);
  animation: pulse 2.4s ease-in-out infinite;
}

.hero-title {
  font-size: clamp(2.4rem, 6.4vw, 4.4rem);
  font-weight: 800;
  margin-bottom: 22px;
}
.hero-title span { display: block; }

.hero-sub {
  font-size: clamp(1rem, 1.7vw, 1.16rem);
  color: var(--color-text-muted);
  font-weight: 300;
  max-width: 560px;
  margin-bottom: 30px;
}

.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 18px; }

.hero-note {
  font-size: 0.84rem;
  color: var(--color-text-dim);
  font-weight: 500;
}

/* Hero visual — orbital rings + floating card */
.hero-visual {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 380px;
}

.orbit {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(0, 74, 153, 0.14);
}
.orbit-1 { width: 300px; height: 300px; animation: spin 26s linear infinite; }
.orbit-2 { width: 400px; height: 400px; border-color: rgba(0, 170, 176, 0.16); animation: spin 40s linear infinite reverse; }
.orbit-3 { width: 500px; height: 500px; border-color: rgba(0, 74, 153, 0.07); animation: spin 60s linear infinite; }

.orbit-dot {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--gradient-brand);
  box-shadow: 0 0 18px rgba(0, 170, 176, 0.7);
}
.dot-1 { top: calc(50% - 150px); left: 50%; animation: orbit-a 26s linear infinite; }
.dot-2 { top: calc(50% - 200px); left: 50%; animation: orbit-b 40s linear infinite; }

.diag-card {
  position: relative;
  z-index: 3;
  width: min(320px, 88%);
  padding: 22px;
  box-shadow: var(--shadow-glow-lg);
}
.float { animation: float 6s ease-in-out infinite; }

.diag-card-head { display: flex; align-items: center; gap: 9px; margin-bottom: 18px; }
.diag-pulse {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-green);
  box-shadow: 0 0 0 0 rgba(121, 192, 0, 0.6);
  animation: pulse-ring 2s ease-out infinite;
}
.diag-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.94rem;
  color: var(--color-secondary);
}

.diag-chips { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 15px;
  border-radius: var(--radius-md);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.chip-label { color: var(--color-text-muted); }
.chip-value { font-size: 0.92rem; letter-spacing: 0; }
.chip-accent { background: rgba(0, 170, 176, 0.10); }
.chip-accent .chip-value { color: var(--color-accent-text); }
.chip-primary { background: rgba(0, 74, 153, 0.08); }
.chip-primary .chip-value { color: var(--color-primary); }

.diag-spark { height: 54px; margin-bottom: 12px; }
.diag-spark svg { width: 100%; height: 100%; }

.diag-foot {
  font-size: 0.72rem;
  color: var(--color-text-dim);
  font-weight: 500;
  text-align: center;
}

/* ---- 9. PROBLEM ---- */
.stat-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-bottom: 72px;
}

.stat-card {
  padding: 32px 26px;
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
}
.stat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-glow); }

.stat-num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 6vw, 3.6rem);
  font-weight: 800;
  line-height: 1;
  margin-bottom: 14px;
}
.stat-text { color: var(--color-text-muted); font-size: 0.98rem; font-weight: 300; margin-bottom: 14px; }
.stat-src {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-dim);
}

.missing-title {
  font-size: clamp(1.5rem, 3.4vw, 2.2rem);
  text-align: center;
  margin-bottom: 32px;
}

.missing-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 40px;
}

.missing-card {
  position: relative;
  padding: 26px 24px;
  border-radius: var(--radius-md);
  background: var(--color-light-surface);
  border: 1px solid rgba(251, 44, 54, 0.14);
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.missing-card:hover {
  transform: translateY(-4px);
  border-color: rgba(251, 44, 54, 0.35);
  box-shadow: 0 18px 36px -18px rgba(251, 44, 54, 0.35);
}
.missing-badge {
  display: inline-block;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: var(--color-red-text);
  background: rgba(251, 44, 54, 0.09);
  padding: 5px 11px;
  border-radius: var(--radius-full);
  margin-bottom: 14px;
}
.missing-card h4 { font-size: 1.1rem; margin-bottom: 8px; }
.missing-card p { font-size: 0.92rem; color: var(--color-text-muted); font-weight: 300; }

.fills-gap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 26px 30px;
  text-align: center;
  box-shadow: var(--shadow-glow);
  border-radius: var(--radius-xl);
}
.fills-gap-mark {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(121, 192, 0, 0.12);
  color: var(--color-green);
}
.fills-gap p {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2.6vw, 1.6rem);
  font-weight: 700;
  color: var(--color-secondary);
}

/* ---- 10. VISION ---- */
.vision-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-bottom: 56px;
}

.vision-card {
  padding: 32px 28px;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
}
.vision-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-glow); }

.vision-icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: var(--radius-md);
  background: rgba(0, 74, 153, 0.08);
  font-size: 1.6rem;
  line-height: 1;
  margin-bottom: 18px;
  box-shadow: var(--shadow-sm);
}
.vision-card h3 { font-size: 1.22rem; margin-bottom: 10px; }
.vision-card p { color: var(--color-text-muted); font-size: 0.96rem; font-weight: 300; }

.quote-block {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
  padding: 40px 28px;
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, rgba(0, 74, 153, 0.05), rgba(0, 170, 176, 0.05));
  border: var(--glass-border);
}
.quote-block blockquote {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.9vw, 1.75rem);
  font-weight: 500;
  font-style: italic;
  line-height: 1.4;
  color: var(--color-secondary);
  margin-bottom: 16px;
}
.quote-block figcaption {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-accent-text);
}

/* ---- 11. DIAGNOSTIC ---- */
.diagnostic-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

.scenario, .bars { padding: 30px 26px; box-shadow: var(--shadow-sm); }

.scenario-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.scenario-tag {
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  background: var(--gradient-brand);
  padding: 6px 13px;
  border-radius: var(--radius-full);
}
.scenario-step { font-size: 0.76rem; color: var(--color-text-dim); font-weight: 600; }

.scenario-text {
  font-family: var(--font-display);
  font-size: clamp(1.02rem, 2.1vw, 1.2rem);
  font-weight: 500;
  line-height: 1.45;
  color: var(--color-secondary);
  margin-bottom: 22px;
}

.scenario-options { display: flex; flex-direction: column; gap: 11px; }

.scenario-option {
  text-align: left;
  padding: 15px 18px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(0, 74, 153, 0.10);
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--color-text);
  transition: border-color var(--transition), background var(--transition), transform var(--transition);
}
.scenario-option:hover {
  border-color: var(--color-accent);
  background: #fff;
  transform: translateX(3px);
}
.scenario-option.selected {
  border-color: var(--color-accent);
  background: rgba(0, 170, 176, 0.08);
  box-shadow: inset 3px 0 0 var(--color-accent);
}

.scenario-feedback {
  margin-top: 18px;
  padding: 16px 18px;
  border-radius: var(--radius-md);
  background: rgba(0, 74, 153, 0.05);
  border-left: 3px solid var(--color-primary);
}
.scenario-feedback[hidden] { display: none; }
.scenario-feedback-label {
  display: block;
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 6px;
}
.scenario-feedback p { font-size: 0.9rem; color: var(--color-text-muted); font-weight: 300; }

.bars-title { font-size: 1.1rem; margin-bottom: 22px; }
.bar-row { margin-bottom: 18px; }
.bar-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-text-muted);
}
.bar-value { font-family: var(--font-display); font-size: 1rem; color: var(--color-secondary); }

.bar-track {
  height: 9px;
  border-radius: var(--radius-full);
  background: rgba(0, 74, 153, 0.08);
  overflow: hidden;
}
.bar-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: var(--radius-full);
  background: var(--gradient-brand);
  transition: width 1.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.bar-fill.bar-weak { background: linear-gradient(135deg, #fb2c36, #ff7a5c); }

.bars-note {
  font-size: 0.82rem;
  color: var(--color-text-dim);
  font-weight: 400;
  font-style: italic;
  margin-top: 20px;
}

/* ---- 12. SCIENCE ---- */
.science-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: center;
}
.science-copy { text-align: center; }
.science-title, .science-sub { margin-left: auto; margin-right: auto; }
.science-sub { max-width: 560px; margin-bottom: 30px; }

.science-list { display: grid; gap: 16px; text-align: left; max-width: 520px; margin: 0 auto; }
.science-list li {
  padding: 18px 20px;
  border-radius: var(--radius-md);
  background: var(--color-light-base);
  border: var(--glass-border);
}
.science-list strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--color-primary);
  margin-bottom: 4px;
}
.science-list span { font-size: 0.9rem; color: var(--color-text-muted); font-weight: 300; }

.science-visual { display: grid; place-items: center; }
.brain-orbital {
  position: relative;
  width: min(340px, 84vw);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}
.brain-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(0, 74, 153, 0.16);
}
.ring-a { inset: 8%; animation: spin 22s linear infinite; border-style: dashed; }
.ring-b { inset: 0; border-color: rgba(0, 170, 176, 0.20); animation: spin 34s linear infinite reverse; }
.ring-c { inset: 20%; border-color: rgba(37, 99, 255, 0.14); animation: spin 16s linear infinite; }

.brain-core {
  display: grid;
  place-items: center;
  width: 42%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: var(--glass-border);
  box-shadow: var(--shadow-glow);
  color: var(--color-primary);
}

.brain-node {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--gradient-brand);
  box-shadow: 0 0 16px rgba(0, 170, 176, 0.6);
}
.n1 { top: 6%; left: 50%; animation: orbit-c 22s linear infinite; }
.n2 { top: 50%; left: 2%; animation: float 5s ease-in-out infinite; }
.n3 { bottom: 12%; right: 8%; animation: float 7s ease-in-out infinite reverse; }

/* ---- 13. WORKFLOW ---- */
.workflow {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  max-width: 780px;
  margin: 0 auto;
  counter-reset: step;
}
.workflow-step {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 22px 24px;
  border-radius: var(--radius-md);
  background: var(--color-light-surface);
  border: var(--glass-border);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
}
.workflow-step:hover { transform: translateX(5px); box-shadow: var(--shadow-glow); }
.workflow-num {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--gradient-brand);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  box-shadow: var(--shadow-glow);
}
.workflow-body h3 { font-size: 1.08rem; margin-bottom: 4px; }
.workflow-body p { font-size: 0.92rem; color: var(--color-text-muted); font-weight: 300; }

.workflow-cta { text-align: center; margin-top: 40px; }

/* ---- 14. MEDIA MARQUEE ---- */
.marquee {
  position: relative;
  overflow: hidden;
  padding: 12px 0;
  margin-bottom: 28px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee-track {
  display: flex;
  align-items: center;
  gap: 56px;
  width: max-content;
  animation: marquee 34s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }

.media-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 26px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.5);
  border: var(--glass-border);
  white-space: nowrap;
  transition: color var(--transition), background var(--transition), transform var(--transition);
}
.media-logo:hover { background: #fff; transform: translateY(-3px); }
.media-name {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 2.4vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-text-dim);
  transition: color var(--transition);
}
.media-logo:hover .media-name { color: var(--color-primary); }
.media-sub {
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-dim);
  opacity: 0.7;
}

/* Emoji accents (mirroring the live site) */
.diag-emoji { display: block; font-size: 2.2rem; text-align: center; margin-bottom: 10px; line-height: 1; }
.missing-emoji { display: block; font-size: 1.9rem; line-height: 1; margin-bottom: 12px; }
.brain-emoji { font-size: clamp(2.4rem, 7vw, 3rem); line-height: 1; }

.media-note {
  text-align: center;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-text-muted);
}

/* ---- 15. TEAM ---- */
/* auto-fit, not a per-breakpoint column count: the team is three people now
   (it was five), and a hardcoded `repeat(5, 1fr)` left three cards squeezed
   into the left half of the row with two empty columns beside them. This
   tracks whatever the card count is, and the max-width stops three cards
   stretching to 450px each on a wide desktop. */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 18px;
  max-width: 900px;
  margin-inline: auto;
}
.team-card {
  padding: 28px 20px;
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
}
.team-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-glow); }

.team-initials {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--gradient-brand);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.28rem;
  letter-spacing: 0.02em;
  box-shadow: var(--shadow-glow);
}
.team-name { font-size: 1.02rem; margin-bottom: 6px; }
.team-role {
  display: inline-block;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--color-accent-text);
  background: rgba(0, 170, 176, 0.10);
  padding: 4px 11px;
  border-radius: var(--radius-full);
  margin-bottom: 8px;
}
.team-role-full { font-size: 0.8rem; color: var(--color-text-dim); font-weight: 300; }

/* ---- 16. EVOLUTION (dark) ---- */
.section-dark {
  background: var(--color-secondary);
  color: var(--color-text-invert);
  border-radius: var(--radius-2xl);
  margin: 0 var(--container-px);
  overflow: hidden;
  position: relative;
}
.section-dark::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 15% 10%, rgba(0, 74, 153, 0.45), transparent 55%),
    radial-gradient(ellipse at 85% 85%, rgba(0, 170, 176, 0.28), transparent 55%);
  pointer-events: none;
}

.evolution-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-bottom: 48px;
}
.evolution-card {
  padding: 30px 26px;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.09);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform var(--transition), background var(--transition), border-color var(--transition);
}
.evolution-card:hover {
  transform: translateY(-5px);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(0, 170, 176, 0.4);
}
.evolution-index {
  display: block;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: #5ad6da;
  margin-bottom: 12px;
}
.evolution-card h3 { font-size: 1.3rem; margin-bottom: 10px; color: var(--color-text-invert); }
.evolution-card p { font-size: 0.94rem; color: rgba(248, 250, 252, 0.68); font-weight: 300; }

.evolution-close {
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3.6vw, 2.3rem);
  font-weight: 700;
  background: linear-gradient(100deg, #5ad6da 0%, #7aa5ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ---- 17. FAQ ---- */
.faq-list { display: grid; gap: 12px; }

.faq-item {
  border-radius: var(--radius-md);
  background: var(--color-light-surface);
  border: var(--glass-border);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow var(--transition);
}
.faq-item[open] { box-shadow: var(--shadow-glow); }

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--color-secondary);
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }

.faq-icon {
  position: relative;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}
.faq-icon::before,
.faq-icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: var(--color-primary);
  transform: translateY(-50%);
  transition: transform var(--transition);
}
.faq-icon::after { transform: translateY(-50%) rotate(90deg); }
.faq-item[open] .faq-icon::after { transform: translateY(-50%) rotate(0deg); }

.faq-item p {
  padding: 0 24px 22px;
  font-size: 0.94rem;
  color: var(--color-text-muted);
  font-weight: 300;
}

/* ---- 18. FOOTER ---- */
.footer {
  background: var(--color-light-surface);
  border-top: 1px solid rgba(0, 74, 153, 0.07);
  padding: 56px 0 28px;
  margin-top: var(--section-py);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  margin-bottom: 40px;
}
.footer-brand .nav-logo { margin-bottom: 14px; }
.footer-tagline {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  font-weight: 300;
  max-width: 280px;
}

.footer-col { display: flex; flex-direction: column; gap: 10px; }
.footer-col h4 {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-dim);
  margin-bottom: 4px;
}
.footer-col a {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  transition: color var(--transition);
  width: fit-content;
}
.footer-col a:hover { color: var(--color-primary); }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  padding-top: 22px;
  border-top: 1px solid rgba(0, 74, 153, 0.07);
  font-size: 0.8rem;
  color: var(--color-text-dim);
}

/* ---- 19. SCROLL REVEAL ---- */
[data-animate] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
  will-change: opacity, transform;
}
[data-animate].in-view {
  opacity: 1;
  transform: translateY(0);
  will-change: auto;
}

/* ---- 20. KEYFRAMES ---- */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}

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

@keyframes pulse-ring {
  0% { box-shadow: 0 0 0 0 rgba(121, 192, 0, 0.55); }
  70% { box-shadow: 0 0 0 10px rgba(121, 192, 0, 0); }
  100% { box-shadow: 0 0 0 0 rgba(121, 192, 0, 0); }
}

@keyframes orbit-a {
  from { transform: rotate(0deg) translateY(-150px) rotate(0deg); }
  to { transform: rotate(360deg) translateY(-150px) rotate(-360deg); }
}
@keyframes orbit-b {
  from { transform: rotate(0deg) translateY(-200px) rotate(0deg); }
  to { transform: rotate(-360deg) translateY(-200px) rotate(360deg); }
}
@keyframes orbit-c {
  from { transform: rotate(0deg) translateY(-130px) rotate(0deg); }
  to { transform: rotate(360deg) translateY(-130px) rotate(-360deg); }
}

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---- 21. RESPONSIVE ---- */

/* >= 480px — small phones up */
@media (min-width: 480px) {
  :root { --container-px: 24px; }
  /* Two across on phones and small tablets; the third statistic joins them on
     a real screen. Three at 480px would put each ring under 130px and the
     source line on five lines. */
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .missing-grid { grid-template-columns: repeat(2, 1fr); }
}

/* >= 768px — tablet */
@media (min-width: 768px) {
  :root { --section-py: 104px; }
  .stat-grid { grid-template-columns: repeat(3, 1fr); }
  .section-head { margin-bottom: 56px; }
  .stat-grid { grid-template-columns: repeat(3, 1fr); }
  .vision-grid { grid-template-columns: repeat(3, 1fr); }
  .evolution-grid { grid-template-columns: repeat(3, 1fr); }
  .diagnostic-grid { grid-template-columns: 1fr 1fr; }
  .missing-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  /* Five columns since the content hub got its own: brand, Navigation, Learn,
     Get started, Contact. */
  .footer-grid { grid-template-columns: 1.5fr 1fr 1.2fr 1fr 1.2fr; }
  .scenario, .bars { padding: 34px 32px; }
}

/* The nav bar's own wider ceilings — see .nav-container. */
@media (min-width: 1280px) { .nav-container { max-width: 1280px; } }
@media (min-width: 1440px) { .nav-container { max-width: 1360px; } }

/* >= 1024px — desktop */
@media (min-width: 1024px) {
  :root { --section-py: 120px; --container-px: 32px; }
  .hero-grid { grid-template-columns: 1.05fr 0.95fr; gap: 40px; }
  .hero-copy { text-align: left; }
  .missing-grid { grid-template-columns: repeat(4, 1fr); }
  .science-grid { grid-template-columns: 1fr 1fr; gap: 64px; }
  .science-copy { text-align: left; }
  .science-title, .science-sub { margin-left: 0; }
  .science-list { margin-left: 0; }
  .section-dark { margin: 0 32px; }
}

/* < 900px — mobile nav */
@media (max-width: 899px) {
  .nav-hamburger { display: flex; }

  .nav-links {
    position: absolute;
    top: 100%;
    left: var(--container-px);
    right: var(--container-px);
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    padding: 22px;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: var(--glass-border);
    box-shadow: var(--shadow-md);
    /* The panel hangs off .nav, which is position:sticky;top:0 — so it travels
       with the bar and anything past the viewport bottom could never be
       scrolled into view. On a landscape phone that is the Start Free CTA. */
    max-height: calc(100vh - 84px);
    max-height: calc(100dvh - 84px);
    overflow-y: auto;
    overscroll-behavior: contain;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
  }
  .nav-links.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .nav-link { font-size: 1rem; padding: 4px 0; }
  .nav-link::after { display: none; }
  .nav-divider { width: 100%; height: 1px; }
  .lang-toggle { width: fit-content; }
  .btn-sm { padding: 13px 20px; font-size: 0.95rem; }
}

/* Narrow phones */
@media (max-width: 479px) {
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn { width: 100%; }
  .fills-gap { flex-direction: column; gap: 12px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .section-dark { border-radius: var(--radius-lg); margin: 0 16px; }
  .marquee-track { gap: 34px; }
}

/* ---- 22. REDUCED MOTION ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  /* Reveal content immediately rather than leaving it invisible. */
  [data-animate] { opacity: 1; transform: none; }

  /* Bars still need their final width without the sweep. */
  .bar-fill { transition: none; }
}

/* ---- 23. SKILLS HUB — the bridge from the landing page into the content hub
   The radar shows six dimensions; the platform measures fifteen, and each one
   has a public page. This block is the internal link that carries the home
   page's authority into those pages, so it lives inside the section that is
   already talking about what gets measured rather than being dropped in the
   footer. Fifteen links, one row of pills, one way out.
   ------------------------------------------------------------------------- */
.skills-hub {
  margin-top: 44px;
  padding: 30px 32px 32px;
  background: var(--color-light-surface);
  border: 1px solid rgba(0, 74, 153, 0.10);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.skills-hub > h3 {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.6vw, 1.4rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-text);
  margin-bottom: 8px;
}

.skills-hub > p {
  font-size: 0.98rem;
  color: var(--color-text-muted);
  max-width: 62ch;
  margin-bottom: 20px;
}

.skills-hub-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  margin: 0 0 24px;
}

.skills-hub-list a {
  display: inline-flex;
  align-items: center;
  padding: 8px 15px;
  border-radius: var(--radius-full);
  background: rgba(0, 170, 176, 0.08);
  border: 1px solid rgba(0, 170, 176, 0.20);
  color: var(--color-accent-text);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition: background var(--transition), border-color var(--transition), transform var(--transition);
}

.skills-hub-list a:hover,
.skills-hub-list a:focus-visible {
  background: rgba(0, 170, 176, 0.16);
  border-color: var(--color-accent);
  transform: translateY(-1px);
}

/* The Greek label is long. Without these three lines the button is 375px wide
   inside a 350px column and the whole page gains a horizontal scrollbar on a
   phone — which the a11y gate counts as an overflow failure, and a reader
   experiences as a page that slides sideways under the thumb. */
.skills-hub > .btn {
  max-width: 100%;
  white-space: normal;
  text-align: center;
}

@media (max-width: 640px) {
  .skills-hub { padding: 24px 20px 26px; margin-top: 32px; }
  .skills-hub-list { gap: 7px; }
  .skills-hub-list a { padding: 7px 13px; font-size: 0.86rem; }
}

/* The second half of the skills-hub block: the guides, the glossary and the
   science page, as three named destinations rather than three bare links. */
.skills-hub-more {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
  margin-top: 26px;
  padding-top: 24px;
  border-top: 1px solid rgba(0, 74, 153, 0.10);
}

.skills-hub-more a {
  display: block;
  padding: 16px 18px;
  border-radius: var(--radius-sm);
  background: var(--color-light-base);
  border: 1px solid transparent;
  text-decoration: none;
  transition: border-color var(--transition), background var(--transition), transform var(--transition);
}

.skills-hub-more a:hover,
.skills-hub-more a:focus-visible {
  background: var(--color-light-surface);
  border-color: rgba(0, 74, 153, 0.16);
  transform: translateY(-1px);
}

.skills-hub-more strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 4px;
}

.skills-hub-more span {
  display: block;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--color-text-muted);
}