/* =========================================
   CUSTOM CURSOR
========================================= */

/* Hide the browser cursor immediately */
html,
body,
body * {
    cursor: none !important;
}

/* Main glowing cursor */
#customCursor {
    position: fixed;
    top: 0;
    left: 0;

    width: 9px;
    height: 9px;

    border-radius: 50%;
    background: #ffffff;

    pointer-events: none;
    z-index: 999999;

    transform: translate(-50%, -50%);

    box-shadow:
        0 0 8px #ffffff,
        0 0 18px rgba(160, 100, 255, 0.9),
        0 0 35px rgba(100, 80, 255, 0.6);

    opacity: 0;
    transition:
        width 0.2s ease,
        height 0.2s ease,
        opacity 0.2s ease;
}

/* Outer follower */
#cursorFollower {
    position: fixed;
    top: 0;
    left: 0;

    width: 38px;
    height: 38px;

    border: 1px solid rgba(170, 130, 255, 0.8);
    border-radius: 50%;

    pointer-events: none;
    z-index: 999998;

    transform: translate(-50%, -50%);

    box-shadow:
        0 0 15px rgba(140, 90, 255, 0.35),
        inset 0 0 10px rgba(140, 90, 255, 0.1);

    opacity: 0;

    transition:
        width 0.25s ease,
        height 0.25s ease,
        border-color 0.25s ease;
}

/* Make cursor visible as soon as mouse enters */
body.cursor-visible #customCursor,
body.cursor-visible #cursorFollower {
    opacity: 1;
}

/* Hover over buttons / links */
body.cursor-hover #customCursor {
    width: 14px;
    height: 14px;

    background: #b99cff;

    box-shadow:
        0 0 10px #b99cff,
        0 0 25px rgba(170, 110, 255, 0.9),
        0 0 45px rgba(100, 70, 255, 0.6);
}

body.cursor-hover #cursorFollower {
    width: 55px;
    height: 55px;

    border-color: rgba(200, 170, 255, 1);
}

/* Click effect */
body.cursor-click #cursorFollower {
    width: 65px;
    height: 65px;

    border-color: rgba(255, 255, 255, 0.9);
}

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

@media (max-width: 768px) {

    html,
    body,
    body * {
        cursor: auto !important;
    }

    #customCursor,
    #cursorFollower {
        display: none;
    }
}

/* =====================================================
   RESET
===================================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    width: 100%;
    min-height: 100%;
    scroll-behavior: smooth;
}

body {
    width: 100%;
    min-height: 100%;
    background: #030303;
    color: #fff;

    font-family:
        "Inter",
        Arial,
        Helvetica,
        sans-serif;

    overflow: hidden;
}

button,
a {
    font-family: inherit;
}


/* =====================================================
   CINEMATIC INTRO
===================================================== */

#intro {
    position: fixed;

    inset: 0;

    z-index: 9999;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 45%,
            #111 0%,
            #050505 38%,
            #000 75%
        );

    transition:
        opacity 1.4s ease,
        visibility 1.4s ease;
}

#intro.hide {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}


/* =====================================================
   STARS
===================================================== */

.stars {
    position: absolute;

    inset: 0;

    opacity: .15;

    background-image:
        radial-gradient(
            circle,
            #fff 1px,
            transparent 1px
        );

    background-size: 110px 110px;

    animation:
        starsMove 12s linear infinite;
}

@keyframes starsMove {

    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-110px);
    }

}


/* =====================================================
   AMBIENT LIGHT
===================================================== */

.ambient-light {

    position: absolute;

    width: 60vw;
    height: 60vw;

    max-width: 800px;
    max-height: 800px;

    left: 50%;
    top: 42%;

    transform:
        translate(-50%, -50%);

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.09),
            transparent 68%
        );

    filter: blur(55px);

    animation:
        ambientPulse 5s ease-in-out infinite alternate;
}

@keyframes ambientPulse {

    from {

        opacity: .25;

        transform:
            translate(-50%, -50%)
            scale(.9);

    }

    to {

        opacity: .75;

        transform:
            translate(-50%, -50%)
            scale(1.1);

    }

}


/* =====================================================
   INTRO HEADER
===================================================== */

.intro-header {

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;

    padding: 28px 5vw;

    display: flex;

    justify-content: space-between;

    align-items: center;

    z-index: 200;

    opacity: 0;

    animation:
        headerReveal
        1.2s
        1s
        forwards;
}

@keyframes headerReveal {

    from {

        opacity: 0;

        transform:
            translateY(-20px);

    }

    to {

        opacity: 1;

        transform:
            translateY(0);

    }

}

.header-name {

    font-size: 20px;

    font-weight: 600;

    letter-spacing: 3px;
}

.header-name span {
    opacity: .35;
}

.header-right {

    font-size: 15px;

    letter-spacing: 3px;

    opacity: .4;
}


/* =====================================================
   SCENE
===================================================== */

.scene {

    position: absolute;

    inset: 0;

    transform-origin:
        center center;

    animation:
        cameraMove
        12s
        ease-out
        forwards;
}

@keyframes cameraMove {

    0% {
        transform: scale(1.18);
    }

    55% {
        transform: scale(1.04);
    }

    100% {
        transform: scale(1);
    }

}


/* =====================================================
   FLOOR
===================================================== */

.floor {

    position: absolute;

    width: 130%;
    height: 35%;

    left: -15%;
    bottom: -13%;

    transform:
        perspective(600px)
        rotateX(62deg);

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

    background:
        linear-gradient(
            to bottom,
            rgba(255,255,255,.035),
            transparent
        );
}


/* =====================================================
   CHARACTER
===================================================== */

.character {

    position: absolute;

    width: 125px;
    height: 250px;

    left: 27%;
    top: 36%;

    z-index: 30;

    opacity: 0;

    animation:
        characterEntrance
        4s
        .9s
        cubic-bezier(.2,.8,.2,1)
        forwards;
}

@keyframes characterEntrance {

    0% {

        opacity: 0;

        transform:
            translateX(-420px)
            scale(.45);

    }

    45% {

        opacity: 1;

        transform:
            translateX(10px)
            scale(1.08);

    }

    70% {

        transform:
            translateX(0)
            scale(1);

    }

    100% {

        opacity: 1;

        transform:
            translateX(0)
            scale(1);

    }

}


/* =====================================================
   CHARACTER HEAD
===================================================== */

.head {

    position: absolute;

    width: 62px;
    height: 66px;

    left: 30px;
    top: 0;

    border-radius: 48%;

    background:
        linear-gradient(
            140deg,
            #444,
            #151515 70%
        );

    box-shadow:
        inset -8px -8px 15px
        rgba(0,0,0,.45),

        0 0 30px
        rgba(255,255,255,.04);
}


/* =====================================================
   HAIR
===================================================== */

.hair {

    position: absolute;

    width: 65px;
    height: 32px;

    top: -7px;
    left: -2px;

    background:
        linear-gradient(
            145deg,
            #151515,
            #000
        );

    border-radius:
        55% 55% 20% 20%;
}


/* =====================================================
   EYES
===================================================== */

.eye {

    position: absolute;

    width: 5px;
    height: 5px;

    top: 31px;

    border-radius: 50%;

    background: #fff;

    box-shadow:
        0 0 8px
        rgba(255,255,255,.6);
}

.eye-left {
    left: 17px;
}

.eye-right {
    right: 17px;
}


/* =====================================================
   FACE LIGHT
===================================================== */

.face-light {

    position: absolute;

    width: 30px;
    height: 30px;

    left: 16px;
    top: 14px;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.08),
            transparent
        );

    filter: blur(5px);
}


/* =====================================================
   MOUTH
===================================================== */

.mouth {

    position: absolute;

    width: 17px;
    height: 8px;

    left: 22px;
    top: 44px;

    border-bottom:
        2px solid
        rgba(255,255,255,.55);

    border-radius: 50%;
}


/* =====================================================
   NECK
===================================================== */

.neck {

    position: absolute;

    width: 20px;
    height: 18px;

    left: 51px;
    top: 57px;

    background: #222;
}


/* =====================================================
   BODY
===================================================== */

.torso {

    position: absolute;

    width: 82px;
    height: 112px;

    left: 20px;
    top: 69px;

    border-radius:
        30px 30px 12px 12px;

    background:
        linear-gradient(
            145deg,
            #242424,
            #080808
        );

    box-shadow:
        inset -10px 0 20px
        rgba(0,0,0,.45);
}


/* =====================================================
   BODY LIGHT
===================================================== */

.body-light {

    position: absolute;

    width: 45px;
    height: 100px;

    left: 38px;
    top: 74px;

    background:
        linear-gradient(
            to right,
            rgba(255,255,255,.07),
            transparent
        );

    filter: blur(8px);
}


/* =====================================================
   ARMS
===================================================== */

.arm {

    position: absolute;

    width: 18px;
    height: 82px;

    top: 72px;

    border-radius: 20px;

    background:
        linear-gradient(
            90deg,
            #111,
            #292929
        );

    transform-origin:
        top center;
}

.arm-left {

    left: 6px;

    transform:
        rotate(25deg);
}

.arm-right {

    right: 5px;

    transform:
        rotate(-25deg);

    animation:
        waveHand
        1.5s
        2.6s
        ease-in-out
        forwards;
}

@keyframes waveHand {

    0% {
        transform: rotate(-25deg);
    }

    25% {
        transform: rotate(-75deg);
    }

    45% {
        transform: rotate(-45deg);
    }

    65% {
        transform: rotate(-72deg);
    }

    100% {
        transform: rotate(-25deg);
    }

}


/* =====================================================
   HAND
===================================================== */

.hand {

    position: absolute;

    width: 22px;
    height: 22px;

    right: -7px;
    top: 45px;

    border-radius: 50%;

    background: #333;

    animation:
        handWave
        1.5s
        2.6s
        ease-in-out
        forwards;
}

@keyframes handWave {

    0% {
        transform: translateY(0);
    }

    30% {
        transform: translateY(-30px);
    }

    60% {
        transform: translateY(-14px);
    }

    100% {
        transform: translateY(0);
    }

}


/* =====================================================
   HI MESSAGE
===================================================== */

.hi-message {

    position: absolute;

    left: 39%;
    top: 30%;

    z-index: 50;

    display: flex;

    align-items: center;

    gap: 8px;

    opacity: 0;

    animation:
        hiShow
        1.8s
        2.7s
        forwards;
}

