:root{--bg:#0f172a;--bg2:#111c35;--card:#1e293b;--card-hover:#253349;--yellow:#fbbf24;--yellow-hover:#f59e0b;--blue:#38bdf8;--blue-hover:#0ea5e9;--text:#ffffff;--muted:#94a3b8;--border:rgba(255,255,255,.08);--radius:24px;--shadow:0 10px 30px rgba(0,0,0,.25);--container:1280px;}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
#offers{scroll-margin-top:90px;}
body{font-family:'Inter',sans-serif;background:radial-gradient(circle at top left,#172554 0%,transparent 30%),radial-gradient(circle at top right,#164e63 0%,transparent 25%),var(--bg);color:var(--text);line-height:1.6;overflow-x:hidden;margin: 0;}
img{max-width:100%;display:block;}
a{text-decoration:none;color:inherit;}
button{border:none;cursor:pointer;font-family:inherit;}
ul{list-style:none;}
.container{max-width:var(--container);margin:auto;padding:0 20px;background: transparent;}
.header{position:relative;top:0;z-index:100;backdrop-filter:blur(16px);background:rgba(15,23,42,.85);border-bottom:1px solid var(--border);}
.header .container{height:90px;display:flex;align-items:center;justify-content:space-between;}
.logo{display:flex;align-items:center;gap:14px;}
.logo-icon {width: 65px;height: 65px;border-radius: 15px;display: block;box-shadow: 0 0 10px rgba(251,191,36,.45);}
.logo-text{font-size:28px;font-weight:800;}
@media(max-width:480px){.logo{max-width:100%;}.logo-text{font-size:20px;}.logo-icon{width:50px;height:50px;}}
nav{display:flex;align-items:center;gap:24px;}
nav a{color:var(--muted);font-weight:600;transition:.25s;}
nav a:hover{color:#fff;}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:16px 28px;border-radius:18px;font-weight:700;transition:.3s;white-space:nowrap;}
@media(max-width:480px){.btn{white-space:normal;max-width:100%;padding:14px 20px;}}
.btn-yellow{background:var(--yellow);color:#000;animation:pulseYellow 2.5s infinite;}
.btn-yellow:hover{background:var(--yellow-hover);transform:translateY(-3px) scale(1.03);animation-play-state:paused;}
.btn-blue{background:var(--blue);color:#fff;animation:pulseBlue 2.5s infinite;}
.btn-blue:hover{background:var(--blue-hover);transform:translateY(-3px) scale(1.03);animation-play-state:paused;}
@keyframes pulseYellow{0%{transform:scale(1);box-shadow:0 0 0 rgba(251,191,36,0);}50%{transform:scale(1.04);box-shadow:0 0 25px rgba(251,191,36,.45);}100%{transform:scale(1);box-shadow:0 0 0 rgba(251,191,36,0);}}
@keyframes pulseBlue{0%{transform:scale(1);box-shadow:0 0 0 rgba(59,130,246,0);}50%{transform:scale(1.04);box-shadow:0 0 25px rgba(59,130,246,.45);}100%{transform:scale(1);box-shadow:0 0 0 rgba(59,130,246,0);}}
.hero{padding:20px 0 100px;position:relative;}
.hero-stats{display:flex;justify-content:center;align-items:center;gap:40px;margin-top:30px;flex-wrap:wrap;}
.hero-stat{display:flex;flex-direction:column;align-items:center;text-align:center;}
.hero-stat strong{font-size:28px;color:var(--yellow);}
.hero-stat span{opacity:.7;}
.hero::before{content:"";position:absolute;width:700px;height:700px;top:-200px;left:-200px;}
.hero .container{text-align:center;position:relative;z-index:2;}
.hero-subtitle{display:inline-block;color:var(--blue);font-size:18px;font-weight:700;margin-bottom:20px;}
.hero h1{font-size:54px;line-height:1.1;font-weight:800;max-width:950px;margin:auto;}
.hero p{max-width:800px;margin:28px auto 42px;color:var(--muted);font-size:20px;}
.hero-buttons{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;}
.partners-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:20px;align-items:center;}
.partners h2{text-align:center;margin-bottom:30px;}
.partners-grid img{height:100px;margin:auto;filter:grayscale(100%);opacity:.8;transition:.3s;}
.partners-grid img:hover{filter:none;opacity:1;}

.trust-stats{

    display:grid;

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

    gap:20px;

    margin-top:40px;

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

    border:1px solid rgba(255,255,255,.08);

    border-radius:24px;

    padding:30px;
	
    width:100%;

    max-width:100%;

    overflow:hidden;	

}



.trust-stats div{

    text-align:center;

    min-width:0;

}



.trust-stats strong{

    display:block;

    font-size:32px;

    color:var(--yellow);

    white-space:nowrap;

}



.trust-stats span{

    display:block;

    overflow-wrap:anywhere;

}





@media(max-width:900px){


.trust-stats{

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

    padding:20px;

    gap:20px;

}



.trust-stats strong{

    font-size:26px;

}


}





@media(max-width:480px){


.trust-stats{

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

    padding:15px;

    gap:15px;

}



.trust-stats strong{

    font-size:24px;

}



.trust-stats span{

    font-size:14px;

}


}

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

.advantages{
    padding-bottom:100px;
}

.advantages-grid{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:18px;
}

.advantage-card{
    background:rgba(255,255,255,.04);

    backdrop-filter:blur(12px);

    border:1px solid rgba(255,255,255,.08);

    border-radius:22px;

    padding:28px 20px;

    transition:.35s;
}

.advantage-card:hover{
    transform:translateY(-8px);
    background:rgba(255,255,255,.07);
}

.advantage-number{
    font-size:28px;
    font-weight:800;

    color:var(--yellow);

    margin-bottom:10px;
}

.advantage-text{
    color:var(--muted);
    font-size:14px;
}

/* =========================
   SECTION TITLE
========================= */

.section{
    padding:110px 0;
}

.section-title{
    text-align:center;
    margin-bottom:20px;

    font-size:52px;
    font-weight:800;
}

.section-description{
    text-align:center;

    color:var(--muted);

    max-width:750px;

    margin:auto auto 60px;
}

/* =========================
   GLASS CARD
========================= */

.glass-card{
    background:
        rgba(255,255,255,.04);

    backdrop-filter:blur(12px);

    border:
        1px solid rgba(255,255,255,.08);

    border-radius:var(--radius);

    box-shadow:var(--shadow);
}

/* =========================
   FOOTER
========================= */

.footer{
    margin-top:120px;

    border-top:
        1px solid rgba(255,255,255,.08);

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

    padding-top:70px;
}

.footer-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
}

.footer h3{
    font-size:24px;
    margin-bottom:18px;
}

.footer p{
    color:var(--muted);
}

.copyright{
    text-align:center;

    color:var(--muted);

    border-top:
        1px solid rgba(255,255,255,.08);

    margin-top:50px;

    padding:30px;
}

/* =========================
   SCROLLBAR
========================= */

::-webkit-scrollbar{
    width:10px;
}

::-webkit-scrollbar-track{
    background:#111827;
}

::-webkit-scrollbar-thumb{
    background:#334155;
    border-radius:20px;
}

::-webkit-scrollbar-thumb:hover{
    background:#475569;
}

/* =========================
   ANIMATIONS
========================= */

@keyframes fadeUp{

    from{
        opacity:0;
        transform:
        translateY(40px);
    }

    to{
        opacity:1;
        transform:
        translateY(0);
    }
}

.hero,
.advantages,
.section{
    animation:
        fadeUp .8s ease;
}

/* =========================
   TABLET
========================= */

@media(max-width:1200px){

    .advantages-grid{
        grid-template-columns:
        repeat(3,1fr);
    }

    .hero h1{
        font-size:58px;
    }
}

/* =========================
   MOBILE
========================= */

@media(max-width:768px){

    .header .container{
        height:auto;
        padding:20px;
        flex-direction:column;
        gap:20px;
    }

    nav{
        flex-wrap:wrap;
        justify-content:center;
    }

    .hero{
        padding:80px 0;
    }

    .hero h1{
        font-size:42px;
    }

    .hero p{
        font-size:17px;
    }

    .hero-buttons{
        flex-direction:column;
    }

    .btn{
        width:100%;
    }

    .advantages-grid{
        grid-template-columns:1fr;
    }

    .section-title{
        font-size:36px;
    }

    .footer-grid{
        grid-template-columns:1fr;
    }
}

/* =========================
   SMALL MOBILE
========================= */

@media(max-width:480px){

    .logo-text{
        font-size:22px;
    }

    .hero h1{
        font-size:34px;
    }

    .section-title{
        font-size:30px;
    }

}

.offer-image {
    width: 100%;
    height: 180px;          /* высота блока картинки */
    overflow: hidden;
    border-radius: 16px 16px 0 0;
    background: #0f172a;
    position: relative;
}

.categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 18px;

    margin-top: 35px;
}

.category-card {
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 20px;

    padding: 22px;

    transition: .2s;
}

.category-card:hover {
    transform: translateY(-3px);
    background: rgba(255,255,255,.07);
}

.category-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 8px;
}

.category-count {
    font-size: 14px;
    opacity: .7;
}

#scrollTopBtn{

    position:fixed;

    right:25px;
    bottom:25px;

    width:52px;
    height:52px;

    border:none;

    border-radius:50%;

    background:var(--yellow);

    color:black;

    font-size:22px;

    cursor:pointer;

    opacity:0;

    visibility:hidden;

    transition:.3s;

    z-index:999;
}

#scrollTopBtn.show{
    opacity:1;
    visibility:visible;
}

