/* ──────────────────────────────────────────────────────────
   Chirpr – Homepage-only visual refresh (scoped by .home)
   Keep structure/content; modernize visuals like Turbo AI.
   Safe to remove without impacting other pages.
   ────────────────────────────────────────────────────────── */

/* ---------- Token overrides (inherit to children) ---------- */
.home{
  /* Palette */
  --brand:#7443e0;          /* slightly cooler purple */
  --brand-2:#9e7cff;        /* accent gradient stop   */
  --bg:#0c0f14;             /* inkier canvas          */
  --surface:rgba(255,255,255,.06);
  --text:#e8ecf3;
  --text-soft:#9aa6bf;

  /* Shape / depth */
  --radius:18px;
  --blur:14px;

  /* Layout constants (nav + ticker) */
  --nav-h:72px;             /* height of top nav      */
  --ticker-h:48px;          /* height of ticker bar   */
}

/* ===========================================================
   NAV (make header readable on dark glass)
   =========================================================== */
.home .site-nav{
  backdrop-filter:blur(16px) saturate(120%);
  background:color-mix(in oklab, var(--bg) 84%, white 6%);
  border-bottom:1px solid rgba(255,255,255,.08);
  box-shadow:0 2px 0 rgba(255,255,255,.06) inset;
  transition:box-shadow .3s, background .3s, border-color .3s;
  color:#fff;                 /* default text in nav */
}
.home .site-nav.scrolled{
  background:color-mix(in oklab, var(--bg) 76%, white 8%);
  box-shadow:0 10px 30px rgba(6,8,18,.45);
  border-bottom-color:rgba(255,255,255,.12);
}
.home .site-nav a { color:#fff !important; }                /* override base dark link color */
.home .wordmark{ letter-spacing:.02em; font-weight:800; color:#fff !important; }
.home .nav-inner img { filter:none; }                       /* ensure logo stays bright on dark */

/* ===========================================================
   TICKER (thinner, glassy) + spacing above hero
   =========================================================== */
.home #tickerBar{
  top:var(--nav-h);
  height:var(--ticker-h);
  line-height:var(--ticker-h);
  backdrop-filter:blur(10px) saturate(120%);
  background:color-mix(in oklab, var(--bg) 70%, white 10%);
  border-bottom:1px solid rgba(255,255,255,.08);
  font-size:.85rem;
  margin-bottom:0;             /* remove any accidental gap below */
}
.home .ticker-badge{ border-radius:999px }
.home .badge-live{
  background:linear-gradient(135deg, var(--brand), var(--brand-2));
}
.home .badge-sched{ background:#5a6cff; }

/* ===========================================================
   HERO (gradient field, adjusted top padding)
   - Tighten space under ticker by computing exact offset.
   =========================================================== */
.home .hero{
  color:#fff;
  position:relative;
  padding-top:calc(var(--nav-h) + var(--ticker-h) + 8px);  /* ↓ smaller extra spacing */
  padding-bottom:0;
}
.home .hero::before{
  content:""; position:absolute; inset:0; z-index:-2;
  background:
	radial-gradient(900px 480px at 20% 10%, color-mix(in oklab, var(--brand) 45%, transparent), transparent 60%),
	radial-gradient(800px 520px at 90% 0%, rgba(255,170,120,.18), transparent 60%),
	linear-gradient(180deg, #111424 0%, #0c0f14 60%);
}
.home .hero::after{ content:""; position:absolute; inset:0; z-index:-1; background:transparent; }

.home .hero .copy h1{
  font-size:clamp(2.6rem, 5.6vw, 4.6rem);
  line-height:1.08; font-weight:800; letter-spacing:-.01em;
}
.home .lead{ max-width:52ch; color:var(--text-soft) }

/* App Store badge spacing (more padding below) */
.home .store-links{
  margin-top:1.25rem;
  margin-bottom:3rem;         /* ↑ add breathing room under the badge */
  justify-content:flex-start; /* keep left-aligned in hero */
}
@media (max-width: 640px){
  .home .store-links{ margin-bottom:3.5rem; } /* a bit more on phones */
}

/* Phone mockup */
.home .mockup{
  width:clamp(300px,34vw,500px);
  border-radius:28px; overflow:hidden;
  box-shadow:0 20px 50px rgba(8,10,20,.45);
}

/* Launch banner → pill */
.home .launch-banner{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.42rem .7rem; border-radius:999px;
  background:linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%);
  box-shadow:0 8px 20px rgba(116,67,224,.35);
}

/* ===========================================================
   FEATURE CARDS
   =========================================================== */
.home .card{
  background:var(--surface);
  border:1px solid rgba(255,255,255,.10);
  border-radius:var(--radius);
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset, 0 12px 30px rgba(8,10,20,.35);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  position:relative; overflow:hidden;
}
.home .card::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
	linear-gradient(120deg, rgba(255,255,255,.18), rgba(255,255,255,0) 30%),
	radial-gradient(600px 200px at -10% -10%, rgba(158,124,255,.18), transparent 60%);
  mix-blend-mode:overlay;
}
.home .card:hover{
  transform:translateY(-6px);
  border-color:rgba(255,255,255,.22);
  box-shadow:0 18px 40px rgba(8,10,20,.55);
}

/* ===========================================================
   COMPARE CTA
   =========================================================== */
.home .compare-cta{
  width:min(1100px, calc(100% - 32px));
  background:color-mix(in oklab, white 6%, var(--bg) 94%);
  border:1px solid rgba(255,255,255,.10);
  border-radius:24px;
  backdrop-filter:blur(18px) saturate(120%);
}
.home .compare-cta .title{ letter-spacing:.04em }
.home .compare-platforms a{
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.02);
  color:#fff; font-weight:700;
}
.home .compare-platforms a:hover{
  background:linear-gradient(135deg, var(--brand), var(--brand-2));
  border-color:transparent;
}

