/* ===================================
   Sauna Landing Styles v2
   Отделка парных под ключ
   Префикс: sl-
   =================================== */

html { scroll-behavior: smooth; }

/* Сброс и базовые стили */
.sl-landing-page {margin: 0; padding: 0; font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #f8f6f3; color: #2c2c2c; line-height: 1.6; overflow-x: hidden;}

/* Горизонтальная нижняя панель */
.sl-topbar {position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%) translateY(150%); z-index: 1000; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); box-shadow: 0 10px 40px rgba(0,0,0,0.15); padding: 15px 30px; border-radius: 50px; opacity: 0; transition: all 0.4s ease;}
.sl-topbar.sl-visible {transform: translateX(-50%) translateY(0); opacity: 1;}

.sl-topbar-content {display: flex; align-items: center; gap: 30px;}

.sl-topbar-phone {display: flex; align-items: center; gap: 12px; text-decoration: none; color: #d2691e; font-weight: 600; font-size: 16px; transition: all 0.3s ease; white-space: nowrap;}
.sl-topbar-phone:hover {color: #ff6b35; transform: scale(1.05);}
.sl-topbar-phone i {font-size: 18px; animation: sl-pulse 2s infinite;}

.sl-topbar-socials {display: flex; gap: 12px; align-items: center; padding-left: 20px; border-left: 1px solid #e0e0e0;}

.sl-social-link {display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #f0f0f0; color: #555; text-decoration: none; font-size: 18px; transition: all 0.3s ease;}
.sl-social-link:hover {transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0,0,0,0.2);}
.sl-social-link.sl-instagram:hover {background: #bd60f5; color: #fff;}
.sl-social-link.sl-whatsapp:hover {background: #25d366; color: #fff;}
.sl-social-link.sl-telegram:hover {background: #0088cc; color: #fff;}
.sl-social-link.sl-youtube:hover {background: #ff0000; color: #fff;}
.sl-social-link.sl-vk:hover {background: #0077ff; color: #fff;}
.sl-social-link.sl-dzen:hover {background: #333333; color: #fff;}

@keyframes sl-pulse {0%, 100% {transform: scale(1);} 50% {transform: scale(1.1);}}

/* Основной контент */
.sl-landing {max-width: 100%; margin: 0; padding: 0;}

/* Заголовок секции проектов */
.sl-projects-header {padding: 10rem 20px 40px; background: #fff; text-align: center;}
@media (max-width: 768px) { .sl-projects-header {padding-top: 10rem;}   }
.sl-section-title {font-size: 48px; font-weight: 700; color: #2c2c2c; margin-bottom: 20px; line-height: 1.2;}
.sl-section-subtitle {font-size: 18px; color: #666; line-height: 1.8; max-width: 800px; margin: 0 auto;}

/* Hero секция */
.sl-hero {min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 80px 20px; position: relative; background-size: cover; background-position: center; background-attachment: fixed;}

.sl-hero-overlay {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, rgba(44,44,44,0.7) 0%, rgba(26,26,26,0.6) 100%); z-index: 1;}

.sl-hero-content {text-align: center; max-width: 800px; margin: 0 auto; position: relative; z-index: 2;}

.sl-hero-logo {max-width: 300px; height: auto; margin-bottom: 40px; opacity: 0; animation: sl-fadeInDown 1s ease forwards;}

@keyframes sl-fadeInDown {from {opacity: 0; transform: translateY(-30px);} to {opacity: 1; transform: translateY(0);}}

.sl-hero-title {font-size: 56px; font-weight: 700; color: #fff; margin-bottom: 20px; line-height: 1.2; opacity: 0; animation: sl-fadeInUp 1s ease 0.3s forwards; text-shadow: 2px 2px 10px rgba(0,0,0,0.5);}

@keyframes sl-fadeInUp {from {opacity: 0; transform: translateY(30px);} to {opacity: 1; transform: translateY(0);}}

.sl-hero-subtitle {font-size: 20px; color: #e0e0e0; font-weight: 400; line-height: 1.8; opacity: 0; animation: sl-fadeIn 1s ease 0.6s forwards; text-shadow: 1px 1px 5px rgba(0,0,0,0.5); margin-bottom: 40px;}

@keyframes sl-fadeIn {from {opacity: 0;} to {opacity: 1;}}

.sl-hero-phone {display: inline-flex; align-items: center; gap: 15px; font-size: 40px; font-weight: 500; color: #000; text-decoration: none; background: linear-gradient(135deg, #ff6b35 0%, #d2691e 100%); padding: 25px 50px; border-radius: 60px; transition: all 0.3s ease; opacity: 0; animation: sl-fadeInUp 1s ease 0.9s forwards; box-shadow: 0 10px 40px rgba(255,107,53,0.4); white-space: nowrap;}
.sl-hero-phone:hover {transform: scale(1.05); box-shadow: 0 15px 50px rgba(255,107,53,0.6); color: #fff;}
.sl-hero-phone i {font-size: 36px; animation: sl-pulse 2s infinite;}

/* Проекты */
.sl-project-item {padding: 100px 20px; opacity: 0; transform: translateY(50px); transition: all 0.8s ease;}
.sl-project-item.sl-visible {opacity: 1; transform: translateY(0);}
.sl-project-item:nth-child(even) {background: #fff;}
.sl-project-item:nth-child(odd) {background: #f8f6f3;}

.sl-project-content {display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; max-width: 1400px; margin: 0 auto;}

.sl-project-reverse .sl-project-content {direction: rtl;}
.sl-project-reverse .sl-project-info, .sl-project-reverse .sl-project-gallery {direction: ltr;}

.sl-project-info {padding: 20px;}

.sl-project-title {font-size: 42px; font-weight: 700; color: #2c2c2c; margin-bottom: 30px; line-height: 1.3; position: relative; padding-bottom: 20px;}
.sl-project-title:after {content: ''; position: absolute; bottom: 0; left: 0; width: 80px; height: 4px; background: linear-gradient(90deg, #d2691e 0%, #ff6b35 100%);}

.sl-project-description {font-size: 18px; color: #555; line-height: 1.8; text-wrap: balance;}
.sl-project-description p {margin-bottom: 20px;}
.sl-project-description p:last-child { color: #ff6b35;font-weight:500;}

/* Метаданные проекта */
.sl-project-meta {display: flex; flex-wrap: wrap; gap: 20px; margin-top: 20px; padding: 15px 25px; background: #f8f6f3; border-radius: 12px; border-left: 4px solid #ff6b35;}
.sl-meta-item {display: flex; align-items: center; gap: 8px; font-size: 15px; color: #666;}
.sl-meta-item i {color: #ff6b35; font-size: 16px;}
.sl-meta-item strong {color: #2c2c2c; font-weight: 600;}

/* Видео проекта */
.sl-project-video {margin-top: 25px;}
.sl-video-btn {display: inline-flex; align-items: center; gap: 15px; text-decoration: none; font-size: 16px; font-weight: 500; color: #555; transition: all 0.3s ease;}
.sl-video-btn:hover {color: #ff6b35;}
.sl-video-btn:hover .sl-video-icon {background: linear-gradient(135deg, #ff6b35 0%, #d2691e 100%); color: #fff; transform: scale(1.1);}
.sl-video-icon {display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 50%; background: #f8f6f3; border: 2px solid #e0e0e0; color: #ff6b35; font-size: 18px; transition: all 0.3s ease;}


/* Стоимость проекта */
.sl-project-price {margin-top: 30px; display: inline-flex; align-items: center; border-radius: 50px; overflow: hidden; box-shadow: 0 5px 20px rgba(0,0,0,0.1);background:#fff;}
.sl-price-label {font-size: 13px; color: #666; font-weight: 500; background: #fff; padding: 12px 25px; border-right: 1px solid #e0e0e0;}
.sl-price-value {font-size: 28px; color: #ff6b35; font-weight: 700; background: #2c2c2c; padding: 12px 30px; white-space: nowrap;}

/* Галерея проекта */
.sl-project-gallery {padding: 20px;}

.sl-gallery-grid {display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 15px; height: 600px;}

.sl-gallery-item {display: block; position: relative; overflow: hidden; border-radius: 12px; cursor: pointer; transition: all 0.3s ease;}
.sl-gallery-item:hover {transform: translateY(-5px); box-shadow: 0 15px 35px rgba(0,0,0,0.2);}
.sl-gallery-item:hover img {transform: scale(1.1);}

.sl-gallery-img {width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; opacity: 0; transform: scale(1.05);}
.sl-gallery-img.sl-loaded {opacity: 1; transform: scale(1);}

.sl-gallery-item:nth-child(1) {grid-column: 1 / 3; grid-row: 1 / 3;}
.sl-gallery-item:nth-child(2) {grid-column: 3 / 4; grid-row: 1 / 2;}
.sl-gallery-item:nth-child(3) {grid-column: 3 / 4; grid-row: 2 / 3;}
.sl-gallery-item:nth-child(4) {grid-column: 1 / 2; grid-row: 3 / 4;}
.sl-gallery-item:nth-child(5) {grid-column: 2 / 3; grid-row: 3 / 4;}
.sl-gallery-item:nth-child(6) {grid-column: 3 / 4; grid-row: 3 / 4;}
.sl-gallery-item:nth-child(n+7) {display: none;}

/* Пояснение по стоимости */
.sl-price-note {padding: 60px 20px; background: #f8f6f3; border-top: 2px solid #e0e0e0;}
.sl-price-note-content {max-width: 900px; margin: 0 auto; text-align: center;}
.sl-price-note-content p {font-size: 18px; color: #555; line-height: 1.8; margin: 0;}
.sl-price-note-content strong {color: #ff6b35; font-size: 24px; margin-right: 5px;}
.sl-inline-phone {color: #d2691e; font-weight: 700; text-decoration: none; border-bottom: 2px solid #d2691e; transition: all 0.3s ease;}
.sl-inline-phone:hover {color: #ff6b35; border-bottom-color: #ff6b35;}

/* CTA секция */
.sl-cta {padding: 120px 20px; background: linear-gradient(135deg, #2c2c2c 0%, #1a1a1a 100%); text-align: center; color: #fff;}

.sl-cta-content {max-width: 800px; margin: 0 auto;}

.sl-cta-title {font-size: 48px; font-weight: 700; margin-bottom: 20px; color: #fff;}

.sl-cta-subtitle {font-size: 20px; color: #ccc; margin-bottom: 50px;}

.sl-cta-phone {display: inline-flex; align-items: center; gap: 15px; font-size: 36px; font-weight: 700; color: #ff6b35; text-decoration: none; background: #fff; padding: 25px 50px; border-radius: 50px; transition: all 0.3s ease; margin-bottom: 40px;}
.sl-cta-phone:hover {transform: scale(1.05); box-shadow: 0 10px 30px rgba(255,107,53,0.3); color: #d2691e;}
.sl-cta-phone i {font-size: 32px;}

.sl-cta-messengers {display: flex; justify-content: center; gap: 20px; flex-wrap: wrap;}

.sl-messenger-btn {display: inline-flex; align-items: center; gap: 10px; padding: 15px 30px; border-radius: 50px; text-decoration: none; font-weight: 600; font-size: 18px; transition: all 0.3s ease; color: #fff;}
.sl-messenger-btn:hover {transform: translateY(-3px); box-shadow: 0 10px 25px rgba(0,0,0,0.3);}
.sl-messenger-btn.sl-whatsapp {background: #25d366;}
.sl-messenger-btn.sl-whatsapp:hover {background: #1fa855;}
.sl-messenger-btn.sl-telegram {background: #0088cc;}
.sl-messenger-btn.sl-telegram:hover {background: #006699;}
.sl-messenger-btn i {font-size: 24px;}

/* Footer */
.sl-footer {background: #1a1a1a; color: #ccc; padding: 60px 20px 30px;}

.sl-footer-content {display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; max-width: 1200px; margin: 0 auto; align-items: center; text-align: center;}

.sl-footer-logo-img {max-width: 200px; height: auto; opacity: 0; transition: opacity 0.3s ease;}
.sl-footer-logo-img:hover {opacity: 1;}
.sl-footer-logo-img.sl-loaded {opacity: 0.8;}

.sl-footer-info p {margin: 5px 0; font-size: 14px; color: #999;}

.sl-footer-phone {display: block; font-size: 20px; font-weight: 600; color: #ff6b35; text-decoration: none; margin-bottom: 15px; transition: color 0.3s ease;}
.sl-footer-phone:hover {color: #d2691e;}

.sl-footer-socials {display: flex; gap: 15px; justify-content: center; margin-top: 15px;}
.sl-footer-socials a {display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #333; color: #ccc; text-decoration: none; font-size: 18px; transition: all 0.3s ease;}
.sl-footer-socials a:hover {background: #ff6b35; color: #fff; transform: translateY(-3px);}

/* Кнопка призыва в проекте */
.sl-project-cta-btn {margin-top: 30px;}
.sl-cta-link {display: inline-block; padding: 18px 40px; background: #fff; border: 2px solid #ff6b35; color: #ff6b35; text-decoration: none; border-radius: 50px; font-size: 17px; font-weight: 600; transition: all 0.3s ease; box-shadow: 0 3px 15px rgba(255,107,53,0.1);}
.sl-cta-link:hover {background: linear-gradient(135deg, #ff6b35 0%, #d2691e 100%); color: #fff; transform: translateY(-2px); box-shadow: 0 5px 25px rgba(255,107,53,0.3);}

@media (max-width: 768px) {
    .sl-cta-link {font-size: 15px; padding: 15px 30px;}
}

/* Адаптив */
@media (max-width: 1200px) {
    .sl-project-content {grid-template-columns: 1fr; gap: 40px;}
    .sl-project-reverse .sl-project-content {direction: ltr;}
}

@media (max-width: 768px) {
    .sl-topbar {bottom: 15px; padding: 12px 20px;}
    .sl-topbar-content {gap: 20px;}
    .sl-topbar-phone {font-size: 14px;}
    .sl-topbar-phone i {font-size: 16px;}
    .sl-topbar-socials {gap: 8px; padding-left: 15px;}
    .sl-social-link {width: 35px; height: 35px; font-size: 16px;}

    .sl-hero {background-attachment: scroll;}
    .sl-hero-title {font-size: 36px;}
    .sl-hero-subtitle {font-size: 16px;}
    .sl-hero-logo {max-width: 200px;}
    .sl-hero-phone {font-size: 24px; padding: 20px 30px;}
    .sl-hero-phone i {font-size: 22px;}

    .sl-section-title {font-size: 32px;}
    .sl-section-subtitle {font-size: 16px;}

    .sl-project-item {padding: 60px 20px;}
    .sl-project-title {font-size: 28px;}
    .sl-project-description {font-size: 16px;}
    .sl-project-meta {flex-direction: column; gap: 10px; padding: 12px 20px;}
    .sl-meta-item {font-size: 14px;}
    .sl-video-btn {font-size: 14px;}
    .sl-video-icon {width: 45px; height: 45px; font-size: 16px;}
    .sl-project-price {flex-direction: row; padding: 0;}
    .sl-price-label {font-size: 11px; padding: 10px 20px;}
    .sl-price-value {font-size: 22px; padding: 10px 25px;}

    .sl-price-note {padding: 40px 20px;}
    .sl-price-note-content p {font-size: 16px;}

    .sl-gallery-grid {grid-template-columns: repeat(2, 1fr); grid-template-rows: auto; gap: 10px; height: auto;}
    .sl-gallery-item:nth-child(1) {grid-column: 1 / 3; grid-row: 1 / 2;}
    .sl-gallery-item:nth-child(2) {grid-column: 1 / 2; grid-row: 2 / 3;}
    .sl-gallery-item:nth-child(3) {grid-column: 2 / 3; grid-row: 2 / 3;}
    .sl-gallery-item:nth-child(4) {grid-column: 1 / 2; grid-row: 3 / 4;}
    .sl-gallery-item:nth-child(5) {grid-column: 2 / 3; grid-row: 3 / 4;}
    .sl-gallery-item:nth-child(6) {display: none;}
    .sl-gallery-item:nth-child(n+7) {display: none;}

    .sl-cta-title {font-size: 32px;}
    .sl-cta-phone {font-size: 24px; padding: 20px 30px;}
    .sl-messenger-btn {font-size: 16px; padding: 12px 25px;}

    .sl-footer-content {grid-template-columns: 1fr; gap: 30px;}
}

@media (max-width: 480px) {
    .sl-topbar {bottom: 10px; padding: 10px 15px;}
    .sl-topbar-content {gap: 15px;}
    .sl-topbar-phone {font-size: 12px;}
    .sl-topbar-phone span {display: none;}
    .sl-topbar-socials {gap: 6px; padding-left: 10px;}
    .sl-social-link {width: 32px; height: 32px; font-size: 14px;}

    .sl-hero-title {font-size: 28px;}
    .sl-hero-phone {font-size: 20px; padding: 15px 25px;}
    .sl-hero-phone i {font-size: 20px;}

    .sl-section-title {font-size: 24px;}
    .sl-section-subtitle {font-size: 14px;}

    .sl-project-title {font-size: 24px;}
    .sl-price-label {font-size: 10px; padding: 8px 15px;}
    .sl-price-value {font-size: 18px; padding: 8px 20px;}
    .sl-price-note-content p {font-size: 14px;}
    .sl-cta-phone {font-size: 20px; padding: 15px 25px;  gap: 10px;}
}

/* Доступность: Skip-link и screen-reader-only */
.skip-link {
    position: absolute;
    top: -40px;
    left: 6px;
    background: #000;
    color: #fff;
    padding: 8px;
    z-index: 100;
    text-decoration: none;
}
.skip-link:focus { top: 6px; }
.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;
}

/* Иконка для Дзен */
.sl-dzen-icon { width: 18px; height: 18px; }