/* =========================================================
   HERO TECH BACKGROUND
   Binary code + graph network + subtle signal motion
========================================================= */

.hero-tech{
    position:relative;
    overflow:hidden;
    isolation:isolate;
}

.hero-tech-bg{
    position:absolute;
    inset:0;
    z-index:0;
    overflow:hidden;
    pointer-events:none;
    opacity:.62;
}

.hero-tech-bg canvas{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    display:block;
}

.hero-tech-vignette{
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            90deg,
            rgba(8,10,18,.80) 0%,
            rgba(8,10,18,.42) 38%,
            rgba(8,10,18,.18) 65%,
            rgba(8,10,18,.42) 100%
        ),
        radial-gradient(
            circle at 73% 49%,
            transparent 0 24%,
            rgba(8,10,18,.08) 46%,
            rgba(8,10,18,.33) 100%
        ),
        linear-gradient(
            to bottom,
            rgba(8,10,18,.05),
            rgba(8,10,18,.40)
        );
}

.hero-copy,
.hero-visual{
    position:relative;
    z-index:2;
}


/* -------------------------
   Brand lockup
------------------------- */

.hero-brand-polished{
    width:max-content;
    max-width:100%;
    gap:12px;
    margin-bottom:24px;
    padding:7px 12px 7px 8px;
    border:1px solid rgba(255,255,255,.07);
    border-radius:16px;
    background:rgba(10,13,23,.32);
    backdrop-filter:blur(10px);
}

.hero-brand-polished .hero-logo-mark{
    width:94px;
    height:58px;
}

.hero-logo-copy{
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:2px;
}

.hero-logo-copy strong{
    font-size:1rem;
    line-height:1.1;
    letter-spacing:-.02em;
}

.hero-logo-copy small{
    color:var(--muted);
    font-size:.63rem;
    letter-spacing:.055em;
    text-transform:uppercase;
}


/* -------------------------
   Portrait polish
------------------------- */

.hero-portrait-area{
    isolation:isolate;
}

.hero-portrait-polished{
    transform:rotate(1deg);
    border-color:rgba(255,255,255,.12);
    box-shadow:
        0 30px 80px rgba(0,0,0,.35),
        0 0 0 1px rgba(139,92,246,.06),
        0 0 70px rgba(34,211,238,.055);
}

.portrait-scanline{
    position:absolute;
    inset:0;
    z-index:3;
    pointer-events:none;
    opacity:.14;
    background:
        repeating-linear-gradient(
            to bottom,
            transparent 0,
            transparent 5px,
            rgba(34,211,238,.06) 6px
        );
    mask-image:linear-gradient(to bottom,transparent 0,black 18%,black 82%,transparent);
}


/* -------------------------
   Decorative orbit rings
------------------------- */

.hero-orbit{
    position:absolute;
    z-index:-1;
    border:1px solid rgba(139,92,246,.15);
    border-radius:50%;
    pointer-events:none;
    animation:heroOrbitSpin 24s linear infinite;
}

.orbit-one{
    width:520px;
    height:520px;
    right:-42px;
    top:18px;
}

.orbit-two{
    width:430px;
    height:430px;
    right:4px;
    top:64px;
    border-color:rgba(34,211,238,.10);
    animation-direction:reverse;
    animation-duration:30s;
}

.hero-orbit::before,
.hero-orbit::after{
    content:"";
    position:absolute;
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--secondary);
    box-shadow:0 0 16px rgba(34,211,238,.8);
}

.hero-orbit::before{
    top:14%;
    left:16%;
}

.hero-orbit::after{
    right:10%;
    bottom:22%;
    background:var(--primary);
    box-shadow:0 0 16px rgba(139,92,246,.75);
}

@keyframes heroOrbitSpin{
    to{transform:rotate(360deg)}
}


/* -------------------------
   Floating cards
------------------------- */

.hero-tech .floating-card{
    background:rgba(13,17,29,.78);
    border-color:rgba(255,255,255,.10);
    box-shadow:
        0 14px 45px rgba(0,0,0,.28),
        inset 0 1px 0 rgba(255,255,255,.035);
}

.hero-tech .floating-card::after{
    content:"";
    position:absolute;
    inset:-1px;
    z-index:-1;
    border-radius:inherit;
    opacity:.20;
    background:linear-gradient(120deg,var(--secondary),transparent 38%,var(--primary));
    filter:blur(10px);
}


/* -------------------------
   Light theme
------------------------- */

:root[data-theme="light"] .hero-tech-bg{
    opacity:.24;
}

:root[data-theme="light"] .hero-tech-vignette{
    background:
        linear-gradient(
            90deg,
            rgba(246,247,251,.90),
            rgba(246,247,251,.55) 48%,
            rgba(246,247,251,.30) 72%,
            rgba(246,247,251,.58)
        );
}

:root[data-theme="light"] .hero-brand-polished{
    background:rgba(255,255,255,.55);
    border-color:rgba(17,24,39,.08);
}


/* -------------------------
   Responsive
------------------------- */

@media(max-width:900px){
    .hero-tech-bg{
        opacity:.46;
    }

    .hero-tech-vignette{
        background:
            linear-gradient(
                to bottom,
                rgba(8,10,18,.62),
                rgba(8,10,18,.28) 45%,
                rgba(8,10,18,.48)
            );
    }

    .orbit-one{
        width:440px;
        height:440px;
    }

    .orbit-two{
        width:355px;
        height:355px;
    }
}

@media(max-width:580px){
    .hero-tech-bg{
        opacity:.32;
    }

    .hero-brand-polished{
        padding:5px 8px;
    }

    .hero-brand-polished .hero-logo-mark{
        width:78px;
        height:48px;
    }

    .hero-logo-copy{
        display:none;
    }

    .hero-orbit{
        opacity:.55;
    }
}

@media(prefers-reduced-motion:reduce){
    .hero-orbit{
        animation:none!important;
    }
}