/* ═══════════════════════════════════════════════════════════════════════════
   TRACKFAST — public marketing site (trackfast.tv)

   Structure follows trackcast.tv, the same system TRACKSTUDIO and
   TRACK DIGITAL are built on: fixed header that goes solid on scroll, hero
   with a pill badge and a two-line Aldrich headline, count-driven card grids,
   0.5rem buttons.

   Palette is TRACKFAST's own: the logo's pink on a near-black with a faint
   magenta bias, so the neutrals sit under the accent instead of fighting it.

   This file styles ONLY the marketing site. The control room app loads
   trackfast-phase4/network/phase6.css and is not affected by anything here.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --accent:#FC0271;          /* sampled from the logo artwork */
  --accent-hover:#FF3D90;
  --accent-ink:#12000A;      /* text ON the accent — white is only 3.8:1 here */
  --bg:#0A0609;
  --bg-nav:rgba(10,6,9,0.95);
  --bg-card:#150E12;
  --bg-card-hover:#1C1318;
  --text:#ffffff;
  --text-secondary:#b3a4ab;
  --muted:#7e6d75;
  --border:rgba(255,255,255,0.10);
  --border-hover:rgba(252,2,113,0.55);
  --live:#2ECC71;
  --radius:0.5rem;
  --radius-lg:0.75rem;
  --font-heading:'Aldrich',sans-serif;
  --font-body:'Roboto',sans-serif;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

body{
  font-family:var(--font-body);
  background:var(--bg);
  background-image:radial-gradient(ellipse 90% 50% at 50% 0%,rgba(252,2,113,0.13),transparent 70%);
  background-repeat:no-repeat;
  color:var(--text);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  overflow-x:hidden;
}
a{color:inherit}
img{max-width:100%;height:auto}
::selection{background:var(--accent);color:var(--accent-ink)}

.container{max-width:1200px;margin:0 auto;padding:0 1rem}

/* ── BUTTONS ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;
  font-family:var(--font-body);font-weight:700;text-transform:uppercase;letter-spacing:0.05em;
  text-decoration:none;border:none;cursor:pointer;transition:all 0.2s;
  padding:0.875rem 2rem;border-radius:var(--radius);font-size:0.9375rem;
  background:var(--accent);color:var(--accent-ink);white-space:nowrap;
}
.btn:hover{background:var(--accent-hover);color:var(--accent-ink);box-shadow:0 0 24px rgba(252,2,113,0.35)}
.btn-outline{background:transparent;border:1px solid var(--border);color:var(--text)}
.btn-outline:hover{background:rgba(252,2,113,0.10);border-color:var(--border-hover);color:var(--accent);box-shadow:none}
.btn-sm{padding:0.5rem 1rem;font-size:0.75rem}
/* Signups-closed state: dashed and unfilled, so it reads as "not yet" rather
   than as a button that failed to work. */
.btn-soon{
  background:transparent;border:1px dashed rgba(252,2,113,0.55);
  color:var(--accent);cursor:default;box-shadow:none;
}
.btn-soon:hover{background:transparent;color:var(--accent);box-shadow:none}

/* ── HEADER ── */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:50;
  padding:0.75rem 0;transition:all 0.3s;background:transparent;
}
.site-header.scrolled{
  background:var(--bg-nav);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);padding:0.5rem 0;
}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:56px}
.logo{display:flex;align-items:center;flex-shrink:0;text-decoration:none}
/* This lockup is ~3.2:1, much squarer than the other TRACK marks, so it needs
   more height than they do to read at the same optical size. */
.logo img{height:34px;width:auto;display:block}
.nav-desktop{display:none;align-items:center;gap:1.75rem}
.nav-link{
  font-size:0.75rem;text-transform:uppercase;letter-spacing:0.15em;font-weight:700;
  text-decoration:none;color:rgba(255,255,255,0.78);transition:color 0.2s;padding:0.5rem 0;
}
.nav-link:hover{color:var(--accent)}
.header-actions{display:flex;align-items:center;gap:0.625rem}
@media (min-width:1024px){
  .nav-desktop{display:flex}
  .logo img{height:44px}
}