.hi-message span {

    font-size: 22px;

    letter-spacing: 4px;
}

.hi-message b {

    font-size: 20px;

    font-weight: normal;
}

@keyframes hiShow {

    0% {

        opacity: 0;

        transform:
            translateY(15px)
            scale(.7);

    }

    20% {
        opacity: 1;
    }

    70% {
        opacity: 1;
    }

    100% {

        opacity: 0;

        transform:
            translateY(-35px)
            scale(1.1);

    }

}


/* =====================================================
   DESK
===================================================== */

.desk {

    position: absolute;

    width: min(650px, 70vw);

    height: 160px;

    left: 50%;
    top: 56%;

    transform:
        translateX(-50%);
}

.desk-top {

    width: 100%;
    height: 18px;

    border-radius: 5px;

    background: #151515;

    box-shadow:
        0 25px 60px
        rgba(0,0,0,.9);
}

.desk-leg {

    position: absolute;

    width: 9px;
    height: 125px;

    top: 16px;

    background: #0e0e0e;
}

.desk-left {
    left: 5%;
}

.desk-right {
    right: 5%;
}


/* =====================================================
   LAPTOP
===================================================== */

.laptop {

    position: absolute;

    width: 270px;

    left: 50%;
    top: calc(56% - 155px);

    transform:
        translateX(-50%)
        perspective(800px)
        rotateX(7deg);

    z-index: 40;

    animation:
        laptopWake
        3s
        5s
        ease-in-out
        infinite alternate;
}

@keyframes laptopWake {

    from {

        filter:
            drop-shadow(
                0 0 3px
                rgba(255,255,255,.05)
            );
    }

    to {

        filter:
            drop-shadow(
                0 0 25px
                rgba(255,255,255,.22)
            );
    }

}

.laptop-screen {

    position: relative;

    height: 165px;
    

    padding: 25px;

    overflow: hidden;

    border:
        5px solid
        #1c1c1c;

    border-radius:
        12px 12px 5px 5px;

    background: #030303;
}

.screen-glow {

    position: absolute;

    inset: 0;

    background:
        radial-gradient(
            circle at center,
            rgba(255,255,255,.07),
            transparent 70%
        );
}

.keyboard {

    height: 12px;

    border-radius:
        0 0 15px 15px;

    background: #151515;
}


/* =====================================================
   CODE
===================================================== */

.code {

    position: relative;

    display: flex;

    flex-direction: column;

    gap: 12px;

    font-size: 8px;

    letter-spacing: 2px;

    opacity: 0;

    animation:
        codeBoot
        1.5s
        5.3s
        forwards;
}

@keyframes codeBoot {

    from {

        opacity: 0;

        transform:
            translateY(20px);
    }

    to {

        opacity: .85;

        transform:
            translateY(0);
    }

}


/* =====================================================
   PARTICLES
===================================================== */

.particle {

    position: absolute;

    width: 4px;
    height: 4px;

    border-radius: 50%;

    background: #fff;

    opacity: 0;

    box-shadow:
        0 0 12px
        rgba(255,255,255,.8);

    animation:
        particles
        2.4s
        6.6s
        ease-in-out
        infinite;
}

.particle-1 {
    left: 45%;
    top: 50%;
}

.particle-2 {
    left: 51%;
    top: 43%;
}

.particle-3 {
    left: 57%;
    top: 48%;
}

.particle-4 {
    left: 61%;
    top: 54%;
}

.particle-5 {
    left: 48%;
    top: 57%;
}

.particle-6 {
    left: 54%;
    top: 60%;
}

.particle-7 {
    left: 63%;
    top: 45%;
}

.particle-8 {
    left: 43%;
    top: 46%;
}

@keyframes particles {

    0% {

        opacity: 0;

        transform:
            translate(0, 25px)
            scale(.2);
    }

    35% {
        opacity: .8;
    }

    100% {

        opacity: 0;

        transform:
            translate(
                var(--x, 0),
                -90px
            )
            scale(1.5);
    }

}


/* =====================================================
   ROCKET
===================================================== */

.rocket {

    position: absolute;

    left: 50%;
    top: 56%;

    width: 90px;
    height: 150px;

    z-index: 100;

    opacity: 0;

    transform:
        translate(-50%, 0)
        scale(.1);

    animation:
        rocketLaunch
        3.2s
        8.1s
        cubic-bezier(.15,.75,.1,1)
        forwards;
}

.rocket-body {

    position: absolute;

    width: 45px;
    height: 82px;

    left: 22px;
    top: 0;

    border-radius:
        50% 50% 35% 35%;

    background:
        linear-gradient(
            90deg,
            #bcbcbc,
            #fff,
            #777
        );

    box-shadow:
        0 0 35px
        rgba(255,255,255,.45);
}

.rocket-window {

    position: absolute;

    width: 13px;
    height: 13px;

    left: 16px;
    top: 25px;

    border-radius: 50%;

    background: #111;

    border:
        2px solid
        #888;
}

.rocket-fin {

    position: absolute;

    width: 18px;
    height: 32px;

    top: 54px;

    background: #888;

    border-radius: 4px;
}

.rocket-fin.left {

    left: 8px;

    transform:
        skewY(25deg);
}

.rocket-fin.right {

    right: 8px;

    transform:
        skewY(-25deg);
}

.rocket-flame {

    position: absolute;

    width: 22px;
    height: 75px;

    left: 34px;
    top: 70px;

    background:
        linear-gradient(
            to bottom,
            #fff,
            rgba(255,255,255,.25),
            transparent
        );

    filter: blur(7px);

    animation:
        flame
        .12s
        infinite alternate;
}

@keyframes flame {

    from {
        transform: scaleY(.7);
    }

    to {
        transform: scaleY(1.25);
    }

}

@keyframes rocketLaunch {

    0% {

        opacity: 0;

        transform:
            translate(-50%, 20px)
            scale(.1);
    }

    15% {

        opacity: 1;

        transform:
            translate(-50%, 0)
            scale(.55);
    }

    35% {

        transform:
            translate(-50%, -20px)
            scale(.8);
    }

    55% {

        transform:
            translate(-50%, -150px)
            scale(1);
    }

    100% {

        opacity: 1;

        transform:
            translate(
                -50%,
                -120vh
            )
            scale(1.45);
    }

}


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

.intro-title {

    position: absolute;

    left: 5vw;
    bottom: 8vh;

    z-index: 150;

    opacity: 0;

    animation:
        titleReveal
        1.4s
        4.1s
        forwards;
}

@keyframes titleReveal {

    from {

        opacity: 0;

        transform:
            translateY(30px);
    }

    to {

        opacity: 1;

        transform:
            translateY(0);
    }

}

.title-small {

    font-size: 13px;

    letter-spacing: 5px;

    opacity: .4;
}

.title-main {

    margin-top: 12px;

    font-size:
        clamp(48px, 7vw, 100px);

    line-height: 1.05;

    font-weight: 600;

    letter-spacing: -5px;
}

.title-main span {
    opacity: .25;
}


/* =====================================================
   STATUS
===================================================== */

.intro-status {

    position: absolute;

    bottom: 30px;
    left: 50%;

    transform:
        translateX(-50%);

    display: flex;

    align-items: center;

    gap: 9px;

    font-size: 7px;

    letter-spacing: 3px;

    opacity: .3;

    z-index: 200;
}

.intro-status span {

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #fff;

    box-shadow:
        0 0 10px
        #fff;

    animation:
        statusBlink
        1s
        infinite alternate;
}

@keyframes statusBlink {

    from {
        opacity: .2;
    }

    to {
        opacity: 1;
    }

}


/* =====================================================
   SKIP
===================================================== */

#skip {

    position: absolute;

    right: 30px;
    bottom: 25px;

    z-index: 300;

    padding: 11px 17px;

    color: #fff;

    background: transparent;

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

    font-size: 8px;

    letter-spacing: 2px;

    cursor: pointer;

    transition: .3s;
}

#skip:hover {

    background: #fff;

    color: #000;
}


/* =====================================================
   WHITE TRANSITION
===================================================== */

.white-transition {

    position: absolute;

    width: 20px;
    height: 20px;

    left: 50%;
    top: 50%;

    transform:
        translate(-50%, -50%)
        scale(0);

    border-radius: 50%;

    background: #fff;

    z-index: 500;

    pointer-events: none;

    opacity: 0;
}

#intro.launching .white-transition {

    animation:
        whiteExplosion
        1.8s
        .1s
        cubic-bezier(.2,.8,.2,1)
        forwards;
}

@keyframes whiteExplosion {

    0% {

        opacity: 1;

        transform:
            translate(-50%, -50%)
            scale(0);
    }

    30% {

        opacity: 1;

        transform:
            translate(-50%, -50%)
            scale(25);
    }

    70% {

        opacity: 1;

        transform:
            translate(-50%, -50%)
            scale(80);
    }

    100% {

        opacity: 1;

        transform:
            translate(-50%, -50%)
            scale(150);
    }

}


/* =====================================================
   HOME
===================================================== */

#home {

    position: relative;

    min-height: 100vh;
    min-height: 100svh;

    background: #030303;

    color: #fff;

    overflow: hidden;

    isolation: isolate;
}


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

.network-background {

    position: absolute;

    inset: 0;

    z-index: 0;

    overflow: hidden;

    pointer-events: none;
}

.network-glow {

    position: absolute;

    width: 800px;
    height: 800px;

    left: 50%;
    top: 48%;

    transform:
        translate(-50%, -50%);

    background:
        radial-gradient(
            circle,
            rgba(110,70,255,.14),
            rgba(180,50,255,.05) 35%,
            transparent 70%
        );

    filter: blur(20px);

    animation:
        networkGlow
        5s
        ease-in-out
        infinite alternate;
}

@keyframes networkGlow {

    0% {

        transform:
            translate(-52%, -48%)
            scale(.9);

        opacity: .6;
    }

    50% {

        transform:
            translate(-48%, -52%)
            scale(1.1);

        opacity: 1;
    }

    100% {

        transform:
            translate(-50%, -50%)
            scale(.95);

        opacity: .7;
    }

}


/* =====================================================
   NETWORK SVG
===================================================== */

