/* ==========================================================
   MUFLIKHUN.ID
   HOMEPAGE V5 — FIDELITY V2

   Intent:
   - larger editorial scale
   - mockup-like proportion
   - no hero portrait / no floating books
   - readable typography
   - dense cinematic sections
   ========================================================== */

:root {
    --page:
        min(
            calc(100vw - 92px),
            1540px
        );

    --serif:
        "Playfair Display",
        Georgia,
        "Times New Roman",
        serif;

    --sans:
        "Inter",
        Arial,
        sans-serif;

    --gold:
        #ddaE5f;

    --gold2:
        #f2d295;

    --body-readable:
        #c4d0d9;
}


/* ==========================================================
   GLOBAL TYPOGRAPHIC SCALE
   ========================================================== */

body {
    font-size: 16px;
}

.section-label {
    font-size: 11px;
    letter-spacing: .16em;
}

.center-title h2 {
    font-size:
        clamp(
            52px,
            4.4vw,
            76px
        );

    letter-spacing: .015em;
}

.center-title p {
    margin-top: 11px;

    font-size: 17px;
    line-height: 1.5;
}

.section-head-v5 h2 {
    font-size:
        clamp(
            34px,
            2.7vw,
            46px
        );
}

.section-head-v5 p {
    margin-top: 9px;

    font-size: 13px;
    line-height: 1.5;
}


/* ==========================================================
   HEADER / LOGO / NAV
   ========================================================== */

.v5-nav {
    height: 90px;

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

    gap: 44px;
}

.v5-nav::before {
    height: 90px;

    background:
        linear-gradient(
            180deg,
            rgba(0,7,14,.94),
            rgba(0,7,14,.60)
        );
}

.v5-brand {
    gap: 14px;
}

.v5-mark {
    font-size: 43px;
}

.v5-brand > span:last-child {
    gap: 4px;
}

.v5-brand strong {
    font-size: 13px;
    letter-spacing: .19em;
}

.v5-brand small {
    font-size: 8px;
    letter-spacing: .14em;
}

.v5-nav nav {
    gap: 35px;
}

.v5-nav nav a {
    font-size: 12px;
    font-weight: 400;
}

.nav-pill {
    min-height: 44px;

    padding:
        0 21px;

    font-size: 10px;
}


/* ==========================================================
   HERO — SPACE SHOULD LOOK LIKE SPACE
   ========================================================== */

.hero-v5 {
    min-height: 900px;

    background:
        radial-gradient(
            ellipse at 51% 43%,
            rgba(26,105,163,.24),
            transparent 31%
        ),
        radial-gradient(
            ellipse at 25% 15%,
            rgba(19,70,110,.13),
            transparent 24%
        ),
        radial-gradient(
            ellipse at 82% 26%,
            rgba(15,55,91,.16),
            transparent 26%
        ),
        linear-gradient(
            115deg,
            #01050b 0%,
            #02111d 46%,
            #010711 100%
        );
}

/*
 * Explicit, non-repeating star positions.
 * Different radius and glow so it doesn't read like a CSS grid.
 */
.hero-stars {
    opacity: 1;

    background:
        radial-gradient(
            circle at 4% 14%,
            rgba(255,255,255,.95) 0 1px,
            rgba(255,255,255,.28) 2px,
            transparent 5px
        ),
        radial-gradient(
            circle at 11% 43%,
            #fff 0 1.5px,
            rgba(103,192,255,.30) 3px,
            transparent 7px
        ),
        radial-gradient(
            circle at 18% 20%,
            rgba(255,222,155,.95) 0 1px,
            rgba(255,190,91,.28) 2px,
            transparent 6px
        ),
        radial-gradient(
            circle at 27% 71%,
            #fff 0 1px,
            transparent 4px
        ),
        radial-gradient(
            circle at 32% 8%,
            rgba(176,221,255,.95) 0 1.5px,
            rgba(84,179,243,.20) 4px,
            transparent 8px
        ),
        radial-gradient(
            circle at 39% 33%,
            #fff 0 1px,
            transparent 4px
        ),
        radial-gradient(
            circle at 45% 82%,
            rgba(255,210,120,.90) 0 1px,
            rgba(255,191,70,.18) 4px,
            transparent 9px
        ),
        radial-gradient(
            circle at 52% 12%,
            #fff 0 1.6px,
            rgba(122,204,255,.20) 4px,
            transparent 9px
        ),
        radial-gradient(
            circle at 57% 65%,
            rgba(255,255,255,.9) 0 1px,
            transparent 4px
        ),
        radial-gradient(
            circle at 63% 24%,
            rgba(255,215,140,.95) 0 1px,
            rgba(255,184,72,.22) 3px,
            transparent 7px
        ),
        radial-gradient(
            circle at 69% 78%,
            #fff 0 1.4px,
            rgba(120,201,255,.18) 4px,
            transparent 8px
        ),
        radial-gradient(
            circle at 73% 8%,
            rgba(255,255,255,.95) 0 1px,
            transparent 5px
        ),
        radial-gradient(
            circle at 79% 45%,
            rgba(173,223,255,.94) 0 1.5px,
            rgba(100,197,255,.18) 4px,
            transparent 9px
        ),
        radial-gradient(
            circle at 86% 18%,
            #fff 0 1px,
            transparent 4px
        ),
        radial-gradient(
            circle at 90% 69%,
            rgba(255,218,145,.92) 0 1.5px,
            rgba(255,181,68,.20) 4px,
            transparent 8px
        ),
        radial-gradient(
            circle at 95% 34%,
            #fff 0 1px,
            transparent 4px
        ),
        radial-gradient(
            circle at 8% 83%,
            rgba(171,218,255,.92) 0 1px,
            transparent 5px
        ),
        radial-gradient(
            circle at 22% 57%,
            #fff 0 1.2px,
            rgba(255,255,255,.12) 4px,
            transparent 8px
        ),
        radial-gradient(
            circle at 48% 51%,
            rgba(255,255,255,.95) 0 1px,
            transparent 5px
        ),
        radial-gradient(
            circle at 84% 88%,
            #fff 0 1.2px,
            transparent 5px
        );
}

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

    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            ellipse at 17% 42%,
            rgba(12,82,135,.10),
            transparent 23%
        ),
        radial-gradient(
            ellipse at 77% 33%,
            rgba(24,82,126,.11),
            transparent 25%
        );

    filter:
        blur(24px);
}

