/* ============================================================
   NEXORA WORLD WAR 2027
   PREMIUM PURPLE / LIME EXPERIENCE
   ============================================================ */
@font-face {
    font-family: "NexoraFont";
    src: url("../assets/fonts/rigter.otf") format("opentype");
}

:root {
    --purple: #3C1A47;
    --purple-2: #4D205A;
    --purple-3: #642878;
    --purple-4: #8B3CA0;

    --purple-dark: #24102B;
    --purple-deep: #180B1D;

    --lime: #B6FF00;
    --lime-light: #D4FF63;
    --lime-dark: #8FC900;

    --bg: #100713;
    --bg-2: #16091C;
    --bg-3: #1E0C25;

    --white: #FFFFFF;
    --white-soft: #EDE8EF;
    --text: #C9BFCF;
    --muted: #94879B;

    --glass: rgba(60, 26, 71, .52);
    --glass-light: rgba(99, 40, 120, .25);

    --border: rgba(255,255,255,.11);
    --border-purple: rgba(139,60,160,.45);
    --border-lime: rgba(182,255,0,.35);

    --shadow-purple:
        0 25px 90px rgba(60,26,71,.45);

    --shadow-lime:
        0 0 35px rgba(182,255,0,.22);

    --container: 1320px;

    --mouse-x: 0px;
    --mouse-y: 0px;
    --tilt-x: 0deg;
    --tilt-y: 0deg;
}


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

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

html {
    scroll-behavior: smooth;
    background: var(--bg);
}

body {
    min-height: 100vh;

    color: var(--white);

    font-family:
        Inter,
        "Segoe UI",
        Arial,
        sans-serif;

    overflow-x: hidden;

    background:
        radial-gradient(
            ellipse at 50% -10%,
            #632774 0%,
            #3C1A47 23%,
            #210D29 48%,
            #100713 78%
        );

    -webkit-font-smoothing: antialiased;
}

body::before {
    content: "";

    position: fixed;
    inset: 0;

    pointer-events: none;

    z-index: 9999;

    opacity: .22;

    background:
        linear-gradient(
            90deg,
            transparent 49.8%,
            rgba(182,255,0,.035) 50%,
            transparent 50.2%
        ),
        linear-gradient(
            transparent 49.8%,
            rgba(182,255,0,.035) 50%,
            transparent 50.2%
        );

    background-size: 100px 100px;

    mask-image:
        radial-gradient(
            ellipse at center,
            black,
            transparent 85%
        );
}

body::after {
    content: "";

    position: fixed;
    inset: 0;

    pointer-events: none;

    z-index: 9998;

    background:
        radial-gradient(
            ellipse at center,
            transparent 30%,
            rgba(8,2,12,.35) 100%
        );
}

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

button {
    font: inherit;
}

::selection {
    background: var(--lime);
    color: #1A0920;
}

::-webkit-scrollbar {
    width: 9px;
}

::-webkit-scrollbar-track {
    background: #17091C;
}

::-webkit-scrollbar-thumb {
    background:
        linear-gradient(
            180deg,
            var(--lime),
            var(--purple-4)
        );

    border-radius: 20px;
}


/* ============================================================
   CONTAINERS
   ============================================================ */

.section-container,
.header-container,
.hero-container,
.footer-container {
    width:
        min(
            calc(100% - 70px),
            var(--container)
        );

    margin: 0 auto;
}


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

.main-header {
    position: fixed;

    top: 0;
    left: 0;

    width: 100%;
    height: 78px;

    z-index: 1000;

    background:
        linear-gradient(
            180deg,
            rgba(24,8,29,.88),
            rgba(60,26,71,.38)
        );

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

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

    transition:
        .35s ease;
}

.main-header::after {
    content: "";

    position: absolute;

    bottom: -1px;
    left: 0;

    width: 100%;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #3C1A47,
            #B6FF00,
            #3C1A47,
            transparent
        );

    opacity: .55;
}

.main-header.scrolled {
    height: 65px;

    background:
        rgba(34,11,40,.94);

    box-shadow:
        0 15px 60px rgba(15,2,20,.4);
}

.header-container {
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 30px;
}


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

.logo {
    display: flex;
    align-items: center;
    gap: 12px;
}

.logo-symbol {
    position: relative;

    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    color: var(--lime);

    font-size: 16px;
    font-weight: 1000;

    background:
        linear-gradient(
            135deg,
            #6E2C7D,
            #3C1A47
        );

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

    box-shadow:
        0 0 22px rgba(182,255,0,.14),
        inset 0 0 25px rgba(182,255,0,.08);

    transition: .3s ease;
}

.logo-symbol::before {
    content: "";

    position: absolute;

    inset: 6px;

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

    transform: rotate(45deg);
}