.network-lines {

    position: absolute;

    width: 120%;
    height: 120%;

    left: -10%;
    top: -10%;

    opacity: .48;

    filter:
        drop-shadow(
            0 0 6px
            rgba(100,70,255,.45)
        );

    animation:
        networkFloat
        9s
        ease-in-out
        infinite alternate;
}

.network-lines path {

    fill: none;

    stroke:
        rgba(112,79,255,.45);

    stroke-width: 1;

    vector-effect:
        non-scaling-stroke;

    stroke-dasharray:
        5 8;

    animation:
        networkFlow
        4s
        linear
        infinite;
}

.layer-two path {

    stroke:
        rgba(190,70,255,.28);

    stroke-dasharray:
        3 12;

    animation-duration:
        6s;
}

.layer-three path {

    stroke:
        rgba(80,130,255,.25);

    stroke-dasharray:
        2 16;

    animation-duration:
        8s;
}

@keyframes networkFlow {

    from {
        stroke-dashoffset: 0;
    }

    to {
        stroke-dashoffset: -200;
    }

}

@keyframes networkFloat {

    0% {

        transform:
            translate3d(-1%, -1%, 0)
            scale(1);
    }

    50% {

        transform:
            translate3d(1%, 1%, 0)
            scale(1.02);
    }

    100% {

        transform:
            translate3d(-.5%, 1%, 0)
            scale(1.01);
    }

}


/* =====================================================
   NODES
===================================================== */

.network-node {

    position: absolute;

    width: 4px;
    height: 4px;

    border-radius: 50%;

    background: #b48cff;

    box-shadow:
        0 0 6px #8b5cff,
        0 0 18px rgba(120,80,255,.8),
        0 0 35px rgba(180,80,255,.35);

    animation:
        nodePulse
        2s
        ease-in-out
        infinite alternate;
}

.network-node::after {

    content: "";

    position: absolute;

    inset: -8px;

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

    border-radius: 50%;

    animation:
        nodeRing
        2s
        ease-out
        infinite;
}

@keyframes nodePulse {

    from {

        opacity: .35;

        transform:
            scale(.7);
    }

    to {

        opacity: 1;

        transform:
            scale(1.4);
    }

}

@keyframes nodeRing {

    from {

        transform:
            scale(.4);

        opacity: .8;
    }

    to {

        transform:
            scale(2.5);

        opacity: 0;
    }

}


/* Node positions */

.node-1 {
    left: 23%;
    top: 36%;
}

.node-2 {
    left: 35%;
    top: 48%;
    animation-delay: .4s;
}

.node-3 {
    left: 49%;
    top: 31%;
    animation-delay: .8s;
}

.node-4 {
    left: 62%;
    top: 47%;
    animation-delay: 1.1s;
}

.node-5 {
    left: 73%;
    top: 32%;
    animation-delay: 1.5s;
}

.node-6 {
    left: 30%;
    top: 67%;
    animation-delay: .7s;
}

.node-7 {
    left: 55%;
    top: 68%;
    animation-delay: 1.8s;
}

.node-8 {
    left: 76%;
    top: 62%;
    animation-delay: 1.2s;
}


/* =====================================================
   FLOATING PARTICLES
===================================================== */

.floating-particles span {

    position: absolute;

    width: 2px;
    height: 2px;

    background: #9d7aff;

    border-radius: 50%;

    box-shadow:
        0 0 8px #7650ff;

    animation:
        particleMove
        4s
        linear
        infinite;
}

.floating-particles span:nth-child(1) {
    left: 10%;
    top: 20%;
}

.floating-particles span:nth-child(2) {
    left: 18%;
    top: 70%;
    animation-delay: 1s;
}

.floating-particles span:nth-child(3) {
    left: 28%;
    top: 30%;
    animation-delay: 2s;
}

.floating-particles span:nth-child(4) {
    left: 40%;
    top: 75%;
    animation-delay: 3s;
}

.floating-particles span:nth-child(5) {
    left: 52%;
    top: 18%;
    animation-delay: 1.5s;
}

.floating-particles span:nth-child(6) {
    left: 64%;
    top: 72%;
    animation-delay: 4s;
}

.floating-particles span:nth-child(7) {
    left: 80%;
    top: 22%;
    animation-delay: 2.5s;
}

.floating-particles span:nth-child(8) {
    left: 88%;
    top: 58%;
    animation-delay: 1.2s;
}

.floating-particles span:nth-child(9) {
    left: 14%;
    top: 50%;
    animation-delay: 3.2s;
}

.floating-particles span:nth-child(10) {
    left: 44%;
    top: 42%;
    animation-delay: 4.2s;
}

.floating-particles span:nth-child(11) {
    left: 70%;
    top: 48%;
    animation-delay: 2.2s;
}

.floating-particles span:nth-child(12) {
    left: 92%;
    top: 32%;
    animation-delay: 5s;
}

@keyframes particleMove {

    0% {

        transform:
            translate(0, 0);

        opacity: .1;
    }

    25% {
        opacity: 1;
    }

    50% {

        transform:
            translate(25px, -35px);

        opacity: .5;
    }

    75% {
        opacity: 1;
    }

    100% {

        transform:
            translate(-20px, 25px);

        opacity: .1;
    }

}


/* =====================================================
   MODERN HEADER
===================================================== */

.modern-header {

    position: absolute;

    top: 24px;
    left: 0;

    width: 100%;

    padding:
        0 5vw;

    display: flex;

    justify-content:
        space-between;

    align-items: center;

    z-index: 50;
}

.modern-logo {

    display: flex;

    flex-direction: column;

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size: 12px;

    font-weight: 600;

    letter-spacing: 3px;

    line-height: 1.15;
}

.modern-logo span:last-child {
    opacity: .45;
}


/* =====================================================
   DESKTOP NAV
===================================================== */

.modern-nav {

    display: flex;

    align-items: center;

    gap: 5px;

    padding: 7px;

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

    border-radius: 50px;

    background:
        rgba(10,10,10,.55);

    backdrop-filter:
        blur(18px);

    box-shadow:
        0 10px 40px rgba(0,0,0,.3),
        inset 0 1px rgba(255,255,255,.04);
}

.modern-nav a {

    position: relative;

    display: flex;

    align-items: center;

    gap: 8px;

    padding:
        11px 15px;

    border-radius: 30px;

    color:
        rgba(255,255,255,.55);

    text-decoration: none;

    font-size: 10px;

    letter-spacing: 1px;

    transition:
        color .3s ease,
        background .3s ease,
        transform .3s ease;
}

.modern-nav a:hover {

    color: #fff;

    transform:
        translateY(-1px);
}

.modern-nav a.active {

    color: #fff;

    background:
        linear-gradient(
            100deg,
            #a855f7,
            #6366f1,
            #3b82f6
        );

    box-shadow:
        0 5px 25px
        rgba(110,80,255,.35);
}

.nav-icon {

    font-size: 12px;

    opacity: .85;
}


/* =====================================================
   MOBILE MENU BUTTON
===================================================== */

.mobile-menu-button {

    display: none;

    width: 42px;
    height: 42px;

    border-radius: 50%;

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

    background:
        rgba(10,10,10,.6);

    backdrop-filter:
        blur(15px);

    cursor: pointer;

    position: relative;

    z-index: 100;
}

.mobile-menu-button span {

    position: absolute;

    left: 11px;

    width: 19px;
    height: 1px;

    background: #fff;

    transition:
        .35s ease;
}

.mobile-menu-button span:nth-child(1) {
    top: 14px;
}

.mobile-menu-button span:nth-child(2) {
    top: 20px;
}

.mobile-menu-button span:nth-child(3) {
    top: 26px;
}


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

.mobile-menu {

    position: fixed;

    inset: 0;

    z-index: 80;

    background:
        radial-gradient(
            circle at 70% 35%,
            rgba(110,70,255,.14),
            transparent 35%
        ),
        #030303;

    padding:
        100px 8vw 30px;

    display: flex;

    flex-direction: column;

    justify-content:
        space-between;

    opacity: 0;

    visibility: hidden;

    transform:
        translateY(-20px);

    transition:
        opacity .4s ease,
        transform .4s ease,
        visibility .4s ease;
}

.mobile-menu.open {

    opacity: 1;

    visibility: visible;

    transform:
        translateY(0);
}


/* =====================================================
   MOBILE CLOSE BUTTON
===================================================== */

.mobile-close {

    position: absolute;

    top: 20px;
    right: 6vw;

    width: 42px;
    height: 42px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

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

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

    color: #fff;

    font-size: 27px;

    font-weight: 300;

    line-height: 1;

    cursor: pointer;

    transition:
        background .3s ease,
        transform .3s ease;
}

.mobile-close:hover {

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

    transform:
        rotate(90deg);
}


/* =====================================================
   MOBILE MENU TOP
===================================================== */

.mobile-menu-top {

    display: flex;

    justify-content:
        space-between;

    font-size: 8px;

    letter-spacing: 2px;

    color:
        rgba(255,255,255,.4);
}


/* =====================================================
   MOBILE MENU NAV
===================================================== */

.mobile-menu nav {

    display: flex;

    flex-direction: column;

    gap: 5px;
}

.mobile-menu nav a {

    display: flex;

    align-items: center;

    gap: 15px;

    color: #fff;

    text-decoration: none;

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size:
        clamp(30px, 8vw, 46px);

    font-weight: 500;

    letter-spacing:
        -.035em;

    padding:
        8px 0;

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

    transition:
        padding-left .3s ease,
        opacity .3s ease;
}

.mobile-menu nav a:hover {

    padding-left:
        10px;
}

.mobile-menu nav small {

    width: 22px;

    font-family:
        "Inter",
        sans-serif;

    font-size: 8px;

    letter-spacing: 1px;

    color:
        rgba(255,255,255,.3);
}


/* =====================================================
   MOBILE MENU BOTTOM
===================================================== */

.mobile-menu-bottom {

    display: flex;

    justify-content:
        space-between;

    gap: 20px;

    font-size: 7px;

    letter-spacing: 1.5px;

    color:
        rgba(255,255,255,.3);
}


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

.modern-hero {

    position: relative;

    z-index: 5;

    min-height: 100vh;
    min-height: 100svh;

    display: flex;

    justify-content:
        center;

    align-items:
        center;

    text-align:
        center;

    padding:
        120px 5vw 80px;
}

