/* High Voltage Tire — production skin.
   Starlink-family design system shared with sparkyx.ca (near-black canvas,
   full-bleed photo bands dissolving into black, quiet Inter type, white pill
   CTA) with an electric-blue micro-accent reserved for the HVT brand only. */

:root{
  --black:#000;
  --ink:#050505;
  --panel:#101012;
  --panel-2:#161619;
  --white:#fff;
  --grey:#a7a7ad;
  --grey-2:#6f6f76;
  --line:rgba(255,255,255,.10);
  --amber:#ff6a00;
  --accent:#ff9a52;
  --volt:#4da3ff;
  --volt-dim:rgba(77,163,255,.55);
  --pad:clamp(24px,6vw,96px);
  --measure:1200px;
  --gutter:clamp(24px,4vw,32px);
  --header-h:73px;
  --font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--ink);
  color:var(--white);
  font-family:var(--font);
  font-weight:300;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
::selection{background:rgba(77,163,255,.35)}
a{color:inherit}
a:focus-visible,.btn:focus-visible{outline:2px solid var(--volt);outline-offset:3px;border-radius:4px}
img{max-width:100%}
h1,h2,h3{font-weight:300;letter-spacing:-.01em;line-height:1.15}
h2{font-size:clamp(30px,4.2vw,46px);margin-bottom:18px}
h3{font-size:20px;font-weight:500;margin-bottom:10px}
p{color:var(--grey)}
strong{color:var(--white);font-weight:600}

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

