:root{
  --teal:#0F766E; --cyan:#0891B2; --grad:linear-gradient(90deg,#0F766E,#0891B2);
  --bg:#F8FAFC; --ink:#0F172A; --slate:#475569; --slate2:#64748B;
  --border:#E2E8F0; --card:#FFFFFF; --green:#10B981;
  --shadow:0 24px 60px -18px rgba(15,23,42,.22), 0 4px 16px rgba(15,23,42,.06);
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:Inter,system-ui,-apple-system,'Segoe UI',sans-serif;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:var(--teal);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.mono{font-family:var(--mono)}
/* ---------- HEADER ---------- */
header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--border)}
.hd{display:flex;align-items:center;justify-content:space-between;gap:16px;height:64px}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:21px;letter-spacing:-.02em;color:var(--ink)}
.logo:hover{text-decoration:none}
.logo-mark{width:34px;height:34px;border-radius:9px;background:var(--grad);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:19px;box-shadow:0 6px 14px -4px rgba(8,145,178,.5)}
nav.main{display:flex;gap:28px;font-size:14.5px;font-weight:600;color:var(--slate)}
nav.main a{color:var(--slate);padding:6px 0;border-bottom:2px solid transparent}
nav.main a:hover{color:var(--ink);text-decoration:none}
nav.main a.active{color:var(--ink);border-bottom:2px solid transparent;border-image:var(--grad) 1}
.btn{display:inline-block;border:none;cursor:pointer;font-family:inherit;font-weight:700;border-radius:10px;transition:transform .08s ease, box-shadow .15s ease}
.btn-grad{background:var(--grad);color:#fff;padding:10px 20px;font-size:14.5px;box-shadow:0 8px 18px -6px rgba(8,145,178,.55)}
.btn-grad:hover{transform:translateY(-1px)}
.btn-outline{background:#fff;color:var(--ink);border:1px solid var(--border);padding:9px 16px;font-size:13.5px}
.btn-outline:hover{border-color:var(--teal);color:var(--teal);text-decoration:none}
.hamb{display:none;background:none;border:1px solid var(--border);border-radius:9px;width:42px;height:42px;cursor:pointer;font-size:19px;color:var(--ink)}
.mobile-menu{display:none;border-top:1px solid var(--border);background:#fff;padding:12px 20px 16px}
.mobile-menu a{display:block;padding:9px 0;font-weight:600;color:var(--slate);border-bottom:1px solid var(--border)}
.mobile-menu a:last-child{border-bottom:none}
.mobile-menu.open{display:block}
/* ---------- HERO ---------- */
.hero{position:relative;overflow:hidden;padding:64px 0 56px;
  background-image:linear-gradient(#E2E8F0 1px,transparent 1px),linear-gradient(90deg,#E2E8F0 1px,transparent 1px);background-size:72px 72px}
.hero::after{content:"";position:absolute;inset:0;background:radial-gradient(700px 380px at 88% -60px, rgba(248,250,252,0) 0%, var(--bg) 78%);pointer-events:none}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(248,250,252,.35), var(--bg) 92%);pointer-events:none}
.hero .wrap{position:relative;z-index:1}

.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.02fr .98fr;gap:44px;align-items:start}
.eyebrow{font-family:var(--mono);font-size:11.5px;letter-spacing:.09em;color:var(--slate);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px rgba(16,185,129,.15);flex:none}
h1{font-size:56px;line-height:1.05;letter-spacing:-.028em;font-weight:800;margin:18px 0 18px}
.sub{font-size:17.5px;color:var(--slate);max-width:520px}
.pills{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0 0}
.pill{font-size:12.5px;font-weight:600;color:var(--slate);background:#fff;border:1px solid var(--border);border-radius:999px;padding:6px 13px}
.meta{margin-top:28px;padding-top:18px;border-top:1px solid var(--border);font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;color:var(--slate2);display:flex;gap:10px;flex-wrap:wrap}
.meta b{color:var(--ink);font-weight:700}
/* ---------- CALCULATOR CARD ---------- */
.calc{background:var(--card);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);padding:26px}
.calc h2{font-size:15px;font-weight:800;letter-spacing:-.01em;margin-bottom:4px}
.calc .calc-sub{font-size:13px;color:var(--slate2);margin-bottom:18px}
label.flabel{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--slate2);margin:14px 0 6px;font-weight:700}
label.flabel:first-of-type{margin-top:0}
input[type=number],select{width:100%;font-family:inherit;font-size:16px;color:var(--ink);background:#fff;border:1px solid var(--border);border-radius:10px;padding:11px 13px;outline:none}
input[type=number]:focus,select:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(8,145,178,.15)}
.two-col{display:grid;grid-template-columns:1.25fr 1fr;gap:12px}
.country-row{display:flex;gap:8px;align-items:center;margin-bottom:8px}
.country-row select{flex:1}
.rm-btn{flex:none;width:38px;height:44px;border:1px solid var(--border);background:#fff;border-radius:10px;cursor:pointer;color:var(--slate);font-size:15px}
.rm-btn:hover{color:#DC2626;border-color:#DC2626}
.add-btn{width:100%;background:#F0FDFA;border:1px dashed #99F6E4;color:var(--teal);font-weight:700;font-size:13.5px;padding:9px;border-radius:10px;cursor:pointer;font-family:inherit}
.add-btn:hover{background:#CCFBF1}
.add-btn:disabled{opacity:.45;cursor:not-allowed}
select:disabled{opacity:.45;background:#F1F5F9}
.sortbar{display:flex;align-items:center;gap:10px;margin:18px 0 4px}
.sortbar span{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--slate2);font-weight:700}
.sortbar select{width:auto;flex:1;font-size:14px;padding:8px 11px}
/* result cards */
.results{margin-top:14px;display:flex;flex-direction:column;gap:12px}
.rcard{border:1px solid var(--border);border-radius:13px;padding:16px 18px;background:#fff;position:relative}
.rcard.first{border-color:#5EEAD4;box-shadow:0 10px 24px -12px rgba(15,118,110,.35)}
.rcard-top{display:flex;align-items:center;gap:12px}
.rank{width:32px;height:32px;flex:none;border-radius:50%;background:#F1F5F9;color:var(--slate);font-family:var(--mono);font-weight:700;font-size:14px;display:flex;align-items:center;justify-content:center;border:1px solid var(--border)}
.rank.r1{background:var(--grad);color:#fff;border:none;box-shadow:0 6px 14px -4px rgba(8,145,178,.55)}
.rank.r2{background:#FEF3C7;color:#92400E;border-color:#FDE68A}
.rank.r3{background:#FFEDD5;color:#9A3412;border-color:#FED7AA}
.rcard .cname{font-weight:800;font-size:16.5px;letter-spacing:-.01em}
.rcard .csub{font-size:12px;color:var(--slate2);font-family:var(--mono)}
.net{margin-left:auto;text-align:right}
.net .net-big{font-size:24px;font-weight:800;letter-spacing:-.02em}
.net .net-lab{font-family:var(--mono);font-size:10.5px;letter-spacing:.07em;color:var(--slate2);text-transform:uppercase}
.rrows{margin-top:12px;border-top:1px solid var(--border)}
.rrow{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid #F1F5F9;font-size:14px}
.rrow:last-child{border-bottom:none}
.rrow span:first-child{color:var(--slate)}
.rrow span:last-child{font-weight:600;font-variant-numeric:tabular-nums}
.rrow.total span{color:var(--ink);font-weight:700}
.rrow .tiny{font-size:11px;color:var(--slate2);font-weight:400}
/* banners */
.banner{margin-top:12px;border-radius:11px;padding:13px 16px;font-size:14px;display:none}
.banner.show{display:block}
.banner.save{background:#F0FDF9;border:1px solid #A7F3D0;color:#065F46}
.banner.pp{background:#ECFEFF;border:1px solid #A5F3FC;color:#155E75}
.banner.score{background:#F0FDFA;border:1px solid #99F6E4;color:#134E4A}
.banner b{font-weight:800}
.banner .alt-list{list-style:none;margin-top:8px}
.banner .alt-list li{padding:5px 0;border-top:1px solid rgba(19,78,74,.14);font-variant-numeric:tabular-nums}
/* advanced panel */
.adv{margin-top:18px;border:1px solid var(--border);border-radius:13px;padding:16px 18px;background:#FDFEFE}
.adv h3{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--slate);margin-bottom:6px}
.adv p.adv-sub{font-size:12.5px;color:var(--slate2);margin-bottom:10px}
.tgl{display:flex;gap:11px;align-items:flex-start;padding:9px 0;border-bottom:1px solid #F1F5F9;cursor:pointer}
.tgl:last-child{border-bottom:none}
.tgl input{appearance:none;width:38px;height:22px;flex:none;border-radius:999px;background:#E2E8F0;position:relative;cursor:pointer;transition:background .15s;margin-top:2px}
.tgl input::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:left .15s;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.tgl input:checked{background:var(--grad)}
.tgl input:checked::after{left:19px}
.tgl .t-name{font-weight:700;font-size:14px}
.tgl .t-desc{font-size:12.5px;color:var(--slate2);line-height:1.45}
.share-row{display:flex;gap:10px;margin-top:16px}
.share-row .btn{flex:1}
.calc .smallprint{margin-top:14px;font-size:11.5px;color:var(--slate2);line-height:1.55}
/* ---------- SECTIONS ---------- */
section.block{padding:58px 0 8px}
.kick{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--teal);font-weight:700;margin-bottom:10px}
h2.sec{font-size:32px;letter-spacing:-.022em;font-weight:800;line-height:1.15}
.sec-sub{color:var(--slate);margin-top:10px;max-width:640px;font-size:16px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:28px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:28px}
.card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:22px;transition:box-shadow .15s, transform .15s}
.card:hover{box-shadow:0 14px 30px -14px rgba(15,23,42,.18);transform:translateY(-2px)}
.card .ic{width:42px;height:42px;border-radius:11px;background:#F0FDFA;border:1px solid #CCFBF1;display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.card h3{font-size:17px;font-weight:800;letter-spacing:-.01em;margin-bottom:6px}
.card p{font-size:14px;color:var(--slate);line-height:1.6}
.card .go{display:inline-block;margin-top:12px;font-weight:700;font-size:13.5px}
.stats{margin-top:34px;background:var(--ink);border-radius:16px;padding:30px 34px;display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.stat .n{font-family:var(--mono);font-size:34px;font-weight:700;color:#fff;letter-spacing:-.02em}
.stat .n em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat .l{font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:#94A3B8;margin-top:3px}
.ccard .rate{font-family:var(--mono);font-size:12px;color:var(--teal);font-weight:700;letter-spacing:.03em}
.feat{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:24px}
.feat h3{font-size:17px;font-weight:800;margin-bottom:8px}
.feat p{font-size:14.5px;color:var(--slate);line-height:1.65}
/* FAQ accordion */
.faq-list{margin-top:26px;border:1px solid var(--border);border-radius:14px;background:#fff;overflow:hidden}
.faq-item{border-bottom:1px solid var(--border)}
.faq-item:last-child{border-bottom:none}
.faq-q{width:100%;background:none;border:none;cursor:pointer;font-family:inherit;display:flex;justify-content:space-between;align-items:center;gap:14px;text-align:left;padding:19px 22px;font-size:15.5px;font-weight:700;color:var(--ink)}
.faq-q .pm{font-family:var(--mono);font-size:19px;color:var(--teal);flex:none;width:22px;text-align:center}
.faq-a{display:none;padding:0 22px 20px;font-size:14.5px;color:var(--slate);line-height:1.7;max-width:860px}
.faq-item.open .faq-a{display:block}
/* long Q&A */
.qa{margin-top:8px}
.qa-item{padding:20px 0;border-bottom:1px solid var(--border)}
.qa-item h3{font-size:16px;font-weight:800;margin-bottom:6px}
.qa-item p{font-size:14.5px;color:var(--slate);line-height:1.7;max-width:880px}
/* link hub */
.hub{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:28px}
.hub .card h3{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--slate2);margin-bottom:12px}
.hub ul{list-style:none}
.hub li{padding:6px 0;border-bottom:1px solid #F1F5F9;font-size:14.5px}
.hub li:last-child{border-bottom:none}
/* footer */
footer{margin-top:70px;border-top:1px solid var(--border);background:#fff}
.ft-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1fr;gap:26px;padding:46px 0 30px}
.ft-grid h4{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--slate2);margin-bottom:13px}
.ft-grid ul{list-style:none}
.ft-grid li{margin-bottom:8px;font-size:14px}
.ft-grid li a{color:var(--slate)}
.ft-grid li a:hover{color:var(--teal)}
.ft-brand p{font-size:13.5px;color:var(--slate);margin-top:10px;max-width:280px}
.plinks{display:flex;flex-wrap:wrap;gap:7px 20px;padding:18px 0 2px;border-top:1px solid var(--border)}
.plinks a{font-size:13px;color:var(--slate)}
.plinks a:hover{color:var(--teal)}
.badges{display:flex;flex-wrap:wrap;gap:8px;padding:18px 0;border-top:1px solid var(--border)}
.advline{font-size:14px;padding:4px 0 18px;color:var(--slate)}
.disc{font-size:12px;color:var(--slate2);line-height:1.65;padding:16px 0 8px;border-top:1px solid var(--border)}
.copy{font-size:12.5px;color:var(--slate2);padding:6px 0 26px}
/* responsive */
@media(max-width:960px){
  .hero-grid{grid-template-columns:1fr;gap:30px}
  h1{font-size:42px}
  .grid4{grid-template-columns:repeat(2,1fr)}
  .grid3,.hub{grid-template-columns:1fr 1fr}
  .stats{grid-template-columns:repeat(2,1fr)}
  .ft-grid{grid-template-columns:1fr 1fr}
  nav.main{display:none}
  .hamb{display:block}
  .hd .btn-grad{display:none}
}
@media(max-width:560px){
  .grid4,.grid3,.hub{grid-template-columns:1fr}
  .two-col{grid-template-columns:1fr}
  h1{font-size:35px}
  .hero{padding:42px 0 40px}
  .calc{padding:20px}
  .net .net-big{font-size:20px}
}