:root{
  --bg:#0d0d10;--panel:#17171c;--panel2:#1f1f26;--line:#2c2c35;
  --text:#f4f2f7;--muted:#a19fab;
  --purple:#8b5cf6;--pink:#ec4899;
  --grad:linear-gradient(120deg,#8b5cf6 0%,#c04ad6 50%,#ec4899 100%);
  --radius:18px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--text);font-family:"Open Sans",system-ui,sans-serif;line-height:1.55;min-height:100vh}
body::before{content:"";position:fixed;inset:-30% -30% auto auto;width:80vw;height:80vw;max-width:700px;max-height:700px;
  background:radial-gradient(circle,rgba(139,92,246,.22),transparent 65%);pointer-events:none;z-index:0}
main,header,footer{position:relative;z-index:1}
.wrap{max-width:560px;margin:0 auto;padding:0 20px}
h1,h2,h3,.display{font-family:"Bebas Neue",Impact,sans-serif;font-weight:400;letter-spacing:.02em;line-height:1}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
a{color:inherit}
.topbar{padding:18px 0;display:flex;justify-content:space-between;align-items:center}
.logo{font-family:"Bebas Neue",sans-serif;font-size:26px;text-decoration:none;letter-spacing:.04em}
.logo span{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.back{color:var(--muted);text-decoration:none;font-size:14px}
.hero{padding:36px 0 28px;text-align:center}
.hero h1{font-size:clamp(54px,15vw,84px)}
.hero p{color:var(--muted);margin-top:14px;font-size:17px}
.pill{display:inline-block;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  border:1px solid var(--line);border-radius:99px;padding:5px 12px;margin-bottom:18px}
.section-label{font-family:"Bebas Neue",sans-serif;font-size:22px;color:var(--muted);margin:30px 0 12px;letter-spacing:.06em}
.card{display:flex;align-items:center;gap:14px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 18px;text-decoration:none;margin-bottom:12px;transition:transform .15s,border-color .15s}
.card:hover{transform:translateY(-2px);border-color:var(--purple)}
.card .ico{flex:0 0 46px;height:46px;border-radius:13px;background:var(--grad);display:grid;place-items:center;font-size:22px}
.card .ico.ghost{background:var(--panel2);border:1px solid var(--line)}
.card h3{font-size:24px}
.card p{color:var(--muted);font-size:14px;line-height:1.35}
.card .arrow{margin-left:auto;color:var(--muted);font-size:20px}
.card.soon{opacity:.55;pointer-events:none}
.tag{font-family:"Open Sans";font-size:10px;letter-spacing:.1em;text-transform:uppercase;background:var(--panel2);
  border:1px solid var(--line);border-radius:99px;padding:2px 8px;vertical-align:middle;margin-left:6px;color:var(--muted)}
footer{padding:40px 0 50px;color:var(--muted);font-size:12px;text-align:center}
footer p+p{margin-top:8px}
.disclaimer{border-top:1px solid var(--line);padding-top:22px}
/* calculator */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:20px;margin-bottom:16px}
.panel h2{font-size:28px;margin-bottom:4px}
.panel .sub{color:var(--muted);font-size:14px;margin-bottom:16px}
.field{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.field:last-child{border-bottom:none}
.field label{font-size:15px}
.field label small{display:block;color:var(--muted);font-size:12px}
.money{display:flex;align-items:center;background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:0 12px;width:130px}
.money:focus-within{border-color:var(--purple)}
.money span{color:var(--muted)}
.money input{background:none;border:none;color:var(--text);font:600 17px "Open Sans";width:100%;padding:10px 0 10px 4px;outline:none;text-align:right}
.months{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.months button{background:var(--panel2);border:1px solid var(--line);color:var(--text);border-radius:12px;padding:12px 0;
  font:400 22px "Bebas Neue";cursor:pointer}
.months button small{display:block;font:400 11px "Open Sans";color:var(--muted)}
.months button.on{background:var(--grad);border-color:transparent}
.months button.on small{color:#fff}
.result{text-align:center;padding:26px 20px}
.result .big{font-size:clamp(56px,17vw,80px)}
.result .lbl{color:var(--muted);font-size:13px;letter-spacing:.1em;text-transform:uppercase}
.bar{height:14px;background:var(--panel2);border-radius:99px;overflow:hidden;margin:20px 0 8px}
.bar div{height:100%;background:var(--grad);width:0;transition:width .4s}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.stat{background:var(--panel2);border-radius:14px;padding:12px}
.stat b{display:block;font:400 28px "Bebas Neue"}
.stat span{color:var(--muted);font-size:12px}
.verdict{margin-top:16px;font-size:15px}
.tip{color:var(--muted);font-size:14px}
.tip b{color:var(--text)}