.logo-symbol::after {
    content: "";

    position: absolute;

    width: 5px;
    height: 5px;

    top: -3px;
    right: -3px;

    background: var(--lime);

    box-shadow:
        0 0 12px var(--lime);
}

.logo:hover .logo-symbol {
    transform:
        rotate(-5deg)
        scale(1.08);

    box-shadow:
        0 0 30px rgba(182,255,0,.3);
}

.logo-text {
    font-size: 15px;
    font-weight: 950;

    letter-spacing: 4px;

    color: white;

    transition: .3s ease;
}

.logo:hover .logo-text {
    color: var(--lime);
}


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

.navigation {
    display: flex;
    align-items: center;
    gap: 36px;

    margin-left: auto;
    margin-right: auto;
}

.nav-link {
    position: relative;

    padding: 10px 0;

    color: #C0B4C5;

    font-size: 10px;
    font-weight: 900;

    letter-spacing: 1.3px;

    text-transform: uppercase;

    transition: .25s ease;
}

.nav-link::before {
    content: "";

    position: absolute;

    bottom: 0;
    left: 50%;

    width: 0;
    height: 2px;

    transform: translateX(-50%);

    background: var(--lime);

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

    transition: .3s ease;
}

.nav-link:hover,
.nav-link.active {
    color: var(--lime);
}

.nav-link:hover::before,
.nav-link.active::before {
    width: 100%;
}


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

.header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.language-selector {
    position: relative;

    display: flex;

    padding: 4px;

    background:
        rgba(35,12,42,.75);

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

    border-radius: 10px;

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

.language-selector::before {
    content: "LANGUAGE";

    position: absolute;

    top: -11px;
    left: 9px;

    padding: 0 5px;

    color: #C1B4C7;

    font-size: 8px;
    font-weight: 900;

    background: #260E2D;

    letter-spacing: 1px;
}

.language-option {
    min-width: 62px;
    height: 30px;

    border: 0;

    border-radius: 7px;

    background: transparent;

    color: #9E92A6;

    font-size: 9px;
    font-weight: 900;

    cursor: pointer;

    transition: .25s ease;
}

.language-option:hover {
    color: white;
}

.language-option.active {
    color: #17091C;

    background:
        linear-gradient(
            135deg,
            var(--lime),
            var(--lime-light)
        );

    box-shadow:
        0 0 18px rgba(182,255,0,.24);
}


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

.header-login-button {
    display: flex;
    align-items: center;
    gap: 13px;

    height: 40px;

    padding: 0 19px;

    color: #190A20;

    font-size: 10px;
    font-weight: 950;

    background:
        linear-gradient(
            135deg,
            var(--lime),
            #D0FF52
        );

    border-radius: 8px;

    box-shadow:
        0 0 25px rgba(182,255,0,.17);

    transition: .3s ease;
}

.header-login-button:hover {
    transform: translateY(-2px);

    box-shadow:
        0 8px 30px rgba(182,255,0,.28);
}

.button-arrow {
    font-size: 15px;

    transition: .3s ease;
}

.header-login-button:hover .button-arrow {
    transform: translateX(5px);
}


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

.hero-section {
    position: relative;

    min-height: 100vh;

    padding-top: 78px;

    overflow: hidden;

    isolation: isolate;

    background:
        radial-gradient(
            ellipse at 72% 43%,
            rgba(139,60,160,.75) 0%,
            rgba(99,40,120,.5) 18%,
            rgba(60,26,71,.72) 35%,
            transparent 67%
        ),
        radial-gradient(
            ellipse at 15% 85%,
            rgba(182,255,0,.11),
            transparent 25%
        ),
        linear-gradient(
            135deg,
            #2A1032 0%,
            #3C1A47 28%,
            #25102D 58%,
            #130817 100%
        );
}


/* BIG PURPLE LIGHT */

.hero-section::before {
    content: "";

    position: absolute;

    width: 1000px;
    height: 1000px;

    right: -230px;
    top: -170px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(139,60,160,.6) 0%,
            rgba(99,40,120,.35) 30%,
            rgba(60,26,71,.12) 55%,
            transparent 72%
        );

    filter: blur(20px);

    animation:
        heroLight 8s ease-in-out infinite;
}


/* GREEN ENERGY LIGHT */

.hero-section::after {
    content: "";

    position: absolute;

    width: 700px;
    height: 700px;

    left: -250px;
    bottom: -350px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(182,255,0,.12),
            rgba(182,255,0,.035) 35%,
            transparent 70%
        );

    filter: blur(30px);
}


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

.hero-background {
    position: absolute;

    inset: 0;

    z-index: -1;

    pointer-events: none;
}

