.navbar {
    background-color: #1d262b !important;
}
.navbar-brand img {
    max-height: 60px;
}
.navbar .nav-link {
    color: #ffffff !important;
}
.navbar .nav-link:hover {
    color: #ffc107 !important;
}
.navbar-brand span {
    color: #ffffff;
}
.navbar-toggler {
    border-color: rgba(255, 255, 255, 0.5);
}
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba%28255,255,255,1%29' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}
.hero {
    min-height: 55vh;
    display: grid;
    place-items: center;
    overflow: hidden;
}
.hero-bg {
    position: absolute; inset: 0;
    background-image: url("../img/6195678.jpg");
    background-size: cover;
    background-position: center;
    transform: scale(1.03);
    filter: saturate(0.9);
}
.hero-overlay {
    position: absolute; inset: 0;
    background:
            radial-gradient(120% 90% at 50% 40%, rgba(0,0,0,0) 0%, rgba(0,0,0,0.35) 55%, rgba(0,0,0,0.55) 100%),
            linear-gradient(0deg, rgba(0,0,0,0.55), rgba(0,0,0,0.35));
}
.hero h1 { text-shadow: 0 2px 14px rgba(0,0,0,0.45); }
.hero p  { text-shadow: 0 1px 10px rgba(0,0,0,0.35); }

@media (min-width: 992px) {
    .hero { min-height: 65vh; }
    .hero .lead { font-size: 1.2rem; }

    .navbar-brand img {
        max-height: 48px;
    }
}
.offer-card{
    background:#1e262b;
    border:1px solid rgba(255,255,255,.07);
    box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.rank{ font-size: clamp(1.75rem, 2vw + 1rem, 2.5rem); line-height:1; }
.badge-float{
    background:#8ff6de; color:#0f2a25; letter-spacing:.3px;
    box-shadow:0 8px 20px rgba(0,0,0,.25);
}
.logo-panel{
    min-height:130px; padding:24px;
    background: linear-gradient(145deg,#202a2f,#1b2328);
    border:1px solid rgba(255,255,255,.09);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.35);
}
.offer-title{ font-size: clamp(1.3rem, 1.1vw + 1rem, 2rem); }

.btn-cta{
    background:linear-gradient(135deg,#78d0ff,#7df3bf);
    color:#0b1720; border:none;
    box-shadow:0 12px 24px rgba(0,0,0,.25);
}
.btn-cta:hover{ filter:brightness(1.06); color:#0b1720; }
.btn-outline-light{
    --bs-btn-hover-color:#0b1720;
    --bs-btn-hover-bg:#eef6ff;
    --bs-btn-hover-border-color:#eef6ff;
    border-color: rgba(255,255,255,.35);
}

.rating-number{
    font-size: clamp(1.8rem, 1.2vw + 1.2rem, 2.4rem);
}
.rating-box{
    background: rgba(255,255,255,.02);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 16px;
    padding: 16px 18px;
}

@media (min-width: 992px){
    .offer-card .col-lg-4 + .col-lg-3{ border-left:1px solid rgba(255,255,255,.08); }
    .offer-card .col-lg-4{ padding-left: 2rem; }
    .offer-card .col-lg-3{ padding-left: 2rem; }
}
.criteria-panel{
    background:#1e262b;
    border:1px solid rgba(255,255,255,.10);
    box-shadow:0 10px 30px rgba(0,0,0,.35), inset 0 0 0 1px rgba(0,0,0,.25);
}
.criteria-panel li::marker{
    color:#8ff6de;
    font-weight:700;
}
footer img {
    height: 48px;
}
footer {
    background: #1e262b;
    border-top: 1px solid #fff3
}
.hero .badge {
    background: #fff2;
    border-radius: 5px;
    padding: 5px;
}
.agePopup {
    position: fixed;
    z-index: 9999;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
}
.agePopup .mOhuLxgE {
    background: #fff;
    color: #222;
    border-radius: 10px;
    box-shadow: 0 8px 32px #0004;
    padding: 32px 24px;
    max-width: 95vw;
    width: 400px;
    text-align: center;
}
.agePopup .mOhuLxgE h2 {
    font-weight: 700;
    font-size: 1.3rem;
    margin-bottom: 1.2em;
    font-family: Roboto, system-ui, -apple-system, "Segoe UI",
}
.agePopup .mOhuLxgE .ageYesBtn {
    background: #1e262b;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-weight: 700;
    padding: 12px 24px;
    font-size: 1rem;
    margin: 8px 0;
    cursor: pointer;
    width: 100%;
}
.agePopup .mOhuLxgE .ageNoBtn {
    background: #eee;
    color: #c00;
    border: none;
    border-radius: 6px;
    padding: 12px 24px;
    font-size: 1rem;
    margin: 4px 0 0;
    cursor: pointer;
    width: 100%;
    display: block;
}