/* =========================
   RESET
========================= */


* {

    margin:0;

    padding:0;

    box-sizing:border-box;

}


html {

    scroll-behavior:smooth;

}



body {

    font-family:Arial, Helvetica, sans-serif;

    color:#111827;

    background:#ffffff;

}



img {

    max-width:100%;

    display:block;

}



.container {

    width:90%;

    max-width:1200px;

    margin:auto;

}



/* =========================
 HEADER
========================= */


.header {

    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:1000;

    background:rgba(255,255,255,.8);

    backdrop-filter:blur(15px);

}



.header-container {

    height:85px;

    display:flex;

    justify-content:space-between;

    align-items:center;

}



.logo {

    font-size:22px;

    font-weight:700;

    letter-spacing:-.5px;

}



.menu {

    display:flex;

    gap:35px;

}



.menu a {

    text-decoration:none;

    color:#374151;

    font-size:15px;

    transition:.3s;

}



.menu a:hover {

    color:#2563eb;

}



.header-button {


    text-decoration:none;

    color:white;

    background:#2563eb;

    padding:14px 30px;

    border-radius:50px;

    font-weight:600;

}





/* =========================
 HERO
========================= */


.hero {

    padding-top:150px;

    padding-bottom:100px;

    background:

    linear-gradient(
    180deg,
    #ffffff,
    #f8fafc
    );

}



.hero-container {

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:60px;

}



.hero-content {

    width:52%;

}



.badge {

    display:inline-block;

    background:#111827;

    color:white;

    padding:8px 18px;

    border-radius:50px;

    font-size:14px;

    font-weight:600;

    margin-bottom:25px;

}



.hero h1 {

    font-size:64px;

    line-height:1.05;

    letter-spacing:-3px;

    margin-bottom:25px;

}



.rating {

    font-size:18px;

    color:#f59e0b;

    margin-bottom:25px;

}



.rating span {

    color:#6b7280;

    font-size:14px;

    margin-left:10px;

}



.hero p {

    color:#6b7280;

    font-size:20px;

    line-height:1.6;

    margin-bottom:30px;

}



.price {

    display:flex;

    align-items:center;

    gap:20px;

    margin-bottom:35px;

}



.old-price {

    color:#9ca3af;

    font-size:25px;

    text-decoration:line-through;

}



.new-price {

    font-size:42px;

    font-weight:800;

}



.main-button {

    display:inline-block;

    background:#2563eb;

    color:white;

    text-decoration:none;

    padding:18px 45px;

    border-radius:50px;

    font-size:18px;

    font-weight:700;

    transition:.3s;

}



.main-button:hover {

    transform:translateY(-3px);

    box-shadow:0 15px 30px rgba(37,99,235,.3);

}



.trust {

    display:flex;

    gap:25px;

    margin-top:40px;

    color:#374151;

    font-size:14px;

}



.hero-image {

    width:42%;

}



.hero-image img {

    filter:

    drop-shadow(0 30px 40px rgba(0,0,0,.15));

}






/* =========================
 GENERAL
========================= */


section {

    padding:100px 0;

}



h2 {

    text-align:center;

    font-size:42px;

    letter-spacing:-1px;

    margin-bottom:60px;

}

/* =========================
   ADVANTAGES
========================= */


.advantages {

    background:#ffffff;

}



.advantages-grid {

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:25px;

}



.advantage-card {


    background:#f8fafc;

    padding:40px 25px;

    border-radius:28px;

    text-align:center;

    transition:.3s;

}



.advantage-card:hover {


    transform:translateY(-8px);

    box-shadow:0 20px 45px rgba(0,0,0,.08);


}



.advantage-icon {


    width:70px;

    height:70px;

    margin:0 auto 25px;

    background:#ffffff;

    border-radius:20px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:32px;


}



.advantage-card h3 {


    font-size:22px;

    margin-bottom:15px;


}



.advantage-card p {


    color:#6b7280;

    line-height:1.6;

}

/* =========================
   GALLERY
========================= */


.gallery {

    background:#f8fafc;

}



.gallery-wrapper {

    max-width:900px;

    margin:auto;

}



.gallery-main {


    background:white;

    border-radius:40px;

    padding:60px;

    display:flex;

    justify-content:center;

    align-items:center;

    box-shadow:

    0 30px 70px rgba(0,0,0,.08);


}



.gallery-main-image {


    max-height:520px;

    transition:.5s;


}



.gallery-main-image:hover {


    transform:scale(1.05);


}



.gallery-thumbs {


    display:flex;

    justify-content:center;

    gap:20px;

    margin-top:35px;


}



.gallery-thumb {


    width:100px;

    height:100px;

    object-fit:cover;

    border-radius:20px;

    cursor:pointer;

    opacity:.6;

    transition:.3s;


}



.gallery-thumb:hover,
.gallery-thumb.active {


    opacity:1;

    transform:translateY(-5px);

    box-shadow:

    0 15px 35px rgba(0,0,0,.15);


}

/* =========================
   USE CASES
========================= */
.use-cases {
    background: #ffffff;
    padding: 100px 0;
}

