:root{
  --ink:#16202e; --muted:#5a6b80; --line:#dde6ef; --bg:#f4f7fb; --card:#ffffff;
  --navy:#10243f; --navy2:#1b3a63; --gold:#e0a815; --gold-d:#b9870b;
  --red:#c8202c; --green:#1f8a52; --accent:#2563b6; --accent-d:#1c4d8f;
  --radius:14px; --shadow:0 8px 26px rgba(16,36,63,.10);
  --maxw:1120px; --gutter:22px;
}
*{box-sizing:border-box}
html,body{width:100%;overflow-x:hidden;margin:0}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  color:var(--ink); background:var(--bg); line-height:1.66; font-size:17px;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter)}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%}
h1,h2,h3,h4{line-height:1.22; color:var(--navy); margin:1.4em 0 .5em}
h1{font-size:2.05rem; font-weight:800; letter-spacing:-.01em}
h2{font-size:1.5rem; font-weight:700; margin-top:1.7em}
h3{font-size:1.18rem; font-weight:700}
p{margin:.7em 0}
.scroll-bar{position:fixed; top:0; left:0; height:3px; width:0;
  background:linear-gradient(90deg,var(--gold),var(--red)); z-index:120}

/* header */
.site-head{position:sticky; top:0; z-index:100; background:var(--navy);
  box-shadow:0 2px 14px rgba(0,0,0,.18)}
.head-row{display:flex; align-items:center; gap:18px; min-height:64px;
  flex-wrap:nowrap}
