/* ============================================================
   AdLane — Main Stylesheet
   Brand: Navy #0D1B3E | Teal #00C4A7 | Off-white #F5F7FA | Slate #64748B
   ============================================================ */

/* ---------- Reset & Base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --navy:     #0D1B3E;
  --navy-mid: #162a5a;
  --teal:     #00C4A7;
  --teal-dark:#009e85;
  --offwhite: #F5F7FA;
  --white:    #ffffff;
  --slate:    #64748B;
  --slate-lt: #94A3B8;
  --border:   #E2E8F0;
  --error:    #EF4444;
  --success:  #10B981;

  --font-head: 'Inter', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, sans-serif;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --radius-xl: 40px;

  --shadow-sm: 0 1px 3px rgba(13,27,62,.06), 0 1px 2px rgba(13,27,62,.04);
  --shadow-md: 0 4px 16px rgba(13,27,62,.10), 0 2px 4px rgba(13,27,62,.06);
  --shadow-lg: 0 12px 40px rgba(13,27,62,.14), 0 4px 12px rgba(13,27,62,.08);
  --shadow-teal: 0 8px 32px rgba(0,196,167,.30);

  --transition: 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

html { scroll-behavior: smooth; font-size: 16px; }

body {
  font-family: var(--font-body);
  background: var(--offwhite);
  color: var(--navy);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a  { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
input, select, textarea { font-family: inherit; }

.container {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px;
}

/*
  Nav uses the default 1140 px container (same as body content) so the
  logo / nav-links / CTA pair sit aligned with the rest of the page.
  Business sign in is positioned separately (see .nav-business-cta below).
*/

/* ---------- Typography ---------- */
h1, h2, h3, h4, h5 { font-family: var(--font-head); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; }

.eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 12px;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 100px;
  font-size: 0.95rem;
  font-weight: 600;
  transition: all var(--transition);
  white-space: nowrap;
}

.btn-primary {
  background: var(--teal);
  color: var(--white);
  box-shadow: var(--shadow-teal);
}
.btn-primary:hover { background: var(--teal-dark); transform: translateY(-1px); box-shadow: 0 12px 36px rgba(0,196,167,.38); }
.btn-primary:active { transform: translateY(0); }

.btn-outline {
  background: transparent;
  color: var(--navy);
  border: 2px solid var(--border);
}
.btn-outline:hover { border-color: var(--teal); color: var(--teal); }

.btn-outline-white {
  background: transparent;
  color: var(--white);
  border: 2px solid rgba(255,255,255,0.35);
}
.btn-outline-white:hover { border-color: var(--white); background: rgba(255,255,255,0.1); }

.btn-lg { padding: 18px 36px; font-size: 1.05rem; }
.btn-sm { padding: 10px 20px; font-size: 0.875rem; }

/* ---------- Nav ---------- */
#nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  padding: 0;
  transition: background var(--transition), box-shadow var(--transition);
}

#nav.scrolled {
  background: rgba(13,27,62,0.97);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 2px 20px rgba(0,0,0,.2);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;               /* guaranteed min-gap between logo / links / CTAs */
  height: 70px;
  flex-wrap: nowrap;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--white);
  letter-spacing: -0.03em;
}

.nav-logo-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: block;
  flex-shrink: 0;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
  flex-shrink: 1;        /* allow the middle link list to tighten before CTAs cramp */
  min-width: 0;
}

.nav-links a {
  color: rgba(255,255,255,0.8);
  font-size: 0.9rem;
  font-weight: 500;
  transition: color var(--transition);
}
.nav-links a:hover { color: var(--teal); }

/*
  Right-side CTA group. All three buttons live in .nav-cta and wrap/shrink
  predictably as the viewport narrows. `min-width: 0` + `flex-shrink` on
  children prevents any overlap at borderline widths. Business sign in gets
  a small extra left margin so it reads as a peer action distinct from the
  Earn/Advertise pair. No absolute positioning — everything respects the
  natural flex layout so scaling is predictable.
*/
.nav-cta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  white-space: nowrap;
}
/*
  Business sign in sits as a peer of "Advertise with us" inside .nav-cta,
  so the two CTAs read as one right-aligned action group rather than the
  prior split layout (Advertise inline left of nav, Sign-in floating to
  the viewport edge). The flex container `.nav-inner` already pushes
  `.nav-cta` to the right via `justify-content: space-between`, so no
  absolute positioning is needed here.
*/
.nav-business-cta {
  flex-shrink: 0;
  white-space: nowrap;
}

