/* =====================================================================
   LaunchPad Marketing - shared stylesheet
   Design tokens + the shell rules (header, nav, buttons, footer) that were
   byte-identical on all 9 WordPress pages. Ported verbatim; not restyled.
   ===================================================================== */

/* =====================================================================
   LaunchPad Marketing - Colors & Type Tokens
   Design system foundation. Import this CSS into any HTML artifact.
   ===================================================================== */

/* ---------- Webfonts ---------- */
/* All brand fonts delivered via Google Fonts CDN. @import must be the first
   statement in the file or browsers ignore it. Unbounded = display/headline,
   Inter = body, Bebas Neue = condensed-hero option. */
@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@200..900&family=Montserrat:wght@400;500;600;700;800;900&family=Inter:wght@400;500;600;700&family=Bebas+Neue&display=swap');

:root {
  /* =========================================================
     COLOR - BRAND
     Two primary brand colors per founder + space-navy ground.
     ========================================================= */
  --brand-cyan:        #40def3; /* Primary 1 - rocket body, headlines */
  --brand-green:       #6ced40; /* Primary 2 - accent, "go" CTA */
  --brand-cyan-soft:   #8ce9f7;
  --brand-cyan-deep:   #1bb8d4;
  --brand-green-soft:  #a4ef7e;
  --brand-green-deep:  #4cba24;

  /* Signature gradient - runs through the rocket P-trail in the logo */
  --brand-gradient:        linear-gradient(135deg, #40def3 0%, #6ced40 100%);
  --brand-gradient-soft:   linear-gradient(135deg, rgba(64,222,243,0.18) 0%, rgba(108,237,64,0.18) 100%);
  --brand-gradient-text:   linear-gradient(100deg, #40def3 0%, #6ced40 100%);
  --brand-gradient-radial: radial-gradient(circle at 30% 30%, #40def3 0%, #6ced40 70%);

  /* =========================================================
     COLOR - SPACE / NEUTRAL GROUND
     The brand lives on a deep navy "night sky".
     ========================================================= */
  --space-900: #050d1c; /* deepest, page edge   */
  --space-800: #0a1729; /* primary dark surface */
  --space-700: #0f2138; /* card on dark         */
  --space-600: #14304f; /* raised card / hover  */
  --space-500: #1f4470; /* divider on dark      */
  --space-400: #355d8e; /* muted ui on dark     */

  /* Light ground (for "day" pages, forms, blog posts) */
  --paper-0:   #ffffff;
  --paper-50:  #f6f8fb;
  --paper-100: #eef2f7;
  --paper-200: #dde4ee;
  --paper-300: #c1cbd9;

  /* =========================================================
     COLOR - SEMANTIC FOREGROUND / BACKGROUND
     Reference these in components; never hardcode hex.
     ========================================================= */
  --bg-page:        var(--space-900);
  --bg-surface:     var(--space-800);
  --bg-raised:      var(--space-700);
  --bg-overlay:     rgba(5, 13, 28, 0.72);

  --fg-1:           #ffffff;            /* highest emphasis on dark */
  --fg-2:           #d6e2f0;            /* body on dark             */
  --fg-3:           #8aa3c2;            /* muted on dark            */
  --fg-4:           #5b7493;            /* disabled on dark         */
  --fg-on-light-1:  #0a1729;
  --fg-on-light-2:  #3b4d63;
  --fg-on-light-3:  #6c7d92;

  --border-1:       rgba(255,255,255,0.08);
  --border-2:       rgba(255,255,255,0.14);
  --border-strong:  rgba(64,222,243,0.45);

  /* Status / semantic */
  --success:        #6ced40;
  --info:           #40def3;
  --warning:        #ffb547;
  --danger:         #ff5d6c;
  --review-star:    #ffc83d; /* Google reviews 5★ */

  /* =========================================================
     SHADOW & GLOW
     Brand often uses cyan/green glow over deep navy.
     ========================================================= */
  --shadow-1: 0 1px 2px rgba(0,0,0,0.40);
  --shadow-2: 0 4px 14px rgba(0,0,0,0.35);
  --shadow-3: 0 12px 32px rgba(0,0,0,0.45);
  --shadow-card-light: 0 6px 18px rgba(10,23,41,0.10), 0 1px 2px rgba(10,23,41,0.06);
  --glow-cyan:  0 0 24px rgba(64,222,243,0.55), 0 0 4px rgba(64,222,243,0.85);
  --glow-green: 0 0 24px rgba(108,237,64,0.45), 0 0 4px rgba(108,237,64,0.85);

  /* =========================================================
     RADIUS
     ========================================================= */
  --radius-xs:  4px;
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  18px;
  --radius-xl:  24px;
  --radius-2xl: 36px;
  --radius-pill: 999px;

  /* =========================================================
     SPACING SCALE (4pt)
     ========================================================= */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* =========================================================
     TYPE - FAMILIES
     Display: Unbounded (brand display family, self-hosted) - heavy
     geometric headlines & section titles. Montserrat is the fallback.
     Body: Inter 400/500/600.
     Hero option: Bebas Neue (ultra-condensed) when a single
     punchy line is wanted in the LAUNCH-YOUR-GROWTH style.
     ========================================================= */
  --font-display: 'Unbounded', 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-hero:    'Bebas Neue', 'Unbounded', 'Impact', sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace;

  /* =========================================================
     TYPE - SCALE
     ========================================================= */
  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-base: 16px;
  --fs-md:   18px;
  --fs-lg:   20px;
  --fs-xl:   24px;
  --fs-2xl:  32px;
  --fs-3xl:  44px;
  --fs-4xl:  60px;
  --fs-5xl:  84px;
  --fs-6xl:  112px;

  --lh-tight: 1.05;
  --lh-snug:  1.2;
  --lh-base:  1.5;
  --lh-loose: 1.7;
}

/* =====================================================================
   SEMANTIC TYPOGRAPHY ROLES
   Use these classes in markup. They map to design intent, not size.
   ===================================================================== */

.t-hero,
h1.hero {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(40px, 6.5vw, var(--fs-5xl));
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--fg-1);
}

.t-hero-condensed {
  /* The ultra-bold caps banner style: "LAUNCH YOUR BUSINESS GROWTH" */
  font-family: var(--font-hero);
  font-weight: 400;
  font-size: clamp(56px, 9vw, var(--fs-6xl));
  line-height: 0.95;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--brand-cyan);
}

.t-display, h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-4xl);
  line-height: var(--lh-tight);
  letter-spacing: -0.015em;
}