.hero-stars::after {
    background:
        radial-gradient(
            circle at 16% 66%,
            rgba(255,255,255,.68)
            0 1px,
            transparent 2px
        ),
        radial-gradient(
            circle at 35% 20%,
            rgba(255,210,130,.72)
            0 1px,
            transparent 2px
        ),
        radial-gradient(
            circle at 61% 73%,
            rgba(153,216,255,.70)
            0 1px,
            transparent 2px
        ),
        radial-gradient(
            circle at 88% 55%,
            rgba(255,255,255,.75)
            0 1px,
            transparent 2px
        );

    opacity: .72;
}

.hero-shell {
    grid-template-columns:
        minmax(430px,.93fr)
        minmax(560px,1.16fr)
        minmax(330px,.68fr);

    gap: 28px;

    padding:
        142px 0
        128px;
}

.eyebrow {
    margin-bottom: 27px;

    font-size: 11px;
}

.eyebrow i {
    height: 47px;
}

.hero-copy h1 {
    font-size:
        clamp(
            96px,
            8.3vw,
            150px
        );

    line-height: .82;
}

.hero-copy h2 {
    margin-top: 28px;

    font-size:
        clamp(
            31px,
            2.35vw,
            42px
        );
}

.hero-copy p {
    max-width: 520px;

    margin-top: 25px;

    color: var(--body-readable);

    font-size: 16px;
    line-height: 1.72;
}

.hero-actions {
    margin-top: 34px;
}

.button-gold,
.button-line,
.button-dark {
    min-height: 50px;

    padding:
        0 23px;

    font-size: 11px;
}

.earth-stage {
    width:
        min(
            49vw,
            790px
        );

    /*
     * Earth deliberately softened.
     * It should act as cinematic background,
     * not as a sharp product image.
     */
    opacity: .86;
}

.earth-stage img {
    width: 94%;
    height: 94%;

    filter:
        blur(.65px)
        saturate(.76)
        brightness(.76)
        contrast(1.04)
        drop-shadow(
            0 0 55px
            rgba(34,135,201,.31)
        );

    transform:
        scale(1.02);
}

.earth-stage::after {
    height: 24%;

    background:
        linear-gradient(
            transparent,
            rgba(2,9,20,.68) 56%,
            #020914 92%
        );

    filter:
        blur(12px);
}

.earth-aura {
    inset: 3%;

    background:
        radial-gradient(
            circle,
            transparent 48%,
            rgba(72,170,225,.23) 61%,
            rgba(42,125,187,.09) 69%,
            transparent 77%
        );

    filter:
        blur(26px);
}

.hero-quote {
    max-width: 370px;

    padding:
        22px 0
        22px 34px;
}

.hero-quote blockquote {
    min-height: 200px;

    font-size:
        clamp(
            25px,
            1.8vw,
            33px
        );

    line-height: 1.34;
}

.quote-source strong {
    font-size: 12px;
}

.quote-source span {
    font-size: 10px;
}

.signature {
    font-size: 38px;
}

.hero-stats {
    bottom: 39px;

    gap: 58px;
}

.hero-stats strong {
    font-size: 31px;
}