.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 4px;
  cursor: pointer;
}
.nav-hamburger span {
  display: block;
  width: 24px; height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: all var(--transition);
}

/* Mobile Menu — opens below the nav on narrow viewports */
.mobile-menu {
  display: none;
  position: fixed;
  top: 70px; left: 0; right: 0; bottom: 0;
  background: var(--navy);
  z-index: 999;
  padding: 24px 20px 40px;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
}
.mobile-menu.open { display: flex; }

/*
  `.mobile-menu > a` scopes the nav-link row styling to direct-child anchors
  ONLY. Without the `>` combinator these rules were leaking onto the `<a>`
  pill buttons inside .mobile-menu-cta (adding an unwanted bottom border and
  overriding the .btn padding/font-size) and made the CTAs look broken.
*/
.mobile-menu > a {
  color: rgba(255, 255, 255, 0.85);
  font-size: 1.1rem;
  font-weight: 500;
  padding: 14px 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  transition: color 0.15s;
}
.mobile-menu > a:hover { color: var(--teal); }

.mobile-menu-cta {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 20px;
}
.mobile-menu-cta .btn { width: 100%; justify-content: center; }

/*
  Secondary mobile link for "Business sign in". Lives below the waitlist
  CTAs and reads as a subtle follow-up action for existing customers — not a
  third pill competing with Earn-with-us / Advertise.
*/
.mobile-menu-secondary {
  text-align: center;
  margin-top: 18px;
  padding: 8px 0;
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.9rem;
  font-weight: 500;
  border: none !important;
  text-decoration: none;
  transition: color 0.15s;
}
.mobile-menu-secondary:hover { color: var(--teal); }

/* ---------- Hero ---------- */
#hero {
  background: linear-gradient(135deg, var(--navy) 0%, #0f2552 55%, #1a3a6b 100%);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
  padding: 120px 0 80px;
}

.hero-bg-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0,196,167,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,196,167,0.05) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
}

.hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
}
.hero-orb-1 {
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(0,196,167,0.18) 0%, transparent 70%);
  top: -200px; right: -150px;
}
.hero-orb-2 {
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(0,100,255,0.12) 0%, transparent 70%);
  bottom: -100px; left: -100px;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 780px;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(0,196,167,0.15);
  border: 1px solid rgba(0,196,167,0.3);
  color: var(--teal);
  padding: 6px 14px;
  border-radius: 100px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  margin-bottom: 28px;
}
.hero-badge-dot {
  width: 7px; height: 7px;
  background: var(--teal);
  border-radius: 50%;
  animation: pulse 2s infinite;
}

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

.hero-heading {
  font-size: clamp(2.6rem, 6vw, 4.4rem);
  color: var(--white);
  margin-bottom: 24px;
  line-height: 1.08;
}

.hero-heading .highlight {
  color: var(--teal);
  position: relative;
}

.hero-subhead {
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  color: rgba(255,255,255,0.72);
  max-width: 600px;
  margin-bottom: 44px;
  line-height: 1.7;
}

.hero-ctas {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 60px;
}

.hero-stats {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
}

.hero-stat {
  display: flex;
  flex-direction: column;
}

.hero-stat-num {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--white);
  letter-spacing: -0.03em;
}
.hero-stat-label {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.5);
  font-weight: 500;
  letter-spacing: 0.02em;
}

.hero-scroll-hint {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,0.4);
  font-size: 0.75rem;
  animation: bounce 2s ease-in-out infinite;
}
.hero-scroll-hint svg { width: 20px; height: 20px; }

@keyframes bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(6px); }
}

/* ---------- Social Proof Bar ---------- */
#proof-bar {
  background: var(--navy);
  border-top: 1px solid rgba(255,255,255,0.06);
}

.proof-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 28px 0;
  flex-wrap: wrap;
}

.proof-item {
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(255,255,255,0.55);
  font-size: 0.9rem;
  font-weight: 500;
}
.proof-item-icon {
  width: 38px; height: 38px;
  background: rgba(0,196,167,0.12);
  border: 1px solid rgba(0,196,167,0.2);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--teal);
  font-size: 1.1rem;
  flex-shrink: 0;
}

