/* =========================================================
   STEM City Workforce University (SCWU)
   Master Stylesheet — v1.1
   ========================================================= */

/* ---- Google Fonts ---- */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');

/* ---- CSS Variables ---- */
:root {
  /* ── SURFACE LADDER ────────────────────────────────────────
     Three roles, three values. They must stay distinct.

     At the time of the readability audit all three of these — and
     --card-bg below — held #26408d. The nav bar, section panels and
     every card were the same colour, so nothing looked raised, nothing
     looked recessed, and the page read as one flat sheet. That is the
     "colours and overlays" complaint: not a contrast failure, a loss
     of structure.

     Values restored to the ones the design punch list records.
     --navy-deep stays #000000 as requested. */
  --navy-deep:    #000000;   /* page background        */
  --navy-mid:     #142050;   /* chrome: nav, headers   */
  --navy-light:   #26408d;   /* lifted accent panels   */
  --gold:         #f15a2a;
  --gold-light:   #f5956e;
  --gold-dark:    #c04618;
  --blue-accent:  #B0BEC5;
  --teal:         #d1d3d4;
  --white:        #FFFFFF;
  --off-white:    #F0F4F8;
  --gray-light:   #B0BEC5;
  /* Was #607080, which measured 1.88:1 on a card — unreadable, and the
     single worst text failure found. This clears 4.5:1 on the card and
     8.18:1 on the page while staying visibly quieter than --gray-light. */
  --gray-mid:     #95A3B4;
  /* Card sits between chrome and accent. At #26408d it was too light to
     carry a second text tier: "muted" and "body" both landed near 5:1 and
     looked identical. At #1c2f70 body reads 6.52:1 and muted 4.84:1 — a
     hierarchy you can actually see. */
  --card-bg:      #1c2f70;
  /* 0.18 measured 1.18:1 against the page — no visible edge at all.
     0.65 reaches 3.06:1, so the card reads as a card without needing the
     fill to change. */
  --card-border:  rgba(241,90,42,0.65);
  /* Boundary of an interactive control. WCAG 1.4.11 wants 3:1; white at
     0.35 over #000000 is the minimum that reaches it. Use this token for
     inputs, tabs and outlined buttons rather than another ad-hoc rgba. */
  --border-control: rgba(255,255,255,0.35);
  --font-head:    'Bebas Neue', 'Segoe UI', Arial, sans-serif;
  --font-body:    'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --radius:       12px;
  --radius-sm:    6px;
  --shadow:       0 4px 24px rgba(0,0,0,0.35);
  --shadow-gold:  0 0 28px rgba(241,90,42,0.22);
  --transition:   0.25s ease;
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 17px; }
body {
  font-family: var(--font-body);
  background: var(--navy-deep);
  color: var(--white);
  line-height: 1.65;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }

/* ---- Typography ----------------------------------------------------
   --font-head is Bebas Neue, as requested on the punch list.

   Two things about that face that the CSS has to account for, or it
   will look wrong and read worse than the font it replaced:

   1. IT HAS NO LOWERCASE. Bebas Neue ships capitals only; lowercase
      codepoints render as capitals. Every heading using it becomes
      all-caps whether or not the markup says so. All-caps removes
      word-shape, which is the cue people use to scan, and it is
      measurably slower to read past about five words.

   2. IT IS CONDENSED AND HAS ONE WEIGHT. font-weight: 800 does
      nothing except invite the browser to synthesise a fake bold,
      which smears the stems. Weights are set to 400 below.

   So it is applied where a display face earns its keep — h1 and h2,
   which are short and large — and h3 is left in the body face. h3 is
   the card title and section running head; it is often a full
   sentence, and it is the size where all-caps starts to hurt.

   To put Bebas on h3 as well, add h3 to the first rule. To take it
   off entirely, set --font-head back to the body stack. */
