/* ==========================================================================
   miwlso · стили, версия «пион и эспрессо»
   Одна тема: светло-розовая бумага с тёмной полосой цвета эспрессо.
   Тёмного режима нет осознанно, все цвета заданы явно.
   ========================================================================== */
:root{
  --paper:#F8E9EE;      /* фон страницы, бумага с оттенком пиона */
  --paper-2:#F3DCE4;    /* чуть глубже, для подложек */
  --card:#FFFBFC;       /* карточки */
  --peony:#F4C9D6;      /* пион, главный розовый */
  --peony-2:#F9DEE7;    /* пион светлее */
  --rose:#E8A2BB;       /* пыльная роза, акценты */
  --rose-deep:#D4789C;  /* роза темнее, каллиграфия и подчёркивания */
  --espresso:#3E2723;   /* эспрессо, основной текст и тёмная полоса */
  --espresso-2:#2B1815; /* эспрессо глубже */
  --mocha:#6E5049;      /* второстепенный текст */
  --cream:#F6EFE7;      /* текст и карточки на тёмном */
  --line:rgba(62,39,35,.12);
  --line-dark:rgba(246,239,231,.14);
  --display:'Playfair Display','Times New Roman',Georgia,serif;
  --body:'Onest','Segoe UI',Roboto,system-ui,sans-serif;
  --script:'Great Vibes','Segoe Script','Brush Script MT',cursive;
  --gutter:20px; --max:1120px; --radius:24px;
  --shadow:0 10px 30px rgba(62,39,35,.10),0 2px 6px rgba(62,39,35,.06);
  --ease:cubic-bezier(.2,.8,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
html{background:var(--paper);scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--body);font-size:1.0625rem;line-height:1.6;color:var(--espresso);
  background:var(--paper);overflow-x:clip;-webkit-font-smoothing:antialiased;
}
::selection{background:var(--peony);color:var(--espresso)}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
ul{list-style:none;margin:0;padding:0}
h1,h2,h3,p,figure,dl,dd,blockquote{margin:0}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--rose-deep);outline-offset:3px;border-radius:8px}
.skip{position:absolute;left:-999px;top:8px;z-index:100;background:var(--espresso);color:#fff;padding:8px 14px;border-radius:999px}
.skip:focus{left:12px}
.ic{width:18px;height:18px;flex:0 0 auto;color:currentColor}
.ic--sm{width:14px;height:14px}
.wrap{width:min(100% - 2*var(--gutter),var(--max));margin-inline:auto;position:relative}

/* фон: лёгкое зерно бумаги и розовое свечение за курсором */
.noise{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .24 0 0 0 0 .15 0 0 0 0 .14 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:220px 220px;
}
.cursor-glow{
  display:none;position:fixed;left:0;top:0;z-index:0;width:560px;height:560px;margin:-280px 0 0 -280px;
  border-radius:50%;pointer-events:none;will-change:transform;
  background:radial-gradient(closest-side,rgba(232,162,187,.22),rgba(232,162,187,0) 70%);
}
@media (hover:hover) and (pointer:fine){.cursor-glow{display:block}}
main,.top,.pill,.foot{position:relative;z-index:1}

/* ---------- типографика ---------- */
.eyebrow{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--mocha);font-weight:500;position:relative}
.display{font-family:var(--display);font-weight:500;line-height:1.02;letter-spacing:-.015em;text-wrap:balance}
.display em{font-style:italic;font-weight:400;position:relative;isolation:isolate;white-space:nowrap}
.display em::before{
  content:"";position:absolute;left:-.06em;right:-.06em;bottom:.04em;height:.4em;z-index:-1;border-radius:2px;
  background:var(--peony);transform-origin:left center;transition:transform .8s var(--ease) .45s;
}
.js .display em::before{transform:scaleX(0)}
.js .reveal--in .display em::before,.js .display.reveal--in em::before,.js-intro .hero .display em::before{transform:scaleX(1)}
.js-intro .hero .display em::before{transition-delay:1s}
h1.display{font-size:clamp(2.55rem,10vw,5.8rem);margin-top:18px}
h2.display{font-size:clamp(2.2rem,8vw,4.6rem);margin-top:14px}
.lead{color:var(--mocha);max-width:46ch;margin-top:16px;text-wrap:pretty}
.heading{position:relative}
.heading--center{text-align:center}
.heading--center .lead{margin-inline:auto}
.script{font-family:var(--script);font-weight:400}