.hero-stats span {
    font-size: 10px;
}


/* ==========================================================
   LIVING QUOTES
   ========================================================== */

.quotes-v5 {
    min-height: 138px;

    grid-template-columns:
        240px 1fr 100px;
}

.quotes-label {
    padding:
        0 32px;
}

.quotes-label strong {
    font-size: 19px;
}

.quotes-label small {
    margin-top: 4px;

    font-size: 9px;
    line-height: 1.45;
}

.quotes-track article {
    padding:
        28px 27px;
}

.quotes-track p {
    font-size: 15px;
    line-height: 1.5;
}

.quotes-track span {
    margin-top: 10px;

    font-size: 9px;
}


/* ==========================================================
   MANIFESTO — CENTERED EDITORIAL COMPOSITION
   ========================================================== */

.manifesto-v5 {
    min-height: 720px;

    background-position:
        center 48%;
}

.manifesto-shade {
    background:
        linear-gradient(
            180deg,
            rgba(245,239,228,.36) 0%,
            rgba(244,238,226,.19) 31%,
            rgba(7,24,38,.07) 68%,
            rgba(5,18,29,.34) 100%
        );
}

.manifesto-inner {
    min-height: 720px;

    display: flex;
    justify-content: center;
}

.manifesto-copy {
    width:
        min(
            860px,
            70vw
        );

    padding-top: 84px;

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

    text-align: center;
}

.manifesto-copy h2 {
    max-width: 840px;

    margin:
        18px auto
        0;

    font-size:
        clamp(
            64px,
            5.8vw,
            92px
        );

    line-height: .96;

    letter-spacing: -.045em;
}

.manifesto-copy > strong {
    margin-top: 17px;

    font-size: 21px;
}

.manifesto-copy .button-dark {
    margin-top: 26px;
}

.manifesto-side {
    top: 102px;
    right: 0;

    width: 290px;

    font-size: 20px;
    line-height: 1.42;

    text-align: right;
}

.process-v5 {
    bottom: 36px;

    width:
        min(
            94%,
            1110px
        );
}

.process-v5 i {
    width: 57px;
    height: 57px;

    font-size: 18px;
}

.process-v5 span {
    font-size: 11px;
    line-height: 1.35;
}

.process-v5 > b {
    font-size: 17px;
}


/* ==========================================================
   PUSTAKA MOMENTUM — LARGE OVERLAPPING STAGE
   ========================================================== */

.pustaka-v5 {
    min-height: 760px;

    padding:
        72px 0
        48px;
}

.pustaka-v5 .center-title h2 {
    font-size:
        clamp(
            56px,
            4.8vw,
            80px
        );
}

.pustaka-v5 .center-title p {
    font-size: 17px;
}

/*
 * Avoid huge dead area between title and books.
 */
.book-stage-v5 {
    width:
        min(
            calc(100% - 38px),
            1540px
        );

    height: 445px;

    margin:
        12px auto
        0;

    justify-content: center;

    gap: 0;

    overflow: visible;
}

/*
 * 10 books × 210px, with overlap.
 * This produces a true display stage rather than thumbnails.
 */
.stage-book-v5 {
    flex:
        0 0
        210px;

    min-width: 210px;

    margin-left: -59px;

    filter:
        brightness(.86);

    transform-origin:
        center bottom;
}

.stage-book-v5:first-child {
    margin-left: 0;
}

.stage-book-v5:nth-child(-n+2) {
    transform:
        translateY(24px)
        rotateY(13deg)
        scale(.94);
}

.stage-book-v5:nth-last-child(-n+2) {
    transform:
        translateY(24px)
        rotateY(-13deg)
        scale(.94);
}

.stage-book-v5.featured {
    flex-basis: 230px;

    transform:
        translateY(-12px)
        scale(1.06);

    filter: none;

    z-index: 8;
}

.stage-book-v5:hover {
    z-index: 20;

    transform:
        translateY(-24px)
        scale(1.08);

    filter: none;
}

.stage-book-v5 img {
    width: 210px;
    height: auto;

    max-height: 390px;

    object-fit: contain;

    filter:
        drop-shadow(
            0 30px 23px
            rgba(0,0,0,.72)
        );
}

.stage-book-v5.featured img {
    width: 230px;
}

.stage-book-v5 span {
    margin-top: 13px;

    font-size: 11px;

    text-shadow:
        0 2px 5px
        rgba(0,0,0,.85);
}

.book-stage-v5::after {
    bottom: 25px;

    height: 160px;
}

.book-actions {
    margin-top: 5px;
}

.book-actions a {
    min-height: 46px;

    padding:
        0 22px;

    font-size: 10px;
}


/* ==========================================================
   MOMENTUM UNIVERSE — TRUE LARGE SOLAR SYSTEM
   ========================================================== */

