/* =========================================================
   MUSKAN GROUP — 3D FUTURISTIC WEBSITE
   style.css
========================================================= */

:root {
    --bg: #020308;
    --bg-soft: #070912;

    --white: #f7f9ff;
    --text: #e9ecf5;
    --muted: #9298aa;

    --mint: #63ffd0;
    --cyan: #42dfff;
    --violet: #9578ff;
    --pink: #ff62d7;

    --line: rgba(255, 255, 255, 0.11);

    --glass: rgba(255, 255, 255, 0.035);

    --font-main: "Inter", sans-serif;
    --font-display: "Space Grotesk", sans-serif;
}


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

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

html {
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;

    background:
        radial-gradient(
            circle at 80% 10%,
            rgba(88, 76, 180, 0.12),
            transparent 30%
        ),
        radial-gradient(
            circle at 10% 50%,
            rgba(50, 255, 205, 0.055),
            transparent 30%
        ),
        var(--bg);

    color: var(--white);

    font-family: var(--font-main);

    overflow-x: hidden;
}

a {
    text-decoration: none;
    color: inherit;
}

button,
input,
textarea,
select {
    font-family: inherit;
}


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

.background {
    position: fixed;
    inset: 0;

    z-index: -10;

    overflow: hidden;

    pointer-events: none;
}


/* stars */

.stars {
    position: absolute;
    inset: 0;

    opacity: 0.45;

    background-image:
        radial-gradient(
            circle,
            rgba(255, 255, 255, 0.9) 1px,
            transparent 1.5px
        );

    background-size: 95px 95px;

    animation: starsMove 35s linear infinite;
}

@keyframes starsMove {

    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(950px);
    }
}


/* futuristic grid */

.grid-background {
    position: absolute;

    width: 180%;
    height: 70%;

    left: -40%;
    bottom: -18%;

    opacity: 0.23;

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

    background-size: 65px 65px;

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

    mask-image:
        linear-gradient(
            to top,
            black,
            transparent 75%
        );
}


/* background glows */

.glow {
    position: absolute;

    border-radius: 50%;

    filter: blur(80px);

    opacity: 0.16;

    animation: glowMove 12s ease-in-out infinite alternate;
}

.glow-one {
    width: 420px;
    height: 420px;

    background: var(--mint);

    top: 8%;
    left: -10%;
}

.glow-two {
    width: 500px;
    height: 500px;

    background: var(--violet);

    top: 35%;
    right: -15%;

    animation-delay: 2s;
}

.glow-three {
    width: 350px;
    height: 350px;

    background: var(--pink);

    bottom: -5%;
    left: 40%;

    animation-delay: 5s;
}

@keyframes glowMove {

    0% {
        transform: translate(0, 0) scale(1);
    }

    100% {
        transform: translate(60px, -40px) scale(1.2);
    }
}


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

.navbar {

    position: fixed;

    top: 0;
    left: 0;
    right: 0;

    height: 82px;

    padding: 0 6vw;

    display: flex;

    align-items: center;

    justify-content: space-between;

    z-index: 100;

    background:
        linear-gradient(
            to bottom,
            rgba(2, 3, 8, 0.94),
            rgba(2, 3, 8, 0.35),
            transparent
        );

    backdrop-filter: blur(10px);
}


/* logo */

.logo {
    display: flex;

    align-items: center;

    gap: 12px;
}

.logo-orbit {

    position: relative;

    width: 42px;
    height: 42px;

    border: 1px solid rgba(99, 255, 208, 0.55);

    border-radius: 50%;

    display: grid;

    place-items: center;

    color: var(--mint);

    font-family: var(--font-display);

    font-size: 11px;

    font-weight: 700;

    box-shadow:
        0 0 20px rgba(99, 255, 208, 0.15),
        inset 0 0 15px rgba(99, 255, 208, 0.08);
}

.logo-orbit::before {

    content: "";

    position: absolute;

    width: 58px;
    height: 17px;

    border:

        1px solid
        rgba(99, 255, 208, 0.3);

    border-radius: 50%;

    transform:
        rotate(-25deg);
}

.logo-orbit::after {

    content: "";

    position: absolute;

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: var(--mint);

    box-shadow:
        0 0 12px var(--mint);

    top: 3px;
    right: 5px;
}

.logo-text {

    display: flex;

    flex-direction: column;

    line-height: 1;
}

.logo-text strong {

    font-family: var(--font-display);

    font-size: 14px;

    letter-spacing: 2px;
}

