/* ==========================================
   HERO
========================================== */

@property --signal-angle{
    syntax:"<angle>";
    inherits:false;
    initial-value:0deg;
}

.hero{
    width:100%;
    overflow:hidden;
    background:var(--background);
}

.hero-visual{
    position:relative;
    width:min(1600px,100%);
    height:min(600px, calc(100vw * 809 / 1942));
    margin:0 auto;
    overflow:hidden;
    background:var(--background);
}

.hero-visual::after{
    content:"";
    position:absolute;
    inset:auto 0 0;
    height:44px;
    pointer-events:none;
    background:linear-gradient(0deg, var(--background) 0%, transparent 100%);
}

.hero-media{
    display:block;
    width:100%;
    height:100%;
    max-width:none;
    object-fit:contain;
    object-position:center;
}

.hero-content{
    width:min(1600px,92%);
    min-height:148px;
    margin:0 auto;
    padding:24px 0 28px;

    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    gap:54px;
}

.hero-copy{
    min-width:0;
}

.hero-kicker{
    margin:0 0 7px;
    padding-left:38px;
    position:relative;

    color:#b9c6d3;
    font-size:12px;
    font-weight:700;
    line-height:1.4;
    letter-spacing:0;
    text-transform:uppercase;
}

.hero-kicker::before{
    content:"";
    position:absolute;
    top:50%;
    left:0;
    width:28px;
    height:3px;
    transform:translateY(-50%);
    background:linear-gradient(90deg, var(--blue) 0 50%, var(--red) 50% 100%);
}

.hero h1{
    max-width:920px;
    margin:0;
    color:#ffffff;
    font-size:46px;
    line-height:1;
    letter-spacing:0;
}

.hero-description{
    max-width:820px;
    margin:8px 0 0;
    color:#aebbc8;
    font-size:15px;
    line-height:1.55;
}

.hero-actions{
    display:flex;
    align-items:center;
    gap:22px;
}

.hero-button{
    min-height:46px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    white-space:nowrap;
    font-size:14px;
    font-weight:700;
    letter-spacing:0;
}

.hero-button{
    padding:0 18px;
    border-radius:6px;
    border:1px solid rgba(0,157,255,.36);
    background:rgba(0,157,255,.09);
    color:#dcefff;
    box-shadow:none;
    transition:background .25s ease, border-color .25s ease, color .25s ease;
}

.hero-button:hover{
    background:rgba(0,157,255,.17);
    border-color:rgba(0,157,255,.68);
    color:#ffffff;
}

.hero-button--signal{
    --signal-angle:0deg;
    --signal-fill:rgba(5,14,23,.97);
    position:relative;
    min-width:230px;
    min-height:58px;
    padding:0 30px;
    border:2px solid transparent;
    background:
        linear-gradient(var(--signal-fill),var(--signal-fill)) padding-box,
        conic-gradient(
            from var(--signal-angle),
            var(--blue) 0deg,
            var(--blue) 38deg,
            rgba(0,157,255,.12) 78deg,
            transparent 112deg,
            var(--red) 158deg,
            var(--red) 202deg,
            rgba(215,25,32,.12) 242deg,
            transparent 282deg,
            var(--blue) 328deg,
            var(--blue) 360deg
        ) border-box;
    box-shadow:
        0 0 12px rgba(0,157,255,.22),
        0 0 18px rgba(215,25,32,.12);
    font-size:16px;
    animation:
        signal-border 2.4s linear infinite,
        signal-glow 1.2s ease-in-out infinite alternate;
    transition:color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.hero-button--signal i{
    color:#66c6ff;
    font-size:19px;
    filter:drop-shadow(0 0 5px rgba(0,157,255,.55));
}

.hero-button--signal:hover{
    --signal-fill:rgba(7,25,38,.98);
    border-color:transparent;
    background:
        linear-gradient(var(--signal-fill),var(--signal-fill)) padding-box,
        conic-gradient(
            from var(--signal-angle),
            var(--blue) 0deg,
            var(--blue) 38deg,
            rgba(0,157,255,.12) 78deg,
            transparent 112deg,
            var(--red) 158deg,
            var(--red) 202deg,
            rgba(215,25,32,.12) 242deg,
            transparent 282deg,
            var(--blue) 328deg,
            var(--blue) 360deg
        ) border-box;
    color:#ffffff;
    box-shadow:
        0 0 18px rgba(0,157,255,.34),
        0 0 24px rgba(215,25,32,.2);
    transform:translateY(-1px);
}

@keyframes signal-border{
    to{
        --signal-angle:360deg;
    }
}

@keyframes signal-glow{
    from{
        box-shadow:
            0 0 10px rgba(0,157,255,.2),
            0 0 16px rgba(215,25,32,.1);
    }

    to{
        box-shadow:
            0 0 18px rgba(0,157,255,.34),
            0 0 22px rgba(215,25,32,.2);
    }
}

@media(max-width:1100px){
    .hero-content{
        gap:30px;
    }

    .hero h1{
        max-width:650px;
        font-size:40px;
    }

    .hero-description{
        max-width:600px;
    }

    .hero-actions{
        gap:16px;
    }
}

@media(max-width:900px){
    .hero-content{
        width:calc(100% - 48px);
        padding:25px 0 30px;
        grid-template-columns:1fr;
        gap:20px;
    }

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

@media(max-width:600px){
    .hero-visual::after{
        height:26px;
    }

    .hero-content{
        width:calc(100% - 32px);
        min-height:0;
        padding:22px 0 26px;
        gap:18px;
    }

    .hero h1{
        font-size:36px;
        line-height:1.04;
    }

    .hero-description{
        font-size:14px;
    }

    .hero-actions{
        width:100%;
        align-items:stretch;
        flex-direction:column;
        gap:8px;
    }

    .hero-button{
        width:100%;
        min-height:44px;
    }

    .hero-button--signal{
        min-width:0;
        min-height:56px;
        padding:0 22px;
        font-size:16px;
    }
}

@media(hover:none){
    .hero-button:hover{
        background:rgba(0,157,255,.09);
        border-color:rgba(0,157,255,.36);
        color:#dcefff;
    }

    .hero-button--signal:hover{
        --signal-fill:rgba(5,14,23,.97);
        border-color:transparent;
        background:
            linear-gradient(var(--signal-fill),var(--signal-fill)) padding-box,
            conic-gradient(
                from var(--signal-angle),
                var(--blue) 0deg,
                var(--blue) 38deg,
                rgba(0,157,255,.12) 78deg,
                transparent 112deg,
                var(--red) 158deg,
                var(--red) 202deg,
                rgba(215,25,32,.12) 242deg,
                transparent 282deg,
                var(--blue) 328deg,
                var(--blue) 360deg
            ) border-box;
        color:#dcefff;
        transform:none;
    }
}

@media(prefers-reduced-motion:reduce){
    .hero-button--signal{
        --signal-angle:45deg;
        animation:none;
    }
}