h1, h2 { font-family: var(--font-head); letter-spacing: 0.02em; }
h3     { font-family: var(--font-body); }
h1 { font-size: clamp(2.1rem, 5vw, 3.8rem); font-weight: 400; line-height: 1.05; }
h2 { font-size: clamp(1.7rem, 3.5vw, 2.7rem); font-weight: 400; line-height: 1.1; }
h3 { font-size: clamp(1.15rem, 2vw, 1.5rem); font-weight: 600; line-height: 1.3; }
h4 { font-size: 1.1rem; font-weight: 600; }
p  { color: var(--gray-light); }

.text-gold   { color: var(--gold); }
.text-teal   { color: var(--teal); }
.text-white  { color: var(--white); }
.text-center { text-align: center; }

/* ---- Layout Helpers ---- */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}
.section { padding: 96px 0; }
.section-sm { padding: 64px 0; }
.grid-2  { display: grid; grid-template-columns: repeat(2,1fr); gap: 32px; }
.grid-3  { display: grid; grid-template-columns: repeat(3,1fr); gap: 28px; }
.grid-4  { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; }
.flex    { display: flex; align-items: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.gap-16  { gap: 16px; }
.gap-24  { gap: 24px; }
.mt-8    { margin-top: 8px; }
.mt-16   { margin-top: 16px; }
.mt-24   { margin-top: 24px; }
.mt-40   { margin-top: 40px; }
.mb-8    { margin-bottom: 8px; }
.mb-16   { margin-bottom: 16px; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 50px;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: var(--transition);
  white-space: nowrap;
}
.btn-gold {
  background: var(--gold);
  color: var(--navy-deep);
}
.btn-gold:hover {
  background: var(--gold-light);
  transform: translateY(-2px);
  box-shadow: var(--shadow-gold);
}
.btn-outline {
  border: 2px solid var(--gold);
  color: var(--gold);
}
.btn-outline:hover {
  background: var(--gold);
  color: var(--navy-deep);
  transform: translateY(-2px);
}
.btn-ghost {
  border: 2px solid var(--border-control);
  color: var(--white);
}
.btn-ghost:hover {
  border-color: var(--white);
  background: rgba(255,255,255,0.08);
}
.btn-sm { padding: 10px 20px; font-size: 0.85rem; }
.btn-lg { padding: 18px 36px; font-size: 1.05rem; }

/* ---- Badges / Tags ---- */
.badge {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 50px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.badge-gold   { background: rgba(241,90,42,0.18); color: var(--gold); }
.badge-teal   { background: rgba(209,211,212,0.18);  color: var(--teal); }
.badge-blue   { background: rgba(77,107,198,0.18); color: var(--blue-accent); }
.badge-purple { background: rgba(150,100,255,0.18); color: #A78BFA; }

/* ---- Section Labels ---- */
.section-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 16px;
}
.section-label::before {
  content: '';
  display: block;
  width: 32px; height: 2px;
  background: var(--gold);
}

/* ---- Cards ---- */
.card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 32px;
  transition: var(--transition);
}
.card:hover {
  border-color: rgba(241,90,42,0.5);
  transform: translateY(-4px);
  box-shadow: var(--shadow-gold);
}
.card-icon {
  width: 56px; height: 56px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  margin-bottom: 20px;
}
.icon-bg-gold   { background: rgba(241,90,42,0.15); }
.icon-bg-teal   { background: rgba(209,211,212,0.15); }
.icon-bg-blue   { background: rgba(77,107,198,0.15); }
.icon-bg-purple { background: rgba(150,100,255,0.15); }

/* ---- Dividers ---- */
.divider {
  width: 60px; height: 4px;
  background: var(--gold);
  border-radius: 2px;
  margin: 20px auto;
}
.divider-left { margin: 20px 0; }

/* ---- Navigation ---- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  padding: 0 24px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(10,18,48,0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--card-border);
  transition: var(--transition);
}
.nav.scrolled {
  background: rgba(10,18,48,0.98);
  box-shadow: 0 2px 20px rgba(0,0,0,0.4);
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: 12px;
}
.nav-logo-icon {
  width: 40px; height: 40px;
  background: var(--gold);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}
.nav-logo-text strong {
  display: block;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--white);
  line-height: 1.1;
}
.nav-logo-text span {
  font-size: 0.7rem;
  color: var(--gold);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 8px;
}
.nav-link {
  position: relative;
  padding: 8px 14px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--gray-light);
  border-radius: var(--radius-sm);
  transition: var(--transition);
}
.nav-link:hover, .nav-link.active {
  color: var(--white);
  background: rgba(255,255,255,0.06);
}
.nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
/* Hamburger */
.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  cursor: pointer;
}
.nav-hamburger span {
  display: block;
  width: 24px; height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: var(--transition);
}
/* Mobile Nav */
.mobile-nav {
  display: none;
  position: fixed;
  top: 72px; left: 0; right: 0;
  background: var(--navy-mid);
  border-bottom: 1px solid var(--card-border);
  padding: 24px;
  flex-direction: column;
  gap: 8px;
  z-index: 999;
}
.mobile-nav.open { display: flex; }
.mobile-nav a {
  padding: 12px 16px;
  color: var(--gray-light);
  font-weight: 500;
  border-radius: var(--radius-sm);
  transition: var(--transition);
}
.mobile-nav a:hover { color: var(--white); background: rgba(255,255,255,0.06); }

