/* ============================================================
   MERIDIAN — Marketing Website styles
   ------------------------------------------------------------
   - All brand colors, fonts, and spacing live in the :root
     "DESIGN TOKENS" block below — edit those to re-theme.
   - Sections are grouped and labeled to match index.html.
   ============================================================ */

/* ============================================================
   DESIGN TOKENS — edit brand colors / spacing here
   ============================================================ */
:root {
  /* Brand colors */
  --gold:        #B88C29;   /* metallic gold */
  --gold-deep:   #96701E;   /* darker gold for hovers / text on light */
  --gold-soft:   #F3E9D2;   /* pale gold wash for backgrounds */
  --navy:        #1B2233;   /* deep navy / charcoal */
  --navy-soft:   #2C3448;   /* lighter navy for cards on dark sections */

  /* Neutrals */
  --white:       #FFFFFF;
  --offwhite:    #FBFAF7;   /* warm off-white page base */
  --cream:       #F6F2EA;   /* subtle warm panel */
  --ink:         #1B2233;   /* primary text (navy) */
  --ink-soft:    #4A5163;   /* secondary text */
  --line:        #E9E4DA;   /* hairline borders */

  /* Type */
  --font-display: "Bricolage Grotesque", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Layout */
  --maxw: 1140px;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow-sm: 0 2px 10px rgba(27, 34, 51, 0.06);
  --shadow-md: 0 12px 36px rgba(27, 34, 51, 0.10);
  --gutter: clamp(20px, 5vw, 40px);
}

/* ============================================================
   BASE / RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
/* Offset for the sticky header when jumping to an anchor */
section[id], header[id] { scroll-margin-top: 88px; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--offwhite);
  line-height: 1.65;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--navy);
  line-height: 1.12;
  font-weight: 600;
  margin: 0 0 0.4em;
  letter-spacing: -0.01em;
}
p { margin: 0 0 1em; }

/* Accessible focus ring */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Skip link for keyboard / screen-reader users */
.skip-link {
  position: absolute; left: -999px; top: 0;
  background: var(--navy); color: #fff; padding: 12px 18px;
  border-radius: 0 0 8px 0; z-index: 200; font-weight: 600;
}
.skip-link:focus { left: 0; }

/* ============================================================
   LAYOUT HELPERS
   ============================================================ */
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }

section { padding: clamp(64px, 9vw, 112px) 0; }

.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 18px;
}