.hero-grid {
    position: absolute;

    inset: -20%;

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

    background-size:
        75px 75px;

    opacity: .22;

    transform:
        perspective(800px)
        rotateX(60deg)
        translateY(150px);

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

    animation:
        gridMove 18s linear infinite;
}


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

.hero-container {
    position: relative;

    min-height:
        calc(100vh - 78px);

    display: grid;

    grid-template-columns:
        .85fr
        1.15fr;

    align-items: center;

    gap: 20px;
}


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

.hero-content {
    position: relative;

    z-index: 10;

    max-width: 620px;

    padding-bottom: 25px;
}

.hero-content::before {
    content: "NEXORA // WORLD SYSTEM";

    position: absolute;

    left: -55px;
    top: -60px;

    color: rgba(182,255,0,.38);

    font-size: 8px;
    font-weight: 900;

    letter-spacing: 2px;

    writing-mode: vertical-rl;
}

.hero-content::after {
    content: "";

    position: absolute;

    left: -27px;
    top: -15px;

    width: 1px;
    height: 115px;

    background:
        linear-gradient(
            to bottom,
            var(--lime),
            rgba(182,255,0,0)
        );
}


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

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    padding: 9px 15px;

    margin-bottom: 20px;

    color: var(--lime);

    background:
        rgba(182,255,0,.07);

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

    border-radius: 100px;

    font-size: 10px;
    font-weight: 950;

    letter-spacing: 2px;

    box-shadow:
        0 0 25px rgba(182,255,0,.06);
}

.hero-badge::before {
    content: "";

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: var(--lime);

    box-shadow:
        0 0 10px var(--lime),
        0 0 22px var(--lime);

    animation:
        pulse 1.7s infinite;
}


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

.hero-title {
    position: relative;

    max-width: 700px;

    color: white;

    font-size:
        clamp(
            60px,
            6.5vw,
            108px
        );

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

    font-weight: 1000;

    line-height: .84;

    letter-spacing: 4px;

    text-transform: uppercase;

    font-kerning: normal;

    font-variant-ligatures: normal;

    font-feature-settings:
        "liga",
        "clig",
        "calt";

    text-shadow:
        0 15px 60px rgba(0,0,0,.25);
}

.hero-title > span {
    display: block;
}

.hero-title-highlight {
    color: var(--lime);

    text-shadow:
        0 0 15px rgba(182,255,0,.25),
        0 0 50px rgba(182,255,0,.13);

    background:
        linear-gradient(
            100deg,
            #B6FF00,
            #D7FF70,
            #B6FF00
        );

    background-size: 200% auto;

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;

    animation:
        limeText 5s linear infinite;
}


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

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

    margin-top: 28px;

    color: #D5CBD9;

    font-size: 14px;

    line-height: 1.9;

    text-shadow:
        0 3px 15px rgba(0,0,0,.25);
}


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

.hero-buttons {
    display: flex;
    align-items: center;
    gap: 13px;

    margin-top: 32px;
}

.primary-button,
.secondary-button {
    position: relative;

    min-height: 52px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 18px;

    padding: 0 24px;

    border-radius: 9px;

    font-size: 10px;
    font-weight: 950;

    letter-spacing: 1px;

    text-transform: uppercase;

    overflow: hidden;

    transition: .3s ease;
}

.primary-button {
    color: #1A0920;

    background:
        linear-gradient(
            135deg,
            #B6FF00,
            #D6FF67
        );

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

    box-shadow:
        0 10px 40px rgba(182,255,0,.18);
}

.primary-button::before {
    content: "";

    position: absolute;

    left: -120%;
    top: 0;

    width: 80%;
    height: 100%;

    transform: skewX(-25deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.7),
            transparent
        );

    transition: .65s ease;
}

.primary-button:hover {
    transform: translateY(-4px);

    box-shadow:
        0 15px 50px rgba(182,255,0,.3);
}

.primary-button:hover::before {
    left: 140%;
}

.primary-button span:last-child {
    font-size: 16px;

    transition: .3s ease;
}

.primary-button:hover span:last-child {
    transform: translateX(5px);
}

.secondary-button {
    color: #E9E2EC;

    background:
        rgba(60,26,71,.55);

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

    box-shadow:
        inset 0 0 25px rgba(139,60,160,.12);
}

.secondary-button:hover {
    transform: translateY(-4px);

    color: white;

    border-color:
        rgba(182,255,0,.35);

    background:
        rgba(99,40,120,.45);

    box-shadow:
        0 15px 45px rgba(60,26,71,.45);
}


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

.hero-visual {
    position: relative;

    height: 720px;

    display: grid;
    place-items: center;

    perspective: 1400px;
}


/* CENTRAL LIGHT */

