:root{--bg:#0b1020;--panel:#101733;--card:#141c3a;--muted:#c7d3ff;--text:#f5f7ff;--brand:#4fb3ff;--brand2:#00d1a0;--border:#2a3c7a;--accent:#ffd166}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:Inter,system-ui,Arial,sans-serif;background:linear-gradient(180deg,#0b1020,#0f1530);color:var(--text);line-height:1.55;overflow-x:hidden}

/* Particles canvas */
#bgCanvas{position:fixed;inset:0;z-index:-2;background:transparent}
.bg-overlay{position:fixed;inset:0;background:
  radial-gradient(1200px 600px at 10% 10%,rgba(21,33,89,.35),transparent 60%),
  radial-gradient(900px 500px at 95% 5%,rgba(0,209,160,.12),transparent 60%);
z-index:-1;pointer-events:none}

a{color:var(--brand);text-decoration:none}
header{position:sticky;top:0;background:rgba(11,16,32,.7);backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid #1a2147;z-index:50}
.container{width:min(1100px,92%);margin:auto}
.nav{display:flex;align-items:center;justify-content:space-between;padding:12px 0}

.logo{letter-spacing:.3px}
.logo-row{display:flex;align-items:center;gap:10px}
.badge{background:#14204b;border:1px solid #223173;color:#b9c7ee;padding:4px 10px;border-radius:999px;font-size:.85rem}

.hero{padding:18px 0 10px;text-align:center}
.hero h1{margin:.1rem 0;font-size:clamp(22px,3.8vw,34px)}
.hero p{margin:6px auto 10px;color:#c1cff8;max-width:680px}

.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:10px;border:1px solid #284191;background:#14204b;color:#e9f1ff;font-weight:600;cursor:pointer}
.btn.primary{background:linear-gradient(90deg,var(--brand),#8fd3ff);color:#041229;border:0}

.quick{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:10px 0 14px}
.center-cta{text-align:center;margin:6px 0 24px}

.stack{display:grid;gap:12px;margin:12px 0 80px}
details{background:var(--card);border:1px solid var(--border);border-radius:12px;overflow:hidden}
summary{list-style:none;padding:14px 16px;display:flex;align-items:center;justify-content:space-between;cursor:pointer}
summary::-webkit-details-marker{display:none}
.sum-left{display:flex;align-items:center;gap:12px}
.tag{background:#12224b;border:1px solid #283a7a;color:#b9c7ee;padding:3px 8px;border-radius:999px;font-size:.78rem}
.price{color:#fff;font-weight:800}
.chev{color:#9fb7ff;transition:transform .2s}
details[open] .chev{transform:rotate(180deg)}
.content{padding:0 16px 14px;color:#dbe5ff}
.list{margin:8px 0 0;padding-left:18px}
.list li{margin:6px 0}
.row{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.card-inline{display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px}
.kudos{background:#12214a;border:1px solid #22327a;border-radius:12px;padding:14px;margin:8px 0}
footer{border-top:1px solid #1a2147;color:#9eb0e8;padding:18px 0 80px;text-align:center}

/* Sticky Toolbar */
.toolbar{position:fixed;left:50%;transform:translateX(-50%);bottom:14px;z-index:60;display:flex;gap:8px;align-items:center;background:rgba(14,19,45,.82);backdrop-filter:blur(8px) saturate(130%);border:1px solid #233074;border-radius:14px;padding:8px 10px;box-shadow:0 8px 24px rgba(0,0,0,.35)}
.tool-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:68px;padding:8px;border-radius:10px;color:#d9e4ff;border:1px solid transparent;background:transparent;cursor:pointer}
.tool-btn:hover{background:#121a3f;border-color:#2a3e83}
.tool-btn span{font-size:.78rem;color:#a9baf0}
.dot{width:8px;height:8px;border-radius:50%;background:#00d1a0;display:inline-block;margin-left:6px}
@media (max-width:520px){.tool-btn{min-width:56px}.tool-btn span{font-size:.7rem}}

/* Modal */
.modal-backdrop{position:fixed;inset:0;background:rgba(0,10,25,.65);display:none;place-items:center;z-index:100}
.modal{width:min(520px,92%);background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:16px}
.modal h3{margin:0 0 6px}
.modal .x{background:transparent;border:0;color:#b9c7ee;font-size:20px;cursor:pointer}
.form{display:grid;gap:10px;margin-top:6px}
input,select,textarea{width:100%;padding:10px;border-radius:8px;border:1px solid #273a83;background:#0f193d;color:#eaf0ff}
.flex{display:flex;justify-content:space-between;align-items:center;gap:8px}
.note{color:#c7d3ff;font-size:.9rem}

/* --- Spam honeypot field --- */
.hp {position: absolute;left: -10000px;top: auto;width: 1px;height: 1px;overflow: hidden;}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){#bgCanvas{display:none}.bg-overlay{display:none}}