.hero-section {
    position: relative;
    min-height:
        calc(100vh - 5rem);
    display: flex;
    align-items: center;
    overflow: hidden;
    border-bottom:
        var(--border-width-thin)
        solid
        var(--color-border);
}

.hero-section::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(
            to right,
            var(--color-grid) 1px,
            transparent 1px
        ),
        linear-gradient(
            to bottom,
            var(--color-grid) 1px,
            transparent 1px
        );
    background-size:
        5rem 5rem;
    mask-image:
        linear-gradient(
            to bottom,
            transparent 0%,
            black 18%,
            black 82%,
            transparent 100%
        );
    opacity:
        0.45;
    z-index:
        var(--z-base);
}

.hero-container {
    position: relative;
    z-index:
        var(--z-content);
    width: 100%;
    max-width:
        var(--container-wide-width);
    margin-inline:
        auto;
    padding-inline:
        var(--container-padding-desktop);
    padding-block:
        var(--space-24);
    display: grid;
    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(24rem, 0.85fr);
    align-items:
        center;
    gap:
        var(--space-16);
}

.hero-content {
    display: flex;
    flex-direction:
        column;
    align-items:
        flex-start;
    max-width:
        52rem;
}

.hero-content .section-label {
    margin-bottom:
        var(--space-6);
}

.hero-title {
    max-width:
        10ch;
    font-family:
        var(--font-heading);
    font-size:
        var(--font-size-display);
    font-weight:
        var(--font-weight-bold);
    line-height:
        var(--line-height-tight);
    letter-spacing:
        -0.055em;
    color:
        var(--color-text-primary);
}

.hero-description {
    max-width:
        48ch;
    margin-top:
        var(--space-8);
    font-family:
        var(--font-body);
    font-size:
        var(--font-size-lg);
    font-weight:
        var(--font-weight-regular);
    line-height:
        var(--line-height-relaxed);
    color:
        var(--color-text-secondary);
}

.hero-actions {
    display: flex;
    align-items:
        center;
    flex-wrap:
        wrap;
    gap:
        var(--space-4);
    margin-top:
        var(--space-10);
}

.hero-visual {
    position: relative;
    display: flex;
    align-items:
        center;
    justify-content:
        center;
    min-height:
        32rem;
    isolation:
        isolate;
}

.hero-visual::before {
    content: "";
    position: absolute;
    width:
        min(28rem, 90%);
    aspect-ratio:
        1;
    border:
        var(--border-width-thin)
        solid
        var(--color-border);
    border-radius:
        var(--radius-full);
    opacity:
        0.7;
    z-index:
        var(--z-base);
    animation:
        hero-ring-pulse
        8s ease-in-out infinite;
}

.hero-visual::after {
    content: "";
    position: absolute;
    width:
        min(20rem, 68%);
    aspect-ratio:
        1;
    border:
        var(--border-width-thin)
        solid
        var(--color-border-subtle);
    border-radius:
        var(--radius-full);
    opacity:
        0.8;
    z-index:
        var(--z-base);
    animation:
        hero-ring-pulse
        8s ease-in-out
        1.5s
        infinite;
}

.hero-visual__core {
    position: relative;
    display: flex;
    align-items:
        center;
    justify-content:
        center;
    width:
        min(14rem, 48%);
    aspect-ratio:
        1;
    border:
        var(--border-width-thin)
        solid
        var(--color-border-strong);
    border-radius:
        var(--radius-full);
    background:
        radial-gradient(
            circle at center,
            var(--color-core-glow) 0%,
            transparent 65%
        );
    box-shadow:
        0 0 5rem
        var(--color-core-glow);
    z-index:
        var(--z-content);
    animation:
        hero-core-float
        7s
        ease-in-out
        infinite;
}