/* ---- Sign In Dropdown ---- */
.signin-dropdown { position: relative; display: inline-block; }
.signin-toggle {
  background: transparent;
  border: 1.5px solid rgba(255,255,255,0.3);
  color: var(--white);
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 0.83rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.2s, background 0.2s;
  display: flex;
  align-items: center;
  gap: 5px;
}
.signin-toggle:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.5);
}
.signin-menu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  min-width: 210px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.14);
  z-index: 200;
  overflow: hidden;
}
.signin-dropdown:hover .signin-menu,
.signin-dropdown:focus-within .signin-menu { display: block; }
.signin-menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  font-size: 0.86rem;
  font-weight: 600;
  color: #142050;
  text-decoration: none;
  transition: background 0.15s;
}
.signin-menu a:hover { background: #F1F5F9; color: #142050; }
.signin-menu .menu-icon { font-size: 1rem; width: 20px; text-align: center; }
.signin-menu .menu-divider { height: 1px; background: #F1F5F9; margin: 4px 0; }
.signin-menu .menu-label {
  padding: 6px 16px 2px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #94A3B8;
}

/* ---- Hero ---- */
.hero {
  min-height: 100vh;
  padding-top: 72px;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 70% 40%, rgba(241,90,42,0.08) 0%, transparent 60%),
    radial-gradient(ellipse 60% 80% at 20% 80%, rgba(77,107,198,0.07) 0%, transparent 55%),
    linear-gradient(160deg, var(--navy-deep) 0%, #0d1a3d 100%);
}
.hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(241,90,42,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(241,90,42,0.05) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 100%);
}
.hero-content {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 80px 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(241,90,42,0.1);
  border: 1px solid rgba(241,90,42,0.25);
  border-radius: 50px;
  padding: 6px 16px 6px 6px;
  margin-bottom: 28px;
}
.hero-eyebrow-dot {
  width: 28px; height: 28px;
  background: var(--gold);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
}
.hero-eyebrow span { font-size: 0.85rem; font-weight: 600; color: var(--gold); }
.hero-title { margin-bottom: 24px; }
.hero-title span { color: var(--gold); }
.hero-sub { font-size: 1.1rem; margin-bottom: 40px; max-width: 520px; }
.hero-btns { display: flex; gap: 16px; flex-wrap: wrap; }
.hero-stats {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 16px;
  margin-top: 56px;
}
.hero-stat {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-sm);
  padding: 16px;
}
.hero-stat-num {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--gold);
  line-height: 1;
}
.hero-stat-label { font-size: 0.85rem; color: var(--gray-light); margin-top: 4px; }
/* Hero Visual Panel */
.hero-visual {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.hero-panel {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 24px;
}
.hero-panel-title {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 16px;
}
.cohort-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  font-size: 0.93rem;
}
.cohort-row:last-child { border-bottom: none; }
.cohort-org { font-weight: 600; }
.cohort-count { color: var(--gold); font-weight: 700; }
.progress-bar-wrap { flex: 1; margin: 0 12px; }
.progress-bar {
  height: 4px;
  background: rgba(255,255,255,0.08);
  border-radius: 2px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold), var(--teal));
  border-radius: 2px;
}

