/* =========================================================
   FUTUREVERSE — FUTURESPHERE
   Premium Identity & Vision Experience
========================================================= */

:root {
    --bg: #02040b;
    --bg-soft: #050914;
    --surface: rgba(12, 18, 35, 0.72);
    --surface-strong: rgba(15, 23, 44, 0.88);

    --white: #f7f9ff;
    --text: #d7deef;
    --muted: #8995ad;

    --cyan: #58dcff;
    --cyan-soft: rgba(88, 220, 255, 0.18);

    --blue: #637dff;
    --purple: #a66cff;
    --violet: #d46cff;

    --border: rgba(255, 255, 255, 0.09);
    --border-light: rgba(255, 255, 255, 0.14);
    --border-cyan: rgba(88, 220, 255, 0.32);

    --max-width: 1240px;

    --radius-xl: 32px;
    --radius-lg: 24px;
    --radius-md: 18px;
    --radius-sm: 12px;

    --shadow:
        0 30px 90px rgba(0, 0, 0, 0.42);
}


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

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

html {
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;

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

    color: var(--white);

    background:
        radial-gradient(
            circle at 10% 5%,
            rgba(74, 104, 255, 0.12),
            transparent 28%
        ),
        radial-gradient(
            circle at 90% 20%,
            rgba(169, 83, 255, 0.10),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            #02040b 0%,
            #030712 45%,
            #02040a 100%
        );

    overflow-x: hidden;
}

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

button {
    font: inherit;
}

::selection {
    background: rgba(88, 220, 255, 0.25);
    color: white;
}


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

.space-background {
    position: fixed;
    inset: 0;

    pointer-events: none;

    z-index: -10;

    overflow: hidden;
}

.star-field {
    position: absolute;
    inset: 0;

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

    background-size: 120px 120px;

    opacity: 0.12;
}

.star-field-two {
    background-size: 210px 210px;

    background-position:
        30px 80px;

    opacity: 0.07;
}

.background-glow {
    position: absolute;

    width: 520px;
    height: 520px;

    border-radius: 50%;

    filter: blur(100px);

    opacity: 0.09;
}

.glow-one {
    top: -250px;
    left: -180px;

    background: #437aff;
}

.glow-two {
    top: 25%;
    right: -260px;

    background: #a54cff;
}

.glow-three {
    bottom: -300px;
    left: 35%;

    background: #42d8ff;
}


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

.future-header {
    position: sticky;
    top: 0;

    z-index: 1000;

    padding: 13px 5%;

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

    background:
        rgba(2, 4, 11, 0.76);

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

.future-header-inner {
    width: min(var(--max-width), 100%);

    margin: auto;

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

    gap: 20px;
}


/* =========================================================
   BRAND
========================================================= */

.future-brand {
    display: flex;
    align-items: center;

    gap: 13px;
}

.brand-orbit {
    width: 48px;
    height: 48px;

    position: relative;

    display: grid;
    place-items: center;
}

.brand-ring {
    position: absolute;

    inset: 3px;

    border: 1px solid rgba(88, 220, 255, 0.35);

    border-radius: 50%;
}

.brand-ring-one {
    transform: rotate(30deg) scaleX(0.58);
}

.brand-ring-two {
    transform: rotate(-30deg) scaleX(0.58);

    border-color: rgba(166, 108, 255, 0.35);
}

.brand-monogram {
    width: 32px;
    height: 32px;

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

    gap: 0;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 35% 30%,
            #bdf5ff,
            #4bd7ff 25%,
            #5967ff 60%,
            #22134e 100%
        );

    box-shadow:
        0 0 22px rgba(88, 220, 255, 0.35);

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

    letter-spacing: -2px;
}

.brand-monogram span:first-child {
    transform: translateX(1px);
}

.brand-monogram span:last-child {
    transform: translateX(-1px);
}

.brand-text {
    display: flex;
    flex-direction: column;
}

.brand-text strong {
    font-size: 17px;

    letter-spacing: -0.4px;
}

.brand-text span {
    margin-top: 2px;

    color: var(--muted);

    font-size: 9px;

    letter-spacing: 1.7px;
    text-transform: uppercase;
}


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

.future-back-btn {
    display: inline-flex;
    align-items: center;

    gap: 8px;

    padding: 10px 15px;

    color: var(--text);

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

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

    border-radius: 12px;

    cursor: pointer;

    transition:
        .25s ease;
}

.future-back-btn:hover {
    color: white;

    border-color: var(--border-cyan);

    background:
        rgba(88, 220, 255, 0.07);

    transform: translateX(-3px);
}

.back-arrow {
    color: var(--cyan);

    font-size: 17px;
}


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

.future-main {
    width: min(var(--max-width), 91%);

    margin: auto;
}


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

.future-hero {
    min-height: calc(100vh - 75px);

    display: flex;
    align-items: center;

    padding: 90px 0 110px;
}

.hero-grid {
    width: 100%;

    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(420px, .95fr);

    align-items: center;

    gap: 55px;
}

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

.hero-eyebrow {
    display: inline-flex;
    align-items: center;

    gap: 9px;

    padding: 8px 13px;

    margin-bottom: 25px;

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

    border-radius: 999px;

    background:
        rgba(88, 220, 255, 0.055);

    color: var(--cyan);

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

    letter-spacing: 1.7px;
}

.eyebrow-dot {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: var(--cyan);

    box-shadow:
        0 0 13px var(--cyan);
}

.future-hero h1 {
    font-size:
        clamp(55px, 8vw, 94px);

    line-height: .92;

    letter-spacing: -5px;

    margin-bottom: 25px;
}

.gradient-text {
    display: inline-block;

    background:
        linear-gradient(
            115deg,
            #ffffff 10%,
            #8deaff 45%,
            #b278ff 85%
        );

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

    color: transparent;
}

.future-hero h2 {
    max-width: 620px;

    font-size:
        clamp(26px, 4vw, 44px);

    line-height: 1.13;

    letter-spacing: -1.8px;

    color: #e9edfa;

    margin-bottom: 28px;
}

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

    color: var(--text);

    font-size: 16px;

    line-height: 1.85;

    margin-bottom: 14px;
}

.hero-description.secondary {
    color: var(--muted);
}


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

.hero-actions {
    display: flex;
    align-items: center;

    gap: 12px;

    flex-wrap: wrap;

    margin-top: 30px;
}

.primary-action,
.secondary-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 47px;

    padding: 0 18px;

    border-radius: 12px;

    font-size: 13px;
    font-weight: 700;

    transition:
        .25s ease;
}