.t-h1, h2.section {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-3xl);
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
}

.t-h2, h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  letter-spacing: -0.005em;
}

.t-h3, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
}

.t-h4, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
}

.t-eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand-cyan);
}

.t-lead, p.lead {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-lg);
  line-height: var(--lh-base);
  color: var(--fg-2);
}

.t-body, p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--fg-2);
}

.t-small, small {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
  color: var(--fg-3);
}

.t-tiny {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  line-height: 1.35;
  color: var(--fg-3);
}

.t-quote, blockquote {
  font-family: var(--font-body);
  font-weight: 400;
  font-style: italic;
  font-size: var(--fs-md);
  line-height: var(--lh-loose);
  color: var(--fg-2);
  border-left: 3px solid var(--brand-cyan);
  padding-left: var(--space-4);
}

.t-scripture {
  /* Founder's scripture line in the footer */
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--fs-md);
  line-height: var(--lh-loose);
  color: var(--fg-3);
}

code, .t-code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: rgba(64,222,243,0.10);
  color: var(--brand-cyan-soft);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-xs);
}

/* Utility: gradient fill on text for headline highlights */
.t-gradient {
  background: var(--brand-gradient-text);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  /* Slight padding so descenders don't clip */
  padding-bottom: 0.05em;
}

/* Utility: glow on key text */
.t-glow-cyan  { text-shadow: 0 0 18px rgba(64,222,243,0.55); }
.t-glow-green { text-shadow: 0 0 18px rgba(108,237,64,0.50); }

/* ---------- Shell rules shared by every page ---------- */

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; background: #050b14; font-family: var(--font-body); }

html { scroll-behavior: smooth; }

body { overflow-x: hidden; }

img { max-width: 100%; display: block; }

a { color: inherit; }

::-webkit-scrollbar { width: 10px; }