/* каллиграфические заметки, «пишутся» при появлении */
.note-row{margin-top:8px;line-height:1}
.note{display:inline-block;position:relative;font-family:var(--script);font-size:2.1rem;line-height:1.1;color:var(--rose-deep);transform:rotate(-2deg);padding:0 .15em}
.note__line{position:absolute;left:4%;bottom:-2px;width:92%;height:10px;overflow:visible}
.note__line path{fill:none;stroke:var(--rose);stroke-width:2;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:0}
.js .note{clip-path:inset(-30% 100% -45% 0)}
.js .note__line path{stroke-dashoffset:1}
.js .note.is-writing{animation:write .9s steps(24,end) forwards}
.js .note.is-writing .note__line path{animation:draw .5s var(--ease) .85s forwards}
@keyframes write{to{clip-path:inset(-30% 0 -45% 0)}}
@keyframes draw{to{stroke-dashoffset:0}}

/* ---------- шапка и навигация ---------- */
.top{position:absolute;inset:0 0 auto 0;display:flex;justify-content:space-between;align-items:center;padding:calc(12px + env(safe-area-inset-top,0px)) var(--gutter) 0}
.brand{font-family:var(--script);font-size:2rem;line-height:1;color:var(--espresso)}
.top__ig{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mocha)}
.top__ig:hover{color:var(--rose-deep)}

.pill{
  position:fixed;left:50%;bottom:0;transform:translateX(-50%);z-index:50;
  display:flex;align-items:center;gap:2px;padding:6px;
  margin-bottom:calc(12px + env(safe-area-inset-bottom,0px));max-width:calc(100% - 24px);
  background:rgba(255,251,252,.86);backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3);
  border:1px solid rgba(255,255,255,.9);border-radius:999px;
  box-shadow:0 12px 40px rgba(62,39,35,.18),inset 0 1px 0 rgba(255,255,255,.7);
}
.pill a{font-size:.8rem;font-weight:500;padding:9px 11px;border-radius:999px;white-space:nowrap;transition:background .25s var(--ease),color .25s var(--ease)}
.pill a:hover{background:var(--peony-2)}
.pill a.is-active{background:var(--espresso);color:var(--cream)}
.pill .pill__cta{background:var(--peony);color:var(--espresso);padding-inline:14px;margin-left:4px;font-weight:600}
.pill .pill__cta:hover{background:var(--rose)}
.pill .pill--wide{display:none}
@media (min-width:560px){.pill .pill--wide{display:inline-block}}
@media (min-width:900px){
  .pill{bottom:auto;top:0;margin-bottom:0;margin-top:calc(14px + env(safe-area-inset-top,0px))}
  .pill a{font-size:.84rem;padding:10px 14px}
}

