/* ============================================================
   SECTIONS — hero §4 (W2/W6 feed); секции §5.1–5.6 (W3) + motion W6.
   ============================================================ */

main{display:block;position:relative;z-index:1}
footer{position:relative;z-index:1}

/* ================= COSMOS + AMBIENT (W6.1) ================= */
.cosmos{
  /* Больше вьюпорта — запас при tilt/scale, без щелей по краям */
  position:fixed;inset:-12%;z-index:0;pointer-events:none;overflow:hidden;
  will-change:transform;
  background:
    radial-gradient(120% 80% at 10% -10%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 55%),
    radial-gradient(90% 70% at 90% 10%,color-mix(in srgb,var(--accent) 10%,transparent),transparent 50%),
    radial-gradient(70% 60% at 50% 100%,color-mix(in srgb,var(--accent) 8%,transparent),transparent 55%),
    radial-gradient(140% 100% at 50% 40%,var(--bg),#020408 85%);
}
html[data-mode="day"] .cosmos{
  background:
    radial-gradient(120% 80% at 12% -8%,color-mix(in srgb,var(--accent) 12%,transparent),transparent 52%),
    radial-gradient(90% 70% at 88% 8%,color-mix(in srgb,var(--accent) 8%,transparent),transparent 48%),
    radial-gradient(80% 60% at 50% 110%,color-mix(in srgb,var(--accent) 6%,transparent),transparent 50%),
    radial-gradient(140% 100% at 50% 40%,var(--bg),color-mix(in srgb,var(--bg) 70%,#c8d0d8) 90%);
}
.cosmos::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:url('../img/grain.webp');background-repeat:repeat;background-size:128px 128px;
  opacity:0;
}
html[data-mode="night"] .cosmos::after{opacity:.045}
html[data-mode="day"] .cosmos::after{opacity:.02}
.cosmos-nebula{
  position:absolute;inset:-10%;
  background:
    radial-gradient(40% 30% at 30% 40%,color-mix(in srgb,var(--accent) 9%,transparent),transparent),
    radial-gradient(35% 28% at 70% 60%,color-mix(in srgb,var(--accent) 7%,transparent),transparent);
  filter:blur(40px);opacity:.85;
  animation:nebulaDrift 18s ease-in-out infinite alternate;
}
@keyframes nebulaDrift{
  from{transform:translate3d(-2%,1%,0) scale(1)}
  to{transform:translate3d(3%,-2%,0) scale(1.06)}
}
.cosmos-stars{position:absolute;inset:0}
.cosmos-star{
  position:absolute;border-radius:50%;background:#fff;
  box-shadow:0 0 4px rgba(255,255,255,.35);
  will-change:transform;
}
html[data-mode="day"] .cosmos-star{
  background:color-mix(in srgb,var(--text) 55%,#fff);
  box-shadow:none;opacity:.35!important;
}

.ambient-layer{
  position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden;
  transition:opacity var(--dur-standard) var(--ease-enter);
}
#decoLayer{z-index:0}
#maskField{z-index:0}
#cometLayer{z-index:0}
.deco-item{
  position:absolute;will-change:transform;user-select:none;
  opacity:.22;filter:saturate(.9) brightness(1.05);
}
html[data-mode="day"] .deco-item{opacity:.16}
html[data-mode="night"] .deco-item{opacity:.28}
.mask-field .mask-float{
  position:absolute;left:0;top:0;will-change:transform;
  pointer-events:none;user-select:none;-webkit-user-drag:none;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.35));
}
html[data-mode="day"] .mask-field .mask-float{
  filter:drop-shadow(0 4px 12px rgba(0,0,0,.12));
}
.comet-field .comet-sticker{
  position:absolute;left:0;top:0;will-change:transform,opacity;
  pointer-events:none;user-select:none;-webkit-user-drag:none;
  filter:drop-shadow(0 0 18px color-mix(in srgb,var(--accent) 45%,transparent));
  opacity:0;
}
html[data-mode="day"] .comet-field .comet-sticker{
  filter:drop-shadow(0 4px 14px rgba(0,0,0,.18));
}

/* Контент дышит со скроллом (совместимо с .reveal) */
[data-parallax]{will-change:transform}
[data-parallax]:not(.reveal){transform:translate3d(0,var(--py,0px),0)}
.reveal[data-parallax]{
  transform:translate3d(0,calc(12px + var(--py,0px)),0);
}
.reveal.reveal-x-left[data-parallax]{
  transform:translate3d(-32px,calc(8px + var(--py,0px)),0);
}
.reveal.reveal-x-right[data-parallax]{
  transform:translate3d(32px,calc(8px + var(--py,0px)),0);
}
.reveal[data-parallax].in,
.reveal.reveal-x-left[data-parallax].in,
.reveal.reveal-x-right[data-parallax].in{
  transform:translate3d(0,var(--py,0px),0);
}
.reveal.reveal-y8[data-parallax]{
  transform:translate3d(0,calc(8px + var(--py,0px)),0);
}
.reveal.reveal-y8[data-parallax].in{
  transform:translate3d(0,var(--py,0px),0);
}
/* Scrim секций без жёстких швов: градиент в прозрачность по краям */
section:not(.hero):not(.contests){
  background:
    linear-gradient(to bottom,
      transparent 0,
      color-mix(in srgb,var(--bg) 62%,transparent) 12%,
      color-mix(in srgb,var(--bg) 62%,transparent) 88%,
      transparent 100%);
}
.step,.feat,.blog-invite,.cta-box{
  transition:transform var(--dur-standard) var(--ease-enter),
              background var(--dur-quick) var(--ease-enter),
              box-shadow var(--dur-standard) var(--ease-enter);
}

/* ================= HERO (§4) ================= */
.hero{padding:0;overflow:visible}
.hero-top{
  padding-top:64px;
  min-height:92vh;
  display:flex;align-items:center;
}
.hero-grid{
  display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;
  width:100%;padding:32px 0 48px;min-width:0;
}
.hero-copy{min-width:0;max-width:100%}

.eyebrow{
  color:var(--text-3);display:inline-block;margin-bottom:16px;
  max-width:100%;white-space:normal;overflow-wrap:anywhere;
}
.eyebrow [data-g]{display:inline}

.hero-h1{margin-bottom:16px}
.hero-h1 .accent{color:var(--accent)}

.hero-sub{
  color:var(--text-2);max-width:460px;margin-bottom:24px;
  white-space:normal;overflow-wrap:anywhere;
}
.hero-sub-mob{display:none}
.hero-cta{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.hero-note{color:var(--text-3);max-width:460px;margin-top:18px}
.hero-note a{color:var(--accent);text-decoration:underline}

/* ---- Телефон: живая лента (W6); bbox экрана прежний; свет витрины только ночь ---- */
.phone-wrap{
  position:relative;display:flex;flex-direction:column;align-items:center;
  justify-content:center;padding:12px 0 0;gap:0;
}
.phone-glow{
  position:absolute;left:50%;top:42%;width:120%;height:90%;
  transform:translate(-50%,-50%);pointer-events:none;z-index:0;
  background:radial-gradient(50% 44% at 50% 42%,color-mix(in srgb,var(--accent) 9%,transparent),transparent 70%);
  opacity:0;
}
html[data-mode="night"] .phone-glow{opacity:1}
.phone-outer{
  width:min(400px,100%);aspect-ratio:2/3;position:relative;z-index:1;isolation:isolate;
  filter:drop-shadow(var(--shadow-phone));
  /* без заливки-«плиты» — иначе ночью виден контейнер вокруг рамки */
  background:transparent;
}
.phone-frame-img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:fill;
  pointer-events:none;z-index:10;user-select:none;-webkit-user-drag:none;
}
.phone{
  /* посадка = дыра phone-frame.webp + лёгкий заход под безель (без торчащих углов) */
  position:absolute;left:22.3%;top:8.55%;width:56.05%;height:79.8%;
  background:#0A0E11;overflow:hidden;z-index:1;
  border-radius:13.75% / 6.4%;
}
/* День: корпус → титан/серебро (без выжигания antialias в белую кромку) */
html[data-mode="day"] .phone-outer{
  filter:drop-shadow(var(--shadow-phone-day));
}
html[data-mode="day"] .phone-frame-img{
  filter:brightness(1.42) contrast(.97) saturate(.45);
}
.feed{
  position:absolute;inset:0;overflow:hidden;touch-action:none;cursor:grab;
  -webkit-user-select:none;user-select:none;
}
.feed.is-drag{cursor:grabbing}
.feed-track{
  display:flex;flex-direction:column;gap:6px;
  will-change:transform;
}
.feed-card{
  flex:none;width:100%;height:auto;box-sizing:border-box;
  padding:0 5px;margin:0;overflow:hidden;
}
.feed-card img{
  width:100%;height:auto;display:block;border-radius:14px;
  pointer-events:none;-webkit-user-drag:none;user-select:none;
}
.swipe-hint{
  position:absolute;left:50%;bottom:14px;transform:translate(-50%,10px);z-index:7;
  display:flex;flex-direction:column;align-items:center;gap:0;opacity:0;pointer-events:none;
  color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.5);font-size:14px;line-height:1;
  font-family:var(--font-body);
}
.swipe-hint span{opacity:.85}
.swipe-hint span:nth-child(2){opacity:.45;font-size:12px}
.swipe-hint.pulse{animation:swipeHintPulse .9s ease-out}
@keyframes swipeHintPulse{
  0%{opacity:0;transform:translate(-50%,10px)}
  30%{opacity:.85;transform:translate(-50%,-2px)}
  100%{opacity:0;transform:translate(-50%,-16px)}
}

