:root{
  --bg:#f5f7fb;
  --surface:#ffffff;
  --surface-2:#f8faff;
  --ink:#101525;
  --muted:#667085;
  --line:#e5e9f2;
  --accent:#635bff;
  --accent-2:#8b7cff;
  --green:#10a778;
  --amber:#e9a227;
  --red:#e96a6a;
  --shadow:0 18px 55px rgba(16,21,37,.08);
  --radius:22px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:radial-gradient(circle at 50% -10%,#eef0ff 0,#f5f7fb 34%,#f5f7fb 100%);color:var(--ink);font-family:"DM Sans",system-ui,sans-serif}
button,input,select{font:inherit}
button{cursor:pointer}
a{color:inherit}
.page-shell{max-width:1240px;margin:auto;padding:0 24px}
.topbar{height:78px;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:Manrope,sans-serif;font-weight:800;font-size:20px;letter-spacing:-.04em}
.brand>span:last-child span{color:var(--accent)}
.brand-mark{width:34px;height:34px;display:grid;place-items:center;border-radius:11px;background:#11162a;color:#fff;font-weight:800;box-shadow:0 6px 18px rgba(17,22,42,.16)}
.topbar-note{font-size:12px;color:var(--muted);display:flex;gap:8px;align-items:center}
.live-dot{width:7px;height:7px;background:#21b884;border-radius:50%;box-shadow:0 0 0 4px rgba(33,184,132,.1)}
.hero{text-align:center;padding:56px 10px 34px}
.eyebrow,.section-kicker{font-size:10px;line-height:1;font-weight:800;letter-spacing:.16em;color:var(--accent)}
.hero h1{font-family:Manrope,sans-serif;font-size:clamp(42px,6vw,74px);line-height:1.02;letter-spacing:-.065em;margin:16px auto 16px;max-width:850px}
.hero h1 em{font-style:normal;background:linear-gradient(100deg,#635bff,#9b8cff);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{max-width:680px;margin:auto;color:var(--muted);font-size:16px;line-height:1.65}
.ad-slot{border:1px dashed #cfd5e2;background:rgba(255,255,255,.45);color:#9aa2b1;display:flex;align-items:center;justify-content:center;font-size:9px;letter-spacing:.16em;min-height:72px}
.ad-top{max-width:970px;margin:18px auto 28px;border-radius:14px}
.calculator-grid{display:grid;grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);gap:20px;align-items:start}
.panel{background:rgba(255,255,255,.94);border:1px solid rgba(224,229,239,.9);border-radius:var(--radius);box-shadow:var(--shadow)}
.inputs-panel{padding:30px}
.results-panel{padding:30px}
.panel-heading,.result-head,.label-row,.toggle-row,.breakdown-title,.comparison-title{display:flex;align-items:center;justify-content:space-between;gap:20px}
.panel h2{font-family:Manrope,sans-serif;font-size:21px;letter-spacing:-.04em;margin:8px 0 0}
.reset-btn{border:0;background:transparent;color:var(--muted);font-size:12px;padding:8px 0}
.field{margin-top:22px}
.field label{display:block;font-size:12px;font-weight:700;margin-bottom:9px}
.field small{display:block;color:var(--muted);font-size:11px;line-height:1.5;margin-top:4px}
.money-input,.percent-input{height:52px;border:1px solid var(--line);border-radius:14px;display:flex;align-items:center;background:#fff;transition:.2s}
.money-input:focus-within,.percent-input:focus-within{border-color:#a9a4ff;box-shadow:0 0 0 4px rgba(99,91,255,.08)}
.money-input>span:first-child{padding-left:15px;color:var(--muted);font-weight:700}
.money-input input{border:0;outline:0;min-width:0;width:100%;height:100%;padding:0 9px;font-size:18px;font-weight:700;color:var(--ink);background:transparent}
.input-suffix{padding-right:14px;font-size:10px;font-weight:800;color:#9098a9}
select{width:100%;height:52px;border:1px solid var(--line);border-radius:14px;background:#fff;padding:0 13px;color:var(--ink);outline:0}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.range-wrap{margin-top:11px}
input[type=range]{width:100%;accent-color:var(--accent)}
.range-labels{display:flex;justify-content:space-between;color:#a0a7b4;font-size:9px;margin-top:2px}
.gateway-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.gateway{height:46px;border:1px solid var(--line);background:#fff;border-radius:12px;display:flex;align-items:center;gap:9px;padding:0 11px;text-align:left;color:#454d5e;font-size:12px;transition:.18s}
.gateway b{width:25px;height:25px;display:grid;place-items:center;border-radius:7px;background:#f0f2f7;font-size:10px}
.gateway.active{border-color:#aaa5ff;background:#f5f4ff;color:#443bd4;box-shadow:0 0 0 3px rgba(99,91,255,.06)}
.gateway.active b{background:var(--accent);color:#fff}
.gateway-meta{font-size:10px;color:var(--muted);margin-top:8px}
.toggle-row{border:1px solid var(--line);padding:13px 14px;border-radius:14px}
.toggle-row label:first-child{margin:0}
.switch input{display:none}
.switch span{display:block;width:43px;height:24px;background:#dfe3eb;border-radius:20px;position:relative;transition:.2s}
.switch span:after{content:"";position:absolute;width:18px;height:18px;left:3px;top:3px;background:white;border-radius:50%;box-shadow:0 1px 4px rgba(0,0,0,.2);transition:.2s}
.switch input:checked+span{background:var(--accent)}
.switch input:checked+span:after{transform:translateX(19px)}
.advanced{margin-top:20px;border-top:1px solid var(--line);padding-top:17px}
.advanced summary{cursor:pointer;font-size:12px;font-weight:700;color:#555e70}
.advanced-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px 12px}
.percent-input input{width:100%;border:0;outline:0;padding:0 12px;font-weight:700;background:transparent}
.percent-input span{padding-right:13px;color:var(--muted);font-size:12px}
.assumption-note{font-size:10px;color:#7a8393;line-height:1.55;background:#fafbfc;padding:10px;border-radius:10px}
.confidence{font-size:9px;letter-spacing:.13em;font-weight:800;background:#edf9f5;color:#168866;border-radius:99px;padding:7px 9px}
.result-head h2{font-family:Manrope,sans-serif;font-size:21px;letter-spacing:-.04em;margin:8px 0 4px}
.result-head p{font-size:11px;color:var(--muted);margin:0}
.net-card{margin-top:20px;padding:25px 24px;border-radius:18px;background:linear-gradient(135deg,#11162a,#1b2340);color:#fff;position:relative;overflow:hidden}
.net-card:after{content:"";position:absolute;width:210px;height:210px;border-radius:50%;right:-90px;top:-100px;background:rgba(139,124,255,.22);filter:blur(5px)}
.net-label{font-size:9px;letter-spacing:.14em;opacity:.62;font-weight:800}
.net-value{font-family:Manrope,sans-serif;font-size:clamp(35px,4.3vw,56px);letter-spacing:-.055em;margin-top:8px;position:relative;z-index:1}
.net-sub{font-size:11px;opacity:.68;margin-top:5px}
.metrics{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--line)}
.metric{padding:17px 7px;border-right:1px solid var(--line)}
.metric:last-child{border-right:0}
.metric span{display:block;color:var(--muted);font-size:10px}
.metric strong{display:block;font-size:15px;margin-top:5px}
.breakdown{padding:22px 0;border-bottom:1px solid var(--line)}
.breakdown-title{font-size:11px;font-weight:700}
.breakdown-title span:last-child{font-size:10px;color:var(--muted);font-weight:500}
.bar{height:13px;border-radius:99px;overflow:hidden;background:#edf0f5;display:flex;margin-top:13px}
.bar span{height:100%;min-width:2px}
.legend{display:grid;grid-template-columns:1fr 1fr;gap:8px 18px;margin-top:14px}
.legend-item{display:flex;align-items:center;justify-content:space-between;font-size:10px;color:var(--muted)}
.legend-left{display:flex;align-items:center;gap:7px}
.legend-dot{width:7px;height:7px;border-radius:50%}
.legend-item strong{color:var(--ink)}
.comparison{padding:22px 0}
.comparison-title h3{font-family:Manrope,sans-serif;font-size:16px;margin:7px 0 0;letter-spacing:-.03em}
.comparison-title>span{font-size:10px;color:var(--muted)}
.compare-row{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:12px;border-bottom:1px solid #f0f2f6;padding:13px 0}
.compare-row:last-child{border:0}
.compare-name{font-size:11px;font-weight:700;display:flex;align-items:center;gap:8px}
.compare-name i{font-style:normal;width:25px;height:25px;border-radius:7px;background:#f1f3f7;display:grid;place-items:center;font-size:9px}
.compare-net{font-size:12px;font-weight:800}
.save{font-size:9px;color:#168866;background:#ecf9f4;padding:5px 7px;border-radius:7px;font-weight:800;white-space:nowrap}
.ad-results{min-height:62px;border-radius:12px;margin:2px 0 17px}
.cta-card{background:#f5f4ff;border:1px solid #e6e3ff;border-radius:15px;padding:15px;display:flex;align-items:center;justify-content:space-between;gap:15px}
.cta-card strong{font-size:11px}
.cta-card p{font-size:10px;color:var(--muted);margin:4px 0 0}
.cta-card button{border:0;background:var(--accent);color:#fff;border-radius:10px;padding:10px 12px;font-size:10px;font-weight:800;white-space:nowrap}
.seo-strip{margin:22px 0 50px;border:1px solid var(--line);background:rgba(255,255,255,.72);border-radius:16px;padding:17px 20px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.seo-strip div{display:flex;gap:9px;align-items:center;font-size:12px}
.mini-icon{width:25px;height:25px;display:grid;place-items:center;background:#f0efff;color:var(--accent);border-radius:8px}
.seo-strip p{margin:0;color:var(--muted);font-size:10px}
footer{border-top:1px solid var(--line);padding:24px 0 40px;display:flex;justify-content:space-between;color:#8991a0;font-size:10px}
.footer-links{display:flex;gap:18px}
.footer-links a{text-decoration:none}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);opacity:0;background:#11162a;color:#fff;padding:11px 15px;border-radius:10px;font-size:11px;pointer-events:none;transition:.25s;box-shadow:0 12px 30px rgba(0,0,0,.18)}
.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:900px){
  .calculator-grid{grid-template-columns:1fr}
  .results-panel{order:-1}
}
@media(max-width:620px){
  .page-shell{padding:0 14px}
  .topbar{height:65px}
  .topbar-note{display:none}
  .hero{padding:42px 5px 25px}
  .hero h1{font-size:43px}
  .inputs-panel,.results-panel{padding:21px;border-radius:18px}
  .two-col,.advanced-grid{grid-template-columns:1fr}
  .gateway-grid{grid-template-columns:1fr 1fr}
  .metrics{grid-template-columns:1fr 1fr}
  .metric:nth-child(2){border-right:0}
  .metric:nth-child(3){grid-column:1/-1;border-top:1px solid var(--line);border-right:0}
  .legend{grid-template-columns:1fr}
  .seo-strip{display:block}
  .seo-strip p{margin-top:9px}
  footer{display:block}
  .footer-links{margin-top:12px}
}