/* ---------- первый экран ---------- */
.hero{position:relative;padding:calc(92px + env(safe-area-inset-top,0px)) var(--gutter) 84px;text-align:center;overflow:hidden;isolation:isolate}
.hero .wrap{max-width:900px;z-index:2}
.hero__title{position:relative;display:inline-block}
.hero__sub{max-width:40ch;margin:22px auto 0;color:var(--mocha);font-size:1.05rem;text-wrap:pretty}
.hero__contacts{position:relative;display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin-top:26px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 20px;border-radius:999px;
  background:var(--espresso);color:var(--cream);font-weight:500;font-size:.95rem;line-height:1.2;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s var(--ease);
}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(62,39,35,.22)}
.btn--ghost{background:var(--card);color:var(--espresso);box-shadow:inset 0 0 0 1.5px var(--line)}
.btn--peony{background:var(--peony);color:var(--espresso)}
.btn--peony:hover{background:var(--rose)}
.status{display:inline-flex;align-items:center;gap:8px;margin-top:22px;font-size:.8rem;color:var(--mocha);background:rgba(255,251,252,.72);padding:6px 12px;border-radius:999px}
.status .dot{width:8px;height:8px;border-radius:50%;background:#5CC98F;box-shadow:0 0 0 4px rgba(92,201,143,.22);animation:pulse 2.2s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 3px rgba(92,201,143,.22)}50%{box-shadow:0 0 0 7px rgba(92,201,143,.08)}}
.scroll-hint{display:flex;justify-content:center;align-items:center;gap:6px;margin-top:34px;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--mocha)}
.scroll-hint .ic{animation:nudge 1.8s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
.glow{
  position:absolute;left:50%;bottom:-34%;z-index:0;width:120vw;max-width:1200px;aspect-ratio:2/1;transform:translateX(-50%) translateY(var(--py,0px));
  border-radius:50%;pointer-events:none;filter:blur(30px);
  background:radial-gradient(closest-side,rgba(232,162,187,.75),rgba(244,201,214,.5) 48%,rgba(248,233,238,0) 100%);
}
.js-intro .intro-el{animation:rise .9s var(--ease) both;animation-delay:var(--d,0s)}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
/* «настольная» композиция первого экрана — с 1024px; уже неё работает телефонно-планшетная */
@media (min-width:1024px){
  .hero{padding-top:calc(104px + env(safe-area-inset-top,0px));padding-bottom:64px}
  /* заголовок растёт вместе с окном так, чтобы по бокам оставалось место под телефон и стикеры (5.8rem с ~1260px) */
  .hero h1.display{font-size:clamp(3rem,12.2vw - 61px,5.8rem);max-width:8.6em;margin-inline:auto}
  /* стикеры уменьшаются вместе с окном: --k = ширина окна / 1280, но не меньше 0.8 */
  .hero{--k:clamp(.8,tan(atan2(100vw,1280px)),1)}
  .hero .sticker--hero{width:calc(var(--w) * var(--k,1))}
  .hero__sub{font-size:1.15rem;max-width:48ch;margin-top:18px}
  .hero__contacts{margin-top:22px}
  .status{margin-top:18px}
  .scroll-hint{margin-top:26px}
}

/* ---------- бегущая строка: лента цвета эспрессо ---------- */
.marquee{overflow:hidden;padding:12px 0;font-family:var(--display);font-style:italic;font-size:1.15rem;color:var(--peony);white-space:nowrap;background:var(--espresso)}
.marquee__track{display:flex;width:max-content;animation:marquee 30s linear infinite}
.marquee.is-js .marquee__track{animation:none;will-change:transform}
.marquee__half{display:flex;gap:26px;padding-right:26px}
.marquee__half i{font-style:inherit}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- секции ---------- */
.section{position:relative;padding:76px 0}
@media (min-width:900px){.section{padding:128px 0}}

/* тёмная полоса: работы и прайс */
.band{background:var(--espresso);color:var(--cream)}
.band .eyebrow{color:var(--peony)}
.band .lead{color:rgba(246,239,231,.78)}
.band .display em::before{background:var(--rose-deep)}
.band .note{color:var(--peony)}
.band .note__line path{stroke:var(--peony)}
.band .section + .section{padding-top:0}

/* обо мне */
.about__grid{display:grid;gap:44px;margin-top:26px}
.seal-card{
  position:relative;width:min(84%,340px);margin:18px auto 0;padding:34px 24px 28px;text-align:center;
  background:var(--cream);border-radius:18px;box-shadow:var(--shadow);transform:rotate(-2deg) translateY(var(--py,0px));cursor:pointer;
  transition:transform .35s var(--ease);
}
.seal-card:hover{transform:rotate(0deg) scale(1.02) translateY(var(--py,0px))}
.seal-card::before{
  content:"";position:absolute;inset:10px;border:1px solid rgba(62,39,35,.14);border-radius:12px;pointer-events:none;
}
.seal-card .seal{width:150px;height:auto;margin:0 auto}
/* вариант с фото: круглый портрет, печать становится значком в углу */
.seal-card__avatar{position:relative;width:176px;height:176px;margin:0 auto}
.seal-card__avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;box-shadow:0 0 0 5px var(--card),0 0 0 6px var(--line),0 12px 28px rgba(62,39,35,.16);background:var(--peony-2)}
.seal-card--photo .seal{position:absolute;right:-16px;bottom:-10px;width:78px;height:auto;margin:0;filter:drop-shadow(0 6px 10px rgba(62,39,35,.22));transform:rotate(-8deg)}
.seal-card__name{font-family:var(--script);font-size:3rem;line-height:1;color:var(--espresso);margin-top:14px}
.seal-card__role{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--mocha);margin-top:6px}
.about__copy{position:relative}
.words{display:flex;flex-direction:column;line-height:.96;font-size:clamp(2.6rem,10.5vw,5.6rem);margin-top:0}
.words span:nth-child(2){color:var(--rose-deep);font-style:italic;font-weight:400;padding-left:.4em}
.words span:nth-child(3){padding-left:.15em}
.about__text{margin-top:24px;display:grid;gap:14px;max-width:58ch;text-wrap:pretty}
.about__text strong{font-weight:500;color:var(--espresso)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:28px}
.stats div{background:var(--card);border-radius:16px;padding:14px 10px;text-align:center;box-shadow:0 1px 0 var(--line)}
.stats dt{font-family:var(--display);font-size:1.55rem;line-height:1.1;font-variant-numeric:tabular-nums}
.stats dd{font-size:.72rem;color:var(--mocha);margin-top:4px;line-height:1.3}
.niches{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.niches li{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;padding:9px 13px;border-radius:999px;background:var(--peony-2);color:var(--espresso)}
@media (min-width:900px){
  .about__grid{grid-template-columns:5fr 7fr;gap:72px;align-items:center}
  .seal-card{margin-top:0}
  .stats dt{font-size:1.9rem}
  .stats dd{font-size:.78rem}
}

/* работы: лента вертикальных видео */
.rail{
  display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  padding:10px var(--gutter) 26px;margin-top:18px;
}
.rail::-webkit-scrollbar{display:none}
@media (min-width:1160px){.rail{padding-inline:calc((100% - var(--max)) / 2)}}
.reel{
  position:relative;flex:0 0 min(72vw,300px);max-width:100%;aspect-ratio:9/16;border-radius:var(--radius);overflow:hidden;
  background:var(--espresso-2);scroll-snap-align:center;box-shadow:0 14px 40px rgba(0,0,0,.28);isolation:isolate;
  transform:translateY(var(--ty,0px)) perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .5s var(--ease),opacity .7s var(--ease);
}
.reel.reveal--wait{--ty:26px}
.reel video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:var(--espresso-2)}
.reel__play{position:absolute;inset:0;z-index:2;display:grid;place-items:center;transition:opacity .3s var(--ease)}
.reel__play span{width:66px;height:66px;border-radius:50%;background:rgba(255,251,252,.92);display:grid;place-items:center;box-shadow:0 8px 24px rgba(0,0,0,.28);transition:transform .25s var(--ease)}
.reel__play:hover span{transform:scale(1.07)}
.reel__play svg{width:24px;height:24px;margin-left:3px;color:var(--espresso)}
.reel.is-playing .reel__play{opacity:0}
.reel.is-preview .reel__play{opacity:1}
.reel__meta{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:44px 16px 16px;color:#fff;pointer-events:none;background:linear-gradient(to top,rgba(43,24,21,.7),rgba(43,24,21,0))}
.reel__meta h3{font-family:var(--display);font-weight:500;font-size:1.15rem;line-height:1.15;text-wrap:balance}
.reel__meta p{font-size:.78rem;opacity:.9;margin-top:4px}
.reel__ig{position:absolute;top:12px;left:12px;z-index:4;font-size:.7rem;font-weight:600;letter-spacing:.04em;background:rgba(255,251,252,.9);color:var(--espresso);padding:6px 10px;border-radius:999px;backdrop-filter:blur(8px)}
.reel__mute{position:absolute;top:10px;right:10px;z-index:4;width:36px;height:36px;border-radius:50%;background:rgba(255,251,252,.9);display:none;place-items:center;color:var(--espresso)}
.reel.is-playing .reel__mute{display:grid}
.reel.is-preview .reel__mute{display:none}
.reel__mute svg{width:18px;height:18px}
.reel__mute .off{display:none}
.reel.is-muted .reel__mute .on{display:none}
.reel.is-muted .reel__mute .off{display:block}
.reel__bar{position:absolute;left:0;bottom:0;z-index:5;height:3px;width:var(--p,0%);background:var(--peony);transition:width .25s linear}
.rail-nav{display:none;justify-content:flex-end;gap:8px;margin-top:8px}
@media (hover:hover) and (pointer:fine){.rail-nav{display:flex}}
.rail-nav button{width:44px;height:44px;border-radius:50%;background:rgba(246,239,231,.08);box-shadow:inset 0 0 0 1.5px var(--line-dark);display:grid;place-items:center;color:var(--cream);transition:background .2s}
.rail-nav button:hover{background:rgba(246,239,231,.16)}

/* прайс: карточки в духе Poch, PRO розовый и крупнее */
.plans{display:grid;gap:18px;margin-top:34px}
.plan{
  position:relative;display:flex;flex-direction:column;gap:14px;background:var(--card);color:var(--espresso);
  border-radius:28px;padding:28px 24px 24px;transition:transform .35s var(--ease),box-shadow .35s var(--ease),opacity .7s var(--ease);
  transform:translateY(var(--ty,0px)) scale(var(--sc,1));transform-origin:center top;
}
.plan.reveal--wait{--ty:18px}
.plan__head{display:flex;flex-direction:column;gap:8px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.plan h3{font-family:var(--display);font-weight:500;font-size:2rem;line-height:1.05}
.plan__tag{display:flex;align-items:center;gap:8px;font-size:.95rem;color:var(--mocha);text-wrap:pretty}
.plan__tag .heart{width:16px;height:16px;flex:0 0 auto}
.plan ul{display:grid;gap:8px;font-size:.93rem;line-height:1.35}
.plan li{display:flex;gap:10px;align-items:flex-start}
.plan li::before{content:"";flex:0 0 9px;height:9px;margin-top:7px;border-radius:50%;background:var(--rose)}
.plan__price{margin-top:auto;padding-top:18px;font-family:var(--display);font-size:3rem;line-height:1;font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.plan__price small{font-family:var(--body);font-size:.85rem;font-weight:500;color:var(--mocha);letter-spacing:0;margin-left:4px}
.plan__note{font-size:.76rem;color:var(--mocha);margin-top:-6px}
.plan .btn{width:100%}
.plan--hot{background:var(--peony);box-shadow:0 24px 60px rgba(0,0,0,.28);padding:34px 26px 28px}
.plan--hot .plan__head{border-color:rgba(62,39,35,.16)}
.plan--hot .plan__tag,.plan--hot .plan__note,.plan--hot .plan__price small{color:var(--espresso)}
.plan--hot li::before{background:var(--espresso)}
.plan--hot .plan__price{font-size:3.4rem}
.plan__badge{
  position:absolute;top:-15px;right:20px;font-family:var(--body);font-size:.68rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;line-height:1;
  background:var(--espresso);color:var(--peony);padding:9px 14px;border-radius:999px;transform:rotate(3deg);box-shadow:0 8px 18px rgba(0,0,0,.3);
}
@media (hover:hover){.plan:hover{--ty:-6px}}
@media (min-width:900px){
  .plans{grid-template-columns:repeat(3,1fr);align-items:start;gap:22px;padding-top:12px}
  .plan{padding:32px 26px 26px}
  .plan--hot{--sc:1.05;z-index:1;padding:36px 28px 30px}
  .plan__price{font-size:3.2rem}
  .plan--hot .plan__price{font-size:3.8rem}
}

/* вопросы */
.faq__list{margin-top:26px;border-top:1px solid var(--line);max-width:760px}
.faq__list details{border-bottom:1px solid var(--line)}
.faq__list summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 0;font-family:var(--display);font-size:1.3rem;line-height:1.2}
.faq__list summary::-webkit-details-marker{display:none}
.faq__list summary::after{content:"+";flex:0 0 auto;font-family:var(--body);font-weight:300;font-size:1.7rem;line-height:1;color:var(--rose-deep);transition:transform .3s var(--ease)}
.faq__list details[open] summary::after{transform:rotate(45deg)}
.faq__body{padding:0 0 20px;color:var(--mocha);max-width:60ch;text-wrap:pretty}
.faq__list details[open] .faq__body{animation:fade .35s var(--ease)}
@keyframes fade{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* контакты */
.contact{text-align:center;overflow:hidden;padding-bottom:110px}
.contact__list{display:grid;gap:10px;margin:32px auto 0;max-width:520px;text-align:left}
.contact__row{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--card);border-radius:16px;padding:12px 12px 12px 16px;box-shadow:0 1px 0 var(--line)}
.contact__row>span{display:flex;flex-direction:column;min-width:0}
.contact__row .k{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mocha)}
.contact__row .v{font-weight:500;overflow-wrap:anywhere}
.contact__row .v:hover{color:var(--rose-deep)}
.contact__row .soon{font-size:.72rem;color:var(--mocha)}
.copy{width:38px;height:38px;flex:0 0 auto;border-radius:50%;background:var(--peony-2);display:grid;place-items:center;color:var(--espresso);transition:background .2s}
.copy:hover{background:var(--peony)}
.contact__note{margin-top:22px;color:var(--mocha);font-size:.9rem}
.glow--bottom{bottom:-48%}
.foot{padding:26px var(--gutter) calc(92px + env(safe-area-inset-bottom,0px));text-align:center;font-size:.78rem;color:var(--mocha)}
@media (min-width:900px){.foot{padding-bottom:40px}}

/* ---------- стикеры (SVG, вне первого экрана) ---------- */
.sticker{
  position:absolute;z-index:6;width:var(--w,64px);left:var(--x,0);right:var(--right,auto);top:var(--y,0);bottom:var(--bottom,auto);
  transform:translate(calc(var(--dx,0px) + var(--tx,0px)),calc(var(--dy,0px) + var(--py,0px) + var(--ty,0px))) rotate(var(--r,0deg));
  filter:drop-shadow(0 8px 12px rgba(62,39,35,.18));cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;
  animation:float 7s ease-in-out infinite;animation-delay:var(--delay,0s);
}
.sticker svg{width:100%;height:auto;overflow:visible;pointer-events:none}
img.sticker{height:auto;-webkit-user-drag:none}
.sticker img{width:100%;height:auto;display:block;pointer-events:none;-webkit-user-drag:none}
.sticker--hero{z-index:1}
/* до 899px — «телефонная» композиция первого экрана; на планшете (561–899) она же, но стикеры и нижняя полоса в 1.3 раза крупнее */
@media (min-width:561px) and (max-width:1023px){.hero{--sm:1.3}}
@media (max-width:1023px){
  /* на телефоне у стикеров первого экрана свои размер и место: --w-m, --xm, --ym, --rightm, --bottomm */
  .hero .sticker--hero{width:calc(var(--w-m,var(--w)) * var(--sm,1));left:var(--xm,var(--x,0));right:var(--rightm,var(--right,auto));top:var(--ym,var(--y,0));bottom:var(--bottomm,var(--bottom,auto))}
  .hero .wrap{display:flex;flex-direction:column;align-items:center}
  .hero .status{order:4}
  .hero__contacts{order:5}
  .hero .scroll-hint{display:none}
  /* заголовок всегда в четыре строки: «Снимаю reels, / которые / хочется / досмотреть.» —
     так по бокам коротких строк остаются карманы под печать и скрепку на любой ширине телефона */
  .hero h1.display{font-size:clamp(2.55rem,10vw,3.4rem);max-width:7.4em;margin-inline:auto}
  /* нижняя полоса под кнопкой отдана стикерам и телефону: 240px, чтобы ничего не пересекалось */
  .hero{padding-bottom:calc(240px * var(--sm,1))}
}

/* телефон с рилсом на первом экране: играет сам без звука, тап ведёт к работам */
.hero-reel{aspect-ratio:9/19.5;padding:5px;background:var(--espresso);border-radius:22px;overflow:hidden;cursor:pointer;box-shadow:0 18px 40px rgba(62,39,35,.3);z-index:3}
.hero-reel video{width:100%;height:100%;object-fit:cover;border-radius:17px;display:block;background:var(--espresso-2);pointer-events:none}
.hero-reel::before{content:"";position:absolute;top:10px;left:50%;transform:translateX(-50%);width:32%;height:5px;border-radius:999px;background:rgba(0,0,0,.6);z-index:2}
.hero-reel__tag{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);z-index:2;font-size:.64rem;font-weight:600;letter-spacing:.08em;background:rgba(255,251,252,.92);color:var(--espresso);padding:5px 9px;border-radius:999px;white-space:nowrap;pointer-events:none}
@media (max-width:560px){.hero-reel{padding:4px;border-radius:16px}.hero-reel video{border-radius:12px}.hero-reel__tag{font-size:.58rem;bottom:8px}}

