/* =========================================================
   CYBER POINT DEVELOPMENT
   MAIN STYLE SHEET
========================================================= */


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

body {
    font-family:
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Oxygen,
        Ubuntu,
        Cantarell,
        "Open Sans",
        "Helvetica Neue",
        sans-serif;

    min-height: 100vh;
    overflow-x: hidden;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(112, 72, 165, 0.35) 0%,
            rgba(79, 42, 125, 0.22) 22%,
            rgba(40, 16, 70, 0.10) 40%,
            transparent 62%
        ),
        #15062c;

    opacity: 0;

    animation:
        pageFadeIn 0.8s ease forwards;
}


/* =========================================================
   PAGE TRANSITIONS
========================================================= */

body.fade-out {
    animation:
        pageFadeOut 0.5s ease forwards;
}


@keyframes pageFadeIn {

    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}


@keyframes pageFadeOut {

    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}


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

body::before {

    content: "";

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    background-image:

        linear-gradient(
            rgba(0, 170, 255, 0.08) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(0, 170, 255, 0.08) 1px,
            transparent 1px
        );

    background-size: 50px 50px;

    animation:
        moveGrid 10s linear infinite;

    pointer-events: none;

    z-index: -1;

    will-change: transform;

    transform:
        translate3d(0, 0, 0);
}


@keyframes moveGrid {

    from {
        transform:
            translate3d(0, 0, 0);
    }

    to {
        transform:
            translate3d(-50px, -50px, 0);
    }
}


/* =========================================================
   GRADIENT / BLUR
========================================================= */

.image-gradient {

    position: absolute;

    top: 0;
    right: 0;

    opacity: 0;

    z-index: -1;
}


.layer-blur {

    width: 30rem;
    max-width: 60vw;

    height: 8px;

    position: absolute;

    top: 20%;
    right: 0;

    background-color:
        rgba(255, 255, 255, 0.15);

    filter: blur(80px);

    rotate: -30deg;

    z-index: -1;

    will-change: filter;
}


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

.container {

    width: 100%;

    margin: 0 auto;

    padding: 0 2rem;

    position: relative;

    overflow: visible;
}


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

header {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 1rem 2rem;

    padding: 20px 5%;

    min-height: 120px;

    position: relative;

    z-index: 10;
}


.brand {

    display: flex;

    align-items: center;

    gap: 1rem;

    margin-right: auto;

    min-width: 0;
}


.logo-text {

    display: flex;

    flex-direction: column;

    justify-content: center;

    max-width: 100%;

    min-width: 0;

    transform:
        translateY(0.8rem);
}


header h1 {

    margin: 0;

    margin-left: 0.5rem;

    font-size:
        clamp(1.4rem, 3vw, 3rem);

    font-weight: 300;

    color: #e7e7e7;

    white-space: normal;
}


header .slogan {

    margin-top: 0.2rem;

    margin-left: 1.5rem;

    font-size:
        clamp(0.85rem, 1.6vw, 1.8rem);

    font-weight: 300;

    color: #8a8a8a;

    letter-spacing: 0.08rem;

    white-space: normal;
}


/* =========================================================
   DESKTOP NAVBAR
========================================================= */

nav {
    display: flex;
    align-items: center;
}


.nav-links {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 1.5rem 3.5rem;

    list-style: none;

    margin: 0;
    padding: 0;

    letter-spacing: 0.2rem;
}


/* =========================================================
   NAVIGATION ITEMS
========================================================= */

.nav-links li {

    position: relative;

    list-style: none;

    display: inline-flex;

    align-items: center;

    padding:
        0.45rem 0.2rem;

    transition:
        transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}


/* =========================================================
   GLOWING DOT
========================================================= */

.nav-links li::before {

    content: "●";

    color: #aa50ff;

    margin-right: 10px;

    text-shadow:
        0 0 6px rgba(170, 80, 255, 0.5),
        0 0 12px rgba(170, 80, 255, 0.4);

    transition:
        color 0.35s ease,
        transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
        text-shadow 0.35s ease;
}


/* =========================================================
   NAVIGATION LINKS
========================================================= */

