:root{
  --bg:#0b0c0f;
  --panel:#0f1116;
  --panel2:#0d0f13;
  --text:#f4f5f7;
  --muted:#a7acb9;
  --border:rgba(255,255,255,.10);
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --radius:22px;
  --radius2:18px;
  --max:1140px;

  /* Accent palette */
  --gold:#f5c667;
  --coral:#c84e2f;
  --teal:#006f73;
  --ink:#2c2c2c;

  --focus:rgba(245,198,103,.55);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background:radial-gradient(1200px 600px at 15% 10%, rgba(245,198,103,.10), transparent 55%),
             radial-gradient(900px 600px at 80% 20%, rgba(0,111,115,.12), transparent 55%),
             radial-gradient(900px 700px at 70% 110%, rgba(200,78,47,.10), transparent 55%),
             var(--bg);
}

a{color:inherit}
img{max-width:100%;display:block}

.container{max-width:var(--max);margin:0 auto;padding:0 18px}

.skip{
  position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden;
}
.skip:focus{
  left:14px;top:14px;width:auto;height:auto;padding:10px 12px;border-radius:12px;
  background:rgba(255,255,255,.10);outline:2px solid var(--focus);
}

/* Topbar */
.topbar{
  position:sticky;top:0;z-index:50;
  background:rgba(11,12,15,.6);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--border);
}
.topbar__inner{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 0}
.brand{display:flex;align-items:center;gap:10px;min-width:220px}
.brand__mark{width:38px;height:38px}
.brand__title{font-weight:700;letter-spacing:-.02em}
.brand__sub{font-size:12px;color:var(--muted)}

.nav{display:flex;align-items:center;gap:10px}
.nav__link{font-size:14px;color:var(--muted);text-decoration:none;padding:10px 10px;border-radius:999px}
.nav__link:hover{color:var(--text);background:rgba(255,255,255,.06)}

.navToggle{
  display:none;border:1px solid var(--border);background:rgba(255,255,255,.04);
  width:42px;height:42px;border-radius:14px;cursor:pointer;padding:10px
}
.navToggle span{display:block;height:2px;background:rgba(255,255,255,.85);margin:5px 0;border-radius:2px}

.mobileNav{border-top:1px solid var(--border);padding:10px 18px;background:rgba(11,12,15,.85)}
.mobileNav__link{display:block;text-decoration:none;color:var(--muted);padding:10px 12px;border-radius:14px}
.mobileNav__link:hover{color:var(--text);background:rgba(255,255,255,.06)}

@media (max-width: 860px){
  .nav{display:none}
  .navToggle{display:inline-block}
}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:8px;
  padding:12px 14px;
  border-radius:999px;
  border:1px solid var(--border);
  text-decoration:none;
  font-weight:600;
  font-size:14px;
  cursor:pointer;
  transition:transform .08s ease, background .2s ease, border-color .2s ease;
  background:rgba(255,255,255,.04);
}
.btn:hover{background:rgba(255,255,255,.07)}
.btn:active{transform:translateY(1px)}
.btn:focus{outline:2px solid var(--focus);outline-offset:2px}

.btn--primary{
  background:linear-gradient(135deg, rgba(245,198,103,.95), rgba(200,78,47,.90));
  border-color:transparent;
  color:#151516;
}
.btn--primary:hover{filter:saturate(1.05) brightness(1.02)}

.btn--outline{background:transparent}
.btn--ghost{background:rgba(255,255,255,.02)}

/* Hero */
.hero{position:relative;overflow:hidden}
.hero__grid{display:grid;grid-template-columns:1.15fr .85fr;gap:22px;align-items:center;padding:54px 0 28px}
.hero__copy h1{margin:14px 0 0;font-size:44px;line-height:1.05;letter-spacing:-.03em}
.headline-accent{display:block}
.lead{margin:14px 0 0;color:var(--muted);font-size:17px;max-width:56ch;line-height:1.55}
.hero__cta{margin-top:18px;display:flex;flex-wrap:wrap;gap:10px}
.hero__checks{margin-top:18px;display:flex;flex-wrap:wrap;gap:10px}
.check{display:flex;align-items:center;gap:8px;border:1px solid var(--border);background:rgba(255,255,255,.03);padding:10px 12px;border-radius:999px;font-size:13px;color:var(--muted)}
.check__icon{filter:saturate(1.1)}

.pill{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--border);background:rgba(255,255,255,.03);padding:10px 12px;border-radius:999px;font-size:14px;color:var(--text)}
.pill__icon{font-size:16px}