.hero-visual::before {
    content: "";

    position: absolute;

    width: 680px;
    height: 680px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(182,255,0,.13),
            rgba(139,60,160,.35) 25%,
            rgba(60,26,71,.25) 48%,
            transparent 70%
        );

    filter: blur(15px);

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

.hero-visual::after {
    content: "";

    position: absolute;

    width: 100%;
    height: 100%;

    background:
        radial-gradient(
            ellipse at center,
            transparent 35%,
            rgba(60,26,71,.28) 70%,
            transparent 85%
        );
}


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

.world-core {
    position: relative;

    width: 500px;
    height: 500px;

    display: grid;
    place-items: center;

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

    transform-style: preserve-3d;

    z-index: 5;

    transition:
        transform .25s ease-out;
}


/* OUTER ENERGY */

.world-core::before {
    content: "";

    position: absolute;

    inset: 8%;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(182,255,0,.13),
            rgba(99,40,120,.38) 25%,
            rgba(60,26,71,.2) 55%,
            transparent 72%
        );

    filter: blur(20px);
}


/* ORBIT FRAME */

.world-core::after {
    content: "";

    position: absolute;

    inset: 0;

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

    border-radius: 50%;

    box-shadow:
        0 0 60px rgba(60,26,71,.45),
        inset 0 0 60px rgba(60,26,71,.3);

    animation:
        orbitOuter 16s linear infinite;
}


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

.world-ring {
    position: absolute;

    left: 50%;
    top: 50%;

    border-radius: 50%;

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

    pointer-events: none;
}

.world-ring-one {
    width: 330px;
    height: 330px;

    border:
        2px solid rgba(182,255,0,.4);

    border-left-color:
        transparent;

    border-bottom-color:
        rgba(182,255,0,.1);

    box-shadow:
        0 0 25px rgba(182,255,0,.08);

    animation:
        ring1 10s linear infinite;
}

.world-ring-two {
    width: 410px;
    height: 410px;

    border:
        1px solid rgba(139,60,160,.8);

    border-right-color:
        transparent;

    border-top-color:
        rgba(182,255,0,.4);

    box-shadow:
        0 0 35px rgba(60,26,71,.4);

    animation:
        ring2 15s linear infinite;
}

.world-ring-three {
    width: 480px;
    height: 480px;

    border:
        1px dashed rgba(182,255,0,.2);

    border-top-color:
        rgba(182,255,0,.7);

    border-right-color:
        transparent;

    animation:
        ring3 22s linear infinite;
}


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

.world-center {
    position: relative;

    width: 165px;
    height: 165px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    color: var(--lime);

    background:
        radial-gradient(
            circle at 35% 30%,
            rgba(182,255,0,.35),
            rgba(99,40,120,.8) 28%,
            #3C1A47 60%,
            #1E0B24 100%
        );

    border:
        2px solid rgba(182,255,0,.6);

    box-shadow:
        0 0 35px rgba(182,255,0,.2),
        0 0 100px rgba(139,60,160,.6),
        inset 0 0 50px rgba(182,255,0,.1);

    transform: translateZ(80px);

    animation:
        centerFloat 4s ease-in-out infinite;

    cursor: pointer;
}

.world-center::before {
    content: "";

    position: absolute;

    inset: 13px;

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

    border-radius: 50%;
}

.world-center::after {
    content: "";

    position: absolute;

    inset: -14px;

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

    border-radius: 50%;

    animation:
        centerRing 2.5s ease-out infinite;
}

.world-center span {
    position: relative;

    z-index: 2;

    font-size: 66px;
    font-weight: 1000;

    text-shadow:
        0 0 20px rgba(182,255,0,.55),
        0 0 50px rgba(182,255,0,.2);
}


/* ============================================================
   HERO DATA PANELS
   ============================================================ */

.hero-visual::marker {
    display: none;
}


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

.world-core .world-ring-one::before,
.world-core .world-ring-two::before,
.world-core .world-ring-three::before {
    content: "";
}


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

.about-section {
    position: relative;

    padding:
        150px 0;

    overflow: hidden;

    background:
        radial-gradient(
            ellipse at 15% 45%,
            rgba(139,60,160,.42),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #24102D,
            #3C1A47 45%,
            #24102D
        );
}

.about-section::before {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(182,255,0,.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            rgba(182,255,0,.035) 1px,
            transparent 1px
        );

    background-size: 80px 80px;

    opacity: .45;
}

.about-section::after {
    content: "NEXORA / 01";

    position: absolute;

    right: 40px;
    top: 100px;

    color: rgba(182,255,0,.16);

    font-size: 10px;
    font-weight: 900;

    letter-spacing: 4px;

    writing-mode: vertical-rl;
}


