/* ============================================================================
   Лендинг «Нормы». Всё, что живёт только на главной: герой-экран, липкий
   разбор функций, тарифы с падающей ценой, магазины, блог, контакты.
   Правило: любое движение отвечает на действие пользователя (скролл, курсор),
   декоративных «сам по себе» анимаций почти нет — их шум мешает читать цифры.
   ========================================================================= */

/* Анимируемая переменная для колец: без @property conic-gradient не переходит плавно */
@property --v{syntax:'<number>';initial-value:0;inherits:false}

/* ---------------------------------------------------------------- герой -- */
.hero{
  position:relative;min-height:calc(100svh - var(--hdr-h) - var(--cc-h, 0px));display:flex;align-items:center;
  padding:clamp(28px,6vh,72px) 0 clamp(48px,8vh,90px);overflow:clip;
}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  column-gap:clamp(28px,5vw,72px);row-gap:clamp(20px,3vh,36px);
  grid-template-areas:"text device" "meta meta";align-items:center;width:100%}
.hero-text{grid-area:text}
.device{grid-area:device}
/* Пятно под курсором — герой «следит» за мышью. Координаты ставит JS. */
.hero-spot{
  position:absolute;inset:0;pointer-events:none;z-index:0;opacity:0;transition:opacity .8s var(--ease);
  background:radial-gradient(520px circle at var(--hx,50%) var(--hy,40%),rgba(224,58,88,.16),transparent 65%);
}
.hero:hover .hero-spot{opacity:1}
.hero>*{position:relative;z-index:1}

.hero-badge{
  display:inline-flex;align-items:center;gap:10px;border:1px solid rgba(147,187,82,.42);background:rgba(147,187,82,.08);
  color:var(--fist);border-radius:999px;padding:8px 16px 8px 12px;font-size:14px;font-weight:500;margin-bottom:26px;
}
.hero-badge i{width:8px;height:8px;border-radius:50%;background:var(--fist);position:relative;flex:0 0 8px}
.hero-badge i::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1px solid var(--fist);opacity:.6;animation:ping 2.4s var(--ease-io) infinite}
@keyframes ping{0%{transform:scale(.6);opacity:.7}70%,100%{transform:scale(1.5);opacity:0}}

