*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--ink-950);color:var(--text);font:400 var(--fs-body)/1.6 var(--font-text);overflow-x:clip;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3{margin:0;font-family:var(--font-display);font-weight:600;line-height:1.08;letter-spacing:-.01em}
p{margin:0}
:focus-visible{outline:2px solid var(--gold-400);outline-offset:3px;border-radius:6px}
[hidden]{display:none!important}

.wrap{width:min(var(--wrap),100% - var(--gutter)*2);margin-inline:auto}
.section{position:relative;padding-block:clamp(72px,12vw,140px)}
.section__head{display:grid;gap:18px;margin-bottom:clamp(28px,5vw,56px)}
.h2{font-size:var(--fs-h2);text-wrap:balance}
.h2 em{font-style:normal;color:var(--fog-300)}
.lead{color:var(--fog-300);max-width:46ch}
@media(min-width:860px){.section__head{grid-template-columns:1.4fr 1fr;align-items:end;gap:48px}.section__head .pill{grid-column:1/-1}}

.pill{display:inline-flex;align-items:center;gap:8px;width:max-content;padding:6px 14px 6px 12px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.04);font-size:.8125rem;color:var(--gold-200)}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold-400);box-shadow:0 0 10px var(--gold-400)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 24px;border:1px solid transparent;border-radius:999px;font-weight:600;font-size:.9375rem;cursor:pointer;transition:transform .2s,background .2s,border-color .2s}
.btn:active{transform:scale(.98)}
.btn--gold{background:linear-gradient(180deg,var(--gold-200),var(--gold-400));color:#1a1407}
.btn--gold:hover{background:var(--gold-200)}
.btn--ghost{border-color:var(--line);background:rgba(255,255,255,.04)}
.btn--ghost:hover{border-color:var(--gold-400)}
.btn--sm{min-height:40px;padding:0 16px;font-size:.875rem}

/* Золотая двойная рамка — мотив карт таро */
.frame{position:relative;border:1px solid var(--line);border-radius:var(--radius);background:var(--ink-900)}
.frame::after{content:"";position:absolute;inset:6px;border:1px solid rgba(212,175,106,.13);border-radius:calc(var(--radius) - 6px);pointer-events:none}

/* Звёзды живут в псевдоэлементе с маской: небо проявляется постепенно, а не начинается с линии */
.starfield{position:relative}
.starfield::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background-image:radial-gradient(1.2px 1.2px at 12% 18%,rgba(255,255,255,.75) 50%,transparent 51%),radial-gradient(1px 1px at 64% 42%,rgba(240,220,168,.7) 50%,transparent 51%),radial-gradient(1px 1px at 83% 76%,rgba(255,255,255,.55) 50%,transparent 51%),radial-gradient(1.4px 1.4px at 37% 88%,rgba(170,176,196,.7) 50%,transparent 51%),radial-gradient(1px 1px at 92% 12%,rgba(255,255,255,.5) 50%,transparent 51%);background-size:420px 420px;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 90vh);mask-image:linear-gradient(180deg,transparent 0,#000 90vh)}
.starfield>*{position:relative;z-index:1}

/* ---------- Мягкое появление ----------
   rise / lift — при загрузке (CSS-анимация, работает и без JS). Используют свойство translate, а не transform:
   transform у слоёв первого экрана занят параллаксом, и анимация не должна его перебивать.
   [data-reveal] — один раз при входе в окно (js/ui.js, класс has-reveal ставит скрипт). --d — ступень лесенки, шаг 0.1 с. */
@keyframes rise{from{opacity:.001;translate:0 var(--from,24px)}to{opacity:1;translate:0 0}}
@keyframes lift{from{translate:0 var(--from,48px)}to{translate:0 0}}
.rise{animation:rise 1.1s var(--spring) both;animation-delay:calc(var(--d,0)*.1s)}
.has-reveal [data-reveal]{opacity:.001;translate:0 24px}
.has-reveal [data-reveal].is-in{opacity:1;translate:0 0;transition:opacity 1s var(--spring),translate 1s var(--spring);transition-delay:calc(var(--d,0)*.1s)}

/* ---------- Фокус по центру экрана (js/focus.js) ----------
   --f: сила фокуса 0..1, --s: -1 выше центра … 1 ниже. Без класса has-focus всё яркое и неподвижное. */
[data-focus],[data-focus-item]{--f:1;--s:0}
.has-focus [data-focus],.has-focus [data-focus-item]{--f:0;--s:1;transition:opacity .4s ease-out,transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s ease-out}
.has-focus [data-focus="text"]{opacity:calc(.32 + var(--f)*.68);transform:translateY(calc(var(--s)*14px)) scale(calc(1 + var(--f)*.03));transform-origin:0 50%}
.has-focus [data-focus="pop"]{transform:scale(calc(1 + var(--f)*.14))}
.has-focus [data-focus="card"]{opacity:calc(.6 + var(--f)*.4);transform:translateY(calc(var(--s)*18px)) scale(calc(1 + var(--f)*.025))}
.has-focus [data-focus-item]{position:relative;opacity:calc(.58 + var(--f)*.42);transform:translateY(calc(var(--s)*18px)) scale(calc(1 + var(--f)*.08));z-index:0}
.has-focus [data-focus-item].is-focus{z-index:3;box-shadow:0 34px 70px -22px rgba(0,0,0,.95),0 0 0 1px var(--gold-400),0 0 60px rgba(212,175,106,.2)}

.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* Виден только при отключённом JavaScript: страницы собираются сценариями, и без них остаётся оформление.
   На обычный вид страницы блок не влияет — браузер с работающим JS не показывает его вовсе. */
.noscript{margin:24px auto;padding:14px 16px;border:1px solid var(--line);border-radius:var(--radius);background:var(--ink-900);font-size:.9375rem;color:var(--fog-300)}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}