/* ============================================================
   SECTION TITLES
   ============================================================ */

.section-heading {
    position: relative;

    z-index: 2;

    max-width: 850px;

    margin-bottom: 65px;
}

.section-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 15px;

    color: var(--lime);

    font-size: 10px;
    font-weight: 950;

    letter-spacing: 3px;

    text-transform: uppercase;
}

.section-label::before {
    content: "";

    width: 30px;
    height: 2px;

    background: var(--lime);

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

.section-heading h2,
.world-text h2,
.cta-box h2 {
    color: white;

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

    font-weight: 1000;

    line-height: .92;

    letter-spacing: -4px;

    text-transform: uppercase;
}

.section-heading p {
    max-width: 620px;

    margin-top: 22px;

    color: #D2C5D8;

    font-size: 14px;

    line-height: 1.9;
}


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

.about-grid {
    position: relative;
    z-index: 2;

    display: grid;

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

    gap: 18px;
}

.about-card {
    position: relative;

    min-height: 320px;

    padding: 35px;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            rgba(99,40,120,.55),
            rgba(60,26,71,.8)
        );

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

    border-radius: 20px;

    box-shadow:
        inset 0 0 45px rgba(182,255,0,.025),
        0 20px 70px rgba(25,5,32,.3);

    transition: .35s ease;
}

.about-card::before {
    content: "";

    position: absolute;

    width: 220px;
    height: 220px;

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

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(182,255,0,.16),
            transparent 70%
        );

    transition: .5s ease;
}

.about-card::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 0;
    height: 3px;

    background:
        linear-gradient(
            90deg,
            var(--lime),
            var(--purple-4)
        );

    box-shadow:
        0 0 20px rgba(182,255,0,.35);

    transition: .4s ease;
}

.about-card:hover {
    transform: translateY(-10px);

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

    box-shadow:
        0 25px 80px rgba(25,5,32,.5),
        0 0 50px rgba(60,26,71,.55);
}

.about-card:hover::before {
    transform: scale(1.35);
}

.about-card:hover::after {
    width: 100%;
}

.about-card-number {
    color: var(--lime);

    font-size: 11px;
    font-weight: 950;

    letter-spacing: 3px;
}

.about-card h3 {
    margin-top: 60px;

    color: white;

    font-size: 29px;
    font-weight: 1000;

    letter-spacing: -1px;
}

.about-card p {
    margin-top: 15px;

    color: #C2B6C9;

    font-size: 13px;

    line-height: 1.85;
}


/* ============================================================
   FEATURES
   ============================================================ */

.features-section {
    position: relative;

    padding:
        150px 0;

    overflow: hidden;

    background:
        radial-gradient(
            ellipse at 85% 20%,
            rgba(139,60,160,.65),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #3C1A47,
            #24102D 55%,
            #16091B
        );
}

.features-section::before {
    content: "";

    position: absolute;

    width: 700px;
    height: 700px;

    right: -300px;
    top: -300px;

    border-radius: 50%;

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

    box-shadow:
        0 0 0 80px rgba(182,255,0,.025),
        0 0 0 160px rgba(182,255,0,.015);
}

.features-grid {
    position: relative;
    z-index: 2;

    display: grid;

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

    gap: 15px;
}

.feature-card {
    position: relative;

    min-height: 330px;

    padding: 30px;

    overflow: hidden;

    background:
        linear-gradient(
            150deg,
            rgba(99,40,120,.55),
            rgba(60,26,71,.75)
        );

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

    border-radius: 18px;

    transition: .35s ease;
}

.feature-card::before {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            120deg,
            transparent 20%,
            rgba(182,255,0,.08),
            transparent 70%
        );

    transform: translateX(-120%);

    transition: .8s ease;
}

.feature-card:hover {
    transform:
        translateY(-10px)
        scale(1.015);

    border-color:
        rgba(182,255,0,.35);

    box-shadow:
        0 25px 80px rgba(20,4,27,.45),
        0 0 50px rgba(60,26,71,.6);
}

.feature-card:hover::before {
    transform: translateX(120%);
}

.feature-icon {
    width: 55px;
    height: 55px;

    display: grid;
    place-items: center;

    color: var(--lime);

    font-size: 21px;
    font-weight: 950;

    background:
        linear-gradient(
            135deg,
            rgba(182,255,0,.14),
            rgba(99,40,120,.7)
        );

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

    border-radius: 13px;

    box-shadow:
        0 0 25px rgba(182,255,0,.08);
}

.feature-card h3 {
    margin-top: 65px;

    color: white;

    font-size: 24px;
    font-weight: 1000;
}

.feature-card p {
    margin-top: 15px;

    color: #C5B9CB;

    font-size: 13px;

    line-height: 1.85;
}