.logo-text span {

    margin-top: 4px;

    font-size: 8px;

    letter-spacing: 4px;

    color: #777d91;
}


/* navigation */

.navigation {

    display: flex;

    align-items: center;

    gap: 28px;
}

.navigation a {

    position: relative;

    color: #a9adbd;

    font-size: 11px;

    letter-spacing: 0.4px;

    transition:
        color 0.3s ease;
}

.navigation a::after {

    content: "";

    position: absolute;

    left: 50%;
    bottom: -8px;

    width: 0;
    height: 1px;

    background: var(--mint);

    transform: translateX(-50%);

    transition: width 0.3s ease;
}

.navigation a:hover {

    color: white;
}

.navigation a:hover::after {

    width: 100%;
}


/* admin */

.admin-button {

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 10px 16px;

    border: 1px solid var(--line);

    border-radius: 100px;

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

    color: #cbd0dc;

    font-size: 9px;

    letter-spacing: 2px;

    transition: all 0.3s ease;
}

.admin-button span {

    color: var(--mint);

    font-size: 13px;
}

.admin-button:hover {

    border-color: rgba(99,255,208,0.4);

    background:
        rgba(99,255,208,0.06);

    box-shadow:
        0 0 25px rgba(99,255,208,0.08);
}


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

.hero-section {

    position: relative;

    min-height: 100vh;

    padding:
        130px
        7vw
        70px;

    display: grid;

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

    align-items: center;

    overflow: hidden;
}


/* hero content */

.hero-content {

    position: relative;

    z-index: 10;

    max-width: 690px;
}

.status-line {

    display: flex;

    align-items: center;

    gap: 10px;

    color: #aeb4c3;

    font-family: var(--font-display);

    font-size: 9px;

    letter-spacing: 3px;
}

