/* ═══════════════════════════════════════════════════════════════════════════
   TRACKHUB — trackhub.tv

   The umbrella site for the TRACK properties, so it runs the same system they
   do: Aldrich for headings and chrome, Roboto for body copy, a fixed header
   that goes solid on scroll, count-driven card grids, caps on everything
   except the prose.

   The accent is TRACKHUB's own orange, sampled from the logo. The hub is the
   neutral frame — each product card carries its OWN brand colour, which is the
   point of the page.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --accent:#ef7510;          /* sampled from TRACKHUB_LOGO.png */
  --accent-hover:#ff9038;
  --accent-ink:#1a0c02;      /* text ON the accent — white is only 2.6:1 here */
  --bg:#08070a;
  --bg-nav:rgba(8,7,10,.95);
  --bg-card:#12100f;
  --bg-card-hover:#1a1715;
  --text:#ffffff;
  --text-secondary:#a9a29d;
  --muted:#7e7771;
  --border:rgba(255,255,255,.10);
  --live:#2ecc71;
  --radius:.5rem;
  --radius-lg:.75rem;
  --font-heading:'Aldrich',sans-serif;
  --font-body:'Roboto',sans-serif;
  --wrap:1280px;
  --gutter:1.25rem;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
::selection{background:var(--accent);color:var(--accent-ink)}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}

/* Visible only to screen readers. */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
/* Keyboard users land here first and can jump the header. */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--accent);color:var(--accent-ink);
  padding:.75rem 1.25rem;border-radius:0 0 var(--radius) 0;
  font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:.8125rem;
}
.skip-link:focus{left:0}

/* Anything focused by keyboard gets a ring the accent can't hide. */
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

h1,h2{font-family:var(--font-heading);font-weight:400;text-transform:uppercase}

/* ── BUTTONS ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--font-body);font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  border:none;cursor:pointer;transition:background .2s,color .2s,border-color .2s,box-shadow .2s;
  padding:.875rem 2rem;border-radius:var(--radius);font-size:.9375rem;
  background:var(--accent);color:var(--accent-ink);white-space:nowrap;
}
.btn:hover{background:var(--accent-hover);box-shadow:0 0 24px rgba(239,117,16,.35)}
.btn-outline{background:transparent;border:1px solid var(--border);color:var(--text)}
.btn-outline:hover{background:rgba(239,117,16,.10);border-color:rgba(239,117,16,.55);color:var(--accent);box-shadow:none}
.btn-sm{padding:.5rem 1rem;font-size:.75rem}

/* ── HEADER ── */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  padding:.75rem 0;transition:background .3s,padding .3s,border-color .3s;background:transparent;
}
.site-header.scrolled{
  background:var(--bg-nav);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);padding:.5rem 0;
}
.header-inner{
  max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:56px;
}
.header-brand img{height:30px;width:auto}
.header-nav{display:none;align-items:center;gap:1.75rem}
.header-nav a{
  font-family:var(--font-heading);font-size:.75rem;letter-spacing:.15em;text-transform:uppercase;
  color:rgba(255,255,255,.78);transition:color .2s;
}
.header-nav a:hover{color:var(--accent)}
.header-actions{display:flex;align-items:center;gap:.625rem;flex-shrink:0}
@media(min-width:900px){
  .header-nav{display:flex}
  .header-brand img{height:38px}
}