.use-cases h2 {
    text-align: center;
    font-size: 42px;
    letter-spacing: -1px;
    margin-bottom: 60px;
}

.use-cases-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}

.use-case-card {
    background: #f8fafc;
    padding: 40px 25px;
    border-radius: 28px;
    text-align: center;
    transition: .3s;
}

.use-case-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 45px rgba(0,0,0,.08);
}

.use-case-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 25px;
    background: #ffffff;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
}

.use-case-card h3 {
    font-size: 22px;
    margin-bottom: 15px;
}

.use-case-card p {
    color: #6b7280;
    line-height: 1.6;
}


/* =========================
   COMFORT
========================= */
.comfort {
    background: #f8fafc;
    padding: 100px 0;
}

.comfort-container {
    display: flex;
    align-items: center;
    gap: 60px;
}

.comfort-image {
    width: 48%;
}

.comfort-image img {
    width: 100%;
    border-radius: 30px;
    box-shadow: 0 30px 60px rgba(0,0,0,.1);
}

.comfort-content {
    width: 52%;
}

.comfort-content h2 {
    text-align: left;
    font-size: 42px;
    line-height: 1.15;
    letter-spacing: -1px;
    margin-bottom: 30px;
}

.comfort-content p {
    color: #6b7280;
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 30px;
}

.comfort-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.comfort-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 17px;
    color: #111827;
    margin-bottom: 16px;
}

.comfort-list li::before {
    content: "✓";
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: #2563eb;
    color: white;
    border-radius: 50%;
    font-size: 13px;
    flex-shrink: 0;
}



/* =========================
   FEATURES
========================= */


.features {

    background:#f8fafc;

}



.features-grid {


    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:25px;


}



.feature-item {


    background:white;

    padding:35px;

    border-radius:25px;

    transition:.3s;


}



.feature-item:hover {


    transform:translateY(-5px);

    box-shadow:0 20px 40px rgba(0,0,0,.08);


}



.feature-title {


    font-size:20px;

    font-weight:700;

    margin-bottom:15px;


}



.feature-item p {


    color:#6b7280;

    line-height:1.6;


}



/* =========================
   REVIEWS — DESKTOP
========================= */

.reviews-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}

.reviews-grid .review-card {
    background: #f8fafc;
    padding: 35px 30px;
    border-radius: 28px;
}

.reviews-grid .review-stars {
    color: #f59e0b;
    font-size: 22px;
    letter-spacing: 3px;
    margin-bottom: 20px;
}

.reviews-grid .review-card h3 {
    font-size: 20px;
    margin-bottom: 15px;
}

.reviews-grid .review-card p {
    color: #6b7280;
    line-height: 1.6;
}

/* Мобильная карусель скрыта на десктопе */
.reviews-carousel-wrapper {
    display: none;
}

/* =========================
   REVIEWS — MOBILE CAROUSEL
========================= */
@media (max-width: 768px) {
    .reviews-grid {
        display: none;
    }

    .reviews-carousel-wrapper {
        display: block;
        position: relative;
    }

    .reviews-carousel {
        display: flex;
        gap: 15px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding: 5px 0 15px 0;
        scroll-behavior: smooth;
    }

    .reviews-carousel::-webkit-scrollbar {
        display: none;
    }

    .reviews-carousel .review-card {
        flex: 0 0 85%;
        scroll-snap-align: center;
        background: #f8fafc;
        padding: 30px 25px;
        border-radius: 28px;
        min-height: 180px;
    }

    .reviews-carousel .review-stars {
        color: #f59e0b;
        font-size: 22px;
        letter-spacing: 3px;
        margin-bottom: 20px;
    }

    .reviews-carousel .review-card h3 {
        font-size: 20px;
        margin-bottom: 15px;
    }

    .reviews-carousel .review-card p {
        color: #6b7280;
        line-height: 1.6;
        font-size: 15px;
    }

    .reviews-dots {
        display: flex;
        justify-content: center;
        gap: 8px;
        margin-top: 10px;
    }

    .reviews-dots .dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #d1d5db;
        transition: 0.3s;
        cursor: pointer;
    }

    .reviews-dots .dot.active {
        background: #2563eb;
        width: 24px;
        border-radius: 4px;
    }
}

/* Маленькие мобильные */
@media (max-width: 600px) {
    .reviews-carousel .review-card {
        flex: 0 0 88%;
        padding: 25px 20px;
        border-radius: 22px;
        min-height: 160px;
    }

    .reviews-carousel .review-stars {
        font-size: 18px;
        letter-spacing: 2px;
        margin-bottom: 15px;
    }

    .reviews-carousel .review-card h3 {
        font-size: 18px;
        margin-bottom: 12px;
    }

    .reviews-carousel .review-card p {
        font-size: 14px;
    }
}


/* =========================
   DELIVERY
========================= */


.delivery {


    background:#f8fafc;


}



.delivery-grid {


    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;


}



.delivery-card {


    background:white;

    padding:40px 30px;

    border-radius:30px;

    text-align:center;


}