.hero h1{margin:0 0 26px;font-size:clamp(32px,5.2vw,58px);line-height:1}
.hero h1 em{font-style:normal;color:var(--granat)}
.hero h1 .thin{font-weight:500;color:var(--ink2)}
.hero-lead{font-size:clamp(17px,1.5vw,20px);color:var(--ink2);max-width:52ch;margin:0 0 34px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.hero-meta{grid-area:meta;display:flex;gap:clamp(22px,5vw,64px);margin-top:clamp(28px,4vh,48px);flex-wrap:wrap;border-top:1px solid var(--line-soft);padding-top:24px}
.hero-meta b{display:block;font-family:var(--mono);font-size:clamp(20px,2.2vw,27px);font-weight:500;color:var(--ink);line-height:1.2}
.hero-meta b s{text-decoration:line-through;color:var(--ink3);text-decoration-color:var(--granat);margin-right:8px}
.hero-meta span{font-size:13px;color:var(--ink3);display:block;margin-top:4px}

/* ------- макет экрана приложения (герой) -------
   Тот же язык, что в приложении: кольцо остатка, полосы БЖУ, лента недели. */
.device{position:relative;perspective:1400px;padding:10px}
.device-inner{
  transform:rotateX(var(--ty,0deg)) rotateY(var(--tx,0deg)) translateY(var(--sy,0px));
  transform-style:preserve-3d;transition:transform .5s var(--ease);
}
.dev-glow{position:absolute;inset:6% 10%;border-radius:50%;background:radial-gradient(closest-side,rgba(224,58,88,.32),transparent 72%);filter:blur(34px);z-index:0}
.dev-card{
  position:relative;z-index:1;background:linear-gradient(168deg,#2A1F30,#1D1521);border:1px solid var(--line);
  border-radius:var(--r-xl);padding:24px;box-shadow:var(--shadow);
}
.dev-card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(160deg,rgba(255,255,255,.09),transparent 38%)}
.dev-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:18px}
.dev-head b{font-family:var(--display);font-weight:600;font-size:22px;letter-spacing:-.02em}
.dev-week{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:20px}
.dev-week span{text-align:center;padding:8px 0;border-radius:12px;font-family:var(--mono);font-size:13px;color:var(--ink3);position:relative}
.dev-week span small{display:block;font-family:var(--text);font-size:10px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:2px;color:var(--ink3)}
.dev-week span.on{background:#F3ECF1;color:#2B1D2B}
.dev-week span.on small{color:#6E5C6C}
.dev-week span.done::after{content:"";position:absolute;left:50%;bottom:3px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--fist)}
.dev-body{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:center;
  background:rgba(22,16,22,.5);border:1px solid var(--line-soft);border-radius:var(--r);padding:18px}
.dring{
  --v:0;width:104px;height:104px;flex:0 0 104px;border-radius:50%;display:grid;place-items:center;
  background:conic-gradient(from -90deg,var(--granat) calc(var(--v)*1%),rgba(255,255,255,.07) 0);
  transition:--v 1.6s var(--ease);
}
.dring>div{width:82px;height:82px;border-radius:50%;background:#1D1521;display:grid;place-content:center;text-align:center}
.dring b{font-family:var(--mono);font-size:23px;font-weight:500;line-height:1;display:block}
.dring span{font-size:10px;color:var(--ink3)}
.dev-macros{display:grid;gap:11px;min-width:0}
.dev-macro{font-size:13px}
.dev-macro .t{display:flex;justify-content:space-between;gap:8px;margin-bottom:5px;color:var(--ink2)}
.dev-macro .t i{font-family:var(--mono);font-style:normal;color:var(--ink)}
.dev-macro .track{height:6px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden}
.dev-macro .track b{display:block;height:100%;border-radius:99px;width:0;transition:width 1.3s var(--ease);transition-delay:var(--d,0ms)}
.in .dev-macro .track b{width:var(--w,50%)}
.dev-macro.p .track b{background:var(--granat)}
.dev-macro.f .track b{background:var(--kuraga)}
.dev-macro.c .track b{background:var(--fist)}
.dev-foot{display:flex;align-items:center;gap:12px;margin-top:14px;padding:14px 16px;border-radius:var(--r);
  background:rgba(232,154,60,.08);border:1px solid rgba(232,154,60,.22)}
.dev-foot .ic{width:34px;height:34px;flex:0 0 34px;border-radius:11px;background:rgba(232,154,60,.18);display:grid;place-items:center;color:var(--kuraga)}
.dev-foot div{min-width:0}
.dev-foot b{display:block;font-size:14px;font-weight:600}
.dev-foot span{font-size:12px;color:var(--ink3);font-family:var(--mono)}
/* Плавающие подписи вокруг макета — второй слой параллакса */
.dev-tag{
  position:absolute;z-index:2;display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:999px;
  background:rgba(28,20,30,.9);border:1px solid var(--line);backdrop-filter:blur(10px);font-size:13px;font-weight:500;
  box-shadow:0 14px 34px -20px #000;transform:translateY(calc(var(--sy,0px) * var(--k,1)));white-space:nowrap;
}
.dev-tag i{width:7px;height:7px;border-radius:50%;flex:0 0 7px}
.dev-tag.a{left:14px;top:-18px;--k:-1.5}
.dev-tag.a i{background:var(--fist)}
.dev-tag.b{right:14px;bottom:-18px;--k:1.6}
.dev-tag.b i{background:var(--kuraga)}


.hero-scroll{position:absolute;left:var(--pad);bottom:22px;display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink3);z-index:2}
.hero-scroll i{width:1px;height:34px;background:linear-gradient(var(--ink3),transparent);position:relative;overflow:hidden}
.hero-scroll i::after{content:"";position:absolute;inset:0;background:var(--granat);animation:drop 2.2s var(--ease-io) infinite}
@keyframes drop{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}

@media(max-width:940px){
  .hero{min-height:0;padding-top:20px}
  .hero .wrap{grid-template-columns:1fr;gap:38px;grid-template-areas:"text" "device" "meta"}
  .hero-scroll{display:none}
  .device{order:2;max-width:460px;width:100%;margin:0 auto}
  .hero-meta{margin-top:34px}
}

/* ------------------------------------------------------------- бегущая -- */
.marquee{
  border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);
  padding:20px 0;overflow:hidden;background:rgba(34,24,38,.4);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquee-track{display:flex;width:max-content;animation:slide 38s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
.marquee span{display:inline-flex;align-items:center;gap:16px;padding:0 22px;font-family:var(--display);font-weight:500;
  font-size:clamp(15px,1.6vw,19px);color:var(--ink2);letter-spacing:-.01em;white-space:nowrap}
.marquee span::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--granat);opacity:.75}
.marquee span:nth-child(3n)::after{background:var(--fist)}
.marquee span:nth-child(3n+1)::after{background:var(--kuraga)}

