/* REDLINE — site styles
   © 2026 Redline Prep. All rights reserved. */

:root{
  --asphalt:#0c0e11; --panel:#14171c; --panel2:#1a1e25; --line:#262b34;
  --amber:#ffb454; --red:#ff3b30; --red-glow:#ff5a47; --green:#59d98c;
  --blue:#5aa9ff; --ink:#e8e4da; --dim:#9aa1ab; --faint:#5c636e;
  --cond:'Barlow Condensed','Oswald','Roboto Condensed',sans-serif-condensed,'Arial Narrow',system-ui,sans-serif;
  --body:'Barlow','Roboto',system-ui,-apple-system,'Segoe UI',sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  background:radial-gradient(1200px 700px at 50% -10%,#171b22 0%,var(--asphalt) 60%),var(--asphalt);
  color:var(--ink); font-family:var(--body); line-height:1.6; -webkit-text-size-adjust:100%;
}
.wrap{max-width:1040px;margin:0 auto;padding:0 20px}
.center{text-align:center}
a{color:var(--amber);text-decoration:none}
h1,h2,h3,h4{font-family:var(--cond);text-transform:uppercase;letter-spacing:.05em;margin:0}
h2{font-size:clamp(26px,5vw,38px);color:var(--amber);text-shadow:0 0 20px rgba(255,180,84,.35)}
h3{font-size:20px}
.sub{color:var(--dim);max-width:640px;margin:8px auto 26px}
.micro{color:var(--faint);font-size:13px;line-height:1.5}
.eyebrow{font-family:var(--cond);font-size:13px;letter-spacing:.24em;color:var(--dim);text-transform:uppercase}

/* nav */
.nav{
  position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  padding:12px 20px;background:rgba(12,14,17,.88);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);
}
.nav nav{display:flex;align-items:center;gap:18px}
.nav nav a{color:var(--dim);font-family:var(--cond);text-transform:uppercase;letter-spacing:.08em;font-size:15px}
.nav nav a:hover{color:var(--ink)}
.brand{font-family:var(--cond);font-weight:800;font-size:24px;letter-spacing:.08em;color:var(--red-glow);text-shadow:0 0 18px rgba(255,59,48,.5)}

/* hero */
.hero{text-align:center;padding:44px 0 30px}
.logo{font-size:clamp(52px,13vw,96px);font-weight:800;color:var(--red-glow);
  text-shadow:0 0 34px rgba(255,59,48,.55);margin:2px 0;line-height:1}
.tagline{font-family:var(--cond);font-weight:800;font-size:clamp(11px,3.2vw,16px);letter-spacing:.08em;
  color:var(--amber);white-space:nowrap;text-shadow:0 0 12px rgba(255,180,84,.9);animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{text-shadow:0 0 12px rgba(255,180,84,.85)}50%{text-shadow:0 0 20px rgba(255,200,120,1),0 0 38px rgba(255,90,71,.8)}}
.lead{max-width:640px;margin:22px auto 0;color:var(--dim);font-size:17px}
.cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:22px 0 8px}

