/* ——— Base ——— */
:root{
  --bg:#0d0e13;
  --text:#e7e9ee;
  --muted:#aab1c6;
  --accent: #7b5cff;  /* violet */
  --accent2: #31d7ff; /* cyan */
  --card:#121420;
  --line:rgba(255,255,255,.08);
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:'Sora',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,'Noto Sans',sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* ——— Animated background ——— */
.bg{position:fixed;inset:0;overflow:hidden;z-index:-2}
.blob{position:absolute;filter: blur(60px);opacity:.45; mix-blend-mode: screen;}
.blob.b1{width:46vmax;height:46vmax;background:radial-gradient(circle at 30% 30%, var(--accent), transparent 60%);left:-10vmax;top:-10vmax;animation: drift1 16s ease-in-out infinite;}
.blob.b2{width:46vmax;height:46vmax;background:radial-gradient(circle at 70% 70%, var(--accent2), transparent 60%);right:-12vmax;bottom:-12vmax;animation: drift2 18s ease-in-out infinite;}
@keyframes drift1{50%{transform:translate(5vmax,6vmax) scale(1.05)}}
@keyframes drift2{50%{transform:translate(-6vmax,-4vmax) scale(1.1)}}
.grain{position:absolute;inset:-200%;background-image:url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%2280%22 height=%2280%22 viewBox=%220 0 80 80%22><filter id=%22n%22 x=%220%22 y=%220%22><feTurbulence type=%22fractalNoise%22 baseFrequency=%220.65%22 numOctaves=%221%22/></filter><rect width=%22100%25%22 height=%22100%25%22 filter=%22url(%23n)%22 opacity=%220.04%22/></svg>');opacity:.5;animation:film 120s linear infinite}
@keyframes film{to{transform:translate3d(-25%,15%,0)}}

/* ——— Layout ——— */
.topbar{display:flex;justify-content:space-between;align-items:center;padding:20px clamp(16px,4vw,48px); position:sticky; top:0; backdrop-filter: blur(10px); background:linear-gradient(to bottom, rgba(10,11,17,.8), transparent); border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:12px;font-weight:800;letter-spacing:.08em}
.logo{width:28px;height:28px;color:var(--accent2)}
.wordmark{font-size:14px;color:var(--muted)}

.mode{all:unset;cursor:pointer;border:1px solid var(--line);padding:8px 10px;border-radius:10px;display:flex;gap:8px;align-items:center;box-shadow:var(--shadow);background:rgba(255,255,255,.02)}
.mode:hover{transform:translateY(-1px)}

.container{max-width:1000px;margin:0 auto;padding:24px clamp(16px,4vw,48px) 80px}
.hero{margin:48px 0 20px}
h1{font-size:clamp(28px,4vw,48px);margin:0 0 10px}
.accent{background:linear-gradient(90deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{color:var(--muted);max-width:60ch}

.cards{display:grid;grid-template-columns:1.2fr .8fr;gap:24px;margin-top:22px}
@media (max-width:860px){.cards{grid-template-columns:1fr} .aside{order:-1}}

.card{background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01));border:1px solid var(--line);border-radius:18px;padding:22px 18px 16px;box-shadow:var(--shadow)}
.card-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.icon-wrap{width:38px;height:38px;border-radius:10px;background:radial-gradient(circle at 30% 30%, var(--accent2), transparent 70%);display:grid;place-items:center;border:1px solid var(--line)}
.icon{width:20px;height:20px;color:#fff}

.row{display:grid;grid-template-columns:140px 1fr;gap:12px;align-items:center;padding:14px 0;border-top:1px dashed var(--line)}
.row:first-of-type{border-top:0}
.label{color:var(--muted);font-size:14px}
.value{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

.chip{border:1px solid var(--line);padding:10px 12px;border-radius:999px;background:rgba(255,255,255,.02);color:var(--text);cursor:copy}
.chip.link{cursor:pointer;text-decoration:none}
.chip:hover{transform:translateY(-1px)}
.btn{border:0;border-radius:12px;padding:10px 14px;background:linear-gradient(90deg,var(--accent),var(--accent2));color:#0b0d12;font-weight:700;text-decoration:none;display:inline-block}
.btn:hover{filter:saturate(1.1);transform:translateY(-1px)}
.btn.outline{background:transparent;border:1px solid var(--line);color:var(--text)}

.note{margin:8px 2px 0;color:var(--muted);font-size:13px}

.aside{background:linear-gradient(180deg,rgba(255,255,255,.02),transparent);border:1px dashed var(--line);border-radius:18px;padding:18px}
.perks{list-style:none;margin:0;padding:0;display:grid;gap:10px;color:var(--muted)}
.perks li{padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.02);border:1px solid var(--line)}

.footer{padding:24px;display:grid;place-items:center;border-top:1px solid var(--line);color:var(--muted)}

/* ——— Light mode ——— */
.light{
  --bg:#f7f7fb; --text:#151821; --muted:#5b6174; --card:#ffffff; --line:rgba(10,12,18,.12);
}
.light .grain{opacity:.25}
.light .btn{color:white}