/* ---------- Sections ---------- */
section { padding: 96px 0; }

.section-header {
  text-align: center;
  max-width: 620px;
  margin: 0 auto 64px;
}

.section-header h2 {
  font-size: clamp(1.9rem, 4vw, 2.8rem);
  color: var(--navy);
  margin-bottom: 16px;
}

.section-header p {
  font-size: 1.08rem;
  color: var(--slate);
  line-height: 1.7;
}

/* ---------- How It Works ---------- */
#how-it-works { background: var(--white); }

.how-tabs {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 56px;
  background: var(--offwhite);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 6px;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

.how-tab {
  padding: 10px 28px;
  border-radius: 100px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--slate);
  transition: all var(--transition);
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
}
.how-tab.active {
  background: var(--navy);
  color: var(--white);
  box-shadow: var(--shadow-md);
}
.how-tab:not(.active):hover { color: var(--navy); }

.how-panel { display: none; }
.how-panel.active { display: block; }

.how-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  position: relative;
}

/*
  Connector line that runs through the vertical center of the numbered
  circles (64px tall, sitting below 32px of top padding → center at 64px).
  Horizontally it spans from the center of the first circle column to the
  center of the last, so it visually passes THROUGH each circle rather
  than stopping at their edges.

  Two background layers:
    1. A bright teal "pulse" (35% wide) that slides left → right on loop
    2. A static dim teal base line (100% wide) underneath

  The circle's z-index: 1 keeps the circles drawn over both layers, so the
  pulse appears to flow from step 1 to step 3 through each number bubble.
*/
.how-steps::before {
  content: '';
  position: absolute;
  top: calc(32px + 32px - 1px);     /* top padding + half circle height - half line height */
  left: calc(100% / 6);             /* center of the first 1/3 column */
  right: calc(100% / 6);            /* center of the last 1/3 column */
  height: 2px;
  background:
    linear-gradient(
      90deg,
      rgba(0, 196, 167, 0) 0%,
      rgba(0, 196, 167, 0.95) 50%,
      rgba(0, 196, 167, 0) 100%
    ),
    rgba(0, 196, 167, 0.22);
  background-size: 35% 100%, 100% 100%;
  background-repeat: no-repeat, no-repeat;
  background-position: -35% 0, 0 0;
  animation: how-steps-flow 3s linear infinite;
  z-index: 0;
  will-change: background-position;
}

@keyframes how-steps-flow {
  0%   { background-position: -35% 0, 0 0; }
  100% { background-position: 135% 0, 0 0; }
}

/* Respect users who've asked browsers to calm motion. */
@media (prefers-reduced-motion: reduce) {
  .how-steps::before { animation: none; }
}

.how-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 32px 24px;
  border-radius: var(--radius-md);
  transition: all var(--transition);
  position: relative;
}
.how-step:hover { background: var(--offwhite); transform: translateY(-4px); }

.how-step-num {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--teal) 0%, var(--teal-dark) 100%);
  color: var(--white);
  font-size: 1.4rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  box-shadow: var(--shadow-teal);
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.how-step h3 {
  font-size: 1.15rem;
  color: var(--navy);
  margin-bottom: 10px;
}
.how-step p { font-size: 0.93rem; color: var(--slate); line-height: 1.65; }

/* ---------- Why AdLane ---------- */
#why { background: var(--offwhite); }

.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.why-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 36px 28px;
  transition: all var(--transition);
}
.why-card:hover {
  border-color: var(--teal);
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

.why-icon {
  width: 52px; height: 52px;
  background: linear-gradient(135deg, rgba(0,196,167,0.12) 0%, rgba(0,196,167,0.06) 100%);
  border: 1px solid rgba(0,196,167,0.2);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  margin-bottom: 20px;
}

.why-card h3 { font-size: 1.08rem; color: var(--navy); margin-bottom: 10px; }
.why-card p  { font-size: 0.9rem; color: var(--slate); line-height: 1.65; }

/* ---------- By the Numbers ---------- */
#numbers {
  background: linear-gradient(135deg, var(--navy) 0%, #112050 100%);
  position: relative;
  overflow: hidden;
}

.market-bg {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 80% 50%, rgba(0,196,167,0.12) 0%, transparent 60%);
  pointer-events: none;
}

