/* =========================================================
   GROWTH DIGITAL STUDIO
   HERO V3 — PREMIUM MOTION
========================================================= */


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

.hero {

    position: relative;

    min-height: 100svh;

    display: flex;

    align-items: center;

    overflow: hidden;

    isolation: isolate;

    background: #07080d;

}


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

.hero-bg {

    position: absolute;

    inset: 0;

    z-index: -5;

    pointer-events: none;

    overflow: hidden;

}


.hero-glow {

    position: absolute;

    width: 650px;

    height: 650px;

    border-radius: 50%;

    filter: blur(110px);

    opacity: .18;

    will-change: transform;

}


.hero-glow-1 {

    top: -250px;

    right: -100px;

    background: #7047ff;

}


.hero-glow-2 {

    bottom: -300px;

    left: -180px;

    background: #159bff;

}


.hero-grid {

    position: absolute;

    inset: 0;

    background-image:

        linear-gradient(
            rgba(255,255,255,.025) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,.025) 1px,
            transparent 1px
        );

    background-size: 70px 70px;

    mask-image:

        linear-gradient(
            to bottom,
            transparent,
            black 20%,
            black 75%,
            transparent
        );

    -webkit-mask-image:

        linear-gradient(
            to bottom,
            transparent,
            black 20%,
            black 75%,
            transparent
        );

    opacity: .35;

    will-change: transform;

}


.hero-noise {

    position: absolute;

    inset: 0;

    background-image:

        radial-gradient(
            rgba(255,255,255,.05) 1px,
            transparent 1px
        );

    background-size: 4px 4px;

    opacity: .035;

}


/* =========================================================
   CONTAINER
========================================================= */

.hero-container {

    position: relative;

    z-index: 3;

    width: 100%;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(300px, .8fr);

    align-items: center;

    gap: 40px;

    padding-top: 120px;

    padding-bottom: 100px;

}


/* =========================================================
   CONTENT
========================================================= */

.hero-content {

    position: relative;

    z-index: 5;

    max-width: 760px;

}


.hero-eyebrow {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 28px;

    color: #a98cff;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: .25em;

}


.eyebrow-line {

    width: 38px;

    height: 1px;

    flex-shrink: 0;

    background:

        linear-gradient(
            90deg,
            #a98cff,
            transparent
        );

}


/* =========================================================
   TITLE
========================================================= */

.hero-title {

    margin: 0;

    font-size:
        clamp(
            4rem,
            8vw,
            8.5rem
        );

    font-weight: 700;

    line-height: .84;

    letter-spacing: -.065em;

}


.hero-line {

    display: block;

    will-change: transform, opacity;

}


.hero-dot {

    color: #8d72ff;

}


.hero-gradient {

    background:

        linear-gradient(
            110deg,
            #8e72ff 0%,
            #56b9ff 55%,
            #b879ff 100%
        );

    -webkit-background-clip: text;

    background-clip: text;

    color: transparent;

}


/* =========================================================
   DESCRIPTION
========================================================= */

.hero-description {

    max-width: 570px;

    margin-top: 38px;

    color:
        var(--color-text-secondary);

    font-size:
        clamp(
            1rem,
            1.5vw,
            1.2rem
        );

    line-height: 1.75;

}


/* =========================================================
   ACTIONS
========================================================= */

.hero-actions {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 14px;

    margin-top: 34px;

}


.hero .btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 54px;

    padding: 0 22px;

    border:
        1px solid
        rgba(255,255,255,.12);

    border-radius: 999px;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: .04em;

    transition:
        transform .3s ease,
        background .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;

}


.hero .btn-primary {

    gap: 14px;

    color: #fff;

    border-color:
        rgba(142,114,255,.45);

    background:

        linear-gradient(
            110deg,
            #6547e8,
            #2d9de8
        );

    box-shadow:

        0 12px 35px
        rgba(88,85,255,.2);

}


.hero .btn-secondary {

    color: #d7d8df;

    background:
        rgba(255,255,255,.025);

}


.hero .btn:hover {

    transform:
        translateY(-4px);

}


.hero .btn-primary:hover {

    box-shadow:

        0 18px 45px
        rgba(88,85,255,.35);

}


.hero .btn-secondary:hover {

    border-color:
        rgba(255,255,255,.3);

    background:
        rgba(255,255,255,.06);

}


.btn-arrow {

    font-size: 18px;

}


/* =========================================================
   META
========================================================= */

