/* VBT Lifters — landing v1 */
:root{
  --bg:#17171c;
  --bg-2:#1e1e24;
  --bg-3:#24242c;
  --ink:#f2f0eb;
  --muted:#a7aab3;
  --orange:#ff6a1a;
  --orange-soft:rgba(255,106,26,.12);
  --line:rgba(255,255,255,.09);
  --radius:14px;
  --font-head:'Barlow Condensed',sans-serif;
  --font-body:'Inter',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;display:block}
a{color:var(--orange);text-decoration:none}
h1,h2,h3{font-family:var(--font-head);font-weight:600;line-height:1.08;letter-spacing:.01em;text-transform:uppercase}
h1{font-size:clamp(2.6rem,8vw,4.6rem)}
h2{font-size:clamp(1.9rem,5vw,2.8rem);margin:.35rem 0 1rem}
h3{font-size:1.35rem;margin-bottom:.5rem}
p{margin-bottom:1rem;color:var(--muted)}
p strong,li strong{color:var(--ink)}
.wrap{width:min(1120px,92%);margin:0 auto}
.wrap.narrow{max-width:720px}
.center{text-align:center}
.section{padding:4.5rem 0}
.section.alt{background:var(--bg-2)}
.section-sub{margin:-.5rem 0 2rem}
.body-lg{font-size:1.15rem;color:var(--ink)}
.eyebrow{
  font-family:var(--font-head);font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--orange);font-size:.95rem;margin-bottom:.4rem;
}