/* ============================================================
   WORLD
   ============================================================ */

.world-section {
    position: relative;

    padding:
        170px 0;

    overflow: hidden;

    background:
        radial-gradient(
            ellipse at 30% 50%,
            rgba(139,60,160,.55),
            transparent 40%
        ),
        linear-gradient(
            135deg,
            #16091B,
            #3C1A47,
            #24102D
        );
}

.world-content {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        .8fr
        1.2fr;

    align-items: center;

    gap: 80px;
}

.world-text p {
    max-width: 600px;

    margin:
        25px 0
        32px;

    color: #D0C3D7;

    font-size: 14px;

    line-height: 1.9;
}


/* ============================================================
   WORLD MAP
   ============================================================ */

.world-visual {
    min-height: 520px;

    display: grid;
    place-items: center;
}

.world-map {
    position: relative;

    width: min(650px,100%);
    height: 420px;

    background:
        radial-gradient(
            ellipse at center,
            rgba(99,40,120,.7),
            rgba(60,26,71,.55) 48%,
            transparent 75%
        );

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

    border-radius:
        50% 45% 55% 50%;

    box-shadow:
        0 0 100px rgba(60,26,71,.6),
        inset 0 0 80px rgba(182,255,0,.04);

    transform:
        perspective(900px)
        rotateX(10deg)
        rotateY(-8deg);

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

.world-map::before {
    content: "";

    position: absolute;

    inset: 35px;

    border:
        1px dashed rgba(182,255,0,.25);

    border-radius: 50%;

    transform: scaleX(1.4);
}

.world-map::after {
    content: "";

    position: absolute;

    left: 50%;
    top: 0;

    width: 1px;
    height: 100%;

    background:
        linear-gradient(
            transparent,
            rgba(182,255,0,.25),
            transparent
        );
}

.map-point {
    position: absolute;

    width: 10px;
    height: 10px;

    border-radius: 50%;

    background: var(--lime);

    box-shadow:
        0 0 10px var(--lime),
        0 0 30px var(--lime);

    animation:
        pointPulse 2s infinite;
}

.map-point::before {
    content: "";

    position: absolute;

    inset: -12px;

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

    border-radius: 50%;

    animation:
        pointRing 2s infinite;
}

.point-one {
    left: 22%;
    top: 30%;
}

.point-two {
    left: 46%;
    top: 52%;
}

.point-three {
    right: 21%;
    top: 28%;
}

.point-four {
    right: 30%;
    bottom: 23%;
}

.point-five {
    left: 29%;
    bottom: 18%;
}


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

.cta-section {
    position: relative;

    padding:
        130px 0
        150px;

    overflow: hidden;

    background:
        radial-gradient(
            ellipse at center,
            rgba(139,60,160,.7),
            rgba(60,26,71,.55) 35%,
            #16091B 75%
        );
}

.cta-box {
    position: relative;

    padding:
        90px 50px;

    overflow: hidden;

    text-align: center;

    background:
        linear-gradient(
            135deg,
            rgba(99,40,120,.72),
            rgba(60,26,71,.85)
        );

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

    border-radius: 28px;

    box-shadow:
        0 30px 100px rgba(25,4,32,.5),
        inset 0 0 80px rgba(182,255,0,.04);
}

.cta-box::before {
    content: "";

    position: absolute;

    width: 450px;
    height: 450px;

    left: -200px;
    top: -220px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(182,255,0,.14),
            transparent 70%
        );
}

.cta-box::after {
    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    right: -250px;
    bottom: -250px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(139,60,160,.55),
            transparent 70%
        );
}

.cta-box .section-label {
    justify-content: center;
}

.cta-box p {
    position: relative;
    z-index: 2;

    margin:
        22px auto
        30px;

    color: #D0C3D7;

    font-size: 14px;
}

.cta-box .primary-button {
    position: relative;
    z-index: 3;
}


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

.main-footer {
    position: relative;

    padding: 35px 0;

    background:
        linear-gradient(
            135deg,
            #240F2B,
            #16091B
        );

    border-top:
        1px solid rgba(182,255,0,.14);
}

.footer-container {
    display: flex;

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

    gap: 25px;
}

.footer-container p {
    color: #A094A7;

    font-size: 10px;
}

.footer-links {
    display: flex;
    gap: 25px;
}

.footer-links a {
    color: #B7AABB;

    font-size: 10px;
    font-weight: 800;

    transition: .25s ease;
}

.footer-links a:hover {
    color: var(--lime);
}


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

.reveal {
    opacity: 0;

    transform:
        translateY(35px);

    transition:
        opacity .8s ease,
        transform .8s cubic-bezier(.22,1,.36,1);
}