/* ---- Stats Bar ---- */
.stats-bar {
  background: var(--navy-mid);
  border-top: 1px solid rgba(241,90,42,0.12);
  border-bottom: 1px solid var(--card-border);
  padding: 40px 0;
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 0;
}
.stat-item {
  text-align: center;
  padding: 20px;
  border-right: 1px solid rgba(255,255,255,0.06);
}
.stat-item:last-child { border-right: none; }
.stat-num {
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--gold);
  line-height: 1;
}
.stat-label {
  font-size: 0.92rem;
  color: var(--gray-light);
  margin-top: 6px;
}

/* ---- Section Headers ---- */
.section-header { margin-bottom: 56px; }
.section-header.center { text-align: center; }
.section-header.center .divider { margin: 20px auto; }
.section-header p { max-width: 640px; font-size: 1.05rem; margin: 0 auto; }
.section-header.left p { margin: 0; }

/* ---- Program Track Cards ---- */
.track-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.track-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 32px 28px;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}
.track-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--accent-color, var(--gold));
  transform: scaleX(0);
  transition: var(--transition);
  transform-origin: left;
}
.track-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.track-card:hover::before { transform: scaleX(1); }
.track-card .card-icon { margin-bottom: 16px; }
.track-card h3 { margin-bottom: 8px; }
.track-card p { font-size: 0.95rem; margin-bottom: 20px; }
.track-modules { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.module-tag {
  padding: 4px 12px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 50px;
  font-size: 0.82rem;
  color: var(--gray-light);
}

/* ---- Academy Cards ---- */
.academy-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: var(--transition);
}
.academy-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-gold); }
.academy-header {
  padding: 28px;
  background: linear-gradient(135deg, var(--academy-color1, #1c3070), var(--academy-color2, #0f1f5a));
  display: flex;
  align-items: center;
  gap: 16px;
}
.academy-logo {
  width: 52px; height: 52px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  background: rgba(255,255,255,0.12);
  flex-shrink: 0;
}
.academy-name { font-size: 1.05rem; font-weight: 700; }
.academy-type { font-size: 0.8rem; color: rgba(255,255,255,0.8); margin-top: 2px; }
.academy-body { padding: 24px 28px; }
.academy-body p { font-size: 0.95rem; margin-bottom: 16px; }
.academy-features { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.academy-feature {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.92rem;
  color: var(--gray-light);
}
.academy-feature::before {
  content: '✓';
  width: 20px; height: 20px;
  background: rgba(209,211,212,0.15);
  color: var(--teal);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  flex-shrink: 0;
}

/* ---- Timeline ---- */
.timeline { position: relative; padding-left: 48px; }
.timeline::before {
  content: '';
  position: absolute;
  left: 16px; top: 8px; bottom: 8px;
  width: 2px;
  background: linear-gradient(to bottom, var(--gold), var(--teal), var(--blue-accent));
  border-radius: 2px;
}
.timeline-item { position: relative; margin-bottom: 48px; }
.timeline-item:last-child { margin-bottom: 0; }
.timeline-dot {
  position: absolute;
  left: -40px; top: 4px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--gold);
  border: 3px solid var(--navy-deep);
  box-shadow: 0 0 0 3px rgba(241,90,42,0.3);
}
.timeline-phase {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 6px;
}
.timeline-title { font-size: 1.15rem; font-weight: 700; margin-bottom: 8px; }
.timeline-items { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.timeline-tag {
  padding: 4px 12px;
  border-radius: 50px;
  font-size: 0.82rem;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--gray-light);
}

/* ---- Revenue / Pricing Table ---- */
.revenue-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}
.revenue-table th {
  text-align: left;
  padding: 14px 20px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
  border-bottom: 2px solid rgba(241,90,42,0.2);
}
.revenue-table td {
  padding: 14px 20px;
  color: var(--gray-light);
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.revenue-table tr:hover td { background: rgba(255,255,255,0.02); }
.revenue-table td:first-child { color: var(--white); font-weight: 500; }

/* ---- Steps / How it Works ---- */
.steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 32px; position: relative; }
.steps::before {
  content: '';
  position: absolute;
  top: 44px;
  left: calc(16.66% + 8px);
  right: calc(16.66% + 8px);
  height: 2px;
  background: linear-gradient(90deg, var(--gold), var(--teal));
  opacity: 0.3;
}
.step { text-align: center; }
.step-num {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: rgba(241,90,42,0.12);
  border: 2px solid rgba(241,90,42,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--gold);
  margin: 0 auto 20px;
  position: relative;
  z-index: 1;
}
.step h3 { margin-bottom: 10px; }
.step p { font-size: 0.95rem; }

/* ---- CTA Section ---- */
.cta-section {
  background: linear-gradient(135deg, var(--navy-mid) 0%, var(--navy-deep) 100%);
  border-top: 1px solid rgba(241,90,42,0.12);
  border-bottom: 1px solid var(--card-border);
  position: relative;
  overflow: hidden;
}
.cta-section::before {
  content: '';
  position: absolute;
  top: -100px; right: -100px;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(241,90,42,0.07) 0%, transparent 70%);
  pointer-events: none;
}
.cta-inner { text-align: center; position: relative; z-index: 1; }
.cta-inner h2 { margin-bottom: 16px; }
.cta-inner p { font-size: 1.05rem; max-width: 560px; margin: 0 auto 40px; }
.cta-btns { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* ---- Testimonial / Pilot Cards ---- */
.pilot-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 24px; }
.pilot-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pilot-card h4 { color: var(--gold); }
.pilot-card p { font-size: 0.95rem; }
.pilot-meta { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.05); }
.pilot-icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: rgba(241,90,42,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}
.pilot-detail { font-size: 0.85rem; color: var(--gray-light); }
.pilot-detail strong { color: var(--white); display: block; font-size: 0.92rem; }

