/* ============================================ ФАЗА 1 — Mobile-first адаптация Версия:1.0 (08.02.2026) ============================================ */ /* ============================================ 1.3.1 — Тач-зоны:минимум 44px ============================================ */ @media (max-width:768px){button,.btn,.modal-btn,input[type="submit"],input[type="button"],.login-btn,.footer-toggle-btn{min-height:44px}.footer-menu li a,.footer-seo-list li a{min-height:44px;display:flex;align-items:center}input[type="checkbox"],input[type="radio"]{min-width:20px;min-height:20px}.faq-item summary,.info-accordion-header{min-height:44px;padding-top:12px;padding-bottom:12px}}/* ============================================ 1.3.2 — Вертикальные стеки на мобилке ============================================ */ @media (max-width:768px){.services-grid,.services-grid.services-align{flex-direction:column !important;gap:16px !important}.benefits-grid,.why-us-grid,.features-grid{flex-direction:column !important;gap:16px !important}.examples-grid,.video-grid,.gallery-grid{grid-template-columns:1fr !important;gap:16px !important}.footer-content{flex-direction:column !important;gap:24px !important}.footer-nav{flex-direction:column !important;gap:16px !important}}/* ============================================ 1.3.4 — Формы на полную ширину ============================================ */ @media (max-width:768px){.upload-area,.drop-zone,.file-upload-area,.upload-zone{width:100% !important;min-height:120px;box-sizing:border-box}input[type="text"],input[type="email"],input[type="tel"],input[type="url"],textarea,select{width:100% !important;box-sizing:border-box;font-size:16px !important}}/* ============================================ 1.3.5 — Sticky CTA-кнопка внизу экрана ============================================ */ .sticky-cta-mobile{display:none}@media (max-width:768px){.sticky-cta-mobile{display:block;position:fixed;bottom:0;left:0;right:0;z-index:90;padding:8px 16px;padding-bottom:calc(8px + env(safe-area-inset-bottom,0px));background:rgba(255,255,255,0.97);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 -2px 20px rgba(0,0,0,0.1);transform:translateY(100%);transition:transform 0.3s ease;pointer-events:none}.sticky-cta-mobile.visible{transform:translateY(0);pointer-events:auto}.sticky-cta-mobile .sticky-cta-btn{display:flex;align-items:center;justify-content:center;width:100%;padding:12px 20px;background:var(--primary-color,#078d66);color:white;border:none;border-radius:12px;font-size:16px;font-weight:600;cursor:pointer;text-align:center;text-decoration:none;min-height:44px;box-sizing:border-box}.sticky-cta-mobile .sticky-cta-btn:active{background:#067a59;transform:scale(0.98)}body.has-sticky-cta{padding-bottom:68px}}/* ============================================ 1.3.6 — SEO-тексты:свернуть на мобилке ============================================ */ @media (max-width:768px){.seo-text-collapsible{position:relative;max-height:120px;overflow:hidden;transition:max-height 0.4s ease}.seo-text-collapsible::after{content:'';position:absolute;bottom:0;left:0;right:0;height:60px;background:linear-gradient(transparent,var(--bg-color,#f4f7f6));pointer-events:none;transition:opacity 0.3s}.seo-text-collapsible.expanded{max-height:5000px}.seo-text-collapsible.expanded::after{opacity:0}.seo-text-toggle{display:block;margin-top:8px;padding:10px 0;background:none;border:none;color:var(--primary-color,#078d66);font-size:14px;font-weight:500;cursor:pointer;min-height:44px}.seo-text-toggle::after{content:' ▼';font-size:10px}.seo-text-toggle.expanded::after{content:' ▲'}}@media (min-width:769px){.seo-text-toggle{display:none}}/* ============================================ 1.3.9 — Видео-превью крупнее на мобилке ============================================ */ @media (max-width:768px){.video-card,.example-card,.gallery-item{width:100% !important}.video-card video,.example-card video,.gallery-item video{width:100% !important;height:auto !important;border-radius:12px}}/* ============================================ FOOTER — компактнее на мобилке (1.2.1) ============================================ */ @media (max-width:768px){.site-footer{padding:32px 0 24px !important}.site-footer .container{padding:0 16px}.footer-logo .logo-svg{width:36px !important;height:36px !important}.footer-logo .logo-title{font-size:16px !important}.footer-menu li a{padding:10px 0;font-size:15px}.footer-bottom{margin-top:20px;padding-top:16px}.footer-contact-btn{width:100%;min-height:44px}}/* ============================================ ОБЩИЕ МОБИЛЬНЫЕ УЛУЧШЕНИЯ ============================================ */ @media (max-width:768px){.container{padding:0 16px}section,.section{padding-top:32px;padding-bottom:32px}h1{font-size:1.75rem !important}h2{font-size:1.4rem !important}h3{font-size:1.15rem !important}html{scroll-behavior:smooth}}/* ============================================ КАРУСЕЛИ СО СВАЙПОМ (1.3.3) CSS-only горизонтальная прокрутка ============================================ */ @media (max-width:768px){.swipe-carousel{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;gap:12px;padding:0 16px 16px;margin:0 -16px;scrollbar-width:none}.swipe-carousel::-webkit-scrollbar{display:none}.swipe-carousel > *{scroll-snap-align:center;flex-shrink:0;width:calc(100vw - 64px)}.carousel-dots{display:flex;justify-content:center;gap:6px;padding:12px 0}.carousel-dots .dot{width:6px;height:6px;border-radius:50%;background:#d1d5db;transition:background 0.2s,transform 0.2s}.carousel-dots .dot.active{background:var(--primary-color,#078d66);transform:scale(1.3)}}@media (min-width:769px){.carousel-dots{display:none}}@media (max-width:768px){.hero-cta-block,.examples-section,.how-it-works-section,.benefits-section,.use-cases-section,.tech-details-section,.stories-section,.demo-section,.cta-section,.restoration-info{padding:40px 0 !important}.hero .welcome-text h1{font-size:1.6rem !important;line-height:1.3}.hero .welcome-text p{font-size:0.95rem}.section-title{font-size:1.4rem !important}.section-label{font-size:0.85rem}.section-desc{font-size:0.9rem;padding:0 10px}.hero-cta-block .action-button,.steps-cta .action-button,.cta-section .action-button,.demo-cta .action-button{display:block;width:100%;max-width:320px;margin:0 auto;padding:14px 20px !important;font-size:1.05rem !important}.hero-badges{gap:10px !important}.hero-badges .badge{font-size:0.8rem;padding:6px 12px}.step-item{padding:20px !important}.step-icon{font-size:2rem !important}.video-examples-grid{grid-template-columns:1fr !important;gap:20px !important}.faq-question{min-height:44px;padding:14px 16px !important;font-size:0.95rem}.benefits-grid,.tech-grid{grid-template-columns:1fr !important;gap:16px !important}.benefit-card,.tech-item,.use-case,.story-card{padding:20px !important}.cta-section h2{font-size:1.3rem !important}.cta-small{font-size:0.85rem}}/* ============================================ FIX:Кнопки результата — центрирование на мобилке Баг:кнопки смещены вправо на /animation/ и /restoration/ Причина:style.css .result-section #result-actions .result-btn имеет display:inline-flex !important (специфичность 1-2-0) ============================================ */ @media (max-width:768px){.result-section{max-width:100% !important;padding:0 !important;margin-left:0 !important;margin-right:0 !important}.result-section #result-actions{flex-direction:column !important;align-items:stretch !important;gap:10px !important;padding:0 16px !important;width:100% !important;box-sizing:border-box !important;margin:0 !important}.result-section #result-actions .result-row{display:flex !important;flex-direction:column !important;align-items:stretch !important;width:100% !important;gap:10px !important;margin:0 !important;padding:0 !important}.result-section #result-actions .result-btn,.result-section #result-actions .share-btn-universal,.result-section #result-actions a.result-btn,.result-section #result-actions button.share-btn-universal{display:flex !important;width:100% !important;max-width:100% !important;min-width:0 !important;margin:0 !important;box-sizing:border-box !important;align-items:center !important;justify-content:center !important}.result-section .waiting-buttons{display:flex !important;flex-direction:column !important;align-items:stretch !important;gap:10px !important;padding:0 16px !important}.result-section .waiting-btn{width:100% !important;max-width:100% !important;box-sizing:border-box !important;display:flex !important;align-items:center !important;justify-content:center !important}}/* ============================================ FIX:Карусель «Примеры работ» — выравнивание Баг:карусель съезжает влево за рамки контента Причина:scroll-snap-align:start + margin:-16px ============================================ */ @media (max-width:768px){.page-template-page-animation .examples-section{overflow:hidden !important}.page-template-page-animation .examples-carousel{margin-left:-16px !important;margin-right:-16px !important;padding-left:20px !important;padding-right:20px !important}.page-template-page-animation .examples-carousel > .ex-card{scroll-snap-align:center !important;width:calc(100vw - 56px) !important}}/* ============================================ FIX:Футер — компактные отступы на мобилке Причина:min-height:44px + padding:10px + margin:15px ============================================ */ @media (max-width:768px){.site-footer .footer-menu li{margin-bottom:0 !important}.site-footer .footer-menu li a,.site-footer .footer-seo-list li a{min-height:38px !important;padding:6px 0 !important;font-size:15px !important;display:flex !important;align-items:center !important}.site-footer .footer-nav{gap:8px !important}.site-footer .footer-content{gap:14px !important}.site-footer .footer-seo-list li{padding:0 !important;margin:0 !important}.site-footer .footer-seo-toggle{margin-top:4px !important}}/* ============================================ SEO-текст сворачивание на лендингах Не трогаем /restoration/ и /animation/ — у них свои ============================================ */ @media (max-width:768px){.seo-collapsible .restoration-info{max-height:150px;overflow:hidden;position:relative;transition:max-height 0.4s ease}.seo-collapsible .restoration-info::after{content:'';position:absolute;bottom:0;left:0;right:0;height:60px;background:linear-gradient(transparent,#f4f7f6);pointer-events:none;transition:opacity 0.3s}.seo-collapsible .restoration-info.expanded{max-height:5000px}.seo-collapsible .restoration-info.expanded::after{opacity:0}.seo-read-more-btn{display:block;margin:8px auto 0;padding:10px 0;background:none;border:none;color:#078d66;font-size:14px;font-weight:500;cursor:pointer;min-height:44px;font-family:inherit}.seo-read-more-btn::after{content:' ▼';font-size:10px}.seo-read-more-btn.expanded::after{content:' ▲'}}@media (min-width:769px){.seo-read-more-btn{display:none !important}}@media (max-width:768px){.upload-area p.move{display:none !important}}