.hero-meta {

    display: flex;

    flex-wrap: wrap;

    gap: 28px;

    margin-top: 50px;

}


.hero-meta-item {

    display: flex;

    flex-direction: column;

    gap: 5px;

}


.hero-meta-item strong {

    color: #8e72ff;

    font-size: 10px;

    letter-spacing: .12em;

}


.hero-meta-item span {

    color: #777985;

    font-size: 10px;

    text-transform: uppercase;

    letter-spacing: .12em;

}


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

.hero-visual {

    position: relative;

    width:
        min(
            520px,
            42vw
        );

    aspect-ratio: 1;

    margin-left: auto;

    display: flex;

    align-items: center;

    justify-content: center;

    pointer-events: none;

    will-change: transform;

}


.visual-ring {

    position: absolute;

    border-radius: 50%;

    border:
        1px solid
        rgba(142,114,255,.15);

    box-shadow:

        0 0 50px
        rgba(112,71,255,.06);

    will-change: transform;

}


.visual-ring-1 {

    width: 100%;

    height: 100%;

}


.visual-ring-2 {

    width: 72%;

    height: 72%;

    border-color:
        rgba(86,185,255,.2);

}


.visual-ring-3 {

    width: 45%;

    height: 45%;

    border-color:
        rgba(255,255,255,.12);

}


/* =========================================================
   CORE
========================================================= */

.visual-core {

    position: relative;

    width: 160px;

    height: 160px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background:

        radial-gradient(
            circle at 35% 25%,
            rgba(142,114,255,.25),
            rgba(7,8,13,.95) 65%
        );

    border:
        1px solid
        rgba(255,255,255,.12);

    box-shadow:

        0 0 80px
        rgba(112,71,255,.2),

        inset 0 0 40px
        rgba(255,255,255,.03);

    will-change: transform;

}


.core-logo {

    font-size: 58px;

    font-weight: 800;

    line-height: 1;

    background:

        linear-gradient(
            135deg,
            #ffffff,
            #8e72ff,
            #56b9ff
        );

    -webkit-background-clip: text;

    background-clip: text;

    color: transparent;

}


.core-label {

    margin-top: 8px;

    color: #777985;

    font-size: 8px;

    letter-spacing: .35em;

}


/* =========================================================
   FLOATING ELEMENTS
========================================================= */

.floating-elements {

    position: absolute;

    inset: 0;

    z-index: 2;

    pointer-events: none;

}


.float-orb {

    position: absolute;

    border-radius: 50%;

    filter: blur(1px);

    opacity: .65;

    will-change: transform;

}


.orb-1 {

    top: 18%;

    left: 5%;

    width: 10px;

    height: 10px;

    background: #8e72ff;

    box-shadow:
        0 0 25px #8e72ff;

}


.orb-2 {

    top: 30%;

    right: 8%;

    width: 7px;

    height: 7px;

    background: #56b9ff;

    box-shadow:
        0 0 20px #56b9ff;

}


.orb-3 {

    bottom: 20%;

    left: 45%;

    width: 6px;

    height: 6px;

    background: #b879ff;

    box-shadow:
        0 0 18px #b879ff;

}


/* =========================================================
   FLOATING CARDS
========================================================= */

.float-card {

    position: absolute;

    display: flex;

    align-items: center;

    gap: 9px;

    padding: 10px 14px;

    border:
        1px solid
        rgba(255,255,255,.1);

    border-radius: 12px;

    background:
        rgba(15,16,25,.65);

    backdrop-filter: blur(14px);

    -webkit-backdrop-filter: blur(14px);

    color: #d8d9df;

    font-size: 10px;

    font-weight: 700;

    box-shadow:

        0 15px 40px
        rgba(0,0,0,.2);

    white-space: nowrap;

    will-change: transform;

}


.float-icon {

    color: #9b83ff;

    font-size: 14px;

}


.float-card-1 {

    top: 22%;

    right: 4%;

}


.float-card-2 {

    bottom: 25%;

    right: 13%;

}


.float-card-3 {

    bottom: 14%;

    left: 8%;

}


/* =========================================================
   FLOATING SOCIAL
========================================================= */

