:root{
  --bg:#221A1D; --surface:#2E2327; --ink:#F9ECEF; --ink-soft:#CDAAB2; --ink-faint:#94727A;
  --pink:#F1C4CE; --pink-hot:#FF6FA0; --brand-pink:#E7BFCA; --lime:#CBEF4B; --lime-ink:#2B3300;
  --line:rgba(241,196,206,.16);
  --font-display:'Comfortaa','Nunito',system-ui,sans-serif;
  --font-body:'Nunito',system-ui,-apple-system,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:88px}
body{margin:0; position:relative; min-height:100vh; display:flex; flex-direction:column; overflow-x:hidden;
  background:
    radial-gradient(70% 560px at 100% 0%, rgba(255,111,160,.14), transparent 72%),
    radial-gradient(55% 520px at 0% 30%, rgba(203,239,75,.045), transparent 72%),
    radial-gradient(70% 600px at 100% 62%, rgba(255,111,160,.10), transparent 72%),
    radial-gradient(70% 620px at 0% 92%, rgba(231,191,202,.09), transparent 72%),
    var(--bg);
  color:var(--ink); font-family:var(--font-body); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased}
h1,h2,h3,p,ul{margin:0}
a{color:inherit}
:focus-visible{outline:3px solid var(--lime); outline-offset:3px; border-radius:10px}
.wrap{max-width:820px; margin:0 auto; padding-inline:24px; width:100%}
.wrap-wide{max-width:1160px}

/* фоновые цветочки */
.fx{position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0}
.fx i{position:absolute; display:block; background:url(flower-yellow-sm.webp) center/contain no-repeat; opacity:.7; filter:blur(1.6px);
  animation:fxbob var(--d,5s) ease-in-out var(--dl,0s) infinite alternate; will-change:transform}
@keyframes fxbob{from{transform:translate(0,0) rotate(var(--r0,0deg))}to{transform:translate(var(--dx,0px),var(--dy,16px)) rotate(var(--r1,0deg))}}
@media (prefers-reduced-motion:reduce){.fx i{animation:none}}

/* шапка */
.site-header{position:sticky; top:0; z-index:50; background:rgba(34,26,29,.82); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--line)}
.site-header .wrap{display:flex; align-items:center; justify-content:space-between; gap:16px; height:68px; max-width:1160px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; font-family:var(--font-display); font-weight:700; font-size:19px}
.brand img{width:34px; height:32px; object-fit:contain}
.nav{display:flex; align-items:center; gap:28px; font-weight:700; font-size:15px}
.nav a{text-decoration:none; color:var(--ink-soft); transition:color .2s}
.nav a:hover,.nav a[aria-current]{color:var(--ink)}
.nav a[aria-current]{position:relative}
.nav a[aria-current]::after{content:""; position:absolute; left:0; right:0; bottom:-6px; height:3px; border-radius:3px; background:var(--lime)}
.nav .nav-cta{
  position:relative; color:#F6EEF9; font-family:var(--font-display); font-weight:700; font-size:14.5px; letter-spacing:.01em;
  padding:8px 24px 9px; border-radius:999px; border:1px solid rgba(226,206,240,.62);
  background:linear-gradient(180deg, rgba(74,60,74,.62) 0%, rgba(38,30,38,.78) 55%, rgba(28,22,29,.86) 100%);
  -webkit-backdrop-filter:blur(10px) saturate(1.3); backdrop-filter:blur(10px) saturate(1.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.38), inset 0 -1px 0 rgba(226,206,240,.22), inset 9px 7px 14px -9px rgba(255,255,255,.55), inset -9px -7px 14px -9px rgba(240,215,255,.40), 0 6px 18px -4px rgba(0,0,0,.5);
  text-shadow:0 1px 0 rgba(0,0,0,.25); transition:transform .25s cubic-bezier(.2,.8,.2,1), border-color .25s, box-shadow .25s}