#numbers .section-header h2 { color: var(--white); }
#numbers .section-header p { color: rgba(255,255,255,0.65); }

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  position: relative;
  z-index: 1;
}

.stat-card {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-md);
  padding: 36px 24px;
  text-align: center;
  transition: all var(--transition);
  backdrop-filter: blur(8px);
}
.stat-card:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(0,196,167,0.4);
  transform: translateY(-4px);
}

.stat-card-num {
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--teal);
  letter-spacing: -0.04em;
  margin-bottom: 8px;
  display: block;
}

.stat-card-label {
  font-size: 0.88rem;
  color: rgba(255,255,255,0.65);
  font-weight: 500;
  line-height: 1.5;
}

/* ---------- Dual CTA / Tracks ---------- */
#tracks { background: var(--white); }

.tracks-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}

.track-card {
  border-radius: var(--radius-lg);
  padding: 48px 40px;
  position: relative;
  overflow: hidden;
  transition: all var(--transition);
  cursor: pointer;
}

.track-card-supply {
  background: linear-gradient(135deg, var(--navy) 0%, #162a5a 100%);
  border: 1px solid rgba(0,196,167,0.2);
}

.track-card-demand {
  background: linear-gradient(135deg, #0f2040 0%, var(--navy) 100%);
  border: 1px solid rgba(0,196,167,0.15);
}

.track-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }

.track-bg-icon {
  position: absolute;
  right: -20px;
  bottom: -20px;
  font-size: 8rem;
  opacity: 0.06;
  pointer-events: none;
  line-height: 1;
}

.track-badge {
  display: inline-block;
  background: rgba(0,196,167,0.18);
  border: 1px solid rgba(0,196,167,0.3);
  color: var(--teal);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 100px;
  margin-bottom: 20px;
}

.track-card h3 {
  font-size: 1.7rem;
  color: var(--white);
  margin-bottom: 14px;
}

.track-card p {
  color: rgba(255,255,255,0.65);
  font-size: 0.95rem;
  line-height: 1.7;
  margin-bottom: 32px;
}

.track-perks {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 36px;
}

.track-perk {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255,255,255,0.8);
  font-size: 0.9rem;
  font-weight: 500;
}
.track-perk-check {
  width: 20px; height: 20px;
  background: rgba(0,196,167,0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--teal);
  font-size: 0.7rem;
  flex-shrink: 0;
}

/* ---------- Waitlist / Forms ---------- */
#waitlist {
  background: var(--offwhite);
  padding-top: 80px;
  padding-bottom: 80px;
}

.waitlist-header {
  text-align: center;
  margin-bottom: 48px;
}
.waitlist-header h2 { font-size: clamp(1.9rem, 4vw, 2.6rem); color: var(--navy); margin-bottom: 12px; }
.waitlist-header p  { color: var(--slate); font-size: 1.05rem; }

.form-switcher {
  display: flex;
  justify-content: center;
  gap: 8px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 6px;
  width: fit-content;
  margin: 0 auto 48px;
}

.form-tab {
  padding: 11px 30px;
  border-radius: 100px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--slate);
  transition: all var(--transition);
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
}
.form-tab.active {
  background: var(--navy);
  color: var(--white);
  box-shadow: var(--shadow-md);
}
.form-tab:not(.active):hover { color: var(--navy); }

.form-wrapper {
  max-width: 700px;
  margin: 0 auto;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px 36px;
  box-shadow: var(--shadow-md);
}

.form-panel { display: none; }
.form-panel.active { display: block; }

.form-panel h3 { font-size: 1.3rem; color: var(--navy); margin-bottom: 4px; }
.form-panel .form-desc { color: var(--slate); font-size: 0.92rem; margin-bottom: 20px; }

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 16px;
  row-gap: 15px;
}
.form-grid .full { grid-column: 1 / -1; }

.field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.field label {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--navy);
  letter-spacing: 0.01em;
  display: block;
}

.field input,
.field select,
.field textarea {
  padding: 12px 16px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  color: var(--navy);
  background: var(--white);
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
  width: 100%;
  appearance: none;
}

.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2364748B' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(0,196,167,0.12);
}

.field input.error,
.field select.error { border-color: var(--error); }

