/* Original Saffer composition; only its animated background is replaced. */
#site-rain{position:fixed;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;display:block}
.base-rain main{position:static}.base-rain .hero{height:100svh;min-height:680px}
.base-rain .hero-sticky{background:var(--bg-deep);min-height:680px}
.base-rain .hero-scrim{display:none}.base-rain .hero-content{z-index:3}
.base-rain .hero-hint{z-index:3}.base-rain #heroTitle{background:var(--plat-grad);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.base-rain .marquee{z-index:auto}.base-rain .mq-track{position:relative;z-index:3}
.base-rain #features{height:430svh;background:var(--bg-deep)}
.base-rain .tn-sticky{background:transparent;z-index:2;min-height:600px}
.base-rain .tn-scrim{display:none}.base-rain .tn-panel{z-index:3;top:auto;bottom:12%;left:50%;transform:translateX(-50%);opacity:0;width:min(800px,92vw);text-shadow:0 2px 26px #05070c}
.base-rain .tn-panel[data-i="0"]{opacity:1}.base-rain .tn-panel h2{font-size:clamp(1.7rem,4.5vw,3.3rem)}
.base-rain .tn-panel p{font-size:16px}.base-rain .tn-num{margin-bottom:12px}
.base-rain .tn-progress{z-index:3}.base-rain #stats{position:relative;padding-top:32vh}
.base-rain #stats>.container,.base-rain .section>.container,.base-rain .section-tight>.container,.base-rain .footer>.container{position:relative;z-index:3}
.base-rain .feature,.base-rain .plan,.base-rain .callout,.base-rain .step,.base-rain .faq-item{position:relative}
.base-rain .pricing-head,.base-rain .lede{position:relative}
.base-rain .rv,.base-rain .rv-load{opacity:1;transform:none}
.base-rain #cta .cta-inner{z-index:3}.base-rain #cta .cta-glow{z-index:0}
.base-rain .footer .ft-word{z-index:2}.base-rain .footer{position:relative}
.base-rain .hero-content:before{content:'';position:absolute;inset:22% 12% 0;z-index:-1;background:radial-gradient(ellipse,#05070cd9 0%,#05070c90 40%,transparent 73%);pointer-events:none}
.base-rain .tn-panel:before{content:'';position:absolute;inset:-45px -50px;z-index:-1;background:radial-gradient(ellipse,#05070ce8,transparent 70%);pointer-events:none}
#rain-motion{position:fixed;right:20px;bottom:18px;z-index:65;padding:10px 15px;border:1px solid var(--line-ctl);border-radius:var(--r-pill);font-size:12px;color:#e4edf7;background:#080b12dc;backdrop-filter:blur(8px);min-height:38px}
#rain-motion:focus-visible{outline:2px solid #c2cedd;outline-offset:3px}
.base-rain .footer{padding-bottom:80px}
.rain-no-webgl #site-rain{display:none}.rain-no-webgl #rain-motion{display:none}
.rain-no-webgl #features,.rain-reduced #features{height:auto;padding:80px 0}
.rain-no-webgl .tn-sticky,.rain-reduced .tn-sticky{height:auto;min-height:0;overflow:visible}
.rain-no-webgl .tn-panel,.rain-reduced .tn-panel{position:relative;opacity:1!important;transform:none!important;inset:auto;margin:0 auto 65px;pointer-events:auto}
.rain-no-webgl .tn-progress,.rain-reduced .tn-progress{display:none}
.rain-reduced #rain-motion{display:none}
@media(max-width:720px){.base-rain .hero,.base-rain .hero-sticky{min-height:680px}.base-rain .hero-content{padding-bottom:100px}.base-rain #heroTitle{font-size:clamp(1.85rem,7vw,2.4rem)}.base-rain .hero-sub{font-size:16px}.base-rain .hero-kicker{font-size:12px;letter-spacing:.12em}.base-rain .hero-cta{gap:12px;margin-top:25px}.base-rain .hero-note{font-size:12px}.base-rain #features{height:430svh}.base-rain .tn-sticky{min-height:620px}.base-rain .tn-panel{bottom:13%;width:calc(100% - 40px)}.base-rain .tn-panel h2{font-size:clamp(1.4rem,6vw,2rem);margin-bottom:15px}.base-rain .tn-panel p{font-size:14px;max-width:35ch}.base-rain .tn-panel:before{inset:-35px -10px}.base-rain #stats{padding-top:170px}.base-rain .hero-content:before{inset:20% 0 0}#rain-motion{right:12px;bottom:12px;font-size:12px;padding:8px 12px}.rain-no-webgl #features,.rain-reduced #features{height:auto}}
@media(prefers-reduced-motion:reduce){.base-rain #features{height:auto;padding:80px 0}.base-rain .tn-sticky{height:auto;min-height:0}.base-rain .tn-panel{position:relative;inset:auto;margin:0 auto 55px;opacity:1!important;transform:none!important}.base-rain .tn-progress{display:none}#rain-motion{display:none}}

/* Tablet, phone and embedded webviews. */
#rain-motion{min-height:44px;bottom:calc(12px + env(safe-area-inset-bottom,0px));right:calc(12px + env(safe-area-inset-right,0px))}
.rain-menu-toggle{display:none}
.rain-only{background:#080b12;color:#eef3fb;isolation:isolate}
.rain-only #site-rain{z-index:-1;opacity:.64}
.rain-only main,.rain-only .section,.rain-only .section-tight,.rain-only .page-hero{background:transparent}
.rain-only .page-hero .container{position:relative}
.rain-only .page-hero{background:linear-gradient(180deg,#080b1240,#080b1299)}
.rain-only .card,.rain-only .guide-block,.rain-only .faq-item,.rain-only .callout,.rain-only .app-tile{background:#101622ed}
/* Guide blocks get a panel background here, so they need inner side padding: otherwise text touches the panel edge. */
.rain-only .guide-block{padding:24px clamp(16px,4vw,28px);border:1px solid var(--border);border-radius:var(--r-lg)}
.rain-only .guide-block+.guide-block{margin-top:16px}
/* Cabinet cards stay opaque over the animated rain. Keep the featured plan gradient. */
.rain-only #lkDash .card,.rain-only #lkDash .sub-card,.rain-only #lkDash .plan{background-color:var(--panel)}
.rain-only .footer{position:relative;padding-bottom:90px;background:#080b12b3}
.rain-only .rv{opacity:1;transform:none}


@media(min-width:721px) and (max-width:1024px){
.base-rain .hero,.base-rain .hero-sticky{min-height:600px}
.base-rain .hero-content{padding-bottom:clamp(100px,13svh,170px)}
.base-rain #heroTitle{font-size:clamp(2.4rem,5.8vw,3.6rem)}
.base-rain .tn-sticky{min-height:0;height:100svh}
.base-rain .tn-panel{width:min(680px,86vw);bottom:12%}
.base-rain .plans{grid-template-columns:repeat(3,minmax(0,1fr));max-width:none;gap:12px}
.base-rain .plan{padding:24px 16px}.base-rain .plan .price{font-size:30px}
}
@media(max-width:900px){
.rain-menu-toggle{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin-left:auto;border:1px solid var(--line-ctl);border-radius:var(--r-sm);color:#e4edf7;background:#101622;font:inherit;font-size:20px}
.rain-menu-ready .nav .nav-links{display:none;position:absolute;top:100%;left:12px;right:12px;padding:14px;background:#101622fa;border:1px solid var(--line-card);border-radius:var(--r-md);box-shadow:0 20px 50px #0009}
.rain-menu-ready .nav .nav-links.is-open{display:flex;flex-direction:column;align-items:stretch;gap:4px}
.rain-menu-ready .nav .nav-links a:not(.btn){display:block;padding:12px;min-height:44px;font-size:16px}
.rain-menu-ready .nav .nav-links .btn{justify-content:center;min-height:44px}
}
@media(max-width:720px){
.base-rain .hero{height:max(740px,100svh);min-height:0}
.base-rain .hero-sticky{min-height:0;height:100%}
.base-rain .hero-content{padding:110px 22px 115px;justify-content:center}
.base-rain .hero-kicker{line-height:1.7;margin-bottom:20px;max-width:32ch}
.base-rain #heroTitle{font-size:clamp(1.8rem,7.6vw,2.65rem);line-height:1.18}
.base-rain .hero-sub{margin-top:20px;line-height:1.65}
.base-rain .hero-cta{width:100%;gap:10px}
.base-rain .hero-hint{bottom:70px}
.base-rain #features{height:360svh}.base-rain .tn-sticky{height:100svh;min-height:0}
.base-rain .tn-panel{bottom:max(13%,85px);width:calc(100% - 36px)}
.base-rain .tn-panel p{font-size:14px;line-height:1.6}
.base-rain #stats{padding-top:24svh}
.rain-only .page-hero{padding-top:110px}.rain-only h1{overflow-wrap:break-word}
.rain-only input,.rain-only select,.rain-only textarea{font-size:16px}
.rain-only .container{max-width:100%}
}
@media(max-width:380px){.base-rain .hero{height:max(780px,100svh)}.base-rain .hero-cta{flex-direction:column;align-items:center}.base-rain .hero-cta .btn{width:100%;max-width:300px}.base-rain .hero-content{padding-top:100px;padding-bottom:110px}.base-rain .hero-note{font-size:12px}.base-rain .hero-sub{font-size:14px}}
@media(max-height:540px) and (orientation:landscape){.base-rain .hero{height:640px}.base-rain .tn-panel{bottom:56px}.base-rain .tn-panel h2{font-size:22px;margin-bottom:8px}.base-rain .tn-panel p{font-size:12px;max-width:55ch}.base-rain .tn-num{margin-bottom:6px}}
.rain-no-webgl #features,.rain-reduced #features{height:auto}
.rain-no-webgl .tn-sticky,.rain-reduced .tn-sticky{height:auto;min-height:0}

#rain-motion{width:44px;height:44px;padding:0;font-size:0;display:flex;align-items:center;justify-content:center}
#rain-motion:before{content:'Ⅱ';font:16px sans-serif}#rain-motion[data-paused=true]:before{content:'▷'}
@media(max-width:720px){
.rain-reduced #rain-motion,.rain-no-webgl #rain-motion{display:none}
}

@media(max-width:720px){.base-rain .tn-panel h2{font-size:clamp(1.4rem,6vw,2rem);margin-bottom:15px}.base-rain .tn-panel:before{inset:-35px -10px}.base-rain .hero-content:before{inset:20% 0 0}.base-rain .hero-note{font-size:12px}.base-rain .hero-kicker{font-size:12px;letter-spacing:.12em}}
.base-rain .hero:has(#refBanner){height:max(840px,100svh)}
.rain-no-webgl .tn-panel,.rain-reduced .tn-panel{pointer-events:auto}
.mini-rain #screen{position:relative;z-index:2}
.mini-rain .app-header,.mini-rain .bottom-nav{background:rgba(8,11,18,.93)}
.mini-rain #rain-motion{position:static;inset:auto;width:100%;height:auto;min-height:48px;display:flex;border:0;border-radius:0;padding:14px 16px;background:transparent;color:var(--text-secondary);font:inherit;text-align:left;backdrop-filter:none}
.mini-rain #rain-motion{justify-content:flex-start;padding:12px 14px;border-radius:var(--r-sm);font-size:15px;font-weight:500}.mini-rain #rain-motion:before{width:20px;margin-right:12px;text-align:center;font-size:15px}/*23.09: как остальные пункты бокового меню мини-аппа*/
.connection-rain>.card{position:relative;z-index:2;background:#0f1320ed}
.connection-rain{padding-bottom:95px}
.connection-rain #site-rain{opacity:.75}
@media(min-width:721px){.connection-rain>.card{max-width:600px;padding:34px}}
@media(max-width:380px){.connection-rain>.card{padding:22px 16px}}
.mini-rain.rain-reduced #rain-motion,.mini-rain.rain-no-webgl #rain-motion{display:none}
@media(max-width:720px){.base-rain .hero-note{padding:0 52px}}/*23.09: строка под CTA не уходит под кнопку дождя в углу*/
#rain-motion{transition:opacity .2s}#rain-motion.rain-over{opacity:.6}#rain-motion.rain-over:focus-visible{opacity:1}@media(hover:hover){#rain-motion.rain-over:hover{opacity:1}}/*23.09: над текстом кнопка полупрозрачная; .6 держит контраст значка ≥3:1 на светлых секциях*/
.cap-notice{padding:0 12px}

/* 23.09: телефон — пауза анимации пунктом меню ☰; бургер и в горизонтальном положении крупных iPhone (>900px) */
.rain-phone .rain-menu-toggle{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin-left:auto;border:1px solid var(--line-ctl);border-radius:var(--r-sm);color:#e4edf7;background:#101622;font:inherit;font-size:20px}
.rain-phone.rain-menu-ready .nav .nav-links{display:none;position:absolute;top:100%;left:12px;right:12px;padding:14px;background:#101622fa;border:1px solid var(--line-card);border-radius:var(--r-md);box-shadow:0 20px 50px #0009}
.rain-phone.rain-menu-ready .nav .nav-links.is-open{display:flex;flex-direction:column;align-items:stretch;gap:4px}
.rain-phone.rain-menu-ready .nav .nav-links a:not(.btn){display:block;padding:12px;min-height:44px;font-size:16px}
.rain-phone.rain-menu-ready .nav .nav-links .btn{justify-content:center;min-height:44px}
.rain-menu-ready .nav .nav-links.is-open{max-height:calc(100vh - 90px);max-height:calc(100dvh - 90px);overflow-y:auto;overscroll-behavior:contain}
.rain-phone #rain-motion{position:static;inset:auto;width:auto;height:auto;min-height:44px;margin-top:6px;padding:12px;display:flex;align-items:center;gap:10px;border:0;border-top:1px solid var(--line-div);border-radius:0;background:transparent;backdrop-filter:none;opacity:1;color:var(--muted,#9aa6b8);font:inherit;font-size:14px;text-align:left}
.rain-phone #rain-motion:before{font-size:14px;width:16px;text-align:center}
.rain-phone.rain-reduced #rain-motion,.rain-phone.rain-no-webgl #rain-motion{display:none}/*анимации нет — нет и пункта меню*/
/* 23.09: меню — компактная панель справа под ☰ на любой ширине, а не полоса во весь экран (жалоба владельца с телефона) */
.rain-phone #rain-motion{justify-content:flex-start}
@media(max-width:900px){.rain-menu-ready .nav .nav-links{left:auto;right:16px;width:min(280px,calc(100% - 32px))}}
.rain-phone.rain-menu-ready .nav .nav-links{left:auto;right:16px;width:min(280px,calc(100% - 32px))}
@media(min-width:561px) and (max-width:900px) and (max-height:500px){
.rain-menu-ready .nav .nav-links.is-open{display:grid;grid-template-columns:1fr 1fr;gap:2px 8px;width:360px;padding:10px}
.rain-menu-ready .nav .nav-links.is-open .btn{grid-column:1/-1}
}
@media(min-width:561px) and (max-height:500px){
.rain-phone.rain-menu-ready .nav .nav-links.is-open{display:grid;grid-template-columns:1fr 1fr;gap:2px 8px;width:360px;padding:10px}
.rain-menu-ready .nav .nav-links.is-open .btn,.rain-phone.rain-menu-ready .nav .nav-links.is-open #rain-motion{grid-column:1/-1}
}
@media(max-width:900px){.rain-menu-ready .nav .nav-links .btn{min-height:44px;padding:9px 16px;font-size:13px}}
.rain-phone.rain-menu-ready .nav .nav-links .btn{min-height:44px;padding:9px 16px;font-size:13px}
.connection-rain.rain-phone #rain-motion{width:100%;margin-top:18px;justify-content:center}/*23.09: /connection на телефоне — строка во всю ширину карточки*/
/* ═══ UX-аудит 12.10.2026 (зона D) ═══ */
/* 2.4: на телефоне — компактная «Войти» рядом с ☰ (на ПК — «Кабинет» в ссылках шапки); без JS меню нет — остаётся «Кабинет» */
.nav-login{display:none;align-items:center;justify-content:center;min-height:44px;padding:0 16px;margin-left:auto;border:1px solid var(--line-ctl);border-radius:var(--r-pill);
  color:#e4edf7;background:#101622;font-family:var(--disp);font-weight:500;font-size:13px;letter-spacing:.04em;white-space:nowrap;text-decoration:none}
.nav-login:focus-visible{outline:2px solid #c2cedd;outline-offset:3px}
@media(max-width:900px){.rain-menu-ready .nav-login{display:inline-flex}.rain-menu-ready .nav-inner{gap:0}}
.rain-phone.rain-menu-ready .nav-login{display:inline-flex}.rain-phone.rain-menu-ready .nav-inner{gap:0}
.nav-login+.rain-menu-toggle,.rain-phone .nav-login+.rain-menu-toggle{margin-left:10px}
/* Минимальный кегль 12 px: надзаголовок первого экрана на телефоне */
@media(max-width:720px){.base-rain .hero-kicker{font-size:12px;letter-spacing:.12em}}
/* Этап 4 (12.10.2026): на телефоне ≤420 px заголовок первого экрана — тем же кеглем, что заголовки разделов (home.css) */
@media(max-width:420px){.base-rain #heroTitle{font-size:min(1.8rem,7.4vw)}}