.nav .nav-cta:hover{color:#fff; transform:translateY(-1px); border-color:rgba(245,205,228,.95);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(245,205,228,.35), inset 9px 7px 14px -9px rgba(255,255,255,.7), inset -9px -7px 14px -9px rgba(255,190,225,.55), 0 8px 26px -4px rgba(255,90,160,.55)}
.nav .nav-cta::after{display:none}

/* контент */
main{position:relative; z-index:1; flex:1; padding:64px 0 96px}
.eyebrow{display:inline-flex; align-items:center; gap:8px; font-weight:800; font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--pink); margin-bottom:18px}
.eyebrow::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--lime); box-shadow:0 0 0 4px rgba(203,239,75,.18)}
h1{font-family:var(--font-display); font-weight:700; font-size:clamp(28px,5vw,44px); line-height:1.18; letter-spacing:-.01em; text-wrap:balance; margin-bottom:20px}
.updated{display:inline-block; font-size:13.5px; line-height:1.5; color:var(--ink-soft); padding:8px 16px; border-radius:16px; border:1px solid var(--line); background:rgba(46,35,39,.55); margin-bottom:40px}

.toc{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:56px; padding:18px; border-radius:24px; border:1px solid rgba(241,196,206,.2);
  background:linear-gradient(160deg, rgba(255,111,160,.10), rgba(46,35,39,.55) 55%); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px)}
.toc a{font-size:13.5px; font-weight:700; color:var(--ink-soft); text-decoration:none; padding:6px 14px; border-radius:999px; border:1px solid transparent; background:rgba(255,255,255,.04); transition:color .2s, background .2s, border-color .2s}
.toc a:hover{color:var(--ink); background:rgba(255,111,160,.18); border-color:rgba(255,150,195,.45)}

section{scroll-margin-top:88px}
section + section{margin-top:44px; padding-top:40px; border-top:1px solid transparent; border-image:linear-gradient(90deg, var(--line), transparent 85%) 1}
h2{font-family:var(--font-display); font-weight:700; font-size:clamp(19px,2.6vw,23px); line-height:1.3; color:var(--pink); margin-bottom:14px; text-wrap:balance}
.body-text,.term{font-size:16px; line-height:1.72; color:var(--ink-soft)}
.body-text + .body-text{margin-top:12px}
.term + .term{margin-top:8px}
.term b,.body-text b{color:var(--ink)}
.body-text a,.term a,.list a{color:var(--pink); text-decoration-color:rgba(241,196,206,.45); text-underline-offset:3px; transition:color .2s}
.body-text a:hover,.term a:hover,.list a:hover{color:#fff}
.list{margin:12px 0 0; padding:0; list-style:none}
.list li{position:relative; font-size:16px; line-height:1.7; color:var(--ink-soft); margin-bottom:7px; padding-left:24px}
.list li::before{content:""; position:absolute; left:5px; top:.68em; width:7px; height:7px; border-radius:50%; background:var(--lime); box-shadow:0 0 0 3px rgba(203,239,75,.14)}
.list + .body-text,.body-text + .list{margin-top:14px}
h3.sub{font-family:var(--font-display); font-size:16.5px; font-weight:700; color:var(--ink); margin:22px 0 6px}

.note,.contact{margin-top:48px; padding:22px 26px; border-radius:24px; border:1px solid rgba(241,196,206,.2);
  background:linear-gradient(160deg, rgba(255,111,160,.10), rgba(46,35,39,.55) 55%); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px)}
.note{font-size:14px; line-height:1.65; color:var(--ink-soft); font-style:italic}
.contact h2{margin-bottom:8px}
.contact .body-text{margin:0}

/* подвал */
.site-footer{position:relative; z-index:1; padding:20px 0 44px; border-top:1px solid transparent; border-image:linear-gradient(90deg, transparent, var(--line) 30%, var(--line) 70%, transparent) 1}
.site-footer .wrap{max-width:1160px}
.foot-top{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px 28px; padding:32px 0 22px}
.foot-links{display:flex; flex-wrap:wrap; gap:10px 28px; font-weight:700; font-size:15px}
.foot-links a{color:var(--ink-soft); text-decoration:none; transition:color .2s}
.foot-links a:hover,.foot-links a[aria-current]{color:var(--ink)}
.foot-note{font-size:13.5px; line-height:1.55; color:var(--ink-faint); display:flex; flex-wrap:wrap; gap:6px 24px; justify-content:space-between}
.foot-copy{display:flex; flex-direction:column; align-items:flex-end; text-align:right}
@media (max-width:640px){.foot-copy{align-items:flex-start; text-align:left}}

@media (max-width:760px){
  .nav a:not(.nav-cta){display:none}
  .nav .nav-cta{padding:7px 18px 8px; font-size:13px}
  .brand{font-size:17px; white-space:nowrap; gap:8px}
  .brand img{width:30px; height:28px}
  main{padding:44px 0 72px}
  .toc{padding:14px}
  .note,.contact{padding:18px 20px}

}