/* Экран 1. Витрина — раскадровка 4.1 */

/* ───── HERO ───── */
.hero{ position:relative; display:flex; flex-direction:column; padding:var(--hdr) var(--gut) 12px; overflow:clip; }
.const{ position:relative; height:clamp(300px, 45svh, 400px); margin:0 calc(var(--gut) * -1); }
.m-only{ display:inline; } .d-only{ display:none; }
@media (min-width:900px){ .hero{ min-height:100svh; } .m-only{ display:none; } .d-only{ display:inline; } }
.cf{ position:absolute; left:var(--x); top:var(--y); width:var(--w); aspect-ratio:3/4; border-radius:var(--r-card); overflow:hidden; background:var(--s1);
  rotate:var(--r); box-shadow:var(--sh-float); transform:translate(calc(var(--mx,0) * var(--depth) * 260px), calc(var(--my,0) * var(--depth) * 260px));
  transition:transform var(--dur-slow) var(--ease-out); }
.cf img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.cf--d{ display:none; }
/* телефон: 5 кадров, два уходят за край */
.cf--1{ --x:-8%;  --y:40%; --w:31%; --r:-6deg; }
.cf--2{ --x:19%;  --y:6%;  --w:23%; --r:4deg; }
.cf--3{ --x:34%;  --y:22%; --w:38%; --r:-2deg; z-index:2; }
.cf--4{ --x:73%;  --y:0%;  --w:28%; --r:5deg; }
.cf--5{ --x:79%;  --y:50%; --w:27%; --r:-4deg; }

/* M8: пузырь-линза. Внутри видно исходное фото, снаружи готовый кадр */
@property --lx{ syntax:'<percentage>'; inherits:true; initial-value:36%; }
@property --ly{ syntax:'<percentage>'; inherits:true; initial-value:26%; }
.cf--lens{ --lr:40px; }
.cf__before{ filter:grayscale(1) brightness(1.35) contrast(.9); clip-path:circle(calc(var(--lr) * .89) at var(--lx) var(--ly)); transform:scale(1.12); transform-origin:var(--lx) var(--ly); }
/* Жидкое стекло: объём без WebGL — блик, светлая кромка, тень; преломление через SVG-фильтр (Chromium) */
.lens,.orb{ border-radius:50%;
  background:radial-gradient(circle at 31% 24%, rgba(255,255,255,.85) 0, rgba(255,255,255,.25) 6%, transparent 15%),
    radial-gradient(circle at 70% 80%, rgba(255,255,255,.28), transparent 28%),
    radial-gradient(circle, transparent 58%, rgba(255,255,255,.06) 78%, rgba(255,255,255,.26) 98%);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55), inset -12px -16px 28px rgba(255,255,255,.16), inset 12px 14px 26px rgba(0,0,0,.22), 0 26px 50px -18px rgba(0,0,0,.7); }
