/* ===== CyberLite Universe AV-1B — Header + Hero Refinement =====
   Larger CyberLite brand, removed tagline, and improved hero spacing. */

/* Give the CyberLite name more presence without making the whole header tall. */
.topbar {
    min-height:92px !important;
    grid-template-columns:minmax(285px,auto) 1fr auto !important;
    gap:26px !important;
    padding:11px 20px !important;
}
.brand {
    min-width:285px;
    justify-content:center;
}
.brand-main {
    font-size:clamp(2.35rem,3vw,3.55rem) !important;
    line-height:.88 !important;
    letter-spacing:.075em !important;
}
.brand-sub {
    margin-top:8px !important;
    padding-left:12px !important;
    font-size:.76rem !important;
    letter-spacing:.66em !important;
}
.brand-tagline {
    display:none !important;
}

/* Keep the hero wording comfortably inside its own visual lane. */
.hero-live-layer {
    grid-template-columns:minmax(340px,410px) 1fr minmax(300px,370px) !important;
    gap:34px !important;
    padding-top:54px !important;
}
.hero-copy {
    width:100% !important;
    max-width:410px !important;
    padding-top:10px !important;
}
.hero-copy h1 {
    max-width:100% !important;
    font-size:clamp(3rem,4.45vw,4.95rem) !important;
    line-height:.92 !important;
}
.hero-description {
    max-width:365px !important;
    margin-top:24px !important;
    line-height:1.5 !important;
}
.hero-description strong {
    display:block !important;
    margin-top:2px !important;
}

@media (max-width:1250px) {
    .topbar {
        grid-template-columns:minmax(250px,auto) 1fr auto !important;
        gap:18px !important;
    }
    .brand {
        min-width:250px;
    }
    .brand-main {
        font-size:clamp(2.1rem,3.15vw,2.9rem) !important;
    }
    .brand-sub {
        font-size:.68rem !important;
        letter-spacing:.59em !important;
    }
    .hero-live-layer {
        grid-template-columns:minmax(315px,375px) 1fr minmax(285px,335px) !important;
        gap:26px !important;
    }
    .hero-copy {
        max-width:375px !important;
    }
    .hero-copy h1 {
        font-size:clamp(2.9rem,4.45vw,4.5rem) !important;
    }
    .hero-description {
        max-width:345px !important;
    }
}

@media (max-width:1050px) {
    .topbar {
        grid-template-columns:auto auto 1fr !important;
    }
    .brand {
        min-width:0;
    }
    .brand-main {
        font-size:2.35rem !important;
    }
    .brand-sub {
        font-size:.65rem !important;
    }
    .hero-live-layer {
        grid-template-columns:1fr !important;
        gap:24px !important;
    }
    .hero-copy {
        max-width:440px !important;
    }
    .hero-description {
        max-width:410px !important;
    }
}

@media (max-width:820px) {
    .topbar {
        min-height:78px !important;
        grid-template-columns:auto auto !important;
        padding:9px 12px !important;
    }
    .brand-main {
        font-size:1.85rem !important;
    }
    .brand-sub {
        margin-top:6px !important;
        padding-left:7px !important;
        font-size:.56rem !important;
        letter-spacing:.52em !important;
    }
    .hero-copy {
        max-width:520px !important;
    }
    .hero-copy h1 {
        font-size:clamp(2.85rem,12vw,4.65rem) !important;
    }
    .hero-description {
        max-width:480px !important;
        margin-inline:auto !important;
    }
}

@media (max-width:540px) {
    .brand-main {
        font-size:1.48rem !important;
    }
    .brand-sub {
        font-size:.48rem !important;
        letter-spacing:.43em !important;
    }
    .hero-copy h1 {
        font-size:clamp(2.65rem,15vw,4rem) !important;
    }
    .hero-description {
        max-width:340px !important;
    }
}