.hero__card{justify-self:end;width:100%;max-width:520px}
.heroGlow{position:absolute;inset:auto -30% -40% -30%;height:480px;background:radial-gradient(closest-side, rgba(245,198,103,.12), transparent 70%);filter:blur(0px);pointer-events:none}

@media (max-width: 980px){
  .hero__grid{grid-template-columns:1fr;gap:18px}
  .hero__card{justify-self:stretch;max-width:none}
  .hero__copy h1{font-size:38px}
}

/* Sections */
.section{padding:56px 0}
.section--alt{background:rgba(255,255,255,.02);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.sectionTitle{text-align:center;max-width:760px;margin:0 auto}
.kicker{
  display:inline-flex;align-items:center;justify-content:center;
  padding:6px 12px;border-radius:999px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.03);
  color:var(--muted);font-size:13px;margin-bottom:10px
}
.sectionTitle h2{margin:0;font-size:34px;letter-spacing:-.02em}
.sectionTitle p{margin:10px 0 0;line-height:1.6}

/* Cards */
.card{
  border:1px solid var(--border);
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:18px;
}
.card--span2{grid-column:span 2}
.card__head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}
.card__title{font-weight:700;letter-spacing:-.01em}
.card__sub{font-size:13px;color:var(--muted);margin-top:4px;line-height:1.45}
.card__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px}

.badge{display:inline-flex;align-items:center;padding:6px 10px;border-radius:999px;font-size:12px;font-weight:700;background:rgba(255,255,255,.06);border:1px solid var(--border);color:var(--text)}
.badge--outline{background:transparent;color:var(--muted)}

/* Layout grids */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:22px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;margin-top:22px}
@media (max-width: 980px){
  .grid2{grid-template-columns:1fr}
  .grid3{grid-template-columns:1fr}
  .card--span2{grid-column:auto}
}

/* Trust bar */
.trustBar{border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:rgba(255,255,255,.02)}
.trustBar__grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;padding:18px 0}
.trustItem{display:flex;gap:12px;align-items:flex-start;padding:12px;border-radius:var(--radius2);border:1px solid rgba(255,255,255,.06);background:rgba(0,0,0,.15)}
.trustItem__icon{width:22px;height:22px;opacity:.95}
.trustItem__title{font-weight:700}
.trustItem__sub{font-size:13px;color:var(--muted);margin-top:4px;line-height:1.45}
@media (max-width: 980px){
  .trustBar__grid{grid-template-columns:1fr}
}

/* Keys */
.keyCard__top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.keyName{display:flex;align-items:center;gap:10px}
.keyIcon{width:36px;height:36px;border-radius:14px;border:1px solid var(--border);background:rgba(255,255,255,.03);display:flex;align-items:center;justify-content:center}
.keyIcon img{width:18px;height:18px}
.keyTitle{font-weight:800;font-size:18px}
.keyTag{font-size:13px;color:var(--muted);margin-top:4px}
.keyList{margin:12px 0 0;padding-left:16px;color:var(--text)}
.keyList li{margin:8px 0;color:rgba(244,245,247,.92);line-height:1.45}
.pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.pillTag{font-size:12px;color:var(--muted);border:1px solid var(--border);background:rgba(255,255,255,.02);padding:7px 10px;border-radius:999px}

.callout{margin-top:20px;border:1px solid rgba(245,198,103,.25);background:linear-gradient(135deg, rgba(245,198,103,.08), rgba(0,111,115,.05));border-radius:var(--radius);padding:16px;display:flex;gap:12px;align-items:flex-start}
.callout__icon{width:34px;height:34px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:rgba(245,198,103,.18);border:1px solid rgba(245,198,103,.25)}
.callout__title{font-weight:800}
.callout__text{margin:6px 0 0;color:var(--muted);line-height:1.6}

/* Radar */
.radarWrap{margin-top:8px}
#radar{width:100%;height:auto;border-radius:16px;background:rgba(0,0,0,.12);border:1px solid rgba(255,255,255,.06)}
.radarLegend{display:flex;align-items:center;gap:10px;margin-top:10px;color:var(--muted);font-size:13px}
.dot{width:10px;height:10px;border-radius:999px;display:inline-block}
.dot--primary{background:linear-gradient(135deg, var(--gold), var(--coral))}

.smallLabel{font-size:12px;color:var(--muted);font-weight:700}
.bigNumber{font-size:26px;font-weight:900;letter-spacing:-.02em;margin-top:4px}