/* gauge */
.gauge{position:relative;width:min(70vw,260px);height:min(70vw,260px);margin:26px auto 6px;cursor:pointer}
.gauge-face{position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle,#0a0920 0%,#120f3c 42%,#241a7a 72%,#4530c9 90%,#6a4df0 100%);
  border:6px solid #0b0c12;
  box-shadow:0 0 0 3px #1c1e2a,0 0 34px 8px rgba(110,70,255,.4),inset 0 0 30px rgba(20,10,70,.9)}
.ticks{position:absolute;inset:0}
.tick{position:absolute;left:calc(50% - 1px);top:calc(50% - 104px);width:2px;height:8px;background:#eef4ff;
  border-radius:2px;box-shadow:0 0 6px 1px rgba(190,215,255,.85);transform-origin:1px 104px}
.tick.major{width:4px;height:13px;left:calc(50% - 2px);transform-origin:2px 104px}
.tick.hot{background:#ff6a5e;box-shadow:0 0 7px 1px rgba(255,80,70,.9)}
.num{position:absolute;width:24px;text-align:center;font-family:var(--cond);font-weight:700;font-size:17px;
  color:#f2f6ff;text-shadow:0 0 9px rgba(180,205,255,.95)}
.num.hot{color:#ffb3ab;text-shadow:0 0 9px rgba(255,90,80,.95)}
.needle{position:absolute;left:calc(50% - 1.5px);top:calc(50% - 92px);width:3px;height:92px;
  background:linear-gradient(180deg,#ff8078,#ff2a1e 60%,#c01810);border-radius:2px;
  box-shadow:0 0 10px 3px rgba(255,40,30,.8);transform-origin:1.5px 92px;transition:transform .05s linear}
.hub{position:absolute;left:calc(50% - 21px);top:calc(50% - 21px);width:42px;height:42px;border-radius:50%;
  background:radial-gradient(circle at 40% 32%,#2a2d38,#12141c 55%,#05060a);border:2px solid #232636;
  box-shadow:0 0 16px 4px rgba(255,40,30,.3)}
.readout{position:absolute;left:calc(50% - 56px);top:calc(50% + 40px);width:112px;padding:5px 8px;
  background:#070a18;border:1px solid #2a2f55;border-radius:4px;display:flex;justify-content:space-between;
  align-items:baseline;font-family:var(--cond);box-shadow:0 0 10px rgba(110,70,255,.3)}
.readout span{font-size:12px;letter-spacing:2px;color:#bfe9ff;text-shadow:0 0 7px rgba(120,220,255,.9)}
.readout b{font-size:17px;color:#dff4ff;text-shadow:0 0 8px rgba(140,225,255,.95)}
.readout i{font-size:10px;color:#9fd8ff;font-style:normal;margin-left:2px}

/* buttons */
.btn{display:inline-block;font-family:var(--cond);text-transform:uppercase;letter-spacing:.08em;font-weight:700;
  background:var(--panel2);color:var(--ink);border:1px solid var(--line);border-radius:10px;
  padding:13px 22px;font-size:16px;cursor:pointer;transition:transform .06s,border-color .15s}
.btn:hover{border-color:var(--amber)}
.btn:active{transform:scale(.97)}
.btn-primary{background:linear-gradient(180deg,#ffc46e,#f09b2e);color:#20150a;border-color:#f0a844;
  box-shadow:0 0 20px rgba(255,180,84,.3)}
.btn-sm{padding:8px 14px;font-size:14px}

/* stats */
.stats{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:24px 0;background:rgba(20,23,28,.5)}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;text-align:center}
.grid-4 b{display:block;font-family:var(--cond);font-size:clamp(24px,5vw,34px);color:var(--amber);
  text-shadow:0 0 16px rgba(255,180,84,.4)}
.grid-4 span{font-size:13px;color:var(--dim)}

/* sections */
.section{padding:56px 0;text-align:center}
.section.alt{background:rgba(20,23,28,.45);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin-top:28px;text-align:left}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px;transition:border-color .2s}
.card:hover{border-color:var(--amber)}
.card .icon{font-size:26px;margin-bottom:6px}
.card h3{color:var(--amber);margin-bottom:6px}
.card p{color:var(--dim);font-size:15px;margin:0}

/* certs */
.cert-group{margin:18px 0;text-align:left}
.cert-group h4{color:var(--dim);font-size:14px;letter-spacing:.16em;margin-bottom:8px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips span{font-family:var(--cond);font-weight:800;font-size:18px;color:var(--amber);
  background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:8px 16px;
  text-shadow:0 0 12px rgba(255,180,84,.4)}

/* pricing */
.price-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px;margin-top:26px;text-align:left}
.price{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:22px;position:relative}
.price.featured{border-color:var(--amber);box-shadow:0 0 28px rgba(255,180,84,.18)}
.price .badge{position:absolute;top:-11px;left:22px;background:var(--amber);color:#20150a;font-family:var(--cond);
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;padding:3px 10px;border-radius:99px;font-weight:800}
.price h3{color:var(--amber)}
.amount{font-family:var(--cond);font-size:34px;font-weight:800;margin:6px 0 12px}
.amount small{font-size:15px;color:var(--dim);font-weight:400}
.price ul{list-style:none;padding:0;margin:0 0 18px}
.price li{color:var(--dim);font-size:15px;padding:5px 0;border-bottom:1px solid var(--line)}
.price li:before{content:"\2713";color:var(--green);margin-right:8px}

.beta-band .sub{margin-bottom:20px}

/* content pages */
.page{padding:40px 0 60px;max-width:760px;margin:0 auto}
.page h1{font-size:clamp(28px,6vw,40px);color:var(--amber);margin-bottom:6px}
.page h2{font-size:22px;margin:28px 0 8px;text-align:left}
.page p,.page li{color:var(--dim);font-size:16px}
.page ul{padding-left:20px}
.page a{text-decoration:underline}
.updated{color:var(--faint);font-size:14px;margin-bottom:24px}

/* forms */
.form{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px;margin:20px 0;text-align:left}
.form label{display:block;font-family:var(--cond);letter-spacing:.08em;text-transform:uppercase;
  font-size:13px;color:var(--amber);margin:12px 0 5px}
.form input,.form select,.form textarea{width:100%;background:#0c0e11;color:var(--ink);
  border:1px solid var(--line);border-radius:8px;padding:11px 12px;font-family:inherit;font-size:15px}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--amber)}

/* footer */
.footer{border-top:1px solid var(--line);padding:34px 0;margin-top:20px;background:rgba(12,14,17,.8)}
.foot-grid{display:flex;justify-content:space-between;flex-wrap:wrap;gap:20px;margin-bottom:22px}
.foot-grid a{display:block;color:var(--dim);padding:3px 0;font-size:15px}
.foot-grid a:hover{color:var(--amber)}
.legal{border-top:1px solid var(--line);padding-top:16px;max-width:760px}

@media (max-width:620px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .nav nav a:not(.btn){display:none}
}
@media (prefers-reduced-motion:reduce){
  .tagline{animation:none}
  .needle{transition:none}
}

/* shop tier row */
.shop-tiers{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.shop-tiers span{background:var(--panel2);border:1px solid var(--line);border-radius:8px;
  padding:8px 14px;font-size:14px;color:var(--dim)}
.shop-tiers b{color:var(--amber);font-family:var(--cond);letter-spacing:.05em;margin-right:6px}