.universe-v5 {
    min-height: 960px;

    padding:
        78px
        max(
            42px,
            calc(
                (100vw - 1540px)
                / 2
            )
        )
        62px;
}

.universe-v5 .center-title p {
    font-size: 16px;
}

.universe-grid {
    grid-template-columns:
        minmax(290px,.76fr)
        minmax(650px,1.55fr)
        minmax(310px,.80fr);

    gap: 45px;

    margin-top: 50px;
}

.pillar-list,
.method-list {
    gap: 12px;
}

.pillar-list > strong,
.method-list > strong {
    margin-bottom: 8px;

    font-size: 13px;
}

.pillar-list > div,
.method-list > div {
    grid-template-columns:
        48px 1fr;

    gap: 14px;

    padding:
        10px 0;
}

.pillar-list i,
.method-list b {
    min-height: 38px;

    font-size: 11px;
}

.pillar-list span,
.method-list span {
    font-size: 13px;
    line-height: 1.4;
}

.framework-row span {
    display: grid;
    gap: 3px;
}

.framework-row span b {
    color: #fff;

    font-size: 14px;
}

.framework-row small {
    color: #8198a8;

    font-size: 10px;
    line-height: 1.4;
}

.pillar-subtitle {
    margin:
        11px 0
        0;

    color: var(--gold2);

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

    letter-spacing: .13em;

    border: 0 !important;
}

.solar-v5 {
    min-height: 570px;
}

/* bigger, truly solar-system-like rings */
.r1 {
    width: 280px;
    height: 280px;
}

.r2 {
    width: 430px;
    height: 305px;
}

.r3 {
    width: 570px;
    height: 395px;
}

.r4 {
    width: 690px;
    height: 480px;
}

.sun-v5 {
    width: 205px;
    height: 205px;

    box-shadow:
        0 0 20px
        rgba(238,184,78,.95),
        0 0 75px
        rgba(238,184,78,.40),
        inset 0 0 45px
        rgba(89,198,249,.15);
}

.sun-v5 span {
    font-size: 23px;
}

/*
 * Planets now contain method/framework labels.
 */
.planet {
    display: grid;
    place-items: center;

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

    color: #fff;

    box-shadow:
        0 0 18px
        rgba(228,174,73,.38),
        inset 0 0 15px
        rgba(255,255,255,.10);
}

.planet b {
    position: relative;
    z-index: 2;

    font-family: var(--sans);

    font-size: 10px;
    line-height: 1;

    letter-spacing: .03em;

    text-shadow:
        0 1px 4px
        rgba(0,0,0,.9);
}

.p1 {
    width: 60px;
    height: 60px;

    left: 8%;
    top: 46%;
}

.p2 {
    width: 68px;
    height: 68px;

    right: 7%;
    top: 31%;
}

.p3 {
    width: 55px;
    height: 55px;

    left: 46%;
    bottom: 0;
}

.p4 {
    width: 64px;
    height: 64px;

    left: 18%;
    top: 13%;
}

.p5 {
    width: 58px;
    height: 58px;

    right: 21%;
    bottom: 11%;
}

.p6 {
    width: 62px;
    height: 62px;

    right: -1%;
    top: 55%;
}

.five-k-v5 {
    margin-top: 20px;

    gap: 18px;

    font-size: 12px;
}


/* ==========================================================
   CODE / BUSINESS / BOOKS / IDEAS
   ========================================================== */

.worlds-v5 {
    min-height: 520px;
}

.world-intro {
    padding:
        65px 46px;
}

.world-intro h2 {
    font-size:
        clamp(
            55px,
            4.1vw,
            72px
        );
}

.world-intro p {
    max-width: 340px;

    margin-top: 23px;

    font-size: 14px;
    line-height: 1.65;
}

.world-card {
    min-height: 520px;
}

.world-card > div {
    padding:
        40px 27px;
}

.world-card strong {
    font-size: 32px;
}

.world-card span {
    max-width: 180px;

    margin-top: 8px;

    font-size: 12px;
    line-height: 1.5;
}


/* ==========================================================
   PRODUCTS — ACTUAL BROWSABLE GRID
   ========================================================== */

.products-v5 {
    padding:
        75px
        max(
            42px,
            calc(
                (100vw - 1540px)
                / 2
            )
        )
        85px;
}

.product-grid-v5 {
    grid-template-columns:
        repeat(4,1fr);

    gap: 20px;

    margin-top: 38px;
}

.product-grid-v5 > a,
.product-grid-v5 > div {
    min-height: 185px;

    grid-template-columns:
        74px 1fr;

    column-gap: 19px;

    padding: 24px;

    border-radius: 12px;
}

.product-grid-v5 i {
    width: 74px;
    height: 74px;

    border-radius: 15px;

    font-size: 18px;
}

