/* ═══════════════════════════════════════════════════════════════════════════
   TRACK MEDIA GROUP — trackmediagroup.com

   The parent company site, so it runs the same system the six products 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 the house orange, sampled from the TRACK mark — the same
   #EF7510 trackhub.tv uses, because it is the same logo without a suffix.

   TMG is the neutral frame; each product card carries its OWN brand colour,
   which is the point of the products section.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --accent:#ef7510;          /* sampled from TRACKLOGO.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;
  --bg-input:#0f0d0c;
  --bg-footer:#050406;
  --text:#ffffff;
  --text-secondary:#a9a29d;
  --muted:#7e7771;
  --border:rgba(255,255,255,.10);
  --radius:.5rem;
  --radius-lg:.75rem;
  --font-display:'Aldrich',system-ui,sans-serif;
  --font-body:'Roboto',system-ui,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)}
section[id]{scroll-margin-top:4.5rem}

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

.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;
}
.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}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

h1,h2{font-family:var(--font-display);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:1px solid transparent;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-color: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;border-bottom:1px solid transparent;
}
.site-header.scrolled{
  background:var(--bg-nav);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom-color: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;
}
/* This mark is ~4:1, squarer than the product lockups, so it needs a little
   more height than they do to read at the same optical size. */
.header-brand img{height:28px;width:auto}
.header-nav{display:none;align-items:center;gap:1.75rem}
.header-nav a{
  font-family:var(--font-display);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:36px}}

/* ── 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.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(400px,76vw);height:auto;margin:0 auto 2rem}
.badge{
  display:inline-flex;align-items:center;gap:.5rem;
  background:rgba(239,117,16,.10);border:1px solid rgba(239,117,16,.40);
  border-radius:999px;padding:.375rem 1rem;margin-bottom:1.5rem;
  font-family:var(--font-display);font-size:.6875rem;color:#fff;
  letter-spacing:.15em;text-transform:uppercase;
}
.badge .pulse,.badge .dot{
  width:.4375rem;height:.4375rem;border-radius:50%;background:var(--accent);flex-shrink:0;
}
.badge .pulse{animation:badge-pulse 2s ease-in-out infinite}
@keyframes badge-pulse{0%,100%{opacity:1}50%{opacity:.25}}
.hero-headline{
  font-size:clamp(1.875rem,5.5vw,3.5rem);line-height:1.1;letter-spacing:.03em;
  margin:0 auto 1.25rem;max-width:min(100%,20ch);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-card{background:var(--bg-card);text-align:center}
.section-header{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.section-label{
  font-family:var(--font-display);font-size:.75rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent);text-align:center;margin-bottom:.75rem;
}
.section-title{
  font-family:var(--font-display);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;
}
.about-inner{max-width:760px;margin:0 auto;padding:0 var(--gutter)}
.about-inner .section-desc:last-child{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. 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, decoration only — the rule across the
                   top and the hover edge. No contrast floor.
     --card-ink    the same hue lightened until it clears 4.5:1, for 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-display);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-display);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-display);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 overflows 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-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{
  margin-left:auto;
  font-family:var(--font-display);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)}

/* ── 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-display);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:var(--bg-input);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)}

/* Honeypot — off-screen rather than display:none, which better bots skip. */
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

.notice{
  margin-top:0;padding:1.5rem;text-align:center;
  border:1px solid var(--accent);border-radius:var(--radius-lg);background:var(--bg-card);
}
.notice-title{
  font-family:var(--font-display);font-size:.875rem;
  text-transform:uppercase;letter-spacing:.15em;color:#fff;
}
.notice-body{margin-top:.5rem;font-size:.9375rem;color:var(--text-secondary)}
.notice-error{
  margin-bottom:1.5rem;padding:1rem;border-radius:var(--radius);
  font-size:.9375rem;color:var(--text-secondary);text-align:left;
}

/* ── FOOTER ──
   Matched to trackhub.tv and trackscore.tv deliberately — these footers get
   seen side by side, and a few pixels of difference in line spacing reads as
   one of them being wrong. */
.site-footer{border-top:1px solid var(--border);padding:2.5rem 0;background:var(--bg-footer)}
.footer-inner{
  max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter);
  display:flex;flex-direction:column;align-items:center;gap:1.5rem;text-align:center;
}
.footer-left img{width:150px;height:auto;opacity:.75;margin:0 auto .625rem}
.footer-copy{margin-top:0;font-size:.75rem;line-height:1.6;letter-spacing:.04em;color:var(--muted)}
.footer-socials{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:1.25rem}
.footer-socials a{
  font-family:var(--font-display);font-size:.6875rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--muted);transition:color .2s;
}
.footer-socials a:hover{color:var(--accent)}
@media(min-width:768px){
  .footer-inner{flex-direction:row;align-items:center;justify-content:space-between;text-align:left}
  .footer-left img{margin:0 0 .625rem}
  .footer-socials{justify-content:flex-end}
}

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

/* ── SMALL SCREENS ── */
@media(max-width:640px){
  .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(300px,70vw);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}
}