/* ------------------------------------------------------ шапка раздела -- */
.shead{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:end;margin-bottom:clamp(34px,4.5vw,64px)}
.shead h2{margin:0;max-width:20ch}
.shead .lead{margin:16px 0 0}
.shead-idx{font-family:var(--mono);font-size:13px;color:var(--ink3);letter-spacing:.1em;white-space:nowrap;padding-bottom:8px}
@media(max-width:720px){.shead{grid-template-columns:1fr}.shead-idx{display:none}}

/* --------------------------------------------------- функции: липкий -- */
.feat{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(30px,5vw,80px);align-items:start}
.feat-stage{position:sticky;top:calc(var(--hdr-h) + 40px);height:min(66vh,520px);display:flex;flex-direction:column;justify-content:center;
  border:1px solid var(--line);border-radius:var(--r-xl);background:linear-gradient(165deg,#241A29,#1A1220);padding:34px;overflow:hidden}
.feat-stage::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(160deg,rgba(255,255,255,.07),transparent 40%)}
.feat-aura{position:absolute;left:50%;top:42%;width:340px;height:340px;margin:-170px 0 0 -170px;border-radius:50%;
  filter:blur(48px);opacity:.45;transition:background .6s var(--ease);background:rgba(224,58,88,.5)}
.feat-stage.k-fistashka .feat-aura{background:rgba(147,187,82,.45)}
.feat-stage.k-kuraga .feat-aura{background:rgba(232,154,60,.45)}
.feat-frames{position:relative;z-index:1;flex:1;display:grid}
.feat-frame{grid-area:1/1;display:flex;flex-direction:column;justify-content:center;gap:22px;
  opacity:0;transform:translateY(18px) scale(.98);transition:opacity .5s var(--ease),transform .6s var(--ease);pointer-events:none}
.feat-frame.on{opacity:1;transform:none}
.feat-frame .n{font-family:var(--mono);font-size:13px;color:var(--ink3);letter-spacing:.14em}
.feat-frame .ico{width:88px;height:88px;border-radius:28px;display:grid;place-items:center;
  background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--granat)}
.feat-frame .ico svg{width:44px;height:44px}
.feat-frame.k-fistashka .ico{color:var(--fist)}
.feat-frame.k-kuraga .ico{color:var(--kuraga)}
.feat-frame h3{font-size:clamp(24px,2.8vw,34px);margin:0;letter-spacing:-.03em}
.feat-frame .readout{font-family:var(--mono);font-size:13px;color:var(--ink2);border-top:1px dashed var(--line);padding-top:16px;letter-spacing:.02em}
.feat-bar{position:relative;z-index:1;height:2px;background:var(--line);border-radius:99px;margin-top:26px;overflow:hidden}
.feat-bar i{display:block;height:100%;width:var(--fp,0%);background:linear-gradient(90deg,var(--granat),var(--kuraga));transition:width .5s var(--ease)}

.feat-list{display:grid;gap:2px}
.feat-item{
  position:relative;padding:30px 26px 30px 66px;border-bottom:1px solid var(--line-soft);cursor:default;
  transition:background .45s var(--ease),padding .45s var(--ease);border-radius:var(--r);
}
.feat-item:first-child{border-top:1px solid var(--line-soft)}
.feat-item::before{
  content:attr(data-n);position:absolute;left:22px;top:34px;font-family:var(--mono);font-size:12px;color:var(--ink3);
  letter-spacing:.06em;transition:color .35s
}
.feat-item::after{
  content:"";position:absolute;left:0;top:22px;bottom:22px;width:2px;border-radius:2px;background:var(--granat);
  transform:scaleY(0);transform-origin:top;transition:transform .55s var(--ease)
}
.feat-item.on{background:rgba(255,255,255,.03)}
.feat-item.on::after{transform:scaleY(1)}
.feat-item.on::before{color:var(--granat)}
.feat-item h3{margin:0 0 10px;font-size:clamp(19px,2vw,24px);color:var(--ink2);transition:color .35s var(--ease)}
.feat-item.on h3{color:var(--ink)}
.feat-item p{margin:0;color:var(--ink3);max-width:52ch;transition:color .35s var(--ease)}
.feat-item.on p{color:var(--ink2)}
.feat-item .mini{display:none}
@media(max-width:940px){
  .feat{grid-template-columns:1fr;gap:0}
  .feat-stage{display:none}
  .feat-item{padding:26px 0 26px 54px}
  .feat-item::before{left:0;top:30px}
  .feat-item::after{left:-18px}
  .feat-item .mini{display:grid;place-items:center;position:absolute;left:0;top:26px;width:38px;height:38px;border-radius:12px;
    background:var(--card2);border:1px solid var(--line);color:var(--kuraga)}
  .feat-item .mini svg{width:20px;height:20px}
  .feat-item::before{display:none}
  .feat-item::after{display:none}
}