/* Inline green checkmark on fields that pass validation — builds momentum */
.field input.valid,
.field select.valid {
  border-color: var(--success);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M3 8l3.5 3.5L13 5' stroke='%2310B981' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
}
/* Keep the dropdown chevron on valid selects (don't overwrite with checkmark) */
.field select.valid {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2310B981' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Muted "(optional)" suffix in field labels */
.field-optional {
  font-weight: 400;
  color: var(--slate-lt);
  font-size: 0.78rem;
  margin-left: 4px;
}

.field-error {
  font-size: 0.78rem;
  color: var(--error);
  font-weight: 500;
  display: none;
}
.field-error.visible { display: block; }

/* Checkbox group for gig platforms */
.checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  padding: 12px 16px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--white);
}
.checkbox-group.error { border-color: var(--error); }
.checkbox-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.92rem;
  color: var(--navy);
  cursor: pointer;
  user-select: none;
}
.checkbox-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--teal);
  cursor: pointer;
}

.form-submit { margin-top: 18px; }
.form-submit .btn { width: 100%; justify-content: center; padding: 16px; font-size: 1rem; border-radius: var(--radius-sm); }

/* Trust/reassurance row directly below the submit button */
.form-trust-row {
  text-align: center;
  font-size: 0.78rem;
  color: var(--slate);
  margin-top: 12px;
  letter-spacing: 0.01em;
}

/* Share CTA in the post-submit success state */
.form-share { margin-top: 18px; }
.form-share-btn {
  padding: 10px 20px !important;
  font-size: 0.9rem !important;
  border-radius: var(--radius-sm) !important;
  width: auto !important;
}

.form-success {
  display: none;
  text-align: center;
  padding: 40px 20px;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: 0 4px 24px rgba(0,0,0,0.06);
}
.form-success.visible { display: block; }

.form-rate-limit {
  display: none;
  text-align: center;
  padding: 12px 16px;
  margin-bottom: 16px;
  background: #fef2f2;
  color: #ef4444;
  border: 1px solid #fecaca;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-weight: 500;
}
.form-rate-limit.visible { display: block; }
.form-success-icon {
  width: 72px; height: 72px;
  background: linear-gradient(135deg, var(--teal), var(--teal-dark));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  margin: 0 auto 20px;
  box-shadow: var(--shadow-teal);
}
.form-success h3 { font-size: 1.4rem; color: var(--navy); margin-bottom: 10px; }
.form-success p  { color: var(--slate); font-size: 0.95rem; }

.form-note {
  text-align: center;
  font-size: 0.78rem;
  color: var(--slate-lt);
  margin-top: 16px;
}

/* ---------- Testimonials ---------- */
#testimonials { background: var(--white); }

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.testimonial-card {
  background: var(--offwhite);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 32px 28px;
  transition: all var(--transition);
}
.testimonial-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }

.testimonial-stars {
  color: #F59E0B;
  font-size: 0.85rem;
  margin-bottom: 16px;
  letter-spacing: 2px;
}

.testimonial-quote {
  font-size: 0.95rem;
  color: var(--navy);
  line-height: 1.7;
  margin-bottom: 24px;
  font-style: italic;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 12px;
}

.testimonial-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 700;
  color: var(--white);
  flex-shrink: 0;
}

.testimonial-name { font-size: 0.9rem; font-weight: 600; color: var(--navy); }
.testimonial-role { font-size: 0.8rem; color: var(--slate); }

.testimonials-empty {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--slate);
  font-size: 1.05rem;
}

/* ---------- FAQ ---------- */
#faq { background: var(--offwhite); }

.faq-list {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq-item {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--transition);
}
.faq-item.open { border-color: var(--teal); }

.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  font-size: 0.97rem;
  font-weight: 600;
  color: var(--navy);
  text-align: left;
  cursor: pointer;
  transition: color var(--transition);
  border: none;
  background: none;
  font-family: inherit;
}
.faq-question:hover { color: var(--teal); }
.faq-item.open .faq-question { color: var(--teal); }

.faq-icon {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--offwhite);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.1rem;
  transition: all var(--transition);
  color: var(--slate);
}
.faq-item.open .faq-icon { background: var(--teal); color: var(--white); transform: rotate(45deg); }

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), padding 0.35s;
  padding: 0 24px;
  font-size: 0.93rem;
  color: var(--slate);
  line-height: 1.75;
}
.faq-item.open .faq-answer { max-height: 400px; padding: 0 24px 20px; }