/* ── HERO ── */
.hero{position:relative;min-height:82vh;display:flex;align-items:center;padding:8rem 0 4rem;overflow:hidden}
.hero-bg{
  position:absolute;inset:0;
  background:url('/assets/img/hero-bg.jpg') center/cover no-repeat;
  filter:saturate(.4) brightness(.72);
}
.hero-scrim{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse 85% 55% at 50% 0%,rgba(239,117,16,.20),transparent 68%),
    linear-gradient(to bottom,rgba(8,7,10,.58) 0%,rgba(8,7,10,.86) 58%,var(--bg) 100%);
}
.hero-content{position:relative;z-index:2;width:100%;text-align:center}
.hero-logo{width:min(440px,78vw);height:auto;margin:0 auto 2rem}
.hero-badge{
  display:inline-flex;align-items:center;gap:.5rem;
  background:rgba(239,117,16,.10);border:1px solid rgba(239,117,16,.35);
  border-radius:4px;padding:.375rem 1rem;margin-bottom:1.5rem;
  font-family:var(--font-heading);font-size:.75rem;color:var(--accent);
  letter-spacing:.15em;text-transform:uppercase;
}
.hero-badge .pulse{width:.5rem;height:.5rem;border-radius:50%;background:var(--accent);animation:pulse 2s infinite;flex-shrink:0}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.hero-headline{
  font-size:clamp(1.75rem,5vw,3.25rem);line-height:1.1;letter-spacing:.02em;
  /* The <br> in the markup is the only break this should take —
     "MOTORSPORTS INTELLIGENCE" is 24 characters, and anything under ~26ch
     wraps it a second time and the hero grows to four lines. */
  margin:0 auto 1.25rem;max-width:min(100%,34ch);text-wrap:balance;
}
.hero-sub{
  font-size:clamp(.9375rem,1.5vw,1.125rem);color:var(--text-secondary);
  line-height:1.7;max-width:680px;margin:0 auto 2.25rem;
}
.accent{color:var(--accent)}
.hero-cta{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center}

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

/* ── PRODUCT GRID ──
   Column count comes from the item count, not auto-fit: auto-fit picks
   whatever fits the width and strands the last card alone on its own row.
   Six read 3×2, four read 2×2, three read three across, two sit side by side.
   Nothing is ever left alone at any width. */
.products-grid{
  display:grid;grid-template-columns:1fr;gap:1.25rem;
  max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter);
}
@media(min-width:768px){
  .products-grid{grid-template-columns:repeat(2,1fr)}
  .products-grid:has(> :nth-child(3):last-child){grid-template-columns:repeat(3,1fr)}
  .products-grid:has(> :nth-child(5)){grid-template-columns:repeat(3,1fr)}
}

.product-card{
  position:relative;display:flex;flex-direction:column;
  background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:1.75rem;overflow:hidden;transition:border-color .2s,background .2s,transform .2s;
}
/* TWO colour properties per card, and the difference matters:
     --card-color  the TRUE brand colour, used only as decoration — the rule
                   across the top and the hover edge. No contrast floor.
     --card-ink    the same hue lightened until it clears 4.5:1, used wherever
                   the colour is TEXT.
   They diverge for the dark marks: TRACKSCORE's red is 3.1:1 on this card and
   TRACKSTATS' purple 2.6:1. Fine as a 3px rule, unreadable as a tagline.
   Both values come from includes/products.php. */
.product-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--card-color,var(--accent));
}
.product-card:hover{
  border-color:var(--card-color,var(--accent));
  background:var(--bg-card-hover);
  transform:translateY(-3px);
}
.product-card-header{margin-bottom:1rem}
.product-logo img{height:34px;width:auto;margin-bottom:.5rem}
.product-name{
  font-family:var(--font-heading);text-transform:uppercase;
  font-size:1.375rem;letter-spacing:.03em;margin-bottom:.25rem;color:#fff;
}
.product-name span{color:var(--card-ink,var(--accent))}
.product-domain{
  font-family:var(--font-heading);font-size:.6875rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);
}
.product-card-body{flex:1;margin-bottom:1.5rem}
.product-tagline{
  font-family:var(--font-heading);font-size:.75rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--card-ink,var(--accent));margin-bottom:.625rem;
}
.product-desc{font-size:.9375rem;color:var(--text-secondary);line-height:1.65}
/* Wraps because status labels are not all one size — "IN PRODUCTION" is twice
   the width of "BETA" and overflowed the card at tablet, where three columns
   are at their narrowest. The pill drops to its own line rather than being
   clipped, and margin-left:auto keeps it right-aligned when it does. */
.product-card-footer{display:flex;align-items:center;flex-wrap:wrap;gap:.75rem 1rem;margin-top:auto}
.product-status{margin-left:auto}
.product-link{
  display:inline-flex;align-items:center;gap:.4rem;
  font-weight:700;font-size:.8125rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--text);transition:color .2s;
}
.product-link svg{width:13px;height:13px}
.product-link:hover{color:var(--card-ink,var(--accent))}
.product-status{
  font-family:var(--font-heading);font-size:.625rem;letter-spacing:.15em;text-transform:uppercase;
  padding:.25rem .625rem;border-radius:999px;white-space:nowrap;
  background:rgba(255,255,255,.06);border:1px solid var(--border);color:var(--text-secondary);
}
.product-status.live{background:rgba(46,204,113,.12);border-color:rgba(46,204,113,.40);color:#7ce0a6}
.product-status.soon{background:rgba(239,117,16,.12);border-color:rgba(239,117,16,.40);color:var(--accent)}

/* ── ABOUT ── */
.about-inner{max-width:760px;margin:0 auto;padding:0 var(--gutter)}
.about-badge{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--font-heading);font-size:.6875rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent);background:rgba(239,117,16,.10);border:1px solid rgba(239,117,16,.30);
  border-radius:4px;padding:.375rem 1rem;margin-bottom:1.5rem;
}
.about-badge svg{width:13px;height:13px}