.nav-links li a {

    position: relative;

    text-decoration: none;

    color: #e8ddff;

    white-space: nowrap;

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

    letter-spacing: 0.15rem;

    padding:
        0.35rem 0;

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


/* =========================================================
   ANIMATED UNDERLINE
========================================================= */

.nav-links li a::after {

    content: "";

    position: absolute;

    left: 0;
    bottom: -5px;

    width: 100%;
    height: 2px;

    border-radius: 10px;

    background:
        linear-gradient(
            90deg,
            #b30fff,
            #ff8d0c
        );

    box-shadow:
        0 0 6px rgba(179, 15, 255, 0.7),
        0 0 12px rgba(255, 141, 12, 0.35);

    transform:
        scaleX(0);

    transform-origin:
        center;

    opacity: 0;

    transition:
        transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.3s ease;
}


/* =========================================================
   HOVER EFFECT
========================================================= */

.nav-links li:hover {

    transform:
        translateY(-2px);
}


.nav-links li:hover::before {

    color: #ff8d0c;

    transform:
        scale(1.35);

    text-shadow:
        0 0 6px rgba(255, 141, 12, 0.9),
        0 0 14px rgba(179, 15, 255, 0.8),
        0 0 24px rgba(179, 15, 255, 0.5);
}


.nav-links li:hover a {

    color: #ffffff;

    text-shadow:
        0 0 8px rgba(179, 15, 255, 0.45),
        0 0 18px rgba(179, 15, 255, 0.25);
}


.nav-links li:hover a::after {

    transform:
        scaleX(1);

    opacity:
        1;
}


/* =========================================================
   ACTIVE / CLICK FEEL
========================================================= */

.nav-links li:active {

    transform:
        translateY(0)
        scale(0.97);
}


/* =========================================================
   LANGUAGE SWITCH
========================================================= */

.language-item {

    margin-left: 1rem;
}


.language-switch {

    display: inline-flex !important;

    align-items: center;

    justify-content: center;

    gap: 0.55rem;

    margin-left: 0;

    text-decoration: none;

    color: #e8ddff;

    white-space: nowrap;
}


/* =========================================================
   CUSTOM GEORGIAN FLAG
========================================================= */

.geo-flag {

    position: relative;

    width: 34px;
    height: 23px;

    flex-shrink: 0;

    overflow: hidden;

    background:
        #f4f4f4;

    border:
        1px solid rgba(179, 15, 255, 0.45);

    border-radius:
        3px;

    box-shadow:

        0 0 5px
        rgba(179, 15, 255, 0.35),

        0 0 10px
        rgba(255, 141, 12, 0.15);

    transition:

        border-color 0.35s ease,

        box-shadow 0.35s ease,

        transform 0.35s
        cubic-bezier(0.16, 1, 0.3, 1);
}


/* =========================================================
   GEORGIAN CENTRAL CROSS
   SLIMMER + MORE BALANCED
========================================================= */

.geo-flag::before {

    content: "";

    position: absolute;

    left: 50%;
    top: 50%;

    width: 100%;
    height: 100%;

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

    background:

        linear-gradient(
            to right,
            transparent 0%,
            transparent 43%,
            #b30fff 43%,
            #b30fff 57%,
            transparent 57%,
            transparent 100%
        ),

        linear-gradient(
            to bottom,
            transparent 0%,
            transparent 43%,
            #b30fff 43%,
            #b30fff 57%,
            transparent 57%,
            transparent 100%
        );

    opacity:
        0.95;

    filter:
        drop-shadow(
            0 0 2px
            rgba(179, 15, 255, 0.65)
        );
}


/* =========================================================
   SMALL GEORGIAN CROSSES
========================================================= */

.geo-cross {

    position: absolute;

    width: 6px;
    height: 6px;

    z-index: 2;
}


/* Vertical arm */

.geo-cross::before {

    content: "";

    position: absolute;

    left: 50%;
    top: 0;

    width: 1px;
    height: 100%;

    transform:
        translateX(-50%);

    background:
        #b30fff;

    box-shadow:
        0 0 2px
        rgba(179, 15, 255, 0.6);
}


/* Horizontal arm */

.geo-cross::after {

    content: "";

    position: absolute;

    left: 0;
    top: 50%;

    width: 100%;
    height: 1px;

    transform:
        translateY(-50%);

    background:
        #b30fff;

    box-shadow:
        0 0 2px
        rgba(179, 15, 255, 0.6);
}


/* =========================================================
   CROSS POSITIONS
========================================================= */

.geo-cross-top-left {

    top: 2px;
    left: 3px;
}


.geo-cross-top-right {

    top: 2px;
    right: 3px;
}


.geo-cross-bottom-left {

    bottom: 2px;
    left: 3px;
}


.geo-cross-bottom-right {

    bottom: 2px;
    right: 3px;
}


/* =========================================================
   LANGUAGE TEXT
========================================================= */

.language-text {

    display: inline-block;

    line-height: 1;

    transition:
        color 0.35s ease,

        text-shadow 0.35s ease;
}


/* =========================================================
   LANGUAGE HOVER
========================================================= */

.language-switch:hover .geo-flag {

    border-color:
        #ff8d0c;

    box-shadow:

        0 0 7px
        rgba(255, 141, 12, 0.65),

        0 0 15px
        rgba(179, 15, 255, 0.5);

    transform:
        scale(1.08);
}


.language-switch:hover .language-text {

    color:
        #ffffff;

    text-shadow:

        0 0 8px
        rgba(179, 15, 255, 0.55),

        0 0 18px
        rgba(179, 15, 255, 0.3);
}


/* =========================================================
   HAMBURGER
========================================================= */

.nav-toggle {

    display: none;
}


.hamburger {

    display: none;

    flex-direction: column;

    justify-content: center;

    gap: 5px;

    width: 32px;
    height: 26px;

    cursor: pointer;

    z-index: 1001;

    flex-shrink: 0;
}


.hamburger span {

    display: block;

    height: 3px;

    width: 100%;

    background: #e8ddff;

    border-radius: 2px;

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


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

main {

    display: flex;

    flex-direction: column;

    justify-content: flex-start;

    color: #e7e7e7;
}


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

.hero-wrapper {

    position: relative;

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    width: 100%;

    padding:
        4rem 5% 0;

    overflow: visible;
}


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

.content {

    flex:
        1 1 45%;

    max-width:
        40rem;

    min-width:
        280px;

    z-index:
        2;

    transform:
        translateY(60px);
}


.content h1 {

    max-width:
        30rem;

    font-size:
        clamp(1.8rem, 4vw, 3rem);

    margin-top:
        1.5rem;

    transform:
        none;
}


.description {

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

    letter-spacing:
        0.05em;

    max-width:
        35rem;

    color:
        gray;

    text-align:
        left;

    margin-top:
        1.5rem;

    transform:
        none;
}


/* =========================================================
   TAG
========================================================= */

.tag-box {

    position: relative;

    width:
        min(30rem, 100%);

    height:
        3rem;

    border-radius:
        70px;

    background:
        linear-gradient(
            to right,
            #b30fff,
            #7f42a7,
            #6600c5,
            #5300a0,
            #ff8d0c,
            #b30fff
        );

    background-size:
        200%;

    animation:
        gradientAnimation 10s linear infinite;

    box-shadow:
        0 0 15px
        rgba(255, 255, 255, 0.3);

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

    font-weight:
        400;

    color: #e7e7e7;

    transform:
        none;
}


@keyframes gradientAnimation {

    to {

        background-position:
            200%;
    }
}


.tag-box .tag {

    position: absolute;

    inset: 3px;

    background-color:
        black;

    border-radius:
        50px;

    display: flex;

    align-items: center;

    justify-content: center;

    transition:
        color 0.4s ease;

    cursor: pointer;

    padding:
        0 1rem;

    text-align:
        center;

    text-decoration:
        none;

    color:
        #e7e7e7;
}


.tag-box .tag:hover {

    color:
        #b30fff;
}


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

.buttons {

    display: flex;

    justify-content: flex-start;

    margin-top:
        3rem;

    gap:
        1rem;

    width:
        fit-content;

    max-width:
        100%;
}


.btn-get-started {

    text-decoration:
        none;

    border:
        2px solid #6600c5;

    color:
        #e7e7e7;

    padding:
        0.7rem 1.2rem;

    border-radius:
        70px;

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

    font-weight:
        600;

    letter-spacing:
        0.2rem;

    background-color:
        rgba(211, 211, 211, 0.034);

    white-space:
        nowrap;

    transform:
        none;

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


.btn-get-started:hover {

    background-color:
        rgba(211, 211, 211, 0.137);

    color:
        #e7e7e7;
}


/* =========================================================
   CYBER POINT AI
========================================================= */

.robot-wrapper {

    position: absolute;

    left: 76%;
    top: 64%;

    width:
        min(32vw, 440px);

    height:
        min(32vw, 440px);

    min-width:
        320px;

    min-height:
        320px;

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

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    align-items:
        center;

    z-index:
        5;

    pointer-events:
        none;
}


.ai-assistant {

    pointer-events:
        auto;
}


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

.ai-assistant {

    --mouse-rotate-x: 0deg;
    --mouse-rotate-y: 0deg;

    position:
        relative;

    width:
        min(34vw, 420px);

    aspect-ratio:
        1;

    border:
        none;

    background:
        transparent;

    cursor:
        pointer;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        0;

    perspective:
        1200px;

    transform-style:
        preserve-3d;

    transform:
        translate3d(0, 0, 0)
        rotateX(var(--mouse-rotate-x))
        rotateY(var(--mouse-rotate-y));

    transition:
        transform 0.3s
        cubic-bezier(0.22, 1, 0.36, 1),

        filter 0.4s ease;

    animation:
        aiFloat 5s
        cubic-bezier(0.45, 0, 0.55, 1)
        infinite;

    will-change:
        transform,
        filter;
}


@keyframes aiFloat {

    0%,
    100% {

        transform:
            translate3d(0, 0, 0)
            rotateX(var(--mouse-rotate-x))
            rotateY(var(--mouse-rotate-y));
    }

    50% {

        transform:
            translate3d(0, -14px, 0)
            rotateX(var(--mouse-rotate-x))
            rotateY(var(--mouse-rotate-y));
    }
}


/* =========================================================
   AI LOGO
========================================================= */

.ai-logo {

    position:
        relative;

    width:
        62%;

    height:
        62%;

    object-fit:
        contain;

    z-index:
        5;

    filter:

        drop-shadow(
            0 0 8px
            rgba(255, 141, 12, 0.75)
        )

        drop-shadow(
            0 0 18px
            rgba(179, 15, 255, 0.55)
        )

        drop-shadow(
            0 0 40px
            rgba(102, 0, 197, 0.4)
        );

    transition:
        transform 0.45s
        cubic-bezier(0.16, 1, 0.3, 1),

        filter 0.45s ease;

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

    will-change:
        transform,
        filter;
}


@keyframes logoPulse {

    0%,
    100% {

        transform:
            scale(1);
    }

    50% {

        transform:
            scale(1.035);
    }
}


/* =========================================================
   AI LOGO GLOW
========================================================= */

.ai-logo-glow {

    position:
        absolute;

    width:
        55%;

    height:
        55%;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(179, 15, 255, 0.32) 0%,
            rgba(102, 0, 197, 0.16) 35%,
            rgba(255, 141, 12, 0.08) 55%,
            transparent 72%
        );

    filter:
        blur(15px);

    z-index:
        1;

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

    will-change:
        transform,
        opacity;
}


@keyframes glowPulse {

    0%,
    100% {

        transform:
            scale(0.9);

        opacity:
            0.6;
    }

    50% {

        transform:
            scale(1.3);

        opacity:
            1;
    }
}


/* =========================================================
   AI RINGS
========================================================= */

.ai-ring {

    position:
        absolute;

    left:
        50%;

    top:
        50%;

    border-radius:
        50%;

    transform:
        translate3d(-50%, -50%, 0);

    pointer-events:
        none;

    will-change:
        transform;
}


.ring-one {

    width:
        70%;

    height:
        70%;

    border:
        1px solid
        rgba(179, 15, 255, 0.65);

    box-shadow:

        0 0 15px
        rgba(179, 15, 255, 0.35),

        inset 0 0 15px
        rgba(102, 0, 197, 0.15);

    animation:
        ringRotateOne 12s linear infinite;
}


.ring-two {

    width:
        86%;

    height:
        86%;

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

    border-left-color:
        transparent;

    border-bottom-color:
        transparent;

    box-shadow:
        0 0 18px
        rgba(255, 141, 12, 0.18);

    animation:
        ringRotateTwo 8s linear infinite;
}


.ring-three {

    width:
        105%;

    height:
        105%;

    border:
        1px solid
        rgba(102, 0, 197, 0.25);

    border-right-color:
        transparent;

    animation:
        ringRotateThree 18s linear infinite;
}


@keyframes ringRotateOne {

    from {

        transform:
            translate3d(-50%, -50%, 0)
            rotate(0deg);
    }

    to {

        transform:
            translate3d(-50%, -50%, 0)
            rotate(360deg);
    }
}


@keyframes ringRotateTwo {

    from {

        transform:
            translate3d(-50%, -50%, 0)
            rotate(360deg);
    }

    to {

        transform:
            translate3d(-50%, -50%, 0)
            rotate(0deg);
    }
}


@keyframes ringRotateThree {

    from {

        transform:
            translate3d(-50%, -50%, 0)
            rotate(0deg);
    }

    to {

        transform:
            translate3d(-50%, -50%, 0)
            rotate(-360deg);
    }
}


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

.ai-particle {

    position:
        absolute;

    width:
        6px;

    height:
        6px;

    border-radius:
        50%;

    background:
        #ff8d0c;

    box-shadow:

        0 0 8px
        #ff8d0c,

        0 0 16px
        rgba(179, 15, 255, 0.7);

    z-index:
        4;

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

    will-change:
        transform,
        opacity;
}


.particle-one {

    top:
        18%;

    right:
        20%;
}


.particle-two {

    bottom:
        22%;

    left:
        14%;

    width:
        5px;

    height:
        5px;

    background:
        #b30fff;

    animation-delay:
        -1s;
}


.particle-three {

    top:
        28%;

    left:
        13%;

    width:
        4px;

    height:
        4px;

    background:
        #e8ddff;

    animation-delay:
        -2s;
}


.particle-four {

    right:
        12%;

    bottom:
        30%;

    width:
        4px;

    height:
        4px;

    background:
        #b30fff;

    animation-delay:
        -0.5s;
}


@keyframes particleFloat {

    0%,
    100% {

        transform:
            translate3d(0, 0, 0)
            scale(1);

        opacity:
            0.5;
    }

    50% {

        transform:
            translate3d(0, -15px, 0)
            scale(1.5);

        opacity:
            1;
    }
}


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

.ai-label {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        0.55rem;

    margin-top:
        2rem;

    color:
        #e8ddff;

    font-size:
        clamp(0.9rem, 1.2vw, 1.15rem);

    font-weight:
        600;

    letter-spacing:
        0.25rem;

    text-shadow:
        0 0 12px
        rgba(179, 15, 255, 0.5);

    z-index:
        5;
}


.ai-status-dot {

    width:
        8px;

    height:
        8px;

    border-radius:
        50%;

    background:
        #ff8d0c;

    box-shadow:

        0 0 8px
        #ff8d0c,

        0 0 15px
        rgba(255, 141, 12, 0.7);

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


@keyframes statusBlink {

    0%,
    100% {

        opacity:
            0.45;

        transform:
            scale(0.85);
    }

    50% {

        opacity:
            1;

        transform:
            scale(1.15);
    }
}


/* =========================================================
   AI HINT
========================================================= */

.ai-hint {

    margin-top:
        0.6rem;

    color:
        rgba(232, 221, 255, 0.45);

    font-size:
        clamp(0.65rem, 0.8vw, 0.8rem);

    letter-spacing:
        0.22rem;

    transition:
        color 0.3s ease,
        letter-spacing 0.3s ease;
}


/* =========================================================
   AI HOVER
========================================================= */

.ai-assistant:hover {

    filter:
        brightness(1.15)
        saturate(1.15);
}


.ai-assistant:hover .ai-logo {

    transform:
        scale(1.08);

    filter:

        drop-shadow(
            0 0 12px
            rgba(255, 141, 12, 1)
        )

        drop-shadow(
            0 0 30px
            rgba(179, 15, 255, 0.9)
        )

        drop-shadow(
            0 0 65px
            rgba(102, 0, 197, 0.65)
        );
}


.robot-wrapper:hover .ai-hint {

    color:
        rgba(232, 221, 255, 0.9);

    letter-spacing:
        0.3rem;
}


.robot-wrapper:hover .ring-one {

    border-color:
        rgba(179, 15, 255, 1);

    box-shadow:

        0 0 25px
        rgba(179, 15, 255, 0.65),

        inset 0 0 20px
        rgba(102, 0, 197, 0.3);
}


.robot-wrapper:hover .ring-two {

    border-color:
        rgba(255, 141, 12, 0.8);

    border-left-color:
        transparent;

    border-bottom-color:
        transparent;
}


/* =========================================================
   AI TRANSITION
========================================================= */

.ai-transition {

    position:
        fixed;

    inset:
        0;

    width:
        100vw;

    height:
        100vh;

    pointer-events:
        none;

    visibility:
        hidden;

    opacity:
        0;

    z-index:
        9999;

    overflow:
        hidden;

    --start-x:
        50vw;

    --start-y:
        50vh;

    --move-x:
        0px;

    --move-y:
        0px;

    --start-size:
        400px;
}


/* =========================================================
   PITCH BLACK BACKDROP
========================================================= */

.ai-transition-backdrop {

    position:
        absolute;

    inset:
        0;

    background:
        #000000;

    opacity:
        0;

    z-index:
        10000;

    backdrop-filter:
        blur(0px);

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

    transition:
        opacity 1.2s
        cubic-bezier(0.16, 1, 0.3, 1),

        backdrop-filter 1.2s
        cubic-bezier(0.16, 1, 0.3, 1);
}


/* =========================================================
   PITCH BLACK CENTRAL BLOOM
========================================================= */

.ai-transition-bloom {

    position:
        absolute;

    left:
        50%;

    top:
        50%;

    width:
        20vw;

    height:
        20vw;

    min-width:
        180px;

    min-height:
        180px;

    max-width:
        600px;

    max-height:
        600px;

    border-radius:
        50%;

    transform:
        translate3d(-50%, -50%, 0)
        scale(0.15);

    background:
        radial-gradient(
            circle,
            rgba(0, 0, 0, 0.98) 0%,
            rgba(0, 0, 0, 0.96) 45%,
            rgba(0, 0, 0, 0.90) 65%,
            rgba(0, 0, 0, 0) 78%
        );

    filter:
        blur(20px);

    opacity:
        0;

    z-index:
        10005;

    transition:
        transform 1.2s
        cubic-bezier(0.16, 1, 0.3, 1),

        opacity 1.2s
        cubic-bezier(0.16, 1, 0.3, 1),

        filter 1.2s ease;
}


/* =========================================================
   TRANSITION ENTITY
   ALWAYS ABOVE BLACK
========================================================= */

.ai-transition-entity {

    position:
        absolute;

    left:
        var(--start-x);

    top:
        var(--start-y);

    width:
        var(--start-size);

    height:
        var(--start-size);

    transform:
        translate3d(
            -50%,
            -50%,
            0
        );

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    will-change:
        transform,
        width,
        height;

    z-index:
        10020 !important;

    isolation:
        isolate;
}


/* =========================================================
   TRANSITION LOGO
   NEVER DARKEN
========================================================= */

.transition-logo {

    position:
        relative;

    width:
        62%;

    height:
        62%;

    object-fit:
        contain;

    z-index:
        10021 !important;

    opacity:
        1 !important;

    filter:

        drop-shadow(
            0 0 8px
            rgba(255, 141, 12, 0.8)
        )

        drop-shadow(
            0 0 20px
            rgba(179, 15, 255, 0.65)
        )

        drop-shadow(
            0 0 45px
            rgba(102, 0, 197, 0.45)
        );

    transform:
        scale(1);

    will-change:
        transform,
        filter;
}


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

.transition-glow {

    position:
        absolute;

    width:
        58%;

    height:
        58%;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,

            rgba(125, 65, 255, 0.28) 0%,

            rgba(75, 35, 180, 0.16) 35%,

            rgba(35, 20, 100, 0.08) 55%,

            transparent 74%
        );

    filter:
        blur(18px);

    opacity:
        0.7;

    z-index:
        2;

    will-change:
        transform,
        opacity,
        filter;
}


/* =========================================================
   TRANSITION RINGS
========================================================= */

.transition-ring {

    position:
        absolute;

    left:
        50%;

    top:
        50%;

    border-radius:
        50%;

    transform:
        translate3d(-50%, -50%, 0);

    will-change:
        transform,
        opacity;

    z-index:
        10019;
}


.transition-ring-1 {

    width:
        70%;

    height:
        70%;

    border:
        1px solid
        rgba(150, 80, 255, 0.6);

    box-shadow:
        0 0 18px
        rgba(120, 60, 230, 0.25);

    animation:
        transitionRing1 7s linear infinite;
}


.transition-ring-2 {

    width:
        86%;

    height:
        86%;

    border:
        1px solid
        rgba(100, 120, 255, 0.35);

    border-left-color:
        transparent;

    border-bottom-color:
        transparent;

    box-shadow:
        0 0 20px
        rgba(70, 90, 200, 0.15);

    animation:
        transitionRing2 5s linear infinite reverse;
}


.transition-ring-3 {

    width:
        105%;

    height:
        105%;

    border:
        1px solid
        rgba(80, 50, 180, 0.28);

    border-right-color:
        transparent;

    animation:
        transitionRing3 9s linear infinite;
}


@keyframes transitionRing1 {

    to {

        transform:
            translate3d(-50%, -50%, 0)
            rotate(360deg);
    }
}


@keyframes transitionRing2 {

    to {

        transform:
            translate3d(-50%, -50%, 0)
            rotate(360deg);
    }
}


@keyframes transitionRing3 {

    to {

        transform:
            translate3d(-50%, -50%, 0)
            rotate(-360deg);
    }
}


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

.transition-particle {

    position:
        absolute;

    width:
        5px;

    height:
        5px;

    border-radius:
        50%;

    background:
        #8d6cff;

    box-shadow:

        0 0 8px
        rgba(120, 80, 255, 0.8),

        0 0 18px
        rgba(80, 50, 200, 0.55);

    opacity:
        0.8;

    z-index:
        10018;

    transition:
        transform 1.4s
        cubic-bezier(0.16, 1, 0.3, 1),

        opacity 0.7s ease;
}


.transition-particle-1 {

    top:
        18%;

    right:
        20%;
}


.transition-particle-2 {

    bottom:
        20%;

    left:
        15%;

    width:
        4px;

    height:
        4px;

    background:
        #7c5cff;
}


.transition-particle-3 {

    top:
        30%;

    left:
        13%;

    width:
        4px;

    height:
        4px;

    background:
        #b7b0ff;
}


.transition-particle-4 {

    right:
        12%;

    bottom:
        30%;

    width:
        4px;

    height:
        4px;

    background:
        #7354e8;
}


/* =========================================================
   ACTIVE TRANSITION
========================================================= */

body.ai-transition-active {

    overflow:
        hidden !important;
}


body.ai-transition-active .ai-transition {

    visibility:
        visible;

    opacity:
        1;
}


body.ai-transition-active .ai-transition-backdrop {

    opacity:
        1;

    backdrop-filter:
        blur(5px);

    -webkit-backdrop-filter:
        blur(5px);
}


/* =========================================================
   TRANSITION RUNNING
========================================================= */

.ai-transition.is-running .ai-transition-entity {

    z-index:
        10020 !important;

    transform:
        translate3d(
            calc(-50% + var(--move-x)),
            calc(-50% + var(--move-y)),
            0
        )
        scale(1.35);

    transition:
        transform 1.35s
        cubic-bezier(0.16, 1, 0.3, 1);
}


/* =========================================================
   RUNNING LOGO
   REMAINS BRIGHT
========================================================= */

.ai-transition.is-running .transition-logo {

    z-index:
        10021 !important;

    opacity:
        1 !important;

    transform:
        scale(1.12);

    filter:

        drop-shadow(
            0 0 12px
            rgba(255, 141, 12, 0.95)
        )

        drop-shadow(
            0 0 30px
            rgba(179, 15, 255, 0.85)
        )

        drop-shadow(
            0 0 65px
            rgba(102, 0, 197, 0.6)
        );

    transition:
        transform 1.35s
        cubic-bezier(0.16, 1, 0.3, 1),

        filter 1.35s
        cubic-bezier(0.16, 1, 0.3, 1);
}


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

.ai-transition.is-running .transition-glow {

    transform:
        scale(1.7);

    opacity:
        1;

    filter:
        blur(26px);

    transition:
        transform 1.35s
        cubic-bezier(0.16, 1, 0.3, 1),

        opacity 1s ease,

        filter 1s ease;
}


/* =========================================================
   RUNNING RINGS
========================================================= */

.ai-transition.is-running .transition-ring-1 {

    transform:
        translate3d(-50%, -50%, 0)
        scale(0.78);

    opacity:
        0.95;

    transition:
        transform 1.35s
        cubic-bezier(0.16, 1, 0.3, 1);
}


.ai-transition.is-running .transition-ring-2 {

    transform:
        translate3d(-50%, -50%, 0)
        scale(0.84);

    opacity:
        0.8;

    transition:
        transform 1.35s
        cubic-bezier(0.16, 1, 0.3, 1);
}


.ai-transition.is-running .transition-ring-3 {

    transform:
        translate3d(-50%, -50%, 0)
        scale(0.9);

    opacity:
        0.6;

    transition:
        transform 1.35s
        cubic-bezier(0.16, 1, 0.3, 1);
}


/* =========================================================
   TRANSITION PARTICLE COLLAPSE
========================================================= */

.ai-transition.is-running .transition-particle-1 {

    transform:
        translate3d(-15px, 25px, 0);

    opacity:
        0;
}


.ai-transition.is-running .transition-particle-2 {

    transform:
        translate3d(25px, -20px, 0);

    opacity:
        0;
}


.ai-transition.is-running .transition-particle-3 {

    transform:
        translate3d(25px, 15px, 0);

    opacity:
        0;
}


.ai-transition.is-running .transition-particle-4 {

    transform:
        translate3d(-20px, -20px, 0);

    opacity:
        0;
}


/* =========================================================
   CENTRAL DARK BLOOM
========================================================= */

.ai-transition.is-running .ai-transition-bloom {

    transform:
        translate3d(-50%, -50%, 0)
        scale(1.8);

    opacity:
        0.9;

    filter:
        blur(28px);

    transition:

        transform 1.35s
        cubic-bezier(0.16, 1, 0.3, 1),

        opacity 1.35s
        cubic-bezier(0.16, 1, 0.3, 1),

        filter 1.2s ease;
}


/* =========================================================
   FINAL BLACK EXPANSION
   BELOW LOGO
========================================================= */

.ai-transition.is-running::after {

    content:
        "";

    position:
        absolute;

    left:
        50%;

    top:
        50%;

    width:
        18px;

    height:
        18px;

    border-radius:
        50%;

    background:
        #000000;

    filter:
        blur(2px);

    transform:
        translate3d(-50%, -50%, 0)
        scale(0.01);

    opacity:
        0;

    pointer-events:
        none;

    z-index:
        10010;

    animation:
        seamlessBloom 1.55s
        cubic-bezier(0.22, 0.61, 0.36, 1)
        forwards;

    will-change:
        transform,
        opacity,
        filter;
}


/* =========================================================
   FINAL BLACK AURA
   BELOW LOGO
========================================================= */

.ai-transition.is-running::before {

    content:
        "";

    position:
        absolute;

    left:
        50%;

    top:
        50%;

    width:
        100px;

    height:
        100px;

    border-radius:
        50%;

    background:
        #000000;

    filter:
        blur(35px);

    transform:
        translate3d(-50%, -50%, 0)
        scale(.01);

    opacity:
        0;

    pointer-events:
        none;

    z-index:
        10009;

    animation:
        seamlessAura 1.55s
        cubic-bezier(0.22, 0.61, 0.36, 1)
        forwards;

    will-change:
        transform,
        opacity,
        filter;
}


/* =========================================================
   BLACK BLOOM ANIMATION
========================================================= */

@keyframes seamlessBloom {

    0% {

        transform:
            translate3d(-50%, -50%, 0)
            scale(.01);

        opacity:
            0;

        filter:
            blur(2px);
    }

    65% {

        opacity:
            1;
    }

    100% {

        transform:
            translate3d(-50%, -50%, 0)
            scale(52);

        opacity:
            1;

        filter:
            blur(34px);
    }
}


/* =========================================================
   BLACK AURA ANIMATION
========================================================= */

@keyframes seamlessAura {

    0% {

        transform:
            translate3d(-50%, -50%, 0)
            scale(.01);

        opacity:
            0;

        filter:
            blur(35px);
    }

    65% {

        opacity:
            0.8;
    }

    100% {

        transform:
            translate3d(-50%, -50%, 0)
            scale(46);

        opacity:
            0.8;

        filter:
            blur(75px);
    }
}


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

@media (max-width: 1024px) {

    .hero-wrapper {

        gap:
            2rem;
    }


    .content {

        transform:
            translateY(20px);
    }


    .robot-wrapper {

        left:
            74%;

        top:
            45%;

        width:
            700px;

        height:
            850px;
    }


    .ai-assistant {

        width:
            min(38vw, 380px);
    }
}


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

@media (max-width: 768px) {

    html,
    body {

        overflow-y:
            auto;

        min-height:
            100%;
    }


    /* ---------------------------------------------
       HEADER
    --------------------------------------------- */

    header {

        padding:
            16px 5%;

        flex-wrap:
            nowrap;

        position:
            relative;

        z-index:
            1002;
    }


    /* ---------------------------------------------
       HAMBURGER
    --------------------------------------------- */

    .hamburger {

        display:
            flex;

        position:
            relative;

        z-index:
            1003;
    }


    /* ---------------------------------------------
       MOBILE NAVIGATION
    --------------------------------------------- */

    nav {

        position:
            fixed;

        top:
            0;

        right:
            -100%;

        width:
            min(280px, 80vw);

        height:
            100vh;

        display:
            block;

        padding:
            90px 30px 30px;

        margin:
            0;

        background:
            rgba(21, 6, 44, 0.94);

        backdrop-filter:
            blur(14px);

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

        box-shadow:
            -5px 0 20px rgba(0, 0, 0, 0.4);

        transition:
            right 0.35s
            cubic-bezier(0.16, 1, 0.3, 1);

        z-index:
            1000;

        align-items:
            initial;

        justify-content:
            initial;
    }


    /* OPEN MENU */

    .nav-toggle:checked ~ nav {

        right:
            0;
    }


    /* ---------------------------------------------
       MOBILE NAV LIST
    --------------------------------------------- */

    .nav-links {

        display:
            flex;

        flex-direction:
            column;

        align-items:
            flex-start;

        justify-content:
            flex-start;

        flex-wrap:
            nowrap;

        gap:
            1.25rem;

        width:
            100%;

        margin:
            0;

        padding:
            0;

        list-style:
            none;

        letter-spacing:
            0;
    }


    .nav-links li {

        display:
            flex;

        align-items:
            center;

        width:
            100%;

        margin:
            0;

        padding:
            0;
    }


    .nav-links li::before {

        flex-shrink:
            0;
    }


    .nav-links li a {

        display:
            block;

        width:
            100%;

        padding:
            8px 0;

        font-size:
            1.05rem;

        letter-spacing:
            0.12rem;
    }


    .language-item {

        margin-left:
            0;
    }


    .language-switch {

        margin-left:
            0;
    }


    /* ---------------------------------------------
       MOBILE HERO
    --------------------------------------------- */

    .hero-wrapper {

        flex-direction:
            column;

        align-items:
            center;

        text-align:
            center;

        min-height:
            0;

        padding-top:
            3rem;

        overflow:
            hidden;
    }


    .content {

        max-width:
            100%;

        transform:
            translateY(10px);

        z-index:
            2;
    }


    .content h1 {

        max-width:
            100%;

        margin:
            1.5rem auto 0;

        transform:
            none;
    }


    .description {

        text-align:
            center;

        margin:
            1.5rem auto 0;

        transform:
            none;
    }


    .buttons {

        justify-content:
            center;

        margin:
            2rem auto 0;
    }


    .tag-box {

        transform:
            none;
    }


    /* ---------------------------------------------
       MOBILE AI
    --------------------------------------------- */

    .robot-wrapper {

        position:
            relative;

        top:
            auto;

        right:
            auto;

        left:
            auto;

        width:
            150vw;

        height:
            650px;

        margin-top:
            -280px;

        transform:
            none;

        display:
            flex;

        justify-content:
            center;

        align-items:
            center;

        overflow:
            visible;

        z-index:
            5;

        pointer-events:
            none;
    }


    .ai-assistant {

        width:
            min(80vw, 360px);

        pointer-events:
            auto;
    }


    .ai-label {

        margin-top:
            -0.2rem;
    }


    .logo-text {

        min-width:
            0;
    }
}


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

@media (max-width: 480px) {

    .container {

        padding:
            0 1rem;
    }


    header {

        padding-left:
            2%;
    }


    .brand {

        gap:
            0.75rem;
    }


    header h1 {

        font-size:
            1.3rem;
    }


    header .slogan {

        font-size:
            0.8rem;
    }


    /* ---------------------------------------------
       SMALL PHONE AI
    --------------------------------------------- */

    .robot-wrapper {

        position:
            relative;

        height:
            400px;

        margin-top:
            0;

        transform:
            none;
    }


    .ai-assistant {

        width:
            min(84vw, 320px);
    }


    .ai-label {

        font-size:
            0.8rem;

        letter-spacing:
            0.17rem;
    }


    .ai-hint {

        font-size:
            0.6rem;

        letter-spacing:
            0.16rem;
    }


    .ai-particle {

        transform:
            scale(0.8);
    }


    .tag-box {

        font-size:
            0.95rem;
    }


    .btn-get-started {

        font-size:
            1.1rem;

        padding:
            0.6rem 1rem;
    }
}


/* =========================================================
   DESKTOP NO-SCROLL
========================================================= */

@media (min-width: 769px) {

    html,
    body {

        overflow-y:
            hidden;

        height:
            100%;
    }
}


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

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

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

        animation:
            none !important;

        transition:
            none !important;
    }
}


/* =========================================================
   MOBILE LANGUAGE SWITCH POSITION
========================================================= */

@media (max-width: 768px) {

    .language-switch {

        justify-content:
            flex-start !important;

        margin-left:
            0 !important;

        margin-right:
            auto !important;

        width:
            fit-content !important;
    }
}