.hero-status {

    position: absolute;

    top: 120px;

    left: 50%;

    transform:
        translateX(-50%);

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    font-size: 8px;

    letter-spacing: 2px;

    color:
        rgba(255,255,255,.4);

    white-space:
        nowrap;
}

.status-dot {

    width: 5px;
    height: 5px;

    flex-shrink: 0;

    border-radius: 50%;

    background: #8b5cf6;

    box-shadow:
        0 0 10px
        #8b5cf6;

    animation:
        statusPulse
        1.8s
        infinite;
}

@keyframes statusPulse {

    0%, 100% {

        opacity: .4;

        transform:
            scale(.8);
    }

    50% {

        opacity: 1;

        transform:
            scale(1.2);
    }

}


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

.hero-main {

    width: 100%;

    max-width:
        1200px;

    position: relative;

    display: flex;

    flex-direction: column;

    align-items:
        center;

    justify-content:
        center;

    color: #a64ebe;
}


/* =====================================================
   EYEBROW
===================================================== */

.hero-eyebrow {

    margin: 22px;

    font-size: 11px;

    letter-spacing: 6px;

    color:
        rgba(255,255,255,.5);
}


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

.modern-hero h1 {

    margin: 0;

    display: flex;

    flex-direction: column;

    align-items:
        center;

    justify-content:
        center;

    gap: 4px;

    width: 100%;

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size:
        clamp(58px, 9vw, 125px);

    line-height: .88;

    letter-spacing:
        -.06em;

    font-weight: 600;

    text-transform:
        uppercase;
}

@keyframes titleFloat {

    from {
        transform:
            translateY(0);
    }

    to {
        transform:
            translateY(-6px);
    }

}


/* =====================================================
   SUBTITLE
===================================================== */

.hero-subtitle {

    margin-top: 36px;

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size:
        clamp(12px, 1.5vw, 20px);

    font-weight: 400;

    letter-spacing:
        1px;

    color:
        rgba(255,255,255,.65);
}


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

.hero-description {

    max-width:
        620px;

    margin:
        18px auto 0;

    font-size:
        13px;

    line-height:
        1.8;

    color:
        rgba(255,255,255,.38);
}


/* =====================================================
   SOCIALS
===================================================== */

.hero-socials {

    display: flex;

    justify-content:
        center;

    gap: 10px;

    margin-top:
        10px;
}

.hero-socials a {

    width: 42px;
    height: 42px;

    border-radius: 50%;

    display: flex;

    justify-content:
        center;

    align-items:
        center;

    color:
        rgba(255,255,255,.7);

    text-decoration:
        none;

    font-size: 10px;

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

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

    backdrop-filter:
        blur(10px);

    transition:
        transform .3s ease,
        background .3s ease,
        border .3s ease;
}

.hero-socials a:hover {

    transform:
        translateY(-5px);

    background:
        rgba(120,80,255,.2);

    border-color:
        rgba(150,100,255,.5);
}


/* =====================================================
   CTA
===================================================== */

.hero-button {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap: 20px;

    margin-top:
        27px;

    padding:
        15px 24px;

    border-radius:
        40px;

    color:
        #fff;

    text-decoration:
        none;

    font-size:
        9px;

    font-weight:
        600;

    letter-spacing:
        1px;

    background:
        linear-gradient(
            100deg,
            #a855f7,
            #6366f1,
            #3b82f6
        );

    box-shadow:
        0 10px 40px
        rgba(90,70,255,.25);

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}

.hero-button:hover {

    transform:
        translateY(-4px);

    box-shadow:
        0 15px 50px
        rgba(110,80,255,.4);
}

.button-arrow {

    display: flex;

    align-items:
        center;

    justify-content:
        center;

    width: 24px;
    height: 24px;

    border-radius:
        50%;

    background:
        rgba(255,255,255,.18);
}


/* =====================================================
   SIDE DETAILS
===================================================== */

.hero-side {

    position: absolute;

    top: 50%;

    transform:
        translateY(-50%);

    display: flex;

    flex-direction:
        column;

    align-items:
        center;

    gap: 12px;

    font-size: 7px;

    letter-spacing: 2px;

    color:
        rgba(255,255,255,.25);
}

.hero-side div {

    width: 1px;
    height: 60px;

    background:
        linear-gradient(
            transparent,
            rgba(255,255,255,.3),
            transparent
        );
}

.left-side {
    left: 4vw;
}

.right-side {
    right: 4vw;
}


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

.hero-scroll-indicator {

    position: absolute;

    bottom: 24px;

    left: 50%;

    transform:
        translateX(-50%);

    display: flex;

    flex-direction:
        column;

    align-items:
        center;

    gap: 9px;

    font-size: 7px;

    letter-spacing: 3px;

    color:
        rgba(255,255,255,.25);
}

.scroll-line {

    width: 1px;

    height: 38px;

    overflow:
        hidden;

    background:
        rgba(255,255,255,.1);
}

.scroll-line i {

    display:
        block;

    width: 100%;

    height: 50%;

    background:
        #fff;

    animation:
        scrollIndicator
        1.7s
        ease-in-out
        infinite;
}

@keyframes scrollIndicator {

    0% {
        transform:
            translateY(-100%);
    }

    100% {
        transform:
            translateY(200%);
    }

}


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

@media (max-width: 900px) {

    .modern-header {
        padding:
            0 5vw;
    }

    .modern-nav a {

        padding:
            9px 10px;

        font-size: 8px;
    }

    .modern-nav {
        gap: 2px;
    }

    .modern-hero {

        padding-left:
            6vw;

        padding-right:
            6vw;
    }

    .modern-hero h1 {

        font-size:
            clamp(52px, 10vw, 95px);
    }

    .hero-subtitle {

        font-size:
            16px;
    }

    .hero-side {
        display: none;
    }

}


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

@media (max-width: 600px) {

    body {
        overflow: hidden;
    }


    /* =================================================
       HOME
    ================================================== */

    #home {

        min-height:
            100svh;
    }


    /* =================================================
       HEADER
    ================================================== */

    .modern-header {

        top: 17px;

        padding:
            0 6vw;

        justify-content:
            center;
    }

    .modern-logo {

        align-items:
            center;

        text-align:
            center;

        font-size:
            13px;

        font-weight:
            600;

        letter-spacing:
            2.8px;

        line-height:
            1.25;
    }

    .modern-nav {
        display:
            none;
    }

    .mobile-menu-button {

        display:
            block;

        position:
            absolute;

        right:
            6vw;

        top:
            -3px;
    }


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

    .modern-hero {

        min-height:
            100svh;

        padding:
            105px 6vw 65px;

        align-items:
            center;

        justify-content:
            center;
    }


    /* =================================================
       STATUS
    ================================================== */

    .hero-status {

        top:
            86px;

        width:
            100%;

        justify-content:
            center;

        font-size:
            6.5px;

        letter-spacing:
            1.2px;
        font-size: 15px;
    }


    /* =================================================
       MAIN
    ================================================== */

    .hero-main {

        width:
            100%;

        max-width:
            360px;

        margin:
            0 auto;
    }


    /* =================================================
       EYEBROW
    ================================================== */

    .hero-eyebrow {

        font-size:
            13px;

        letter-spacing:
            3.5px;

        margin-bottom:
            17px;
            
    }


    /* =================================================
       CREATIVE DEVELOPER
    ================================================== */

    .modern-hero h1 {

        width:
            100%;

        gap:
            7px;

        font-size:
            clamp(42px, 13vw, 64px);

        line-height:
            .92;

        letter-spacing:
            -.055em;

        text-align:
            center;
    }

    .hero-word {

        width:
            auto;

        max-width:
            100%;

        white-space:
            nowrap;
    }

    .word-two {

        margin-left:
            0;

        animation-delay:
            -.8s;
    }


    /* =================================================
       SUBTITLE
    ================================================== */

    .hero-subtitle {

        margin-top:
            25px;

        max-width:
            310px;

        font-size:
            clamp(16px, 4.7vw, 20px);

        line-height:
            1.3;

        letter-spacing:
            .3px;

        color:
            rgba(255,255,255,.65);
    }


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

    .hero-description {

        max-width:
            310px;

        margin-top:
            14px;

        font-size:
            18px;

        line-height:
            1.7;
        text-align: left;

        color:
            rgba(255,255,255,.43);
    }


    /* =================================================
       SOCIALS
    ================================================== */

    .hero-socials {

        margin-top:
            19px;

        gap:
            9px;
    }

    .hero-socials a {

        width:
            39px;

        height:
            39px;

        font-size:
            15px;
    }


    /* =================================================
       BUTTON
    ================================================== */

    .hero-button {

        margin-top:
            19px;

        padding:
            12px 18px;

        gap:
            15px;

        font-size:
            12px;
    }

    .button-arrow {

        width:
            22px;

        height:
            22px;
    }


    /* =================================================
       HIDE SIDE DETAILS
    ================================================== */

    .hero-side {

        display:
            none !important;
    }


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

    .hero-scroll-indicator {

        bottom:
            12px;

        font-size:
            5.5px;

        letter-spacing:
            2px;
    }

    .scroll-line {

        height:
            27px;
    }


    /* =================================================
       NETWORK
    ================================================== */

    .network-glow {

        width:
            520px;

        height:
            520px;
    }

    .network-lines {

        width:
            190%;

        height:
            135%;

        left:
            -45%;

        top:
            -17%;

        opacity:
            .43;

        animation-duration:
            6s;
    }

    .network-lines path {

        animation-duration:
            3s;
    }

    .layer-two path {
        animation-duration:
            4s;
    }

    .layer-three path {
        animation-duration:
            5s;
    }


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

    .intro-header {

        padding:
            20px;

        justify-content:
            center;
    }

    .header-name {

        font-size:
            20px;

        letter-spacing:
            2.5px;
    }

    .header-right {
        display:
            none;
    }


    /* =================================================
       CHARACTER
    ================================================== */

    .character {

        width:
            100px;

        height:
            220px;

        left:
            7%;

        top:
            36%;

        transform:
            translateX(-300px)
            scale(.75);
    }


    /* =================================================
       DESK
    ================================================== */

    .desk {

        width:
            90%;

        top:
            55%;
    }


    /* =================================================
       LAPTOP
    ================================================== */

    .laptop {

        width:
            210px;

        top:
            calc(55% - 125px);
    }

    .laptop-screen {

        height:
            130px;

        padding:
            17px;
    }

    .code {

        font-size:
            6px;

        gap:
            9px;
    }


    /* =================================================
       HI
    ================================================== */

    .hi-message {

        left:
            42%;

        top:
            30%;
    }

    .hi-message span {
        font-size:
            18px;
    }


    /* =================================================
       ROCKET
    ================================================== */

    .rocket {
        top:
            55%;
    }


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

    .intro-title {

        left:
            50%;

        bottom:
            auto;

        top:
            13%;

        width:
            100%;

        text-align:
            center;

        animation:
            mobileTitleReveal
            1.4s
            4.1s
            forwards;
    }

    @keyframes mobileTitleReveal {

        from {

            opacity: 0;

            transform:
                translate(-50%, -20px);
        }

        to {

            opacity: 1;

            transform:
                translate(-50%, 0);
        }

    }

    .title-small {

        font-size:
            11px;

        letter-spacing:
            4px;
    }

    .title-main {

        margin-top:
            7px;

        font-size:
            34px;

        letter-spacing:
            7px;

        line-height:
            1.05;
    }


    /* =================================================
       INTRO STATUS
    ================================================== */

    .intro-status {

        bottom:
            15px;

        font-size:
            8px;

        letter-spacing:
            1.5px;
    }


    /* =================================================
       SKIP
    ================================================== */

    #skip {

        right:
            15px;

        bottom:
            14px;

        padding:
            8px 12px;

        font-size:
            9px;
    }

}


