:root{
  --blue-900:#1d4ed8; --blue-800:#2563eb; --blue-600:#3b82f6; --blue-400:#60a5fa; --blue-100:#dbeafe;
  --green-700:#3f7d1f; --green-600:#5ba829; --green-500:#7cc93a; --green-100:#eaf6da;
  --sun:#ffc83d; --sun-soft:#fff3cf; --sky:#7fd4ff; --sky-soft:#dcf3ff; --coral:#ff8a5c;
  --ink:#2a3342; --muted:#6b7686; --line:rgba(37,99,235,.12);
  --bg:#fffdf7; --card:#ffffff;
  --radius:22px; --maxw:1080px;
  --shadow:0 2px 6px rgba(255,170,60,.10),0 14px 36px rgba(37,99,235,.08);
  --head:'Fredoka',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Nunito',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--ink);background:var(--bg);line-height:1.7;-webkit-font-smoothing:antialiased}
h1,h2,h3,.brand,.foot-brand{font-family:var(--head)}
a{color:var(--blue-600);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
code{background:var(--blue-100);color:var(--blue-800);padding:2px 8px;border-radius:6px;font-size:.92em;font-weight:600}

header.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.82);backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--line)}
.nav-inner{max-width:var(--maxw);margin:0 auto;padding:14px 24px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;align-items:center;gap:11px;font-weight:600;font-size:16px;color:var(--ink)}
.brand:hover{text-decoration:none}
.brand .logo{width:34px;height:34px;border-radius:9px;flex:none}
.nav-links{display:flex;gap:28px;align-items:center}
.nav-links a{color:var(--muted);font-size:14.5px;font-weight:500}
.nav-links a:hover{color:var(--ink);text-decoration:none}
.nav-cta{background:linear-gradient(135deg,#ff9d5c,#ff7a45);color:#fff;padding:9px 20px;border-radius:999px;font-size:14px;font-weight:700;box-shadow:0 4px 12px rgba(255,138,92,.36)}
.nav-cta:hover{transform:translateY(-1px);text-decoration:none}
.menu-btn{display:none;background:none;border:0;cursor:pointer;color:var(--ink)}

.page-hero{background:linear-gradient(165deg,#fff7df 0%,#ffeec4 30%,#dcf3ff 70%,#e6f8d6 100%);border-bottom:3px solid var(--sun);padding:56px 0 48px}
.page-hero .tag{color:var(--coral);font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.09em;display:block;margin-bottom:12px}
.page-hero h1{font-size:clamp(30px,4.5vw,44px);line-height:1.1;font-weight:700;letter-spacing:-.02em;margin-bottom:16px;max-width:22ch}
.page-hero .lede{font-size:18px;color:var(--muted);max-width:58ch}
.breadcrumbs{font-size:13.5px;color:var(--muted);margin-bottom:20px}
.breadcrumbs a{color:var(--muted)}
.breadcrumbs a:hover{color:var(--ink)}

.content{padding:56px 0 72px}
.article{max-width:720px}
.article h2{font-size:clamp(22px,3vw,28px);font-weight:700;margin:40px 0 14px;letter-spacing:-.01em}
.article h2:first-child{margin-top:0}
.article h3{font-size:19px;font-weight:700;margin:28px 0 10px}
.article p,.article li{font-size:17px;color:#33424d;margin-bottom:14px}
.article ul,.article ol{margin:0 0 18px 1.25em}
.article li{margin-bottom:8px}
.article strong{color:var(--ink);font-weight:600}
.steps{counter-reset:step;list-style:none;margin:24px 0;padding:0}
.steps li{counter-increment:step;position:relative;padding:0 0 28px 52px;border-left:3px solid var(--sun-soft);margin-left:12px}
.steps li:last-child{border-left-color:transparent;padding-bottom:0}
.steps li::before{content:counter(step);position:absolute;left:-22px;top:0;width:40px;height:40px;border-radius:50%;background:var(--sun);color:#7a5200;font-family:var(--head);font-weight:700;font-size:16px;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 10px rgba(255,200,61,.35)}
.callout{background:linear-gradient(160deg,#fff8e8,#fff1d4 55%,#e9f8da);border:2px solid var(--sun-soft);border-radius:var(--radius);padding:24px 28px;margin:28px 0}
.callout p:last-child{margin-bottom:0}
.related{background:var(--card);border:2px solid var(--sun-soft);border-radius:var(--radius);padding:28px 32px;margin-top:48px;box-shadow:var(--shadow)}
.related h2{font-size:20px;margin:0 0 14px}
.related ul{list-style:none;margin:0;padding:0}
.related li{margin-bottom:8px}
.related a{font-weight:600}

.faq-list{display:flex;flex-direction:column;gap:16px;margin-top:8px}
.faq-item{background:var(--card);border:2px solid var(--sun-soft);border-radius:var(--radius);padding:22px 26px;box-shadow:0 2px 8px rgba(255,170,60,.06)}
.faq-item h2{font-size:18px;margin:0 0 10px}
.faq-item p{font-size:16px;margin:0;color:var(--muted)}

.btn{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:15px;padding:14px 26px;border-radius:999px;border:0;cursor:pointer;transition:transform .14s ease,box-shadow .14s ease;margin-top:8px}
.btn:hover{text-decoration:none;transform:translateY(-2px)}
.btn-primary{background:linear-gradient(135deg,#ff9d5c,#ff7a45);color:#fff;box-shadow:0 8px 20px rgba(255,138,92,.42)}

footer{background:linear-gradient(160deg,#5ba829,#3f7d1f);color:#eaf6da;padding:52px 0 30px;margin-top:0}
.foot-grid{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;margin-bottom:34px}
.foot-brand{display:flex;align-items:center;gap:11px;color:#fff;font-weight:700;font-size:16px;margin-bottom:12px}
.foot-brand .logo{width:32px;height:32px;border-radius:9px}
.foot-col h4{color:#fff;font-size:13px;text-transform:uppercase;letter-spacing:.07em;margin-bottom:14px;font-weight:700}
.foot-col a{display:block;color:#d6edbf;font-size:14px;margin-bottom:9px}
.foot-col a:hover{color:#fff;text-decoration:none}
.foot-bottom{border-top:1px solid rgba(255,255,255,.22);padding-top:22px;font-size:13px;color:#d6edbf;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}
.foot-bottom a{color:#d6edbf}
.foot-bottom a:hover{color:#fff}
.foot-about{max-width:300px;font-size:13.5px;color:#e3f3d2;line-height:1.6}

@media(max-width:880px){
  .nav-links{display:none}
  .menu-btn{display:block}
  .nav-links.open{display:flex;position:absolute;top:62px;left:0;right:0;flex-direction:column;background:#fff;padding:18px 24px;border-bottom:1px solid var(--line);gap:16px}
  .page-hero{padding:44px 0 36px}
  .content{padding:44px 0 56px}
}