/* Sliders */
.sliders{display:flex;flex-direction:column;gap:14px;margin-top:6px}
.sliderRow{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;padding:10px 12px;border-radius:16px;border:1px solid rgba(255,255,255,.06);background:rgba(0,0,0,.12)}
.sliderTop{display:flex;align-items:center;justify-content:space-between;gap:10px}
.sliderName{font-weight:700}
.sliderVal{color:var(--muted);font-size:13px;font-weight:700}
.range{width:100%;margin-top:8px}

input[type="range"]{
  -webkit-appearance:none;
  appearance:none;
  width:100%;
  height:6px;
  border-radius:999px;
  background:rgba(255,255,255,.10);
  outline:none;
}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:18px;height:18px;border-radius:999px;
  background:linear-gradient(135deg, var(--gold), var(--coral));
  border:1px solid rgba(0,0,0,.25);
  box-shadow:0 6px 16px rgba(0,0,0,.35);
}
input[type="range"]::-moz-range-thumb{
  width:18px;height:18px;border-radius:999px;
  background:linear-gradient(135deg, var(--gold), var(--coral));
  border:1px solid rgba(0,0,0,.25);
}

.divider{height:1px;background:rgba(255,255,255,.08);margin:14px 0}
.miniScore{display:flex;gap:14px;align-items:flex-start;justify-content:space-between}
.miniScore__hint{font-size:13px;color:var(--muted);line-height:1.5;max-width:52ch}
@media (max-width: 520px){
  .miniScore{flex-direction:column}
}

/* Tabs */
.tabs{display:grid;grid-template-columns:repeat(6, 1fr);gap:8px;margin-top:6px}
.tab{border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.03);color:var(--muted);padding:10px 10px;border-radius:16px;font-weight:800;font-size:12px;cursor:pointer}
.tab:hover{color:var(--text);background:rgba(255,255,255,.06)}
.tab.is-active{color:#151516;border-color:transparent;background:linear-gradient(135deg, rgba(245,198,103,.95), rgba(0,111,115,.70))}
.tab:focus{outline:2px solid var(--focus);outline-offset:2px}
@media (max-width: 980px){
  .tabs{grid-template-columns:repeat(3,1fr)}
}
.tabPanels{margin-top:14px}
.tabPanel{display:none}
.tabPanel.is-active{display:block}
.panelTitle{font-weight:900}
.panelList{margin:10px 0 0;padding-left:16px;color:rgba(244,245,247,.92)}
.panelList li{margin:8px 0;color:var(--muted);line-height:1.5}
.panelHint{margin-top:12px;border:1px solid rgba(255,255,255,.08);background:rgba(0,0,0,.12);padding:12px;border-radius:16px;color:var(--muted);font-size:13px;line-height:1.5}

/* Form */
.form{display:flex;gap:10px;margin-top:6px}
.input{flex:1;padding:12px 14px;border-radius:16px;border:1px solid rgba(255,255,255,.10);background:rgba(0,0,0,.15);color:var(--text)}
.input:focus{outline:2px solid var(--focus);outline-offset:2px}
@media (max-width: 520px){
  .form{flex-direction:column}
}

.list{margin:12px 0 0;padding-left:16px;color:var(--muted)}
.list li{margin:8px 0;line-height:1.5}

.stack{display:flex;flex-direction:column;gap:12px;margin-top:6px}
.stackItem{display:flex;gap:12px;align-items:flex-start;border:1px solid rgba(255,255,255,.06);background:rgba(0,0,0,.12);padding:12px;border-radius:18px}
.stackItem__icon{width:22px;height:22px}
.stackItem__title{font-weight:800}
.stackItem__sub{font-size:13px;color:var(--muted);margin-top:4px;line-height:1.45}

.note{margin-top:12px;border:1px solid rgba(0,111,115,.25);background:linear-gradient(135deg, rgba(0,111,115,.10), rgba(255,255,255,.03));padding:12px;border-radius:18px}
.note__title{font-weight:900}
.note__text{font-size:13px;color:var(--muted);margin-top:4px;line-height:1.45}

.prose p{margin:0 0 12px;color:var(--muted);line-height:1.65}

/* Footer */
.footer{border-top:1px solid var(--border);padding:22px 0;background:rgba(0,0,0,.18)}
.footer__inner{display:flex;align-items:center;justify-content:space-between;gap:12px}
.footer__badges{display:flex;gap:8px;flex-wrap:wrap}

/* Accessibility */
.srOnly{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.tiny{font-size:12px}
.muted{color:var(--muted)}