/* buttons */
.btn{
  display:inline-block;font-family:var(--font-head);font-weight:600;text-transform:uppercase;letter-spacing:.08em;
  font-size:1.05rem;padding:.85rem 1.7rem;border-radius:10px;border:1px solid transparent;
  transition:transform .12s ease,box-shadow .12s ease,background .12s ease;cursor:pointer;
}
.btn-primary{background:var(--orange);color:#17171c}
.btn-primary:hover{background:#ff7d38;transform:translateY(-1px);box-shadow:0 8px 24px rgba(255,106,26,.35)}
.btn-ghost{border-color:rgba(255,255,255,.25);color:var(--ink)}
.btn-ghost:hover{border-color:var(--orange);color:var(--orange)}
.btn-sm{padding:.55rem 1.1rem;font-size:.95rem}
.btn-block{display:block;text-align:center;margin-top:1.25rem}
.cta-row{display:flex;gap:.9rem;flex-wrap:wrap;margin-top:1.6rem}

/* nav */
.nav{position:sticky;top:0;z-index:50;background:rgba(23,23,28,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav-inner{display:flex;align-items:center;gap:1.5rem;width:min(1120px,92%);margin:0 auto;padding:.8rem 0}
.brand{display:flex;align-items:center;gap:.55rem;color:var(--ink);font-family:var(--font-head);font-weight:700;font-size:1.35rem;letter-spacing:.06em;text-transform:uppercase}
.brand em{font-style:normal;color:var(--orange)}
.brand-mark{width:30px;height:30px}
.nav-links{display:flex;gap:1.4rem;margin-left:auto}
.nav-links a{color:var(--muted);font-weight:500;font-size:.95rem}
.nav-links a:hover{color:var(--orange)}
.nav .btn{margin-left:.4rem}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:.4rem}
.nav-toggle span{display:block;width:24px;height:2px;background:var(--ink);margin:5px 0;border-radius:2px}

/* hero */
.hero{position:relative;overflow:hidden;padding:4.5rem 0 3.5rem}
.hero-bg{
  position:absolute;inset:0;background:url('hero-bg.webp') center/cover no-repeat;opacity:.28;
  mask-image:linear-gradient(to bottom,black 30%,transparent 95%);
  -webkit-mask-image:linear-gradient(to bottom,black 30%,transparent 95%);
}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(23,23,28,.55),rgba(23,23,28,.92));pointer-events:none}
.hero-grid{position:relative;z-index:1;display:grid;gap:2.5rem;align-items:center}
.hero .lede{font-size:1.2rem;color:var(--ink);max-width:34rem}
.hero-chart{background:rgba(20,20,26,.82);border:1px solid var(--line);border-radius:var(--radius);padding:1.1rem .6rem .4rem;box-shadow:0 20px 60px rgba(0,0,0,.45)}
.hero-chart figcaption{font-size:.85rem;color:var(--muted);padding:.7rem 1rem 1rem;text-align:center}
.hero-chart figcaption em{color:var(--orange);font-style:normal}

/* chart svg */
.chart-title{fill:#f2f0eb;font-family:var(--font-head);font-size:21px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.chart-sub{fill:#a7aab3;font-family:'Inter',sans-serif;font-size:11.5px}
.grid line{stroke:rgba(255,255,255,.07);stroke-width:1}
.axis text{fill:#8b8e97;font-family:'Inter',sans-serif;font-size:11px}
.axis .axis-name{fill:#a7aab3;font-size:12px}
.line-dl{fill:none;stroke:#ff6a1a;stroke-width:3}
.dots-dl circle{fill:#ff6a1a}
.line-sq{fill:none;stroke:#7cc4ff;stroke-width:2.5}
.dots-sq circle{fill:#7cc4ff}
.line-bp{fill:none;stroke:#c8ff00;stroke-width:2.5}
.dots-bp circle{fill:#c8ff00}
.line-ohp{fill:none;stroke:#c99cff;stroke-width:2.5}
.dots-ohp circle{fill:#c99cff}
.e1rm{font-family:var(--font-head);font-size:16px;font-weight:600;letter-spacing:.05em}
.e1rm.dl{fill:#ff6a1a}.e1rm.sq{fill:#7cc4ff}.e1rm.bp{fill:#c8ff00}.e1rm.ohp{fill:#c99cff}
.textbook-line{stroke:#8b8e97;stroke-width:1.5;stroke-dasharray:5 4}
.textbook-label{fill:#8b8e97;font-family:'Inter',sans-serif;font-size:11px;font-style:italic}

/* stats */
.stats{display:grid;gap:1rem;margin-top:2.2rem}
.stat{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);padding:1.3rem 1.5rem}
.stat-num{font-family:var(--font-head);font-weight:700;font-size:2.6rem;line-height:1;color:var(--ink);display:block}
.stat-num small{font-size:1.3rem;color:var(--muted)}
.stat-num.dim{color:var(--muted)}
.stat-num.hot{color:var(--orange)}
.stat-label{font-size:.9rem;color:var(--muted)}

/* cards */
.cards{display:grid;gap:1.1rem;margin-top:.5rem}
.card{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:1.7rem;transition:border-color .15s ease,transform .15s ease}
.card:hover{border-color:rgba(255,106,26,.5);transform:translateY(-3px)}
.card-num{font-family:var(--font-head);font-weight:700;font-size:1rem;color:var(--orange);letter-spacing:.15em;margin-bottom:.6rem}

/* report */
.report{background:linear-gradient(180deg,var(--bg-2),var(--bg))}
.report-grid{display:grid;gap:2.5rem;align-items:start}
.checklist{list-style:none;margin:1.4rem 0 0;display:grid;gap:.7rem}
.checklist li{position:relative;padding-left:2rem;color:var(--muted)}
.checklist li::before{
  content:"";position:absolute;left:0;top:.35rem;width:1.05rem;height:.6rem;
  border-left:3px solid var(--orange);border-bottom:3px solid var(--orange);transform:rotate(-45deg) translateY(-2px);
}
.steps-card{background:var(--bg-3);border:1px solid var(--line);border-radius:var(--radius);padding:1.8rem}
.steps{list-style:none;display:grid;gap:1.2rem;margin:1.2rem 0 .5rem}
.steps li{display:flex;gap:1rem;align-items:flex-start}
.step-n{
  flex:0 0 2.2rem;height:2.2rem;border-radius:50%;background:var(--orange-soft);color:var(--orange);
  font-family:var(--font-head);font-weight:700;font-size:1.15rem;display:flex;align-items:center;justify-content:center;
}
.steps div strong{display:block;color:var(--ink)}
.steps div span{color:var(--muted);font-size:.93rem}
.fineprint{font-size:.82rem;text-align:center;margin:1rem 0 0;color:var(--muted)}

/* group cta */
.group-cta{background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.group-cta .btn{margin-top:1rem}

/* footer */
.footer{padding:2rem 0}
.footer-inner{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;color:var(--muted);font-size:.9rem}
.tagline{font-family:var(--font-head);letter-spacing:.1em;text-transform:uppercase;color:var(--orange)}

/* desktop */
@media(min-width:860px){
  .hero-grid{grid-template-columns:1.05fr 1fr}
  .stats{grid-template-columns:repeat(3,1fr)}
  .cards{grid-template-columns:repeat(3,1fr)}
  .report-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:859px){
  .nav-links{
    position:fixed;top:0;right:0;bottom:0;width:min(78vw,300px);background:var(--bg-2);
    flex-direction:column;padding:5rem 2rem;gap:1.4rem;transform:translateX(100%);
    transition:transform .25s ease;border-left:1px solid var(--line);margin:0;
  }
  .nav-links.open{transform:none}
  .nav-links a{font-size:1.15rem}
  .nav-toggle{display:block;margin-left:auto}
  .nav .btn-sm{margin-left:0}
}

/* charts & calculators page */
.nav-links a.active{color:var(--orange)}
.page-hero{padding:4rem 0 1rem}
.page-hero .lede{font-size:1.2rem;color:var(--ink);max-width:40rem}
.lbl-hint{color:var(--muted);text-transform:none;letter-spacing:0;font-size:.8rem}
.calc-grid{display:grid;gap:2rem}
.field{margin-bottom:1.1rem}
.field label{display:block;color:var(--muted);margin-bottom:.35rem;text-transform:uppercase;letter-spacing:.08em;font-size:.78rem}
.field input[type=number]{width:100%;background:var(--bg-3);border:1px solid var(--line);border-radius:10px;color:var(--ink);padding:.7rem .9rem;font-size:1rem;font-family:var(--font-body)}
.field input[type=number]:focus,.data-table input:focus{outline:none;border-color:var(--orange)}
.preset-row{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.5rem}
.chip{font-family:var(--font-head);font-weight:600;text-transform:uppercase;letter-spacing:.06em;font-size:.95rem;padding:.5rem 1.1rem;border-radius:999px;border:1px solid var(--line);background:var(--bg-3);color:var(--muted);cursor:pointer}
.chip:hover{border-color:var(--orange);color:var(--orange)}
.chip.on{border-color:var(--orange);color:var(--orange);background:var(--orange-soft)}
.data-table{width:100%;border-collapse:collapse;margin-top:.4rem}
.data-table th{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);text-align:left;padding:.4rem .5rem;font-weight:600}
.data-table td{padding:.3rem .5rem}
.data-table td:last-child{white-space:nowrap}
.data-table input{width:100%;background:var(--bg-3);border:1px solid var(--line);border-radius:8px;color:var(--ink);padding:.6rem .7rem;font-size:1rem;font-family:var(--font-body)}
.tag{display:inline-block;font-size:.66rem;font-weight:600;text-transform:uppercase;letter-spacing:.07em;padding:.18rem .55rem;border-radius:999px;vertical-align:middle}
.tag-real{background:var(--orange-soft);color:var(--orange)}
.tag-sample{background:rgba(255,255,255,.08);color:var(--muted)}
.result-card{background:var(--bg-3);border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem;margin-top:1.3rem}
.result-num{font-family:var(--font-head);font-weight:700;font-size:3.2rem;color:var(--orange);line-height:1;margin:0}
.result-meta{color:var(--muted);font-size:.92rem;margin:.5rem 0 0}
.warn{color:#ffb020}
.calc-fig{background:rgba(20,20,26,.82);border:1px solid var(--line);border-radius:var(--radius);padding:1.1rem .6rem .6rem}
.chart-note{font-size:.88rem;color:var(--muted);margin:0;padding:.8rem 1rem 1rem}
.chart-note strong{color:var(--ink)}
/* estimator + chart svg helpers */
.gridln{stroke:rgba(255,255,255,.07);stroke-width:1}
.svgtick{fill:#8b8e97;font-family:'Inter',sans-serif;font-size:11px}
.svgaxis{fill:#a7aab3;font-family:'Inter',sans-serif;font-size:12px}
.regline{stroke:#ff6a1a;stroke-width:2.5}
.regdot{fill:#ff6a1a}
.regstar{fill:#ff6a1a;stroke:#17171c;stroke-width:2}
.mvtline{stroke:#8b8e97;stroke-width:1.5;stroke-dasharray:6 4}
.mvtlabel{fill:#8b8e97;font-family:'Inter',sans-serif;font-size:11px}
.e1rmlabel{fill:#ff6a1a;font-family:'Barlow Condensed',sans-serif;font-size:19px;font-weight:600}
.bar-dim{fill:#3d3d47}
.bar-best{fill:#ff6a1a}
.bar-real{fill:#ff6a1a}
.thresh{stroke:#ff5d5d;stroke-width:1.5;stroke-dasharray:5 4}
.threshlbl{fill:#ff8d8d;font-family:'Inter',sans-serif;font-size:11px}
.stopzone{fill:rgba(255,93,93,.07)}
.callout{fill:#f2f0eb;font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:600;letter-spacing:.05em;text-transform:uppercase}
.calloutln{stroke:#f2f0eb;stroke-width:1.5}
.zone-lbl{fill:#f2f0eb;font-family:'Barlow Condensed',sans-serif;font-size:19px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.zone-val{fill:#a7aab3;font-family:'Barlow Condensed',sans-serif;font-size:19px;font-weight:600}
.zone-val.hot{fill:#ff6a1a}
.gapln{stroke:#ff6a1a;stroke-width:2}
.gaplabel{fill:#ff6a1a;font-family:'Inter',sans-serif;font-size:12px;font-weight:600}
@media(min-width:860px){
  .calc-grid{grid-template-columns:380px 1fr;align-items:start}
}