/* ---- Последовательность появления (§4) — CSS delay, без JS ---- */
.hero-enter{
  opacity:0;transform:translateY(16px);
  animation:heroIn var(--dur-enter) var(--ease-enter) forwards;
}
/* H1 без fade с opacity:0 — иначе LCP становится логотип 28px (W4).
   Движение остаётся: Y 16→0 по спеке §4. */
.hero-enter-h1a,.hero-enter-h1b{
  opacity:1;transform:translateY(16px);
  animation-name:heroInY;
}
.hero-enter-h1a{animation-delay:80ms}
.hero-enter-h1b{animation-delay:160ms}
.hero-enter-eyebrow,.hero-enter-sub{
  animation-delay:280ms;animation-duration:var(--dur-standard);transform:none;
}
.hero-enter-cta{
  animation-delay:360ms;animation-duration:var(--dur-standard);transform:translateY(8px);
}
.hero-enter-phone{
  animation-delay:420ms;transform:scale(.97);transform-origin:center center;
}
.hero-enter-ticker{
  animation-delay:700ms;animation-duration:var(--dur-standard);transform:none;
}
@keyframes heroIn{
  to{opacity:1;transform:none}
}
@keyframes heroInY{
  to{transform:none}
}

/* ---- Бегущая строка ---- */
.ticker{
  overflow:hidden;border-top:1px solid var(--divider);border-bottom:1px solid var(--divider);
  padding:14px 0;
  -webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.ticker-track{display:flex;white-space:nowrap;animation:marq 22s linear infinite;width:max-content}
.ticker-track span{
  font-family:var(--font-head);font-weight:600;font-size:18px;padding:0 22px;
  display:inline-flex;align-items:center;gap:22px;color:var(--text-3);
}
.ticker-track span::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);flex-shrink:0}
@keyframes marq{to{transform:translateX(-50%)}}

