/* =========================================================
   VAUGHN RACEWORKS — stylesheet
   Design tokens
   ========================================================= */
:root{
  --bg:        #0a0c0e;
  --bg-raise:  #101318;
  --panel:     #14171c;
  --panel-2:   #191d23;
  --line:      #262b33;
  --line-soft: #1d2127;
  --text:      #edeff1;
  --text-dim:  #9098a1;
  --text-faint:#5c636c;
  --red:       #ff3d1f;
  --red-dim:   #7a2416;
  --amber:     #e8a63d;
  --amber-dim: #4d3a1a;

  --display: "Rajdhani", "Arial Narrow", sans-serif;
  --body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono:    "JetBrains Mono", "Consolas", monospace;

  --container: 1180px;
  --radius: 3px;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
h1,h2,h3,h4{
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin: 0 0 .5em;
  line-height: 1.05;
}
p{ margin: 0 0 1em; color: var(--text-dim); }
.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}
:focus-visible{
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}
::selection{ background: var(--red); color:#fff; }

.eyebrow{
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--amber);
  display:flex;
  align-items:center;
  gap:.6em;
  margin-bottom: .9em;
}
.eyebrow::before{
  content:"";
  width: 18px; height: 1px;
  background: var(--amber);
  display:inline-block;
}

/* =========================================================
   Telemetry ticker (signature element)
   ========================================================= */
.telemetry{
  background: #000;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  white-space: nowrap;
  height: 30px;
  display:flex;
  align-items:center;
}
.telemetry__track{
  display:inline-flex;
  align-items:center;
  animation: ticker 34s linear infinite;
  will-change: transform;
}
.telemetry span{
  font-family: var(--mono);
  font-size: .72rem;
  color: var(--text-faint);
  padding: 0 1.4em;
  letter-spacing: .04em;
  border-right: 1px solid var(--line-soft);
}
.telemetry span b{
  color: var(--amber);
  font-weight: 500;
}
.telemetry span.warn b{ color: var(--red); }
@keyframes ticker{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
  .telemetry__track{ animation: none; }
}

/* =========================================================
   Nav
   ========================================================= */
