/* ====== Tokens ====== */
:root{
  --bg:#121314;
  --panel:#1a1c1f;
  --card:#24272C;
  --text:#ECECEC;
  --muted:#8a8d93;
  --accent:#D77A3D;
  --border:rgba(255,255,255,.08);
  --maxw:1100px;
}

/* ====== Base ====== */
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,sans-serif;line-height:1.6}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-decoration:none;transition:filter .15s ease, background-color .15s ease}
.container{max-width:var(--maxw);margin-inline:auto;padding:24px}

/* ====== Header ====== */
.site-header{display:flex;align-items:center;justify-content:space-between;padding-block:18px}
.brand-link{font:700 18px/1 "Space Grotesk",sans-serif;letter-spacing:.2px;color:var(--text)}
.nav-row{display:flex;gap:16px}
.nav-row a{opacity:.9;padding:.25rem .5rem;border-radius:8px}
.nav-row a:hover{background:rgba(255,255,255,.06)}

/* ====== Hero ====== */
.hero-rail{display:grid;gap:22px;grid-template-columns:1.1fr .9fr;align-items:center;padding-top:10px}
.display{font:700 38px/1.15 "Space Grotesk",sans-serif;margin:0 0 8px}
.lede{margin:0 0 16px;opacity:.95;max-width:56ch}
.accent-underline{background:linear-gradient(transparent 65%, rgba(215,122,61,.45) 0)}
.hero-media{border-radius:14px;overflow:hidden;border:1px solid var(--border);background:var(--panel);min-height:300px}
.cta-row{display:flex;gap:10px;flex-wrap:wrap}

.btn{display:inline-block;padding:.72rem 1rem;border-radius:10px;font-weight:600}
.btn--primary{background:var(--accent);color:var(--bg)}
.btn--ghost{border:1px solid var(--muted);color:var(--text)}
.btn:hover{filter:brightness(1.05)}

/* ====== Sections & Cards ====== */
.section-pad{padding-block:36px}
.section-title{font:600 22px/1.2 "Space Grotesk",sans-serif;margin:0 0 8px}
.muted{color:var(--muted)}

.card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:22px;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.paper{background:var(--panel)}
.card.tight{padding:12px}

/* ====== Feature grid ====== */
.features-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.feature{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:18px}
.feature h3{margin:.25rem 0 .5rem}

/* ====== Split layout ====== */
.split{display:grid;grid-template-columns:1.1fr .9fr;gap:18px;align-items:start}
.split .kicker{margin:.25rem 0 .5rem;color:var(--text);opacity:.9}
.bulleted{margin:0;padding-left:1.1rem}
.bulleted li{margin:.3rem 0}

/* ====== Blocks grid ====== */
.grid.blocks{display:grid;gap:16px;grid-template-columns:repeat(3,1fr)}
.inline{display:inline-block;margin-top:8px}

/* ====== List card ====== */
.list .list-item{display:block;padding:10px 12px;border-radius:10px;border:1px solid var(--border);background:var(--panel);margin:6px 0}
.list .list-item:hover{background:rgba(255,255,255,.06)}

/* ====== Final CTA ====== */
.final-cta{text-align:center}

/* ====== Footer ====== */
.site-footer{display:flex;justify-content:space-between;align-items:center;padding-block:40px;color:var(--muted)}
.site-footer .small a{opacity:.9}

/* ====== Accessibility helpers ====== */
.visually-hidden{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

/* ====== CSS-only HERO ART (no image) ====== */
.art-bg{
  height:360px;
  background:
    radial-gradient(1200px 600px at 60% -20%, rgba(215,122,61,.22), transparent 60%),
    radial-gradient(800px 500px at 20% 120%, rgba(215,122,61,.18), transparent 60%),
    radial-gradient(400px 300px at 80% 80%, rgba(255,255,255,.08), transparent 60%),
    conic-gradient(from 210deg at 50% 50%, rgba(255,255,255,.05), transparent 40%, rgba(255,255,255,.06) 60%, transparent 80%, rgba(255,255,255,.05));
  filter:saturate(1.05) contrast(1.05);
}

/* ====== CSS "CHART" (no image) ====== */
.chart{
  --track: rgba(255,255,255,.07);
  --bar: var(--accent);
  --bar-muted: #4b4f55;
  display:grid; gap:10px; padding:10px;
}
.chart .bar{
  position:relative; background:var(--track); border:1px solid var(--border);
  border-radius:10px; padding:8px 12px; overflow:hidden; color:#eaeaea
}
.chart .bar::before{
  content:""; position:absolute; inset:0; width:var(--v,40%);
  background:linear-gradient(90deg, var(--bar), color-mix(in srgb, var(--bar) 70%, #fff 30%));
  border-radius:9px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)
}
.chart .bar.bar--muted::before{
  background:linear-gradient(90deg, var(--bar-muted), color-mix(in srgb, var(--bar-muted) 70%, #fff 30%));
}
.chart-legend{font-size:.85rem; margin-top:6px; text-align:right}

/* ====== Responsive ====== */
@media (max-width: 960px){
  .hero-rail, .split{grid-template-columns:1fr}
  .features-grid{grid-template-columns:repeat(2,1fr)}
  .grid.blocks{grid-template-columns:1fr}
  .display{font-size:32px}
  .hero-media{min-height:220px}
}
@media (max-width: 560px){
  .features-grid{grid-template-columns:1fr}
  .nav-row{gap:10px}
}