/* ---- Планшет 768–899: стопка, телефон целиком ---- */
@media(max-width:899px){
  .hero-top{min-height:auto;align-items:stretch;padding-top:calc(64px + 24px)}
  .hero-grid{grid-template-columns:1fr;gap:28px;padding:8px 0 32px}
  .phone-outer{width:min(380px,100%)}
  .hero-cta .btn{width:100%;max-width:420px}
}

/* ---- Мобила <768: телефон целиком над тикером (не режется полосой) ---- */
@media(max-width:767px){
  .hero{overflow-x:clip}
  .hero-top{
    min-height:auto;max-height:none;overflow:visible;
    display:flex;flex-direction:column;
    padding-top:56px;
    padding-bottom:8px;
  }
  .hero-grid{
    display:flex;flex-direction:column;gap:14px;
    padding:8px 0 12px;min-width:0;width:100%;
  }
  .hero-copy{flex:0 0 auto;min-width:0}
  .hero-h1,.t-display{
    font-size:clamp(28px,8.2vw,38px);max-width:100%;
    overflow-wrap:anywhere;word-break:break-word;
  }
  .hero-sub-desk{display:none}
  .hero-sub-mob{display:block;max-width:none}
  .hero-note{display:none}
  .hero-cta{flex-direction:column;align-items:stretch;gap:12px}
  .hero-cta .btn{width:100%;max-width:none}
  .hero-cta .btn-link{justify-content:center}
  .phone-wrap{
    flex:0 0 auto;height:auto;max-height:none;overflow:visible;
    justify-content:flex-start;align-items:center;
    padding:4px 0 10px;gap:0;width:100%;min-width:0;
  }
  .phone-outer{width:min(300px,78vw);flex-shrink:0}
  .phone{
    left:22.3%;top:8.55%;width:56.05%;height:79.8%;
    border-radius:13.75% / 6.4%;
  }
  .phone-glow{width:140%;height:70%;top:28%}
  .ticker{
    position:relative;z-index:2;margin:0;
    background:var(--bg);
    border-top:1px solid var(--divider);
  }
}

