/* ════════════════════════════════════════════════════════════════════════
   AI420 — v8.7 PRE-LAUNCH POLISH
   Strategy A: Thin header + always-visible CTA · Remove bottom sticky
   + Mobile orbital overflow fix + cross-viewport polish
   Loaded AFTER ai420-mvp.css so overrides win on specificity ties.
   ════════════════════════════════════════════════════════════════════════ */

/* ─── 1. SLIMMER HEADER ON MOBILE ─────────────────────────────────────── */
@media (max-width: 880px) {
  .v8-nav-inner {
    padding: 8px 14px;
    gap: 12px;
  }
  .v8-nav-logo img {
    height: 32px;
    width: auto;
    max-width: 44px;
  }
  .v8-nav-toggle {
    width: 40px;
    height: 40px;
  }
  /* Header itself a touch tighter underline */
  .v8-nav.is-scrolled {
    box-shadow: 0 1px 0 rgba(15, 51, 32, 0.06);
  }
}

/* ─── 2. HEADER CTA — ALWAYS VISIBLE ON MOBILE ────────────────────────── */
/* The base rule hides .v8-nav-cta .btn on <880px unless .is-mobile-keep.
   We add that class to the header CTA in HTML. Size + density tuned for thumb. */
.v8-nav-cta .btn.is-mobile-keep {
  display: inline-flex;
}
@media (max-width: 880px) {
  .v8-nav-cta .btn.is-mobile-keep {
    padding: 9px 14px;
    font-size: 13px;
    min-height: 40px;
    line-height: 1.1;
    border-radius: 9999px;
    white-space: nowrap;
  }
}
@media (max-width: 380px) {
  .v8-nav-cta .btn.is-mobile-keep {
    padding: 8px 12px;
    font-size: 12.5px;
  }
  .v8-nav-inner { gap: 8px; }
  .v8-nav-logo img { height: 28px; max-width: 40px; }
}

/* ─── 3. KILL BOTTOM STICKY CTA (replaced by header CTA) ──────────────── */
.v8-sticky-cta { display: none !important; }
body.has-sticky-cta .v8-final-cta,
body.has-sticky-cta .v8-footer {
  padding-bottom: inherit;
}
/* Restore natural final-cta spacing on mobile */
@media (max-width: 767px) {
  body.has-sticky-cta .v8-final-cta { padding-bottom: 72px; }
  body.has-sticky-cta .v8-footer { padding-bottom: 32px; }
}

/* ─── 4. HERO ORBITAL — KILL MOBILE OVERFLOW ─────────────────────────── */
/* Problem: gmb (right) and web (left) satellites + their pill labels
   extend past the orbital frame and clip on narrow viewports.
   Fix: tighter max-width + pull satellites in + move side labels under their icons. */
@media (max-width: 767px) {
  .v8-orbital {
    max-width: 260px;
    /* Reserve room for the labels below side icons */
    margin-bottom: 12px;
  }
  /* Pull side satellites inward so labels fit */
  .v8-orbital-agent.is-gmb { left: 86%; }
  .v8-orbital-agent.is-web { left: 14%; }
  .v8-orbital-agent.is-email { top: 10%; }
  .v8-orbital-agent.is-ads { top: 88%; left: 71%; }
  .v8-orbital-agent.is-social { top: 88%; left: 29%; }

  /* Side labels (gmb right, web left) → drop them BELOW the icon */
  .v8-orbital-agent.is-gmb .v8-orbital-name {
    top: calc(100% + 4px);
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }
  .v8-orbital-agent.is-web .v8-orbital-name {
    top: calc(100% + 4px);
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }
  /* Slightly smaller pills on phones */
  .v8-orbital-name {
    font-size: 10px !important;
    padding: 3px 7px !important;
  }
}

/* Extra-narrow phones */
@media (max-width: 380px) {
  .v8-orbital { max-width: 230px; }
  .v8-orbital-agent { width: 48px; height: 48px; }
  .v8-orbital-core { width: 84px; height: 84px; }
  .v8-orbital-name {
    font-size: 9.5px !important;
    padding: 2px 6px !important;
  }
}

/* Hero text — tighten gap to compensate for smaller header */
@media (max-width: 767px) {
  .v8-hero { padding: 32px 0 56px; }
  .v8-hero-grid { gap: 28px; }
  .v8-hero-ctas { gap: 10px; }
  .v8-hero-ctas .btn { min-height: 46px; padding: 12px 18px; }
}

/* ─── 5. CONTAINER PADDING ON MOBILE (prevent edge clipping) ──────────── */
@media (max-width: 480px) {
  .container,
  .container-wide,
  .container-tight,
  .v8-container {
    padding-left: 18px;
    padding-right: 18px;
  }
}

/* ─── 6. CROSS-PAGE TYPOGRAPHY GUARDS (mobile readability) ───────────── */
@media (max-width: 480px) {
  /* Prevent H1 first-line clipping under sticky header */
  .v8-hero-h1 { padding-top: 4px; }
  /* Section heads slightly tighter */
  .v8-section-head { margin-bottom: 28px; }
}