/* "Still have questions?" CTA tucked under the FAQ list. Sits on the
   same offwhite section bg, so the navy outline button reads as the
   action and the sentence carries the prompt. */
.faq-followup {
  max-width: 720px;
  margin: 32px auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 18px 24px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.faq-followup p {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--navy);
}

/* ---------- Final CTA ---------- */
#cta-final {
  background: linear-gradient(135deg, var(--navy) 0%, #0f2552 100%);
  text-align: center;
  padding: 100px 0;
  position: relative;
  overflow: hidden;
}

.cta-bg {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(ellipse at 50% 50%, rgba(0,196,167,0.12) 0%, transparent 70%);
  pointer-events: none;
}

#cta-final h2 {
  font-size: clamp(2rem, 5vw, 3.2rem);
  color: var(--white);
  margin-bottom: 18px;
  position: relative;
}

#cta-final p {
  color: rgba(255,255,255,0.65);
  font-size: 1.1rem;
  max-width: 520px;
  margin: 0 auto 44px;
  line-height: 1.7;
  position: relative;
}

.cta-buttons {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  position: relative;
}

/* ---------- Footer ---------- */
footer {
  background: #080f22;
  padding: 64px 0 32px;
}

.footer-top {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 48px;
}

.footer-brand .nav-logo { margin-bottom: 16px; }
.footer-brand p {
  font-size: 0.88rem;
  color: rgba(255,255,255,0.45);
  line-height: 1.7;
  max-width: 280px;
}

.footer-col h4 {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  margin-bottom: 18px;
}

.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-col ul li a {
  font-size: 0.88rem;
  color: rgba(255,255,255,0.55);
  transition: color var(--transition);
}
.footer-col ul li a:hover { color: var(--teal); }

.footer-divider { border: none; border-top: 1px solid rgba(255,255,255,0.07); margin-bottom: 28px; }

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.footer-bottom p { font-size: 0.82rem; color: rgba(255,255,255,0.3); }

.footer-social {
  display: flex;
  gap: 12px;
}
.footer-social a {
  width: 36px; height: 36px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.55);
  transition: all var(--transition);
}
.footer-social a svg {
  width: 16px;
  height: 16px;
  display: block;
}
.footer-social a:hover {
  border-color: var(--teal);
  color: var(--teal);
  background: rgba(0, 196, 167, 0.08);
}