/* ---- Comparison Table ---- */
.compare-table { width: 100%; border-collapse: collapse; }
.compare-table th {
  padding: 16px 20px;
  text-align: left;
  background: rgba(241,90,42,0.08);
  border: 1px solid rgba(241,90,42,0.15);
  font-size: 0.9rem;
  font-weight: 700;
}
.compare-table th:first-child { color: var(--gray-light); }
.compare-table th:last-child { color: var(--gold); }
.compare-table td {
  padding: 14px 20px;
  border: 1px solid rgba(255,255,255,0.05);
  font-size: 0.93rem;
  color: var(--gray-light);
}
.compare-table td:first-child { color: var(--white); font-weight: 500; }
.compare-table .yes { color: var(--teal); font-weight: 600; }
.compare-table .no  { color: var(--gray-mid); }

/* ---- Contact Form ---- */
.contact-form { display: flex; flex-direction: column; gap: 20px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-group { display: flex; flex-direction: column; gap: 8px; }
.form-label { font-size: 0.92rem; font-weight: 600; color: var(--gray-light); }
.form-input, .form-select, .form-textarea {
  /* Fill lifted 0.04 -> 0.07 and the border taken to the control token.
     At 0.12 the outline measured 1.27:1 on the page: the field was
     invisible until you clicked in it. */
  background: rgba(255,255,255,0.07);
  border: 1px solid var(--border-control);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  color: var(--white);
  font-family: inherit;
  font-size: 0.92rem;
  transition: var(--transition);
  width: 100%;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(241,90,42,0.12);
}
.form-textarea { min-height: 140px; resize: vertical; }
.form-select option { background: var(--navy-mid); }

/* ---- Footer ---- */
.footer {
  background: var(--navy-mid);
  border-top: 1px solid rgba(241,90,42,0.12);
  padding: 64px 0 32px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 56px;
}
.footer-brand p { font-size: 0.93rem; margin: 16px 0 24px; max-width: 300px; }
.footer-col h5 {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 20px;
}
.footer-col ul { display: flex; flex-direction: column; gap: 10px; }
.footer-col a {
  font-size: 0.92rem;
  color: var(--gray-light);
  transition: var(--transition);
}
.footer-col a:hover { color: var(--white); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.06);
  padding-top: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.87rem;
  color: var(--gray-mid);
  flex-wrap: wrap;
  gap: 12px;
}
.footer-socials { display: flex; gap: 12px; }
.footer-social {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  transition: var(--transition);
}
.footer-social:hover { background: var(--gold); color: var(--navy-deep); }

