/* ═══════════════════════════════════════════════════════════════════════════
   TRACKSCORE — trackscore.tv

   Converted from the Hostinger Horizons export. That build was React + Vite +
   Tailwind; the classes below are the same design decisions written out by
   hand, so there is no build step and no framework to keep up to date.

   Part of the Track Media Group system: Aldrich for headings and chrome,
   Roboto for body copy, fixed header that goes solid on scroll, caps on
   everything except prose.

   ── THE COLOUR RULE, READ IT BEFORE CHANGING ANYTHING ──────────────────────
   TRACKSCORE's red is DARK, unlike the accents on the other TRACK sites
   (orange, green, gold, pink, blue), which are bright. That inverts two habits:

     • Text ON a red button is WHITE.   white on #CE0F0F = 5.7:1  ✓
       Dark ink would be 3.6:1, which fails.
     • Button hover goes DARKER.        white on #A50C0C = 7.9:1  ✓
       Lightening the red to #F13A3A drops white to 3.9:1 — the label stops
       being readable at the exact moment someone is about to click it.
     • Red as TEXT is the LIGHTENED --accent-text.
       #CE0F0F on the page background = 3.5:1  ✗
       #F13B3B on the page background = 5.2:1  ✓

   So: --accent for filled shapes, --accent-text for anything made of letters.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --accent:#CE0F0F;            /* filled shapes only */
  --accent-hover:#A50C0C;      /* darker, never lighter */
  --accent-text:#F13B3B;       /* letters only */
  --bg:#08070A;
  --bg-nav:rgba(8,7,10,.95);
  --bg-card:#12100F;
  --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.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
::selection{background:var(--accent);color:#fff}

section[id]{scroll-margin-top:4.5rem}

/* Keyboard users must always be able to see where they are. */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid var(--accent-text);outline-offset:2px;
}
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--accent);color:#fff;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}

/* ── BUTTONS ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--font-body);font-weight:700;text-transform:uppercase;letter-spacing:.12em;
  font-size:.875rem;padding:.875rem 2rem;border-radius:var(--radius);
  background:var(--accent);color:#fff;   /* white, not dark — see the note above */
  border:1px solid transparent;cursor:pointer;white-space:nowrap;
  transition:background .2s,border-color .2s;
}
.btn:hover{background:var(--accent-hover)}
.btn-outline{background:transparent;border-color:rgba(255,255,255,.30);color:#fff}
.btn-outline:hover{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.60)}
.btn-sm{padding:.5rem 1rem;font-size:.75rem;letter-spacing:.15em}

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

/* ── HERO ── */
.hero{
  position:relative;min-height:82vh;display:flex;align-items:center;justify-content:center;
  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(206,15,15,.18),transparent 68%),
    linear-gradient(to bottom,rgba(8,7,10,.58),rgba(8,7,10,.86) 58%,var(--bg));
}
.hero-content{
  position:relative;z-index:10;
  max-width:var(--wrap);margin:0 auto;padding:8rem var(--gutter) 6rem;
  display:flex;flex-direction:column;align-items:center;text-align:center;width:100%;
}
.hero-logo{width:320px;height:auto}
@media(min-width:640px){.hero-logo{width:440px}}