/* -------------------------------------------------------------- роли -- */
.roles{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.role-card{
  position:relative;overflow:hidden;background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);
  padding:32px 30px 34px;transition:transform .5s var(--ease),border-color .4s,background .4s;
}
.role-card::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--granat);
  transform:scaleX(.16);transform-origin:left;transition:transform .6s var(--ease)
}
.role-card.fistashka::before{background:var(--fist)}
.role-card.kuraga::before{background:var(--kuraga)}
.role-card:hover{transform:translateY(-6px);border-color:var(--ink3);background:var(--card2)}
.role-card:hover::before{transform:scaleX(1)}
.role-card .rn{font-family:var(--mono);font-size:12px;color:var(--ink3);letter-spacing:.14em}
.role-card h3{margin:16px 0 6px;font-size:clamp(24px,2.4vw,30px)}
.role-card .rl{color:var(--ink3);font-size:14px;margin:0 0 22px}
.role-card ul{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.role-card li{position:relative;padding-left:26px;color:var(--ink2);font-size:15px;line-height:1.5}
.role-card li::before{content:"";position:absolute;left:0;top:9px;width:12px;height:2px;border-radius:2px;background:var(--granat);opacity:.8}
.role-card.fistashka li::before{background:var(--fist)}
.role-card.kuraga li::before{background:var(--kuraga)}
@media(max-width:900px){.roles{grid-template-columns:1fr}}

/* ------------------------------------------------------------ тарифы -- */
.test-banner{
  display:grid;grid-template-columns:auto 1fr auto;gap:26px;align-items:center;
  border:1px dashed rgba(147,187,82,.5);background:rgba(147,187,82,.07);border-radius:var(--r-l);
  padding:26px 30px;margin-bottom:34px;
}
.test-banner .tb-ic{width:52px;height:52px;border-radius:16px;background:rgba(147,187,82,.16);display:grid;place-items:center;color:var(--fist);flex:0 0 52px}
.test-banner b{display:block;font-family:var(--display);font-weight:600;font-size:clamp(18px,2vw,23px);letter-spacing:-.02em;margin-bottom:6px}
.test-banner p{margin:0;color:var(--ink2);font-size:15px;max-width:72ch}
.test-banner .tb-free{font-family:var(--mono);font-size:clamp(22px,2.6vw,30px);color:var(--fist);white-space:nowrap}
@media(max-width:820px){
  .test-banner{display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:24px}
  .test-banner .tb-free{font-size:26px}
}

.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch}
.plan{
  position:relative;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-l);padding:30px;transition:transform .5s var(--ease),border-color .4s,background .4s;
}
.plan:hover{transform:translateY(-5px);border-color:var(--ink3)}
.plan .pk{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3)}
.plan h3{margin:14px 0 18px;font-size:26px}
.plan .pp{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.plan .pp b{font-family:var(--mono);font-size:clamp(38px,4.6vw,54px);font-weight:500;line-height:1;letter-spacing:-.04em}
.plan .pp>span{font-family:var(--mono);font-size:15px;color:var(--ink3)}
.plan .pp b span{font-size:inherit;color:inherit;font-family:inherit}
.plan .pp>s{font-family:var(--mono);font-size:20px;color:var(--ink3);text-decoration-color:var(--granat)}
.plan .pn{color:var(--ink3);font-size:14px;margin:0 0 22px;min-height:42px}
.plan ul{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:12px;flex:1;align-content:start}
.plan li{position:relative;padding-left:24px;color:var(--ink2);font-size:15px}
.plan li::before{content:"";position:absolute;left:0;top:8px;width:8px;height:8px;border-radius:50%;border:1.5px solid var(--ink3)}
.plan.granat li::before{border-color:var(--granat)}
.plan.fistashka li::before{border-color:var(--fist)}
.plan.kuraga li::before{border-color:var(--kuraga)}
.plan.featured{background:linear-gradient(168deg,#2A2035,#1D1521);border-color:rgba(147,187,82,.4)}
.plan.featured .pp b{color:var(--fist)}
.plan-flag{position:absolute;left:24px;top:-11px;background:var(--fist);color:#161016;font:600 12px var(--text);
  padding:5px 14px;border-radius:999px;letter-spacing:.02em}
/* Кольцо в тарифе: заполняется по скроллу, цена падает синхронно (JS ставит --v и текст) */
.plan-ring{--v:0;position:absolute;right:24px;top:22px;width:68px;height:68px;border-radius:50%;display:grid;place-items:center;
  background:conic-gradient(from -90deg,var(--fist) calc(var(--v)*1%),rgba(255,255,255,.08) 0)}
.plan-ring>i{width:54px;height:54px;border-radius:50%;background:#1D1521;display:grid;place-items:center;
  font-family:var(--mono);font-style:normal;font-size:12px;color:var(--fist)}
@media(max-width:900px){.plans{grid-template-columns:1fr}.plan-flag{left:22px}}

/* ---------------------------------------------------------- магазины -- */
.stores{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;max-width:640px}
.store{
  display:flex;align-items:center;gap:16px;padding:20px 24px;border-radius:var(--r-l);
  border:1px solid var(--line);background:var(--card);position:relative;overflow:hidden;
  transition:border-color .35s,transform .45s var(--ease),background .35s;
}
.store.soon{opacity:.72;cursor:not-allowed}
.store:not(.soon):hover{border-color:var(--ink3);transform:translateY(-4px);background:var(--card2)}
.store svg{width:30px;height:30px;flex:0 0 30px;color:var(--ink)}
.store b{display:block;font-family:var(--display);font-weight:500;font-size:17px;letter-spacing:-.02em}
.store span{font-size:13px;color:var(--ink3)}
.store .soon-tag{margin-left:auto;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--kuraga);border:1px solid rgba(232,154,60,.4);border-radius:999px;padding:5px 11px;white-space:nowrap}
@media(max-width:640px){.stores{grid-template-columns:1fr}}

/* -------------------------------------------------------------- блог -- */
.posts{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
.post{
  display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);
  padding:26px;transition:border-color .35s,transform .45s var(--ease),background .35s;min-height:230px;
}
.post:hover{border-color:var(--ink3);transform:translateY(-4px);background:var(--card2)}
.post .pm{display:flex;gap:12px;align-items:center;font-family:var(--mono);font-size:12px;color:var(--ink3);margin-bottom:16px}
.post .pm .dot{width:3px;height:3px;border-radius:50%;background:var(--ink3)}
.post h3{margin:0 0 12px;font-size:20px;line-height:1.25}
.post p{margin:0;color:var(--ink3);font-size:15px;flex:1}
.post .more{margin-top:20px;font-family:var(--mono);font-size:13px;color:var(--fist)}
.empty{
  border:1px dashed var(--line);border-radius:var(--r-l);padding:clamp(36px,6vw,64px);text-align:center;background:rgba(34,24,38,.35);
}
.empty .big-e{font-family:var(--display);font-weight:600;font-size:clamp(22px,3vw,30px);letter-spacing:-.03em;margin-bottom:12px}
.empty p{color:var(--ink3);max-width:52ch;margin:0 auto 24px}

/* ---------------------------------------------------------- контакты -- */
.contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:clamp(28px,5vw,64px);align-items:start}
.contact-mail{
  display:inline-flex;align-items:center;gap:14px;font-family:var(--display);font-weight:600;letter-spacing:-.03em;
  font-size:clamp(22px,3.4vw,40px);color:var(--ink);margin:0 0 12px;position:relative;
}
.contact-mail::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;background:var(--granat);
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.contact-mail:hover{color:var(--ink)}
.contact-mail:hover::after{transform:scaleX(1)}
.contact-list{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:0;border-top:1px solid var(--line-soft)}
.contact-list li{display:grid;grid-template-columns:150px 1fr;gap:18px;padding:16px 0;border-bottom:1px solid var(--line-soft);font-size:15px}
.contact-list b{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);font-weight:500}
.contact-list span{color:var(--ink2)}
@media(max-width:820px){.contact{grid-template-columns:1fr}.contact-list li{grid-template-columns:1fr;gap:4px}}