/* ---------- Animations ---------- */
.fade-up {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.fade-up.visible { opacity: 1; transform: translateY(0); }

.fade-up-delay-1 { transition-delay: 0.1s; }
.fade-up-delay-2 { transition-delay: 0.2s; }
.fade-up-delay-3 { transition-delay: 0.3s; }
.fade-up-delay-4 { transition-delay: 0.4s; }
.fade-up-delay-5 { transition-delay: 0.5s; }

/* ---------- Utility ---------- */
.text-teal    { color: var(--teal); }
.text-center  { text-align: center; }
.mt-8 { margin-top: 8px; }

/* ---------- Responsive ---------- */

/*
  Nav-specific breakpoints — tighten gaps and label sizing before anything
  overlaps. Order matters: check from widest to narrowest so narrower rules
  override wider ones.
*/
@media (max-width: 1280px) {
  /* Slightly tighten links and shave button padding at mid-desktop widths
     so the CTA group keeps clearance from the nav-links. Business sign in
     stays visible at this width now that it sits inline next to "Advertise
     with us" — they share the right-side flex group and shrink together. */
  .nav-links { gap: 24px; }
  .nav-cta .btn-sm { padding: 7px 12px; font-size: 0.8rem; }
}

@media (max-width: 1100px) {
  .nav-links { gap: 18px; font-size: 0.85rem; }
  .nav-cta { gap: 8px; }
  /* Pull the logo label tight to the mark to claim back a bit more space. */
  .nav-logo { font-size: 1.3rem; gap: 8px; }
}

@media (max-width: 980px) {
  /* Below this width the middle nav links start competing with the CTAs —
     drop them to keep the right-side action group intact. Users can still
     reach the sections via the hamburger menu at this width via anchor
     scrolling; the links reappear in the mobile menu below 768px. */
  .nav-links { display: none; }
}

@media (max-width: 1024px) {
  .stats-grid   { grid-template-columns: repeat(2, 1fr); }
  .footer-top   { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 820px) {
  /* Hide the CTA group + the standalone Business sign in, show the
     hamburger. The slide-down mobile menu carries its own copies. */
  .nav-cta,
  .nav-business-cta { display: none; }
  .nav-hamburger { display: flex; }
}

@media (max-width: 768px) {
  section { padding: 72px 0; }

  .nav-links { display: none; }

  .hero-heading { font-size: 2.2rem; }
  .hero-ctas .btn { width: 100%; justify-content: center; }
  .hero-ctas { flex-direction: column; }
  .hero-stats { gap: 24px; }

  .how-steps { grid-template-columns: 1fr; gap: 0; }
  .how-steps::before { display: none; }
  .how-step { padding: 28px 20px; }

  .why-grid  { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .tracks-grid { grid-template-columns: 1fr; }
  .testimonials-grid { grid-template-columns: 1fr; }

  .form-wrapper { padding: 32px 24px; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .full { grid-column: 1; }

  .proof-bar-inner { flex-direction: column; gap: 20px; align-items: flex-start; }

  .footer-top { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }

  .cta-buttons { flex-direction: column; align-items: center; }
}

@media (max-width: 480px) {
  .hero-heading { font-size: 1.9rem; }
  .stats-grid  { grid-template-columns: 1fr; }
  .how-tabs    { flex-direction: column; width: 100%; border-radius: var(--radius-md); }
  .how-tab     { text-align: center; }
  .form-switcher { flex-direction: column; width: 100%; border-radius: var(--radius-md); }
  .form-tab    { text-align: center; }
  .track-card  { padding: 36px 28px; }

  /* Buttons always full-width + centered at this size so they don't
     collide with each other or get cut off. */
  .hero-ctas .btn,
  .mobile-menu-cta .btn { width: 100%; justify-content: center; }
}

/*
  Narrow-phone polish (iPhone SE/mini, pre-iOS-17 devices, Android budget
  phones at 360 px effective width). Below ~380 px the default sizes start
  feeling cramped or overflow; scale down typography, reduce padding, keep
  everything readable without clipping.
*/
@media (max-width: 380px) {
  .container { padding: 0 16px; }
  .hero-heading { font-size: 1.65rem; line-height: 1.2; }
  .hero-subhead { font-size: 0.95rem; }
  .hero-stats { gap: 20px; }
  .hero-stat-num { font-size: 1.5rem; }
  .hero-badge { font-size: 0.7rem; padding: 6px 12px; }

  section { padding: 56px 0; }
  .section-header h2 { font-size: 1.6rem; }
  .section-header p { font-size: 0.9rem; }

  .form-wrapper { padding: 24px 18px; }
  .form-panel h3 { font-size: 1.15rem; }
  .form-grid { row-gap: 12px; }

  .stat-card { padding: 28px 18px; }
  .stat-card-num { font-size: 2rem; }

  .how-step { padding: 24px 16px; }
  .how-step-num { width: 52px; height: 52px; font-size: 1.2rem; }

  .track-card { padding: 28px 22px; }

  .footer-bottom p { font-size: 0.8rem; }
}

/*
  Global overflow safety. Body already has overflow-x: hidden (see the
  top of this file). These rules add a belt-and-suspenders layer so any
  new section we add inherits sane wrapping behavior and long unbreakable
  strings (emails, URLs, ZIP lists) in the success messages / form copy
  don't push the layout past the viewport.
*/
img, svg, video, canvas, iframe { max-width: 100%; height: auto; display: block; }
.form-success p,
.form-success h3,
.footer-brand p,
.field small,
.field-error {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/*
  Safe-area insets — pad the outer container so content never sits under
  the iPhone notch in landscape or the home-indicator at the bottom.
*/
@supports (padding: max(0px)) {
  .mobile-menu { padding-left: max(20px, env(safe-area-inset-left));
                 padding-right: max(20px, env(safe-area-inset-right));
                 padding-bottom: max(40px, calc(env(safe-area-inset-bottom) + 24px)); }
  #nav .container { padding-left: max(24px, env(safe-area-inset-left));
                    padding-right: max(24px, env(safe-area-inset-right)); }
  footer .container { padding-left: max(24px, env(safe-area-inset-left));
                      padding-right: max(24px, env(safe-area-inset-right)); }
}