.delivery-icon {


    width:70px;

    height:70px;

    margin:0 auto 25px;

    border-radius:50%;

    background:#111827;

    color:white;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:22px;

    font-weight:700;


}



.delivery-card h3 {


    font-size:23px;

    margin-bottom:15px;


}



.delivery-card p {


    color:#6b7280;

    line-height:1.6;


}



.delivery-note {


    margin-top:45px;

    text-align:center;

    font-size:20px;

    font-weight:600;

    color:#111827;


}

/* =========================
   ORDER FORM
========================= */


.order {

    background:#111827;

    color:white;

}



.order-wrapper {


    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;


}



.order-info h2 {


    text-align:left;

    color:white;

    margin-bottom:25px;


}



.order-info p {


    color:#d1d5db;

    font-size:18px;

    line-height:1.6;


}



.order-price {


    margin:35px 0;

    font-size:20px;


}



.order-price strong {


    display:block;

    font-size:42px;

    margin-top:10px;


}



.order-benefits {


    display:flex;

    flex-direction:column;

    gap:15px;


}



.order-form {


    background:white;

    padding:40px;

    border-radius:30px;


}



.order-form input,
.order-form input,
.order-form .custom-select-trigger {
    width: 100%;
    padding: 17px;
    margin-bottom: 15px;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    font-size: 16px;
    background-color: #fff;
    color: #111827;
}

.order-form input::placeholder {
    color: #9ca3af;
}

/* =========================
   CUSTOM DROPDOWN
========================= */
.custom-select {
    position: relative;
    margin-bottom: 15px;
    z-index: 10;
}

.custom-select-trigger {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    user-select: none;
    transition: border-color 0.2s;
}

.custom-select-trigger:hover {
    border-color: #2563eb;
}

.custom-select.open .custom-select-trigger {
    border-color: #2563eb;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.custom-select-options {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-top: none;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.2s, opacity 0.2s;
    z-index: 100;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

.custom-select.open .custom-select-options {
    max-height: 300px;
    opacity: 1;
}

.custom-option {
    padding: 14px 17px;
    cursor: pointer;
    font-size: 16px;
    color: #374151;
    border-bottom: 1px solid #f3f4f6;
    transition: background 0.15s;
}

.custom-option:last-child {
    border-bottom: none;
}

.custom-option:hover,
.custom-option.active {
    background: #eff6ff;
    color: #2563eb;
}

/* Ensure dropdown doesn't get cut off at bottom of form */
.order-wrapper {
    position: relative;
    overflow: visible;
}

.order-form {
    position: relative;
    overflow: visible;
}

/* Fix for iOS Safari select dropdown positioning */
.order-form select:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* Ensure the select container doesn't clip the dropdown */
.order-form {
    position: relative;
    overflow: visible;
}

/* Mobile-specific fix for select dropdown */
@media (max-width: 768px) {
    .order-form select {
        font-size: 16px; /* Prevents iOS zoom on focus */
        transform: translateZ(0); /* Forces GPU layer, fixes positioning */
        -webkit-transform: translateZ(0);
    }
}

.order-form input::placeholder {

    color:#9ca3af;

}



.order-form button {


    width:100%;

    padding:18px;

    border:none;

    border-radius:50px;

    background:#2563eb;

    color:white;

    font-size:18px;

    font-weight:700;

    cursor:pointer;


}



.form-note {


    color:#9ca3af;

    font-size:12px;

    margin-top:15px;

    text-align:center;


}


/* =========================
FOOTER
========================= */
.footer {
    background: #0b0f19;
    color: #d1d5db;
    padding: 40px 0 25px;
    font-size: 14px;
    line-height: 1.6;
    text-align: center;
}

.footer-worktime {
    color: #ffffff;
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 20px;
}

.footer-links-row {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px 28px;
    margin-bottom: 20px;
}

.footer-links-row a {
    color: #9ca3af;
    text-decoration: none;
    font-size: 14px;
    transition: 0.3s;
}

.footer-links-row a:hover {
    color: #60a5fa;
}

.footer-ip {
    color: #4b5563;
    font-size: 11px;
    margin-bottom: 8px;
}

.footer-toggle-text {
    display: inline-block;
    color: #4b5563;          /* ← был #60a5fa, стал как у ИП */
    font-size: 11px;         /* ← был 13px, стал как у ИП */
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
    margin-bottom: 15px;
    user-select: none;
}

.footer-toggle-text:hover {
    color: #6b7280;          /* ← чуть светлее при наведении */
}

.footer-details {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    padding: 20px 25px;
    margin: 0 auto 15px auto;
    text-align: left;
    max-width: 600px;
}

.footer-details[hidden] {
    display: none !important;
}

.footer-details:not([hidden]) {
    display: block;
}

.footer-details p {
    color: #9ca3af;
    margin-bottom: 8px;
    font-size: 14px;
}

.footer-details p:last-child {
    margin-bottom: 0;
}

.footer-details a {
    color: #60a5fa;
    text-decoration: none;
}

.footer-details a:hover {
    text-decoration: underline;
}

.footer-copyright {
    color: #4b5563;
    font-size: 11px;
}