.product-grid-v5 strong {
    font-size: 22px;
    line-height: 1.2;
}

.product-grid-v5 span {
    margin-top: 8px;

    font-size: 11px;
    line-height: 1.45;
}

.product-grid-v5 b {
    right: 18px;
    top: 17px;

    font-size: 14px;
}


/* ==========================================================
   JOURNEY — LESS RIGID, MORE CINEMATIC
   ========================================================== */

.journey-v5 {
    min-height: 450px;

    padding:
        62px
        max(
            42px,
            calc(
                (100vw - 1540px)
                / 2
            )
        )
        58px;

    background-position:
        center 63%;
}

.journey-overlay {
    background:
        linear-gradient(
            90deg,
            rgba(2,12,20,.82),
            rgba(5,18,28,.34) 45%,
            rgba(2,12,20,.65)
        ),
        linear-gradient(
            180deg,
            rgba(4,15,24,.14),
            rgba(4,15,24,.70)
        );
}

.journey-head-v5 h2 {
    font-size:
        clamp(
            42px,
            3.5vw,
            56px
        );
}

.journey-head-v5 p {
    margin-top: 10px;

    font-size: 13px;
}

.journey-line-v5 {
    margin-top: 88px;
}

.journey-line-v5::before {
    top: 43px;
}

.journey-line-v5 strong {
    font-size: 15px;
}

.journey-line-v5 i {
    width: 13px;
    height: 13px;

    margin:
        20px 0;
}

.journey-line-v5 span {
    max-width: 150px;

    font-size: 11px;
    line-height: 1.45;
}


/* ==========================================================
   THINKING
   ========================================================== */

.thinking-v5 {
    padding:
        72px
        max(
            42px,
            calc(
                (100vw - 1540px)
                / 2
            )
        )
        82px;
}

.thinking-grid-v5 {
    gap: 21px;

    margin-top: 36px;
}

.thinking-grid-v5 > a {
    min-height: 150px;

    grid-template-columns:
        68px 1fr 30px;

    gap: 19px;

    padding: 23px;
}

.thinking-grid-v5 b {
    font-size: 37px;
}

.thinking-grid-v5 strong {
    font-size: 20px;
    line-height: 1.25;
}

.thinking-grid-v5 p {
    margin-top: 9px;

    font-size: 12px;
    line-height: 1.55;
}


/* ==========================================================
   FINAL CTA / FOOTER
   ========================================================== */

.final-v5 {
    min-height: 320px;

    padding:
        55px
        max(
            42px,
            calc(
                (100vw - 1540px)
                / 2
            )
        );
}

.final-copy > small {
    font-size: 16px;
    line-height: 1.5;
}

.final-copy > div > span {
    font-size: 10px;
}

.final-copy h2 {
    margin-top: 12px;

    font-size:
        clamp(
            42px,
            3.4vw,
            56px
        );
}

.footer-v5 {
    min-height: 150px;
}

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

.footer-brand small {
    font-size: 8px;
}

.footer-v5 nav {
    gap: 29px;
}

.footer-v5 a,
.footer-v5 > span {
    font-size: 10px;
}


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

@media (
    min-width: 761px
) and (
    max-width: 1180px
) {
    :root {
        --page:
            calc(100vw - 48px);
    }

    .v5-nav nav {
        gap: 18px;
    }

    .v5-nav nav a {
        font-size: 10px;
    }

    .hero-shell {
        grid-template-columns:
            .92fr 1fr .68fr;
    }

    .hero-copy h1 {
        font-size:
            clamp(
                76px,
                8.5vw,
                108px
            );
    }

    .earth-stage {
        width: 53vw;
    }

    .hero-quote blockquote {
        font-size: 21px;
    }

    .book-stage-v5 {
        justify-content: flex-start;

        overflow-x: auto;

        padding:
            0 80px;

        scroll-snap-type:
            x mandatory;
    }

    .stage-book-v5 {
        flex:
            0 0
            190px;

        min-width: 190px;

        margin-left: -35px;

        scroll-snap-align: center;
    }

    .universe-grid {
        grid-template-columns:
            250px 1fr 260px;

        gap: 25px;
    }

    .r4 {
        width: 520px;
        height: 360px;
    }

    .r3 {
        width: 440px;
        height: 300px;
    }

    .product-grid-v5 {
        grid-template-columns:
            repeat(3,1fr);
    }
}


/* ==========================================================
   MOBILE — RECOMPOSE, DON'T JUST SHRINK
   ========================================================== */