.primary-action {
    gap: 12px;

    color: #041018;

    background:
        linear-gradient(
            135deg,
            #8beaff,
            #62d7ff 45%,
            #a98aff
        );

    box-shadow:
        0 12px 35px rgba(88, 220, 255, 0.15);
}

.primary-action:hover {
    transform: translateY(-3px);

    box-shadow:
        0 18px 45px rgba(88, 220, 255, 0.23);
}

.secondary-action {
    color: var(--text);

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

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

.secondary-action:hover {
    border-color: var(--border-cyan);

    background:
        rgba(88, 220, 255, 0.06);

    transform: translateY(-3px);
}


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

.hero-meta {
    display: flex;
    align-items: center;

    gap: 14px;

    margin-top: 43px;
}

.meta-item {
    display: flex;
    flex-direction: column;

    gap: 4px;
}

.meta-item strong {
    color: var(--cyan);

    font-size: 10px;

    letter-spacing: 1px;
}

.meta-item span {
    color: var(--muted);

    font-size: 11px;

    text-transform: uppercase;
    letter-spacing: 1px;
}

.meta-line {
    width: 28px;
    height: 1px;

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


/* =========================================================
   HERO SPHERE AREA
========================================================= */

.hero-sphere-area {
    min-height: 600px;

    display: grid;
    place-items: center;

    position: relative;
}

.sphere-label {
    position: absolute;

    display: flex;
    align-items: center;

    gap: 8px;

    color: #72809c;

    font-size: 8px;

    letter-spacing: 1.7px;
    font-weight: 700;
}

.sphere-label span {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: var(--cyan);

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

.label-top {
    top: 5%;

    right: 5%;
}

.label-bottom {
    bottom: 7%;

    left: 8%;
}


/* =========================================================
   FUTURE SPHERE
========================================================= */

.future-sphere {
    width: min(470px, 82vw);
    aspect-ratio: 1;

    position: relative;

    display: grid;
    place-items: center;
}

.sphere-halo {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;
}

.halo-one {
    width: 75%;
    height: 75%;

    background:
        radial-gradient(
            circle,
            rgba(78, 218, 255, 0.20),
            rgba(86, 87, 255, 0.09) 45%,
            transparent 72%
        );

    filter: blur(30px);
}

.halo-two {
    width: 100%;
    height: 100%;

    background:
        radial-gradient(
            circle,
            transparent 47%,
            rgba(88, 220, 255, 0.055) 49%,
            transparent 61%
        );
}


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

.sphere-orbit {
    position: absolute;

    width: 100%;
    height: 37%;

    border:
        1px solid rgba(88, 220, 255, 0.24);

    border-radius: 50%;

    transform: rotate(-25deg);
}

.sphere-orbit i {
    position: absolute;

    width: 8px;
    height: 8px;

    right: 5%;
    top: 50%;

    border-radius: 50%;

    background: var(--cyan);

    box-shadow:
        0 0 18px var(--cyan);
}

.orbit-a {
    animation:
        sphereOrbitA 12s linear infinite;
}

.orbit-b {
    width: 112%;
    height: 48%;

    transform:
        rotate(58deg);

    border-color:
        rgba(166, 108, 255, 0.22);

    animation:
        sphereOrbitB 16s linear infinite;
}

.orbit-b i {
    background: var(--purple);

    box-shadow:
        0 0 18px var(--purple);
}

.orbit-c {
    width: 82%;
    height: 112%;

    transform:
        rotate(70deg);

    border-color:
        rgba(99, 125, 255, 0.20);

    animation:
        sphereOrbitC 18s linear infinite;
}

.orbit-c i {
    top: 8%;
    right: 50%;

    background: #9b8aff;

    box-shadow:
        0 0 18px #9b8aff;
}

@keyframes sphereOrbitA {
    from {
        transform: rotate(-25deg);
    }

    to {
        transform: rotate(335deg);
    }
}

@keyframes sphereOrbitB {
    from {
        transform: rotate(58deg);
    }

    to {
        transform: rotate(418deg);
    }
}

@keyframes sphereOrbitC {
    from {
        transform: rotate(70deg);
    }

    to {
        transform: rotate(430deg);
    }
}


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

.sphere-core {
    width: 61%;
    aspect-ratio: 1;

    position: relative;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 31% 23%,
            rgba(255,255,255,.95) 0 1%,
            rgba(116,236,255,.85) 4%,
            rgba(84,112,255,.82) 25%,
            rgba(54,31,115,.95) 58%,
            #070812 100%
        );

    border:
        1px solid rgba(142, 228, 255, 0.42);

    box-shadow:
        inset -35px -35px 70px rgba(0,0,0,.55),
        inset 15px 10px 45px rgba(255,255,255,.08),
        0 0 45px rgba(88,220,255,.27),
        0 0 120px rgba(103,88,255,.16);

    z-index: 4;
}

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

    opacity: .20;

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

    background-size: 22px 22px;

    mask-image:
        radial-gradient(circle, black 20%, transparent 72%);

    -webkit-mask-image:
        radial-gradient(circle, black 20%, transparent 72%);
}

.core-monogram {
    position: relative;

    display: flex;
    align-items: center;

    height: 105px;

    font-family:
        Arial,
        sans-serif;

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

    letter-spacing: -35px;

    text-shadow:
        0 0 20px rgba(255,255,255,.35),
        0 0 50px rgba(88,220,255,.25);

    transform:
        translateX(-10px);
}

.core-monogram .f-letter {
    z-index: 2;
}

.core-monogram .v-letter {
    color: rgba(189, 174, 255, .95);

    transform:
        translateX(4px);
}

.core-name {
    position: relative;

    margin-top: 5px;

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

    letter-spacing: 4px;

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


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

.future-section {
    padding: 120px 0;

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

.section-intro {
    max-width: 790px;

    margin-bottom: 55px;
}

.section-intro.centered {
    margin-left: auto;
    margin-right: auto;

    text-align: center;
}

.section-kicker {
    margin-bottom: 14px;

    color: var(--cyan);

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

    letter-spacing: 2.2px;
}

.section-intro h2 {
    font-size:
        clamp(36px, 5vw, 58px);

    line-height: 1.05;

    letter-spacing: -2.4px;
}

.section-intro h2 span,
.why-content h2 span,
.creator-content h2 span,
.book-content h2 span,
.sphere-section-content h2 span,
.final-vision h2 span {
    color: var(--cyan);
}

.section-intro p {
    max-width: 720px;

    margin-top: 18px;

    color: var(--muted);

    font-size: 15px;

    line-height: 1.8;
}


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

.about-content {
    display: grid;

    grid-template-columns:
        1.25fr
        .75fr;

    gap: 20px;
}

.about-large-card,
.about-mini-card {
    background:
        linear-gradient(
            145deg,
            rgba(16, 25, 47, .80),
            rgba(7, 11, 24, .72)
        );

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

    box-shadow: var(--shadow);
}

.about-large-card {
    position: relative;

    padding: 42px;

    border-radius: var(--radius-xl);

    overflow: hidden;
}

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

    position: absolute;

    width: 250px;
    height: 250px;

    top: -140px;
    right: -120px;

    border-radius: 50%;

    background:
        rgba(88,220,255,.08);

    filter: blur(20px);
}

.card-number {
    color: var(--cyan);

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

    letter-spacing: 2px;

    margin-bottom: 28px;
}

.about-large-card h3 {
    font-size: 31px;

    letter-spacing: -1px;

    margin-bottom: 20px;
}

.about-large-card p {
    max-width: 760px;

    color: var(--text);

    font-size: 15px;

    line-height: 1.85;

    margin-bottom: 15px;
}

.about-side-stack {
    display: flex;
    flex-direction: column;

    gap: 14px;
}

.about-mini-card {
    flex: 1;

    padding: 25px;

    border-radius: var(--radius-md);
}

.mini-icon {
    display: block;

    color: var(--cyan);

    font-size: 21px;

    margin-bottom: 15px;
}

.about-mini-card h3 {
    font-size: 18px;

    margin-bottom: 8px;
}

.about-mini-card p {
    color: var(--muted);

    font-size: 13px;

    line-height: 1.65;
}


/* =========================================================
   LEARNING CYCLE
========================================================= */

.learning-cycle {
    position: relative;

    display: grid;

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

    gap: 14px;
}

.cycle-line {
    position: absolute;

    top: 76px;
    left: 9%;
    right: 9%;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(88,220,255,.35),
            rgba(166,108,255,.35),
            transparent
        );

    z-index: 0;
}

.cycle-card {
    position: relative;

    z-index: 1;

    padding: 28px 21px;

    min-height: 260px;

    background:
        rgba(9, 15, 29, .86);

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

    border-radius: var(--radius-md);

    transition:
        .3s ease;
}

.cycle-card:hover {
    transform: translateY(-8px);

    border-color:
        var(--border-cyan);

    box-shadow:
        0 20px 55px rgba(0,0,0,.3);
}

.cycle-number {
    color: #65728b;

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

    letter-spacing: 1px;

    margin-bottom: 25px;
}

.cycle-symbol {
    width: 48px;
    height: 48px;

    display: grid;
    place-items: center;

    margin-bottom: 22px;

    border-radius: 14px;

    color: var(--cyan);

    background:
        rgba(88,220,255,.07);

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

    font-size: 18px;
    font-weight: 900;
}

.cycle-card h3 {
    font-size: 19px;

    margin-bottom: 10px;
}

.cycle-card p {
    color: var(--muted);

    font-size: 13px;

    line-height: 1.65;
}


/* =========================================================
   ECOSYSTEM
========================================================= */

.ecosystem-layout {
    min-height: 720px;

    display: grid;

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

    grid-template-rows:
        1fr 1fr;

    gap: 18px;

    position: relative;
}

.ecosystem-center {
    position: absolute;

    width: 290px;
    height: 290px;

    top: 50%;
    left: 50%;

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

    display: grid;
    place-items: center;
}

.ecosystem-ring {
    position: absolute;

    border-radius: 50%;

    border:
        1px solid rgba(88,220,255,.16);
}

.ring-one {
    width: 100%;
    height: 100%;
}

.ring-two {
    width: 78%;
    height: 78%;

    border-color:
        rgba(166,108,255,.18);
}

.ring-three {
    width: 54%;
    height: 54%;

    border-color:
        rgba(88,220,255,.25);
}

.ecosystem-core {
    width: 145px;
    height: 145px;

    display: flex;
    flex-direction: column;

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

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 35% 25%,
            #8fefff,
            #4d75ff 34%,
            #28155a 70%,
            #070914 100%
        );

    box-shadow:
        0 0 60px rgba(88,220,255,.23);

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

    z-index: 3;
}

