:root { color-scheme: light dark; --bg:#e7f1ef; --card:#fffdf9; --ink:#123f3c; --muted:#647875; --accent:#176b67; --line:rgba(18,63,60,.1); }
@media (prefers-color-scheme:dark) { :root { --bg:#101817; --card:#192422; --ink:#edf7f5; --muted:#9aadaa; --accent:#67c7bf; --line:rgba(255,255,255,.1); } }
* { box-sizing:border-box; }
body { margin:0; padding:48px 20px; background:var(--bg); color:var(--ink); font:16px/1.62 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
main { max-width:720px; margin:auto; }
header { text-align:center; margin-bottom:38px; }
h1 { margin:14px 0 2px; letter-spacing:-.025em; }
header p, footer { color:var(--muted); }
section { margin:0 0 20px; padding:28px 30px; border:1px solid var(--line); border-radius:18px; background:var(--card); box-shadow:0 8px 28px rgba(18,63,60,.06); }
h2 { margin:0 0 12px; font-size:1.3rem; } h3 { margin:22px 0 6px; font-size:1rem; } p { margin:0 0 12px; } p:last-child { margin-bottom:0; }
.lead { color:var(--accent); font-weight:700; font-size:1.06rem; } a { color:var(--accent); } ul { padding-left:22px; } li { margin-bottom:8px; }
footer { text-align:center; font-size:.86rem; margin:30px 0 10px; }
.icon { position:relative; width:82px; height:82px; margin:auto; border-radius:19px; background:linear-gradient(145deg,#3b9690,#0f6661); box-shadow:0 8px 24px rgba(15,102,97,.24); }
.icon span { position:absolute; left:25px; top:14px; width:38px; height:55px; background:#fffdf7; clip-path:polygon(0 0,72% 0,100% 21%,100% 100%,0 100%); }
.icon i,.icon b { position:absolute; left:36px; width:28px; height:3px; border-radius:2px; background:#176b67; }
.icon i { top:37px; } .icon b { top:49px; }
@media (max-width:520px) { body { padding:28px 14px; } section { padding:22px 20px; } }