/* ===== v4: фоновая сеть связей, появление в стиле Apple, слова заголовков, наклон экранов, свет в тёмных секциях ===== */

/* фоновая «паутина» сигналов: за контентом, видна на светлых секциях */
#net{position:fixed;inset:0;width:100vw;height:100vh;z-index:-1;pointer-events:none;opacity:.9}
html{background:var(--paper)}
body{background:transparent}
@media(max-width:767px){#net{display:none}}

/* появление: размытие → резкость, подъём, лёгкий масштаб */
.reveal{opacity:0;transform:translateY(28px) scale(.985);filter:blur(8px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1),filter .9s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none;filter:none}

/* заголовки по словам */
.wsplit .w{display:inline-block;opacity:0;transform:translateY(.45em);filter:blur(6px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1),filter .7s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i) * 55ms)}
.wsplit.in .w{opacity:1;transform:none;filter:none}

/* экраны продукта: наклон выпрямляется при прокрутке */
.tilt-wrap{perspective:1400px}
.frame.tilt{transform-origin:50% 0;will-change:transform;transition:box-shadow .4s}

/* световое пятно за курсором в тёмных секциях */
.dark .spot{position:absolute;inset:0;pointer-events:none;z-index:0;background:radial-gradient(520px circle at var(--mx,50%) var(--my,50%),rgba(212,237,136,.09),transparent 60%);opacity:0;transition:opacity .4s}
.dark:hover .spot{opacity:1}
@media(hover:none){.dark .spot{display:none}}

/* карточка лида: картинки владельца */
.lc-img{margin:0;border-radius:22px;overflow:hidden;border:1px solid var(--line);box-shadow:0 40px 90px -40px rgba(24,36,29,.45);background:var(--white);transform:translateY(24px) scale(.97);opacity:0;transition:transform 1s cubic-bezier(.2,.7,.2,1),opacity 1s}
.lc-img.in{transform:none;opacity:1}
.lc-img[hidden]{display:none}
.lc-img img{display:block;width:100%;height:auto}

/* градиентный акцент заголовка первого экрана */
.hero h1 .mark{background:linear-gradient(transparent 62%,var(--lime) 62%);background-size:0 100%;background-repeat:no-repeat;animation:markin 1.1s cubic-bezier(.2,.7,.2,1) .6s forwards}
@keyframes markin{to{background-size:100% 100%}}


@media(prefers-reduced-motion:reduce){
  .reveal,.wsplit .w,.lc-img{transition-duration:.45s;filter:none}
}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* смена сигналов в первом экране: старая гаснет, затем появляется новая */
.ping-cards .ping-card{transition:opacity .3s,transform .3s}
.ping-cards .ping-card.on{transition:opacity .45s .3s,transform .45s .3s}

/* ===== мобильная адаптация: главное в экране, короче страница ===== */
.hero-lead-m{display:none}
@media(max-width:680px){
  .hide-m{display:none!important}
  .hero-lead-m{display:block}
  .hero{padding:18px 0 22px;min-height:calc(100svh - 68px - 50px);display:flex;align-items:center}
  .hero>.shell{width:calc(100% - 32px)}
  .hero h1{font-size:clamp(30px,8.6vw,36px);margin:12px 0 14px;line-height:1.06}
  .hero .eyebrow{font-size:11px;letter-spacing:.1em}
  .hero .lead{font-size:17px;margin-bottom:20px}
  .hero .btns{flex-direction:column;align-items:stretch;gap:10px}
  .hero .btns .btn{width:100%}
  .hero .btns .btn-g{min-height:44px;border:0;text-decoration:underline;text-underline-offset:4px;background:none}
  .sec{padding:44px 0}
  .sec-h{margin-bottom:24px;gap:10px}
  .sec-h .lead{font-size:16px;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
  h2{font-size:clamp(26px,7.4vw,32px)}
  .car-m{display:grid!important;grid-auto-flow:column;grid-template-columns:none!important;grid-auto-columns:86%;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;padding-bottom:8px;margin-right:-16px;padding-right:16px;scrollbar-width:thin}
  .car-m>*{scroll-snap-align:start}
  .steps{grid-template-columns:1fr 1fr!important}
  .step{padding:16px;border-right:1px solid var(--line)!important}
  .step:nth-child(2n){border-right:0!important}
  .step .n{font-size:28px}.step h3{font-size:16px;margin:8px 0 4px}.step p{font-size:13.5px}
  .proof .it:nth-child(5){display:none}
  .proof .it{padding:16px 14px}
  .ns{height:340px}
  .niche-list .niche-item:nth-child(n+4){display:none}
  .case .l,.case .r{padding:20px}
  .case h3{font-size:21px}
  .faq summary{font-size:16px;padding:16px 28px 16px 0}
  .cta{padding:28px 22px}
}

/* компактный радар над заголовком на телефоне */
.radar-m{display:none}
@media(max-width:680px){
  .radar-m{display:block;width:132px;height:132px;margin:0 0 14px -6px}
  .radar-m .radar{display:block!important;position:static;width:132px;height:132px}
}

/* ===== A/B: варианты задаются классами на <html> до отрисовки ===== */
.ab-hero-b-only{display:none}
html.ab-hero-b .ab-hero-a-only{display:none!important}
html.ab-hero-b .ab-hero-b-only{display:block}
.hero-shot .frame{transform:perspective(1400px) rotateY(-8deg) rotateX(4deg);box-shadow:0 50px 100px -40px rgba(24,36,29,.5)}
@media(max-width:680px){html.ab-hero-b .ab-hero-b-only{display:none}}
/* форма пилота, вариант B: все поля на одной странице */
html.ab-form-b #pilot-form .fstep{display:grid!important}
html.ab-form-b #pilot-form .steps-bar,html.ab-form-b #pilot-form [data-next],html.ab-form-b #pilot-form [data-prev],html.ab-form-b #pilot-form .fstep>b{display:none!important}