/* -------------------------------------------------------- разделитель -- */
.rule{height:1px;margin:clamp(24px,4vw,48px) 0;background:linear-gradient(90deg,transparent,var(--line),transparent);transform:scaleX(0);transform-origin:center;transition:transform 1.1s var(--ease)}
.rule.in{transform:scaleX(1)}

/* Крупная цитата-утверждение между разделами */
.claim{padding:clamp(60px,9vw,120px) 0;text-align:center}
.claim p{font-family:var(--display);font-weight:600;font-size:clamp(24px,4.2vw,50px);line-height:1.12;letter-spacing:-.035em;
  max-width:19ch;margin:0 auto;color:var(--ink3)}
.claim p b{color:var(--ink);font-weight:600}
.claim p em{font-style:normal;color:var(--granat)}


/* ------------------------------------------------------------ поддержка -- */
.support-top{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:38px}
.support-card{display:flex;flex-direction:column;gap:8px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-l);padding:24px;transition:border-color .3s,transform .45s var(--ease),background .3s}
a.support-card:hover{border-color:var(--ink3);transform:translateY(-4px);background:var(--card2)}
.support-card .sc-k{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3)}
.support-card b{font-family:var(--display);font-weight:600;font-size:clamp(17px,1.8vw,21px);letter-spacing:-.025em;word-break:break-word}
.support-card .sc-n{font-size:14px;color:var(--ink3);line-height:1.5}
@media(max-width:820px){.support-top{grid-template-columns:1fr}}

