/* ======  Citus Hero v2.2  ====== */
:root{
    --citus-blue:#0067ff;
    --citus-navy:#0b1833;
    --citus-white:#ffffff;
    --citus-h1:#f1f5f9;            /* ← your requested colour */
    --citus-overlay:linear-gradient(145deg,rgba(11,24,51,.92) 0%,rgba(0,103,255,.75) 100%);
}

/* section sizing ================================================= */
#citus-hero{
    position:relative;
    overflow:hidden;
    display:flex;
    align-items:center;
    isolation:isolate;
    height:80vh;                   /* default for ≥ 769 px */
}

/* mobile & small tablets */
@media(max-width:768px){
    #citus-hero{ height:90vh; }
}

/* background media ============================================== */
#citus-hero video,
#citus-hero iframe{
    position:absolute; inset:0;
    width:100%; height:100%;
    object-fit:cover;
    pointer-events:none;
    filter:brightness(.6) contrast(1.1);
}

/* overlay */
#citus-hero::before{
    content:"";
    position:absolute; inset:0;
    background:var(--citus-overlay);
    mix-blend-mode:multiply;
    z-index:0;
}

/* inner grid alignment ========================================= */
.citus-inner{
    position:relative; z-index:1;
    width:100%; max-width:1280px;
    margin-inline:auto;
    padding:clamp(3rem,7vw,6rem) clamp(1rem,4vw,3.5rem);
    text-align:left;
}
@media(max-width:768px){
    .citus-inner{ text-align:center; }
}

/* headline + sub-headline ====================================== */
.citus-inner h1{
    margin:0 0 1rem;
    font-size:clamp(2.4rem,5.5vw,4.5rem);
    line-height:1.13;
    font-weight:700;
    max-width:24ch;
    color:var(--citus-h1);
}
.citus-inner p{
    margin:0 0 2.25rem;
    font-size:clamp(1.05rem,2.1vw,1.25rem);
    line-height:1.55;
    max-width:46ch;
    color:rgba(255,255,255,.92);
}

/* call-to-action =============================================== */
.citus-btn{
    --btn-h:3rem;
    display:inline-flex; align-items:center; justify-content:center;
    height:var(--btn-h); padding-inline:2.75rem;
    background:var(--citus-blue); border-radius:8px;
    font-weight:600; font-size:1rem; color:var(--citus-white);
    text-decoration:none; transition:.25s ease;
}
.citus-btn:hover,
.citus-btn:focus-visible{
    transform:translateY(-2px);
    box-shadow:0 8px 22px rgba(0,103,255,.35);
}

@media(max-width:768px){
    .citus-btn{
        --btn-h:3.25rem;
        width:100%; max-width:18rem;
    }
}