.social-hint { position: absolute; bottom: -45px; right: 0; font-size: 12px; color: #666 !important; transform: rotate(-10deg); white-space: nowrap; } /* Жесткая фиксация стрелочки для соц.сетей */ .social-arrow { position: absolute !important; bottom: -25px !important; right: 40px !important; width: 40px !important; height: 40px !important; display: block !important; overflow: visible !important; pointer-events: none; } .social-arrow path { stroke: #666 !important; fill: none !important; } /* Главный заголовок */ .hero-main { flex-grow: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; margin-bottom: 80px; } .hero-title { font-family: var(--font-heading); text-transform: uppercase; line-height: 1.1; /* Увеличили высоту строки */ margin: 0; display: flex; flex-direction: column; align-items: center; letter-spacing: 2px; gap: 5px; /* Добавили отступ между строками вместо отрицательных margin */ } .title-line-1 { font-size: 80px; color: var(--color-dark) !important; } .title-line-2 { font-size: 110px; color: #fff !important; background-color: var(--color-blue) !important; padding: 5px 20px; position: relative; z-index: 2; } .title-line-3 { font-size: 80px; color: var(--color-dark) !important; } .title-line-4 { font-size: 65px; color: #fff !important; background-color: var(--color-blue) !important; padding: 5px 20px; border-radius: 8px; transform: rotate(-2deg); margin-top: 10px; /* Положительный отступ для повернутой плашки */ box-shadow: 0 10px 20px rgba(61, 106, 220, 0.2); } /* Подвал блока (Фактоиды и CTA) */ .hero-footer-content { display: flex; justify-content: space-between; align-items: stretch; background: rgba(255,255,255,0.7) !important; border-radius: 20px; padding: 20px; backdrop-filter: blur(10px); gap: 30px; } .stats-block { display: flex; align-items: center; flex-grow: 1; } .stat-item { flex: 1; padding: 10px 20px; position: relative; } .stat-item:not(:last-child)::after { content: ''; position: absolute; right: 0; top: 10%; height: 80%; width: 1px; background-color: var(--color-divider) !important; } .stat-title { font-weight: 700; font-size: 16px; margin-bottom: 4px; color: var(--color-dark) !important; } .stat-desc { font-size: 14px; color: #666 !important; line-height: 1.3; } .cta-card { background-color: var(--color-blue) !important; color: #fff !important; padding: 25px 30px; border-radius: 16px; width: 380px; flex-shrink: 0; position: relative; cursor: pointer; transition: transform 0.3s; } .cta-card:hover { transform: translateY(-5px); } .cta-title { font-size: 20px; font-weight: 700; margin-bottom: 10px; color: #fff !important; } .cta-desc { font-size: 14px; line-height: 1.4; opacity: 0.9; color: #fff !important; } /* Жесткая фиксация стрелочки CTA */ .cta-arrow { position: absolute !important; top: 20px !important; right: 20px !important; width: 40px !important; height: 40px !important; display: block !important; overflow: visible !important; pointer-events: none; } .cta-arrow path { stroke: #fff !important; fill: none !important; } /* Адаптив для мобильных устройств */ @media (max-width: 1024px) { .title-line-1 { font-size: 60px; } .title-line-2 { font-size: 80px; } .title-line-3 { font-size: 60px; } .title-line-4 { font-size: 45px; margin-top: 10px; } .hero-footer-content { flex-direction: column; } .cta-card { width: 100%; } .stat-item:not(:last-child)::after { display: none; } .stat-item { padding: 10px 0; border-bottom: 1px solid var(--color-divider) !important; } .stat-item:last-child { border-bottom: none !important; } } @media (max-width: 768px) { .hero-header { flex-direction: column; text-align: center; } .hero-nav { display: none; } .title-line-1 { font-size: 40px; } .title-line-2 { font-size: 55px; } .title-line-3 { font-size: 40px; } .title-line-4 { font-size: 30px; margin-top: 5px; } .social-hint { display: none; } .social-arrow { display: none !important; } /* Прячем стрелочку на мобилке, чтобы не мешала */ }