@media (max-width: 760px) {
    :root {
        --page:
            calc(100vw - 28px);
    }

    .v5-nav {
        height: 72px;
    }

    .v5-nav::before {
        height: 72px;
    }

    .v5-mark {
        font-size: 36px;
    }

    .v5-brand strong {
        font-size: 11px;
    }

    .v5-brand small {
        font-size: 7px;
    }

    .mobile-drawer {
        top: 72px;
    }

    .mobile-drawer a {
        font-size: 13px;
    }

    .hero-v5 {
        min-height: 910px;
    }

    .hero-shell {
        height: 910px;

        padding-top: 108px;
    }

    .hero-copy {
        width: 74%;
    }

    .eyebrow {
        font-size: 9px;
    }

    .hero-copy h1 {
        font-size:
            clamp(
                62px,
                18vw,
                82px
            );
    }

    .hero-copy h2 {
        font-size: 26px;
    }

    .hero-copy p {
        max-width: 280px;

        font-size: 12px;
    }

    .earth-stage {
        width: 610px;

        top: 80px;

        transform:
            translateX(-23%);

        opacity: .80;
    }

    .hero-quote {
        bottom: 135px;

        padding:
            18px 19px;
    }

    .hero-quote blockquote {
        font-size: 18px;
    }

    .hero-stats {
        bottom: 53px;
    }

    .hero-stats strong {
        font-size: 22px;
    }

    .hero-stats span {
        font-size: 8px;
    }

    .quotes-v5 {
        min-height: 120px;

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

    .quotes-label strong {
        font-size: 15px;
    }

    .quotes-track p {
        font-size: 14px;
    }

    .manifesto-v5,
    .manifesto-inner {
        min-height: 670px;
    }

    .manifesto-copy {
        width:
            calc(100vw - 32px);

        padding-top: 65px;
    }

    .manifesto-copy h2 {
        max-width: 400px;

        font-size:
            clamp(
                45px,
                12vw,
                60px
            );
    }

    .manifesto-copy > strong {
        font-size: 17px;
    }

    .process-v5 {
        bottom: 28px;
    }

    .process-v5 i {
        width: 43px;
        height: 43px;

        font-size: 14px;
    }

    .process-v5 span {
        font-size: 8px;
    }

    .pustaka-v5 {
        min-height: 720px;

        padding-top: 55px;
    }

    .pustaka-v5 .center-title h2 {
        font-size: 38px;
    }

    .pustaka-v5 .center-title p {
        font-size: 12px;
    }

    .book-stage-v5 {
        height: 445px;

        margin-top: 7px;

        justify-content: flex-start;

        overflow-x: auto;

        padding:
            10px 22vw
            30px;

        scroll-snap-type:
            x mandatory;
    }

    .stage-book-v5,
    .stage-book-v5.featured {
        flex:
            0 0
            58vw;

        min-width: 58vw;

        margin-left: 0;

        transform: none;

        filter: none;

        scroll-snap-align: center;
    }

    .stage-book-v5 img,
    .stage-book-v5.featured img {
        width: 100%;
        height: 370px;

        object-fit: contain;
    }

    .stage-book-v5 span {
        font-size: 10px;
    }

    .universe-v5 {
        min-height: 900px;

        padding:
            58px 14px
            42px;
    }

    .universe-v5 .center-title h2 {
        font-size: 37px;
    }

    .universe-v5 .center-title p {
        font-size: 12px;
    }

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

        gap: 18px;
    }

    .pillar-list {
        display: grid;
    }

    .pillar-list > div {
        display: none;
    }

    .pillar-list .framework-row,
    .pillar-list .pillar-subtitle {
        display: grid;
    }

    .solar-v5 {
        min-height: 395px;
    }

    .r4 {
        width: 365px;
        height: 260px;
    }

    .r3 {
        width: 305px;
        height: 215px;
    }

    .r2 {
        width: 250px;
        height: 175px;
    }

    .r1 {
        width: 190px;
        height: 190px;
    }

    .sun-v5 {
        width: 135px;
        height: 135px;
    }

    .sun-v5 span {
        font-size: 17px;
    }

    .planet {
        transform:
            scale(.74);
    }

    .method-list {
        grid-template-columns:
            repeat(2,1fr);

        gap: 8px;
    }

    .method-list > strong {
        grid-column:
            1 / -1;
    }

    .method-list span {
        font-size: 10px;
    }

    .five-k-v5 {
        overflow-x: auto;

        justify-content:
            flex-start;

        font-size: 10px;

        white-space: nowrap;
    }

    .worlds-v5 {
        grid-template-columns:
            1fr 1fr;
    }

    .world-intro {
        min-height: 310px;

        padding:
            48px 24px;
    }

    .world-intro h2 {
        font-size: 52px;
    }

    .world-intro p {
        font-size: 12px;
    }

    .world-card {
        min-height: 320px;
    }

    .world-card > div {
        padding:
            25px 18px;
    }

    .world-card strong {
        font-size: 23px;
    }

    .world-card span {
        font-size: 10px;
    }

    .products-v5 {
        padding:
            52px 15px
            62px;
    }

    .product-grid-v5 {
        grid-template-columns:
            1fr;

        gap: 13px;
    }

    .product-grid-v5 > a,
    .product-grid-v5 > div {
        min-height: 145px;

        grid-template-columns:
            62px 1fr;

        padding: 19px;
    }

    .product-grid-v5 i {
        width: 62px;
        height: 62px;
    }

    .product-grid-v5 strong {
        font-size: 19px;
    }

    .product-grid-v5 span {
        font-size: 10px;
    }

    .journey-v5 {
        min-height: 390px;

        padding:
            50px 15px;
    }

    .journey-head-v5 h2 {
        font-size: 39px;
    }

    .journey-head-v5 p {
        font-size: 11px;
    }

    .journey-line-v5 {
        grid-template-columns:
            repeat(7,145px);

        margin-top: 70px;
    }

    .journey-line-v5::before {
        width: 925px;
    }

    .journey-line-v5 strong {
        font-size: 13px;
    }

    .journey-line-v5 span {
        font-size: 10px;
    }

    .thinking-v5 {
        padding:
            53px 15px
            62px;
    }

    .thinking-grid-v5 > a {
        min-height: 125px;
    }

    .thinking-grid-v5 strong {
        font-size: 17px;
    }

    .thinking-grid-v5 p {
        font-size: 10px;
    }

    .final-v5 {
        min-height: 320px;
    }

    .final-copy > small {
        font-size: 13px;
    }

    .final-copy h2 {
        font-size: 37px;
    }

    .footer-v5 a,
    .footer-v5 > span {
        font-size: 9px;
    }
}


