:root{
  --bg:#ffffff; --surface:#f5f8f7; --surface-2:#eef3f1; --border:#e991e991;
  --border:#e2e9e6; --text:#12211c; --muted:#5c6b65;
  --accent:#0f7b5f; --accent-soft:#e6f4ef; --warn:#b4531a; --warn-soft:#fdf1e8;
  --radius:14px; --maxw:1060px;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#0e1512; --surface:#151f1b; --surface-2:#1b2723; --border:#25332c;
    --text:#e8f0ec; --muted:#98a8a1; --accent:#3fbf95; --accent-soft:#122b23;
    --warn:#e79a63; --warn-soft:#2a1d13;
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font:16px/1.65 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 20px}
a{color:var(--accent)}
h1,h2,h3{line-height:1.25; margin:0 0 .5em}
h1{font-size:clamp(1.9rem,4.4vw,3rem); letter-spacing:-.02em}
h2{font-size:clamp(1.35rem,2.6vw,1.8rem); letter-spacing:-.01em; margin-top:0}
p{margin:0 0 1em}
.muted{color:var(--muted)}

header{border-bottom:1px solid var(--border); background:var(--bg)}
.bar{display:flex; align-items:center; justify-content:space-between; padding:16px 0; gap:16px}
.brand{display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:-.01em; font-size:1.05rem}
.dot{width:11px;height:11px;border-radius:50%;background:var(--accent);flex:none}
nav a{margin-left:18px; color:var(--muted); text-decoration:none; font-size:.92rem}
nav a:hover{color:var(--text)}

.hero{padding:64px 0 44px; text-align:center}
.hero p.lead{font-size:clamp(1.2rem,2vw,1.5rem); color:var(--muted); line-height:1.55}
.tag{display:inline-block; background:var(--accent-soft); color:var(--accent);
  padding:5px 12px; border-radius:999px; font-size:.8rem; font-weight:600; margin-bottom:18px}

section{padding:44px 0; border-top:1px solid var(--border)}
.grid{display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:22px}
.card h3{font-size:1.02rem; margin-bottom:.4em}
.card p{margin:0; color:var(--muted); font-size:.95rem}
.num{display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px;
  border-radius:50%; background:var(--accent); color:#fff; font-size:.82rem; font-weight:700; margin-bottom:10px}

.demo{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden}
.demo-head{padding:16px 20px; border-bottom:1px solid var(--border); background:var(--surface-2)}
.demo-head strong{display:block; font-size:.98rem}
.offers{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.offer{padding:20px; border-right:1px solid var(--border)}
.offer:last-child{border-right:none}
.store{font-weight:700; font-size:.9rem; margin-bottom:2px}
.origin{font-size:.78rem; color:var(--muted); margin-bottom:14px}
.sticker{font-size:.85rem; color:var(--muted); text-decoration:line-through}
.rows{margin:12px 0; font-size:.88rem}
.row{display:flex; justify-content:space-between; gap:12px; padding:4px 0; color:var(--muted)}
.row.tax{color:var(--warn); font-weight:600}
.total{display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  border-top:1px solid var(--border); padding-top:12px; margin-top:8px}
.total .lbl{font-size:.85rem; color:var(--muted)}
.total .val{font-size:1.42rem; font-weight:700; letter-spacing:-.02em}
.win{color:var(--accent)}
.badge{display:inline-block; margin-top:10px; font-size:.78rem; font-weight:700;
  padding:4px 10px; border-radius:999px}
.badge.best{background:var(--accent-soft); color:var(--accent)}
.badge.no{background:var(--warn-soft); color:var(--warn)}
.demo-foot{padding:14px 20px; border-top:1px solid var(--border); background:var(--surface-2);
  font-size:.82rem; color:var(--muted)}

.notice{background:var(--accent-soft); border:1px solid var(--border);
  border-radius:var(--radius); padding:20px}
.notice h3{margin-bottom:.4em; font-size:1rem}
.notice p{margin:0; font-size:.94rem}

footer{border-top:1px solid var(--border); padding:32px 0 48px; color:var(--muted); font-size:.9rem}
footer a{color:var(--muted)}
.foot{display:flex; flex-wrap:wrap; gap:8px 20px; justify-content:space-between}

.legal{padding:44px 0; max-width:74ch}
.legal h2{margin-top:1.8em}
.legal ul{padding-left:1.2em}
.legal li{margin-bottom:.4em}