.status-dot {

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: var(--mint);

    box-shadow:
        0 0 8px var(--mint),
        0 0 22px var(--mint);

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

@keyframes statusPulse {

    0%,
    100% {
        opacity: 0.5;
        transform: scale(0.8);
    }

    50% {
        opacity: 1;
        transform: scale(1.15);
    }
}


/* hero title */

.hero-content h1 {

    margin-top: 28px;

    font-family: var(--font-display);

    font-size:
        clamp(
            58px,
            7vw,
            108px
        );

    line-height: 0.88;

    font-weight: 600;

    letter-spacing: -6px;

    color: white;
}

.hero-content h1 span {

    display: block;

    margin-top: 13px;

    background:
        linear-gradient(
            90deg,
            var(--mint),
            #9c8aff,
            var(--pink)
        );

    -webkit-background-clip: text;

    background-clip: text;

    color: transparent;

    filter:
        drop-shadow(
            0 0 20px
            rgba(99,255,208,0.12)
        );
}


/* description */

.hero-description {

    max-width: 560px;

    margin-top: 32px;

    color: var(--muted);

    font-size: 15px;

    line-height: 1.85;
}


/* buttons */

.hero-buttons {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-top: 32px;
}

.primary-button {

    display: inline-flex;

    align-items: center;

    gap: 22px;

    padding: 15px 20px;

    background:
        linear-gradient(
            100deg,
            var(--mint),
            #b4ffe9
        );

    color: #03110d;

    font-size: 11px;

    font-weight: 800;

    border-radius: 4px;

    box-shadow:
        0 0 30px
        rgba(99,255,208,0.14);

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

.primary-button span {

    font-size: 15px;
}

.primary-button:hover {

    transform:
        translateY(-3px);

    box-shadow:
        0 12px 45px
        rgba(99,255,208,0.24);
}

.secondary-button {

    padding: 14px 20px;

    border:
        1px solid
        var(--line);

    border-radius: 4px;

    color: #b7bbc8;

    font-size: 11px;

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

    transition:
        all 0.3s ease;
}

.secondary-button:hover {

    color: white;

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

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


/* stats */

.hero-stats {

    display: flex;

    gap: 48px;

    margin-top: 58px;
}

.stat strong {

    display: block;

    font-family: var(--font-display);

    font-size: 24px;

    font-weight: 600;
}

.stat span {

    display: block;

    margin-top: 5px;

    color: #666c7d;

    font-family: var(--font-display);

    font-size: 8px;

    letter-spacing: 2px;
}


/* =========================================================
   HERO 3D VISUAL
========================================================= */

.hero-visual {

    position: relative;

    width: 100%;

    height: 650px;

    perspective: 1000px;

    transform-style: preserve-3d;
}


/* planet */

.planet {

    position: absolute;

    width: 340px;
    height: 340px;

    left: 50%;
    top: 50%;

    transform:
        translate(-50%, -50%)
        rotateX(12deg);

    border-radius: 50%;

    z-index: 4;

    animation:
        planetFloat 7s ease-in-out infinite;

    filter:
        drop-shadow(
            0 0 55px
            rgba(99,255,208,0.22)
        );
}

@keyframes planetFloat {

    0%,
    100% {
        transform:
            translate(-50%, -50%)
            rotateX(12deg)
            rotateY(-3deg);
    }

    50% {
        transform:
            translate(-50%, -54%)
            rotateX(16deg)
            rotateY(8deg);
    }
}


.planet-surface {

    position: absolute;

    inset: 0;

    border-radius: 50%;

    overflow: hidden;

    background:

        radial-gradient(
            circle at 31% 24%,
            #d9fff5 0%,
            #6dffe0 5%,
            #218f84 13%,
            #103f4d 29%,
            #0a1728 48%,
            #03050a 72%
        );

    box-shadow:

        inset
        -45px -35px 75px
        #000,

        inset
        15px 5px 45px
        rgba(255,255,255,0.24),

        0 0 70px
        rgba(99,255,208,0.15);
}


/* planet scan lines */

.planet-lines {

    position: absolute;

    inset: -10%;

    background:

        repeating-linear-gradient(
            0deg,
            transparent 0px,
            transparent 9px,
            rgba(99,255,208,0.13) 10px,
            rgba(99,255,208,0.13) 11px
        );

    transform:
        rotate(-14deg)
        scale(1.25);

    opacity: 0.6;

    mix-blend-mode: screen;
}


/* planet logo */

.planet-logo {

    position: absolute;

    inset: 0;

    display: grid;

    place-items: center;

    font-family: var(--font-display);

    font-size: 64px;

    font-weight: 700;

    letter-spacing: -6px;

    color: white;

    text-shadow:
        0 0 15px var(--mint),
        0 0 45px rgba(99,255,208,0.6);

    z-index: 4;
}


/* planet shadow */

.planet-shadow {

    position: absolute;

    width: 390px;
    height: 110px;

    left: 50%;
    top: 74%;

    transform:
        translateX(-50%);

    border-radius: 50%;

    background:
        radial-gradient(
            ellipse,
            rgba(0,0,0,0.7),
            transparent 70%
        );

    filter: blur(12px);

    z-index: 1;
}


/* =========================================================
   ORBITS
========================================================= */

.orbit {

    position: absolute;

    left: 50%;
    top: 50%;

    border-radius: 50%;

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

    transform:
        translate(-50%, -50%)
        rotateX(67deg);

    pointer-events: none;
}

.orbit-one {

    width: 510px;
    height: 185px;

    animation:
        orbitRotate 16s linear infinite;
}

.orbit-two {

    width: 650px;
    height: 270px;

    transform:
        translate(-50%, -50%)
        rotateX(67deg)
        rotateZ(30deg);

    opacity: 0.75;

    animation:
        orbitRotateReverse 22s linear infinite;
}

.orbit-three {

    width: 770px;
    height: 350px;

    transform:
        translate(-50%, -50%)
        rotateX(67deg)
        rotateZ(-36deg);

    opacity: 0.42;

    animation:
        orbitRotate 28s linear infinite;
}

@keyframes orbitRotate {

    from {
        transform:
            translate(-50%, -50%)
            rotateX(67deg)
            rotateZ(0deg);
    }

    to {
        transform:
            translate(-50%, -50%)
            rotateX(67deg)
            rotateZ(360deg);
    }
}

@keyframes orbitRotateReverse {

    from {
        transform:
            translate(-50%, -50%)
            rotateX(67deg)
            rotateZ(360deg);
    }

    to {
        transform:
            translate(-50%, -50%)
            rotateX(67deg)
            rotateZ(0deg);
    }
}


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

.floating-card {

    position: absolute;

    z-index: 10;

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 12px 16px;

    border:
        1px solid
        rgba(99,255,208,0.25);

    background:
        rgba(3,8,13,0.72);

    backdrop-filter:
        blur(14px);

    box-shadow:
        0 20px 40px
        rgba(0,0,0,0.35),

        0 0 30px
        rgba(99,255,208,0.05);

    font-family:
        var(--font-display);

    transform-style: preserve-3d;
}

.floating-card strong {

    display: block;

    color: var(--mint);

    font-size: 9px;

    letter-spacing: 1px;
}

.floating-card small {

    display: block;

    margin-top: 3px;

    color: #777d8b;

    font-size: 7px;

    letter-spacing: 1px;
}

.floating-icon {

    width: 34px;
    height: 34px;

    display: grid;

    place-items: center;

    border:
        1px solid
        rgba(99,255,208,0.35);

    color: var(--mint);

    font-size: 8px;

    box-shadow:
        inset 0 0 15px
        rgba(99,255,208,0.08);
}

.card-ai {

    top: 15%;
    left: 7%;

    animation:
        floatingOne 5s ease-in-out infinite;
}

.card-web {

    top: 66%;
    right: 4%;

    border-color:
        rgba(149,120,255,0.3);

    animation:
        floatingTwo 6s ease-in-out infinite;
}

.card-web .floating-icon {

    color: var(--violet);

    border-color:
        rgba(149,120,255,0.4);
}

.card-app {

    bottom: 10%;
    left: 17%;

    border-color:
        rgba(255,98,215,0.28);

    animation:
        floatingThree 7s ease-in-out infinite;
}

.card-app .floating-icon {

    color: var(--pink);

    border-color:
        rgba(255,98,215,0.35);
}

@keyframes floatingOne {

    0%,
    100% {
        transform:
            translateY(0)
            rotate(-6deg);
    }

    50% {
        transform:
            translateY(-18px)
            rotate(-2deg);
    }
}

@keyframes floatingTwo {

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

    50% {
        transform:
            translateY(15px)
            rotate(1deg);
    }
}

@keyframes floatingThree {

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

    50% {
        transform:
            translateY(-13px)
            rotate(0deg);
    }
}


/* energy lines */

.energy-line {

    position: absolute;

    width: 1px;

    height: 250px;

    background:
        linear-gradient(
            transparent,
            var(--mint),
            transparent
        );

    opacity: 0.35;

    filter:
        drop-shadow(
            0 0 5px
            var(--mint)
        );
}

.energy-one {

    top: 3%;
    right: 17%;

    transform:
        rotate(27deg);
}

.energy-two {

    bottom: 8%;
    left: 6%;

    transform:
        rotate(-31deg);
}


/* scroll */

.scroll-indicator {

    position: absolute;

    bottom: 25px;

    left: 7vw;

    display: flex;

    align-items: center;

    gap: 13px;

    color: #686e7d;

    font-family: var(--font-display);

    font-size: 8px;

    letter-spacing: 2px;
}

.scroll-indicator b {

    color: var(--mint);

    font-size: 16px;

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

@keyframes scrollBounce {

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

    50% {
        transform: translateY(6px);
    }
}


/* =========================================================
   COMMON SECTION
========================================================= */

.section {

    position: relative;

    padding:
        150px
        7vw;
}

.section-title {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 40px;

    margin-bottom: 75px;
}

.section-title > span {

    color: #676d7e;

    font-family: var(--font-display);

    font-size: 9px;

    letter-spacing: 3px;
}

.section-title h2 {

    max-width: 760px;

    font-family: var(--font-display);

    font-size:
        clamp(
            45px,
            5.5vw,
            78px
        );

    line-height: 0.92;

    letter-spacing: -4px;

    font-weight: 600;
}

.section-title h2 em {

    font-style: normal;

    background:
        linear-gradient(
            90deg,
            var(--mint),
            var(--violet),
            var(--pink)
        );

    -webkit-background-clip: text;

    background-clip: text;

    color: transparent;
}


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

.about-container {

    display: grid;

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

    gap: 10vw;

    align-items: center;
}


/* hologram */

.hologram {

    position: relative;

    height: 470px;

    overflow: hidden;

    border:
        1px solid
        rgba(99,255,208,0.16);

    background:
        radial-gradient(
            circle at center,
            rgba(99,255,208,0.08),
            transparent 50%
        ),
        rgba(255,255,255,0.015);

    box-shadow:
        inset
        0 0 100px
        rgba(99,255,208,0.025);
}


/* hologram scan */

.hologram-grid {

    position: absolute;

    inset: 0;

    background:

        linear-gradient(
            rgba(99,255,208,0.12) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(99,255,208,0.12) 1px,
            transparent 1px
        );

    background-size:
        30px 30px;

    opacity: 0.35;

    mask-image:
        radial-gradient(
            circle,
            black,
            transparent 70%
        );
}


/* hologram sphere */

.hologram-circle {

    position: absolute;

    width: 260px;
    height: 260px;

    left: 50%;
    top: 50%;

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

    border-radius: 50%;

    display: grid;

    place-items: center;

    background:

        repeating-linear-gradient(
            0deg,
            transparent 0 8px,
            rgba(99,255,208,0.16) 9px 10px
        ),

        repeating-linear-gradient(
            90deg,
            transparent 0 12px,
            rgba(149,120,255,0.1) 13px 14px
        );

    box-shadow:
        0 0 60px
        rgba(99,255,208,0.13);

    animation:
        hologramSpin 18s linear infinite;
}

.hologram-circle::before {

    content: "";

    position: absolute;

    inset: 18px;

    border:
        1px solid
        rgba(99,255,208,0.45);

    border-radius: 50%;
}

.hologram-circle span {

    font-family:
        var(--font-display);

    font-size: 52px;

    font-weight: 700;

    color: var(--mint);

    text-shadow:
        0 0 20px
        var(--mint);

    animation:
        hologramCounter 18s linear infinite;
}

@keyframes hologramSpin {

    from {
        transform:
            translate(-50%, -50%)
            rotate(0deg);
    }

    to {
        transform:
            translate(-50%, -50%)
            rotate(360deg);
    }
}

@keyframes hologramCounter {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(-360deg);
    }
}


/* hologram rings */

.hologram-ring {

    position: absolute;

    left: 50%;
    top: 50%;

    border:
        1px solid
        rgba(99,255,208,0.3);

    border-radius: 50%;

    transform:
        translate(-50%, -50%)
        rotateX(65deg);
}

.ring-one {

    width: 390px;
    height: 130px;
}

.ring-two {

    width: 430px;
    height: 180px;

    transform:
        translate(-50%, -50%)
        rotateX(65deg)
        rotateZ(45deg);

    border-color:
        rgba(149,120,255,0.24);
}

.ring-three {

    width: 470px;
    height: 210px;

    transform:
        translate(-50%, -50%)
        rotateX(65deg)
        rotateZ(-30deg);

    border-color:
        rgba(255,98,215,0.18);
}


/* hologram label */

.hologram-label {

    position: absolute;

    left: 25px;
    bottom: 25px;

    font-family:
        var(--font-display);

    font-size: 9px;

    letter-spacing: 3px;

    color: #7b8291;
}


/* about text */

.large-text {

    font-family:
        var(--font-display);

    font-size: 34px;

    line-height: 1.2;

    color: #e9ebf2;
}

.large-text span {

    color: var(--mint);
}

.about-content > p {

    margin-top: 25px;

    max-width: 570px;

    color: var(--muted);

    font-size: 14px;

    line-height: 1.9;
}


/* technology tags */

.technology-tags {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin-top: 35px;
}

.technology-tags span {

    padding:
        9px
        12px;

    border:
        1px solid
        var(--line);

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

    color: #989dab;

    font-family:
        var(--font-display);

    font-size: 8px;

    letter-spacing: 1.5px;
}


/* =========================================================
   TEAM
========================================================= */

.team-grid {

    display: grid;

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

    gap: 12px;
}

.team-card {

    position: relative;

    min-height: 390px;

    padding: 25px;

    overflow: hidden;

    border:
        1px solid
        var(--line);

    background:

        radial-gradient(
            circle at 50% 30%,
            rgba(99,255,208,0.08),
            transparent 42%
        ),

        rgba(255,255,255,0.025);

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

.team-card::before {

    content: "";

    position: absolute;

    width: 250px;
    height: 250px;

    left: 50%;
    top: 15%;

    transform:
        translateX(-50%);

    border-radius: 50%;

    border:
        1px solid
        rgba(99,255,208,0.1);

    box-shadow:
        0 0 80px
        rgba(99,255,208,0.06);
}

.team-card:hover {

    transform:
        translateY(-12px);

    border-color:
        rgba(99,255,208,0.35);

    box-shadow:
        0 35px 80px
        rgba(0,0,0,0.4);
}

.team-number {

    position: absolute;

    top: 22px;
    right: 22px;

    font-family:
        var(--font-display);

    font-size: 10px;

    color: #626878;
}

.team-avatar {

    position: absolute;

    left: 50%;
    top: 31%;

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

    width: 145px;
    height: 145px;

    border-radius: 50%;

    display: grid;

    place-items: center;

    border:
        1px solid
        rgba(99,255,208,0.32);

    background:

        radial-gradient(
            circle,
            rgba(99,255,208,0.15),
            rgba(10,18,28,0.8)
        );

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

    font-family:
        var(--font-display);

    font-size: 42px;

    font-weight: 700;

    box-shadow:
        0 0 50px
        rgba(99,255,208,0.08);
}

.team-info {

    position: absolute;

    left: 25px;
    right: 25px;
    bottom: 25px;
}

.team-info h3 {

    font-family:
        var(--font-display);

    font-size: 20px;

    font-weight: 600;
}

.team-info p {

    margin-top: 6px;

    color: #7e8393;

    font-size: 12px;
}


/* =========================================================
   APPLICATIONS
========================================================= */

.applications-grid {

    display: grid;

    grid-template-columns:
        1.35fr
        0.82fr
        0.82fr;

    gap: 12px;
}

.application-card {

    position: relative;

    min-height: 440px;

    padding: 30px;

    overflow: hidden;

    border:
        1px solid
        var(--line);

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

    transition:
        transform 0.45s ease,
        border-color 0.45s ease;
}

.application-card:hover {

    transform:
        translateY(-10px);

    border-color:
        rgba(99,255,208,0.3);
}

.application-card.featured {

    background:

        radial-gradient(
            circle at 85% 15%,
            rgba(99,255,208,0.15),
            transparent 32%
        ),

        linear-gradient(
            145deg,
            rgba(99,255,208,0.08),
            rgba(149,120,255,0.055),
            rgba(255,98,215,0.045)
        );
}


/* application orb */

.application-orb {

    position: absolute;

    width: 300px;
    height: 300px;

    right: -100px;
    top: -100px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            var(--mint),
            transparent 65%
        );

    opacity: 0.12;

    filter: blur(10px);
}


/* application icon */

.application-icon {

    width: 76px;
    height: 76px;

    display: grid;

    place-items: center;

    border:
        1px solid
        rgba(99,255,208,0.45);

    color: var(--mint);

    font-family:
        var(--font-display);

    font-size: 20px;

    font-weight: 700;

    box-shadow:
        0 0 35px
        rgba(99,255,208,0.1);

    margin-bottom: 105px;
}

.application-label {

    display: block;

    font-family:
        var(--font-display);

    color: #707687;

    font-size: 8px;

    letter-spacing: 2px;
}

.application-card h3 {

    margin-top: 14px;

    font-family:
        var(--font-display);

    font-size: 37px;

    line-height: 0.98;

    letter-spacing: -2px;
}

.application-card p {

    max-width: 310px;

    margin-top: 17px;

    color: #818696;

    font-size: 12px;

    line-height: 1.7;
}

.application-card a {

    position: absolute;

    left: 30px;
    bottom: 28px;

    color: var(--mint);

    font-family:
        var(--font-display);

    font-size: 10px;
}

.application-number {

    position: absolute;

    top: 15px;
    right: 20px;

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

    font-family:
        var(--font-display);

    font-size: 110px;

    line-height: 1;
}


/* =========================================================
   WEB HUB
========================================================= */

.web-grid {

    display: grid;

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

    gap: 12px;
}

.web-card {

    position: relative;

    min-height: 260px;

    padding: 30px;

    border:
        1px solid
        var(--line);

    background:

        linear-gradient(
            120deg,
            rgba(149,120,255,0.07),
            rgba(255,255,255,0.015)
        );

    transition:
        transform 0.45s ease,
        border-color 0.45s ease;
}

.web-card:hover {

    transform:
        translateY(-8px)
        perspective(700px)
        rotateX(2deg)
        rotateY(-2deg);

    border-color:
        rgba(149,120,255,0.4);
}

.web-icon {

    position: absolute;

    top: 25px;
    right: 25px;

    color: var(--violet);

    font-size: 22px;
}

.web-card small {

    font-family:
        var(--font-display);

    font-size: 8px;

    letter-spacing: 2px;

    color: #6f7484;
}

.web-card h3 {

    margin-top: 70px;

    font-family:
        var(--font-display);

    font-size: 34px;

    letter-spacing: -1px;
}

.web-card p {

    margin-top: 8px;

    color: #7e8391;

    font-size: 12px;
}

.web-card b {

    position: absolute;

    bottom: 25px;
    left: 30px;

    color: var(--violet);

    font-family:
        var(--font-display);

    font-size: 8px;

    letter-spacing: 2px;
}


/* =========================================================
   UPDATES
========================================================= */

.news-grid {

    display: grid;

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

    gap: 12px;
}

.news-card {

    min-height: 250px;

    padding: 27px;

    border:
        1px solid
        var(--line);

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

.news-card small {

    color: #737989;

    font-family:
        var(--font-display);

    font-size: 8px;

    letter-spacing: 2px;
}

.news-card h3 {

    margin-top: 60px;

    font-family:
        var(--font-display);

    font-size: 22px;

    line-height: 1.15;

    font-weight: 500;
}

.news-card p {

    margin-top: 17px;

    color: #7c8190;

    font-size: 12px;

    line-height: 1.65;
}


/* announcement */

.announcement {

    display: flex;

    align-items: center;

    gap: 28px;

    margin-top: 12px;

    padding: 20px 25px;

    border:
        1px solid
        rgba(99,255,208,0.17);

    background:
        rgba(99,255,208,0.025);
}

.announcement-status {

    display: flex;

    align-items: center;

    gap: 9px;

    flex-shrink: 0;

    color: var(--mint);

    font-family:
        var(--font-display);

    font-size: 8px;

    letter-spacing: 2px;
}

.announcement-status span {

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: var(--mint);

    box-shadow:
        0 0 10px
        var(--mint);
}

.announcement p {

    color: #a9adba;

    font-size: 12px;
}


/* =========================================================
   SUPPORT
========================================================= */

.support-section {

    position: relative;

    min-height: 700px;

    display: grid;

    place-items: center;

    text-align: center;

    overflow: hidden;
}


/* central orb */

.support-planet {

    position: absolute;

    width: 570px;
    height: 570px;

    border-radius: 50%;

    background:

        radial-gradient(
            circle,
            rgba(99,255,208,0.15),
            rgba(149,120,255,0.07) 35%,
            transparent 68%
        );

    filter: blur(3px);

    animation:
        supportPulse 6s ease-in-out infinite;
}

@keyframes supportPulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.8;
    }

    50% {
        transform: scale(1.1);
        opacity: 0.55;
    }
}


/* support rings */

.support-ring {

    position: absolute;

    left: 50%;
    top: 50%;

    border:
        1px solid
        rgba(99,255,208,0.14);

    border-radius: 50%;

    transform:
        translate(-50%, -50%)
        rotateX(65deg);
}

.ring-a {

    width: 680px;
    height: 230px;

    animation:
        orbitRotate 18s linear infinite;
}

.ring-b {

    width: 850px;
    height: 310px;

    transform:
        translate(-50%, -50%)
        rotateX(65deg)
        rotateZ(45deg);

    border-color:
        rgba(149,120,255,0.1);

    animation:
        orbitRotateReverse 25s linear infinite;
}


/* support content */

.support-content {

    position: relative;

    z-index: 5;

    max-width: 850px;
}

.support-content h2 {

    margin-top: 25px;

    font-family:
        var(--font-display);

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

    line-height: 0.9;

    letter-spacing: -5px;

    font-weight: 600;
}

.support-content h2 span {

    display: block;

    margin-top: 10px;

    background:
        linear-gradient(
            90deg,
            var(--mint),
            var(--violet),
            var(--pink)
        );

    -webkit-background-clip: text;

    background-clip: text;

    color: transparent;
}

.support-content p {

    max-width: 510px;

    margin:
        30px
        auto;

    color: #888d9c;

    font-size: 14px;

    line-height: 1.8;
}


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

.footer {

    position: relative;

    display: grid;

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

    gap: 20px;

    align-items: center;

    padding:
        40px
        7vw
        55px;

    border-top:
        1px solid
        var(--line);

    color: #6d7281;

    font-size: 10px;
}

.footer-brand {

    display: flex;

    align-items: center;

    gap: 10px;

    font-family:
        var(--font-display);

    letter-spacing: 2px;
}

.footer-logo {

    width: 34px;
    height: 34px;

    display: grid;

    place-items: center;

    border:
        1px solid
        rgba(99,255,208,0.35);

    border-radius: 50%;

    color: var(--mint);

    font-size: 9px;
}

.footer > p {

    text-align: center;
}

.footer-links {

    display: flex;

    justify-content: flex-end;

    gap: 20px;
}

.footer-links a {

    transition:
        color 0.3s ease;
}

.footer-links a:hover {

    color: white;
}

.footer > small {

    grid-column:
        1 / -1;

    margin-top: 20px;

    text-align: center;

    color: #484d5a;
}


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

.reveal {

    opacity: 0;

    transform:
        translateY(35px);

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

.reveal.show {

    opacity: 1;

    transform:
        translateY(0);
}


/* =========================================================
   CUSTOM SCROLLBAR
========================================================= */

::-webkit-scrollbar {

    width: 7px;
}

::-webkit-scrollbar-track {

    background: #020308;
}

::-webkit-scrollbar-thumb {

    background:
        linear-gradient(
            var(--mint),
            var(--violet)
        );

    border-radius: 10px;
}


/* =========================================================
   SELECTION
========================================================= */

::selection {

    background:
        rgba(99,255,208,0.25);

    color: white;
}


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

@media (max-width: 1050px) {

    .navigation {

        gap: 16px;
    }

    .navigation a {

        font-size: 10px;
    }

    .hero-section {

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

    .hero-content h1 {

        font-size: 70px;
    }

    .hero-visual {

        height: 570px;
    }

    .planet {

        width: 280px;
        height: 280px;
    }

    .orbit-one {

        width: 430px;
    }

    .orbit-two {

        width: 540px;
    }

    .orbit-three {

        width: 650px;
    }

}


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

@media (max-width: 800px) {

    .navbar {

        height: 70px;

        padding:
            0
            20px;
    }

    .navigation {

        display: none;
    }

    .hero-section {

        display: flex;

        flex-direction: column;

        padding:
            120px
            20px
            60px;

        min-height: auto;
    }

    .hero-content {

        width: 100%;
    }

    .hero-content h1 {

        font-size: 58px;

        letter-spacing: -4px;
    }

    .hero-description {

        font-size: 13px;
    }

    .hero-buttons {

        flex-direction: column;

        align-items: stretch;
    }

    .primary-button,
    .secondary-button {

        justify-content: center;
    }

    .hero-stats {

        gap: 25px;
    }

    .hero-visual {

        width: 100%;

        height: 470px;

        margin-top: 30px;
    }

    .planet {

        width: 230px;
        height: 230px;
    }

    .planet-logo {

        font-size: 45px;
    }

    .orbit-one {

        width: 350px;
        height: 140px;
    }

    .orbit-two {

        width: 450px;
        height: 190px;
    }

    .orbit-three {

        width: 520px;
        height: 230px;
    }

    .floating-card {

        transform:
            scale(0.85);
    }

    .card-ai {

        left: 0;
    }

    .card-web {

        right: 0;
    }

    .card-app {

        left: 8%;
    }

    .section {

        padding:
            100px
            20px;
    }

    .section-title {

        display: block;

        margin-bottom: 45px;
    }

    .section-title > span {

        display: block;

        margin-bottom: 20px;
    }

    .section-title h2 {

        font-size: 48px;

        letter-spacing: -3px;
    }

    .about-container {

        grid-template-columns: 1fr;

        gap: 50px;
    }

    .hologram {

        height: 360px;
    }

    .team-grid {

        grid-template-columns: 1fr;
    }

    .team-card {

        min-height: 340px;
    }

    .applications-grid {

        grid-template-columns: 1fr;
    }

    .application-card {

        min-height: 380px;
    }

    .web-grid {

        grid-template-columns: 1fr;
    }

    .news-grid {

        grid-template-columns: 1fr;
    }

    .announcement {

        align-items: flex-start;

        flex-direction: column;

        gap: 12px;
    }

    .support-section {

        min-height: 600px;
    }

    .support-content h2 {

        font-size: 58px;

        letter-spacing: -4px;
    }

    .support-planet {

        width: 420px;
        height: 420px;
    }

    .footer {

        grid-template-columns: 1fr;

        text-align: center;

        padding:
            35px
            20px
            45px;
    }

    .footer-brand {

        justify-content: center;
    }

    .footer > p {

        text-align: center;
    }

    .footer-links {

        justify-content: center;

        flex-wrap: wrap;
    }

    .footer > small {

        grid-column: auto;
    }
}


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

@media (max-width: 480px) {

    .logo-text strong {

        font-size: 12px;
    }

    .logo-text span {

        font-size: 7px;

        letter-spacing: 3px;
    }

    .admin-button {

        padding:
            9px
            11px;
    }

    .hero-content h1 {

        font-size: 50px;

        letter-spacing: -3px;
    }

    .hero-stats {

        justify-content: space-between;
    }

    .stat strong {

        font-size: 20px;
    }

    .hero-visual {

        height: 410px;
    }

    .planet {

        width: 195px;
        height: 195px;
    }

    .planet-logo {

        font-size: 38px;
    }

    .orbit-one {

        width: 300px;
    }

    .orbit-two {

        width: 370px;
    }

    .orbit-three {

        width: 430px;
    }

    .floating-card {

        padding:
            9px
            11px;

        transform:
            scale(0.72);
    }

    .section-title h2 {

        font-size: 42px;
    }

    .large-text {

        font-size: 27px;
    }

    .support-content h2 {

        font-size: 49px;

        letter-spacing: -3px;
    }

}