.top-nav{
    position:sticky;
    top:0px;
    z-index:90;
    background:rgba(15,23,42,.85);
    border-bottom:1px solid var(--border);
    padding:15px 0;
}

.pagination{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:10px;
    margin-top:20px;
    flex-wrap:wrap;
	padding-bottom:10px;
}

.pagination-btn{
    min-width:44px;
    height:44px;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:0 16px;

    border-radius:12px;

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

    border:1px solid rgba(255,255,255,.08);

    color:#fff;
    text-decoration:none;

    transition:.25s;
}

.pagination-btn:hover{
    transform:translateY(-2px);
    border-color:var(--yellow);
}

.pagination-btn.active{
    background:var(--yellow);
    color:#111827;
    border-color:var(--yellow);
}

.pwa-install-box{


display:none;


align-items:center;


gap:20px;


padding:20px 25px;


margin:30px auto;


max-width:900px;



background:

rgba(255,255,255,.08);



backdrop-filter:

blur(15px);



border:

1px solid rgba(255,255,255,.15);



border-radius:24px;



box-shadow:

0 20px 40px rgba(0,0,0,.15);



}



.pwa-icon{


font-size:40px;


}




.pwa-text{


flex:1;


}



.pwa-text h3{


margin:0 0 5px;


}



.pwa-text p{


margin:0;


opacity:.8;


}