/* =====================================================
   VERY SMALL PHONES
===================================================== */

@media (max-width: 380px) {

    .modern-logo {

        font-size:
            12px;
    }

    .modern-hero {

        padding-top:
            100px;

        padding-bottom:
            58px;
    }

    .hero-status {

        top:
            82px;

        font-size:
            5.5px;
    }

    .modern-hero h1 {

        font-size:
            39px;

        gap:
            5px;
    }

    .hero-subtitle {

        margin-top:
            22px;

        font-size:
            15px;
    }

    .hero-description {

        max-width:
            280px;

        font-size:
            10px;
    }

    .hero-socials {

        margin-top:
            16px;
    }

    .hero-button {

        margin-top:
            16px;
    }

    .mobile-menu nav a {

        font-size:
            29px;
    }

}


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

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

    *,
    *::before,
    *::after {

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        scroll-behavior:
            auto !important;
    }

}

/* =========================================================
   ABOUT SECTION
========================================================= */

.about-section {
    position: relative;
    min-height: 100vh;

    padding: 140px 7vw 0;

    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(110, 70, 255, 0.10),
            transparent 32%
        ),
        radial-gradient(
            circle at 85% 65%,
            rgba(50, 100, 255, 0.08),
            transparent 30%
        ),
        #030303;

    color: #fff;

    overflow: hidden;
}


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

.about-grid {
    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            rgba(255,255,255,0.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,0.025) 1px,
            transparent 1px
        );

    background-size: 70px 70px;

    mask-image:
        linear-gradient(
            to bottom,
            transparent,
            black 20%,
            black 80%,
            transparent
        );

    pointer-events: none;
}


.about-bg-glow {
    position: absolute;

    width: 400px;
    height: 400px;

    border-radius: 50%;

    filter: blur(120px);

    pointer-events: none;

    opacity: 0.15;
}


.about-glow-one {
    top: 10%;
    left: -150px;

    background: #6c4cff;
}


.about-glow-two {
    top: 55%;
    right: -150px;

    background: #3478ff;
}


/* =========================================================
   SECTION LABEL
========================================================= */

.about-section-label {
    position: relative;

    display: flex;
    align-items: center;
    gap: 14px;

    margin-bottom: 100px;

    font-family: "Manrope", sans-serif;

    font-size: 9px;
    letter-spacing: 0.25em;

    color: rgba(255,255,255,0.5);
}


.about-section-label div {
    width: 70px;
    height: 1px;

    background: rgba(255,255,255,0.2);
}


/* =========================================================
   ABOUT INTRO
========================================================= */

.about-intro {
    position: relative;

    display: grid;
    grid-template-columns: 1.1fr 0.9fr;

    gap: 8vw;

    max-width: 1400px;

    margin: 0 auto;
}


.about-intro-left {
    padding-top: 5px;
}


.about-eyebrow {
    margin: 0 0 24px;

    font-family: "Manrope", sans-serif;

    font-size: 10px;

    letter-spacing: 0.28em;

    color: #9d82ff;
}


.about-intro h2 {
    margin: 0;

    max-width: 800px;

    font-family: "Space Grotesk", sans-serif;

    font-size: clamp(48px, 6vw, 92px);

    line-height: 0.95;

    letter-spacing: -0.055em;

    font-weight: 500;
}


.about-intro h2 span {
    display: block;

    color: transparent;

    -webkit-text-stroke: 1px rgba(255,255,255,0.75);

    transition: 0.4s ease;
}


.about-intro h2:hover span {
    color: #b299ff;

    -webkit-text-stroke-color: #b299ff;

    text-shadow:
        0 0 25px rgba(140,90,255,0.35);
}


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

.about-intro-right {
    align-self: end;

    max-width: 500px;

    padding-bottom: 5px;
}


.about-description {
    margin: 0 0 28px;

    font-family: "Manrope", sans-serif;

    font-size: 15px;

    line-height: 1.9;

    color: rgba(255,255,255,0.58);
}


.about-description:last-child {
    margin-bottom: 0;
}


/* =========================================================
   STATS
========================================================= */

.about-stats {
    position: relative;

    display: grid;

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

    gap: 20px;

    max-width: 1400px;

    margin: 130px auto 180px;

    border-top: 1px solid rgba(255,255,255,0.12);

    border-bottom: 1px solid rgba(255,255,255,0.12);
}


.about-stat {
    position: relative;

    padding: 45px 20px 45px 0;
}


.stat-number {
    font-family: "Space Grotesk", sans-serif;

    font-size: clamp(48px, 5vw, 76px);

    line-height: 1;

    letter-spacing: -0.05em;

    font-weight: 500;
}


.stat-number span {
    color: #9f82ff;
}


.stat-line {
    width: 35px;
    height: 1px;

    margin: 22px 0;
    
    font-size: 15px;

    background: #8060ff;
}


.about-stat p {
    margin: 0;

    font-family: "Manrope", sans-serif;

    font-size: 10px;

    line-height: 1.7;

    text-transform: uppercase;

    letter-spacing: 0.12em;

    color: rgba(255,255,255,0.4);
}


/* =========================================================
   EXPERIENCE
========================================================= */

.experience-section {
    position: relative;

    max-width: 1400px;

    margin: 0 auto;
}


.experience-heading {
    display: flex;

    justify-content: space-between;

    align-items: end;

    margin-bottom: 100px;
}


.experience-heading h2 {
    margin: 0;

    font-family: "Space Grotesk", sans-serif;

    font-size: clamp(44px, 5vw, 76px);

    line-height: 0.95;

    letter-spacing: -0.05em;

    font-weight: 500;
}


.experience-heading h2 span {
    color: transparent;

    -webkit-text-stroke: 1px rgba(255,255,255,0.7);
}


.experience-subtitle {
    width: 250px;

    margin: 0;

    font-family: "Manrope", sans-serif;

    font-size: 11px;

    line-height: 1.8;

    color: rgba(255,255,255,0.4);

    text-align: right;
}


/* =========================================================
   TIMELINE
========================================================= */

.experience-timeline {
    position: relative;
}


.experience-item {
    display: grid;

    grid-template-columns: 80px 40px 1fr;

    gap: 25px;

    min-height: 280px;

    position: relative;
}


/* Index */

.experience-index {
    padding-top: 10px;

    font-family: "Space Grotesk", sans-serif;

    font-size: 11px;

    letter-spacing: 0.12em;

    color: rgba(255,255,255,0.35);
}


/* Timeline Line */

.experience-line {
    position: relative;

    display: flex;

    justify-content: center;
}


.experience-line::before {
    content: "";

    position: absolute;

    top: 10px;
    bottom: 0;

    width: 1px;

    background:
        linear-gradient(
            to bottom,
            rgba(160,120,255,0.8),
            rgba(255,255,255,0.08)
        );
}


.experience-line span {
    position: relative;

    width: 9px;
    height: 9px;

    margin-top: 6px;

    border-radius: 50%;

    background: #a386ff;

    box-shadow:
        0 0 15px rgba(150,110,255,0.9),
        0 0 35px rgba(120,80,255,0.5);

    z-index: 2;
}


/* Content */

.experience-content {
    padding: 0 0 80px;
}


.experience-company {
    display: flex;

    align-items: center;

    gap: 25px;
}


.company-logo {
    width: 70px;
    height: 70px;

    display: flex;

    align-items: center;
    justify-content: center;

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

    background: rgba(255,255,255,0.025);

    overflow: hidden;

    transition:
        transform 0.4s ease,
        border-color 0.4s ease,
        box-shadow 0.4s ease;
}


.company-logo img {
    width: 100%;
    height: 100%;

    object-fit: contain;

    padding: 10px;

    filter: grayscale(100%);

    opacity: 0.7;

    transition: 0.4s ease;
}


.experience-item:hover .company-logo {
    transform: translateY(-5px);

    border-color: rgba(160,120,255,0.6);

    box-shadow:
        0 10px 40px rgba(100,70,255,0.15);
}


.experience-item:hover .company-logo img {
    filter: grayscale(0);

    opacity: 1;
}


.experience-date {
    margin: 0 0 8px;

    font-family: "Manrope", sans-serif;

    font-size: 9px;

    letter-spacing: 0.18em;

    color: #9275ff;
}


.experience-company h3 {
    margin: 0;

    font-family: "Space Grotesk", sans-serif;

    font-size: clamp(22px, 2.3vw, 34px);

    line-height: 1.1;

    font-weight: 500;

    letter-spacing: -0.03em;
}


.company-name {
    margin: 7px 0 0;

    font-family: "Manrope", sans-serif;

    font-size: 10px;

    text-transform: uppercase;

    letter-spacing: 0.15em;

    color: rgba(255,255,255,0.35);
}


.experience-description {
    max-width: 700px;

    margin: 30px 0 0;

    font-family: "Manrope", sans-serif;

    font-size: 12px;

    line-height: 1.9;

    color: rgba(255,255,255,0.5);
}


