*{box-sizing:border-box}
html,body{margin:0}
body{font-family:"Trebuchet MS",Verdana,sans-serif;color:#0f2a3d;line-height:1.6;background:linear-gradient(180deg,#8fd0ff 0,#dff1ff 520px,#eaf6ea 520px,#f4faf2 100%)}
a{color:#115a99}
.btn{display:inline-block;font-family:"Comic",sans-serif;font-size:17px;letter-spacing:1px;text-decoration:none;color:#0f2a3d;background:#ffd93b;border:3px solid #0f2a3d;border-radius:12px;padding:8px 18px;box-shadow:0 4px 0 #0f2a3d;transition:transform .08s,box-shadow .08s}
.btn:hover{background:#ffe466}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 #0f2a3d}
.btn.ghost{background:#fff}
.btn.big{font-size:22px;padding:12px 28px}
main{max-width:1080px;margin:0 auto;padding:0 20px 40px}
.hero{display:grid;grid-template-columns:1.05fr 1fr;gap:34px;align-items:center;padding:44px 0 30px}
.hero h1{margin:6px 0 14px;font-family:"Comic",sans-serif;font-weight:normal;font-size:40px;line-height:1.15;color:#0f2a3d}
.lead{font-size:19px;margin:0 0 22px}
.badge{display:inline-block;margin:0;background:#f5a300;color:#0f2a3d;font-weight:700;border-radius:999px;padding:3px 14px;font-size:13px;border:2px solid #0f2a3d}
.cta{display:flex;gap:14px;flex-wrap:wrap;margin:0 0 16px}
.note{margin:0 0 14px;padding:8px 12px;background:#fff3cf;border-left:5px solid #f5a300;border-radius:6px;font-weight:700;font-size:14px}
.tags{display:flex;gap:8px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.tags li{background:#0f2a3d;color:#ffd93b;border-radius:999px;padding:3px 14px;font-size:13px;font-weight:700}
.hero-art{margin:0}
.hero-art img,.features img{display:block;width:100%;height:auto;border-radius:16px;border:4px solid #0f2a3d;box-shadow:0 14px 0 #0f2a3d33,0 24px 50px #0f2a3d55}
.band{margin:30px 0;padding:26px 28px;background:#fff;border:3px solid #0f2a3d;border-radius:18px;box-shadow:0 8px 0 #0f2a3d22}
.band h2,.text h2{font-family:"Comic",sans-serif;font-weight:normal;font-size:28px;margin:0 0 14px;color:#0f2a3d}
.features{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:center}
.features figure{margin:0}
.features ol,.steps ol{margin:0;padding:0;list-style:none;counter-reset:n;display:grid;gap:14px}
.features li,.steps li{counter-increment:n;position:relative;padding-left:52px}
.features li::before,.steps li::before{content:counter(n);position:absolute;left:0;top:0;width:38px;height:38px;border-radius:50%;background:#ffd93b;border:3px solid #0f2a3d;font-family:"Comic",sans-serif;font-size:20px;display:flex;align-items:center;justify-content:center}
.features h3,.steps h3{margin:0 0 2px;font-size:19px}
.features p,.steps p{margin:0}
.steps ol{grid-template-columns:repeat(3,1fr)}
.steps .cta{margin:22px 0 0;justify-content:center}
.text{margin:0;padding:10px 0}
.text .intro{font-size:18px}
.text article{margin:22px 0}
.text p{margin:0 0 10px;max-width:78ch}
.faq details{background:#fff;border:2px solid #b8d4e8;border-radius:12px;margin:0 0 10px;padding:0}
.faq summary{cursor:pointer;padding:12px 16px;font-weight:700}
.faq details[open]{border-color:#1f8bd6}
.faq details p{padding:0 16px 14px;margin:0}
.more{text-align:center}
.more .cta{justify-content:center;margin:0}
.crumbs{font-size:14px;margin:26px 0 0;color:#46708f}
.guide h1{font-family:"Comic",sans-serif;font-weight:normal;font-size:38px;line-height:1.15;margin:8px 0 14px}
.guide ul{padding-left:22px}
.guide .cta{margin-top:24px}
@media (max-width:820px){.hero,.features{grid-template-columns:1fr}.steps ol{grid-template-columns:1fr}.hero h1{font-size:32px}}