::-webkit-scrollbar-track { background: #0a1729; }

::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #40def3, #6ced40); border-radius: 999px; }

.page-bg {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(1100px 760px at 84% 0%, rgba(64,222,243,0.11), transparent 56%),
    radial-gradient(1000px 820px at 4% 34%, rgba(108,237,64,0.08), transparent 56%),
    radial-gradient(1200px 920px at 94% 74%, rgba(64,222,243,0.07), transparent 56%),
    radial-gradient(900px 700px at 12% 96%, rgba(108,237,64,0.06), transparent 56%),
    linear-gradient(180deg, #050b14 0%, #081523 46%, #060f1d 100%);
}

@keyframes twinkle { 0% { opacity: 0.7; } 100% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

.container { position: relative; max-width: 1200px; margin: 0 auto; }

.section { position: relative; overflow: hidden; background: transparent; color: #fff; padding: 96px 48px; }

.section > .container { z-index: 1; }

.starfield {
  position: absolute; inset: 0; pointer-events: none;
  animation: twinkle 6s ease-in-out infinite alternate;
  background-image:
    radial-gradient(1px 1px at 4% 12%, rgba(64,222,243,0.7), transparent 60%),
    radial-gradient(1.4px 1.4px at 14% 64%, rgba(255,255,255,0.75), transparent 60%),
    radial-gradient(1px 1px at 28% 22%, rgba(108,237,64,0.55), transparent 60%),
    radial-gradient(1.6px 1.6px at 38% 6%, rgba(255,255,255,0.85), transparent 60%),
    radial-gradient(1px 1px at 46% 78%, rgba(64,222,243,0.6), transparent 60%),
    radial-gradient(1.2px 1.2px at 56% 38%, rgba(255,255,255,0.7), transparent 60%),
    radial-gradient(1px 1px at 64% 14%, rgba(108,237,64,0.55), transparent 60%),
    radial-gradient(1.4px 1.4px at 72% 58%, rgba(64,222,243,0.55), transparent 60%),
    radial-gradient(1px 1px at 80% 88%, rgba(255,255,255,0.6), transparent 60%),
    radial-gradient(1.6px 1.6px at 88% 30%, rgba(255,255,255,0.7), transparent 60%),
    radial-gradient(1px 1px at 94% 70%, rgba(108,237,64,0.5), transparent 60%),
    radial-gradient(1px 1px at 22% 92%, rgba(255,255,255,0.55), transparent 60%),
    radial-gradient(1.2px 1.2px at 48% 50%, rgba(64,222,243,0.5), transparent 60%);
}

.starfield.dim { opacity: 0.6; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 14px; border-radius: 999px;
  font-family: var(--font-display); font-weight: 700;
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
}

.eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.eyebrow.cyan  { color: #40def3; background: rgba(64,222,243,0.1); border: 1px solid rgba(64,222,243,0.35); }

.eyebrow.green { color: #6ced40; background: rgba(108,237,64,0.1); border: 1px solid rgba(108,237,64,0.35); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-display); font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  border-radius: 999px; cursor: pointer; text-decoration: none;
  border: 1.5px solid transparent; white-space: nowrap;
  transition: background 220ms ease, color 220ms ease, box-shadow 220ms ease, transform 80ms ease;
}

.btn.sm { padding: 10px 18px; font-size: 12px; }

.btn.md { padding: 14px 24px; font-size: 13px; }

.btn.lg { padding: 17px 30px; font-size: 14px; }

.btn-primary {
  background: linear-gradient(135deg, #40def3, #6ced40);
  color: #0a1729;
  box-shadow: 0 0 24px rgba(64,222,243,0.45), 0 6px 18px rgba(0,0,0,0.25);
}

.btn-primary:hover {
  background: linear-gradient(#0a1729, #0a1729) padding-box, linear-gradient(135deg, #40def3, #6ced40) border-box;
  color: #40def3;
  box-shadow: 0 0 30px rgba(64,222,243,0.55), 0 6px 18px rgba(0,0,0,0.3);
}

.btn-primary:active { transform: scale(0.97); }

.logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }

.logo img { filter: drop-shadow(0 0 12px rgba(64,222,243,0.4)); }

.logo .wordmark {
  font-family: var(--font-display); font-weight: 900; color: #fff;
  text-transform: uppercase; letter-spacing: 0.02em; line-height: 1;
}

.logo .wordmark .sub { color: #6ced40; letter-spacing: 0.18em; margin-top: 2px; }

.site-header.scrolled {
  padding: 14px 28px;
  background: rgba(5,13,28,0.88);
  border-bottom: 1px solid rgba(64,222,243,0.18);
}

.desktop-nav {
  display: flex; align-items: center; gap: 30px;
  font-family: var(--font-display); font-weight: 600; font-size: 13px;
  letter-spacing: 0.08em; text-transform: uppercase;
}

.desktop-nav a { color: #d6e2f0; text-decoration: none; transition: color 150ms ease; }

.desktop-nav a:hover { color: #40def3; }

.nav-toggle {
  display: none; flex-direction: column; gap: 5px; padding: 10px;
  background: transparent; border: 1px solid rgba(255,255,255,0.18);
  border-radius: 10px; cursor: pointer;
}

.nav-toggle span { display: block; width: 22px; height: 2px; background: #fff; border-radius: 2px; }

.mobile-menu {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(5,13,28,0.97);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  display: none; flex-direction: column; padding: 24px;
}

.mobile-menu.open { display: flex; }

.mobile-menu-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: auto; }

.mobile-menu-close {
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid rgba(255,255,255,0.18); border-radius: 10px;
  cursor: pointer; color: #fff; font-size: 26px; line-height: 1;
}

.mobile-menu nav { display: flex; flex-direction: column; gap: 4px; margin: auto 0; }

.mobile-menu nav a {
  font-family: var(--font-display); font-weight: 800; font-size: 34px; letter-spacing: -0.01em;
  color: #fff; text-decoration: none; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,0.08);
}

.mobile-menu .btn { margin-top: auto; width: 100%; font-size: 16px; padding: 18px; }

.section-seam { position: relative; height: 0; max-width: 1100px; margin: 0 auto; padding: 0 48px; }

.section-seam > div {
  height: 1px; width: 100%;
  background: linear-gradient(90deg, transparent, rgba(64,222,243,0.55) 35%, rgba(108,237,64,0.55) 65%, transparent);
  box-shadow: 0 0 22px rgba(64,222,243,0.35);
}

.site-footer { position: relative; overflow: hidden; background: transparent; color: #d6e2f0; }

.v6-footer-top { position: relative; max-width: 1200px; margin: 0 auto; padding: 72px 48px 48px; display: grid; grid-template-columns: 1.2fr 1fr; gap: 56px; align-items: center; border-bottom: 1px solid rgba(255,255,255,0.08); }

.footer-scripture { font-family: var(--font-body); font-style: italic; color: #cfe0f2; font-size: 17px; line-height: 1.7; margin: 22px 0 6px; max-width: 440px; }

.footer-ref { font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: #40def3; }

.footer-news-title { font-family: var(--font-display); font-weight: 800; font-size: 20px; color: #fff; margin-bottom: 16px; }

.footer-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.footer-form input { font-family: var(--font-body); font-size: 14px; padding: 13px 16px; border-radius: 10px; border: 1.5px solid rgba(64,222,243,0.25); background: rgba(255,255,255,0.04); color: #fff; outline: none; width: 100%; }

.footer-form input::placeholder { color: #6c7d92; }

.footer-form .full { grid-column: 1 / -1; }

.footer-form button { grid-column: 1 / -1; font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; padding: 14px; border-radius: 10px; border: none; cursor: pointer; background: linear-gradient(135deg,#40def3,#6ced40); color: #06121c; }

.footer-sent { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: 999px; background: rgba(108,237,64,0.15); border: 1px solid rgba(108,237,64,0.5); color: #6ced40; font-family: var(--font-display); font-weight: 700; }

.v6-footer-cols { position: relative; max-width: 1200px; margin: 0 auto; padding: 40px 48px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; }

.v6-footer-cols .col-title { font-family: var(--font-display); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 0.12em; color: #fff; margin-bottom: 16px; }

.v6-footer-cols a { display: block; color: #8aa3c2; font-size: 14px; text-decoration: none; padding: 6px 0; font-family: var(--font-body); }

.v6-footer-cols a:hover { color: #40def3; }

.footer-bottom { position: relative; max-width: 1200px; margin: 0 auto; padding: 18px 48px 28px; border-top: 1px solid rgba(255,255,255,0.08); font-family: var(--font-body); font-size: 13px; color: #5b7493; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; }

.footer-bottom a { color: #5b7493; text-decoration: none; }

.btn:focus, .btn:focus-visible, .btn:active { outline: none !important; }

.nav-toggle:focus, .mobile-menu-close:focus { outline: none !important; }

.footer-form input:focus { outline: none !important; box-shadow: none !important; }

.btn-primary:hover { background: linear-gradient(#0a1729, #0a1729) padding-box, linear-gradient(135deg, #40def3, #6ced40) border-box !important; color: #40def3 !important; }

.v6-footer-cols a { position: relative; width: fit-content; }

.v6-footer-cols a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 2px; background: linear-gradient(90deg,#40def3,#6ced40); transform: scaleX(0); transform-origin: left; transition: transform 200ms ease; }

.v6-footer-cols a:hover::after { transform: scaleX(1); }

.desktop-nav a:not(.btn) { position: relative; }

.desktop-nav a:not(.btn)::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; border-radius: 2px; background: linear-gradient(90deg,#40def3,#6ced40); transform: scaleX(0); transform-origin: left; transition: transform 200ms ease; }

.desktop-nav a:not(.btn):hover::after { transform: scaleX(1); }