.float-social {

    position: absolute;

    width: 38px;

    height: 38px;

    display: flex;

    align-items: center;

    justify-content: center;

    border:
        1px solid
        rgba(255,255,255,.1);

    border-radius: 50%;

    background:
        rgba(12,13,19,.6);

    backdrop-filter: blur(10px);

    -webkit-backdrop-filter: blur(10px);

    color: #aaa;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: .05em;

    box-shadow:
        0 10px 30px rgba(0,0,0,.15);

    will-change: transform;

}


.social-1 {

    top: 18%;

    left: 31%;

}


.social-2 {

    top: 68%;

    left: 4%;

}


.social-3 {

    top: 78%;

    right: 5%;

}


/* =========================================================
   SCROLL INDICATOR
========================================================= */

.hero-scroll {

    position: absolute;

    left: 50%;

    bottom: 28px;

    z-index: 6;

    transform:
        translateX(-50%);

    display: flex;

    align-items: center;

    gap: 12px;

    color: #666875;

    font-size: 8px;

    letter-spacing: .22em;

    white-space: nowrap;

}


.scroll-line {

    width: 35px;

    height: 1px;

    background:

        linear-gradient(
            90deg,
            transparent,
            #8e72ff
        );

    transform-origin: left;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    .hero-container {

        grid-template-columns: 1fr;

    }


    .hero-content {

        max-width: 720px;

    }


    .hero-visual {

        position: absolute;

        width: 420px;

        right: -120px;

        top: 50%;

        transform:
            translateY(-50%);

        opacity: .35;

        z-index: -1;

    }


    .floating-elements {

        opacity: .75;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .hero {

        min-height: 100svh;

        align-items: flex-start;

    }


    .hero-container {

        display: block;

        padding-top: 165px;

        padding-bottom: 95px;

    }


    .hero-content {

        width: 100%;

        max-width: none;

    }


    .hero-eyebrow {

        margin-bottom: 24px;

        font-size: 10px;

        letter-spacing: .18em;

    }


    .eyebrow-line {

        width: 24px;

    }


    .hero-title {

        font-size:

            clamp(
                3.5rem,
                15.5vw,
                5.8rem
            );

        line-height: .87;

    }


    .hero-description {

        max-width: 100%;

        margin-top: 28px;

        font-size: 1rem;

        line-height: 1.65;

    }


    .hero-actions {

        align-items: stretch;

        flex-direction: column;

        gap: 10px;

        margin-top: 28px;

    }


    .hero .btn {

        width: 100%;

        min-height: 56px;

    }


    .hero-meta {

        display: grid;

        grid-template-columns:
            repeat(2, 1fr);

        gap: 18px 25px;

        margin-top: 34px;

    }


    .hero-visual {

        width: 300px;

        right: -150px;

        top: 58%;

        opacity: .18;

    }


    .visual-core {

        width: 105px;

        height: 105px;

    }


    .core-logo {

        font-size: 38px;

    }


    .core-label {

        font-size: 6px;

    }


    .float-card {

        padding: 8px 10px;

        font-size: 8px;

    }


    .float-card-1 {

        top: 24%;

        right: 3%;

    }


    .float-card-2 {

        bottom: 30%;

        right: 4%;

    }


    .float-card-3 {

        bottom: 18%;

        left: 3%;

    }


    .float-social {

        width: 32px;

        height: 32px;

        font-size: 8px;

    }


    .social-1 {

        top: 22%;

        left: 8%;

    }


    .social-2 {

        top: 65%;

        left: 4%;

    }


    .social-3 {

        top: 72%;

        right: 5%;

    }


    .hero-scroll {

        bottom: 22px;

        font-size: 7px;

        letter-spacing: .16em;

    }


    .scroll-line {

        width: 25px;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

    .hero-container {

        padding-top: 145px;

        padding-bottom: 85px;

    }


    .hero-title {

        font-size: 3.45rem;

    }


    .hero-description {

        font-size: .95rem;

    }


    .hero-meta {

        gap: 15px;

    }


    .hero-visual {

        right: -175px;

        opacity: .12;

    }


    /* Keep only subtle social presence */

    .float-card {

        display: none;

    }


    .float-social {

        width: 30px;

        height: 30px;

        font-size: 7px;

        opacity: .65;

    }


    .social-1 {

        top: 23%;

        left: 4%;

    }


    .social-2 {

        top: 62%;

        left: 3%;

    }


    .social-3 {

        top: 70%;

        right: 3%;

    }


    .hero-scroll {

        bottom: 16px;

    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .hero *,
    .hero *::before,
    .hero *::after {

        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;

        scroll-behavior: auto !important;

    }

}