/* ─── 7. PRINT/PUBLISH HYGIENE ────────────────────────────────────────── */
/* Hide scrollbars caused by 100vw children if any sneak through */
html, body { overflow-x: clip; }

/* ════════════════════════════════════════════════════════════════════════
   v8.8 — POST-LAUNCH POLISH PASS
   Footer breathing · trust bar · depth · reveal · magnetic · tilt
   ════════════════════════════════════════════════════════════════════════ */

/* ─── 8. FOOTER · 3-col on desktop, no max-width cap ─────────────────── */
@media (min-width: 768px) {
  .v8-footer-grid--v83 {
    grid-template-columns: 2.2fr 1fr 1fr !important;
    gap: 56px !important;
    max-width: none !important;
    margin: 0 !important;
  }
}
.v8-footer--v83 { padding-top: 56px; }
.v8-footer-col--brand .v8-footer-tagline { max-width: 38ch; margin: 0; }
@media (max-width: 767px) { .v8-footer-col--brand { margin-bottom: 8px; } }

/* ─── 9. FINAL-CTA · proper centered breathing ───────────────────────── */
.v8-final-cta {
  padding: 112px 0 96px !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.v8-final-cta .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.v8-final-cta h2 { margin: 0; }
.v8-final-cta p { margin: 0; max-width: 48ch; }
.v8-final-cta .btn { margin-top: 10px; }
@media (max-width: 767px) {
  .v8-final-cta { padding: 72px 0 80px !important; }
}
body.has-sticky-cta .v8-final-cta { padding-bottom: 96px !important; }
@media (max-width: 767px) {
  body.has-sticky-cta .v8-final-cta { padding-bottom: 80px !important; }
  body.has-sticky-cta .v8-footer { padding-bottom: 32px !important; }
}

/* ─── 10. TRUST BAR (between final-cta and footer) ───────────────────── */
.v8-trust-bar {
  background: var(--surface-base);
  border-top: 1px solid rgba(15, 51, 32, 0.07);
  padding: 16px 0;
}
.v8-trust-bar-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  justify-content: center;
  align-items: center;
  padding: 0 24px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: rgba(15, 51, 32, 0.55);
  text-align: center;
}
.v8-trust-bar-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.v8-trust-bar-item::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--brand-green-deep, #2D8049);
  opacity: 0.55;
  flex-shrink: 0;
}
@media (max-width: 480px) {
  .v8-trust-bar-inner { font-size: 10px; gap: 8px 16px; letter-spacing: 1.3px; }
  .v8-trust-bar-item::before { width: 4px; height: 4px; }
}

/* ─── 11. CARD DEPTH (subtle multi-layer shadow + border) ────────────── */
.v8-agent-card,
.v8-deliver-card--v83,
.v8-case-card {
  box-shadow:
    0 1px 2px rgba(15, 51, 32, 0.04),
    0 6px 20px -10px rgba(15, 51, 32, 0.09),
    0 22px 48px -22px rgba(15, 51, 32, 0.08) !important;
  transition: transform 360ms cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 360ms cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform;
}
@media (hover: hover) {
  .v8-agent-card:hover,
  .v8-deliver-card--v83:hover,
  .v8-case-card:hover {
    box-shadow:
      0 2px 4px rgba(15, 51, 32, 0.06),
      0 14px 32px -14px rgba(15, 51, 32, 0.14),
      0 32px 72px -28px rgba(15, 51, 32, 0.14) !important;
    transform: translateY(-3px);
  }
}

/* ─── 12. REVEAL ON SCROLL (.reveal class — JS adds .is-in) ──────────── */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 560ms cubic-bezier(0.2, 0.8, 0.2, 1),
              transform 560ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.reveal.is-in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ─── 13. MAGNETIC CTA (desktop only, primary buttons) ───────────────── */
@media (hover: hover) {
  .btn-primary {
    transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
                box-shadow 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
                background-color 220ms;
    will-change: transform;
  }
  .btn-primary:hover {
    box-shadow: 0 10px 24px -10px rgba(45, 128, 73, 0.55);
  }
}

/* ─── 14. SUBTLE TILT (desktop only — JS sets per-frame transform) ──── */
@media (hover: hover) {
  .v8-agent-card[data-motion="tilt"] {
    transform-style: preserve-3d;
  }
}

/* ─── 15. CTA SUBNOTE (e.g. "No Pitch. No Spam.") ────────────────────── */
.v8-cta-subnote {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: rgba(15, 51, 32, 0.48);
  margin-top: 4px;
}
.v8-final-cta .v8-cta-subnote { color: rgba(15, 51, 32, 0.45); }
.v8-footer--v83 .v8-cta-subnote { color: rgba(240, 237, 230, 0.55); margin-top: 6px; }

/* ─── 16. SECONDARY HERO BUTTON — slight depth on hover ──────────────── */
@media (hover: hover) {
  .btn-ghost:hover { background: rgba(15, 51, 32, 0.04); }
}