.orb{ -webkit-backdrop-filter:blur(1.5px) saturate(160%) brightness(1.1); backdrop-filter:blur(1.5px) saturate(160%) brightness(1.1); backdrop-filter:url(#refract) saturate(160%) brightness(1.1); }
.orbs{ display:none; }
.lens{ position:absolute; left:var(--lx); top:var(--ly); width:calc(var(--lr) * 2); height:calc(var(--lr) * 2); translate:-50% -50%; pointer-events:none; }
.lens--2{ display:none; }
.cf__tag{ display:none; }
@keyframes lensMove{ 0%{ --lx:34%; --ly:25%; } 50%{ --lx:52%; --ly:21%; } 100%{ --lx:64%; --ly:27%; } }

/* M3: вход hero; M1: параллакс слоёв по прокрутке */
@keyframes cfIn{ from{ opacity:0; scale:.97; } }
@keyframes cfInLcp{ from{ scale:.97; } }
@keyframes drift{ to{ translate:0 calc(var(--depth) * -100vh); } }
.has-motion .cf{ animation:cfIn var(--dur-slower) var(--ease-out) both; animation-delay:calc(var(--k,0) * var(--stag)); }
.has-motion .cf--3{ animation-name:cfInLcp; }
.has-motion .cf--lens{ animation:cfInLcp var(--dur-slower) var(--ease-out) both, lensMove 12s var(--ease-in-out) infinite alternate; }
@supports (animation-timeline: scroll()){
  .has-motion .cf{ animation:cfIn var(--dur-slower) var(--ease-out) both calc(var(--k,0) * var(--stag)), drift linear both; animation-timeline:auto, scroll(root); animation-range:normal, 0 100vh; }
  .has-motion .cf--3{ animation:cfInLcp var(--dur-slower) var(--ease-out) both, drift linear both, lensMove 12s var(--ease-in-out) infinite alternate; animation-timeline:auto, scroll(root), auto; animation-range:normal, 0 100vh, normal; }
}
.cf--1{ --k:0; } .cf--2{ --k:1; } .cf--4{ --k:2; } .cf--5{ --k:3; } .cf--6{ --k:4; } .cf--7{ --k:5; } .cf--8{ --k:6; } .cf--9{ --k:7; }

.hero__body{ position:relative; z-index:3; text-align:center; }
.hero__h{ margin:0 auto; max-width:12.5em; }
.has-motion .hero__h{ animation:rise var(--dur-slower) var(--ease-out) both 160ms; }
.hero__ask{ position:relative; margin:18px auto 0; max-width:640px; }
.has-motion .hero__ask{ animation:rise var(--dur-slow) var(--ease-out) both 320ms; }
.hero__glow{ position:absolute; left:50%; top:50%; width:480px; height:240px; max-width:140%; translate:-50% -50%; z-index:-1; pointer-events:none;
  background:radial-gradient(closest-side, var(--lime-glow), transparent); filter:blur(40px); }
.hero__note{ margin:12px 0 0; }

/* ───── Поле «что изменить» (Shop) ───── */
.ask{ display:flex; align-items:center; gap:8px; width:100%; height:56px; padding:0 6px 0 8px; border-radius:999px; background:var(--s2); box-shadow:inset 0 0 0 1px var(--line);
  transition:box-shadow var(--dur-base) var(--ease-out); text-align:left; }
.ask:focus-within{ box-shadow:inset 0 0 0 1px var(--lime-line); }
.ask__clip{ position:relative; width:40px; height:40px; border-radius:50%; background:var(--s3); display:grid; place-items:center; flex:none; color:var(--text); }
.ask__ico svg{ width:20px; height:20px; display:block; }
.ask__clip img{ position:absolute; inset:0; width:100%; height:100%; border-radius:50%; object-fit:cover; }
.ask__clip .x{ position:absolute; right:-3px; top:-3px; width:16px; height:16px; border-radius:50%; background:var(--text); color:var(--on-lime); display:grid; place-items:center; }
.ask__clip .x svg{ width:10px; height:10px; }
.ask__in{ flex:1; min-width:0; height:100%; border:0; background:none; outline:none; font-size:16px; padding:0 4px; }
.ask__in::placeholder{ color:var(--text-3); opacity:1; }
.ask__go{ width:44px; height:44px; border-radius:50%; background:var(--lime); color:var(--on-lime); display:grid; place-items:center; flex:none; box-shadow:var(--sh-lime);
  transition:transform var(--dur-base) var(--ease-out); }
.ask__go svg{ width:20px; height:20px; }
.ask__go:active{ transform:scale(.94); }
.ask__go:focus-visible{ box-shadow:0 0 0 2px var(--s0),0 0 0 4px #fff; }
.ask.is-shake{ animation:shake 320ms var(--ease-out); }
@keyframes shake{ 25%{ translate:-4px 0; } 60%{ translate:3px 0; } }
.ask--mini{ height:52px; }
.ask--mini .ask__clip{ width:38px; height:38px; }
.ask--mini .ask__go{ width:40px; height:40px; }
.ask--hdr{ display:none; }
@media (min-width:900px){
  .hero__ask .ask{ height:64px; padding:0 8px 0 10px; }
  .hero__ask .ask__clip{ width:44px; height:44px; }
  .hero__ask .ask__go{ width:48px; height:48px; }
  .ask--hdr{ display:flex; position:absolute; left:50%; top:50%; width:420px; height:44px; padding:0 4px 0 5px; translate:-50% -50%; opacity:0; pointer-events:none; scale:.98;
    transition:opacity var(--dur-slow) var(--ease-out), scale var(--dur-slow) var(--ease-out); }
  .ask--hdr .ask__clip{ width:34px; height:34px; } .ask--hdr .ask__ico svg{ width:17px; height:17px; }
  .ask--hdr .ask__go{ width:36px; height:36px; box-shadow:none; } .ask--hdr .ask__go svg{ width:17px; height:17px; }
  .ask--hdr .ask__in{ font-size:15px; }
  .hdr.show-ask .ask--hdr{ opacity:1; pointer-events:auto; scale:1; }
}
.ask-hint{ display:inline-flex; align-items:center; gap:6px; color:var(--text-2); }
.ask-hint svg{ width:14px; height:14px; color:var(--lime); }

/* ───── Лента: пилюли липкие, пока идут хиты и сетка ───── */
.cats{ position:sticky; top:var(--hdr); z-index:30; margin-top:8px; }
.cats::before{ content:""; position:absolute; inset:0; z-index:-1; opacity:0; transition:opacity var(--dur-slow) var(--ease-out);
  background:rgba(11,12,14,.6); -webkit-backdrop-filter:blur(14px) saturate(160%); backdrop-filter:blur(14px) saturate(160%); box-shadow:inset 0 -1px 0 var(--line); }
.cats.is-stuck::before{ opacity:1; }
.feed{ position:relative; }

/* ───── Хиты (MISE) ───── */
.hits .sec__head{ margin-bottom:12px; }
.hits__stage{ position:relative; }
.hits__word{ position:absolute; left:0; right:0; top:0; z-index:0; color:#40464C; white-space:nowrap; text-align:center; pointer-events:none; overflow:hidden; }
.hits__word span{ display:inline-block; }
.hits__word::after{ content:""; }
.hits__track{ position:relative; z-index:1; display:flex; gap:8px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scrollbar-width:none;
  padding:78px calc(50% - 120px) 28px; outline:none; }
.hits__track::-webkit-scrollbar{ display:none; }
.hits .card{ flex:none; width:240px; scroll-snap-align:center; }
.hits .card.is-center{ box-shadow:var(--sh-float); }
.hits .card.is-center .card__plate{ background:linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.04) 55%), rgba(12,13,15,.3);
  -webkit-backdrop-filter:blur(18px) saturate(180%); backdrop-filter:blur(18px) saturate(180%); box-shadow:inset 0 1px 0 rgba(255,255,255,.45), inset 0 -1px 0 rgba(255,255,255,.08), 0 10px 30px -10px rgba(0,0,0,.5); }
.hits .card.is-center .card__plate::before{ content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none;
  background:linear-gradient(140deg, rgba(255,255,255,.6), rgba(255,255,255,.08) 45%, rgba(255,255,255,.28));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; }
.hits .card.is-center .card__name{ text-shadow:0 1px 8px rgba(0,0,0,.45); }
.hits .card{ scale:var(--hs,1); opacity:var(--ho,1); }
@supports (animation-timeline: view()){
  .has-motion .hits .card{ animation:hit linear both; animation-timeline:view(inline); animation-range:cover; }
  @keyframes hit{ 0%,100%{ scale:.84; opacity:.55; } 50%{ scale:1; opacity:1; } }
  .has-motion .hits{ timeline-scope:--hits; }
  .has-motion .hits__track{ scroll-timeline:--hits inline; }
  .has-motion .hits__word span{ animation:wordShift linear both; animation-timeline:--hits; }
  @keyframes wordShift{ from{ translate:12% 0; } to{ translate:-22% 0; } }
}
.has-motion .hits__word{ clip-path:inset(0 0 100% 0); transition:clip-path var(--dur-slower) var(--ease-out); }
.has-motion .hits__word.in{ clip-path:inset(0); }
.hits__word .w-d{ display:none; }
.hits__foot{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.hits__arrows{ display:flex; gap:8px; }
.hits__arrows .ibtn[disabled]{ opacity:.35; cursor:default; }
.more-link{ display:inline-flex; align-items:center; gap:6px; height:40px; padding:0 16px; border-radius:999px; background:var(--lime-tint); color:var(--lime); font-size:15px; font-weight:600;
  transition:background var(--dur-base) var(--ease-out); }
.more-link:hover{ background:rgba(209,254,23,.2); }
@media (min-width:900px){
  .hits__track{ gap:12px; padding:150px calc(50% - 160px) 40px; }
  .hits .card{ width:320px; }

  .hits__word .w-m{ display:none; } .hits__word .w-d{ display:inline; }
}

/* ───── Сетка кадров (higgsfield.ai) ───── */
.grid{ columns:2; column-gap:8px; }
.grid .card{ break-inside:avoid; margin-bottom:8px; width:100%; }
.grid__more{ display:flex; justify-content:center; margin-top:16px; }
.grid__count{ white-space:nowrap; padding-bottom:4px; }
.grid.is-out .card{ opacity:0; transition:opacity var(--dur-fast) var(--ease-in); }
.has-motion .grid .card.enter{ animation:fadeIn var(--dur-base) var(--ease-out) both; animation-delay:calc(var(--e,0) * 30ms); }
@media (min-width:600px){ .grid{ columns:3; } }
@media (min-width:900px){ .grid{ columns:4; } }
@media (min-width:1200px){ .grid{ columns:5; } }

/* ───── Как это работает ───── */
.sec__title{ margin-bottom:24px; }
.steps{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.step{ background:var(--s1); border-radius:var(--r-card); overflow:hidden; }
.step__m{ position:relative; display:block; aspect-ratio:16/10; overflow:hidden; background:var(--s2); }
.step__m img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 28%; }
.step__t{ display:flex; align-items:center; gap:14px; padding:14px 16px 16px; }
.step__t b{ display:block; }
.step__t .t-cap{ display:block; margin-top:2px; }
.step__n{ color:var(--text-3); min-width:1.6em; }
.step__m--pick .card__plate{ left:auto; width:min(290px, calc(100% - 16px)); }
.plain{ filter:saturate(.12) contrast(.8) brightness(1.2); }
.step__chip{ position:absolute; left:8px; top:8px; }
/* M11 в миниатюре: сканирующая полоса */
.scan{ position:absolute; inset:0; pointer-events:none; }
.scan::before{ content:""; position:absolute; left:0; right:0; top:-40px; height:40px; background:linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,.16)); }
.scan::after{ content:""; position:absolute; left:0; right:0; top:0; height:1px; background:rgba(255,255,255,.7); }
.has-motion .scan{ animation:scanY 1400ms linear infinite; }
@keyframes scanY{ from{ transform:translateY(0); } to{ transform:translateY(100%); } }
/* M9 в миниатюре: шторка до/после */
@property --p{ syntax:'<percentage>'; inherits:true; initial-value:50%; }
.step__m--ba .ba-before{ filter:saturate(.12) contrast(.8) brightness(1.2); clip-path:inset(0 calc(100% - var(--p)) 0 0); }
.ba-line{ position:absolute; top:0; bottom:0; left:var(--p); width:2px; margin-left:-1px; background:rgba(255,255,255,.85); }
.ba-line .bubble{ position:absolute; top:50%; left:50%; width:36px; height:36px; translate:-50% -50%; }
.ba-l{ position:absolute; left:8px; top:8px; } .ba-r{ position:absolute; right:8px; top:8px; }
.has-motion .step__m--ba{ animation:baLoop 5s var(--ease-in-out) infinite; }
@keyframes baLoop{ 0%,100%{ --p:50%; } 30%{ --p:84%; } 65%{ --p:16%; } }
@media (min-width:900px){
  .steps{ grid-template-columns:repeat(3,1fr); gap:24px; }
  .step__m{ aspect-ratio:4/5; }
  .step__t{ padding:18px 20px 20px; }
}

/* ───── Цены одним экраном ───── */
.plans{ display:grid; gap:8px; }
.plan{ position:relative; isolation:isolate; background:var(--s2); border-radius:var(--r-card); padding:16px; box-shadow:inset 0 0 0 1px var(--line); }
.plan__row{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.plan__sub{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:6px; min-height:22px; }
.plan__best{ font-style:normal; margin-left:8px; display:inline-flex; align-items:center; height:22px; padding:0 8px; border-radius:999px; background:var(--s3); color:var(--text); font-size:12px; font-weight:500; }
.plan__tag,.plan__dash,.plan__line,.plan:not(.plan--try) .plan__btn{ display:none; }
.plan--try{ box-shadow:inset 0 0 0 1px var(--lime-line); }
.plan--try .plan__line{ display:block; margin:10px 0 12px; color:var(--text-2); font-size:15px; }
.plan__glow{ position:absolute; left:8%; right:8%; bottom:-36px; height:140px; z-index:-1; pointer-events:none; background:radial-gradient(closest-side, var(--lime-glow), transparent); filter:blur(40px); }
.prices__notes{ margin-top:16px; display:grid; gap:6px; }
.prices__notes p{ margin:0; font-size:15px; color:var(--text-2); }
.prices__notes b{ color:var(--text); font-weight:500; }
@media (min-width:900px){
  .prices{ min-height:100svh; display:flex; flex-direction:column; justify-content:center; padding-bottom:48px; }
  .prices .sec__title{ text-align:center; margin-bottom:48px; }
  .plans{ grid-template-columns:repeat(3, 360px); justify-content:center; gap:24px; }
  .plan{ display:flex; flex-direction:column; min-height:440px; padding:28px; }
  .plan__tag{ display:flex; align-items:center; color:var(--text-3); margin-bottom:28px; }
  .plan__row{ flex-direction:column-reverse; align-items:flex-start; gap:10px; }
  .plan__row .d3:last-child{ font-size:88px; line-height:.86; }
  .plan__row .d3:first-child{ font-family:var(--font-t); font-stretch:normal; font-weight:500; font-size:22px; text-transform:none; letter-spacing:0; color:var(--text); }
  .plan__sub{ margin-top:4px; }
  .plan__sub .btn{ display:none; }
  .plan__dash{ display:block; margin:24px 0 16px; }
  .plan__line{ display:block; margin:0; color:var(--text-2); font-size:16px; }
  .plan .plan__btn,.plan:not(.plan--try) .plan__btn{ display:flex; margin-top:auto; }
  .plan--try .plan__line{ margin:0; }
  .plan__glow{ bottom:-60px; height:200px; }
  .prices__notes{ text-align:center; margin-top:32px; }
}

/* ───── Доверие ───── */
.facts{ list-style:none; margin:0; padding:0; border-top:1px dashed var(--line-dash); }
.fact{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:16px; align-items:center; min-height:72px; padding:14px 0; border-bottom:1px dashed var(--line-dash); }
.fact b{ font-weight:800; }
@media (min-width:900px){
  .facts{ display:grid; grid-template-columns:repeat(4,1fr); border-top:0; }
  .fact{ grid-template-columns:1fr; align-content:start; gap:14px; padding:4px 24px 0; border-bottom:0; border-left:1px dashed var(--line-dash); min-height:160px; }
  .fact:first-child{ border-left:0; padding-left:0; }
  .fact b{ font-size:36px; }
}

/* ───── Телефон: нижняя панель есть, отступ под неё ───── */
.dock--ask{ padding-top:20px; }
@media (max-width:899px){ .foot{ padding-bottom:88px; } }
@media (min-width:900px){ .dock--ask{ display:none; } }

/* ───── Компьютер: hero ───── */
@media (min-width:900px){
  .hero{ display:block; padding:0; }
  .const{ position:absolute; inset:0; height:auto; margin:0; min-height:0; }
  .cf--d{ display:block; }
  .cf--1{ --x:4%;  --y:17%; --w:11.5%; --r:-6deg; }
  .cf--2{ --x:19.5%; --y:7%; --w:8%; --r:4deg; }
  .cf--3{ --x:77.5%; --y:3%;  --w:13%; --r:3deg; }
  .cf--4{ --x:91%; --y:40%; --w:10.5%; --r:-5deg; }
  .cf--5{ --x:79%; --y:63%; --w:11%; --r:4deg; }
  .cf--6{ --x:7%;  --y:58%; --w:11%; --r:3deg; }
  .cf--7{ --x:21%; --y:77%; --w:8%; --r:-4deg; }
  .cf--8{ --x:64%; --y:81%; --w:8.5%; --r:-3deg; }
  .cf--9{ --x:58%; --y:3%;  --w:7%; --r:-4deg; }
  .cf--lens{ --lr:62px; }
  .orbs{ display:block; position:absolute; z-index:4; left:68%; top:3%; width:190px; height:190px; pointer-events:none;
    transform:translate(calc(var(--mx,0) * var(--depth) * 260px), calc(var(--my,0) * var(--depth) * 260px)); transition:transform var(--dur-slow) var(--ease-out); }
  .orb{ position:absolute; }
  .orb--a{ width:132px; height:132px; left:0; top:36px; }
  .orb--b{ width:78px; height:78px; left:104px; top:0; }
  .orb--c{ width:46px; height:46px; left:118px; top:132px; }
  .has-motion .orb{ animation:orbFloat 11s var(--ease-in-out) infinite alternate; }
  .has-motion .orb--b{ animation-duration:9s; animation-delay:-3s; } .has-motion .orb--c{ animation-duration:13s; animation-delay:-6s; }
  @keyframes orbFloat{ to{ transform:translate(10px,-14px); } }
  @supports (animation-timeline: scroll()){ .has-motion .orbs{ animation:drift linear both; animation-timeline:scroll(root); animation-range:0 100vh; } }
  .cf__tag{ display:inline-flex; align-items:center; position:absolute; left:10px; bottom:10px; height:26px; padding:0 10px; white-space:nowrap; border-radius:var(--r-in); color:var(--text); }
  .hero__body{ position:absolute; left:50%; top:50%; translate:-50% -42%; width:min(1000px, 66vw); }
  .hero__h{ max-width:none; }
  .hero__ask{ margin-top:36px; }
  .hero__note{ margin-top:14px; }
}