.section-head { max-width: 720px; margin-bottom: 52px; }
.section-head h2 { font-size: clamp(1.9rem, 4.2vw, 3rem); }
.lead { font-size: 1.12rem; color: var(--ink-soft); }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-body); font-weight: 600; font-size: 1rem;
  padding: 15px 28px; border-radius: 999px; cursor: pointer;
  border: 1.5px solid transparent; transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
  white-space: nowrap;
}
.btn-primary { background: var(--gold); color: var(--navy); box-shadow: 0 6px 18px rgba(184,140,41,0.28); }
.btn-primary:hover { background: var(--gold-deep); color: #fff; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(184,140,41,0.34); }
.btn-ghost { background: transparent; color: var(--navy); border-color: rgba(27,34,51,0.22); }
.btn-ghost:hover { border-color: var(--navy); background: var(--navy); color: #fff; transform: translateY(-2px); }
.btn-on-dark { background: var(--gold); color: var(--navy); }
.btn-on-dark:hover { background: #fff; color: var(--navy); transform: translateY(-2px); }
.btn-lg { padding: 18px 34px; font-size: 1.05rem; }

.text-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 600; color: var(--navy); border-bottom: 2px solid var(--gold);
  padding-bottom: 2px; transition: gap .2s ease, color .2s ease;
}
.text-link:hover { gap: 12px; color: var(--gold-deep); }

/* ============================================================
   HEADER / NAV
   ============================================================ */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(251,250,247,0.82);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: box-shadow .25s ease, border-color .25s ease, background .25s ease;
}
.site-header.scrolled { box-shadow: var(--shadow-sm); border-bottom-color: var(--line); }
.nav { display: flex; align-items: center; justify-content: space-between; height: 74px; }

/* Invisible strip that catches the cursor at the very top edge to reveal
   the auto-hidden nav. Zero-height/inert on touch devices (see below). */
#navHoverZone { position: fixed; top: 0; left: 0; right: 0; height: 14px; z-index: 99; }

/* --- Auto-hide nav (mouse/trackpad devices only) ---------------
   The header floats fixed over the hero and stays hidden above the
   viewport until the cursor comes near the very top of the page (or
   the header itself gets keyboard focus, or the mobile menu is open).
   Touch devices are untouched — no cursor there, so the header just
   stays sticky and visible as normal. See #navHoverZone in main.js. */
@media (hover: hover) and (pointer: fine) {
  .site-header {
    position: fixed; top: 0; left: 0; right: 0;
    transform: translateY(-100%);
    transition: transform .3s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease;
  }
  .site-header.nav-visible,
  .site-header:focus-within {
    transform: translateY(0);
  }
  /* The header no longer reserves space in normal flow (it's fixed),
     so give the hero the same top offset itself — the dark hero
     background fills that band instead of leaving a blank gap when
     the nav is hidden. (Extra specificity so this beats the later
     ".hero { padding: ... }" base rule regardless of source order.) */
  body .hero { padding-top: calc(74px + clamp(28px, 4vw, 44px)); }
}

/* Brand lockup: logo + wordmark. Logo is a transparent PNG (assets/meridian-logo.png). */
.brand { display: inline-flex; align-items: center; gap: 12px; }
.logo-img { height: 38px; width: auto; display: block; }
.footer-brand .logo-img { height: 42px; }
.brand-name { font-family: var(--font-display); font-weight: 600; font-size: 1.35rem; color: var(--navy); letter-spacing: 0.01em; }

.nav-links { display: flex; align-items: center; gap: 30px; list-style: none; margin: 0; padding: 0; }
.nav-links a { font-weight: 500; font-size: 0.98rem; color: var(--ink-soft); transition: color .18s ease; }
.nav-links a:hover { color: var(--navy); }

.nav-cta { display: flex; align-items: center; gap: 14px; }

/* Mobile menu toggle (hidden on desktop) */
.nav-toggle {
  display: none; background: none; border: 0; cursor: pointer;
  width: 44px; height: 44px; padding: 10px; border-radius: 8px;
}
.nav-toggle span { display: block; height: 2px; background: var(--navy); border-radius: 2px; transition: transform .25s ease, opacity .2s ease; }
.nav-toggle span + span { margin-top: 5px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================================================
   HERO — dark, alive, techy. Every effect here is plain CSS
   transform/opacity/gradient animation: no per-pixel procedural
   generation (SVG turbulence, displacement maps), so nothing can
   blur, misalign, or break at any screen size or browser — the
   exact class of bug that kept showing up before. The "generative"
   feel comes from layering (aurora + grain + gradient type +
   marquee), not from any single risky technique.
   ============================================================ */
.hero {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  padding: clamp(28px, 4vw, 44px) 0 0;
  color: #fff;
  background: linear-gradient(165deg, #232B40 0%, var(--navy) 55%, #141A28 100%);
}

/* --- Aurora mesh: two large blurred color fields that drift slowly.
     transform-only animation (translate + scale) — GPU-composited,
     no layout/paint recalculation, so it's cheap and always smooth. --- */
.hero-aurora { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.aurora {
  position: absolute; border-radius: 50%;
  filter: blur(70px);
  opacity: 0.55;
  will-change: transform;
}
.aurora-a {
  width: 55vw; height: 55vw; max-width: 640px; max-height: 640px;
  top: -12%; right: -8%;
  background: radial-gradient(circle, rgba(224,179,99,0.55), transparent 70%);
  animation: aurora-drift-a 22s ease-in-out infinite;
}
.aurora-b {
  width: 42vw; height: 42vw; max-width: 480px; max-height: 480px;
  bottom: -14%; left: -6%;
  background: radial-gradient(circle, rgba(90,110,160,0.40), transparent 70%);
  animation: aurora-drift-b 26s ease-in-out infinite;
}
@keyframes aurora-drift-a {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-4%, 5%) scale(1.08); }
}
@keyframes aurora-drift-b {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(5%, -4%) scale(1.1); }
}

/* --- Grain: a small pre-rendered noise tile, repeated. Always crisp —
     it's a real image at native resolution, not something computed
     and stretched. Adds texture instead of a flat gradient. --- */
.hero-grain {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: url("../assets/grain.png");
  background-size: 128px 128px;
  opacity: 0.5;
  mix-blend-mode: overlay;
}

/* --- Top announcement tag --- */
.hero-top { position: relative; z-index: 1; }
.hero-tag {
  display: inline-flex; align-items: center; gap: 10px;
  border: 1px solid rgba(255,255,255,0.16); border-radius: 999px;
  padding: 9px 18px 9px 16px; font-size: 0.86rem; font-weight: 500; color: #E4E7EF;
  background: rgba(255,255,255,0.04); transition: border-color .2s ease, background .2s ease;
}
.hero-tag:hover { border-color: rgba(216,168,86,0.5); background: rgba(216,168,86,0.08); }
.hero-tag-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--gold); flex: none;
  animation: hero-dot-pulse 2.4s ease-in-out infinite;
}
.hero-tag-mono {
  font-family: var(--font-mono); font-size: 0.74rem; font-weight: 500;
  letter-spacing: 0.06em; color: var(--gold); flex: none;
}
@keyframes hero-dot-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(184,140,41,0.5); }
  50%      { opacity: 0.6; box-shadow: 0 0 0 4px rgba(184,140,41,0); }
}