/* -------------------------------------------------- экраны приложения -- */
.shots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
.shot{margin:0;display:flex;flex-direction:column;gap:16px}
.shot img{width:100%;height:auto;border-radius:var(--r-l);border:1px solid var(--line);background:var(--card);
  box-shadow:var(--shadow);transition:transform .5s var(--ease),border-color .4s}
.shot:hover img{transform:translateY(-6px);border-color:var(--ink3)}
.shot figcaption b{display:block;font-family:var(--display);font-weight:600;font-size:17px;letter-spacing:-.02em;margin-bottom:6px}
.shot figcaption span{font-size:14px;color:var(--ink3);line-height:1.55}
@media(max-width:900px){.shots{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}}
/* На телефоне шесть экранов в столбик растягивают страницу на десять тысяч пикселей.
   Делаем горизонтальную ленту с прилипанием — листается пальцем, страница короткая. */
@media(max-width:560px){
  .shots{display:flex;grid-template-columns:none;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
    scroll-padding-left:var(--pad);margin:0 calc(var(--pad) * -1);padding:4px var(--pad) 10px;
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .shots::-webkit-scrollbar{display:none}
  .shot{flex:0 0 74%;scroll-snap-align:start;gap:12px}
  .shot img{border-radius:var(--r)}
  .shot figcaption b{font-size:16px}
  .shot figcaption span{font-size:13.5px}
}

/* ------------------------------------------------------- лестница цены -- */
/* Пять ступеней целиком: «до 800 ₽» без картины ступеней читается как уловка. */
.ladder{border:1px solid var(--line);border-radius:var(--r-l);background:rgba(34,24,38,.5);padding:22px 24px}
.ladder-head{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;align-items:baseline;margin-bottom:18px}
.ladder-rows{display:grid;gap:7px}
.ladder-row{position:relative;display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:13px 18px;border-radius:var(--r-s);background:var(--card2);border:1px solid var(--line-soft);overflow:hidden}
.ladder-row .lr-bar{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,rgba(224,58,88,.26),rgba(224,58,88,.04));z-index:0}
.ladder-row.min .lr-bar{background:linear-gradient(90deg,rgba(147,187,82,.3),rgba(147,187,82,.05))}
.ladder-row>span{position:relative;z-index:1}
.ladder-row .lr-share{font-weight:500;font-size:15px}
.ladder-row .lr-price{font-size:18px}
.ladder-row.min .lr-price{color:var(--fist)}
.ladder-row.max .lr-price{color:var(--granat)}
@media(max-width:520px){.ladder{padding:18px}.ladder-row{padding:12px 14px}.ladder-row .lr-share{font-size:14px}}

.swipe-hint{display:none}
@media(max-width:560px){.swipe-hint{display:inline;color:var(--ink3)}}