/* ═══════════════════════════════════════
   ЗАЩИТА КРОМКИ ДВЕРИ — ЛЕНДИНГ
   Аудитория: мужчины, автовладельцы Узбекистана
   Палитра: тёмно-серый + красный акцент + серебро
   ═══════════════════════════════════════ */
:root {
    --red:      #D32F2F;
    --red-d:    #B71C1C;
    --red-l:    #FF5252;
    --dark:     #1A1A2E;
    --dark2:    #16213E;
    --steel:    #2C3E50;
    --silver:   #95A5A6;
    --light:    #ECF0F1;
    --white:    #FFFFFF;
    --cream:    #F8F9FA;
    --orange:   #E67E22;
    --green:    #27AE60;
    --gold:     #F39C12;
    --shadow:   0 4px 24px rgba(0,0,0,.18);
    --shadow-r: 0 4px 20px rgba(211,47,47,.3);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{max-width:480px;margin:0 auto;overflow-x:hidden;}
body{font-family:'Nunito',sans-serif;background:var(--cream);color:var(--dark);}
img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
button{cursor:pointer;border:none;outline:none;}
input{outline:none;}

/* ─── TOP BAR ─── */
.top-bar{
    background:var(--dark);
    color:rgba(255,255,255,.88);
    display:flex;align-items:center;justify-content:center;
    flex-wrap:wrap;gap:4px 10px;
    padding:8px 12px;
    font-size:12px;font-weight:700;text-align:center;
}
.sep{opacity:.35;}

/* ─── HERO ─── */
.hero{
    background:linear-gradient(165deg, var(--dark) 0%, var(--dark2) 50%, #0D0D1A 100%);
    padding:0 0 24px;
    position:relative;overflow:hidden;
}
/* Декоративная полоса сбоку */
.hero::before{
    content:'';position:absolute;top:0;left:0;
    width:4px;height:100%;
    background:linear-gradient(to bottom,var(--red),transparent);
}

.hero-promo-strip{
    background:var(--red);
    color:#fff;
    font-size:13px;font-weight:900;
    text-align:center;padding:9px 16px;
    letter-spacing:.3px;
}

.hero-content{
    padding:20px 18px 16px;
}
.hero-title{
    font-family:'Oswald',sans-serif;
    font-size:34px;font-weight:700;
    color:#fff;line-height:1.1;
    text-transform:uppercase;
    margin-bottom:6px;
}
.hero-model{
    font-size:13px;color:var(--red-l);
    font-weight:800;letter-spacing:.5px;
    margin-bottom:10px;
}
.hero-sub{
    font-size:14px;color:rgba(255,255,255,.75);
    line-height:1.55;
}

/* ─── HERO SLIDER ─── */
.hero-img-wrap{
    position:relative;
    margin:0;
    background:#000;
}
.hero-slides{position:relative;}
.hero-slide{display:none;}
.hero-slide.active{display:block;animation:fadeSlide .4s ease;}
.hero-slide img{width:100%;aspect-ratio:4/3;object-fit:cover;opacity:.92;}
@keyframes fadeSlide{from{opacity:.5}to{opacity:.92}}

.hero-dots{
    position:absolute;bottom:44px;left:50%;transform:translateX(-50%);
    display:flex;gap:5px;
}
.h-dot{
    width:8px;height:8px;border-radius:4px;
    background:rgba(255,255,255,.35);cursor:pointer;transition:all .3s;
}
.h-dot.on{width:20px;background:var(--red);}

.sl-prev,.sl-next{
    position:absolute;top:50%;transform:translateY(-50%);
    background:rgba(0,0,0,.5);color:#fff;
    width:32px;height:32px;border-radius:50%;
    font-size:20px;display:flex;align-items:center;justify-content:center;
    z-index:2;line-height:1;
}
.sl-prev{left:8px;}.sl-next{right:8px;}

.invisible-badge{
    position:absolute;bottom:10px;right:10px;
    background:rgba(0,0,0,.65);color:#fff;
    font-size:11px;font-weight:800;
    padding:4px 10px;border-radius:20px;
    border:1px solid rgba(255,255,255,.2);
    backdrop-filter:blur(4px);
}

/* ─── HERO BOTTOM ─── */
.hero>*:not(.hero-promo-strip):not(.hero-img-wrap){padding-left:18px;padding-right:18px;}

.hero-rating{
    display:flex;align-items:center;gap:8px;
    margin:16px 18px 14px;
    color:rgba(255,255,255,.8);font-size:13px;
}
.stars-row{color:var(--gold);font-size:18px;letter-spacing:2px;}
.half-star{opacity:.4;}

/* ─── PRICE ─── */
.price-block{
    display:flex;align-items:center;justify-content:center;
    gap:10px;margin:0 18px 14px;flex-wrap:wrap;
}
.price-old{font-size:15px;color:rgba(255,255,255,.4);text-decoration:line-through;}
.price-badge{
    background:var(--red);color:#fff;
    font-size:13px;font-weight:900;
    padding:3px 11px;border-radius:12px;
}
.price-new{
    font-family:'Oswald',sans-serif;
    font-size:36px;font-weight:700;color:#fff;line-height:1;
}
.price-new span{font-size:16px;font-family:'Nunito',sans-serif;}

/* ─── TIMER ─── */
.timer-wrap{margin:0 18px 18px;text-align:center;}
.timer-label{font-size:12px;color:rgba(255,255,255,.65);margin-bottom:8px;}
.timer{display:flex;justify-content:center;align-items:center;gap:6px;}
.timer-item{
    background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);
    border-radius:10px;padding:8px 12px;
    display:flex;flex-direction:column;align-items:center;min-width:54px;
}
.timer-item span{font-size:26px;font-weight:900;color:#fff;line-height:1;}
.timer-item small{font-size:9px;color:rgba(255,255,255,.55);margin-top:2px;}
.timer-sep{font-size:22px;color:var(--red);font-weight:900;margin-bottom:14px;}

/* ─── КНОПКА ─── */
.btn-order{
    display:block;width:calc(100% - 36px);margin:0 18px;
    background:linear-gradient(135deg,var(--red-d),var(--red));
    color:#fff;font-size:16px;font-weight:900;
    padding:16px 10px;border-radius:14px;
    text-align:center;letter-spacing:.3px;
    box-shadow:var(--shadow-r);
    transition:transform .15s,box-shadow .15s;
    cursor:pointer;
}
.btn-order:hover{transform:translateY(-2px);box-shadow:0 6px 28px rgba(211,47,47,.45);}
.btn-order:active{transform:scale(.97);}
a.btn-order{display:block;}

.pulse{animation:blink 2s infinite;}
@keyframes blink{
    0%,100%{box-shadow:var(--shadow-r);}
    50%{box-shadow:0 4px 30px rgba(211,47,47,.65),0 0 0 8px rgba(211,47,47,.12);}
}

.hero-trust{
    display:flex;justify-content:center;gap:16px;
    margin:12px 18px 0;flex-wrap:wrap;
}
.ht-item{font-size:12px;color:rgba(255,255,255,.75);font-weight:700;}

/* ─── SECTIONS ─── */
section{padding:28px 18px;}
section:nth-child(even){background:#fff;}

.sec-title{
    font-family:'Oswald',sans-serif;
    font-size:22px;font-weight:700;
    color:var(--dark);text-align:center;
    text-transform:uppercase;
    margin-bottom:6px;
    letter-spacing:.3px;
}
.sec-sub{text-align:center;font-size:14px;color:var(--silver);margin-bottom:16px;}

/* ─── PROBLEM ─── */
.problem-section{background:var(--cream);}
.problem-list{margin:14px 0 16px;}
.prob-item{
    display:flex;align-items:flex-start;gap:12px;
    background:#fff;
    border-left:4px solid var(--red);
    padding:12px 14px;border-radius:0 12px 12px 0;
    font-size:14px;font-weight:600;color:var(--dark);
    margin-bottom:8px;
    box-shadow:0 2px 8px rgba(0,0,0,.06);
    line-height:1.45;
}
.prob-icon{font-size:20px;flex-shrink:0;margin-top:1px;}
.solution-strip{
    background:linear-gradient(135deg,var(--dark),var(--steel));
    color:#fff;text-align:center;
    padding:14px 18px;border-radius:14px;
    font-size:14px;font-weight:800;
    box-shadow:var(--shadow);
}

/* ─── WHAT ─── */
.what-section{background:#fff;}
.main-product-img{
    border-radius:14px;overflow:hidden;
    box-shadow:var(--shadow);margin-bottom:16px;
    position:relative;
}
.main-product-img img{width:100%;}
.img-caption{
    position:absolute;bottom:0;left:0;right:0;
    background:linear-gradient(to top,rgba(0,0,0,.65),transparent);
    color:#fff;font-size:12px;font-weight:700;
    padding:16px 12px 10px;
    text-align:center;
}

.specs-grid{
    display:grid;grid-template-columns:1fr 1fr;gap:10px;
}
.spec-card{
    background:var(--cream);border:1.5px solid #E0E0E0;
    border-radius:12px;padding:14px 10px;text-align:center;
}
.spec-icon{font-size:24px;margin-bottom:4px;}
.spec-val{font-size:15px;font-weight:900;color:var(--dark);margin-bottom:3px;}
.spec-lbl{font-size:11px;color:var(--silver);line-height:1.35;}

/* ─── BENEFITS ─── */
.benefits-section{background:var(--cream);}
.ben-card{
    background:#fff;border-radius:16px;
    overflow:hidden;margin-bottom:14px;
    box-shadow:var(--shadow);
    border:1px solid #E8E8E8;
}
.ben-card img{width:100%;aspect-ratio:16/9;object-fit:cover;}
.ben-card.ben-rev img{order:2;}
.ben-body{padding:16px;}
.ben-body h3{
    font-family:'Oswald',sans-serif;
    font-size:17px;font-weight:600;
    color:var(--dark);margin-bottom:8px;text-transform:uppercase;
}
.ben-body p{font-size:13px;color:#555;line-height:1.6;}

.package-block{
    background:#fff;border-radius:14px;
    padding:16px;box-shadow:var(--shadow);
    border:1px solid #E8E8E8;
}
.pkg-label{
    font-size:14px;font-weight:800;color:var(--dark);
    margin-bottom:10px;
}
.package-block img{width:100%;border-radius:10px;margin-bottom:10px;}
.pkg-note{
    font-size:12px;color:var(--silver);text-align:center;font-weight:600;
}

/* ─── VIDEO ─── */
.video-section{background:#fff;}
.video-wrap{
    border-radius:16px;overflow:hidden;
    box-shadow:var(--shadow);
    background:#000;position:relative;
}
.video-wrap video{width:100%;display:block;max-height:280px;object-fit:cover;}
.video-play-over{
    position:absolute;top:0;left:0;right:0;bottom:0;
    display:flex;align-items:center;justify-content:center;
    background:rgba(0,0,0,.35);cursor:pointer;
}
.vpo-inner{display:flex;flex-direction:column;align-items:center;gap:10px;}
.vpo-btn{
    width:62px;height:62px;border-radius:50%;
    background:var(--red);
    display:flex;align-items:center;justify-content:center;
    font-size:24px;color:#fff;padding-left:4px;
    box-shadow:0 4px 20px rgba(211,47,47,.5);
}
.video-play-over span{
    color:#fff;font-size:14px;font-weight:800;
    background:rgba(0,0,0,.5);padding:5px 16px;border-radius:20px;
}

/* ─── STEPS ─── */
.steps-section{background:var(--cream);}
.steps{display:flex;flex-direction:column;gap:6px;}
.step-row{
    display:flex;align-items:center;gap:14px;
    background:#fff;border-radius:12px;padding:14px 16px;
    box-shadow:0 2px 8px rgba(0,0,0,.05);
    border-left:4px solid var(--red);
}
.step-num{
    font-family:'Oswald',sans-serif;
    font-size:28px;font-weight:700;
    color:var(--red);opacity:.55;min-width:36px;line-height:1;
}
.step-txt{font-size:14px;color:var(--dark);line-height:1.5;}
.step-txt b{color:var(--dark);font-weight:900;}

/* ─── REVIEWS ─── */
.reviews-section{background:#fff;}
.rev-summary{
    display:flex;align-items:center;justify-content:center;gap:10px;
    margin-bottom:18px;
}
.rev-big-stars{font-size:22px;color:var(--gold);letter-spacing:2px;}
.rev-big-stars span{opacity:.3;}
.rev-score-txt{font-size:14px;color:var(--dark);}

.rev-slider-wrap{overflow:hidden;margin:0 -18px;}
.rev-track{
    display:flex;gap:12px;
    padding:0 18px 8px;
    overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.rev-track::-webkit-scrollbar{display:none;}

.rev-card{
    flex-shrink:0;min-width:285px;max-width:285px;
    background:var(--cream);border-radius:16px;padding:16px;
    box-shadow:0 3px 14px rgba(0,0,0,.08);
    scroll-snap-align:start;
    border:1px solid #E0E0E0;
}
.rev-top{display:flex;align-items:flex-start;gap:10px;margin-bottom:12px;}
.rev-ava{
    width:42px;height:42px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-size:17px;font-weight:900;color:#fff;flex-shrink:0;
}
.rev-meta{flex:1;min-width:0;}
.rev-name{font-size:14px;font-weight:800;color:var(--dark);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.rev-city{font-size:11px;color:var(--silver);font-weight:400;}
.rev-stars{color:var(--gold);font-size:13px;letter-spacing:1px;}
.rev-date{font-size:10px;color:var(--silver);margin-top:2px;}
.rev-ok{font-size:10px;color:var(--green);font-weight:800;white-space:nowrap;}

.rev-img-wrap{
    border-radius:10px;overflow:hidden;margin-bottom:10px;
    aspect-ratio:4/3;background:#E8E8E8;
}
.rev-img-wrap img{width:100%;height:100%;object-fit:cover;}

.rev-text{font-size:13px;color:#444;line-height:1.55;font-style:italic;}
.rev-tag{
    display:inline-block;margin-top:10px;
    background:#fff;color:var(--steel);
    border-radius:20px;padding:4px 12px;
    font-size:11px;font-weight:800;
    border:1px solid #D0D0D0;
}

.rev-nav{
    display:flex;align-items:center;justify-content:center;
    gap:12px;padding:12px 18px 0;
}
.rev-prev,.rev-next{
    background:var(--red);color:#fff;
    width:38px;height:38px;border-radius:50%;
    font-size:18px;display:flex;align-items:center;justify-content:center;
}
.rev-prev:active,.rev-next:active{background:var(--red-d);}
.rev-dots{display:flex;gap:6px;}
.rd{
    width:8px;height:8px;border-radius:50%;
    background:#ccc;cursor:pointer;transition:all .3s;
}
.rd.on{background:var(--red);width:20px;border-radius:4px;}

/* ─── ORDER ─── */
.order-section{
    background:linear-gradient(165deg,var(--dark) 0%,var(--dark2) 60%,#0D0D1A 100%);
    padding:24px 18px 30px;text-align:center;
    position:relative;overflow:hidden;
}
.order-section::before{
    content:'';position:absolute;top:0;left:0;
    width:4px;height:100%;
    background:linear-gradient(to bottom,var(--red),transparent);
}

.order-urgency{
    display:inline-flex;align-items:center;gap:8px;
    background:rgba(211,47,47,.2);border:1px solid rgba(211,47,47,.4);
    color:#FF8A80;font-size:12px;font-weight:800;
    padding:6px 14px;border-radius:20px;margin-bottom:14px;
}
.urgency-dot{
    width:8px;height:8px;border-radius:50%;
    background:var(--red-l);animation:blink 1s infinite;
}

.order-title{
    font-family:'Oswald',sans-serif;
    font-size:26px;font-weight:700;
    color:#fff;margin-bottom:16px;
    text-transform:uppercase;line-height:1.2;
}

.order-photo{
    border-radius:14px;overflow:hidden;
    margin-bottom:18px;
    box-shadow:0 6px 28px rgba(0,0,0,.4);
}
.order-photo img{width:100%;}

.field{
    display:block;width:100%;padding:14px 16px;
    border-radius:12px;
    border:2px solid rgba(255,255,255,.15);
    background:rgba(255,255,255,.08);
    color:#fff;font-size:15px;font-family:'Nunito',sans-serif;
    margin-bottom:12px;transition:border .2s;
}
.field::placeholder{color:rgba(255,255,255,.45);}
.field:focus{border-color:var(--red-l);background:rgba(255,255,255,.14);}

.order-form .btn-order{width:100%;margin:0;}

.order-micro{
    display:flex;flex-direction:column;gap:7px;
    margin-top:16px;
}
.om-item{font-size:13px;color:rgba(255,255,255,.8);font-weight:700;}

/* ─── FOOTER ─── */
.footer{
    background:var(--dark);padding:18px;
    display:flex;flex-direction:column;align-items:center;gap:8px;
}
.footer a{font-size:12px;color:var(--silver);}