/* ================= СУТЬ ЗА 3 ШАГА (§5.1) ================= */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:48px}
.step{
  border-radius:var(--r-md);padding:4px;
  transition:transform var(--dur-standard) var(--ease-enter),
              background var(--dur-quick) var(--ease-enter);
}
.step .num{
  font-family:var(--font-head);font-weight:700;font-size:56px;line-height:1;
  color:var(--text-3);
  transition:color var(--dur-quick) var(--ease-enter);
}
.step h3{margin-top:8px}
.step p{margin-top:8px;color:var(--text-2)}
@media(hover:hover) and (pointer:fine){
  .step:hover{transform:translateY(-4px);background:var(--surface)}
  .step:hover .num{color:var(--accent)}
}
@media(max-width:1119px) and (min-width:768px){
  .steps{gap:32px}
}
@media(max-width:767px){
  .steps{grid-template-columns:1fr;gap:32px}
  .step{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;padding:8px}
  .step .num{font-size:56px}
  .step h3{margin-top:0}
}

/* ================= ВИТРИНА МАСОК (§5.2) ================= */
.cat-tabs{
  display:flex;gap:4px;overflow-x:auto;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;padding:0 0 4px;scroll-padding-inline:var(--container-pad);
  margin-inline:calc(var(--container-pad) * -1);padding-inline:var(--container-pad);
  scroll-behavior:smooth;
}
.cat-tabs::-webkit-scrollbar{display:none}
.cat-tab{
  flex:0 0 auto;font-family:var(--font-body);font-weight:600;font-size:15px;line-height:20px;
  letter-spacing:0.01em;padding:10px 16px;border-radius:var(--r-pill);color:var(--text-2);
  transition:color var(--dur-quick) var(--ease-enter),background var(--dur-quick) var(--ease-enter);
}
.cat-tab.on{background:var(--accent);color:var(--on-accent)}
.cat-tab:not(.on):hover{color:var(--text)}

.masks-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));
  gap:24px;margin-top:32px;
  transition:opacity var(--dur-quick) var(--ease-enter),transform var(--dur-standard) var(--ease-enter);
}
.masks-grid.is-fading{opacity:0;transform:translateY(6px)}
.mask-item{text-align:center}
.mask-item img{
  width:100%;aspect-ratio:1;object-fit:contain;
  transition:transform var(--dur-standard) var(--ease-enter);
}
.mask-item .nm{
  margin-top:8px;color:var(--text-2);
  transition:color var(--dur-quick) var(--ease-enter);
}
@media(hover:hover) and (pointer:fine){
  .mask-item:hover img{transform:translateY(-6px) scale(1.06)}
  .mask-item:hover .nm{color:var(--text)}
}
.masks-more{
  display:none;margin:24px auto 0;color:var(--accent);
  font-family:var(--font-body);font-weight:600;font-size:15px;letter-spacing:0.01em;
}
.masks-more:hover{text-decoration:underline}
@media(max-width:767px){
  .masks-grid{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:16px}
  .masks-grid:not(.is-expanded) .mask-item:nth-child(n+10){display:none}
  .masks-more:not([hidden]){display:block}
}