/* ==========================================================
   DESKTOP COMPOSITION V3
   2026-09-08

   1. manifesto composition
   2. desktop frame
   3. compact convergence CTA
   4. premium compact footer
   ========================================================== */


/* ==========================================================
   DESKTOP VIEWPORT FRAME
   ========================================================== */

@media (min-width: 761px) {

    body::before {
        content: "";

        position: fixed;

        z-index: 9997;

        inset: 16px;

        border:
            1px solid
            rgba(224,188,116,.24);

        pointer-events: none;

        box-shadow:
            inset 0 0 0 1px
            rgba(96,164,204,.025);
    }

}


/* ==========================================================
   MANIFESTO — REBUILD COMPOSITION
   ========================================================== */

@media (min-width: 761px) {

    .manifesto-v5 {
        min-height: 620px;

        overflow: hidden;

        background-position:
            center 53%;
    }

    .manifesto-shade {
        background:
            linear-gradient(
                90deg,
                rgba(246,240,228,.33) 0%,
                rgba(246,240,228,.14) 42%,
                rgba(4,17,27,.06) 69%,
                rgba(3,14,23,.22) 100%
            ),
            linear-gradient(
                180deg,
                rgba(245,239,227,.14) 0%,
                rgba(244,238,225,.06) 39%,
                rgba(3,14,23,.16) 67%,
                rgba(3,12,20,.67) 100%
            );
    }

    .manifesto-inner {
        position: relative;

        width: var(--page);
        min-height: 620px;

        margin: 0 auto;

        display: block;
    }

    /*
     * Main copy belongs on the left side,
     * matching the visual rhythm of the approved mockup.
     */
    .manifesto-copy {
        position: absolute;

        left: 0;
        top: 86px;

        width:
            min(
                650px,
                48vw
            );

        padding: 0;

        display: flex;
        flex-direction: column;

        align-items: flex-start;

        text-align: left;
    }

    .manifesto-copy .section-label {
        margin: 0 0 14px;

        font-size: 10px;

        color: #a77731;
    }

    .manifesto-copy h2 {
        width: 100%;
        max-width: 640px;

        margin: 0;

        font-size:
            clamp(
                56px,
                4.25vw,
                74px
            );

        line-height: .96;

        letter-spacing: -.045em;

        text-align: left;
    }

    .manifesto-copy > strong {
        margin-top: 17px;

        font-size: 18px;
        line-height: 1.4;
    }

    .manifesto-copy .button-dark {
        margin-top: 23px;
    }

    /*
     * Right quote now belongs to the same composition,
     * rather than floating independently.
     */
    .manifesto-side {
        position: absolute;

        top: 88px;
        right: 0;

        width: 310px;

        padding-right: 24px;

        border-right:
            1px solid
            rgba(15,35,47,.35);

        font-size: 18px;
        line-height: 1.48;

        text-align: right;
    }

    /*
     * One complete 6-step line across the lower portion.
     */
    .process-v5 {
        position: absolute;

        left: 50%;
        bottom: 30px;

        transform:
            translateX(-50%);

        width:
            min(
                1020px,
                78vw
            );

        display: flex;

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

        gap: 18px;
    }

    .process-v5 > div {
        flex:
            0 0
            116px;

        display: flex;
        flex-direction: column;

        align-items: center;

        gap: 10px;

        text-align: center;

        color:
            rgba(237,242,244,.89);
    }

    .process-v5 > b {
        flex: 0 0 auto;

        margin-top: 20px;

        color:
            rgba(224,190,122,.72);

        font-size: 17px;
        font-weight: 400;
    }

    .process-v5 i {
        width: 50px;
        height: 50px;

        display: grid;
        place-items: center;

        border:
            1px solid
            rgba(239,243,244,.72);

        border-radius: 50%;

        background:
            rgba(241,242,239,.91);

        color: #06131d;

        font-size: 15px;

        box-shadow:
            0 9px 26px
            rgba(0,0,0,.14);
    }

    .process-v5 span {
        max-width: 114px;

        color:
            rgba(235,241,244,.84);

        font-size: 9px;
        line-height: 1.38;
    }

}


