:root{--bg:#F8F2E6;--surface:#FFFCF5;--ink:#132449;--muted:#55607E;--line:#E6DCC8;--gold:#B8841F;--accent:#1E4FA8;color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0B1734;--surface:#122349;--ink:#F3EEDD;--muted:#A9B4D2;--line:#22386A;--gold:#F0C36A;--accent:#8FB8FF;color-scheme:dark}}
:root[data-theme="dark"]{--bg:#0B1734;--surface:#122349;--ink:#F3EEDD;--muted:#A9B4D2;--line:#22386A;--gold:#F0C36A;--accent:#8FB8FF;color-scheme:dark}
*,*::before,*::after{box-sizing:inherit}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Rubik","Heebo",system-ui,Arial,sans-serif;font-size:1.0625rem;line-height:1.85}
a{color:var(--accent)}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}
.skip{position:absolute;top:-80px;inset-inline-start:12px;background:#13203F;color:#fff;padding:10px 16px;border-radius:10px;z-index:10}
.skip:focus{top:10px}
.top{background:linear-gradient(180deg,#06102B,#0B2253 70%,#1A447F);color:#fff;padding:18px 20px 70px}
.top-in{max-width:880px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.top a{color:#FFE7A3;text-decoration:none;font-weight:700}
.top a:hover{text-decoration:underline}
.hero{max-width:880px;margin:30px auto 0;padding:0 0}
.crumbs{font-size:.9rem;color:#C9D6F2;margin:0 0 10px}
.crumbs a{color:#C9D6F2;font-weight:500}
.hero h1{font-size:clamp(2rem,5vw,3rem);line-height:1.15;margin:0 0 12px;font-weight:800;color:#FFF3D6}
.hero p{color:#D9E3F7;margin:0;max-width:60ch}
main{max-width:760px;margin:-40px auto 0;padding:0 20px 60px}
article{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:34px clamp(20px,5vw,46px);box-shadow:0 24px 50px -36px rgba(19,36,73,.5)}
article h2{font-size:1.5rem;line-height:1.3;margin:34px 0 10px;font-weight:800}
article h2:first-child{margin-top:0}
article h3{font-size:1.15rem;margin:22px 0 6px}
article ul,article ol{padding-inline-start:24px}
article li{margin-bottom:6px}
.meta{color:var(--muted);font-size:.9rem;margin:0 0 20px}
.tip{background:color-mix(in srgb,var(--gold) 12%,var(--surface));border-inline-start:4px solid var(--gold);border-radius:10px;padding:14px 18px;margin:20px 0}
.cta{margin:36px 0 0;padding:26px;border-radius:18px;border:1.5px solid var(--gold);text-align:center;background:var(--bg)}
.cta h2{margin:0 0 8px;font-size:1.35rem}
.cta p{margin:0 0 18px;color:var(--muted)}
.btn{display:inline-block;background:#F4C35C;color:#13203F;text-decoration:none;font-weight:700;border-radius:14px;padding:14px 28px;box-shadow:0 0 0 2px #13203F inset,0 6px 0 #9C6B1C}
.btn:hover{transform:translateY(-2px)}
.faq details{border-top:1px solid var(--line);padding:4px 0}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;font-weight:700;padding:12px 0}
.related{margin-top:40px}
.related h2{font-size:1.3rem;margin-bottom:12px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;padding:0;list-style:none}
.cards a{display:block;height:100%;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:16px 18px;text-decoration:none;color:var(--ink)}
.cards a:hover{border-color:var(--gold)}
.cards b{display:block;margin-bottom:4px}
.cards span{color:var(--muted);font-size:.92rem;line-height:1.6}
footer{max-width:760px;margin:0 auto;padding:10px 20px 50px;color:var(--muted);font-size:.9rem}
footer ul{display:flex;flex-wrap:wrap;gap:6px 18px;padding:0;list-style:none}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}