/* ── HERO ── */
.hero{position:relative;padding:9rem 0 4.5rem;text-align:center}
.hero-badge{
  display:inline-flex;align-items:center;gap:0.5rem;
  background:rgba(252,2,113,0.10);border:1px solid rgba(252,2,113,0.35);
  border-radius:4px;padding:0.375rem 1rem;margin-bottom:1.75rem;
  font-family:var(--font-heading);font-size:0.75rem;color:var(--accent);
  letter-spacing:0.15em;text-transform:uppercase;
}
.hero-badge .pulse{
  width:0.5rem;height:0.5rem;border-radius:50%;background:var(--accent);
  animation:pulse 2s infinite;flex-shrink:0;
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.35}}
.hero h1{
  font-family:var(--font-heading);font-weight:400;
  font-size:clamp(1.875rem,5.5vw,3.75rem);line-height:1.1;
  /* Wide enough that "motorsports FAST channel" holds one line at full size —
     the <br> in the markup is the only break the headline should take. */
  text-transform:uppercase;margin:0 auto 1.5rem;max-width:min(100%,62rem);text-wrap:balance;
}
.hero h1 .accent{color:var(--accent)}
.hero .lead{
  font-size:clamp(0.9375rem,1.5vw,1.125rem);color:var(--text-secondary);
  line-height:1.7;max-width:680px;margin:0 auto 2.25rem;
}
.hero .lead b{color:#fff}
.hero-actions{display:flex;flex-wrap:wrap;gap:0.75rem;justify-content:center}

/* The parting shot under the buttons. */
.kicker{
  display:inline-block;max-width:640px;margin:2.75rem auto 0;
  padding:1rem 1.75rem;border-radius:var(--radius);
  border:1px solid rgba(252,2,113,0.28);background:rgba(252,2,113,0.06);
  font-size:clamp(0.9375rem,1.4vw,1.0625rem);line-height:1.65;color:var(--text);
}
.kicker .hot{color:var(--accent);font-weight:700}

/* ── SECTIONS ── */
section.band{padding:4.5rem 0;border-top:1px solid var(--border)}
.section-label{
  font-family:var(--font-heading);font-size:0.75rem;letter-spacing:0.2em;
  text-transform:uppercase;color:var(--accent);text-align:center;margin-bottom:0.75rem;
}
.section-title{
  font-family:var(--font-heading);font-weight:400;
  font-size:clamp(1.5rem,3.5vw,2.25rem);line-height:1.2;text-transform:uppercase;
  text-align:center;margin-bottom:1rem;text-wrap:balance;
}
.section-intro{
  text-align:center;max-width:700px;margin:0 auto 2.5rem;
  color:var(--text-secondary);font-size:1rem;line-height:1.7;
}

/* ── CARDS ──
   Column counts come from the item count, not from auto-fit: auto-fit picks
   whatever fits the width, which strands a fourth card alone on its own row.
   Four reads 2×2, three reads three across, two sit side by side, five or more
   fill three columns. Nothing is ever left alone on a row at any width. */
.grid{display:grid;grid-template-columns:1fr;gap:1.25rem}
@media (min-width:768px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .grid:has(> :nth-child(3):last-child){grid-template-columns:repeat(3,1fr)}
  .grid:has(> :nth-child(5)){grid-template-columns:repeat(3,1fr)}
}
.card{
  background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:1.75rem;transition:border-color 0.2s,background 0.2s;
}
.card:hover{border-color:var(--border-hover);background:var(--bg-card-hover)}
.card h3{
  font-family:var(--font-heading);font-weight:400;font-size:1.0625rem;
  text-transform:uppercase;letter-spacing:0.02em;margin-bottom:0.625rem;color:#fff;
}
.card p{font-size:0.9375rem;color:var(--text-secondary);line-height:1.65}

/* Step cards. The numbering is real — this is an ordered process, and the
   order is information the reader needs. */
.step{position:relative;padding-top:2.75rem}
.step .num{
  position:absolute;top:1.75rem;left:1.75rem;
  font-family:var(--font-heading);font-size:0.75rem;letter-spacing:0.2em;
  color:var(--accent);font-variant-numeric:tabular-nums;
}

/* ── CLOSING CTA ── */
.cta{padding:5rem 0;border-top:1px solid var(--border);text-align:center}
.cta h2{
  font-family:var(--font-heading);font-weight:400;
  font-size:clamp(1.5rem,3.5vw,2.25rem);text-transform:uppercase;margin-bottom:0.875rem;
}
.cta p{color:var(--text-secondary);margin:0 auto 2rem;max-width:560px}

/* ── FOOTER ── */
.site-footer{border-top:1px solid var(--border);padding:2.5rem 0;background:#070406}
.footer-inner{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:1rem;font-size:0.8125rem;color:var(--muted);
}
.site-footer img{height:24px;width:auto;opacity:0.65;display:block}
.footer-links{display:flex;flex-wrap:wrap;gap:1.25rem}
.footer-links a{text-decoration:none;color:var(--muted);transition:color 0.2s}
.footer-links a:hover{color:var(--accent)}

/* ── MOTION ── */
@media (prefers-reduced-motion:reduce){
  .hero-badge .pulse{animation:none}
  *{transition-duration:0.01ms !important}
}

/* ── RESPONSIVE ── */
@media (max-width:640px){
  .logo img{height:24px}
  .header-actions .btn-sm{padding:0.4375rem 0.75rem;font-size:0.6875rem}
  .hero{padding:7rem 0 3rem}
  section.band,.cta{padding:3rem 0}
  .hero-actions .btn{width:100%}
  .footer-inner{justify-content:center;text-align:center}
}