/* печать «ставится» при загрузке: кольцо расходится от удара */
.stamp-ring{position:absolute;inset:-6%;border-radius:50%;border:2px solid var(--rose-deep);opacity:0;pointer-events:none}

/* интро стикеров: появляются с поворотом по очереди, печать с ударом, искры мерцают */
.js-intro .sticker--hero{animation:pop .8s var(--ease) both,float 7s ease-in-out infinite;animation-delay:var(--d,0s),var(--delay,0s)}
.js-intro .sticker--hero.is-wobble{animation:pop .8s var(--ease) both,float 7s ease-in-out infinite,wobble .6s var(--ease);animation-delay:var(--d,0s),var(--delay,0s),0s}
.js-intro .sticker--stamp{animation:stamp .9s cubic-bezier(.25,1.2,.4,1) both,float 7s ease-in-out infinite;animation-delay:var(--d,0s),var(--delay,0s)}
.js-intro .sticker--stamp.is-wobble{animation:stamp .9s cubic-bezier(.25,1.2,.4,1) both,float 7s ease-in-out infinite,wobble .6s var(--ease);animation-delay:var(--d,0s),var(--delay,0s),0s}
.js-intro .sticker--stamp .stamp-ring{animation:ring 1s ease-out both;animation-delay:calc(var(--d,0s) + .45s)}
.js-intro .sticker--twinkle{animation:pop .8s var(--ease) both,twinkle 3.2s ease-in-out infinite;animation-delay:var(--d,0s),calc(var(--d,0s) + .8s)}
.js-intro .sticker--twinkle.is-wobble{animation:pop .8s var(--ease) both,twinkle 3.2s ease-in-out infinite,wobble .6s var(--ease);animation-delay:var(--d,0s),calc(var(--d,0s) + .8s),0s}
@keyframes pop{from{opacity:0;scale:.3;rotate:-25deg}to{opacity:1;scale:1;rotate:0deg}}
@keyframes stamp{0%{opacity:0;scale:2.3}55%{opacity:1;scale:.92}75%{scale:1.06}100%{scale:1}}
@keyframes ring{0%{opacity:.9;scale:.7}100%{opacity:0;scale:2.2}}
@keyframes twinkle{0%,100%{opacity:.85;scale:1}50%{opacity:1;scale:1.12}}

