:root {
  --ink:#1a1712;
  --body:#5c544a;
  --muted:#8a7f71;
  --line:#e9e2d6;
  --bg:#faf7f1;
  --card:#ffffff;
  --brand:#d4572a;
  --brand-dark:#b3441e;
  --brand-soft:#fdf0e8;
  --green:#2f8f5b;
  --green-soft:#eef7f1;
  --amber:#a9791d;
  --amber-soft:#fdf6e7;
  --red:#c0392b;
  --red-soft:#fdf0ee;
  --radius:16px;
  --radius-sm:10px;
  --shadow:0 1px 3px rgba(26,23,18,.05), 0 6px 20px rgba(26,23,18,.05);
  --shadow-lg:0 2px 6px rgba(26,23,18,.07), 0 16px 44px rgba(26,23,18,.10);
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body {
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  background:var(--bg); color:var(--body); margin:0; padding:0 0 64px;
  line-height:1.7; font-size:16px;
}
.wrap { max-width:960px; margin:0 auto; padding:0 22px; }
.nav {
  position:sticky; top:0; z-index:50;
  background:rgba(250,247,241,.9); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  padding:0 22px;
}
.nav-inner { max-width:960px; margin:0 auto; display:flex; align-items:center; gap:8px; height:60px; }
.brand {
  font-weight:800; font-size:17px; color:var(--ink); text-decoration:none;
  letter-spacing:-.01em; margin-right:auto; display:flex; align-items:center; gap:8px;
}
.brand-mark {
  width:30px; height:30px; border-radius:9px;
  background:linear-gradient(135deg,var(--brand),#e8874f);
  display:inline-flex; align-items:center; justify-content:center;
  color:#fff; font-size:14px; font-weight:800;
  box-shadow:0 2px 8px rgba(212,87,42,.35);
}
.brand .dot { color:var(--brand); }
.nav a.link { color:var(--body); text-decoration:none; font-size:14px; font-weight:600; padding:7px 10px; border-radius:8px; white-space:nowrap; }
.nav a.link:hover { color:var(--brand); background:var(--brand-soft); }
.nav a.cta-sm {
  font-size:13px; font-weight:700; color:#fff; background:var(--brand);
  padding:9px 16px; border-radius:10px; text-decoration:none; white-space:nowrap;
  box-shadow:0 2px 10px rgba(212,87,42,.3);
}
.nav a.cta-sm:hover { background:var(--brand-dark); }

.hero {
  background:
    radial-gradient(600px 300px at 85% -10%, rgba(212,87,42,.12), transparent 65%),
    radial-gradient(500px 260px at -10% 110%, rgba(212,87,42,.08), transparent 60%),
    linear-gradient(180deg,#fdf8f0 0%,var(--bg) 100%);
  border-bottom:1px solid var(--line);
  padding:64px 0 56px;
}
.hero .wrap { display:grid; grid-template-columns:1.08fr .92fr; gap:48px; align-items:center; }
.hero h1 { font-size:40px; line-height:1.14; letter-spacing:-.025em; color:var(--ink); margin:0 0 14px; }
.hero h1 em { font-style:normal; color:var(--brand); }
.hero p.sub { font-size:17px; color:var(--muted); margin:0 0 24px; max-width:46ch; }
.rate-chip {
  display:inline-flex; align-items:center; gap:8px;
  background:#fff; border:1px solid var(--line); border-radius:999px;
  padding:7px 14px; font-size:13px; font-weight:700; color:var(--ink);
  box-shadow:var(--shadow); margin-bottom:20px;
}
.rate-chip .pulse { width:8px; height:8px; border-radius:50%; background:var(--green); animation:pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.35} }
.hero-actions { display:flex; gap:12px; flex-wrap:wrap; }
.btn {
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 22px; border-radius:12px; font-size:15px; font-weight:700;
  text-decoration:none; border:0; cursor:pointer;
}
.btn-primary { background:var(--brand); color:#fff; box-shadow:0 4px 14px rgba(212,87,42,.32); }
.btn-primary:hover { background:var(--brand-dark); transform:translateY(-1px); }
.btn-ghost { background:#fff; color:var(--ink); border:1px solid var(--line); }
.btn-ghost:hover { border-color:var(--brand); color:var(--brand); }

.trust { display:flex; flex-wrap:wrap; gap:8px 20px; font-size:13px; color:var(--body); margin-top:26px; }
.trust span { display:inline-flex; align-items:center; gap:6px; font-weight:600; }
.check { color:var(--green); font-weight:800; }

.card {
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:28px; box-shadow:var(--shadow);
}
.card + .card { margin-top:18px; }
.card h2 { margin-top:0; }
.card-calc { box-shadow:var(--shadow-lg); border-top:3px solid var(--brand); }

.stat-bar {
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; margin:28px 0 0;
}
.stat { background:#fff; padding:22px 18px; text-align:center; }
.stat b { display:block; font-size:24px; color:var(--ink); letter-spacing:-.02em; line-height:1.2; }
.stat span { font-size:12px; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.06em; }
.stat .stat-acc { color:var(--brand); }

h1 { font-size:32px; margin:0 0 12px; line-height:1.2; letter-spacing:-.02em; color:var(--ink); }
h2 { font-size:22px; margin:36px 0 10px; letter-spacing:-.01em; color:var(--ink); }
h2:first-of-type { margin-top:0; }
h3 { font-size:17px; margin:22px 0 8px; color:var(--ink); }
p { margin:10px 0; }
a { color:var(--brand); }

.muted { color:var(--muted); font-size:13.5px; }
.warn {
  margin-top:18px; padding:12px 14px; border-radius:var(--radius-sm);
  background:var(--amber-soft); border:1px solid #f2e2bd;
  font-size:12.5px; color:var(--amber);
}
.ok {
  margin-top:18px; padding:12px 14px; border-radius:var(--radius-sm);
  background:var(--green-soft); border:1px solid #d3eadb;
  font-size:12.5px; color:var(--green);
}
.notice-head {
  font-weight:800; font-size:16px; color:var(--ink);
  border-bottom:2px solid var(--brand); padding-bottom:8px; margin-bottom:12px;
}

.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:8px; }
.step {
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:22px; box-shadow:var(--shadow);
}
.step .step-num {
  width:34px; height:34px; border-radius:10px; background:var(--brand-soft); color:var(--brand);
  font-weight:800; display:flex; align-items:center; justify-content:center; font-size:15px; margin-bottom:12px;
}
.step h3 { margin:0 0 6px; font-size:15px; }
.step p { margin:0; font-size:13.5px; color:var(--muted); }

.compare { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:8px; }
.compare-col { border-radius:var(--radius); padding:22px; }
.compare-old { background:#f7f3ec; border:1px solid var(--line); }
.compare-new { background:var(--brand-soft); border:1px solid #f3d9c8; }
.compare-col h3 { margin:0 0 12px; font-size:14px; text-transform:uppercase; letter-spacing:.05em; }
.compare-col ul { margin:0; padding-left:18px; font-size:14px; }
.compare-col li { margin:7px 0; }
.compare-new b { color:var(--brand); }

.icon-row { display:flex; gap:14px; align-items:flex-start; margin:14px 0; }
.icon-box {
  flex:0 0 40px; width:40px; height:40px; border-radius:12px;
  background:var(--brand-soft); color:var(--brand);
  display:flex; align-items:center; justify-content:center;
}
.icon-box svg { width:20px; height:20px; }
.icon-row h3 { margin:0 0 2px; font-size:15px; }
.icon-row p { margin:0; font-size:13.5px; color:var(--muted); }

table { border-collapse:separate; border-spacing:0; width:100%; font-size:14px; margin:14px 0; border:1px solid var(--line); border-radius:12px; overflow:hidden; }
th, td { border-bottom:1px solid var(--line); padding:11px 14px; text-align:left; }
th { background:#f7f3ec; color:var(--ink); font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:.05em; }
tr:last-child td { border-bottom:0; }
tbody tr:nth-child(even) { background:#fcfaf6; }
td b { color:var(--ink); }

.faq { border-left:3px solid var(--brand-soft); padding:2px 0 2px 18px; }
.faq p { margin:14px 0; }
.faq p strong { color:var(--ink); }

.sources { font-size:13.5px; }
.sources ul { padding-left:18px; }
.sources li { margin:6px 0; }
.sources a { word-break:break-all; }

.keybox {
  background:var(--brand-soft); border:1px solid #f3d9c8; border-radius:12px;
  padding:18px 20px; font-size:15px;
}
.keybox strong { color:var(--ink); }

.result { display:none; margin-top:22px; border-top:3px solid var(--green); }
.result.show { display:block; }
.fee { font-size:34px; font-weight:800; color:var(--brand); margin:6px 0; letter-spacing:-.02em; }
.row { font-size:14px; margin:6px 0; }
.row .muted { font-size:13px; }

label { display:block; font-size:13px; font-weight:700; margin:16px 0 7px; color:var(--ink); }
select, input {
  width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:var(--radius-sm);
  font-size:15px; color:var(--ink); background:#fff; font-family:inherit;
}
select:focus, input:focus { outline:2px solid var(--brand-soft); border-color:var(--brand); }
button {
  width:100%; margin-top:20px; padding:14px 20px;
  background:var(--brand); color:#fff; border:0; border-radius:12px;
  font-size:15px; font-weight:700; cursor:pointer; font-family:inherit;
  box-shadow:0 3px 12px rgba(212,87,42,.28);
}
button:hover { background:var(--brand-dark); }

@media (max-width:800px) {
  .hero .wrap { grid-template-columns:1fr; gap:28px; }
  .hero h1 { font-size:30px; }
  .stat-bar { grid-template-columns:repeat(2,1fr); }
  .steps { grid-template-columns:1fr; }
  .compare { grid-template-columns:1fr; }
  .nav a.link { font-size:13px; padding:6px 8px; }
}