/* ==========================================================
   REMOVE ANY RESIDUAL FALSE WRITING SECTION
   ========================================================== */

.thinking-v5 {
    display: none !important;
}


/* ==========================================================
   FINAL CTA — MATCH MOCKUP PROPORTION
   ========================================================== */

@media (min-width: 761px) {

    .final-v5 {
        min-height: 215px;

        padding:
            34px
            max(
                46px,
                calc(
                    (100vw - 1540px)
                    / 2
                )
            );

        background-position:
            center 62%;
    }

    .final-v5::before {
        background:
            linear-gradient(
                180deg,
                rgba(4,14,22,.10),
                rgba(2,9,15,.58)
            );
    }

    .final-copy {
        position: relative;
        z-index: 2;

        width: 100%;

        display: grid;

        grid-template-columns:
            minmax(240px,.78fr)
            minmax(520px,1.55fr)
            minmax(180px,.56fr);

        align-items: center;

        gap: 38px;
    }

    .final-copy > small {
        max-width: 310px;

        margin: 0;

        font-family: var(--serif);

        font-size: 15px;
        line-height: 1.46;

        text-align: left;
    }

    .final-copy > div {
        text-align: center;
    }

    .final-copy > div > span {
        font-size: 10px;
        letter-spacing: .04em;
    }

    .final-copy h2 {
        margin:
            8px 0
            0;

        font-size:
            clamp(
                39px,
                3.05vw,
                49px
            );

        line-height: 1;

        white-space: nowrap;
    }

    .final-copy > a {
        justify-self: end;

        min-width: 155px;
        min-height: 47px;
    }

}


/* ==========================================================
   FOOTER — MINIMAL PREMIUM
   ========================================================== */

@media (min-width: 761px) {

    .footer-v5 {
        width: var(--page);

        min-height: 112px;

        padding: 0;

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

        gap: 36px;
    }

    .footer-brand {
        gap: 12px;
    }

    .footer-brand .v5-mark {
        font-size: 35px;
    }

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

    .footer-brand small {
        font-size: 7px;
    }

    .footer-v5 nav {
        gap: 27px;
    }

    .footer-v5 a,
    .footer-v5 > span {
        font-size: 9px;
    }

}


/* ==========================================================
   1366 / SMALL DESKTOP SAFETY
   ========================================================== */

@media (
    min-width: 761px
) and (
    max-width: 1366px
) {

    .manifesto-copy {
        width: 590px;
    }

    .manifesto-copy h2 {
        font-size: 59px;
    }

    .manifesto-side {
        width: 260px;

        font-size: 16px;
    }

    .process-v5 {
        width: 900px;

        gap: 11px;
    }

    .process-v5 > div {
        flex-basis: 104px;
    }

    .final-copy {
        grid-template-columns:
            .75fr 1.4fr .55fr;
    }

    .final-copy h2 {
        font-size: 39px;
    }

}

/* ==========================================================
   MUFLIKHUN HERO EARTH LEGACY SOFT EDGE V2

   Keep the original night Earth asset.
   Feather the surrounding black edge progressively so the
   planet merges naturally into the hero background.
   ========================================================== */

.earth-stage img {
    -webkit-mask-image:
        radial-gradient(
            circle at center,
            #000 0%,
            #000 60%,
            rgba(0,0,0,.96) 62%,
            rgba(0,0,0,.78) 64%,
            rgba(0,0,0,.52) 66%,
            rgba(0,0,0,.28) 68%,
            rgba(0,0,0,.10) 70%,
            transparent 72.5%
        );

    mask-image:
        radial-gradient(
            circle at center,
            #000 0%,
            #000 60%,
            rgba(0,0,0,.96) 62%,
            rgba(0,0,0,.78) 64%,
            rgba(0,0,0,.52) 66%,
            rgba(0,0,0,.28) 68%,
            rgba(0,0,0,.10) 70%,
            transparent 72.5%
        );
}