:root{
  --bg:#0a0a0a; --ink:#f7f3e8; --muted:#b9ad90;
  --glass:rgba(18,18,18,.75); --stroke:rgba(255,215,128,.12);
  --accent:#d4af37; --accent-2:#8a6a14; --chip:rgba(212,175,55,.12);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:radial-gradient(60% 40% at 110% 10%, rgba(212,175,55,.12), transparent 60%), radial-gradient(50% 40% at -10% 110%, rgba(138,106,20,.12), transparent 60%), linear-gradient(0deg,#0b0b0b,var(--bg)); color:var(--ink); font-family:'DM Sans', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif}
/* Links normalized */
a, a:visited{color:var(--ink); text-decoration:none}
a:hover{opacity:.9}
h1,h2,h3{font-family:'Space Grotesk', sans-serif; letter-spacing:.2px; margin:0 0 .6rem}
h1{font-size:clamp(40px,5vw,64px)}
h2{font-size:clamp(28px,3.6vw,40px)}
h3{font-size:clamp(18px,2vw,22px)}
p{margin:0 0 1rem}
/* Sidebar */
.sidebar{position:fixed; inset:0 auto 0 0; width:230px; padding:1rem; border-right:1px solid var(--stroke); background:rgba(14,14,14,.75); backdrop-filter:blur(8px)}
.brand{display:flex; align-items:center; gap:.6rem; text-decoration:none; color:inherit; margin-bottom:1rem}
.brand img{width:48px; height:48px; border-radius:12px; border:1px solid var(--stroke); background:#111}
.brand span{font-family:'Space Grotesk', sans-serif; font-weight:700; line-height:1.05}
.side-nav{display:flex; flex-direction:column; gap:.25rem; margin-bottom:1rem}
.side-nav a{display:block; padding:.6rem .7rem; border-radius:10px; text-decoration:none; color:inherit; font-weight:600}
.side-nav a:hover{background:var(--chip)}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.4rem; padding:.75rem 1rem; border:1px solid var(--stroke); border-radius:12px; text-decoration:none; color:var(--ink); background:#111; box-shadow:0 8px 24px rgba(0,0,0,.24); font-weight:700}
.btn.primary{background:linear-gradient(180deg, var(--accent), var(--accent-2)); color:#101010; border:none}
.btn.ghost{background:#0f0f0f}
.btn.small{padding:.55rem .8rem; font-size:.92rem}
/* Content */
.content{margin-left:230px; padding:2rem 5vw 3rem}
.hero{position:relative; padding:3rem 0}
.glass{background:var(--glass); border:1px solid var(--stroke); border-radius:16px; padding:1.2rem 1.2rem; box-shadow:0 20px 40px rgba(0,0,0,.35)}
.lead{color:var(--muted); font-size:1.05rem}
.cta{display:flex; flex-wrap:wrap; gap:.6rem}
.blobs .blob{position:absolute; filter:blur(30px); border-radius:50%; opacity:.35}
.blobs .b1{width:220px; height:220px; background:rgba(212,175,55,.25); right:5%; top:-10%}
.blobs .b2{width:260px; height:260px; background:rgba(138,106,20,.25); left:50%; top:40%}
.blobs .b3{width:180px; height:180px; background:rgba(255,215,128,.22); left:5%; top:5%}
/* Panels */
.panel{padding:2rem 0; border-top:1px dashed var(--stroke)}
.panel.alt{background:rgba(18,18,18,.65); border:1px solid var(--stroke); border-radius:16px; padding:1.4rem; margin-top:1rem}
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1rem; margin-top:.6rem}
.cards.two{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.card{background:#111; border:1px solid var(--stroke); border-radius:14px; padding:1rem; box-shadow:0 12px 26px rgba(0,0,0,.35)}
.timeline{display:grid; gap:.4rem; margin:.6rem 0 1rem}
.chips{display:flex; flex-wrap:wrap; gap:.5rem; list-style:none; padding:0; margin:.6rem 0 0}
.chips li{background:#111; border:1px solid var(--stroke); padding:.5rem .7rem; border-radius:999px}
/* Accordion */
.acc{border:1px solid var(--stroke); border-radius:12px; background:#101010; margin:.6rem 0; box-shadow:0 8px 22px rgba(0,0,0,.4)}
.acc summary{cursor:pointer; padding:.8rem 1rem; list-style:none; font-weight:700; display:flex; align-items:center; gap:.6rem}
.acc summary::marker{display:none}
.acc .acc-body{padding:0 1rem 1rem; color:var(--ink)}
.acc .cols{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1rem}
.tag{display:inline-flex; align-items:center; border-radius:999px; padding:.25rem .6rem; font-size:.78rem; border:1px solid var(--stroke); background:rgba(212,175,55,.12)}
.hint{color:var(--muted)}
/* Risk calc */
.form{display:grid; gap:.5rem}
.form .grid2{display:grid; grid-template-columns:repeat(2,1fr); gap:.6rem}
.form input,.form textarea{width:100%; padding:.65rem .7rem; border:1px solid var(--stroke); border-radius:10px; background:#0f0f0f; color:var(--ink)}
.output{white-space:pre-wrap; border:1px dashed var(--stroke); background:#0f0f0f; border-radius:12px; padding:.7rem; margin-top:.5rem; color:var(--ink)}
/* Modal */
.modal{position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.6); padding:1rem; z-index:100}
.modal.open{display:flex}
.modal__dialog{background:#121212; color:var(--ink); border-radius:14px; padding:1rem; max-width:min(90vw, 620px); border:1px solid var(--stroke); box-shadow:0 20px 50px rgba(0,0,0,.6); position:relative}
.modal__close{border:none; background:transparent; color:var(--ink); font-size:2rem; position:absolute; right:1rem; top:.2rem; cursor:pointer; opacity:.85}
.promo-code{font-family:'Space Grotesk', sans-serif; font-weight:700; font-size:1.2rem; letter-spacing:.6px; margin:.6rem 0 1rem; background:#0f0f0f; padding:.5rem .8rem; border-radius:10px; display:inline-block}
.promo-actions{display:flex; gap:.6rem; align-items:center}
.disclaimer{color:var(--muted); font-size:.92rem}
/* Responsive */
@media (max-width:880px){
  .sidebar{position:static; width:auto; display:flex; align-items:center; gap:.8rem; border-right:none}
  .content{margin:0; padding:1rem 5vw 3rem}
  .side-nav{flex-direction:row; flex-wrap:wrap}
  .brand span{display:none}
  .form .grid2{grid-template-columns:1fr}
  input, textarea, button{font-size:16px} /* avoid iOS zoom */
  .btn{width:100%}
  .cards, .cards.two{grid-template-columns:1fr}
}