.brand-logo{display:inline-flex; align-items:center; gap:9px; font-weight:800;
  font-size:1.16rem; color:#fff; letter-spacing:.2px; white-space:nowrap}
.brand-logo:hover{text-decoration:none}
.brand-logo .dot{width:14px; height:14px; border-radius:50%;
  background:radial-gradient(circle at 32% 32%,#ffd34d,var(--gold-d));
  box-shadow:0 0 0 3px rgba(224,168,21,.25)}
.nav-main{display:flex; align-items:center; gap:2px; margin-left:auto;
  flex-wrap:nowrap}
.nav-main a{color:#d8e3f2; font-size:.93rem; font-weight:500; padding:9px 9px;
  border-radius:8px; white-space:nowrap}
.nav-main a:hover{background:rgba(255,255,255,.09); color:#fff; text-decoration:none}
.nav-main a.active{color:#fff; background:rgba(224,168,21,.18)}
.cta-head{margin-left:8px; background:linear-gradient(180deg,#ffc83a,var(--gold-d));
  color:#211800!important; font-weight:800!important; padding:9px 16px!important;
  border-radius:9px; white-space:nowrap}
.cta-head:hover{filter:brightness(1.06); background:linear-gradient(180deg,#ffce4f,var(--gold))!important}
.burger{display:none; margin-left:auto; background:transparent; border:0;
  width:44px; height:44px; cursor:pointer; flex-direction:column; justify-content:center;
  gap:5px; padding:9px}
.burger span{display:block; height:3px; border-radius:3px; background:#fff}

/* hero */
.hero{background:radial-gradient(120% 140% at 80% -10%,#1d4e8a 0,var(--navy) 60%);
  color:#eaf1fb; padding:38px 0 30px}
.hero h1{color:#fff; margin-top:.2em}
.hero p.lead{color:#c7d6ea; font-size:1.08rem; max-width:62ch}
.hero-grid{display:grid; grid-template-columns:1.25fr .95fr; gap:26px; align-items:center}
.hero figure{margin:0}
.hero img{border-radius:var(--radius); box-shadow:var(--shadow); display:block; width:100%; height:auto}

/* layout */
main{padding:8px 0 10px}
.crumbs{font-size:.85rem; color:var(--muted); padding:14px 0 2px}
.crumbs a{color:var(--accent)}
.crumbs span{color:var(--ink)}
.lead-snippet{font-size:1.06rem; background:#fff; border:1px solid var(--line);
  border-left:5px solid var(--gold); border-radius:12px; padding:16px 18px;
  box-shadow:var(--shadow)}
figure.hero-img{margin:18px 0}
figure.hero-img img{display:block; width:90%; height:auto; margin:0 auto;
  border-radius:10px; box-shadow:var(--shadow)}
figure figcaption{text-align:center; color:var(--muted); font-size:.86rem; margin-top:8px}

.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px 20px; box-shadow:var(--shadow); margin:18px 0}
.verdict{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.verdict ul{margin:.3em 0}
.pros li{list-style:none; padding-left:26px; position:relative}
.pros li::before{content:"✚"; position:absolute; left:0; color:var(--green); font-weight:800}
.cons li{list-style:none; padding-left:26px; position:relative}
.cons li::before{content:"–"; position:absolute; left:2px; color:var(--red); font-weight:800}

ul.ticks{list-style:none; padding-left:0}
ul.ticks li{padding-left:28px; position:relative; margin:.45em 0}
ul.ticks li::before{content:"◆"; position:absolute; left:4px; color:var(--gold-d); font-size:.8em; top:.3em}
ol.steps{counter-reset:st; list-style:none; padding-left:0}
ol.steps li{counter-increment:st; position:relative; padding:10px 10px 10px 50px; margin:.5em 0;
  background:#fff; border:1px solid var(--line); border-radius:10px}
ol.steps li::before{content:counter(st); position:absolute; left:12px; top:12px;
  width:26px; height:26px; background:var(--navy); color:#fff; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:.85rem}

.table-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch; margin:16px 0;
  border:1px solid var(--line); border-radius:12px}
table{border-collapse:collapse; width:100%; min-width:460px; background:#fff}
th,td{padding:11px 13px; text-align:left; border-bottom:1px solid var(--line); font-size:.95rem}
th{background:var(--navy); color:#fff; font-weight:600}
tbody tr:nth-child(even){background:#f7fafe}

.cta-block{background:var(--navy); background:linear-gradient(135deg,#1d4e8a,var(--navy));
  color:#eef4fc; border-radius:var(--radius); padding:24px 22px; margin:26px 0; text-align:center}
.cta-block h2{color:#fff; margin-top:0}
.cta-block p{color:#cddcef; max-width:60ch; margin:.4em auto 1em}
.btn{display:inline-block; background:linear-gradient(180deg,#ffc83a,var(--gold-d));
  color:#211800; font-weight:800; padding:14px 30px; border-radius:11px; font-size:1.04rem;
  box-shadow:0 6px 18px rgba(224,168,21,.35)}
.btn:hover{filter:brightness(1.06); text-decoration:none}

/* tabs */
.tabs{display:flex; flex-wrap:wrap; gap:6px; margin:14px 0 0; border-bottom:2px solid var(--line)}
.tabs button{background:#eef3f9; border:1px solid var(--line); border-bottom:0; cursor:pointer;
  padding:9px 15px; border-radius:9px 9px 0 0; font-weight:600; color:var(--muted); font-size:.93rem}
.tabs button.on{background:#fff; color:var(--navy); box-shadow:0 -2px 0 var(--gold) inset}
.tabp{display:none; background:#fff; border:1px solid var(--line); border-top:0;
  padding:16px 18px; border-radius:0 0 12px 12px}
.tabp.on{display:block}

/* calculator */
.calc{background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:18px 20px; box-shadow:var(--shadow); margin:18px 0}
.calc label{display:block; font-weight:600; margin:.6em 0 .2em; font-size:.95rem}
.calc input[type=range]{width:100%}
.calc .out{font-size:1.3rem; font-weight:800; color:var(--navy)}
.calc .row{display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap}
.calc .pill{background:#eef3f9; border-radius:10px; padding:10px 14px; flex:1; min-width:120px; text-align:center}
.calc .pill b{display:block; font-size:1.25rem; color:var(--navy)}

/* faq */
.faq details{background:#fff; border:1px solid var(--line); border-radius:11px;
  margin:10px 0; padding:2px 6px; box-shadow:0 3px 10px rgba(16,36,63,.05)}
.faq summary{cursor:pointer; font-weight:700; padding:13px 8px; list-style:none; color:var(--navy)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; float:right; color:var(--gold-d); font-weight:800; font-size:1.2em}
.faq details[open] summary::after{content:"–"}
.faq details > p{padding:0 8px 12px}

.note{background:rgba(224,168,21,.12); border:1px solid rgba(224,168,21,.4);
  color:#5b4708; border-radius:10px; padding:11px 14px; font-size:.92rem; margin:14px 0}

/* footer */
.site-foot{background:var(--navy); color:#b9c7da; margin-top:34px; padding:30px 0 18px; font-size:.92rem}
.foot-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
.site-foot h4{color:#fff; font-size:1rem; margin:0 0 10px}
.site-foot a{color:#cdd9ea; display:block; padding:3px 0}
.site-foot a:hover{color:#fff}
.rg{display:flex; align-items:center; gap:10px; margin:.4em 0}
.badge18{display:inline-flex; align-items:center; justify-content:center; min-width:38px; height:38px;
  border:2px solid var(--gold); color:var(--gold); border-radius:50%; font-weight:800}
.legal{border-top:1px solid rgba(255,255,255,.12); margin-top:22px; padding-top:14px;
  color:#8ea3bd; font-size:.84rem}

.totop{position:fixed; right:18px; bottom:18px; width:46px; height:46px; border-radius:50%;
  background:var(--navy); color:#fff; border:0; cursor:pointer; font-size:1.3rem; display:none;
  box-shadow:var(--shadow); z-index:90}
.totop.show{display:block}

@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr; gap:18px}
  .verdict{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  body{font-size:16px}
  h1{font-size:1.55rem} h2{font-size:1.25rem} h3{font-size:1.08rem}
  .burger{display:flex}
  .nav-main{display:none; position:absolute; left:0; right:0; top:64px; flex-direction:column;
    align-items:stretch; background:var(--navy2); padding:10px var(--gutter) 16px; gap:2px;
    box-shadow:0 16px 24px rgba(0,0,0,.3)}
  .nav-main.open{display:flex}
  .nav-main a{padding:12px 8px; border-radius:8px}
  .cta-head{margin:8px 0 0; text-align:center}
  .foot-grid{grid-template-columns:1fr}
  figure.hero-img img{width:100%}
}