/* ===========================================================
   CTA SECTION
   =========================================================== */
.home .cta::after{
  background:linear-gradient(180deg, color-mix(in oklab, var(--brand) 85%, black 15%), rgba(124,63,214,.80));
}

/* ===========================================================
   MOTION (respect reduced motion)
   =========================================================== */
.home .reveal{ opacity:.001; transform:translateY(12px); transition:opacity .32s ease, transform .32s ease; }
.home .reveal.is-visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .home *{ animation:none !important; transition:none !important; }
}

/* ===========================================================
   MOBILE TWEAKS (homepage-only)
   =========================================================== */
@media (max-width: 640px){
  .home .hero{ padding-top:calc(var(--nav-h) + var(--ticker-h) + 4px); } /* keep it tight on phones */
}

/* Force H1 to exactly 2 lines on desktop:
   "Real-time connection"  ↵
   "for every live event." */
@media (min-width: 1025px){
  .home .hero .copy h1{
	max-width: 20ch;       /* fits “Real-time connection” on one line */
  }
}

/* nicer wrapping on smaller screens */
@media (max-width: 1024px){
  .home .hero .copy h1{
	text-wrap: balance;    /* modern browsers; safe no-op if unsupported */
  }
}

/* ===== Force the hero H1 to two lines on desktop ===== */
@media (min-width: 1200px){
  /* let the text column be wider so two lines are possible */
  .home .hero {
	grid-template-columns: minmax(600px, 760px) minmax(380px, 520px);
	column-gap: 6vw;
  }
  .home .hero .copy{
	max-width: 760px;     /* override the 560px cap in base CSS */
  }

  /* now cap the headline to two lines */
  .home .hero .copy h1{
	max-width: 26ch;      /* adjust to 25–27ch if needed on your screen */
	line-height: 1.08;
  }

  /* optional: keep the lead nice and narrow under the wider H1 */
  .home .hero .lead{
	max-width: 52ch;
  }
}

/* nicer wrapping below desktop */
@media (max-width: 1199.98px){
  .home .hero .copy h1{ text-wrap: balance; }
}

/* App screenshot: square bottom, rounded top */
.home .mockup{
  width:clamp(300px,34vw,500px);
  border-radius:28px 28px 0 0;  /* <-- only top-left/top-right */
  overflow:hidden;
  box-shadow:0 20px 50px rgba(8,10,20,.45);
}

/* ===== Testimonial typography refresh (fonts only) ===== */
.home .quotes blockquote{
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-style: italic;
  font-weight: 600;                 /* confident but not shouty */
  font-size: clamp(1.05rem, 1.1vw + .6rem, 1.35rem);
  line-height: 1.55;
  letter-spacing: 0.005em;          /* tiny tracking for italics */
  text-wrap: balance;               /* nicer multi-line wrapping */
  font-optical-sizing: auto;        /* uses Inter Variable opsz */
  -webkit-font-smoothing: antialiased;
  color: var(--text);
}

.home .quotes figcaption{
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 500;                 /* medium label feel */
  font-size: .95rem;
  letter-spacing: .02em;
  color: var(--text-soft);
}

/* optional—make the “User” chip feel more intentional */
.home .quotes figcaption span{
  font-weight: 600;
  letter-spacing: .01em;
}