/* ================= КОНКУРСЫ (§5.3) — ночь: тёмный зал; день: шампань ================= */
.contests{
  --text:#ECF3F6;--text-2:#8FA0AC;--text-3:#5D6E7A;--divider:#1F2A32;
  background:#0A0E11;color:var(--text);
  position:relative;overflow:visible;
  margin:56px 0;padding:var(--section-pad-y) 0;
  /* Космос слегка «просвечивает» только по краям зала */
  box-shadow:
    0 -40px 80px -40px rgba(0,0,0,.55),
    0 40px 80px -40px rgba(0,0,0,.55);
}
.contests::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(70% 55% at 40% 35%,color-mix(in srgb,var(--gold) 12%,transparent),transparent 65%);
}
/* День: золото остаётся, но без чёрной полосы — тёплый зал на бумаге */
html[data-mode="day"] .contests{
  --text:#1A1610;--text-2:#5C5346;--text-3:#8A7E6E;
  --divider:color-mix(in srgb,var(--gold) 28%,transparent);
  background:
    linear-gradient(180deg,#F6F0E4 0%,#EFE4D0 48%,#F4EDE0 100%);
  box-shadow:
    0 -24px 48px -36px rgba(28,20,36,.08),
    0 24px 48px -36px rgba(28,20,36,.08);
}
html[data-mode="day"] .contests::before{
  background:radial-gradient(65% 50% at 38% 32%,color-mix(in srgb,var(--gold) 22%,transparent),transparent 68%);
}
html[data-mode="day"] .contests .tape{
  box-shadow:0 4px 14px rgba(28,20,36,.12);
  border-top-color:rgba(255,255,255,.45);
  border-bottom-color:rgba(28,20,36,.14);
}
html[data-mode="day"] .contests-timeline li.is-hot .tl-time{
  text-shadow:0 0 12px color-mix(in srgb,var(--gold) 28%,transparent);
}
.contests-inner{position:relative;z-index:1}
.contests-grid{
  display:grid;grid-template-columns:1.15fr .85fr;gap:40px 32px;align-items:center;
  grid-template-areas:"phone head" "phone body";
}
.contests-phone{
  grid-area:phone;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:14px;
}
.contests-head{grid-area:head}
.contests-body{grid-area:body}
.contests .t-tag{color:var(--gold)}
.contests .t-h2{margin-top:var(--gap-tag-h2);color:var(--text)}
.contests-lead{margin-top:var(--gap-h2-lead);color:var(--text-2);max-width:520px}
.contests-phone-outer{
  width:min(520px,100%);aspect-ratio:2/3;position:relative;
  filter:drop-shadow(var(--shadow-phone-night));
  background:transparent;
  /* тень на outer, движение на bob — иначе filter+transform дают белую кромку */
}
.contests-phone-bob{
  position:absolute;inset:0;
  transform-origin:center center;
  animation:contestBreathe 5.5s ease-in-out infinite;
  will-change:transform;backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
.contests-phone-outer.is-dragging .contests-phone-bob{
  animation:none;
}
/* тёмная подложка в дыре экрана — закрывает щели на субпикселях */
.contests-phone-bob::before{
  content:"";position:absolute;z-index:0;pointer-events:none;
  left:21.95%;top:8.35%;width:56.7%;height:80.25%;
  border-radius:13.75% / 6.4%;
  background:#0A0E11;
}
html[data-mode="day"] .contests-phone-outer{
  filter:drop-shadow(var(--shadow-phone-day));
}
html[data-mode="day"] .contests-phone-outer .phone-frame-img{
  filter:brightness(1.42) contrast(.97) saturate(.45);
}
.contests-phone-screen{
  position:absolute;left:21.95%;top:8.35%;width:56.7%;height:80.25%;
  overflow:hidden;z-index:1;background:#0A0E11;
  border-radius:13.75% / 6.4%;
  touch-action:none;cursor:grab;outline:none;
  user-select:none;-webkit-user-select:none;
  /* чуть крупнее дыры — заход под безель, без щелей по краям */
  transform:scale(1.012);transform-origin:center center;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
}
.contests-phone-screen:active,
.contests-phone-screen.is-dragging{cursor:grabbing}
.contests-phone-screen:focus-visible{box-shadow:inset 0 0 0 2px var(--gold)}
.app-phone-track{
  display:flex;height:100%;width:100%;
  will-change:transform;transform:translate3d(0,0,0);
}
.app-phone-slide{
  flex:0 0 100%;width:100%;height:100%;object-fit:cover;object-position:top center;
  pointer-events:none;user-select:none;-webkit-user-drag:none;
}
.app-phone-dots{display:flex;align-items:center;justify-content:center;gap:6px;z-index:2}
.app-phone-dots button{
  width:8px;height:8px;border-radius:50%;padding:0;
  background:color-mix(in srgb,var(--gold-champagne) 35%,transparent);
  transition:background var(--dur-quick) var(--ease-enter),transform var(--dur-quick) var(--ease-enter);
}
.app-phone-dots button.on{
  background:var(--gold);transform:scale(1.25);
}
.app-phone-hint{
  position:absolute;left:50%;bottom:12px;transform:translateX(-50%);
  display:flex;gap:10px;opacity:0;pointer-events:none;z-index:5;
  color:#fff;font-size:14px;font-weight:700;text-shadow:0 2px 8px rgba(0,0,0,.55);
}
.app-phone-hint.pulse{animation:appHintPulse 1.4s ease-out}
@keyframes appHintPulse{
  0%{opacity:0;transform:translateX(-50%) scale(.9)}
  25%{opacity:.9;transform:translateX(-50%) scale(1)}
  100%{opacity:0;transform:translateX(-50%) scale(1.05)}
}
@keyframes contestBreathe{
  0%,100%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(0,-8px,0)}
}
.contests-timeline li.is-hot .tl-time{color:var(--gold);text-shadow:0 0 18px color-mix(in srgb,var(--gold) 45%,transparent)}
.contests-timeline li.is-hot .tl-desc{color:var(--text)}
.contests-timeline li{transition:transform .35s var(--ease-enter)}
.contests-timeline li.is-hot{transform:translateX(4px)}

.contests-timeline{list-style:none;margin:32px 0 0;padding:0;display:flex;flex-direction:column;gap:20px}
.contests-timeline li{display:flex;flex-direction:column;gap:4px}
.tl-time{
  font-family:var(--font-head);font-weight:600;font-size:20px;line-height:1.2;
  color:var(--gold-champagne);text-transform:none;letter-spacing:0;
}
.tl-desc{color:var(--text-2)}
.contests-arenas{margin-top:28px;color:var(--text-2);max-width:520px}

@media(max-width:899px){
  .contests-grid{
    grid-template-columns:1fr;gap:32px;
    grid-template-areas:"head" "phone" "body";
  }
  .contests-phone-outer{width:min(420px,82%)}
}
@media(max-width:767px){
  .contests-phone-outer{width:min(340px,86%)}
  .contests-timeline{margin-top:8px}
}
@media(min-width:1120px){
  .contests-phone-outer{width:min(560px,100%)}
}

/* ================= ПОЧЕМУ ТУТ ИНАЧЕ (§5.4) ================= */
.feats{display:grid;grid-template-columns:repeat(2,1fr);gap:40px 32px}
.feats-rule{grid-column:1/-1;height:1px;background:var(--divider);margin:0}
.feat{
  border-radius:var(--r-md);padding:16px;
  margin:-16px;transition:background var(--dur-quick) var(--ease-enter),
                           transform var(--dur-standard) var(--ease-enter);
}
.feat h3{margin-bottom:8px}
.feat p{color:var(--text-2)}
.feat-mark{
  display:block;color:var(--accent);font-size:12px;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;margin:-2px 0 8px;
}
@media(hover:hover) and (pointer:fine){
  .feat:hover{background:var(--surface);transform:translateY(-2px)}
}
@media(max-width:767px){
  .feats{grid-template-columns:1fr;gap:32px}
  .feats-rule{display:none}
  .feat{margin:0;padding:0}
}

/* ================= ДНЕВНИК / БЛОГ (§5.5) ================= */
.blog-invite{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  background:var(--surface);border-radius:var(--r-lg);padding:40px 32px;
  transition:background var(--dur-quick) var(--ease-enter),
              transform var(--dur-standard) var(--ease-enter);
}
.blog-invite:hover{background:var(--surface-2);transform:translateY(-2px)}
.blog-invite-copy .t-body{margin-top:8px;color:var(--text-2)}
.blog-invite-cta{
  color:var(--accent);flex-shrink:0;white-space:nowrap;
  transition:transform var(--dur-quick) var(--ease-enter);
}
.blog-invite:hover .blog-invite-cta{transform:translateX(4px)}
@media(max-width:767px){
  .blog-invite{flex-direction:column;align-items:flex-start;padding:32px 20px;gap:16px}
}

/* ================= ФОРМА RUSTORE (§5.6) ================= */
.cta-box{
  background:var(--surface);border-radius:var(--r-lg);padding:64px 40px;text-align:left;
  transition:box-shadow var(--dur-standard) var(--ease-enter);
}
.cta-box:focus-within{
  box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 35%,transparent);
}
.cta-box .t-tag{color:var(--accent)}
.cta-box .t-h2{margin-top:var(--gap-tag-h2)}
.cta-box .lead{color:var(--text-2);margin-top:var(--gap-h2-lead);max-width:560px}
.cta-box .lead a{color:var(--accent);text-decoration:underline}
.wl-form{display:flex;gap:12px;margin-top:32px;flex-wrap:wrap;align-items:stretch}
.wl-form .field{flex:1;min-width:220px}
.wl-consents{margin-top:16px;display:flex;flex-direction:column;gap:10px}
.wl-ok{
  display:none;margin-top:20px;color:var(--text);
  opacity:0;transform:none;
}
.wl-ok.show{
  display:block;opacity:1;
  transition:opacity var(--dur-standard) var(--ease-enter);
}
/* Счётчик «Уже ждут» — решение Лёхи 01.08.2026: не удалять, только скрыть.
   Механизм автоприбавления (waitlistCount/dailyBump/renderWaitlistCount) остаётся
   рабочим в JS без изменений — включить обратно можно, снять только это правило. */
