@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--bg: #0d1117; --bg2: #161b22; --bg3: #1c2333;
--border: #30363d; --text: #e6edf3; --muted: #8b949e;
--accent: #6366f1; --accent2: #8b5cf6;
--red: #f85149; --orange: #fb8500; --yellow: #e3b341; --green: #3fb950;
}
#bos-calc { font-family: 'Inter', sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; scroll-behavior: smooth; }
/* ── HEADER ── */
.hdr {
text-align: center; padding: 52px 20px 40px;
background: linear-gradient(180deg,#0d1117,#161b22);
border-bottom: 1px solid var(--border); position: relative; overflow: hidden;
}
.hdr::before {
content:''; position:absolute; top:-80px; left:50%; transform:translateX(-50%);
width:700px; height:320px;
background:radial-gradient(ellipse,rgba(99,102,241,.13) 0%,transparent 70%);
}
.hdr-logo { font-size:11px; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:var(--accent); margin-bottom:18px; }
.hdr h1 { font-size:clamp(24px,5vw,50px); font-weight:900; line-height:1.1; letter-spacing:-1px; margin-bottom:14px; }
.hdr h1 em { color:var(--accent); font-style:normal; }
.hdr p { font-size:16px; color:var(--muted); max-width:500px; margin:0 auto 26px; }
.hdr-badges { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.hb { background:var(--bg3); border:1px solid var(--border); border-radius:20px; padding:5px 14px; font-size:12px; color:var(--muted); }
.hb b { color:var(--green); }
/* ── WRAP ── */
.wrap { max-width:640px; margin:0 auto; padding:36px 20px 80px; }
/* ── PROGRESS ── */
.prog-wrap { margin-bottom:32px; }
.prog-bar-bg { height:4px; background:var(--border); border-radius:4px; overflow:hidden; margin-bottom:10px; }
.prog-bar-fill { height:100%; background:linear-gradient(90deg,var(--accent),var(--accent2)); border-radius:4px; transition:width .5s cubic-bezier(.4,0,.2,1); width:0%; }
.prog-meta { display:flex; justify-content:space-between; align-items:center; }
.prog-step { font-size:12px; color:var(--muted); }
.prog-step b { color:var(--text); }
.prog-pct { font-size:12px; font-weight:700; color:var(--accent); }
/* ── SCREEN ── */
.screen { display:none; animation:fadeUp .3s ease; }
.screen.on { display:block; }
@keyframes fadeUp { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
.q-tag { font-size:11px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--accent); margin-bottom:10px; }
.q-title { font-size:clamp(20px,4vw,28px); font-weight:900; margin-bottom:6px; line-height:1.2; }
.q-sub { font-size:14px; color:var(--muted); margin-bottom:28px; }
/* ── CARDS ── */
.cg { display:grid; gap:10px; }
.cg.cols2 { grid-template-columns:1fr 1fr; }
.cg.cols3 { grid-template-columns:1fr 1fr 1fr; }
@media(max-width:480px){ .cg.cols3 { grid-template-columns:1fr 1fr; } }
.cc {
background:var(--bg2); border:2px solid var(--border); border-radius:14px;
padding:18px 14px; text-align:center; cursor:pointer;
transition:all .18s; user-select:none;
}
.cc:hover { border-color:var(--accent); background:rgba(99,102,241,.07); transform:translateY(-2px); }
.cc.sel {
border-color:var(--accent); background:rgba(99,102,241,.15);
box-shadow:0 0 20px rgba(99,102,241,.25); transform:translateY(-2px);
}
.cc-ico { font-size:28px; margin-bottom:8px; }
.cc-lbl { font-size:13px; font-weight:700; line-height:1.3; }
.cc-sub { font-size:11px; color:var(--muted); margin-top:4px; line-height:1.3; }
/* ── BENCHMARK ── */
.bench {
background:var(--bg2); border:1px solid var(--border); border-radius:20px;
padding:40px 36px; text-align:center; position:relative; overflow:hidden;
}
.bench::before {
content:''; position:absolute; top:-60px; left:50%; transform:translateX(-50%);
width:400px; height:250px;
background:radial-gradient(ellipse,rgba(248,81,73,.1) 0%,transparent 70%);
}
.bench-tag { font-size:11px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--red); margin-bottom:12px; }
.bench-title { font-size:clamp(18px,3.5vw,24px); font-weight:900; margin-bottom:8px; line-height:1.3; }
.bench-range { font-size:clamp(36px,7vw,58px); font-weight:900; color:var(--red); letter-spacing:-2px; line-height:1; margin:16px 0 6px; }
.bench-per { font-size:15px; color:var(--muted); margin-bottom:24px; }
.bench-src { font-size:12px; color:var(--muted); margin-bottom:32px; opacity:.7; }
/* ── EMAIL GATE ── */
.egate-title { font-size:18px; font-weight:800; margin-bottom:8px; }
.egate-title em { color:var(--accent); font-style:normal; }
.egate-sub { font-size:14px; color:var(--muted); margin-bottom:20px; }
.egate-fields { display:flex; flex-direction:column; gap:10px; max-width:400px; margin:0 auto 12px; }
.egate-fields input {
width:100%; background:var(--bg3); border:1px solid var(--border); border-radius:12px;
padding:14px 18px; color:var(--text); font-family:'Inter',sans-serif;
font-size:15px; font-weight:500; outline:none; transition:border-color .2s,box-shadow .2s;
}
.egate-fields input::placeholder { color:var(--muted); }
.egate-fields input:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(99,102,241,.2); }
.egate-fields input.err { border-color:var(--red); animation:shake .3s; }
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-6px)} 75%{transform:translateX(6px)} }
.egate-btn {
width:100%; max-width:400px; margin:0 auto; display:block;
padding:16px; background:linear-gradient(135deg,var(--accent),var(--accent2));
color:white; border:none; border-radius:12px;
font-family:'Inter',sans-serif; font-size:16px; font-weight:800;
cursor:pointer; box-shadow:0 6px 24px rgba(99,102,241,.4); transition:all .2s;
}
.egate-btn:hover { transform:translateY(-2px); box-shadow:0 10px 30px rgba(99,102,241,.5); }
.egate-privacy { font-size:12px; color:var(--muted); margin-top:10px; }
.egate-privacy b { color:var(--green); }
/* ── RESULTS ── */
#results { display:none; animation:fadeUp .5s ease; }
.r-hero {
text-align:center; padding:44px 32px 32px;
background:linear-gradient(135deg,rgba(248,81,73,.1),rgba(251,133,0,.06));
border:1px solid rgba(248,81,73,.25); border-radius:20px; margin-bottom:20px;
position:relative; overflow:hidden;
}
.r-hero::before {
content:''; position:absolute; top:-60px; left:50%; transform:translateX(-50%);
width:300px; height:200px;
background:radial-gradient(ellipse,rgba(248,81,73,.12) 0%,transparent 70%);
}
.r-tag { font-size:11px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--red); margin-bottom:10px; }
.r-name { font-size:15px; color:var(--muted); margin-bottom:6px; }
.r-name b { color:var(--text); }
.r-amount { font-size:clamp(42px,8vw,70px); font-weight:900; color:var(--red); letter-spacing:-2px; line-height:1; margin-bottom:6px; }
.r-per { font-size:15px; color:var(--muted); margin-bottom:18px; }
.r-year { display:inline-block; background:rgba(248,81,73,.12); border:1px solid rgba(248,81,73,.3); border-radius:30px; padding:7px 20px; font-size:14px; font-weight:700; color:var(--red); }
.rcard { background:var(--bg2); border:1px solid var(--border); border-radius:16px; padding:26px; margin-bottom:16px; }
.rcard h3 { font-size:15px; font-weight:800; margin-bottom:18px; }
.bi { margin-bottom:16px; }
.bi:last-child { margin-bottom:0; }
.birow { display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
.biname { font-size:13px; font-weight:600; display:flex; align-items:center; gap:8px; }
.bidot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.bival { font-size:13px; font-weight:700; }
.barbg { height:7px; background:var(--bg3); border-radius:7px; overflow:hidden; }
.barfill { height:100%; border-radius:7px; transition:width 1.2s cubic-bezier(.4,0,.2,1); width:0%; }
.rec-list { display:flex; flex-direction:column; gap:12px; }
.rec { display:flex; gap:14px; align-items:flex-start; background:var(--bg3); border:1px solid var(--border); border-radius:12px; padding:16px; }
.rec-num { width:28px; height:28px; border-radius:50%; background:var(--accent); color:white; font-size:12px; font-weight:800; display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:1px; }
.rec-body { flex:1; }
.rec-title { font-size:14px; font-weight:700; margin-bottom:3px; }
.rec-desc { font-size:13px; color:var(--muted); line-height:1.5; }
.rec-tag { display:inline-block; background:rgba(99,102,241,.15); border:1px solid rgba(99,102,241,.3); border-radius:6px; padding:2px 8px; font-size:11px; font-weight:700; color:var(--accent); margin-top:6px; }
.igrid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:16px; }
@media(max-width:480px){ .igrid { grid-template-columns:1fr; } }
.ic { background:var(--bg2); border:1px solid var(--border); border-radius:13px; padding:18px; }
.ic-lbl { font-size:10px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--muted); margin-bottom:6px; }
.ic-val { font-size:22px; font-weight:900; margin-bottom:3px; }
.ic-desc { font-size:12px; color:var(--muted); line-height:1.4; }
.aiblock { background:linear-gradient(135deg,rgba(99,102,241,.1),rgba(139,92,246,.06)); border:1px solid rgba(99,102,241,.25); border-radius:16px; padding:26px; margin-bottom:16px; }
.aiblock h3 { font-size:15px; font-weight:800; margin-bottom:4px; }
.aisub { font-size:13px; color:var(--muted); margin-bottom:20px; }
.aiscore { display:flex; align-items:center; gap:18px; margin-bottom:18px; }
.aicirc { width:80px; height:80px; border-radius:50%; background:conic-gradient(var(--accent) 0deg,var(--bg3) 0deg); display:flex; align-items:center; justify-content:center; position:relative; flex-shrink:0; transition:background 1s ease; }
.aicirc::after { content:''; position:absolute; width:60px; height:60px; border-radius:50%; background:var(--bg2); }
.aipct { position:relative; z-index:1; font-size:17px; font-weight:900; color:var(--accent); }
.aitxt { font-size:13px; color:var(--muted); line-height:1.6; }
.aitxt b { color:var(--accent); font-size:14px; }
.aisave { background:var(--bg3); border-radius:11px; padding:14px 18px; display:flex; justify-content:space-between; align-items:center; }
.aisave span { font-size:13px; color:var(--muted); }
.aisave strong { font-size:19px; font-weight:800; color:var(--green); }
.ctablock { background:linear-gradient(135deg,var(--bg3),rgba(99,102,241,.08)); border:1px solid var(--border); border-radius:20px; padding:34px; text-align:center; position:relative; overflow:hidden; }
.ctablock::before { content:''; position:absolute; bottom:-40px; right:-40px; width:200px; height:200px; background:radial-gradient(circle,rgba(99,102,241,.12),transparent 70%); }
.ctablock h3 { font-size:20px; font-weight:900; margin-bottom:8px; }
.ctablock p { font-size:14px; color:var(--muted); max-width:420px; margin:0 auto 22px; line-height:1.6; }
.ctabtn { display:inline-block; background:linear-gradient(135deg,var(--accent),var(--accent2)); color:white; padding:15px 34px; border-radius:13px; font-size:16px; font-weight:800; cursor:pointer; border:none; font-family:'Inter',sans-serif; box-shadow:0 6px 24px rgba(99,102,241,.4); transition:all .2s; }
.ctabtn:hover { transform:translateY(-2px); box-shadow:0 12px 32px rgba(99,102,241,.5); }
.ctanote { font-size:12px; color:var(--muted); margin-top:10px; }
.ctanote b { color:var(--green); }
.guar { display:flex; align-items:center; gap:12px; background:rgba(63,185,80,.08); border:1px solid rgba(63,185,80,.2); border-radius:11px; padding:14px 18px; margin-top:14px; text-align:left; }
.guar-ico { font-size:22px; flex-shrink:0; }
.guar p { font-size:12px; color:var(--muted); line-height:1.5; }
.guar p b { color:var(--green); }
.ftr { text-align:center; padding:36px 20px; border-top:1px solid var(--border); color:var(--muted); font-size:12px; line-height:1.8; }
/* ── SPINNER ── */
@keyframes spin { to { transform:rotate(360deg) } }
