/* ==========================================================
   HERO — bold headline + subhead + dashboard mockup visual,
   trust/logo strip beneath. Markup: sections/hero.html
   ========================================================== */
/* ==========================================
   HERO
========================================== */

.hero{
    position: relative;
    padding: 80px 0 0;
    overflow: hidden;
    isolation: isolate;
}

/* Animated Background */
/* Hero Image Slider */

.hero-slider{
    position:absolute;
    inset:0;
    z-index:-2;
    overflow:hidden;
}

.hero-slider img{
    position:absolute;
    width:100%;
    height:100%;
    object-fit:cover;
    opacity:0;
    animation:heroSlide 24s infinite;
}

.hero-slider img:nth-child(1){
    animation-delay:0s;
}

.hero-slider img:nth-child(2){
    animation-delay:6s;
}

.hero-slider img:nth-child(3){
    animation-delay:12s;
}

.hero-slider img:nth-child(4){
    animation-delay:18s;
}

/* Dark Overlay */
.hero::after{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        rgba(5, 21, 49, 0.85),
        rgba(17, 0, 0, 0)
    );
    z-index: -1;
}

.hero-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:56px;
    align-items:center;
    position:relative;
    z-index:1;
}

.hero-copy .pill-tag{
    margin-bottom:20px;
}

.hero h1{
    font-size:clamp(38px,4.6vw,58px);
    margin-bottom:22px;
    color:#fff;
}

.hero h1 .hl{
    color:var(--crimson);
}

.hero p.lead{
    font-size:18px;
    color:rgba(255,255,255,.92);
    max-width:520px;
    margin-bottom:32px;
}

.hero-actions{
    display:flex;
    gap:14px;
    flex-wrap:wrap;
    margin-bottom:20px;
}

.hero-meta{
    font-size:13.5px;
    color:rgba(255,255,255,.85);
    display:flex;
    align-items:center;
    gap:8px;
}

.hero-meta svg{
    color:var(--crimson);
}

/* ==========================================
   DASHBOARD MOCKUP
========================================== */

.mockup-frame{
    background:var(--white);
    border:1px solid var(--gray-150);
    border-radius:var(--radius-lg);
    box-shadow:0 30px 60px -20px rgba(21,17,26,.18);
    overflow:hidden;
}

.mockup-bar{
    display:flex;
    align-items:center;
    gap:6px;
    padding:12px 16px;
    border-bottom:1px solid var(--gray-150);
    background:var(--gray-100);
}

.mockup-bar span{
    width:9px;
    height:9px;
    border-radius:50%;
    background:var(--gray-300);
}

.mockup-body{
    position:relative;
    background:linear-gradient(180deg,#ce1525,#F3EFED);
    height:320px;
    overflow:hidden;
}

.mockup-dotgrid{
    position:absolute;
    inset:0;
    background-image:radial-gradient(var(--gray-300) 1px, transparent 1px);
    background-size:22px 22px;
    opacity:.6;
}

.mockup-route{
    position:absolute;
    inset:0;
}

.mockup-pin{
    position:absolute;
    width:14px;
    height:14px;
    border-radius:50%;
    background:var(--crimson);
    border:3px solid var(--white);
    box-shadow:0 2px 8px rgba(203,41,82,.4);
}

.mockup-pin.dim{
    background:var(--ink);
}

.mockup-card{
    position:absolute;
    background:var(--white);
    border:1px solid var(--gray-150);
    border-radius:var(--radius-md);
    padding:12px 14px;
    box-shadow:0 10px 24px rgba(21,17,26,.1);
    min-width:150px;
}

.mockup-card .label{
    font-size:10.5px;
    text-transform:uppercase;
    letter-spacing:.05em;
    color:var(--gray-500);
    font-weight:700;
    margin-bottom:4px;
}

.mockup-card .value{
    font-size:20px;
    font-weight:800;
    color:var(--ink);
}

.mockup-card .value.up{
    color:var(--crimson);
}

/* ==========================================
   BACKGROUND ANIMATION
========================================== */

@keyframes heroSlide{

    0%{
        opacity:0;
        transform:translateX(100%);
    }

    10%{
        opacity:1;
        transform:translateX(0);
    }

    25%{
        opacity:1;
        transform:translateX(0);
    }

    35%{
        opacity:0;
        transform:translateX(-100%);
    }

    100%{
        opacity:0;
    }

}

/* ==========================================
   RESPONSIVE
========================================== */

@media(max-width:980px){

    .hero-grid{
        grid-template-columns:1fr;
        gap:44px;
    }

    .hero::before{
        width:140%;
        left:-20%;
    }

    /* Trust strip — tighter fade, faster scroll, smaller type on mobile */
    .trust-strip .trust-row{
        -webkit-mask-image: linear-gradient(
            to right,
            transparent 0,
            #000 32px,
            #000 calc(100% - 32px),
            transparent 100%
        );
        mask-image: linear-gradient(
            to right,
            transparent 0,
            #000 32px,
            #000 calc(100% - 32px),
            transparent 100%
        );
    }

    .trust-row{
        animation-duration: 16s;
    }

    .trust-row a{
        margin:0 18px;
        gap:8px;
    }

    .trust-badge{
        width:36px;
        height:36px;
        font-size:14px;
    }

    .trust-name{
        font-size:20px;
    }

}