/* заголовок: слова поднимаются по очереди */
.w{display:inline-block;overflow:hidden;vertical-align:bottom;padding:0 .08em .1em;margin:0 -.08em -.1em}
.w__i{display:inline-block;transform:translateY(110%);animation:wordUp .75s var(--ease) both;animation-delay:calc(.2s + var(--i,0) * .07s)}
@keyframes wordUp{to{transform:none}}
.sticker.is-drag{cursor:grabbing;animation:none;z-index:30;filter:drop-shadow(0 18px 22px rgba(62,39,35,.28))}
.sticker.is-wobble{animation:wobble .6s var(--ease)}
@keyframes float{0%,100%{translate:0 0}50%{translate:0 -6px}}
@keyframes wobble{0%{rotate:0deg}25%{rotate:-9deg}50%{rotate:8deg}75%{rotate:-4deg}100%{rotate:0deg}}

/* ---------- появление, тост, сердечки ---------- */
.reveal--wait{opacity:0}
.reveal--wait:not(.reel):not(.seal-card):not(.plan){transform:translateY(18px)}
.seal-card.reveal--wait{transform:rotate(-2deg) translateY(calc(var(--py,0px) + 18px))}
.reveal--in{opacity:1;transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal--in:not(.reel):not(.seal-card):not(.plan){transform:none}
.seal-card.reveal--in{transform:rotate(-2deg) translateY(var(--py,0px))}
.reveal-group>.reveal--in{transition-delay:calc(var(--i,0) * 70ms)}
.toast{
  position:fixed;left:50%;bottom:calc(86px + env(safe-area-inset-bottom,0px));z-index:60;transform:translate(-50%,10px);
  background:var(--espresso);color:var(--cream);padding:10px 16px;border-radius:999px;font-size:.85rem;opacity:0;pointer-events:none;transition:.3s var(--ease);
}
.toast.is-on{opacity:1;transform:translate(-50%,0)}
@media (min-width:900px){.toast{bottom:28px}}
.heart-fx{position:fixed;z-index:70;color:var(--rose-deep);font-size:calc(18px * var(--s,1));pointer-events:none;animation:heart 1.5s ease-out forwards}
@keyframes heart{to{transform:translate(var(--dx,0px),-170px) rotate(20deg);opacity:0}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .sticker,.marquee__track,.status .dot,.scroll-hint .ic{animation:none}
  .js-intro .intro-el{animation:none}
  .js-intro .sticker--hero,.js-intro .sticker--stamp,.js-intro .sticker--twinkle,.js-intro .sticker--stamp .stamp-ring{animation:none}
  .w__i{transform:none;animation:none}
  .js .note{clip-path:none}
  .js .note__line path{stroke-dashoffset:0;animation:none}
  .js .display em::before{transform:scaleX(1);transition:none}
  .reveal--wait{opacity:1;transform:none}
  .reveal--in{transition:none}
  .btn,.pill a,.seal-card,.reel,.plan{transition:none}
}