.reveal.visible {
    opacity: 1;

    transform:
        translateY(0);
}


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

.hero-content > * {
    opacity: 0;

    transform:
        translateY(25px);

    animation:
        heroIn
        .9s
        cubic-bezier(.22,1,.36,1)
        forwards;
}

.hero-content .hero-badge {
    animation-delay: .1s;
}

.hero-content .hero-title {
    animation-delay: .2s;
}

.hero-content .hero-description {
    animation-delay: .35s;
}

.hero-content .hero-buttons {
    animation-delay: .48s;
}

.hero-visual {
    opacity: 0;

    animation:
        visualIn
        1.1s
        cubic-bezier(.22,1,.36,1)
        .25s
        forwards;
}


/* ============================================================
   RTL
   ============================================================ */

html[dir="rtl"],
body.rtl-language {
    direction: rtl;
}

body.rtl-language {
    text-align: right;
}

.rtl-language .header-container,
.rtl-language .hero-container,
.rtl-language .world-content,
.rtl-language .footer-container {
    direction: rtl;
}

.rtl-language .navigation {
    direction: rtl;
}

.rtl-language .header-actions {
    direction: rtl;
}

.rtl-language .hero-content {
    text-align: right;
}

.rtl-language .hero-content::before {
    left: auto;
    right: -55px;
}

.rtl-language .hero-content::after {
    left: auto;
    right: -27px;
}

.rtl-language .hero-buttons {
    justify-content: flex-start;
}

.rtl-language .section-heading,
.rtl-language .about-card,
.rtl-language .feature-card,
.rtl-language .world-text {
    text-align: right;
}

.rtl-language .section-heading p,
.rtl-language .world-text p {
    margin-right: 0;
}

.rtl-language .primary-button span:last-child {
    transform: scaleX(-1);
}

.rtl-language .primary-button:hover span:last-child {
    transform:
        scaleX(-1)
        translateX(5px);
}

.rtl-language .header-login-button:hover .button-arrow {
    transform: translateX(-5px);
}

.rtl-language .hero-description,
.rtl-language .section-heading p,
.rtl-language .about-card p,
.rtl-language .feature-card p,
.rtl-language .world-text p,
.rtl-language .cta-box p {
    line-height: 2.1;
}


/* ============================================================
   ANIMATIONS
   ============================================================ */

@keyframes heroLight {
    0%,100% {
        transform: scale(1);
        opacity: .75;
    }

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

@keyframes gridMove {
    from {
        transform:
            perspective(800px)
            rotateX(60deg)
            translateY(150px)
            translateX(0);
    }

    to {
        transform:
            perspective(800px)
            rotateX(60deg)
            translateY(150px)
            translateX(-75px);
    }
}

@keyframes pulse {
    0%,100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(.65);
        opacity: .5;
    }
}

@keyframes limeText {
    from {
        background-position: 0% center;
    }

    to {
        background-position: 200% center;
    }
}