.hero-visual__core::before {
    content: "";
    position: absolute;
    width:
        55%;
    aspect-ratio:
        1;
    border:
        var(--border-width-thin)
        solid
        var(--color-core-secondary);
    border-radius:
        var(--radius-full);
    opacity:
        0.65;
}

.hero-visual__core::after {
    content: "";
    position: absolute;
    width:
        0.4rem;
    height:
        0.4rem;
    border-radius:
        var(--radius-full);
    background-color:
        var(--color-core-primary);
    box-shadow:
        0 0 1.5rem
        var(--color-core-glow);
}

.hero-visual__core-label {
    position: absolute;
    bottom:
        -2.25rem;
    left:
        50%;
    transform:
        translateX(-50%);
    white-space:
        nowrap;
    font-family:
        var(--font-mono);
    font-size:
        var(--font-size-label);
    font-weight:
        var(--font-weight-medium);
    line-height:
        var(--line-height-snug);
    letter-spacing:
        0.16em;
    text-transform:
        uppercase;
    color:
        var(--color-text-muted);
}

.hero-content .section-label[data-reveal] {
    --reveal-distance:
        12px;
}

.hero-title[data-reveal] {
    --reveal-distance:
        24px;
}

.hero-description[data-reveal] {
    --reveal-distance:
        18px;
}

.hero-actions[data-reveal] {
    --reveal-distance:
        12px;
}

.hero-visual[data-reveal] {
    transform-origin:
        center center;
}

@keyframes hero-ring-pulse {
    0%,
    100% {
        transform:
            scale(1);
        opacity:
            0.55;
    }
    50% {
        transform:
            scale(1.025);
        opacity:
            0.85;
    }
}

@keyframes hero-core-float {
    0%,
    100% {
        transform:
            translateY(0);
    }
    50% {
        transform:
            translateY(-8px);
    }
}

@media (max-width: 1023px) {
    .hero-section {
        min-height:
            calc(100vh - 4.5rem);
    }

    .hero-container {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(18rem, 0.7fr);
        gap:
            var(--space-10);
        padding-block:
            var(--space-20);
    }

    .hero-title {
        max-width:
            11ch;
    }
    
    .hero-visual {
        min-height:
            26rem;
    }
    
    .hero-visual__core {
        width:
            min(12rem, 48%);
    }
}

@media (max-width: 767px) {

    .hero-section {
        min-height:
            calc(100vh - 4rem);
    }

    .hero-container {
        grid-template-columns:
            1fr;
        gap:
            var(--space-16);
        padding-inline:
            var(--container-padding-mobile);
        padding-block:
            var(--space-20);
    }

    .hero-title {
        max-width:
            100%;
        font-size:
            clamp(3rem, 14vw, 5rem);
        letter-spacing:
            -0.045em;
    }

    .hero-description {
        margin-top:
            var(--space-6);
        font-size:
            var(--font-size-md);
    }

    .hero-actions {
        width:
            100%;
        margin-top:
            var(--space-8);
    }

    .hero-actions .button {
        flex:
            1 1 auto;
    }

    .hero-visual {
        min-height:
            22rem;
    }

    .hero-visual::before {
        width:
            19rem;
    }

    .hero-visual::after {
        width:
            13.5rem;
    }

    .hero-visual__core {
        width:
            9rem;
    }
}

@media (max-width: 480px) {
    .hero-container {
        padding-block:
            var(--space-16);
    }

    .hero-actions {
        flex-direction:
            column;
        align-items:
            stretch;
    }

    .hero-actions .button {
        width:
            100%;
    }

    .hero-visual {
        min-height:
            18rem;
    }

    .hero-visual::before {
        width:
            15rem;
    }

    .hero-visual::after {
        width:
            10.5rem;
    }

    .hero-visual__core {
        width:
            7rem;
    }
}

@media (min-width: 1280px) {
    .hero-section {
        min-height:
            calc(100vh - 5.25rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-visual::before,
    .hero-visual::after,
    .hero-visual__core {
        animation:
            none;
    }
}