/* --- Centered composition: the sun behind the headline, everything
     stacked and centered beneath it. No side visual — the sun itself
     is the hero image now. --- */
.hero-inner {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding-top: clamp(20px, 5vw, 40px); padding-bottom: clamp(40px, 6vw, 64px);
}
.hero-copy { max-width: 700px; position: relative; z-index: 1; }
.hero h1 {
  color: #fff; font-size: clamp(2.4rem, 5.6vw, 4.2rem); font-weight: 600; line-height: 1.12;
  font-family: var(--font-display);
}
/* Gradient-fill headline accent — used only on "time back" and "Meridian".
   Sized up a touch so the accent words carry more visual weight than the
   connecting words — a bit of editorial rhythm instead of uniform type. */
.hero h1 .grad-text {
  font-size: 1.14em; font-weight: 700;
  background: linear-gradient(100deg, #FFE9A8 0%, var(--gold) 45%, #FFD65C 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 20px rgba(216, 168, 86, 0.35));
}
.hero-sub { font-size: 1.15rem; color: #C9CEDA; max-width: 46ch; margin: 22px auto 0; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px 20px; margin-top: 32px; }
.hero-trust { margin-top: 26px; font-size: 0.92rem; color: #9AA3B5; display: flex; align-items: center; justify-content: center; gap: 10px; }
.hero-trust .hero-tag-dot { animation: none; } /* the trust line's dot stays static */

/* --- The sun: crisp, pure-CSS radiating light behind the headline.
     Rays = a conic-gradient masked into a ring, so it's just flat color
     math — always sharp, no matter the screen size or pixel density.
     Sized off both viewport width AND height so it can't overflow on
     short or ultra-wide screens. --- */
.hero-sun {
  position: absolute; z-index: 0; pointer-events: none;
  top: -6%; left: 50%;
  width: clamp(320px, min(52vw, 56vh), 720px); aspect-ratio: 1;
  transform: translateX(-50%);
}
.hero-sun-rays {
  position: absolute; inset: 0; border-radius: 50%;
  background: repeating-conic-gradient(
    from 0deg,
    rgba(216, 168, 86, 0.28) 0deg 1deg,
    transparent 1deg 9deg
  );
  -webkit-mask-image: radial-gradient(circle, #000 0%, #000 14%, transparent 62%);
          mask-image: radial-gradient(circle, #000 0%, #000 14%, transparent 62%);
  animation: hero-rays-spin 110s linear infinite;
}
.hero-sun-core {
  position: absolute; top: 50%; left: 50%; width: 42%; height: 42%;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle, rgba(255,240,210,0.9) 0%, rgba(216,168,86,0.4) 45%, transparent 75%);
  filter: blur(4px);
  animation: hero-glow-pulse 6s ease-in-out infinite;
}
.hero-sun-mark {
  position: absolute; top: 50%; left: 50%;
  width: clamp(180px, 26vw, 400px); height: auto;
  transform: translate(-50%, -50%);
  opacity: 0.26;
  filter:
    drop-shadow(0 0 14px rgba(255, 255, 255, 0.4))
    drop-shadow(0 0 34px rgba(184, 140, 41, 0.45));
}
@keyframes hero-rays-spin { to { transform: rotate(360deg); } }
@keyframes hero-glow-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50%      { transform: translate(-50%, -50%) scale(1.08); }
}

/* --- Bottom marquee strip: who we build for — an infinite, seamless
     horizontal scroll. The track's content is duplicated once in the
     HTML so translating exactly -50% loops with no visible seam. --- */
.hero-strip {
  position: relative; z-index: 1;
  padding-top: 22px; padding-bottom: 22px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.hero-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.hero-marquee-track {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center; gap: clamp(28px, 4vw, 48px);
  width: max-content;
  animation: hero-marquee-scroll 26s linear infinite;
}
.hero-marquee-track li { color: #8A93A6; font-size: 0.88rem; font-weight: 600; letter-spacing: 0.03em; white-space: nowrap; }
@keyframes hero-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Outline button variant for use on the dark hero */
.btn-outline-dark { background: transparent; color: #fff; border-color: rgba(255,255,255,0.32); }
.btn-outline-dark:hover { border-color: var(--gold); background: rgba(216,168,86,0.1); color: var(--gold); transform: translateY(-2px); }

/* ============================================================
   PROBLEM
   ============================================================ */
.problem { background: var(--navy); color: #EDEFF4; }
.problem .eyebrow { color: var(--gold); }
.problem h2 { color: #fff; font-size: clamp(1.9rem, 4.4vw, 3rem); max-width: 16ch; }
.problem p { color: #C9CEDA; font-size: 1.14rem; max-width: 58ch; }
.problem .problem-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(32px, 5vw, 60px); align-items: start; }
.pain-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.pain-list li {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--navy-soft); border: 1px solid rgba(255,255,255,0.06);
  padding: 18px 20px; border-radius: var(--radius-sm);
}
.pain-list .pain-ic { color: var(--gold); flex: none; margin-top: 2px; }
.pain-list strong { color: #fff; display: block; font-weight: 600; }
.pain-list small { color: #AAB2C2; font-size: 0.92rem; }

/* ============================================================
   HOW IT WORKS — 4 step method
   ============================================================ */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; counter-reset: step; }
.step {
  position: relative; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 30px 26px; box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease;
}
.step:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.step-num {
  counter-increment: step; width: 46px; height: 46px; border-radius: 12px;
  display: grid; place-items: center; margin-bottom: 18px;
  background: var(--gold-soft); color: var(--gold-deep);
  font-family: var(--font-display); font-weight: 700; font-size: 1.25rem;
}
.step-num::before { content: counter(step, decimal-leading-zero); }
.step h3 { font-size: 1.18rem; margin-bottom: 8px; }
.step p { color: var(--ink-soft); font-size: 0.98rem; margin: 0; }
/* connecting line between steps on desktop */
.step:not(:last-child)::after {
  content: ""; position: absolute; top: 52px; right: -13px; width: 22px; height: 2px;
  background: repeating-linear-gradient(90deg, var(--gold) 0 5px, transparent 5px 10px);
}

/* ------------------------------------------------------------
   Missed-call animation embed (#how)
   ------------------------------------------------------------
   Spacing and caption only. The animation itself lives in a
   shadow root (js/meridian-flow.js) and carries its own styling,
   so nothing here can reach inside it - and nothing inside it can
   affect the rest of this file. That isolation is the whole point:
   restyling the site can't break the embed.
   ------------------------------------------------------------ */
.flow-embed { margin: clamp(40px, 6vw, 64px) 0 0; padding: 0; }
.flow-embed-lead {
  text-align: center; color: var(--ink-soft);
  font-size: 1.02rem; margin: 0 0 20px;
}
.flow-embed figcaption {
  text-align: center; color: var(--ink-soft);
  font-size: 0.9rem; margin-top: 16px;
}

/* ============================================================
   SOLUTIONS
   ============================================================ */
.solutions { background: var(--cream); }
.solution-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.solution {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 30px; display: flex; gap: 20px; align-items: flex-start;
  transition: transform .2s ease, box-shadow .2s ease;
}
.solution:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.solution .ic {
  flex: none; width: 52px; height: 52px; border-radius: 13px;
  display: grid; place-items: center; background: var(--gold-soft); color: var(--gold-deep);
}
.solution h3 { font-size: 1.2rem; margin-bottom: 6px; }
.solution p { color: var(--ink-soft); margin: 0; font-size: 0.98rem; }
.solutions-close { margin-top: 32px; font-size: 1.1rem; color: var(--gold-deep); font-family: var(--font-display); font-weight: 500; }

/* ============================================================
   WHO IT'S FOR
   ============================================================ */
.who-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(32px, 5vw, 60px); align-items: center; }
.who-tags { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.who-tags span {
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  padding: 10px 18px; font-weight: 500; font-size: 0.95rem; color: var(--navy);
  box-shadow: var(--shadow-sm);
}
.who-checks { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 14px; }
.who-checks li { display: flex; gap: 12px; align-items: flex-start; color: var(--ink-soft); }
.who-checks .ck { color: var(--gold-deep); flex: none; margin-top: 3px; }

/* WHO-IT'S-FOR ILLUSTRATION --------------------------------------
   A vector illustration of a full booking day (built in index.html
   as inline SVG) standing in for a photo — always crisp, on-brand,
   no stock image needed.
---------------------------------------------------------------- */
.who-visual {
  border-radius: 20px; overflow: hidden; border: 1px solid var(--line);
  background: linear-gradient(160deg, #fff, var(--cream));
  aspect-ratio: 5 / 4; display: grid; place-items: center;
  padding: clamp(16px, 3vw, 28px); box-shadow: var(--shadow-sm);
}
.who-illustration { width: 100%; height: auto; max-width: 380px; }

/* ============================================================
   WHY MERIDIAN
   ============================================================ */
.why { background: var(--navy); color: #EDEFF4; }
.why .eyebrow { color: var(--gold); }
.why h2 { color: #fff; font-size: clamp(1.9rem, 4.4vw, 3rem); }
.why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 60px); align-items: center; }
.why p { color: #C9CEDA; font-size: 1.14rem; }
.why-points { display: grid; gap: 18px; }
.why-point { display: flex; gap: 16px; align-items: flex-start; background: var(--navy-soft); border: 1px solid rgba(255,255,255,0.06); padding: 22px; border-radius: var(--radius-sm); }
.why-point .ic { flex: none; width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; background: rgba(184,140,41,0.16); color: var(--gold); }
.why-point h3 { color: #fff; font-size: 1.1rem; margin-bottom: 4px; }
.why-point p { margin: 0; font-size: 0.96rem; color: #AAB2C2; }

/* ============================================================
   PRICING
   ============================================================ */
.pricing .section-head { margin-inline: auto; text-align: center; }
.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
.price-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 34px 30px; display: flex; flex-direction: column; box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease;
}
.price-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.price-card.featured { border-color: var(--gold); box-shadow: 0 16px 40px rgba(184,140,41,0.18); position: relative; }
.price-card.featured::before {
  content: "Best place to start"; position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--gold); color: var(--navy); font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; padding: 5px 14px; border-radius: 999px; white-space: nowrap;
}
.price-card .tier { font-family: var(--font-display); font-size: 1.4rem; color: var(--navy); margin-bottom: 6px; }
.price-card .tier-kind { font-size: 0.82rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 14px; }
.price-card .tier-desc { color: var(--ink-soft); font-size: 0.98rem; flex: 1; }
/* Pricing is intentionally "Contact for pricing" — no dollar figures until real pilots are priced. */
.price-tag { font-family: var(--font-display); font-size: 1.15rem; color: var(--navy); margin: 18px 0 22px; }
.price-tag small { display: block; font-family: var(--font-body); font-size: 0.85rem; color: var(--ink-soft); font-weight: 400; margin-top: 2px; }
.price-card .btn { width: 100%; }
.pilot-note {
  margin-top: 30px; text-align: center; background: var(--gold-soft); border: 1px solid #E7D6AE;
  color: #6E5312; border-radius: var(--radius-sm); padding: 16px 22px 16px 46px; font-size: 0.98rem; font-weight: 500;
  max-width: 760px; margin-inline: auto; position: relative;
}
.pilot-note::before {
  content: ""; position: absolute; left: 20px; top: 50%; transform: translateY(-50%);
  width: 8px; height: 8px; border-radius: 50%; background: var(--gold-deep);
  box-shadow: 0 0 0 4px rgba(150,112,30,0.16);
}

/* ============================================================
   VISION
   ============================================================ */
.vision { background: var(--cream); }
.vision .container { max-width: 860px; text-align: center; }
.vision h2 { font-size: clamp(1.9rem, 4.4vw, 3rem); }
.vision p { font-size: 1.18rem; color: var(--ink-soft); }

/* ============================================================
   ABOUT THE FOUNDER
   ============================================================ */
.about-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(32px, 5vw, 60px); align-items: center; }
/* FOUNDER PHOTO SLOT --------------------------------------------
   Suggested image: a warm, approachable headshot of Avin.
   Replace .founder-visual in index.html with an <img> (square works best).
---------------------------------------------------------------- */
.founder-visual {
  border-radius: 20px; overflow: hidden; border: 1px solid var(--line);
  background: linear-gradient(160deg, var(--cream), #efe7d6);
  aspect-ratio: 1 / 1; box-shadow: var(--shadow-sm);
}
.founder-visual img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; display: block; }
.about p { font-size: 1.12rem; color: var(--ink-soft); }

/* ============================================================
   FINAL CTA
   ============================================================ */
.final-cta { background: var(--navy); color: #fff; text-align: center; }
.final-cta .container { max-width: 760px; }
.final-cta h2 { color: #fff; font-size: clamp(2rem, 5vw, 3.2rem); }
.final-cta p { color: #C9CEDA; font-size: 1.18rem; margin-bottom: 30px; }

/* ============================================================
   CONTACT / LEAD FORM
   ============================================================ */
.contact { background: var(--offwhite); }
.contact-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(36px, 5vw, 64px); align-items: start; }
.contact-info h2 { font-size: clamp(1.9rem, 4.4vw, 2.8rem); }
.contact-info p { color: var(--ink-soft); font-size: 1.1rem; }
.contact-list { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 16px; }
.contact-list li { display: flex; gap: 14px; align-items: center; color: var(--navy); font-weight: 500; }
.contact-list .ic { flex: none; width: 42px; height: 42px; border-radius: 11px; background: var(--gold-soft); color: var(--gold-deep); display: grid; place-items: center; }
.contact-list small { display: block; font-weight: 400; color: var(--ink-soft); font-size: 0.85rem; }

.lead-form {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(26px, 4vw, 40px); box-shadow: var(--shadow-md);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { margin-bottom: 18px; }
.field label { display: block; font-weight: 600; font-size: 0.92rem; color: var(--navy); margin-bottom: 7px; }
.field input, .field textarea {
  width: 100%; font-family: var(--font-body); font-size: 1rem; color: var(--ink);
  padding: 13px 15px; border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  background: var(--offwhite); transition: border-color .18s ease, background .18s ease;
}
.field input:focus, .field textarea:focus { border-color: var(--gold); background: #fff; outline: none; }
.field textarea { resize: vertical; min-height: 120px; }
.form-note { font-size: 0.85rem; color: var(--ink-soft); margin: 4px 0 18px; }
.lead-form .btn { width: 100%; }
.lead-form .btn:disabled { opacity: .7; cursor: wait; transform: none; }
.form-error { margin: 14px 0 0; font-size: 0.92rem; color: #A3361F; text-align: center; }
.solutions-close a { color: var(--gold-deep); font-weight: 600; border-bottom: 1px solid currentColor; }
.final-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
/* success message shown after (stubbed) submit */
.form-success { display: none; text-align: center; padding: 20px 0; }
.form-success.show { display: block; }
.form-success .check { width: 56px; height: 56px; border-radius: 50%; background: var(--gold-soft); color: var(--gold-deep); display: grid; place-items: center; margin: 0 auto 16px; }
.form-success h3 { margin-bottom: 6px; }
.form-success p { color: var(--ink-soft); margin: 0; }

/* ============================================================
   FOOTER
   ============================================================ */
/* Bottom padding keeps the last line clear of the chat bubble, which is
   fixed to the bottom-right corner and would otherwise sit on top of it. */
.site-footer { background: #141A28; color: #B9C0CE; padding: 56px 0 96px; }
.footer-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 30px; align-items: flex-start; }
.footer-brand { max-width: 320px; }
.footer-brand .brand-name { color: #fff; }
.footer-brand p { margin-top: 12px; font-size: 0.95rem; color: #97A0B2; }
.footer-cols { display: flex; flex-wrap: wrap; gap: 48px; }
.footer-col h4 { color: #fff; font-family: var(--font-body); font-size: 0.82rem; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 14px; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer-col a { color: #B9C0CE; font-size: 0.96rem; transition: color .18s ease; }
.footer-col a:hover { color: var(--gold); }
.footer-bottom {
  margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,0.08);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
  font-size: 0.88rem; color: #7E8798;
}
.footer-location { display: inline-flex; align-items: center; gap: 8px; }

/* ============================================================
   SCROLL-IN ANIMATION (subtle, tasteful) — respects reduced motion
   ============================================================ */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ============================================================
   RESPONSIVE — tablet
   ============================================================ */
@media (max-width: 960px) {
  /* Nav collapses to the hamburger menu here too — below ~960px there isn't
     room for the logo, all six links, and the CTA button on one line. */
  .nav-links {
    position: fixed; inset: 74px 0 auto 0;
    flex-direction: column; align-items: flex-start; gap: 4px;
    background: var(--offwhite); border-bottom: 1px solid var(--line);
    padding: 12px var(--gutter) 22px; box-shadow: var(--shadow-md);
    transform: translateY(-140%); transition: transform .3s ease; z-index: 90;
  }
  .nav-links.open { transform: translateY(0); }
  .nav-links a { display: block; width: 100%; padding: 12px 0; font-size: 1.05rem; }
  .nav-toggle { display: block; }
  .nav-cta .btn { display: none; }        /* hide header button when collapsed; menu + hero carry the CTA */

  .hero-copy { max-width: 100%; }
  .hero-sub { max-width: 52ch; }
  .hero-marquee-track { gap: 30px; }
  .steps { grid-template-columns: 1fr 1fr; }
  .step:not(:last-child)::after { display: none; }
  .problem .problem-grid,
  .why-grid,
  .who-grid,
  .about-grid,
  .contact-grid { grid-template-columns: 1fr; }
  .price-grid { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
  .price-card.featured { order: -1; }
}

/* ============================================================
   RESPONSIVE — mobile
   ============================================================ */
@media (max-width: 720px) {
  body { font-size: 16px; }
  .solution-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .hero-actions .btn { width: 100%; }
  .hero-actions { gap: 12px; }
  .hero-tag { font-size: 0.78rem; padding: 7px 14px 7px 12px; }
  .hero-tag-mono { display: none; }  /* keep the mobile tag short */
  .hero-strip { padding-top: 18px; padding-bottom: 18px; }
  .hero-marquee-track { gap: 22px; }
  .hero-marquee-track li { font-size: 0.76rem; }
  /* Shrink and lift the sun so its glow sits above the (now 3-line)
     headline instead of behind it. Hide the crisp logo mark specifically
     — a sharp image sitting mid-text is a real legibility problem, while
     the soft diffuse rays/glow read fine behind text at any overlap. */
  .hero-sun { width: 240px; top: -20%; }
  .hero-sun-mark { display: none; }
}