/* Общие стили: цвета, шапка, подвал, кнопки. Подключается на каждой странице. */
:root{--bg:#0e1b2b;--panel:#142638;--line:#25405a;--text:#e9eef4;--muted:#93a7bb;--accent:#f0b43c;--accent-ink:#1b1405;--max:1080px}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font:17px/1.65 "Onest",system-ui,sans-serif;min-height:100vh;display:flex;flex-direction:column}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
main{flex:1}
.wrap{width:min(var(--max),100% - 40px);margin-inline:auto}
header{border-bottom:1px solid var(--line)}
header .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:18px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand img{height:30px;width:auto;display:block}
.season{font-size:13px;line-height:1;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:6px 11px}
nav{display:flex;gap:6px;flex-wrap:wrap}
nav a{padding:8px 14px;border-radius:999px;text-decoration:none;color:var(--muted);font-size:15px}
nav a:hover{color:var(--text)}
nav a[aria-current="page"]{background:var(--panel);color:var(--text);box-shadow:inset 0 0 0 1px var(--line)}
.actions{margin-top:22px;display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-block;padding:12px 22px;border-radius:999px;text-decoration:none;font-weight:600;border:1px solid var(--line)}
.btn:hover{border-color:var(--accent)}
.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.btn.primary:hover{filter:brightness(1.08)}
.steps{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;counter-reset:s}
.steps li{counter-increment:s;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:22px}
.steps li::before{content:counter(s);display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--accent);color:var(--accent-ink);font:600 15px "Unbounded",sans-serif;margin-bottom:12px}
.steps b{display:block;margin-bottom:4px}
.steps span{color:var(--muted);font-size:15px}
.steps a{color:var(--accent)}
footer{border-top:1px solid var(--line);color:var(--muted);font-size:14px}
footer .wrap{padding-block:22px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.links{display:flex;gap:18px}
.links a{color:var(--muted);text-decoration:none}.links a:hover{color:var(--text)}

/* Анимации */
.btn,nav a,button{transition:background-color .2s,color .2s,border-color .2s,filter .2s,transform .15s}
.btn:hover{transform:translateY(-1px)}
.btn:active,button:active{transform:scale(.97)}
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  header{view-transition-name:site-header}
  footer{view-transition-name:site-footer}
  main{view-transition-name:page}
  @keyframes vt-out{to{opacity:0;transform:translateY(-6px)}}
  @keyframes vt-in{from{opacity:0;transform:translateY(10px)}}
  @keyframes page-in{from{opacity:0;transform:translateY(10px)}}
  ::view-transition-old(page){animation:vt-out .2s ease-in both}
  ::view-transition-new(page){animation:vt-in .35s cubic-bezier(.2,.7,.2,1) .05s both}
  .vt-fallback main{animation:page-in .35s cubic-bezier(.2,.7,.2,1) both}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}