/* =========================================================
   CTA
========================================================= */

.about-cta {
    position: relative;

    text-align: center;

    max-width: 1100px;

    margin: 150px auto 120px;

    padding: 110px 20px;

    border-top: 1px solid rgba(255,255,255,0.1);
    border-bottom: 1px solid rgba(255,255,255,0.1);
}


.about-cta > p {
    margin: 0 0 25px;

    font-family: "Manrope", sans-serif;

    font-size: 9px;

    letter-spacing: 0.3em;

    color: #9579ff;
}


.about-cta h2 {
    margin: 0 auto 45px;

    max-width: 800px;

    font-family: "Space Grotesk", sans-serif;

    font-size: clamp(42px, 6vw, 80px);

    line-height: 0.95;

    letter-spacing: -0.055em;

    font-weight: 500;
}


.about-cta h2 span {
    color: transparent;

    -webkit-text-stroke: 1px rgba(255,255,255,0.7);
}


.about-cta-button {
    display: inline-flex;

    align-items: center;

    gap: 18px;

    padding: 15px 25px;

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

    color: white;

    text-decoration: none;

    font-family: "Manrope", sans-serif;

    font-size: 9px;

    letter-spacing: 0.2em;

    transition:
        background 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease;
}


.about-cta-button span {
    font-size: 17px;

    transition: transform 0.3s ease;
}


.about-cta-button:hover {
    background: rgba(140,100,255,0.12);

    border-color: rgba(160,120,255,0.7);

    transform: translateY(-3px);
}


.about-cta-button:hover span {
    transform: translate(4px, -4px);
}


/* =========================================================
   FOOTER
========================================================= */

.about-footer {
    display: flex;

    justify-content: space-between;

    padding: 30px 0;

    border-top: 1px solid rgba(255,255,255,0.08);

    font-family: "Manrope", sans-serif;

    font-size: 8px;

    letter-spacing: 0.15em;

    text-transform: uppercase;

    color: rgba(255,255,255,0.3);
}


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

@media (max-width: 900px) {

    .about-section {
        padding: 110px 6vw 0;
    }

    .about-intro {
        grid-template-columns: 1fr;

        gap: 50px;
    }

    .about-intro-right {
        max-width: 700px;
    }

    .about-stats {
        grid-template-columns: repeat(2, 1fr);

        margin: 100px auto 130px;
    }

    .experience-heading {
        display: block;
    }

    .experience-subtitle {
        text-align: left;
        font-size: 9px;
        margin-top: 25px;
    }

}


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

@media (max-width: 600px) {

    .about-section {
        padding: 90px 6vw 0;
    }


    .about-section-label {
        margin-bottom: 65px;

        font-size: 8px;
    }


    .about-section-label div {
        width: 40px;
    }


    .about-intro {
        gap: 40px;
    }


    .about-eyebrow {
        font-size: 8px;

        margin-bottom: 18px;
    }


    .about-intro h2 {
        font-size: clamp(40px, 12vw, 62px);

        line-height: 0.94;

        letter-spacing: -0.05em;
    }


    .about-description {
        font-size: 20px;

        line-height: 1.8;

        margin-bottom: 20px;
    }


    /* Stats */

    .about-stats {
        grid-template-columns: repeat(2, 1fr);

        gap: 0;

        margin: 90px 0 110px;
    }


    .about-stat {
        padding: 30px 10px 30px 0;
    }


    .stat-number {
        font-size: clamp(38px, 12vw, 55px);
    }


    .about-stat p {
        font-size: 8px;

        line-height: 1.6;

        letter-spacing: 0.08em;

        font-size: 14px;
    }


    .stat-line {
        margin: 15px 0;
        
    font-size: 15px;

        width: 25px;
    }


    /* Experience */

    .experience-heading {
        margin-bottom: 65px;
    }


    .experience-heading h2 {
        font-size: clamp(38px, 11vw, 58px);
    }


    .experience-subtitle {
        width: auto;

        font-size: 12px;

        line-height: 1.7;
    }


    .experience-item {
        grid-template-columns: 25px 20px 1fr;

        gap: 10px;

        min-height: 300px;
    }


    .experience-index {
        font-size: 8px;
    }


    .experience-company {
        align-items: flex-start;

        gap: 15px;
    }


    .company-logo {
        width: 48px;
        height: 48px;

        flex-shrink: 0;
    }


    .company-logo img {
        padding: 7px;
    }


    .experience-date {
        font-size: 15px;

        letter-spacing: 0.12em;

        margin-bottom: 7px;
    }


    .experience-company h3 {
        font-size: 19px;

        line-height: 1.15;
    }


    .company-name {
        font-size: 12px;

        margin-top: 5px;
    }


    .experience-description {
        font-size: 15px;

        line-height: 1.8;

        margin-top: 22px;
    }


    /* CTA */

    .about-cta {
        margin: 100px auto 80px;

        padding: 80px 10px;
    }


    .about-cta h2 {
        font-size: clamp(38px, 11vw, 55px);
    }


    .about-cta-button {
        padding: 13px 20px;

        font-size: 8px;
    }


    /* Footer */

    .about-footer {
        flex-direction: column;

        gap: 10px;

        font-size: 7px;

        text-align: center;
    }

}




/* =========================================================
   UDEMY SECTION
========================================================= */

.udemy-section {
    position: relative;

    width: 100%;
    min-height: 90vh;

    padding: 140px 7vw 120px;

    background:
        radial-gradient(
            circle at 85% 35%,
            rgba(125, 80, 255, 0.10),
            transparent 35%
        ),
        #030303;

    color: #fff;

    overflow: hidden;

    box-sizing: border-box;
}


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

.udemy-glow {
    position: absolute;

    width: 450px;
    height: 450px;

    border-radius: 50%;

    filter: blur(130px);

    pointer-events: none;

    opacity: .12;
}


.udemy-glow-one {
    top: 10%;
    right: -200px;

    background: #754cff;
}


.udemy-glow-two {
    bottom: -250px;
    left: -200px;

    background: #315dff;
}


/* =========================================================
   SECTION LABEL
========================================================= */

.udemy-section-label {
    position: relative;

    width: 100%;

    display: flex;

    align-items: center;

    gap: 14px;

    margin: 0 0 110px;

    font-family: "Manrope", sans-serif;

    font-size: 9px;

    letter-spacing: .25em;

    color: rgba(255,255,255,.4);
}


.udemy-section-label div {
    width: 70px;

    height: 1px;

    background:
        rgba(255,255,255,.2);
}


/* =========================================================
   MAIN
========================================================= */

.udemy-container {
    position: relative;

    width: 100%;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);

    gap: 10vw;

    margin: 0;

    padding: 0;

    box-sizing: border-box;
}


/* =========================================================
   LEFT
========================================================= */

.udemy-left {
    position: relative;

    width: 100%;

    min-width: 0;
}


.udemy-eyebrow {
    margin: 0 0 25px;

    font-family: "Manrope", sans-serif;

    font-size: 10px;

    letter-spacing: .28em;

    color: #9d80ff;
}


.udemy-title {
    margin: 0;

    width: 100%;

    font-family: "Space Grotesk", sans-serif;

    font-size:
        clamp(52px, 7vw, 110px);

    line-height: .91;

    letter-spacing: -.06em;

    font-weight: 500;
}


.udemy-title span {
    display: block;

    color: transparent;

    -webkit-text-stroke:
        1px rgba(255,255,255,.75);

    transition:
        color .4s ease,
        -webkit-text-stroke-color .4s ease,
        text-shadow .4s ease;
}


.udemy-title:hover span {

    color: #a88cff;

    -webkit-text-stroke-color:
        #a88cff;

    text-shadow:
        0 0 30px
        rgba(140,90,255,.25);
}


/* =========================================================
   RIGHT
========================================================= */

.udemy-right {
    position: relative;

    width: 100%;

    max-width: 620px;

    align-self: end;

    padding: 0 0 5px;

    box-sizing: border-box;
}


/* =========================================================
   BADGE
========================================================= */

.udemy-badge {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    margin-bottom: 30px;

    padding: 8px 12px;

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

    font-family: "Manrope", sans-serif;

    font-size: 7px;

    letter-spacing: .18em;

    color:
        rgba(255,255,255,.45);
}


.udemy-dot {

    width: 5px;
    height: 5px;

    flex-shrink: 0;

    border-radius: 50%;

    background: #9b7cff;

    box-shadow:
        0 0 10px
        rgba(150,110,255,.9);

    animation:
        udemyPulse
        2s
        ease-in-out
        infinite;
}


@keyframes udemyPulse {

    0%,
    100% {

        opacity: .4;

        transform:
            scale(.8);
    }

    50% {

        opacity: 1;

        transform:
            scale(1.2);
    }

}


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

.udemy-description {

    width: 100%;

    max-width: 600px;

    margin: 0 0 25px;

    font-family: "Manrope", sans-serif;

    font-size: 14px;

    line-height: 1.9;

    color:
        rgba(255,255,255,.52);
}


.udemy-description strong {

    color: #fff;

    font-weight: 600;
}


/* =========================================================
   CTA
========================================================= */