.badge{
  display:inline-flex;align-items:center;gap:.625rem;
  margin-top:2.5rem;padding:.375rem 1rem;border-radius:999px;
  border:1px solid rgba(206,15,15,.70);background:rgba(206,15,15,.10);
  font-family:var(--font-display);font-size:.6875rem;
  text-transform:uppercase;letter-spacing:.15em;color:#fff;
}
.badge .pulse,.badge .dot{
  width:.375rem;height:.375rem;border-radius:50%;background:var(--accent-text);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{
  margin-top:1.5rem;
  font-family:var(--font-display);font-weight:400;text-transform:uppercase;
  font-size:clamp(1.75rem,5vw,3.25rem);line-height:1.15;letter-spacing:.08em;color:#fff;
}
.hero-sub{
  margin-top:1.5rem;max-width:680px;
  font-size:1rem;line-height:1.65;color:var(--text-secondary);
}
@media(min-width:768px){.hero-sub{font-size:1.125rem}}
.accent{color:var(--accent-text)}

.hero-cta{margin-top:2.5rem;display:flex;flex-direction:column;align-items:stretch;gap:1rem;width:100%}
@media(min-width:640px){
  .hero-cta{flex-direction:row;align-items:center;justify-content:center;width:auto}
}

/* ── SECTIONS ── */
.band{padding:6rem 0}
@media(min-width:768px){.band{padding:7rem 0}}
.band-card{background:var(--bg-card);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}

.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.15;letter-spacing:.08em;
  text-align:center;color:#fff;
}
.section-desc{margin-top:1.5rem;color:var(--text-secondary);line-height:1.65}

.about-inner{max-width:760px;margin:0 auto;padding:0 var(--gutter);text-align:center}
.about-inner .badge{margin-top:0}
.about-inner .section-title{margin-top:1.5rem}

/* ── CONTACT ── */
.contact-inner{max-width:640px;margin:0 auto;padding:0 var(--gutter)}
.contact-form{margin-top:2.5rem}
.form-group{margin-bottom:1.5rem}
.form-label{
  display:block;margin-bottom:.5rem;
  font-family:var(--font-display);font-size:.6875rem;
  text-transform:uppercase;letter-spacing:.18em;color:var(--muted);
}
.form-input,.form-textarea{
  width:100%;padding:.75rem 1rem;
  background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius);
  color:#fff;font-family:var(--font-body);font-size:1rem;transition:border-color .2s;
}
.form-input::placeholder,.form-textarea::placeholder{color:rgba(126,119,113,.6)}
.form-input:focus,.form-textarea:focus{border-color:var(--accent)}
.form-textarea{resize:vertical;min-height:140px}
.form-submit{
  width:100%;padding:.875rem 2rem;border:none;border-radius:var(--radius);cursor:pointer;
  background:var(--accent);color:#fff;
  font-family:var(--font-body);font-weight:700;font-size:.875rem;
  text-transform:uppercase;letter-spacing:.15em;transition:background .2s;
}
.form-submit:hover{background:var(--accent-hover)}
.form-submit:disabled{opacity:.6;cursor:not-allowed}

/* 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:2.5rem;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-top:0;margin-bottom:1.5rem;padding:1rem;border-radius:var(--radius);
  font-size:.9375rem;color:var(--text-secondary);
}

/* ── FOOTER ── */
.site-footer{border-top:1px solid var(--border);background:var(--bg-footer);padding:2.5rem 0}
.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:170px;opacity:.75;margin:0 auto .625rem}
/* These values are matched to TRACKHUB deliberately — the footers appear side
   by side often enough that a 4px difference in line spacing reads as one of
   them being wrong. line-height is set rather than inherited because the two
   sites have different body line-heights (1.65 here, 1.6 there). */
.footer-copy{margin-top:0;font-size:.75rem;line-height:1.6;letter-spacing:.04em;color:var(--muted)}
/* The parent-company link is a step brighter than the line it sits in, so it
   reads as a link without an underline doing the work. */
.footer-copy a{color:var(--text-secondary);text-underline-offset:2px;transition:color .2s}
.footer-copy a:hover{color:var(--accent-text);text-decoration:underline}
.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;
  text-transform:uppercase;letter-spacing:.15em;color:var(--muted);transition:color .2s;
}
.footer-socials a:hover{color:var(--accent-text)}
@media(min-width:768px){
  /* CENTRE, not flex-start. The export had these top-aligned, which left the
     social row floating level with the logo while the two copyright lines
     trailed down underneath it — the halves read as two unrelated blocks with
     a hole between them. Centred, they sit on one optical line. */
  .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(24px);transition:opacity .5s ease-out,transform .5s ease-out}
.reveal.visible{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}