/* ---------- header ---------- */
.site-header{
  height:var(--header-h);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--gutter);
  border-bottom:1px solid var(--line);
  background:rgba(5,5,5,.85);
  position:sticky;top:0;z-index:20;backdrop-filter:blur(10px);
}
.brand{display:flex;align-items:center;text-decoration:none;line-height:0}
.brand-logo{height:42px;width:auto}
.site-nav{display:flex;align-items:center;gap:28px}
.site-nav a{text-decoration:none;font-size:14px;color:var(--grey)}
.site-nav a:hover{color:var(--white)}
.nav-phone{color:var(--white)!important;font-weight:500;white-space:nowrap}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;text-decoration:none;font-weight:500;font-size:15px;
  padding:14px 30px;border-radius:999px;transition:transform .15s ease,background .15s ease,border-color .15s ease;
}
.btn-pill{background:var(--white);color:#000}
.btn-pill:hover{transform:translateY(-2px)}
.btn-ghost{border:1px solid rgba(255,255,255,.35);color:var(--white);background:rgba(0,0,0,.25)}
.btn-ghost:hover{border-color:var(--white)}
.btn-small{padding:9px 20px;font-size:14px}

/* ---------- hero ---------- */
.hero{
  position:relative;overflow:hidden;text-align:center;
  padding:clamp(110px,16vh,170px) var(--gutter) clamp(100px,13vh,140px);
  background:var(--ink);
}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:center 62%}
.hero-shade{
  position:absolute;inset:0;
  background:
    radial-gradient(1100px 480px at 50% 118%, rgba(255,106,0,.30), rgba(255,106,0,.08) 45%, transparent 70%),
    linear-gradient(180deg, rgba(5,5,5,.62) 0%, rgba(5,5,5,.55) 45%, rgba(5,5,5,.78) 78%, var(--ink) 100%);
}
.hero-glow{
  position:absolute;left:50%;bottom:-140px;transform:translateX(-50%);z-index:1;
  width:900px;height:300px;border-radius:50%;
  background:radial-gradient(closest-side, rgba(255,154,82,.32), transparent);
  filter:blur(30px);pointer-events:none;
}
.hero-inner{position:relative;z-index:2;max-width:860px;margin:0 auto}
.eyebrow{
  font-size:12px;letter-spacing:.32em;font-weight:600;color:var(--accent);
  text-transform:uppercase;margin-bottom:26px;
}
.eyebrow-blue{color:var(--volt)}
.eyebrow-bolt{color:var(--volt);letter-spacing:0}
.hero h1{font-size:clamp(42px,6.4vw,72px);margin-bottom:24px;text-shadow:0 2px 30px rgba(0,0,0,.45)}
.hero-sub{font-size:clamp(17px,2vw,20px);max-width:680px;margin:0 auto 38px;color:#d7d7db}
.hero-ctas{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.hero-trust{margin-top:34px;font-size:14px;color:#c9c9ce;letter-spacing:.04em}
.hero-trust strong{color:var(--white)}

/* ---------- bands & cards ---------- */
.band{padding:clamp(70px,10vh,110px) 0;border-top:1px solid var(--line)}
.band-alt{background:linear-gradient(180deg,#08080a,#050505)}
.section-lede{max-width:720px;font-size:17px;margin-bottom:44px}
.card-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
}
.card{
  background:var(--panel);border:1px solid var(--line);border-radius:20px;
  padding:30px 28px;display:flex;flex-direction:column;
  transition:transform .15s ease,border-color .15s ease;
}
.card p{font-size:15px;flex:1}
.card-media{
  display:block;width:calc(100% + 56px);max-width:none;height:210px;object-fit:cover;
  margin:-30px -28px 22px;border-radius:19px 19px 0 0;
  border-bottom:1px solid var(--line);background:var(--panel-2);
}
.card-cta-wide{grid-column:1/-1}
@media (min-width:641px){
  .card-cta-wide{flex-direction:row;align-items:center;gap:28px}
  .card-cta-wide .btn{margin-top:0;flex:none}
}
.card:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.22)}
.card-link{
  margin-top:18px;font-size:14px;font-weight:500;color:var(--accent);
  text-decoration:none;
}
.card-link:hover{color:var(--white)}
.card-cta{background:var(--panel-2);border-color:var(--volt-dim)}
.card-cta .btn{align-self:flex-start;margin-top:18px}

.feature-list{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.feature{
  border:1px solid var(--line);border-radius:20px;padding:32px 30px;
  background:
    radial-gradient(420px 200px at 100% 0%, rgba(77,163,255,.07), transparent 60%),
    var(--panel);
}
.feature p{font-size:15px}
.feature .card-link{display:inline-block}

/* ---------- photo band ---------- */
.photo-band{position:relative;overflow:hidden;border-top:1px solid var(--line)}
.photo-band>img{
  display:block;width:100%;height:clamp(340px,52vh,540px);
  object-fit:cover;object-position:center;
}
.photo-band-shade{
  position:absolute;inset:0;
  background:linear-gradient(180deg, var(--ink) 0%, transparent 26%, transparent 52%, rgba(5,5,5,.88) 88%, var(--ink) 100%);
}
.photo-band-caption{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding-bottom:clamp(30px,5vh,52px);text-align:left;
}
.photo-band-caption .eyebrow{margin-bottom:12px}
.photo-band-line{
  color:var(--white);font-size:clamp(20px,2.6vw,30px);font-weight:300;
  max-width:640px;margin-bottom:20px;line-height:1.3;
}

/* ---------- intel ---------- */
.intel-cat{
  font-size:11px;letter-spacing:.26em;font-weight:600;color:var(--volt);
  text-transform:uppercase;margin-bottom:12px;flex:none!important;
}
.intel-card h3{font-size:19px}
.intel-card h3 a{text-decoration:none}
.intel-card h3 a:hover{color:var(--accent)}
.intel-more{margin-top:30px}

/* ---------- trust ---------- */
.trust{text-align:center}
.trust .section-lede{margin:0 auto 38px}
.trust-stars{color:var(--amber);font-size:26px;letter-spacing:.3em;margin-bottom:16px}

/* ---------- footer ---------- */
.site-footer{
  border-top:1px solid var(--line);
  padding:56px 0 44px;text-align:center;
  background:
    radial-gradient(800px 260px at 50% 130%, rgba(255,106,0,.16), transparent 70%),
    #050505;
}
.footer-logo{height:56px;width:auto;margin-bottom:22px}
.footer-brand-line{font-size:19px;color:var(--white);font-weight:400;margin-bottom:18px}
.footer-contact{font-size:14px;margin-bottom:26px}
.footer-contact a{color:var(--accent);text-decoration:none}
.footer-policies{display:flex;gap:22px;justify-content:center;flex-wrap:wrap;margin-bottom:26px}
.footer-policies a{font-size:13px;color:var(--grey);text-decoration:none}
.footer-policies a:hover{color:var(--white)}
.footer-fine{font-size:12px;color:var(--grey-2)}

/* ---------- mobile ---------- */
@media (max-width:900px){
  .card-grid{grid-template-columns:1fr 1fr}
  .feature-list{grid-template-columns:1fr}
}
@media (max-width:640px){
  .site-nav a:not(.btn):not(.nav-phone){display:none}
  .card-grid{grid-template-columns:1fr}
  .hero-ctas .btn{width:100%;text-align:center}
  .brand-logo{height:34px}
  .footer-logo{height:46px}
  .photo-band-caption{text-align:center}
  .photo-band-line{margin-left:auto;margin-right:auto}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .btn,.card{transition:none}
}