/* ── CONTACT ── */
.contact-inner{max-width:640px;margin:0 auto;padding:0 var(--gutter)}
.contact-inner .section-title{margin-bottom:2rem}
.form-group{margin-bottom:1rem}
.form-label{
  display:block;font-family:var(--font-heading);font-size:.6875rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);margin-bottom:.4rem;
}
.form-input,.form-textarea{
  width:100%;padding:.8125rem 1rem;
  background:#0f0d0c;border:1px solid var(--border);border-radius:var(--radius);
  color:var(--text);font-family:var(--font-body);font-size:.9375rem;transition:border-color .2s;
}
.form-input::placeholder,.form-textarea::placeholder{color:#69615d;letter-spacing:.04em}
.form-input:focus,.form-textarea:focus{border-color:var(--accent)}
.form-textarea{min-height:140px;resize:vertical}
.form-submit{
  width:100%;margin-top:.5rem;
  padding:.9375rem;border:none;border-radius:var(--radius);cursor:pointer;
  background:var(--accent);color:var(--accent-ink);
  font-family:var(--font-body);font-weight:700;font-size:.9375rem;
  letter-spacing:.1em;text-transform:uppercase;transition:background .2s,box-shadow .2s;
}
.form-submit:hover{background:var(--accent-hover);box-shadow:0 0 24px rgba(239,117,16,.35)}

/* The honeypot. Off-screen rather than display:none — the bots worth stopping
   check for display:none and skip those fields. */
.hp{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden}

.toast{
  padding:.875rem 1.125rem;border-radius:var(--radius);margin-bottom:1.25rem;
  font-size:.875rem;border:1px solid;
}
.toast-success{background:rgba(46,204,113,.10);border-color:rgba(46,204,113,.40);color:#7ce0a6}
.toast-error{background:rgba(255,90,90,.10);border-color:rgba(255,90,90,.40);color:#ff9a9a}

/* ── FOOTER ── */
.site-footer{border-top:1px solid var(--border);padding:2.5rem 0;background:#050406}
.footer-inner{
  max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.5rem;
}
.footer-left img{width:170px;height:auto;margin-bottom:.625rem;opacity:.75}
.footer-copy,.footer-parent{font-size:.75rem;color:var(--muted);letter-spacing:.04em}
.footer-parent a{color:var(--text-secondary);transition:color .2s}
.footer-parent a:hover{color:var(--accent)}
.footer-socials{display:flex;flex-wrap:wrap;gap:1.25rem}
.footer-socials a{
  font-family:var(--font-heading);font-size:.6875rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--muted);transition:color .2s;
}
.footer-socials a:hover{color:var(--accent)}

/* ── MOTION ── */
.fade-up{opacity:0;transform:translateY(18px);transition:opacity .5s ease,transform .5s ease}
.fade-up.visible{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .fade-up{opacity:1;transform:none;transition:none}
  .hero-badge .pulse{animation:none}
  *{transition-duration:.01ms !important}
}

/* ── SMALL SCREENS ── */
@media(max-width:640px){
  /* The lockup is 5.75:1, so at 30px it is already 172px wide — with the CTA
     beside it that leaves almost no gutter on a 390px phone. */
  .header-brand img{height:24px}
  .header-actions .btn-sm{padding:.4375rem .75rem;font-size:.6875rem}
  .hero{min-height:auto;padding:7rem 0 3.5rem}
  .hero-logo{width:min(320px,72vw);margin-bottom:1.5rem}
  .hero-cta .btn{width:100%}
  .band{padding:3rem 0}
  .footer-inner{justify-content:center;text-align:center}
  .footer-left{display:flex;flex-direction:column;align-items:center}
  .footer-socials{justify-content:center}
}