#installPwaBtn{


border:0;


padding:12px 25px;


border-radius:14px;


background:

linear-gradient(
135deg,
#facc15,
#f59e0b
);



font-weight:700;


cursor:pointer;


transition:.3s;


}



#installPwaBtn:hover{


transform:

translateY(-2px);


}




@media(max-width:600px){


.pwa-install-box{


flex-direction:column;


text-align:center;


}


}

.pwa-banner{

display:flex;
align-items:center;
gap:20px;

margin:35px auto;

padding:22px;

border-radius:22px;

background:
linear-gradient(
135deg,
#1e293b,
#0f172a
);

border:
1px solid rgba(255,255,255,.08);

box-shadow:
0 20px 50px rgba(0,0,0,.15);

}

.pwa-banner-icon{

font-size:42px;

}

.pwa-banner-content{

flex:1;

}

.pwa-banner h3{

margin:0 0 8px;

}

.pwa-banner p{

margin:0;

opacity:.85;

}

@media(max-width:768px){

.pwa-banner{

flex-direction:column;
text-align:center;

}

}

.pwa-popup{

position:fixed;

right:25px;
bottom:25px;

width:360px;

background:#fff;

border-radius:24px;

box-shadow:0 20px 60px rgba(0,0,0,.25);

padding:24px;

z-index:99999;

display:none;

animation:pwaShow .4s ease;

}

@keyframes pwaShow{

from{

opacity:0;

transform:translateY(40px);

}

to{

opacity:1;

transform:none;

}

}

.pwa-logo{

width:72px;
height:72px;

margin-bottom:15px;

}

.pwa-logo img{

width:100%;

border-radius:18px;

}

.pwa-info h3{

margin:0 0 10px;

font-size:22px;

}

.pwa-info p{

margin:0 0 20px;

line-height:1.5;

color:#666;

}

.pwa-install-btn{

width:100%;

padding:15px;

border:none;

border-radius:16px;

font-size:16px;

font-weight:700;

cursor:pointer;

background:linear-gradient(135deg,#facc15,#f59e0b);

transition:.25s;

}

.pwa-install-btn:hover{

transform:translateY(-2px);

}

.pwa-close{

position:absolute;

right:12px;
top:12px;

border:none;

background:none;

font-size:20px;

cursor:pointer;

opacity:.5;

}

.pwa-close:hover{

opacity:1;

}

@media(max-width:768px){

.pwa-popup{

left:15px;

right:15px;

bottom:15px;

width:auto;

}

}

html,
body{
    max-width:100%;
    overflow-x:hidden;
}


@media(max-width:768px){

.container{
    width:100%;
    padding-left:15px;
    padding-right:15px;
}


.finance-box{

    width:100%;
    padding:20px;

}


.calc-grid{

    grid-template-columns:minmax(0,1fr);

}


.calc-left,
.calc-right{

    width:100%;
    min-width:0;

}

}


section,
.container,
.row,
.grid{

    max-width:100%;

}

/* ===================================
   CATEGORY SEO BLOCKS
=================================== */


.category-seo-top,
.category-seo-bottom{

max-width:1280px;

margin:40px auto;

padding:32px;

background:

linear-gradient(
145deg,
rgba(30,41,59,.95),
rgba(15,23,42,.95)
);

border:1px solid rgba(255,255,255,.08);

border-radius:24px;

box-shadow:

0 15px 40px rgba(0,0,0,.25);

display:flex;

gap:25px;

color:#fff;

}



.seo-icon{

font-size:42px;

min-width:55px;

}



.seo-content h2,
.category-seo-bottom h2{

margin:0 0 18px;

font-size:24px;

color:#fbbf24;

}



.seo-content div,
.seo-bottom-text{

font-size:16px;

line-height:1.8;

color:#cbd5e1;

}




.category-seo-bottom{

display:block;

}



.category-seo-bottom h2{

margin-bottom:20px;

}





@media(max-width:768px){


.category-seo-top,
.category-seo-bottom{

padding:22px;

border-radius:18px;

margin:25px 15px;

}



.category-seo-top{

flex-direction:column;

}



.seo-icon{

font-size:32px;

}



.seo-content h2,
.category-seo-bottom h2{

font-size:20px;

}


.seo-content div,
.seo-bottom-text{

font-size:15px;

line-height:1.7;

}


}