.counter{display:none}
@media(max-width:767px){
  .cta-box{padding:40px 20px}
  .wl-form{flex-direction:column}
  .wl-form .btn{width:100%}
}

/* Полоска прогресса скролла под шапкой */
.scroll-progress{
  position:fixed;top:64px;left:0;right:0;height:2px;z-index:51;
  transform-origin:left center;transform:scaleX(0);
  background:var(--accent);pointer-events:none;opacity:.9;
}
@media(max-width:767px){
  .scroll-progress{top:var(--head-h,56px);height:3px;opacity:1}
}

/* Lite-режим телефонов: вид адаптации, без тяжёлого фона */
html[data-lite="1"] #cosmos,
html[data-lite="1"] #decoLayer,
html[data-lite="1"] #maskField,
html[data-lite="1"] #cometLayer{display:none!important}
/* не трогаем transform у .reveal — иначе блоки не «приезжают» */
html[data-lite="1"] [data-parallax]:not(.reveal){transform:none!important;will-change:auto}
html[data-lite="1"] .reveal[data-parallax]{--py:0px}
html[data-lite="1"] .phone-glow{opacity:.35;filter:blur(28px)}
html[data-lite="1"] .cosmos-nebula{animation:none}
html[data-lite="1"] body{background:var(--bg)}
html[data-lite="1"] .scroll-progress{display:block!important}

.shine-ready.in::after,
.shine-ready:hover::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(105deg,transparent 40%,color-mix(in srgb,#fff 14%,transparent) 50%,transparent 60%);
  background-size:200% 100%;animation:shineSweep 1.1s var(--ease-enter) 1;
}
.blog-invite,.cta-box{position:relative;overflow:hidden}
@keyframes shineSweep{
  from{background-position:120% 0}
  to{background-position:-40% 0}
}

@media(prefers-reduced-motion:reduce){
  .ticker-track{animation:none}
  .hero-enter{opacity:1!important;transform:none!important;animation:none!important}
  .mask-item img{transition:none}
  .masks-grid{transition:none}
  .blog-invite{transition:none;transform:none!important}
  .wl-ok.show{transition:none}
  .contests-phone-bob{animation:none}
  .step{transition:none}
  .feat{transition:none}
  .swipe-hint{display:none}
  .app-phone-hint{display:none}
  .feed-track,.app-phone-track{transition:none!important}
  .cosmos-nebula{animation:none}
  [data-parallax]{transform:none!important}
  .scroll-progress{display:none}
  .shine-ready::after{display:none!important}
  #decoLayer,#maskField,#cometLayer,#cosmosStars{display:none}
}