.ecosystem-core span {
    font-size: 43px;

    font-weight: 950;

    letter-spacing: -7px;
}

.ecosystem-core small {
    margin-top: 5px;

    font-size: 7px;

    letter-spacing: 2px;

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

.ecosystem-card {
    padding: 27px;

    background:
        linear-gradient(
            145deg,
            rgba(16,24,45,.82),
            rgba(7,11,23,.78)
        );

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

    border-radius: var(--radius-lg);

    transition:
        .3s ease;
}

.ecosystem-card:hover {
    transform: translateY(-5px);

    border-color:
        var(--border-cyan);
}

.ecosystem-card-one {
    grid-column: 1;
    grid-row: 1;
}

.ecosystem-card-two {
    grid-column: 3;
    grid-row: 1;
}

.ecosystem-card-three {
    grid-column: 1;
    grid-row: 2;
}

.ecosystem-card-four {
    grid-column: 3;
    grid-row: 2;
}

.ecosystem-index {
    float: right;

    color: #5f6d86;

    font-size: 9px;
}

.ecosystem-icon {
    width: 45px;
    height: 45px;

    display: grid;
    place-items: center;

    margin-bottom: 20px;

    border-radius: 13px;

    color: var(--cyan);

    background:
        rgba(88,220,255,.07);

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

    font-size: 15px;
    font-weight: 900;
}

.ecosystem-card h3 {
    font-size: 20px;

    margin-bottom: 9px;
}

.ecosystem-card p {
    color: var(--muted);

    font-size: 13px;

    line-height: 1.7;
}

.ecosystem-tags {
    display: flex;

    gap: 6px;

    flex-wrap: wrap;

    margin-top: 18px;
}

.ecosystem-tags span {
    padding: 5px 8px;

    color: #91a0b9;

    font-size: 8px;

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

    border-radius: 999px;

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


/* =========================================================
   CENTER GRID
========================================================= */

.center-grid {
    display: grid;

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

    gap: 15px;
}

.center-card {
    min-height: 275px;

    padding: 25px;

    display: flex;
    flex-direction: column;

    background:
        linear-gradient(
            145deg,
            rgba(15,23,43,.78),
            rgba(7,11,23,.78)
        );

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

    border-radius: var(--radius-md);

    transition:
        .3s ease;
}

.center-card:hover {
    transform: translateY(-7px);

    border-color:
        var(--border-cyan);

    box-shadow:
        0 22px 55px rgba(0,0,0,.3);
}

.center-top {
    display: flex;

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

    margin-bottom: 35px;
}

.center-top > span {
    color: #5f6b82;

    font-size: 9px;
}

.center-symbol {
    width: 43px;
    height: 43px;

    display: grid;
    place-items: center;

    border-radius: 12px;

    color: var(--cyan);

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

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

    font-weight: 850;
}

.center-card h3 {
    font-size: 19px;

    margin-bottom: 9px;
}

.center-card p {
    color: var(--muted);

    font-size: 13px;

    line-height: 1.65;
}

.center-footer {
    margin-top: auto;
    padding-top: 22px;

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

    color: #71809a;

    font-size: 9px;

    text-transform: uppercase;

    letter-spacing: 1px;
}


/* =========================================================
   WHY FUTUREVERSE
========================================================= */

.why-grid {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 80px;

    align-items: center;
}

.why-content h2 {
    max-width: 600px;

    font-size:
        clamp(38px, 5vw, 61px);

    line-height: 1.02;

    letter-spacing: -2.5px;

    margin-bottom: 25px;
}

.why-content p {
    max-width: 600px;

    color: var(--muted);

    font-size: 15px;

    line-height: 1.85;

    margin-bottom: 15px;
}

.why-points {
    display: flex;
    flex-direction: column;

    gap: 10px;
}

.why-point {
    display: grid;

    grid-template-columns: 45px 1fr;

    gap: 15px;

    padding: 21px;

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

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

    border-radius: 16px;

    transition:
        .25s ease;
}

.why-point:hover {
    border-color:
        var(--border-cyan);

    background:
        rgba(88,220,255,.035);
}

.why-point > span {
    color: var(--cyan);

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

.why-point h3 {
    font-size: 16px;

    margin-bottom: 5px;
}

.why-point p {
    color: var(--muted);

    font-size: 12px;

    line-height: 1.55;
}


/* =========================================================
   STUDENT JOURNEY
========================================================= */

.journey-timeline {
    max-width: 900px;

    margin: auto;

    position: relative;
}

.journey-track {
    position: absolute;

    left: 50%;

    top: 0;
    bottom: 0;

    width: 1px;

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(88,220,255,.35),
            rgba(166,108,255,.35),
            transparent
        );

    transform:
        translateX(-50%);
}

.journey-step {
    width: 50%;

    display: flex;

    align-items: center;

    position: relative;

    padding: 20px 45px 45px 0;
}

.journey-step.reverse {
    margin-left: 50%;

    padding:
        20px 0 45px 45px;
}

.journey-node {
    position: absolute;

    right: -18px;

    width: 36px;
    height: 36px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    color: var(--cyan);

    background:
        #050a15;

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

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

    box-shadow:
        0 0 25px rgba(88,220,255,.10);

    z-index: 3;
}

.reverse .journey-node {
    left: -18px;
    right: auto;
}

.journey-content {
    width: 100%;

    padding: 25px;

    background:
        linear-gradient(
            145deg,
            rgba(14,22,42,.82),
            rgba(7,11,23,.75)
        );

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

    border-radius: 18px;
}

.journey-content > span {
    color: var(--cyan);

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

    letter-spacing: 1.7px;
}

.journey-content h3 {
    font-size: 20px;

    margin:
        9px 0 8px;
}

.journey-content p {
    color: var(--muted);

    font-size: 13px;

    line-height: 1.65;
}


/* =========================================================
   TECHNOLOGY
========================================================= */

.technology-grid {
    display: grid;

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

    gap: 15px;
}

.technology-card {
    min-height: 270px;

    padding: 27px;

    position: relative;

    background:
        rgba(10,16,31,.82);

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

    border-radius: var(--radius-md);

    overflow: hidden;

    transition:
        .3s ease;
}

.technology-card:hover {
    transform: translateY(-7px);

    border-color:
        var(--border-cyan);
}

.tech-number {
    position: absolute;

    top: 20px;
    right: 22px;

    color: #5b6880;

    font-size: 9px;
}

.tech-symbol {
    width: 55px;
    height: 55px;

    display: grid;
    place-items: center;

    margin-bottom: 35px;

    color: var(--cyan);

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

    border-radius: 15px;

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

    font-size: 14px;
    font-weight: 900;
}

.technology-card h3 {
    font-size: 19px;

    margin-bottom: 10px;
}

.technology-card p {
    color: var(--muted);

    font-size: 13px;

    line-height: 1.7;
}


/* =========================================================
   CREATOR
========================================================= */

.creator-layout {
    display: grid;

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

    gap: 90px;

    align-items: center;
}

.creator-visual {
    min-height: 470px;

    display: grid;
    place-items: center;

    position: relative;
}

.creator-circle {
    width: 250px;
    height: 250px;

    display: flex;
    flex-direction: column;

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

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 32% 25%,
            #baf5ff,
            #5adfff 18%,
            #576dff 46%,
            #24134f 72%,
            #070912 100%
        );

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

    box-shadow:
        0 0 70px rgba(88,220,255,.20),
        inset -25px -25px 55px rgba(0,0,0,.5);

    position: relative;

    z-index: 3;
}

.creator-monogram {
    font-size: 105px;

    line-height: .8;

    font-weight: 950;

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

.creator-circle span {
    margin-top: 18px;

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

    letter-spacing: 5px;

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

.creator-orbit {
    position: absolute;

    width: 400px;
    height: 150px;

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

    border-radius: 50%;

    transform:
        rotate(-35deg);
}

.orbit-creator-one {
    animation:
        creatorOrbitOne 14s linear infinite;
}

.orbit-creator-two {
    width: 440px;
    height: 200px;

    transform:
        rotate(42deg);

    border-color:
        rgba(166,108,255,.18);

    animation:
        creatorOrbitTwo 18s linear infinite;
}

@keyframes creatorOrbitOne {
    from {
        transform: rotate(-35deg);
    }

    to {
        transform: rotate(325deg);
    }
}

@keyframes creatorOrbitTwo {
    from {
        transform: rotate(42deg);
    }

    to {
        transform: rotate(402deg);
    }
}

.creator-content h2 {
    font-size:
        clamp(42px, 5vw, 65px);

    line-height: 1;

    letter-spacing: -3px;

    margin-bottom: 16px;
}

.creator-role {
    display: inline-block;

    padding: 8px 12px;

    margin-bottom: 25px;

    color: var(--cyan);

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

    letter-spacing: 1px;

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

    border-radius: 999px;

    background:
        rgba(88,220,255,.05);
}

.creator-content > p {
    max-width: 680px;

    color: var(--muted);

    font-size: 15px;

    line-height: 1.8;

    margin-bottom: 14px;
}

.creator-roles {
    display: grid;

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

    gap: 10px;

    margin-top: 28px;
}

.creator-roles > div {
    padding: 17px;

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

    border-radius: 14px;

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

.creator-roles strong {
    display: block;

    color: var(--white);

    font-size: 13px;

    margin-bottom: 5px;
}

.creator-roles span {
    color: var(--muted);

    font-size: 10px;

    line-height: 1.4;
}


/* =========================================================
   BOOK SECTION
========================================================= */

.book-section {
    position: relative;

    overflow: hidden;
}

.book-glow {
    position: absolute;

    width: 600px;
    height: 600px;

    left: -250px;
    top: 10%;

    border-radius: 50%;

    background:
        rgba(91,102,255,.08);

    filter: blur(100px);

    pointer-events: none;
}

.book-layout {
    display: grid;

    grid-template-columns:
        .75fr 1.25fr;

    gap: 90px;

    align-items: center;
}

.book-visual {
    min-height: 540px;

    display: grid;
    place-items: center;

    position: relative;
}

.book-shadow {
    position: absolute;

    width: 250px;
    height: 40px;

    bottom: 58px;

    border-radius: 50%;

    background:
        rgba(0,0,0,.65);

    filter: blur(20px);
}

.book-cover {
    width: 285px;
    height: 420px;

    position: relative;

    display: flex;
    flex-direction: column;

    padding: 32px 25px;

    background:
        linear-gradient(
            145deg,
            #111936,
            #090d1d 52%,
            #17103a
        );

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

    box-shadow:
        25px 35px 70px rgba(0,0,0,.55),
        -10px 0 30px rgba(86,113,255,.08);

    overflow: hidden;

    transform:
        rotate(-3deg);

    transition:
        .4s ease;
}

.book-cover:hover {
    transform:
        rotate(0deg)
        translateY(-8px);
}

.book-cover::before {
    content: "";

    position: absolute;

    width: 230px;
    height: 230px;

    right: -90px;
    top: 50px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(88,220,255,.28),
            rgba(91,87,255,.12) 45%,
            transparent 70%
        );

    filter: blur(5px);
}

.book-cover::after {
    content: "";

    position: absolute;

    inset: 14px;

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

    pointer-events: none;
}

.book-top {
    position: relative;

    color: var(--cyan);

    font-size: 7px;
    font-weight: 850;

    letter-spacing: 2px;
}

.book-title {
    position: relative;

    margin-top: 95px;

    font-size: 36px;

    line-height: .85;

    letter-spacing: -1.5px;

    color: white;
}

.book-title strong {
    display: block;

    color: var(--cyan);

    font-size: 43px;
}

.book-subtitle {
    position: relative;

    margin-top: 20px;

    color: #aeb8ce;

    font-size: 9px;

    line-height: 1.6;
}

.book-divider {
    width: 45px;
    height: 1px;

    margin-top: auto;

    background:
        var(--cyan);
}

.book-author {
    position: relative;

    margin-top: 13px;

    color: white;

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

    letter-spacing: 2px;
}

.book-label {
    display: inline-block;

    padding: 7px 10px;

    margin-bottom: 15px;

    color: var(--purple);

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

    letter-spacing: 1.7px;

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

    border-radius: 999px;
}

.book-content h2 {
    font-size:
        clamp(42px, 6vw, 72px);

    line-height: .9;

    letter-spacing: -3px;

    margin-bottom: 12px;
}

.book-content h3 {
    color: #b8c2d8;

    font-size: 17px;
    font-weight: 500;

    margin-bottom: 25px;
}

.book-content > p {
    max-width: 700px;

    color: var(--muted);

    font-size: 14px;

    line-height: 1.8;

    margin-bottom: 14px;
}

.book-content blockquote {
    max-width: 650px;

    padding:
        20px 22px;

    margin: 22px 0;

    color: #dce5f7;

    font-size: 17px;

    line-height: 1.6;

    border-left:
        2px solid var(--cyan);

    background:
        rgba(88,220,255,.035);
}

.book-topics {
    display: flex;

    flex-wrap: wrap;

    gap: 7px;

    margin-top: 25px;
}

.book-topics span {
    padding: 7px 10px;

    color: #8794ad;

    font-size: 9px;

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

    border-radius: 999px;

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


/* =========================================================
   LEARNER
========================================================= */

.learner-card {
    position: relative;

    display: grid;

    grid-template-columns:
        50px 1fr 230px;

    gap: 30px;

    align-items: center;

    padding: 48px;

    overflow: hidden;

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

    border-radius: var(--radius-xl);

    background:
        radial-gradient(
            circle at 90% 30%,
            rgba(166,108,255,.10),
            transparent 35%
        ),
        linear-gradient(
            145deg,
            rgba(15,23,44,.85),
            rgba(6,10,21,.8)
        );

    box-shadow: var(--shadow);
}

.learner-number {
    align-self: start;

    color: var(--cyan);

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

    letter-spacing: 1px;
}

.learner-content h2 {
    font-size:
        clamp(34px, 5vw, 57px);

    line-height: 1;

    letter-spacing: -2.5px;

    margin-bottom: 22px;
}

.learner-content h2 span {
    color: var(--cyan);
}

.learner-content p {
    max-width: 720px;

    color: var(--muted);

    font-size: 14px;

    line-height: 1.8;

    margin-bottom: 12px;
}

.learner-statement {
    display: flex;
    flex-direction: column;

    gap: 9px;

    padding-left: 25px;

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

.learner-statement span {
    color: #8b99b2;

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

    letter-spacing: 2px;
}


/* =========================================================
   FUTURE JOURNEY
========================================================= */

.future-journey {
    max-width: 920px;

    margin: auto;

    position: relative;

    display: flex;
    flex-direction: column;

    gap: 18px;
}

.future-milestone {
    display: grid;

    grid-template-columns:
        70px 1fr;

    gap: 20px;

    padding: 25px;

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

    border-radius: 18px;

    background:
        rgba(10,16,31,.78);

    transition:
        .3s ease;
}

.future-milestone:hover {
    transform: translateX(6px);

    border-color:
        var(--border-cyan);
}

.milestone-marker {
    width: 52px;
    height: 52px;

    display: grid;
    place-items: center;

    border-radius: 15px;

    color: var(--cyan);

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

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

    font-size: 11px;
    font-weight: 900;
}

.milestone-body > span {
    color: var(--cyan);

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

    letter-spacing: 1.7px;
}

.milestone-body h3 {
    font-size: 20px;

    margin:
        8px 0 7px;
}

.milestone-body p {
    color: var(--muted);

    font-size: 13px;

    line-height: 1.65;
}


/* =========================================================
   ROADMAP
========================================================= */

.roadmap-grid {
    display: grid;

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

    gap: 15px;
}

.roadmap-card {
    min-height: 230px;

    padding: 28px;

    position: relative;

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

    border-radius: var(--radius-md);

    background:
        linear-gradient(
            145deg,
            rgba(15,23,44,.78),
            rgba(7,11,23,.75)
        );

    transition:
        .3s ease;
}

.roadmap-card:hover {
    transform: translateY(-7px);

    border-color:
        var(--border-cyan);
}

.roadmap-index {
    display: block;

    color: var(--cyan);

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

    letter-spacing: 1.5px;

    margin-bottom: 35px;
}

.roadmap-card h3 {
    font-size: 19px;

    margin-bottom: 9px;
}

.roadmap-card p {
    color: var(--muted);

    font-size: 13px;

    line-height: 1.7;
}


/* =========================================================
   FUTURESPHERE SECTION
========================================================= */

.sphere-section {
    text-align: center;

    overflow: hidden;
}

.sphere-section-content {
    max-width: 700px;

    margin:
        0 auto 40px;
}

.centered-kicker {
    text-align: center;
}

.sphere-section-content h2 {
    font-size:
        clamp(39px, 6vw, 68px);

    line-height: 1;

    letter-spacing: -3px;
}

.sphere-section-content p {
    color: var(--muted);

    font-size: 14px;

    line-height: 1.8;

    margin-top: 20px;
}


/* =========================================================
   MEGA SPHERE
========================================================= */

.mega-sphere {
    width: min(650px, 90vw);
    aspect-ratio: 1;

    margin: auto;

    position: relative;

    display: grid;
    place-items: center;
}

.mega-ring {
    position: absolute;

    border-radius: 50%;

    border:
        1px solid rgba(88,220,255,.16);
}

.mega-ring-one {
    width: 100%;
    height: 42%;

    transform: rotate(-25deg);

    animation:
        megaOrbitOne 15s linear infinite;
}

.mega-ring-two {
    width: 82%;
    height: 55%;

    transform: rotate(55deg);

    border-color:
        rgba(166,108,255,.17);

    animation:
        megaOrbitTwo 18s linear infinite;
}

.mega-ring-three {
    width: 55%;
    height: 100%;

    transform: rotate(65deg);

    border-color:
        rgba(99,125,255,.17);

    animation:
        megaOrbitThree 20s linear infinite;
}

@keyframes megaOrbitOne {
    from {
        transform: rotate(-25deg);
    }

    to {
        transform: rotate(335deg);
    }
}

@keyframes megaOrbitTwo {
    from {
        transform: rotate(55deg);
    }

    to {
        transform: rotate(415deg);
    }
}

@keyframes megaOrbitThree {
    from {
        transform: rotate(65deg);
    }

    to {
        transform: rotate(425deg);
    }
}

.mega-core {
    width: 270px;
    height: 270px;

    display: flex;
    flex-direction: column;

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

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 32% 25%,
            #d1f9ff,
            #67e1ff 14%,
            #5c73ff 37%,
            #2b165e 68%,
            #060812 100%
        );

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

    box-shadow:
        0 0 80px rgba(88,220,255,.25),
        inset -30px -30px 70px rgba(0,0,0,.52);

    position: relative;

    z-index: 4;
}

.mega-monogram {
    font-size: 82px;

    font-weight: 950;

    line-height: .8;

    letter-spacing: -12px;

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

.mega-monogram span {
    color: #c1b0ff;
}

.mega-core strong {
    margin-top: 24px;

    font-size: 10px;

    letter-spacing: 4px;
}

.mega-core small {
    margin-top: 9px;

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

    font-size: 6px;

    letter-spacing: 1.5px;
}

.sphere-node {
    position: absolute;

    padding: 9px 13px;

    color: var(--cyan);

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

    letter-spacing: 1.5px;

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

    border-radius: 999px;

    background:
        rgba(5,9,18,.85);

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

    z-index: 5;
}

.node-top {
    top: 7%;
    left: 50%;

    transform: translateX(-50%);
}

.node-right {
    right: 2%;
    top: 50%;

    transform: translateY(-50%);
}

.node-bottom {
    bottom: 7%;
    left: 50%;

    transform: translateX(-50%);
}

.node-left {
    left: 2%;
    top: 50%;

    transform: translateY(-50%);
}


/* =========================================================
   FINAL VISION
========================================================= */

.final-vision-section {
    padding-bottom: 135px;
}

.final-vision {
    max-width: 900px;

    margin: auto;

    text-align: center;
}

.final-symbol {
    width: 76px;
    height: 76px;

    display: grid;
    place-items: center;

    margin:
        0 auto 28px;

    border-radius: 50%;

    color: white;

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

    letter-spacing: -4px;

    background:
        radial-gradient(
            circle at 35% 25%,
            #baf6ff,
            #59dcff 24%,
            #5c6fff 55%,
            #25144d 100%
        );

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

    box-shadow:
        0 0 50px rgba(88,220,255,.18);
}

.final-vision h2 {
    max-width: 850px;

    margin:
        0 auto 22px;

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

    line-height: 1;

    letter-spacing: -3px;
}

.final-vision > p {
    max-width: 700px;

    margin:
        0 auto 13px;

    color: var(--muted);

    font-size: 15px;

    line-height: 1.8;
}

.final-words {
    display: flex;

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

    gap: 12px;

    margin-top: 35px;
}

.final-words span {
    color: #aeb9cf;

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

    letter-spacing: 1.7px;
}

.final-words i {
    color: var(--cyan);

    font-style: normal;

    font-size: 8px;
}


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

.future-footer {
    padding:
        38px 5% 25px;

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

    background:
        rgba(2,4,10,.7);
}

.footer-main,
.footer-bottom {
    width: min(var(--max-width), 100%);

    margin: auto;
}

.footer-main {
    display: flex;

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

    gap: 30px;
}

.footer-brand {
    display: flex;

    align-items: center;

    gap: 11px;
}

.footer-monogram {
    width: 40px;
    height: 40px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    color: white;

    background:
        radial-gradient(
            circle,
            #68ddff,
            #576eff 50%,
            #291653
        );

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

    letter-spacing: -2px;
}

.footer-brand strong,
.footer-brand span {
    display: block;
}

.footer-brand strong {
    font-size: 14px;
}

.footer-brand span {
    color: var(--muted);

    font-size: 8px;

    letter-spacing: 1.3px;

    margin-top: 2px;
}

.footer-tagline {
    color: #7d8aa2;

    font-size: 10px;

    letter-spacing: .7px;

    text-align: right;
}

.footer-divider {
    width: min(var(--max-width), 100%);

    height: 1px;

    margin:
        27px auto 20px;

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

.footer-bottom {
    display: flex;

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

    gap: 15px;

    color: #5f6b82;

    font-size: 9px;
}


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

@media (max-width: 1050px) {

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

        gap: 30px;
    }

    .hero-content {
        max-width: 800px;

        margin: auto;

        text-align: center;
    }

    .hero-description {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-actions,
    .hero-meta {
        justify-content: center;
    }

    .hero-sphere-area {
        min-height: 520px;
    }

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

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

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

    .creator-layout {
        grid-template-columns: 1fr;

        gap: 30px;
    }

    .creator-visual {
        min-height: 390px;
    }

    .creator-content {
        text-align: center;
    }

    .creator-content > p {
        margin-left: auto;
        margin-right: auto;
    }

    .creator-roles {
        text-align: left;
    }

    .book-layout {
        grid-template-columns: 1fr;

        gap: 30px;
    }

    .book-content {
        text-align: center;
    }

    .book-content > p,
    .book-content blockquote {
        margin-left: auto;
        margin-right: auto;
        text-align: left;
    }

    .book-topics {
        justify-content: center;
    }

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

}


/* =========================================================
   TABLET — ECOSYSTEM
========================================================= */

@media (max-width: 850px) {

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

    .cycle-line {
        display: none;
    }

    .ecosystem-layout {
        min-height: auto;

        display: grid;

        grid-template-columns:
            1fr 1fr;

        grid-template-rows:
            auto;

        gap: 15px;
    }

    .ecosystem-center {
        position: relative;

        width: 230px;
        height: 230px;

        top: auto;
        left: auto;

        transform: none;

        grid-column:
            1 / -1;

        grid-row: auto;

        margin: 10px auto 20px;

        order: -1;
    }

    .ecosystem-card-one,
    .ecosystem-card-two,
    .ecosystem-card-three,
    .ecosystem-card-four {
        grid-column: auto;
        grid-row: auto;
    }

    .ecosystem-core {
        width: 115px;
        height: 115px;
    }

    .ecosystem-core span {
        font-size: 33px;
    }

}


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

@media (max-width: 600px) {

    .future-header {
        padding:
            10px 4%;
    }

    .future-main {
        width: 91%;
    }

    .brand-orbit {
        width: 42px;
        height: 42px;
    }

    .brand-monogram {
        width: 29px;
        height: 29px;

        font-size: 9px;
    }

    .brand-text strong {
        font-size: 15px;
    }

    .brand-text span {
        font-size: 7px;

        letter-spacing: 1.2px;
    }

    .future-back-btn {
        padding: 9px 11px;

        font-size: 11px;
    }

    .future-back-btn span:last-child {
        display: none;
    }


    /* HERO */

    .future-hero {
        min-height: auto;

        padding:
            65px 0 75px;
    }

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

        letter-spacing: 1.2px;
    }

    .future-hero h1 {
        font-size: 54px;

        letter-spacing: -3.5px;
    }

    .future-hero h2 {
        font-size: 28px;

        letter-spacing: -1px;
    }

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

        line-height: 1.75;
    }

    .hero-actions {
        flex-direction: column;

        width: 100%;
    }

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

    .hero-meta {
        gap: 9px;

        margin-top: 32px;
    }

    .meta-line {
        width: 13px;
    }

    .meta-item span {
        font-size: 8px;
    }

    .hero-sphere-area {
        min-height: 350px;
    }

    .future-sphere {
        width: 320px;
    }

    .core-monogram {
        font-size: 70px;

        height: 75px;

        letter-spacing: -24px;
    }

    .core-name {
        font-size: 6px;

        letter-spacing: 2.5px;
    }

    .sphere-label {
        display: none;
    }


    /* SECTIONS */

    .future-section {
        padding:
            78px 0;
    }

    .section-intro {
        margin-bottom: 35px;
    }

    .section-kicker {
        font-size: 8px;

        letter-spacing: 1.6px;
    }

    .section-intro h2 {
        font-size: 34px;

        letter-spacing: -1.5px;
    }

    .section-intro p {
        font-size: 13px;
    }


    /* ABOUT */

    .about-large-card {
        padding: 25px;
    }

    .about-large-card h3 {
        font-size: 25px;
    }

    .about-large-card p {
        font-size: 13px;
    }

    .about-mini-card {
        padding: 21px;
    }


    /* CYCLE */

    .learning-cycle {
        grid-template-columns: 1fr;
    }

    .cycle-card {
        min-height: auto;

        padding: 23px;
    }


    /* ECOSYSTEM */

    .ecosystem-layout {
        grid-template-columns: 1fr;
    }

    .ecosystem-center {
        grid-column: 1;

        width: 220px;
        height: 220px;
    }

    .ecosystem-card {
        padding: 23px;
    }


    /* CENTERS */

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

    .center-card {
        min-height: 245px;
    }


    /* WHY */

    .why-grid {
        grid-template-columns: 1fr;

        gap: 35px;
    }

    .why-content {
        text-align: center;
    }

    .why-content h2 {
        font-size: 38px;
    }

    .why-content p {
        font-size: 13px;
    }


    /* JOURNEY */

    .journey-track {
        left: 18px;

        transform: none;
    }

    .journey-step,
    .journey-step.reverse {
        width: 100%;

        margin-left: 0;

        padding:
            10px 0 25px 50px;
    }

    .journey-node,
    .reverse .journey-node {
        left: 0;
        right: auto;
    }

    .journey-content {
        padding: 21px;
    }

    .journey-content h3 {
        font-size: 17px;
    }


    /* TECHNOLOGY */

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

    .technology-card {
        min-height: auto;
    }


    /* CREATOR */

    .creator-visual {
        min-height: 330px;
    }

    .creator-circle {
        width: 190px;
        height: 190px;
    }

    .creator-monogram {
        font-size: 78px;
    }

    .creator-circle span {
        font-size: 7px;
    }

    .creator-orbit {
        width: 300px;
        height: 115px;
    }

    .orbit-creator-two {
        width: 320px;
        height: 145px;
    }

    .creator-content h2 {
        font-size: 44px;
    }

    .creator-role {
        font-size: 8px;
    }

    .creator-content > p {
        font-size: 13px;
        text-align: left;
    }

    .creator-roles {
        grid-template-columns: 1fr;
    }


    /* BOOK */

    .book-visual {
        min-height: 470px;
    }

    .book-cover {
        width: 250px;
        height: 370px;
    }

    .book-title {
        margin-top: 75px;

        font-size: 31px;
    }

    .book-title strong {
        font-size: 37px;
    }

    .book-content h2 {
        font-size: 47px;
    }

    .book-content h3 {
        font-size: 15px;
    }

    .book-content > p {
        font-size: 13px;

        text-align: left;
    }

    .book-content blockquote {
        font-size: 15px;

        text-align: left;
    }


    /* LEARNER */

    .learner-card {
        grid-template-columns: 1fr;

        padding: 27px;

        gap: 20px;
    }

    .learner-content h2 {
        font-size: 35px;
    }

    .learner-statement {
        border-left: 0;

        border-top:
            1px solid rgba(88,220,255,.2);

        padding:
            20px 0 0;

        flex-direction: row;

        flex-wrap: wrap;
    }


    /* FUTURE JOURNEY */

    .future-milestone {
        grid-template-columns: 48px 1fr;

        gap: 15px;

        padding: 20px;
    }

    .milestone-marker {
        width: 43px;
        height: 43px;
    }

    .milestone-body h3 {
        font-size: 17px;
    }

    .milestone-body p {
        font-size: 12px;
    }


    /* ROADMAP */

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

    .roadmap-card {
        min-height: auto;

        padding: 24px;
    }


    /* MEGA SPHERE */

    .mega-sphere {
        width: 340px;
    }

    .mega-core {
        width: 170px;
        height: 170px;
    }

    .mega-monogram {
        font-size: 53px;

        letter-spacing: -7px;
    }

    .mega-core strong {
        margin-top: 16px;

        font-size: 7px;

        letter-spacing: 2.5px;
    }

    .mega-core small {
        font-size: 4px;
    }

    .sphere-node {
        padding: 7px 9px;

        font-size: 6px;
    }

    .node-right {
        right: -2%;
    }

    .node-left {
        left: -2%;
    }


    /* FINAL */

    .final-vision-section {
        padding-bottom: 90px;
    }

    .final-vision h2 {
        font-size: 39px;

        letter-spacing: -1.8px;
    }

    .final-vision > p {
        font-size: 13px;
    }

    .final-words {
        gap: 7px;
    }

    .final-words span {
        font-size: 7px;

        letter-spacing: 1px;
    }


    /* FOOTER */

    .footer-main {
        flex-direction: column;

        align-items: flex-start;
    }

    .footer-tagline {
        text-align: left;

        line-height: 1.6;
    }

    .footer-bottom {
        flex-direction: column;

        align-items: flex-start;

        line-height: 1.5;
    }

}


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

@media (max-width: 380px) {

    .future-hero h1 {
        font-size: 48px;
    }

    .future-hero h2 {
        font-size: 25px;
    }

    .future-sphere {
        width: 285px;
    }

    .hero-sphere-area {
        min-height: 310px;
    }

    .mega-sphere {
        width: 300px;
    }

    .mega-core {
        width: 145px;
        height: 145px;
    }

    .mega-monogram {
        font-size: 45px;
    }

    .node-right {
        right: -5%;
    }

    .node-left {
        left: -5%;
    }

    .book-cover {
        width: 230px;
        height: 345px;
    }

}










/* =========================================================
   JAVASCRIPT REVEAL
========================================================= */

.fv-reveal {
    opacity: 0;
    transform: translateY(28px);

    transition:
        opacity .7s ease,
        transform .7s ease;
}

.fv-reveal.fv-visible {
    opacity: 1;
    transform: translateY(0);
}


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

.future-scroll-progress {
    position: fixed;

    top: 0;
    left: 0;

    width: 100%;
    height: 2px;

    z-index: 2000;

    pointer-events: none;

    background: transparent;
}

.future-scroll-progress span {
    display: block;

    width: 0;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            var(--cyan),
            var(--blue),
            var(--purple)
        );

    box-shadow:
        0 0 10px rgba(88,220,255,.55);
}







/* =========================================================
   FUTUREVERSE — STABLE STICKY HEADER
   Scroll पर header stable रहेगा
========================================================= */

.future-header {
    position: sticky !important;
    top: 0 !important;

    z-index: 10000 !important;

    transform: translate3d(0, 0, 0) !important;
    animation: none !important;

    opacity: 1 !important;
    visibility: visible !important;

    will-change: auto;

    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;

    isolation: isolate;

    /* Stable glass background */
    background: rgba(2, 4, 11, 0.90) !important;

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

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

    /* Smooth line के लिए जगह */
    overflow: visible;
}


/* =========================================================
   HEADER — ANIMATED ENERGY LINE
========================================================= */

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

    position: absolute;

    left: -35%;
    bottom: -1px;

    width: 35%;
    height: 2px;

    background: linear-gradient(
        90deg,
        transparent,
        #58dcff,
        #a66cff,
        transparent
    );

    box-shadow:
        0 0 8px rgba(88, 220, 255, 0.45),
        0 0 18px rgba(166, 108, 255, 0.25);

    pointer-events: none;

    animation:
        futureHeaderEnergyLine
        4.5s linear infinite;
}


/* =========================================================
   HEADER INNER — STABLE
========================================================= */

.future-header-inner {
    transform: translate3d(0, 0, 0) !important;

    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}


/* =========================================================
   ANIMATED LINE
========================================================= */

@keyframes futureHeaderEnergyLine {

    0% {
        left: -35%;
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    50% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        left: 100%;
        opacity: 0;
    }
}


/* =========================================================
   MOBILE — EXTRA STABILITY
========================================================= */

@media (max-width: 600px) {

    .future-header {
        position: sticky !important;
        top: 0 !important;

        transform: translate3d(0, 0, 0) !important;

        z-index: 10000 !important;

        background: rgba(2, 4, 11, 0.94) !important;

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

}



/* =========================================================
   FUTUREVERSE — MOBILE HEADER STABILITY FIX
========================================================= */

@media (max-width: 600px) {

    .future-header {
        position: sticky !important;
        top: 0 !important;
        left: 0 !important;

        z-index: 10000 !important;

        /* Mobile पर कोई movement नहीं */
        transform: none !important;
        animation: none !important;

        opacity: 1 !important;
        visibility: visible !important;

        /* GPU repaint issue रोकने के लिए */
        will-change: auto !important;

        backface-visibility: hidden !important;
        -webkit-backface-visibility: hidden !important;

        /* Mobile browser के लिए stable background */
        background: rgba(2, 4, 11, 0.96) !important;

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

        transition: none !important;
    }

    .future-header-inner {
        transform: none !important;
        animation: none !important;

        transition: none !important;

        backface-visibility: hidden !important;
        -webkit-backface-visibility: hidden !important;
    }

    /* Header की moving energy line भी mobile पर बंद */
    .future-header::after {
        animation: none !important;
        opacity: 0.7 !important;
        left: 0 !important;
        width: 100% !important;
    }
}