@keyframes coreLight {
    0%,100% {
        transform: scale(.94);
        opacity: .75;
    }

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

@keyframes orbitOuter {
    from {
        transform:
            rotate(0deg)
            rotateX(64deg);
    }

    to {
        transform:
            rotate(360deg)
            rotateX(64deg);
    }
}

@keyframes ring1 {
    from {
        transform:
            translate(-50%,-50%)
            rotate(0deg)
            rotateX(67deg);
    }

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

@keyframes ring2 {
    from {
        transform:
            translate(-50%,-50%)
            rotate(0deg)
            rotateY(65deg);
    }

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

@keyframes ring3 {
    from {
        transform:
            translate(-50%,-50%)
            rotate(0deg)
            rotateX(60deg);
    }

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

@keyframes centerFloat {
    0%,100% {
        transform:
            translateZ(80px)
            translateY(0);
    }

    50% {
        transform:
            translateZ(80px)
            translateY(-13px);
    }
}

@keyframes centerRing {
    0% {
        transform: scale(.65);
        opacity: .8;
    }

    100% {
        transform: scale(1.3);
        opacity: 0;
    }
}

@keyframes mapFloat {
    0%,100% {
        transform:
            perspective(900px)
            rotateX(10deg)
            rotateY(-8deg)
            translateY(0);
    }

    50% {
        transform:
            perspective(900px)
            rotateX(12deg)
            rotateY(-5deg)
            translateY(-12px);
    }
}

@keyframes pointPulse {
    0%,100% {
        transform: scale(.8);
        opacity: .7;
    }

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

@keyframes pointRing {
    0% {
        transform:
            scale(.4);
        opacity: .8;
    }

    100% {
        transform:
            scale(1.5);
        opacity: 0;
    }
}

@keyframes heroIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes visualIn {
    from {
        opacity: 0;
        transform: scale(.85) translateX(50px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateX(0);
    }
}


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

@media (max-width: 1100px) {

    .hero-container {
        grid-template-columns: 1fr 1fr;
    }

    .hero-title {
        font-size:
            clamp(
                55px,
                7vw,
                82px
            );
    }

    .world-core {
        width: 400px;
        height: 400px;
    }

    .world-ring-one {
        width: 270px;
        height: 270px;
    }

    .world-ring-two {
        width: 340px;
        height: 340px;
    }

    .world-ring-three {
        width: 395px;
        height: 395px;
    }

    .world-center {
        width: 135px;
        height: 135px;
    }

    .features-grid {
        grid-template-columns:
            repeat(2,1fr);
    }
}


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

@media (max-width: 850px) {

    .header-container {
        width:
            calc(100% - 35px);
    }

    .navigation {
        gap: 20px;
    }

    .hero-container {
        grid-template-columns: 1fr;

        padding:
            70px 0
            100px;
    }

    .hero-content {
        max-width: 760px;
    }

    .hero-visual {
        height: 550px;
    }

    .world-content {
        grid-template-columns: 1fr;

        text-align: center;
    }

    .world-text {
        text-align: center;
    }

    .world-text p {
        margin-left: auto;
        margin-right: auto;
    }

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

    .about-card {
        min-height: 270px;
    }

    .footer-container {
        flex-direction: column;

        justify-content: center;

        text-align: center;
    }
}


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

@media (max-width: 600px) {

    .section-container,
    .hero-container,
    .footer-container {
        width:
            calc(100% - 28px);
    }

    .main-header {
        height: auto;
        min-height: 65px;
    }

    .header-container {
        min-height: 65px;

        flex-wrap: wrap;

        padding: 9px 0;
    }

    .navigation {
        order: 3;

        width: 100%;

        justify-content: center;

        gap: 16px;
    }

    .nav-link {
        font-size: 8px;
    }

    .header-actions {
        gap: 6px;
    }

    .language-option {
        min-width: 50px;
        height: 27px;

        font-size: 8px;
    }

    .language-selector::before {
        display: none;
    }

    .header-login-button {
        height: 34px;

        padding: 0 11px;

        font-size: 8px;
    }

    .header-login-button .button-arrow {
        display: none;
    }

    .hero-section {
        padding-top: 105px;
    }

    .hero-container {
        padding-top: 50px;
    }

    .hero-content::before,
    .hero-content::after {
        display: none;
    }

    .hero-title {
        font-size:
            clamp(
                47px,
                15vw,
                72px
            );

        letter-spacing: -3px;
    }

    .hero-description {
        font-size: 13px;
    }

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

    .primary-button,
    .secondary-button {
        width: 100%;
    }

    .hero-visual {
        height: 390px;
    }

    .world-core {
        width: 290px;
        height: 290px;
    }

    .world-ring-one {
        width: 195px;
        height: 195px;
    }

    .world-ring-two {
        width: 240px;
        height: 240px;
    }

    .world-ring-three {
        width: 280px;
        height: 280px;
    }

    .world-center {
        width: 100px;
        height: 100px;
    }

    .world-center span {
        font-size: 42px;
    }

    .section-heading h2,
    .world-text h2,
    .cta-box h2 {
        font-size:
            clamp(
                36px,
                11vw,
                55px
            );

        letter-spacing: -2px;
    }

    .about-section,
    .features-section,
    .world-section {
        padding:
            100px 0;
    }

    .features-grid {
        grid-template-columns: 1fr;
    }

    .feature-card {
        min-height: 270px;
    }

    .world-visual {
        min-height: 350px;
    }

    .world-map {
        height: 300px;
    }

    .cta-section {
        padding:
            90px 0;
    }

    .cta-box {
        padding:
            65px 20px;
    }
}


/* ============================================================
   EXTRA SMALL
   ============================================================ */

@media (max-width: 420px) {

    .logo-text {
        display: none;
    }

    .header-container {
        justify-content: center;
    }

    .header-actions {
        margin-left: 0;
    }

    .hero-title {
        font-size: 44px;
    }

    .hero-visual {
        height: 320px;
    }

    .world-core {
        width: 245px;
        height: 245px;
    }

    .world-ring-one {
        width: 165px;
        height: 165px;
    }

    .world-ring-two {
        width: 205px;
        height: 205px;
    }

    .world-ring-three {
        width: 235px;
        height: 235px;
    }

    .world-center {
        width: 85px;
        height: 85px;
    }

    .world-center span {
        font-size: 34px;
    }
}


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

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

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }

    html {
        scroll-behavior: auto;
    }
}