/* Глянец — общая основа: токены, кнопки, шапка, подвал. Палитра взята с логотипа
   (коралловый фон, фиолетовый полароид, кремовая рамка, оранжевая лента). */
@font-face{font-family:'Onest';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/onest-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Onest';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/onest-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:500 800;font-display:swap;src:url(../fonts/unbounded-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:500 800;font-display:swap;src:url(../fonts/unbounded-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
:root{
  --coral:#ff5c5c;--coral-2:#ff7a5c;--coral-ink:#c9283a;
  --violet:#5b3df5;--violet-2:#4a2be0;
  --ink:#1f1442;--muted:#5e5478;
  --cream:#fff6ea;--cream-2:#ffebd6;--white:#fff;--orange:#ffa13d;
  --line:#e9d9c3;
  --r-s:14px;--r-m:24px;--r-l:36px;
  --pop:0 5px 0 var(--ink);
  --soft:0 18px 40px -18px rgba(74,43,224,.35);
  --font:'Onest',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --display:'Unbounded','Onest',system-ui,'Segoe UI',Arial,sans-serif;
  --max:1200px;--gut:clamp(16px,4vw,40px);--outer:calc(var(--max) + 2*var(--gut));
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:88px}
body{margin:0;background:var(--cream);color:var(--ink);font:400 17px/1.55 var(--font);-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,p,ul,ol,figure{margin:0;padding:0}
ul,ol{list-style:none}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;padding:0}
a,button,summary{touch-action:manipulation}
:focus-visible{outline:3px solid var(--violet);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ink);color:var(--cream);padding:12px 18px;border-radius:var(--r-s)}
.skip:focus{top:12px}

/* кнопки: плотный контур + «нажимная» тень */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:14px 26px;border:2px solid var(--ink);border-radius:999px;font-weight:700;font-size:16px;line-height:1.2;text-align:center;box-shadow:0 4px 0 var(--ink);transition:transform .15s,box-shadow .15s,background-color .15s}
.btn:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--ink)}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
.btn-lg{min-height:58px;padding:16px 30px;font-size:17px}
.btn-sm{min-height:44px;padding:9px 18px;font-size:15px;box-shadow:0 3px 0 var(--ink)}
.btn-violet{background:var(--violet);color:#fff}
.btn-violet:hover{background:var(--violet-2)}
.btn-cream{background:var(--cream);color:var(--ink)}
.btn-orange{background:var(--orange);color:var(--ink)}
.btn-ghost{background:transparent;color:var(--ink)}
.btn-ghost:hover{background:var(--cream-2)}
.btn-ink{background:var(--ink);color:var(--cream);box-shadow:0 4px 0 var(--violet)}

/* шапка */
.topbar{position:sticky;top:0;z-index:20;background:rgba(255,246,234,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.topbar-in{max-width:var(--outer);margin:0 auto;padding:12px var(--gut);display:flex;align-items:center;gap:24px}
.brand{display:flex;align-items:center;gap:10px;font:800 22px/1 var(--display);letter-spacing:-.5px}
.brand-logo{width:44px;height:44px;border-radius:12px}
.topnav{display:flex;gap:6px;margin-left:auto}
.topnav a{padding:10px 14px;border-radius:999px;font-weight:500;font-size:15px}
.topnav a:hover{background:var(--cream-2)}
.topbar-cta{display:flex;gap:10px}

/* подвал */
.footer{background:var(--ink);color:var(--cream);margin-top:0}
.footer-in{max-width:var(--outer);margin:0 auto;padding:56px var(--gut) 36px}
.footer-top{display:flex;align-items:center;gap:24px;flex-wrap:wrap;justify-content:space-between}
.footer-top p{color:#d8cfee;max-width:420px}
.footer .brand{color:#fff}
.footer-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:32px;margin-top:40px;padding-top:32px;border-top:1px solid #3d3066}
.footer-cols div{display:flex;flex-direction:column;gap:12px;min-width:0}
.footer-cols h3{font:600 13px/1 var(--font);text-transform:uppercase;letter-spacing:.14em;color:#b9aedb;margin-bottom:4px}
.footer-cols a{color:#fff;overflow-wrap:anywhere;padding:2px 0}
.footer-cols a:hover{color:var(--orange)}
.footer-bottom{margin-top:36px;font-size:14px;color:#b9aedb}

@media(max-width:860px){
  .topnav{display:none}
  .topbar-cta{margin-left:auto}
}
@media(max-width:560px){
  body{font-size:16px}
  .topbar-in{padding:10px 16px;gap:10px}
  .brand{font-size:20px}
  .brand-logo{width:38px;height:38px}
  .topbar-cta .btn-ghost{display:none}
  .footer-in{padding:44px 16px 96px}
  .footer-cols{grid-template-columns:1fr;gap:26px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