.site-header{
  position: sticky; top:0; z-index: 50;
  background: rgba(10,12,14,.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height: 68px;
}
.brand{
  display:flex;
  align-items:center;
  gap:.6em;
  font-family: var(--display);
  font-weight:700;
  font-size: 1.15rem;
  letter-spacing:.03em;
  text-transform: uppercase;
}
.brand__mark{
  width: 30px; height:30px;
  flex-shrink:0;
}
.brand__mark path{ fill:none; stroke:var(--red); stroke-width:6; }
.brand small{
  display:block;
  font-family: var(--mono);
  font-size:.6rem;
  color: var(--text-faint);
  text-transform: none;
  letter-spacing:.1em;
  font-weight:400;
}

.nav__links{
  display:flex;
  align-items:center;
  gap: 2px;
  list-style:none;
  margin:0; padding:0;
}
.nav__links > li{ position:relative; }
.nav__links a{
  display:flex; align-items:center; gap:.35em;
  font-family: var(--display);
  font-weight:600;
  font-size: .92rem;
  letter-spacing:.03em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: 10px 14px;
  border-radius: var(--radius);
  transition: color .15s ease;
}
.nav__links a:hover, .nav__links a.active{ color: var(--text); }
.nav__links a.active{ color: var(--red); }

.has-dropdown > a::after{
  content:"";
  width:6px; height:6px;
  border-right:1px solid currentColor;
  border-bottom:1px solid currentColor;
  transform: rotate(45deg);
  margin-left:2px;
  opacity:.7;
}
.dropdown{
  position:absolute; top: 100%; left:0;
  min-width: 220px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 6px;
  opacity:0; visibility:hidden; transform: translateY(4px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown{
  opacity:1; visibility:visible; transform:translateY(0);
}
.dropdown a{
  display:block;
  font-size:.82rem;
  padding: 9px 12px;
  color: var(--text-dim);
}
.dropdown a:hover{ background: var(--panel-2); color: var(--text); }

.nav__social{ display:flex; align-items:center; gap:6px; }
.nav__social a{
  width:32px; height:32px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line); border-radius:50%;
  color: var(--text-faint);
  transition: border-color .15s ease, color .15s ease;
}
.nav__social a:hover{ border-color: var(--red); color: var(--red); }
.nav__social svg{ width:15px; height:15px; }

.nav__toggle{
  display:none;
  background:none; border:1px solid var(--line); border-radius: var(--radius);
  width:42px; height:36px;
  color: var(--text);
  cursor:pointer;
}

/* Mobile nav */
@media (max-width: 900px){
  .nav__toggle{ display:flex; align-items:center; justify-content:center; }
  .nav__links{
    position:fixed; top:69px; left:0; right:0; bottom:0;
    background: var(--bg);
    flex-direction:column;
    align-items:stretch;
    padding: 10px 20px 30px;
    overflow-y:auto;
    transform: translateX(100%);
    transition: transform .25s ease;
  }
  .nav__links.open{ transform: translateX(0); }
  .nav__links a{ padding: 14px 6px; border-bottom:1px solid var(--line-soft); }
  .dropdown{
    position:static; opacity:1; visibility:visible; transform:none;
    display:none; border:none; background:none; padding:0 0 0 14px;
  }
  .has-dropdown.open .dropdown{ display:block; }
  .nav__social{ display:none; }
}

/* =========================================================
   Hero
   ========================================================= */
.hero{
  position:relative;
  padding: 96px 0 84px;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(ellipse 900px 500px at 82% 0%, rgba(255,61,31,.10), transparent 60%),
    var(--bg);
  overflow:hidden;
}
.hero__grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 48px;
  align-items:center;
}
.hero h1{
  font-size: clamp(2.5rem, 5vw, 4.1rem);
  margin-bottom:.3em;
}
.hero h1 em{
  font-style:normal;
  color: var(--red);
}
.hero p.lead{
  font-size: 1.08rem;
  max-width: 46ch;
  color: var(--text-dim);
}
.hero__ctas{
  display:flex; gap:14px; margin-top: 34px; flex-wrap:wrap;
}
.hero__gauge{ display:flex; justify-content:center; }

/* Buttons */
.btn{
  font-family: var(--display);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
  font-size:.92rem;
  padding: 15px 26px;
  border-radius: var(--radius);
  display:inline-flex; align-items:center; gap:.5em;
  border:1px solid transparent;
  cursor:pointer;
  transition: transform .12s ease, border-color .15s ease, background .15s ease, color .15s ease;
}
.btn:hover{ transform: translateY(-1px); }
.btn-primary{ background: var(--red); color:#fff; }
.btn-primary:hover{ background:#ff5738; }
.btn-ghost{ background:transparent; border-color: var(--line); color: var(--text); }
.btn-ghost:hover{ border-color: var(--text-dim); }
.btn-sm{ padding:10px 18px; font-size:.78rem; }

/* =========================================================
   Sections / cards
   ========================================================= */
.section{ padding: 84px 0; }
.section--tight{ padding: 56px 0; }
.section-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap: 24px; margin-bottom: 44px; flex-wrap:wrap;
}
.section-head h2{ font-size: clamp(1.7rem,3vw,2.3rem); margin:0; }
.section-head p{ margin:0; max-width:44ch; }

.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }

.card{
  background: var(--panel);
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px;
  position:relative;
  transition: border-color .15s ease, transform .15s ease;
}
.card:hover{ border-color:#3a4149; }
.card__tag{
  font-family: var(--mono);
  font-size:.68rem;
  letter-spacing:.14em;
  color: var(--text-faint);
  text-transform:uppercase;
  display:block;
  margin-bottom: 14px;
}
.card h3{ font-size:1.4rem; margin-bottom:.4em; }
.card h3 a:hover{ color: var(--red); }
.card p{ font-size:.95rem; }
.card__link{
  font-family: var(--mono);
  font-size:.78rem;
  color: var(--amber);
  letter-spacing:.05em;
  display:inline-flex; align-items:center; gap:.4em;
  margin-top: 8px;
}
.card__link::after{ content:"→"; transition: transform .15s ease; }
.card:hover .card__link::after{ transform: translateX(3px); }

/* Package / pricing card */
.pkg{
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow:hidden;
}
.pkg--advanced{ border-color: var(--red-dim); }
.pkg__head{
  padding: 28px 32px;
  border-bottom: 1px solid var(--line);
  display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap;
}
.pkg__head h3{ font-size:1.5rem; margin-bottom:.25em; }
.pkg__head p{ margin:0; font-size:.9rem; max-width:44ch; }
.pkg__price{
  font-family: var(--mono);
  font-size: 2rem;
  color: var(--amber);
  white-space:nowrap;
}
.pkg__price small{
  display:block; font-size:.62rem; color:var(--text-faint); letter-spacing:.1em; text-transform:uppercase;
}
.pkg__body{ padding: 28px 32px; }
.pkg__list{ list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.pkg__list li{
  display:flex; gap:12px; font-size:.94rem; color: var(--text-dim);
  padding-left:0;
}
.pkg__list li::before{
  content:"";
  flex-shrink:0;
  width:16px; height:16px; margin-top:.28em;
  border:1px solid var(--amber);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.pkg__list li strong{ color: var(--text); }
.pkg__note{
  margin-top: 22px; padding-top:18px; border-top:1px dashed var(--line);
  font-family: var(--mono); font-size:.78rem; color: var(--text-faint);
}
.pkg__foot{ padding: 24px 32px; background: var(--bg-raise); border-top:1px solid var(--line); display:flex; justify-content:flex-end; }

.stack{ display:grid; gap: 28px; }

/* Spec strip (used under package headers) */
.spec-strip{
  display:flex; flex-wrap:wrap; gap: 10px 28px;
  font-family: var(--mono); font-size:.78rem; color: var(--text-faint);
  padding: 18px 0 0;
  border-top: 1px solid var(--line-soft);
  margin-top: 22px;
}
.spec-strip b{ color: var(--text-dim); font-weight:500; }

/* Guide list */
.guide{
  display:grid; grid-template-columns: 220px 1fr; gap:28px;
  padding: 30px 0; border-bottom: 1px solid var(--line);
  align-items:start;
}
.guide:last-child{ border-bottom:none; }
.guide__thumb{
  aspect-ratio: 16/10;
  background: var(--panel);
  border:1px solid var(--line);
  border-radius: var(--radius);
  display:flex; align-items:center; justify-content:center;
  color: var(--text-faint);
}
.guide__thumb svg{ width:34px; height:34px; }
.guide h3{ font-size:1.25rem; }
.guide .tag{
  font-family: var(--mono); font-size:.68rem; color: var(--red);
  letter-spacing:.1em; text-transform:uppercase; margin-bottom:8px; display:inline-block;
}

/* CTA band */
.cta-band{
  background: linear-gradient(135deg, var(--panel), var(--bg-raise));
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding: 64px 0;
  text-align:center;
}
.cta-band h2{ font-size: clamp(1.6rem,3.4vw,2.4rem); }
.cta-band p{ max-width:52ch; margin: 0 auto 28px; }
.cta-band .hero__ctas{ justify-content:center; }

/* Podcast */
.podcast-hero{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding: 40px 0 20px;
}
.podcast-badge{
  width:120px; height:120px; border-radius:50%;
  border:1px solid var(--line); background:var(--panel);
  display:flex; align-items:center; justify-content:center; margin-bottom:28px;
}
.podcast-badge svg{ width:46px; height:46px; }

/* Footer */
.site-footer{
  border-top: 1px solid var(--line);
  padding: 48px 0 30px;
  background: #000;
}
.footer__top{
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:24px; padding-bottom: 28px; border-bottom:1px solid var(--line-soft);
}
.footer__social{ display:flex; gap:10px; }
.footer__social a{
  width:38px; height:38px; border:1px solid var(--line); border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:var(--text-dim);
  transition: border-color .15s ease, color .15s ease;
}
.footer__social a:hover{ border-color:var(--red); color:var(--red); }
.footer__social svg{ width:16px; height:16px; }
.footer__bottom{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  padding-top:24px;
  font-family: var(--mono); font-size:.72rem; color: var(--text-faint);
}
.footer__bottom a:hover{ color: var(--text-dim); }

/* Breadcrumb */
.crumb{
  font-family: var(--mono); font-size:.72rem; color:var(--text-faint);
  padding: 20px 0 0; letter-spacing:.04em;
}
.crumb a:hover{ color: var(--amber); }

/* Page header (non-home pages) */
.page-head{
  padding: 44px 0 40px;
  border-bottom: 1px solid var(--line);
}
.page-head h1{ font-size: clamp(2rem,4vw,2.9rem); }
.page-head p.lead{ color:var(--text-dim); max-width:60ch; font-size:1.02rem; margin-bottom:0; }

@media (max-width: 860px){
  .hero__grid{ grid-template-columns:1fr; }
  .hero__gauge{ order:-1; margin-bottom:8px; }
  .grid-2, .grid-3{ grid-template-columns:1fr; }
  .pkg__head{ flex-direction:column; }
  .guide{ grid-template-columns:1fr; }
  .guide__thumb{ max-width:220px; }
}