/* ---- Page Hero (inner pages) ---- */
.page-hero {
  padding: 140px 0 80px;
  background: linear-gradient(160deg, var(--navy-deep) 0%, #0d1a3d 100%);
  position: relative;
  overflow: hidden;
  text-align: center;
}
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(241,90,42,0.07) 0%, transparent 60%);
}
.page-hero-content { position: relative; z-index: 1; }
.page-hero h1 { margin-bottom: 20px; }
.page-hero p { font-size: 1.1rem; max-width: 600px; margin: 0 auto; }

/* ---- Tab System ---- */
.tabs { display: flex; gap: 8px; margin-bottom: 40px; flex-wrap: wrap; }
.tab-btn {
  padding: 10px 24px;
  border-radius: 50px;
  font-size: 0.93rem;
  font-weight: 600;
  color: var(--gray-light);
  background: rgba(255,255,255,0.07);
  border: 1px solid var(--border-control);
  transition: var(--transition);
}
.tab-btn:hover { color: var(--white); background: rgba(255,255,255,0.12); }
.tab-btn.active {
  background: var(--gold);
  color: var(--navy-deep);
  border-color: var(--gold);
}
.tab-content { display: none; }
.tab-content.active { display: block; }

/* ---- Accordion ---- */
.accordion-item {
  border: 1px solid var(--border-control);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
  overflow: hidden;
}
.accordion-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  background: rgba(255,255,255,0.03);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--white);
  text-align: left;
  transition: var(--transition);
}
.accordion-toggle:hover { background: rgba(255,255,255,0.06); }
.accordion-toggle .acc-icon { color: var(--gold); font-size: 1.2rem; transition: var(--transition); }
.accordion-toggle.open .acc-icon { transform: rotate(45deg); }
.accordion-body {
  display: none;
  padding: 0 24px 20px;
  font-size: 0.9rem;
  color: var(--gray-light);
}
.accordion-body.open { display: block; }

/* ---- Animations ---- */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-in-up { animation: fadeInUp 0.6s ease forwards; }
.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
  .hero-content { grid-template-columns: 1fr; gap: 40px; }
  .hero-visual { display: none; }
  .track-grid { grid-template-columns: repeat(2,1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .stats-grid { grid-template-columns: repeat(2,2fr); }
}

@media (max-width: 768px) {
  h1 { font-size: 2rem; }
  h2 { font-size: 1.6rem; }
  .nav-links, .nav-actions .btn:not(.btn-sm) { display: none; }
  .nav-hamburger { display: flex; }
  .section { padding: 64px 0; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .track-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .steps::before { display: none; }
  .pilot-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: repeat(2,1fr); }
  .hero-stats { grid-template-columns: repeat(2,1fr); }
  .footer-bottom { flex-direction: column; text-align: center; }
}

@media (max-width: 480px) {
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .hero-stats { grid-template-columns: 1fr 1fr; }
  .btn-lg { padding: 14px 24px; font-size: 0.95rem; }
}