.udemy-cta {

    display: inline-flex;

    align-items: center;

    justify-content: space-between;

    gap: 25px;

    margin-top: 15px;

    padding: 15px 20px;

    min-width: 175px;

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

    color: #fff;

    text-decoration: none;

    font-family: "Manrope", sans-serif;

    font-size: 8px;

    letter-spacing: .2em;

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


.udemy-cta-arrow {

    font-size: 17px;

    line-height: 1;

    transition:
        transform .35s ease;
}


.udemy-cta:hover {

    background:
        rgba(130,90,255,.10);

    border-color:
        rgba(170,130,255,.7);

    transform:
        translateY(-4px);

    box-shadow:
        0 15px 40px
        rgba(100,70,255,.12);
}


.udemy-cta:hover .udemy-cta-arrow {

    transform:
        translate(5px,-5px);
}


/* =========================================================
   BOTTOM STATS
========================================================= */

.udemy-bottom {

    position: relative;

    width: 100%;

    display: grid;

    grid-template-columns:
        1.5fr 1fr 1fr;

    margin: 120px 0 0;

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

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

    box-sizing: border-box;
}


/* =========================================================
   MAIN STAT
========================================================= */

.udemy-main-stat {

    display: flex;

    align-items: flex-end;

    gap: 25px;

    padding:
        45px 30px 45px 0;
}


.udemy-stat-number {

    font-family: "Space Grotesk", sans-serif;

    font-size:
        clamp(65px, 8vw, 120px);

    line-height: .8;

    letter-spacing: -.07em;

    font-weight: 500;
}


.udemy-stat-number span {

    color: #9d7cff;
}


.udemy-stat-label {

    padding-bottom: 5px;

    font-family: "Manrope", sans-serif;

    font-size: 8px;

    letter-spacing: .2em;

    color:
        rgba(255,255,255,.35);
}


/* =========================================================
   SMALL STATS
========================================================= */

.udemy-small-stat {

    display: flex;

    flex-direction: column;

    justify-content: center;

    gap: 12px;

    padding:
        35px 20px 35px 35px;

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


.udemy-small-number {

    font-family: "Space Grotesk", sans-serif;

    font-size: 34px;

    font-weight: 500;

    letter-spacing: -.03em;
}


.udemy-small-label {

    font-family: "Manrope", sans-serif;

    font-size: 8px;

    line-height: 1.7;

    letter-spacing: .12em;

    color:
        rgba(255,255,255,.3);
}


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

@media (max-width: 900px) {

    .udemy-section {

        padding:
            110px 6vw 100px;
    }


    .udemy-container {

        grid-template-columns:
            1fr 1fr;

        gap: 6vw;
    }


    .udemy-title {

        font-size:
            clamp(48px, 8vw, 82px);
    }


    .udemy-right {

        max-width: 100%;
    }


    .udemy-description {

        font-size: 12px;
    }

}


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

@media (max-width: 600px) {

    .udemy-section {

        width: 100%;

        min-height: auto;

        padding:
            90px 6vw 80px;

        overflow: hidden;
    }


    /* Label */

    .udemy-section-label {

        width: 100%;

        margin-bottom: 65px;

        font-size: 7px;
    }


    .udemy-section-label div {

        width: 40px;
    }


    /* Main */

    .udemy-container {

        width: 100%;

        grid-template-columns:
            1fr;

        gap: 50px;
    }


    /* Left */

    .udemy-left {

        width: 100%;
    }


    .udemy-eyebrow {

        font-size: 8px;

        margin-bottom: 18px;
    }


    .udemy-title {

        width: 100%;

        font-size:
            clamp(42px, 12vw, 62px);

        line-height: .93;
    }


    /* Right */

    .udemy-right {

        width: 100%;

        max-width: 100%;

        padding: 0;
    }


    .udemy-badge {

        margin-bottom: 22px;

        font-size: 6px;
    }


    .udemy-description {

        width: 100%;

        max-width: 100%;

        font-size: 15px;

        line-height: 1.8;

        margin-bottom: 20px;
    }


    /* Button */

    .udemy-cta {

        min-width: 165px;

        padding:
            13px 17px;

        font-size: 12px;
    }


    /* Stats */

    .udemy-bottom {

        width: 100%;

        grid-template-columns:
            1fr 1fr;

        margin-top: 80px;
    }


    .udemy-main-stat {

        grid-column:
            1 / -1;

        padding:
            35px 0;

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


    .udemy-stat-number {

        font-size: 78px;
    }


    .udemy-small-stat {

        padding:
            28px 10px 28px 0;

        border-left: none;
    }


    .udemy-small-stat:last-child {

        padding-left: 20px;

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


    .udemy-small-number {

        font-size: 25px;
    }


    .udemy-small-label {

        font-size: 6px;
    }

}


/* =========================================================
   SERVICES SECTION
========================================================= */

.services-section {
    position: relative;
    min-height: 100vh;
    padding: 150px 7vw 80px;
    background: #030303;
    color: #ffffff;
    overflow: hidden;
}


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

.services-grid {
    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            rgba(255,255,255,0.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,0.025) 1px,
            transparent 1px
        );

    background-size: 70px 70px;

    mask-image: linear-gradient(
        to bottom,
        black,
        transparent 80%
    );

    pointer-events: none;
}


.services-glow {
    position: absolute;

    width: 450px;
    height: 450px;

    border-radius: 50%;

    filter: blur(140px);

    pointer-events: none;

    opacity: 0.12;
}


.services-glow-1 {
    top: 10%;
    right: -200px;
    background: #714cff;
}


.services-glow-2 {
    bottom: -250px;
    left: -200px;
    background: #2457ff;
}


/* =========================================================
   TOP LABEL
========================================================= */

.services-top {
    position: relative;

    max-width: 1400px;
    margin: 0 auto 100px;

    display: flex;
    align-items: center;

    gap: 15px;

    font-family: "Manrope", sans-serif;

    font-size: 9px;
    letter-spacing: 0.25em;

    color: rgba(255,255,255,0.38);
}


.services-line {
    width: 75px;
    height: 1px;

    background: rgba(255,255,255,0.2);
}


/* =========================================================
   INTRO
========================================================= */

.services-intro {
    position: relative;

    max-width: 1400px;
    margin: 0 auto;

    z-index: 2;
}


.services-eyebrow {
    margin: 0 0 28px;

    font-family: "Manrope", sans-serif;

    font-size: 10px;
    letter-spacing: 0.28em;

    color: #9d80ff;
}


/* =========================================================
   MAIN HEADING
========================================================= */

.services-heading {
    max-width: 1100px;

    margin: 0;

    font-family: "Space Grotesk", sans-serif;

    font-size: clamp(
        30px,
        5vw,
        75px
    );

    line-height: 0.92;

    letter-spacing: -0.065em;

    font-weight: 500;
}


.services-changing-text {
    display: inline-block;

    min-width: 5ch;

    color: #a88cff;

    text-shadow:
        0 0 40px rgba(130,90,255,0.25);

    transition:
        opacity 0.35s ease,
        transform 0.35s ease,
        filter 0.35s ease;
}


.service-text-hide {
    opacity: 0;

    transform:
        translateY(20px)
        skewY(3deg);

    filter: blur(8px);
}


.outline-text {
    color: transparent;

    -webkit-text-stroke:
        1px rgba(255,255,255,0.7);

    transition: 0.4s ease;
}


.services-heading:hover .outline-text {
    color: #ffffff;

    -webkit-text-stroke-color: #ffffff;

    text-shadow:
        0 0 35px rgba(255,255,255,0.15);
}


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

.services-description {
    max-width: 520px;

    margin: 45px 0 0;

    font-family: "Manrope", sans-serif;

    font-size: 15px;

    line-height: 1.9;

    color: rgba(255,255,255,0.45);
}


/* =========================================================
   SERVICES LIST
========================================================= */

.services-list {
    position: relative;

    max-width: 1400px;

    margin: 130px auto 0;

    border-top:
        1px solid rgba(255,255,255,0.12);

    z-index: 2;
}


.service-item {
    position: relative;

    display: grid;

    grid-template-columns:
        80px
        1fr
        60px;

    align-items: center;

    min-height: 125px;

    border-bottom:
        1px solid rgba(255,255,255,0.12);

    transition:
        padding 0.5s ease,
        background 0.5s ease;
}


.service-item::before {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 0%;
    height: 1px;

    background: #9c7cff;

    box-shadow:
        0 0 15px rgba(140,100,255,0.8);

    transition:
        width 0.6s ease;
}


.service-item:hover::before,
.service-item.active::before {
    width: 100%;
}


/* =========================================================
   SERVICE NUMBER
========================================================= */

.service-number {
    font-family: "Manrope", sans-serif;

    font-size: 9px;

    letter-spacing: 0.15em;

    color: rgba(255,255,255,0.28);

    transition:
        color 0.4s ease;
}


.service-item:hover .service-number,
.service-item.active .service-number {
    color: #9d7cff;
}


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

.service-content {
    padding: 28px 30px 28px 0;

    transition:
        transform 0.5s ease;
}


.service-item:hover .service-content {
    transform: translateX(15px);
}


.service-content h3 {
    margin: 0;

    font-family: "Space Grotesk", sans-serif;

    font-size: clamp(
        30px,
        3vw,
        48px
    );

    line-height: 1;

    font-weight: 500;

    letter-spacing: -0.04em;

    transition:
        color 0.4s ease;
}


.service-item:hover .service-content h3,
.service-item.active .service-content h3 {
    color: #ffffff;
}


.service-content p {
    max-width: 500px;

    margin: 14px 0 0;

    font-family: "Manrope", sans-serif;

    font-size: 15px;

    line-height: 1.7;

    color: rgba(255,255,255,0.35);

    opacity: 0;

    transform: translateY(8px);

    transition:
        opacity 0.4s ease,
        transform 0.4s ease;
}


.service-item:hover .service-content p,
.service-item.active .service-content p {
    opacity: 1;

    transform: translateY(0);
}


/* =========================================================
   ARROW
========================================================= */

.service-arrow {
    display: flex;

    justify-content: flex-end;
    align-items: center;

    font-size: 26px;

    color: rgba(255,255,255,0.25);

    transition:
        color 0.4s ease,
        transform 0.4s ease;
}


.service-item:hover .service-arrow,
.service-item.active .service-arrow {
    color: #a98cff;

    transform:
        translate(5px,-5px);
}


/* =========================================================
   BOTTOM STATEMENT
========================================================= */

.services-bottom {
    position: relative;

    max-width: 1400px;

    margin: 70px auto 0;

    display: flex;

    justify-content: space-between;

    font-family: "Manrope", sans-serif;

    font-size: 12px;

    letter-spacing: 0.25em;

    color: rgba(255,255,255,0.25);
}


.services-bottom span:nth-child(4) {
    color: rgba(255,255,255,0.5);
}


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

@media (max-width: 600px) {

    .services-section {
        min-height: auto;

        padding:
            90px 6vw 70px;
    }


    /* Top label */

    .services-top {
        margin-bottom: 60px;

        font-size: 7px;

        gap: 10px;
    }


    .services-line {
        width: 40px;
    }


    /* Intro */

    .services-eyebrow {
        margin-bottom: 20px;

        font-size: 8px;

        letter-spacing: 0.2em;
    }


    .services-heading {
        font-size: 15px;

        line-height: 1.35;

        letter-spacing:
            -0.025em;

        max-width: 100%;
    }


    .services-changing-text {
        min-width: auto;

        font-size: 15px;
    }


    .outline-text {
        -webkit-text-stroke:
            0.5px rgba(255,255,255,0.7);
    }


    /* Description */

    .services-description {
        margin-top: 30px;

        font-size: 15px;

        line-height: 1.75;

        max-width: 100%;
    }


    /* Services */

    .services-list {
        margin-top: 70px;
    }


    .service-item {
        grid-template-columns:
            35px
            1fr
            35px;

        min-height: 120px;
    }


    .service-number {
        align-self: start;

        padding-top: 30px;

        font-size: 7px;
    }


    .service-content {
        padding:
            28px 8px 28px 0;
    }


    .service-content h3 {
        font-size: 15px;

        line-height: 1.3;

        letter-spacing:
            -0.02em;
    }


    .service-content p {
        max-width: 100%;

        margin-top: 12px;

        font-size: 15px;

        line-height: 1.65;

        opacity: 1;

        transform: none;
    }


    .service-arrow {
        font-size: 20px;

        align-self: start;

        padding-top: 27px;
    }


    /* Bottom */

    .services-bottom {
        margin-top: 50px;

        font-size: 10px;

        letter-spacing: 0.15em;
    }

}

/* =========================================================
   CONTACT SECTION
========================================================= */

.contact-section {
    position: relative;

    min-height: 100vh;

    padding: 150px 7vw 80px;

    background: #030303;

    color: #ffffff;

    overflow: hidden;
}


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

.contact-grid {
    position: absolute;

    inset: 0;

    background-image:
        linear-gradient(
            rgba(255,255,255,0.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,0.025) 1px,
            transparent 1px
        );

    background-size: 70px 70px;

    mask-image:
        linear-gradient(
            to bottom,
            black,
            transparent 85%
        );

    pointer-events: none;
}


/* =========================================================
   GLOW
========================================================= */

.contact-glow {
    position: absolute;

    width: 500px;
    height: 500px;

    border-radius: 50%;

    filter: blur(150px);

    opacity: 0.12;

    pointer-events: none;
}


.contact-glow-1 {
    top: 5%;

    right: -250px;

    background: #714cff;
}


.contact-glow-2 {
    bottom: -300px;

    left: -250px;

    background: #2457ff;
}


/* =========================================================
   TOP LABEL
========================================================= */

.contact-top {
    position: relative;

    max-width: 1400px;

    margin: 0 auto 100px;

    display: flex;

    align-items: center;

    gap: 15px;

    font-family: "Manrope", sans-serif;

    font-size: 9px;

    letter-spacing: 0.25em;

    color: rgba(255,255,255,0.35);
}


.contact-line {
    width: 75px;

    height: 1px;

    background:
        rgba(255,255,255,0.2);
}


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

.contact-container {
    position: relative;

    max-width: 1400px;

    margin: 0 auto;

    z-index: 2;
}


/* =========================================================
   HEADING
========================================================= */

.contact-heading-area {
    max-width: 1000px;
}


.contact-eyebrow {
    margin: 0 0 25px;

    font-family: "Manrope", sans-serif;

    font-size: 10px;

    letter-spacing: 0.28em;

    color: #9d80ff;
}


.contact-heading {
    margin: 0;

    font-family: "Space Grotesk", sans-serif;

    font-size: clamp(
        50px,
        10vw,
        100px
    );

    line-height: 0.85;

    letter-spacing: -0.07em;

    font-weight: 500;
}


.contact-heading span {
    display: block;

    color: transparent;

    -webkit-text-stroke:
        1px rgba(255,255,255,0.65);

    transition:
        color 0.5s ease,
        text-shadow 0.5s ease;
}


.contact-heading:hover span {
    color: #ffffff;

    -webkit-text-stroke-color:
        #ffffff;

    text-shadow:
        0 0 40px rgba(150,110,255,0.3);
}


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

.contact-description {
    max-width: 570px;

    margin: 45px 0 0;

    font-family: "Manrope", sans-serif;

    font-size: 13px;

    line-height: 1.9;

    color:
        rgba(255,255,255,0.45);
}


/* =========================================================
   CONTACT DETAILS
========================================================= */

.contact-details {
    margin-top: 120px;

    border-top:
        1px solid rgba(255,255,255,0.12);
}


.contact-item {
    position: relative;

    min-height: 125px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    border-bottom:
        1px solid rgba(255,255,255,0.12);

    text-decoration: none;

    color: #ffffff;

    transition:
        padding 0.5s ease,
        background 0.5s ease;
}


.contact-item::before {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 0;

    height: 1px;

    background: #9d7cff;

    box-shadow:
        0 0 18px rgba(140,100,255,0.8);

    transition:
        width 0.6s ease;
}


.contact-item:hover::before {
    width: 100%;
}


.contact-item:hover {
    padding-left: 18px;

    background:
        linear-gradient(
            90deg,
            rgba(120,80,255,0.06),
            transparent
        );
}


/* =========================================================
   LEFT
========================================================= */

.contact-item-left {
    display: flex;

    align-items: center;

    gap: 45px;
}


.contact-number {
    font-family: "Manrope", sans-serif;

    font-size: 9px;

    letter-spacing: 0.15em;

    color:
        rgba(255,255,255,0.28);

    transition:
        color 0.4s ease;
}


.contact-item:hover .contact-number {
    color: #9d7cff;
}


/* =========================================================
   LABEL
========================================================= */

.contact-label {
    display: block;

    margin-bottom: 10px;

    font-family: "Manrope", sans-serif;

    font-size: 8px;

    letter-spacing: 0.25em;

    color:
        rgba(255,255,255,0.35);
}


/* =========================================================
   VALUE
========================================================= */

.contact-value {
    display: block;

    font-family: "Space Grotesk", sans-serif;

    font-size: clamp(
        24px,
        3vw,
        42px
    );

    letter-spacing: -0.04em;

    font-weight: 400;

    transition:
        color 0.4s ease;
}


.contact-item:hover .contact-value {
    color: #b39aff;
}


/* =========================================================
   ARROW
========================================================= */

.contact-arrow {
    font-size: 30px;

    color:
        rgba(255,255,255,0.25);

    transition:
        transform 0.4s ease,
        color 0.4s ease;
}


.contact-item:hover .contact-arrow {
    color: #a98cff;

    transform:
        translate(5px,-5px);
}


/* =========================================================
   BOTTOM
========================================================= */

.contact-bottom {
    margin-top: 65px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    font-family: "Manrope", sans-serif;

    font-size: 8px;

    letter-spacing: 0.2em;

    color:
        rgba(255,255,255,0.28);
}


.contact-status {
    display: flex;

    align-items: center;

    gap: 12px;
}


.status-dot {
    width: 6px;

    height: 6px;

    border-radius: 50%;

    background: #9d7cff;

    box-shadow:
        0 0 12px rgba(150,110,255,0.9);

    animation:
        statusPulse 1.8s ease-in-out infinite;
}


@keyframes statusPulse {

    0%,
    100% {
        opacity: 0.4;

        transform: scale(0.8);
    }

    50% {
        opacity: 1;

        transform: scale(1.2);
    }

}


.contact-year {
    color:
        rgba(255,255,255,0.5);
}


/* =========================================================
   FLOATING WHATSAPP
========================================================= */

.floating-whatsapp {
    position: fixed;

    right: 28px;

    bottom: 28px;

    width: 62px;

    height: 62px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background:#a64ebe;

    text-decoration: none;

    z-index: 9999;

    box-shadow:
        0 10px 35px rgba(0,0,0,0.45),
        0 0 25px rgba(37,211,102,0.35);

    animation:
        whatsappFloat 3s ease-in-out infinite;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


.floating-whatsapp svg {
    width: 31px;

    height: 31px;

    fill: #ffffff;

    position: relative;

    z-index: 2;
}


.floating-whatsapp:hover {
    transform:
        translateY(-6px)
        scale(1.08);

    box-shadow:
        0 15px 40px rgba(0,0,0,0.5),
        0 0 40px rgba(37,211,102,0.55);
}


/* =========================================================
   WHATSAPP RIPPLE
========================================================= */

.whatsapp-ripple {
    position: absolute;

    inset: 0;

    border-radius: 50%;

    border:
        1px solid rgba(37,211,102,0.8);

    animation:
        whatsappRipple 2.2s ease-out infinite;
}


@keyframes whatsappRipple {

    0% {
        transform: scale(1);

        opacity: 0.8;
    }

    100% {
        transform: scale(1.7);

        opacity: 0;
    }

}


@keyframes whatsappFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }

}


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

@media (max-width: 600px) {

    .contact-section {
        min-height: auto;

        padding:
            90px 6vw 90px;
    }


    /* Top */

    .contact-top {
        margin-bottom: 60px;

        gap: 10px;

        font-size: 7px;
    }


    .contact-line {
        width: 40px;
    }


    /* Heading */

    .contact-eyebrow {
        font-size: 13px;

        margin-bottom: 20px;

        letter-spacing: 0.18em;
    }


    .contact-heading {
        font-size: 40px;

        line-height: 0.9;

        letter-spacing: -0.06em;
    }


    .contact-heading span {
        -webkit-text-stroke:
            0.7px rgba(255,255,255,0.65);
    }


    /* Description */

    .contact-description {
        margin-top: 30px;

        font-size: 18px;

        line-height: 1.75;
    }


    /* Contact */

    .contact-details {
        margin-top: 75px;
    }


    .contact-item {
        min-height: 110px;
    }


    .contact-item-left {
        gap: 20px;
    }


    .contact-number {
        font-size: 12px;
    }


    .contact-label {
        font-size: 12px;

        margin-bottom: 8px;
    }


    .contact-value {
        font-size: 15px;

        line-height: 1.4;

        word-break: break-word;
    }


    .contact-arrow {
        font-size: 22px;
    }


    /* Bottom */

    .contact-bottom {
        margin-top: 50px;

        align-items: flex-start;

        gap: 20px;

        font-size: 6px;

        line-height: 1.6;
    }


    .contact-status {
        max-width: 250px;

        gap: 8px;
    }


    .status-dot {
        flex-shrink: 0;

        width: 5px;

        height: 5px;
    }


    /* WhatsApp */

    .floating-whatsapp {
        right: 18px;

        bottom: 18px;

        width: 56px;

        height: 56px;
    }


    .floating-whatsapp svg {
        width: 28px;

        height: 28px;
    }

}