/* ==========================================================
   MUFLIKHUN.ID
   MOBILE HOMEPAGE V1
   max-width: 760px

   Mobile is recomposed, not desktop scaled down.
   ========================================================== */

@media (max-width: 760px) {

    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden !important;
    }


    /* ======================================================
       GLOBAL TYPOGRAPHY
       ====================================================== */

    .section-label {
        font-size: 9px !important;
        letter-spacing: .14em !important;
    }

    .center-title h2 {
        font-size: 34px !important;
        line-height: 1.02 !important;
    }

    .center-title p {
        max-width: 330px;
        margin: 8px auto 0 !important;

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

    .section-head-v5 h2 {
        font-size: 27px !important;
        line-height: 1.05 !important;
    }

    .section-head-v5 p {
        font-size: 11px !important;
        line-height: 1.5 !important;
    }


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

    .v5-nav {
        width: calc(100% - 28px) !important;
        height: 68px !important;

        left: 14px !important;
        right: 14px !important;

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

        gap: 12px !important;
    }

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

    .v5-brand {
        gap: 9px !important;
    }

    .v5-brand strong {
        font-size: 11px !important;
        letter-spacing: .16em !important;
    }

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

    .v5-nav nav,
    .nav-pill {
        display: none !important;
    }

    .v5-nav button {
        width: 42px !important;
        height: 42px !important;

        display: grid !important;
        place-items: center;

        margin: 0 !important;
    }

    .mobile-drawer {
        top: 68px !important;

        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .mobile-drawer a {
        padding: 13px 0 !important;

        font-size: 14px !important;
        font-weight: 600 !important;
    }


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

    .hero-v5 {
        min-height: 700px !important;
        height: 700px !important;
    }

    .hero-shell {
        width: calc(100% - 30px) !important;
        height: 700px !important;

        display: block !important;

        padding: 96px 0 0 !important;
    }

    .hero-copy {
        position: relative;
        z-index: 7;

        width: 67% !important;
    }

    .eyebrow {
        margin-bottom: 13px !important;

        font-size: 8px !important;
    }

    .eyebrow i {
        height: 31px !important;
    }

    .hero-copy h1 {
        font-size: 49px !important;
        line-height: .88 !important;
    }

    .hero-copy h2 {
        margin-top: 11px !important;

        font-size: 21px !important;
        line-height: 1.08 !important;
    }

    .hero-copy p {
        max-width: 245px !important;

        margin-top: 12px !important;

        font-size: 11px !important;
        line-height: 1.55 !important;
    }

    .hero-actions {
        margin-top: 17px !important;
        gap: 8px !important;
    }

    .button-gold,
    .button-line,
    .button-dark {
        min-height: 39px !important;

        padding: 0 14px !important;

        font-size: 9px !important;
    }

    /*
     * Earth becomes atmosphere/background on mobile.
     */
    .earth-stage {
        width: 430px !important;
        height: 430px !important;

        top: 52px !important;
        left: auto !important;
        right: -165px !important;

        transform: none !important;

        opacity: .54 !important;

        pointer-events: none;
    }

    .earth-stage img {
        width: 100% !important;
        height: 100% !important;
    }

    /*
     * Quote becomes a readable lower card.
     */
    .hero-quote {
        position: absolute !important;

        left: 0 !important;
        right: 0 !important;
        bottom: 112px !important;

        width: auto !important;
        max-width: none !important;

        padding: 14px 16px !important;

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

        border-radius: 8px;

        background:
            rgba(2,13,22,.68);

        backdrop-filter:
            blur(10px);
    }

    .hero-quote blockquote {
        min-height: 0 !important;

        margin: 0 !important;

        font-size: 14px !important;
        line-height: 1.4 !important;
    }

    .quote-source {
        margin-top: 8px !important;
    }

    .quote-source strong {
        font-size: 9px !important;
    }

    .quote-source span {
        font-size: 7px !important;
    }

    .signature {
        display: none !important;
    }

    .hero-stats {
        left: 0 !important;
        right: 0 !important;
        bottom: 35px !important;

        width: 100% !important;

        display: grid !important;

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

        gap: 4px !important;
    }

    .hero-stats > div {
        min-width: 0 !important;
    }

    .hero-stats strong {
        font-size: 19px !important;
    }

    .hero-stats span {
        font-size: 7px !important;
    }


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

    .quotes-v5 {
        min-height: 112px !important;

        display: grid !important;

        grid-template-columns:
            104px 1fr !important;
    }

    .quotes-label {
        padding: 15px 12px !important;
    }

    .quotes-label strong {
        font-size: 13px !important;
    }

    .quotes-label small {
        font-size: 7px !important;
    }

    .quotes-track {
        display: block !important;

        overflow: hidden !important;
    }

    .quotes-track article {
        display: none !important;
    }

    .quotes-track article:first-child {
        display: block !important;

        padding: 18px 15px !important;
    }

    .quotes-track p {
        font-size: 12px !important;
        line-height: 1.45 !important;
    }

    .quotes-track span {
        margin-top: 7px !important;

        font-size: 8px !important;
    }


    /* ======================================================
       MANIFESTO
       3 x 2 process grid
       ====================================================== */

    .manifesto-v5,
    .manifesto-inner {
        min-height: 570px !important;
        height: 570px !important;
    }

    .manifesto-v5 {
        background-position:
            center 54% !important;
    }

    .manifesto-inner {
        width: calc(100% - 28px) !important;
    }

    .manifesto-copy {
        position: relative !important;

        left: auto !important;
        top: auto !important;

        width: 100% !important;

        padding-top: 46px !important;

        align-items: center !important;

        text-align: center !important;
    }

    .manifesto-copy h2 {
        max-width: 355px !important;

        margin-left: auto !important;
        margin-right: auto !important;

        font-size: 38px !important;
        line-height: .98 !important;

        text-align: center !important;
    }

    .manifesto-copy > strong {
        margin-top: 10px !important;

        font-size: 14px !important;
    }

    .manifesto-copy .button-dark {
        margin-top: 14px !important;
    }

    .manifesto-side {
        display: none !important;
    }

    .process-v5 {
        left: 0 !important;
        right: 0 !important;
        bottom: 23px !important;

        width: 100% !important;

        transform: none !important;

        display: grid !important;

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

        gap:
            17px 9px !important;
    }

    .process-v5::before {
        display: none !important;
    }

    .process-v5 > b {
        display: none !important;
    }

    .process-v5 > div {
        min-width: 0 !important;
    }

    .process-v5 i {
        width: 40px !important;
        height: 40px !important;

        font-size: 13px !important;
    }

    .process-v5 span {
        max-width: 92px !important;

        margin: auto;

        font-size: 8px !important;
        line-height: 1.28 !important;
    }


    /* ======================================================
       PUSTAKA MOMENTUM
       One large snap book + adjacent peek.
       No browser scrollbar.
       ====================================================== */

    .pustaka-v5 {
        min-height: 585px !important;

        padding:
            48px 0
            33px !important;

        overflow: hidden !important;
    }

    .pustaka-v5 .center-title h2 {
        font-size: 34px !important;
    }

    .pustaka-v5 .center-title p {
        font-size: 11px !important;
    }

    .book-stage-v5 {
        width: 100% !important;
        height: 385px !important;

        margin-top: 8px !important;

        display: flex !important;
        justify-content: flex-start !important;

        gap: 0 !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;

        padding:
            12px 22vw
            28px !important;

        scroll-snap-type:
            x mandatory;

        overscroll-behavior-x:
            contain;

        scrollbar-width:
            none;
    }

    .book-stage-v5::-webkit-scrollbar {
        display: none;
    }

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

        width: 58vw !important;
        min-width: 58vw !important;

        margin: 0 !important;

        transform: none !important;

        filter: none !important;

        scroll-snap-align:
            center;
    }

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

        max-height: 330px !important;

        object-fit: contain !important;
    }

    .stage-book-v5 span {
        margin-top: 8px !important;

        font-size: 9px !important;
    }

    .book-stage-v5::after {
        display: none !important;
    }

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

    .book-actions a {
        min-height: 40px !important;

        font-size: 9px !important;
    }


    /* ======================================================
       MOMENTUM UNIVERSE
       No horizontal overflow.
       Compact framework + readable central visualization.
       ====================================================== */

    .universe-v5 {
        min-height: auto !important;

        padding:
            50px 15px
            45px !important;

        overflow: hidden !important;
    }

    .universe-v5 .center-title h2 {
        font-size: 33px !important;
    }

    .universe-grid {
        width: 100% !important;

        display: flex !important;
        flex-direction: column !important;

        gap: 18px !important;

        margin-top: 27px !important;

        overflow: visible !important;
    }

    /*
     * Mobile only needs the framework summary here.
     * Full 5-Pillar explanation belongs on /pemikiran.
     */
    .pillar-list {
        order: 1;

        display: grid !important;

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

        gap: 9px !important;
    }

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

        font-size: 11px !important;
    }

    .pillar-list > div:not(.framework-row) {
        display: none !important;
    }

    .pillar-list .framework-row {
        display: grid !important;

        grid-template-columns:
            38px 1fr !important;

        gap: 9px !important;

        padding: 9px !important;

        border:
            1px solid
            rgba(105,176,213,.16);

        border-radius: 7px;
    }

    .pillar-list .framework-row i {
        min-height: 36px !important;

        font-size: 9px !important;
    }

    .framework-row span b {
        font-size: 11px !important;
    }

    .framework-row small {
        font-size: 8px !important;
    }

    .solar-v5 {
        order: 2;

        width: 100% !important;
        height: 350px !important;
        min-height: 350px !important;

        overflow: visible !important;
    }

    .r4 {
        width: 310px !important;
        height: 225px !important;
    }

    .r3 {
        width: 260px !important;
        height: 190px !important;
    }

    .r2 {
        width: 215px !important;
        height: 155px !important;
    }

    .r1 {
        width: 165px !important;
        height: 165px !important;
    }

    .sun-v5 {
        width: 116px !important;
        height: 116px !important;
    }

    .sun-v5 span {
        font-size: 14px !important;
    }

    .planet {
        transform:
            scale(.64) !important;

        transform-origin:
            center;
    }

    .method-list {
        order: 3;

        display: grid !important;

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

        gap: 8px !important;
    }

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

        font-size: 11px !important;
    }

    .method-list > div {
        grid-template-columns:
            34px 1fr !important;

        gap: 8px !important;

        padding: 8px !important;

        border:
            1px solid
            rgba(105,176,213,.13);

        border-radius: 6px;
    }

    .method-list b {
        min-height: 31px !important;

        padding: 5px !important;

        font-size: 8px !important;
    }

    .method-list span {
        font-size: 8px !important;
        line-height: 1.35 !important;
    }

    .five-k-v5 {
        max-width: 100% !important;

        margin-top: 14px !important;

        overflow: hidden !important;

        display: flex !important;
        flex-wrap: wrap !important;

        justify-content: center !important;

        gap: 5px 8px !important;

        white-space: normal !important;

        font-size: 8px !important;
    }


    /* ======================================================
       DARI KODE / CODE / BUSINESS / BOOKS / IDEAS
       ====================================================== */

    .worlds-v5 {
        height: auto !important;
        min-height: 0 !important;

        display: grid !important;

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

    .world-intro {
        grid-column: 1 / -1;

        height: 230px !important;
        min-height: 230px !important;

        padding:
            34px 23px !important;
    }

    .world-intro h2 {
        max-width: 230px;

        font-size: 34px !important;
    }

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

        margin-top: 14px !important;

        font-size: 11px !important;
    }

    .world-intro .button-dark {
        margin-top: 15px !important;
    }

    .world-card {
        height: 235px !important;
        min-height: 235px !important;
    }

    .world-card > div {
        padding:
            22px 16px !important;
    }

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

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

        margin-top: 6px !important;

        font-size: 9px !important;
    }


    /* ======================================================
       PRODUCTS
       2-column usable grid.
       ====================================================== */

    .products-v5 {
        padding:
            48px 15px
            52px !important;
    }

    .product-grid-v5 {
        display: grid !important;

        grid-template-columns:
            repeat(2,minmax(0,1fr))
            !important;

        gap: 10px !important;

        margin-top: 25px !important;
    }

    .product-grid-v5 > a,
    .product-grid-v5 > div {
        min-height: 112px !important;

        grid-template-columns:
            43px 1fr !important;

        align-items: center;

        column-gap: 11px !important;

        padding: 13px !important;

        border-radius: 8px !important;
    }

    .product-grid-v5 i {
        width: 43px !important;
        height: 43px !important;

        border-radius: 9px !important;

        font-size: 10px !important;
    }

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

    .product-grid-v5 span {
        margin-top: 4px !important;

        font-size: 8px !important;
        line-height: 1.35 !important;
    }

    .product-grid-v5 b {
        right: 8px !important;
        top: 7px !important;

        font-size: 9px !important;
    }


    /* ======================================================
       JOURNEY
       Mobile becomes a vertical timeline.
       ====================================================== */

    .journey-v5 {
        min-height: auto !important;

        padding:
            44px 17px
            45px !important;

        background-position:
            center 62% !important;

        overflow: hidden !important;
    }

    .journey-head-v5 h2 {
        font-size: 30px !important;
    }

    .journey-head-v5 p {
        font-size: 10px !important;
    }

    .journey-line-v5 {
        position: relative;

        width: 100% !important;

        display: grid !important;

        grid-template-columns:
            1fr !important;

        gap: 11px !important;

        margin-top: 28px !important;

        padding-left: 24px !important;

        overflow: visible !important;
    }

    .journey-line-v5::before {
        left: 5px !important;
        right: auto !important;
        top: 8px !important;
        bottom: 8px !important;

        width: 1px !important;
        height: auto !important;
    }

    .journey-line-v5 > * {
        position: relative;

        min-height: 48px;

        display: grid !important;

        grid-template-columns:
            50px 13px 1fr !important;

        align-items: center;

        gap: 7px !important;

        text-align: left !important;
    }

    .journey-line-v5 strong {
        font-size: 11px !important;
    }

    .journey-line-v5 i {
        width: 9px !important;
        height: 9px !important;

        margin: 0 !important;
    }

    .journey-line-v5 span {
        max-width: none !important;

        font-size: 9px !important;
        line-height: 1.35 !important;

        text-align: left !important;
    }


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

    .final-v5 {
        min-height: 230px !important;

        padding:
            34px 18px
            31px !important;
    }

    .final-copy {
        display: flex !important;

        flex-direction: column !important;

        align-items: center !important;

        gap: 13px !important;

        text-align: center !important;
    }

    .final-copy > small {
        max-width: 280px !important;

        font-size: 11px !important;

        text-align: center !important;
    }

    .final-copy > div > span {
        font-size: 8px !important;
    }

    .final-copy h2 {
        max-width: 330px;

        margin-top: 7px !important;

        font-size: 29px !important;
        line-height: 1.04 !important;

        white-space: normal !important;
    }

    .final-copy > a {
        min-width: 145px !important;
        min-height: 41px !important;

        align-self: center;
    }


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

    .footer-v5 {
        width: calc(100% - 30px) !important;

        min-height: 190px !important;

        padding:
            27px 0 !important;

        display: flex !important;

        flex-direction: column !important;

        align-items: center !important;

        justify-content: center !important;

        gap: 22px !important;

        text-align: center !important;
    }

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

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

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

    .footer-v5 nav {
        display: flex !important;

        flex-wrap: wrap !important;
        justify-content: center !important;

        gap:
            11px 20px !important;
    }

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

    .footer-v5 > span {
        font-size: 8px !important;
    }


    /* ======================================================
       ABSOLUTE OVERFLOW SAFETY
       ====================================================== */

    .hero-v5,
    .manifesto-v5,
    .pustaka-v5,
    .universe-v5,
    .worlds-v5,
    .products-v5,
    .journey-v5,
    .final-v5,
    .footer-v5 {
        max-width: 100vw !important;
    }

}


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

@media
(
    max-width: 760px
)
and
(
    prefers-reduced-motion: reduce
) {

    .earth-stage img,
    .earth-aura,
    .twinkle-star {
        animation: none !important;
    }

}


/* ==========================================================
   MOBILE HOME V1 — FIX A RECOVERY
   Exact selectors from live PublicHomeV5.php
   ========================================================== */

@media (max-width: 760px) {


    /* ======================================================
       HEADER — LOGO + MENU MUST ALWAYS EXIST
       ====================================================== */

    .v5-nav {
        position: fixed !important;

        z-index: 10000 !important;

        top: 0 !important;
        left: 14px !important;
        right: 14px !important;

        width: auto !important;
        height: 66px !important;

        display: grid !important;

        grid-template-columns:
            minmax(0, 1fr)
            42px
            !important;

        align-items: center !important;

        gap: 10px !important;

        padding: 0 !important;

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

        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;

        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }


    /* ---------------- BRAND ---------------- */

    .v5-nav .v5-brand {
        position: relative !important;

        z-index: 10002 !important;

        display: flex !important;

        align-items: center !important;

        gap: 8px !important;

        width: max-content !important;
        max-width: calc(100vw - 88px) !important;

        margin: 0 !important;
        padding: 0 !important;

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

        text-decoration: none !important;
    }

    .v5-nav .v5-brand .v5-mark {
        display: block !important;

        flex: 0 0 auto !important;

        margin: 0 !important;

        font-family: var(--serif) !important;

        font-size: 34px !important;
        font-weight: 500 !important;
        line-height: .9 !important;

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

    .v5-nav .v5-brand > span:last-child {
        display: flex !important;

        flex-direction: column !important;

        justify-content: center !important;

        gap: 2px !important;

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

    .v5-nav .v5-brand strong {
        display: block !important;

        margin: 0 !important;

        font-size: 9px !important;
        font-weight: 700 !important;
        line-height: 1 !important;

        letter-spacing: .16em !important;

        white-space: nowrap !important;

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

    .v5-nav .v5-brand small {
        display: block !important;

        margin: 2px 0 0 !important;

        font-size: 5.5px !important;
        font-weight: 600 !important;
        line-height: 1 !important;

        letter-spacing: .10em !important;

        white-space: nowrap !important;

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


    /* ---------------- DESKTOP ITEMS OFF ---------------- */

    .v5-nav > nav,
    .v5-nav > .nav-pill {
        display: none !important;
    }


    /* ---------------- REAL LIVE MENU BUTTON ---------------- */

    .v5-nav .menu-button {
        position: relative !important;

        z-index: 10003 !important;

        justify-self: end !important;

        display: flex !important;

        flex-direction: column !important;

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

        gap: 5px !important;

        width: 40px !important;
        height: 40px !important;

        min-width: 40px !important;

        margin: 0 !important;
        padding: 0 !important;

        color: inherit !important;

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

        border:
            1px solid
            currentColor
            !important;

        border-radius: 50% !important;

        background: transparent !important;

        cursor: pointer !important;
    }

    .v5-nav .menu-button span {
        display: block !important;

        width: 15px !important;
        height: 1.5px !important;

        margin: 0 !important;

        background:
            currentColor
            !important;

        border-radius: 2px;

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


    /* ---------------- ADAPTIVE COLOR ---------------- */

    .v5-nav[data-nav-theme="light"],
    .v5-nav[data-nav-theme="light"] .v5-brand,
    .v5-nav[data-nav-theme="light"] .menu-button {
        color: #f7f3e9 !important;
    }

    .v5-nav[data-nav-theme="light"]
    .v5-brand small {
        color: #e2b765 !important;
    }

    .v5-nav[data-nav-theme="dark"],
    .v5-nav[data-nav-theme="dark"] .v5-brand,
    .v5-nav[data-nav-theme="dark"] .menu-button {
        color: #07131d !important;
    }

    .v5-nav[data-nav-theme="dark"]
    .v5-brand small {
        color: #875e1e !important;
    }


    /* ---------------- MOBILE DRAWER ---------------- */

    .mobile-drawer {
        position: fixed !important;

        z-index: 9999 !important;

        top: 66px !important;

        left: 14px !important;
        right: 14px !important;

        width: auto !important;

        max-height:
            calc(
                100svh - 80px
            );

        overflow-y: auto;

        padding:
            14px 18px
            17px !important;

        border:
            1px solid
            rgba(221,177,91,.18);

        border-radius: 10px;

        background:
            rgba(2,12,20,.96)
            !important;

        box-shadow:
            0 18px 45px
            rgba(0,0,0,.36);

        backdrop-filter:
            blur(18px);

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

    .mobile-drawer a {
        display: block !important;

        padding:
            12px 3px
            !important;

        color:
            #f4eee4 !important;

        font-size:
            13px !important;

        font-weight:
            600 !important;

        text-decoration:
            none !important;
    }


    /* ======================================================
       HERO STATISTICS — SAFE SIDE MARGINS
       ====================================================== */

    .hero-v5 .hero-stats {
        left: 16px !important;
        right: 16px !important;

        bottom: 31px !important;

        width: auto !important;

        display: grid !important;

        grid-template-columns:
            repeat(
                4,
                minmax(0, 1fr)
            )
            !important;

        gap: 9px !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    .hero-v5 .hero-stats > div {
        min-width: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        text-align: left !important;
    }

    .hero-v5 .hero-stats strong {
        display: block !important;

        margin: 0 !important;

        font-size: 18px !important;
        font-weight: 600 !important;
        line-height: 1 !important;
    }

    .hero-v5 .hero-stats span {
        display: block !important;

        max-width: 64px !important;

        margin-top: 4px !important;

        font-size: 7px !important;
        font-weight: 500 !important;
        line-height: 1.23 !important;
    }


    /* ======================================================
       MANIFESTO PROCESS — ICON + TEXT, 3 x 2
       ====================================================== */

    .manifesto-v5 {
        position: relative !important;
    }

    /*
     * Gradient dedicated to process readability.
     */
    .manifesto-v5::after {
        content: "";

        position: absolute !important;

        z-index: 1 !important;

        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;

        height: 185px !important;

        background:
            linear-gradient(
                180deg,
                rgba(1,9,15,0),
                rgba(1,9,15,.32) 24%,
                rgba(1,9,15,.79) 100%
            )
            !important;

        pointer-events: none !important;
    }

    .manifesto-v5 .manifesto-inner {
        position: relative !important;

        z-index: 2 !important;
    }

    .manifesto-v5 .process-v5 {
        position: absolute !important;

        z-index: 6 !important;

        left: 8px !important;
        right: 8px !important;

        bottom: 17px !important;

        width: auto !important;

        display: grid !important;

        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            )
            !important;

        gap:
            18px 8px
            !important;

        margin: 0 !important;
        padding: 0 !important;

        transform: none !important;

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

    /*
     * Desktop arrows are unnecessary on 3x2 mobile.
     */
    .manifesto-v5 .process-v5 > b {
        display: none !important;
    }

    .manifesto-v5 .process-v5 > div {
        display: flex !important;

        flex-direction: column !important;

        align-items: center !important;

        justify-content: flex-start !important;

        gap: 7px !important;

        min-width: 0 !important;
        min-height: 66px !important;

        margin: 0 !important;
        padding: 0 !important;

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

    .manifesto-v5 .process-v5 i {
        display: grid !important;

        place-items: center !important;

        flex: 0 0 auto !important;

        width: 39px !important;
        height: 39px !important;

        margin: 0 !important;

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

        border-radius: 50% !important;

        background:
            rgba(246,245,240,.96)
            !important;

        color:
            #07141d !important;

        font-size: 13px !important;
        font-style: normal !important;

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

        box-shadow:
            0 7px 18px
            rgba(0,0,0,.20);
    }

    .manifesto-v5 .process-v5 span {
        display: block !important;

        width: 100% !important;
        max-width: 94px !important;

        margin: 0 auto !important;

        color:
            #ffffff !important;

        font-family:
            var(--sans) !important;

        font-size: 8.5px !important;
        font-weight: 600 !important;
        line-height: 1.22 !important;

        text-align: center !important;

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

        text-shadow:
            0 2px 5px
            rgba(0,0,0,1),

            0 0 9px
            rgba(0,0,0,.75)
            !important;
    }

}


/* ==========================================================
   MOBILE NAV CLOSED STATE V1
   ========================================================== */

@media (max-width: 760px) {

    /*
     * Navigation itself remains transparent:
     * brand left, hamburger right.
     */
    .v5-nav {
        display: grid !important;

        grid-template-columns:
            minmax(0,1fr)
            42px !important;

        align-items: center !important;

        top: 0 !important;
        left: 16px !important;
        right: 16px !important;

        width: auto !important;
        height: 66px !important;
    }


    /* ---------------- BRAND ---------------- */

    .v5-nav .v5-brand {
        display: flex !important;

        justify-self: start !important;

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


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

    .v5-nav .menu-button {
        display: flex !important;

        justify-self: end !important;

        width: 40px !important;
        height: 40px !important;

        border:
            1px solid
            currentColor !important;

        border-radius:
            50% !important;

        background:
            transparent !important;
    }

    .v5-nav .menu-button span {
        width: 15px !important;
        height: 1.5px !important;

        background:
            currentColor !important;

        transform-origin:
            center;

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

    .v5-nav
    .menu-button[aria-expanded="true"]
    span:first-child {
        transform:
            translateY(3.25px)
            rotate(45deg);
    }

    .v5-nav
    .menu-button[aria-expanded="true"]
    span:last-child {
        transform:
            translateY(-3.25px)
            rotate(-45deg);
    }


    /* ======================================================
       CLOSED STATE
       ====================================================== */

    .mobile-drawer[hidden] {
        display:
            none !important;
    }

    .mobile-drawer {
        display:
            block !important;

        position:
            fixed !important;

        z-index:
            9999 !important;

        top:
            72px !important;

        left:
            16px !important;

        right:
            16px !important;

        width:
            auto !important;

        padding:
            18px 22px !important;

        border:
            1px solid
            rgba(222,180,99,.23);

        border-radius:
            12px;

        background:
            rgba(1,12,20,.96)
            !important;

        box-shadow:
            0 24px 70px
            rgba(0,0,0,.43);

        backdrop-filter:
            blur(20px)
            saturate(1.12);

        -webkit-backdrop-filter:
            blur(20px)
            saturate(1.12);

        opacity:
            0;

        visibility:
            hidden;

        pointer-events:
            none;

        transform:
            translateY(-10px)
            scale(.985);

        transform-origin:
            top right;

        transition:
            opacity .20s ease,
            transform .20s ease,
            visibility .20s ease;
    }


    /* ======================================================
       OPEN STATE
       ====================================================== */

    .mobile-drawer.is-open {
        opacity:
            1 !important;

        visibility:
            visible !important;

        pointer-events:
            auto !important;

        transform:
            translateY(0)
            scale(1)
            !important;
    }


    /* ---------------- LINKS ---------------- */

    .mobile-drawer a {
        display:
            block !important;

        padding:
            15px 5px !important;

        border-bottom:
            1px solid
            rgba(121,164,190,.13);

        color:
            #f5f0e7 !important;

        font-size:
            14px !important;

        font-weight:
            600 !important;

        line-height:
            1.2 !important;
    }

    .mobile-drawer a:last-child {
        border-bottom:
            0;
    }


    /*
     * Avoid page scroll while menu is open.
     */
    html.mobile-menu-open,
    html.mobile-menu-open body {
        overflow:
            hidden !important;
    }

}


/* Accessibility */
@media
(
    max-width: 760px
)
and
(
    prefers-reduced-motion: reduce
) {

    .mobile-drawer,
    .v5-nav .menu-button span {
        transition:
            none !important;
    }

}


/* ==========================================================
   MOBILE HEADER POSITION V2
   Hard positional lock:
   logo left / hamburger right
   ========================================================== */

@media (max-width: 760px) {

    /*
     * Header is only an invisible positioning layer.
     */
    body > .v5-nav,
    .v5-nav {
        position:
            fixed !important;

        z-index:
            10000 !important;

        top:
            0 !important;

        left:
            0 !important;

        right:
            0 !important;

        width:
            100% !important;

        max-width:
            100vw !important;

        height:
            70px !important;

        min-height:
            70px !important;

        margin:
            0 !important;

        padding:
            0 !important;

        display:
            block !important;

        background:
            transparent !important;

        border:
            0 !important;

        box-shadow:
            none !important;

        backdrop-filter:
            none !important;

        -webkit-backdrop-filter:
            none !important;

        pointer-events:
            none !important;
    }


    /* ======================================================
       BRAND — ABSOLUTE LEFT
       ====================================================== */

    body > .v5-nav > .v5-brand,
    .v5-nav > .v5-brand {
        position:
            absolute !important;

        z-index:
            10002 !important;

        top:
            13px !important;

        left:
            18px !important;

        right:
            auto !important;

        bottom:
            auto !important;

        width:
            auto !important;

        max-width:
            calc(100vw - 92px)
            !important;

        height:
            44px !important;

        margin:
            0 !important;

        padding:
            0 !important;

        display:
            flex !important;

        flex-direction:
            row !important;

        align-items:
            center !important;

        justify-content:
            flex-start !important;

        gap:
            8px !important;

        transform:
            none !important;

        opacity:
            1 !important;

        visibility:
            visible !important;

        pointer-events:
            auto !important;

        text-decoration:
            none !important;
    }

    .v5-nav > .v5-brand > .v5-mark {
        position:
            static !important;

        display:
            block !important;

        flex:
            0 0 auto !important;

        width:
            auto !important;

        height:
            auto !important;

        margin:
            0 !important;

        padding:
            0 !important;

        font-family:
            var(--serif) !important;

        font-size:
            36px !important;

        font-weight:
            500 !important;

        line-height:
            .92 !important;

        transform:
            none !important;

        opacity:
            1 !important;

        visibility:
            visible !important;
    }

    .v5-nav > .v5-brand > span:last-child {
        position:
            static !important;

        display:
            flex !important;

        flex-direction:
            column !important;

        align-items:
            flex-start !important;

        justify-content:
            center !important;

        gap:
            3px !important;

        width:
            auto !important;

        margin:
            0 !important;

        padding:
            0 !important;

        transform:
            none !important;

        opacity:
            1 !important;

        visibility:
            visible !important;
    }

    .v5-nav > .v5-brand strong {
        display:
            block !important;

        margin:
            0 !important;

        padding:
            0 !important;

        font-size:
            10px !important;

        font-weight:
            700 !important;

        line-height:
            1 !important;

        letter-spacing:
            .15em !important;

        white-space:
            nowrap !important;

        opacity:
            1 !important;

        visibility:
            visible !important;
    }

    .v5-nav > .v5-brand small {
        display:
            block !important;

        margin:
            0 !important;

        padding:
            0 !important;

        font-size:
            5.5px !important;

        font-weight:
            600 !important;

        line-height:
            1 !important;

        letter-spacing:
            .10em !important;

        white-space:
            nowrap !important;

        opacity:
            1 !important;

        visibility:
            visible !important;
    }


    /* ======================================================
       HAMBURGER — ABSOLUTE RIGHT
       ====================================================== */

    body > .v5-nav > .menu-button,
    .v5-nav > .menu-button {
        position:
            absolute !important;

        z-index:
            10003 !important;

        top:
            13px !important;

        right:
            18px !important;

        left:
            auto !important;

        bottom:
            auto !important;

        width:
            42px !important;

        height:
            42px !important;

        min-width:
            42px !important;

        max-width:
            42px !important;

        margin:
            0 !important;

        padding:
            0 !important;

        display:
            flex !important;

        flex-direction:
            column !important;

        align-items:
            center !important;

        justify-content:
            center !important;

        gap:
            5px !important;

        transform:
            none !important;

        opacity:
            1 !important;

        visibility:
            visible !important;

        pointer-events:
            auto !important;

        border:
            1px solid
            currentColor !important;

        border-radius:
            50% !important;

        background:
            transparent !important;
    }

    .v5-nav > .menu-button span {
        position:
            static !important;

        display:
            block !important;

        width:
            15px !important;

        height:
            1.5px !important;

        margin:
            0 !important;

        padding:
            0 !important;

        background:
            currentColor !important;

        opacity:
            1 !important;

        visibility:
            visible !important;
    }


    /* ======================================================
       DESKTOP NAV ITEMS NEVER PARTICIPATE ON MOBILE
       ====================================================== */

    .v5-nav > nav,
    .v5-nav > .nav-pill {
        display:
            none !important;
    }


    /* ======================================================
       COLOR — FOLLOW SECTION
       ====================================================== */

    .v5-nav[data-nav-theme="light"]
    > .v5-brand,
    .v5-nav[data-nav-theme="light"]
    > .menu-button {
        color:
            #f7f2e8 !important;
    }

    .v5-nav[data-nav-theme="light"]
    > .v5-brand small {
        color:
            #e3b768 !important;
    }

    .v5-nav[data-nav-theme="dark"]
    > .v5-brand,
    .v5-nav[data-nav-theme="dark"]
    > .menu-button {
        color:
            #07131d !important;
    }

    .v5-nav[data-nav-theme="dark"]
    > .v5-brand small {
        color:
            #865d1d !important;
    }


    /* ======================================================
       DRAWER POSITION FOLLOWS HEADER EDGES
       ====================================================== */

    .mobile-drawer {
        top:
            75px !important;

        left:
            16px !important;

        right:
            16px !important;

        width:
            auto !important;
    }

}


/* ==========================================================
   MOBILE HEADER VIEWPORT LOCK V3
   Final positional override
   ========================================================== */

@media (max-width:760px) {

    html body > header.v5-nav,
    body > .v5-nav,
    .v5-nav {
        position: fixed !important;

        z-index: 10000 !important;

        inset:
            0 0 auto 0
            !important;

        top: 0 !important;
        left: 0 !important;
        right: 0 !important;

        width: 100vw !important;
        max-width: 100vw !important;

        height: 68px !important;
        min-height: 68px !important;

        margin: 0 !important;
        padding: 0 !important;

        transform: none !important;
        translate: none !important;

        display: block !important;

        overflow: visible !important;

        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;

        pointer-events: none !important;
    }


    /* LEFT — LOGO */

    html body > header.v5-nav > a.v5-brand,
    body > .v5-nav > .v5-brand,
    .v5-nav > .v5-brand {
        position: fixed !important;

        z-index: 10002 !important;

        top: 14px !important;
        left: 18px !important;

        right: auto !important;
        bottom: auto !important;

        width: auto !important;
        max-width: 190px !important;

        height: 40px !important;

        margin: 0 !important;
        padding: 0 !important;

        transform: none !important;
        translate: none !important;

        display: flex !important;

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

        gap: 7px !important;

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

        pointer-events: auto !important;
    }

    .v5-nav > .v5-brand > .v5-mark {
        display: block !important;

        font-size: 34px !important;
        line-height: 1 !important;

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

    .v5-nav > .v5-brand > span:last-child {
        display: flex !important;

        flex-direction: column !important;

        gap: 2px !important;

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

    .v5-nav > .v5-brand strong {
        display: block !important;

        font-size: 9px !important;
        font-weight: 700 !important;

        line-height: 1 !important;
        letter-spacing: .14em !important;

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

    .v5-nav > .v5-brand small {
        display: block !important;

        font-size: 5.5px !important;

        line-height: 1 !important;
        letter-spacing: .09em !important;

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


    /* RIGHT — HAMBURGER */

    html body > header.v5-nav > button.menu-button,
    body > .v5-nav > .menu-button,
    .v5-nav > .menu-button {
        position: fixed !important;

        z-index: 10003 !important;

        top: 13px !important;
        right: 18px !important;

        left: auto !important;
        bottom: auto !important;

        width: 42px !important;
        min-width: 42px !important;
        max-width: 42px !important;

        height: 42px !important;

        margin: 0 !important;
        padding: 0 !important;

        transform: none !important;
        translate: none !important;

        display: flex !important;

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

        flex-direction: column !important;

        gap: 5px !important;

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

        pointer-events: auto !important;

        background: transparent !important;

        border:
            1px solid
            currentColor
            !important;

        border-radius: 50% !important;
    }


    /* Hide desktop controls */

    .v5-nav > nav,
    .v5-nav > .nav-pill {
        display: none !important;
    }


    /* Drawer aligns to viewport too */

    .mobile-drawer {
        position: fixed !important;

        top: 74px !important;

        left: 16px !important;
        right: 16px !important;

        width: auto !important;

        margin: 0 !important;

        transform-origin:
            top right !important;
    }

}


/* ==========================================================
   MOBILE PUSTAKA MOMENTUM V1
   Exhibition carousel — one dominant book + side peeks
   ========================================================== */

@media (max-width:760px) {

    .pustaka-v5 {
        position: relative;

        min-height: 590px !important;

        padding:
            46px 0
            35px !important;

        overflow:
            hidden !important;
    }


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

    .pustaka-v5 .center-title {
        position: relative;

        z-index: 3;

        width:
            calc(100% - 28px);

        margin:
            0 auto;

        text-align:
            center;
    }

    .pustaka-v5 .center-title
    .section-label {
        font-size:
            8px !important;

        letter-spacing:
            .16em !important;
    }

    .pustaka-v5 .center-title h2 {
        margin-top:
            8px !important;

        font-size:
            31px !important;

        font-weight:
            500 !important;

        line-height:
            1 !important;

        letter-spacing:
            .005em !important;
    }

    .pustaka-v5 .center-title p {
        margin-top:
            8px !important;

        font-size:
            10px !important;

        line-height:
            1.4 !important;
    }


    /* ======================================================
       BOOK STAGE
       ====================================================== */

    .pustaka-v5 .book-stage-v5 {
        position: relative;

        width:
            100% !important;

        max-width:
            100vw !important;

        height:
            390px !important;

        margin:
            15px 0
            0 !important;

        padding:
            8px 16vw
            20px !important;

        display:
            flex !important;

        align-items:
            flex-end !important;

        justify-content:
            flex-start !important;

        gap:
            0 !important;

        overflow-x:
            auto !important;

        overflow-y:
            hidden !important;

        scroll-snap-type:
            x mandatory !important;

        scroll-padding-inline:
            16vw;

        overscroll-behavior-x:
            contain;

        -webkit-overflow-scrolling:
            touch;

        scrollbar-width:
            none !important;
    }

    .pustaka-v5
    .book-stage-v5::-webkit-scrollbar {
        display:
            none !important;
    }

    .pustaka-v5
    .book-stage-v5::before,
    .pustaka-v5
    .book-stage-v5::after {
        content: "";

        flex:
            0 0
            1px;
    }


    /* ======================================================
       EACH BOOK
       ====================================================== */

    .pustaka-v5
    .stage-book-v5,
    .pustaka-v5
    .stage-book-v5.featured {
        position: relative;

        flex:
            0 0
            68vw !important;

        width:
            68vw !important;

        min-width:
            68vw !important;

        max-width:
            68vw !important;

        height:
            365px !important;

        margin:
            0 !important;

        padding:
            0 5px !important;

        display:
            flex !important;

        flex-direction:
            column !important;

        align-items:
            center !important;

        justify-content:
            flex-end !important;

        scroll-snap-align:
            center !important;

        scroll-snap-stop:
            always;

        transform:
            none !important;

        filter:
            none !important;

        opacity:
            1 !important;

        overflow:
            visible !important;
    }


    /* ======================================================
       COVER
       ====================================================== */

    .pustaka-v5
    .stage-book-v5 img,
    .pustaka-v5
    .stage-book-v5.featured img {
        display:
            block !important;

        width:
            auto !important;

        max-width:
            60vw !important;

        height:
            315px !important;

        max-height:
            315px !important;

        object-fit:
            contain !important;

        margin:
            0 auto !important;

        border-radius:
            1px;

        transform:
            none !important;

        filter:
            drop-shadow(
                0 25px 24px
                rgba(0,0,0,.66)
            )
            !important;
    }


    /* ======================================================
       BOOK NAME
       ====================================================== */

    .pustaka-v5
    .stage-book-v5 span {
        display:
            block !important;

        width:
            100% !important;

        max-width:
            230px !important;

        min-height:
            27px;

        margin:
            10px auto
            0 !important;

        color:
            rgba(242,238,229,.92)
            !important;

        font-size:
            10px !important;

        font-weight:
            500 !important;

        line-height:
            1.28 !important;

        text-align:
            center !important;

        white-space:
            normal !important;

        text-shadow:
            0 2px 8px
            rgba(0,0,0,.78);
    }


    /* ======================================================
       DEPTH EFFECT — ADJACENT BOOKS
       ====================================================== */

    .pustaka-v5
    .stage-book-v5 {
        transition:
            opacity .25s ease,
            transform .25s ease;
    }

    /*
     * No arbitrary shrinking of the active item.
     * Side peeks happen naturally because each item is 68vw
     * while the viewport shows surrounding content.
     */


    /* ======================================================
       GROUND / REFLECTION
       ====================================================== */

    .pustaka-v5::after {
        content: "";

        position: absolute;

        left: 6%;
        right: 6%;
        bottom: 72px;

        height: 72px;

        background:
            radial-gradient(
                ellipse at center,
                rgba(65,141,185,.17),
                rgba(12,45,67,.07)
                42%,
                transparent
                72%
            );

        filter:
            blur(12px);

        pointer-events:
            none;
    }


    /* ======================================================
       CONTROLS
       ====================================================== */

    .pustaka-v5
    .book-actions {
        position: relative;

        z-index: 4;

        width:
            calc(100% - 36px);

        margin:
            2px auto 0 !important;

        display:
            grid !important;

        grid-template-columns:
            42px
            minmax(0,1fr)
            42px !important;

        align-items:
            center !important;

        gap:
            10px !important;
    }

    .pustaka-v5
    .book-actions button {
        width:
            40px !important;

        height:
            40px !important;

        min-width:
            40px !important;

        display:
            grid !important;

        place-items:
            center !important;

        padding:
            0 !important;

        border:
            1px solid
            rgba(223,184,108,.38)
            !important;

        border-radius:
            50% !important;

        background:
            transparent !important;

        color:
            #e7c47d !important;

        font-size:
            13px !important;
    }

    .pustaka-v5
    .book-actions a {
        min-height:
            41px !important;

        display:
            flex !important;

        align-items:
            center !important;

        justify-content:
            center !important;

        gap:
            8px !important;

        padding:
            0 15px !important;

        border:
            1px solid
            rgba(223,184,108,.46)
            !important;

        border-radius:
            999px !important;

        color:
            #f3eadd !important;

        font-size:
            9px !important;

        font-weight:
            600 !important;

        line-height:
            1 !important;

        text-decoration:
            none !important;

        white-space:
            nowrap !important;
    }


    /* ======================================================
       NO HORIZONTAL PAGE OVERFLOW
       ====================================================== */

    .pustaka-v5,
    .pustaka-v5 .center-title,
    .pustaka-v5 .book-actions {
        max-width:
            100vw !important;
    }

}


/* Reduced motion */
@media
(
    max-width:760px
)
and
(
    prefers-reduced-motion:reduce
) {

    .pustaka-v5
    .stage-book-v5 {
        transition:
            none !important;
    }

}


/* ==========================================================
   MOBILE MOMENTUM UNIVERSE V2
   Large orbit + readable conceptual nodes
   ========================================================== */

@media (max-width:760px) {

    .universe-v5 {
        position: relative;

        min-height: 0 !important;

        padding:
            52px 14px
            50px !important;

        overflow: hidden !important;
    }


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

    .universe-v5 .center-title {
        width: 100% !important;

        margin: 0 auto !important;

        text-align: center !important;
    }

    .universe-v5
    .center-title .section-label {
        font-size: 8px !important;

        letter-spacing: .16em !important;
    }

    .universe-v5
    .center-title h2 {
        max-width: 350px;

        margin:
            8px auto 0 !important;

        font-size:
            32px !important;

        line-height:
            1.02 !important;

        letter-spacing:
            .005em !important;
    }

    .universe-v5
    .center-title p {
        max-width: 340px !important;

        margin:
            9px auto 0 !important;

        color:
            rgba(188,206,216,.80)
            !important;

        font-size:
            10px !important;

        line-height:
            1.48 !important;
    }


    /* ======================================================
       GRID ORDER
       Visual first.
       Framework second.
       Method explanation third.
       ====================================================== */

    .universe-v5
    .universe-grid {
        width: 100% !important;

        margin-top:
            20px !important;

        display: flex !important;

        flex-direction:
            column !important;

        gap:
            20px !important;
    }

    .universe-v5
    .solar-v5 {
        order:
            1 !important;
    }

    .universe-v5
    .pillar-list {
        order:
            2 !important;
    }

    .universe-v5
    .method-list {
        order:
            3 !important;
    }


    /* ======================================================
       LARGE ORBIT
       ====================================================== */

    .universe-v5
    .solar-v5 {
        position: relative !important;

        width:
            min(
                94vw,
                390px
            )
            !important;

        height:
            min(
                94vw,
                390px
            )
            !important;

        min-height:
            0 !important;

        margin:
            0 auto !important;

        overflow:
            visible !important;

        transform:
            none !important;
    }


    /*
     * Rings become proper circles,
     * creating a deliberate orbital hierarchy.
     */

    .universe-v5
    .solar-v5 .ring {
        position: absolute !important;

        left:
            50% !important;

        top:
            50% !important;

        border:
            1px solid
            rgba(89,177,225,.23)
            !important;

        border-radius:
            50% !important;

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

        box-shadow:
            inset 0 0 18px
            rgba(45,145,205,.025);
    }

    .universe-v5
    .solar-v5 .r1 {
        width:
            42% !important;

        height:
            42% !important;
    }

    .universe-v5
    .solar-v5 .r2 {
        width:
            59% !important;

        height:
            59% !important;
    }

    .universe-v5
    .solar-v5 .r3 {
        width:
            76% !important;

        height:
            76% !important;
    }

    .universe-v5
    .solar-v5 .r4 {
        width:
            92% !important;

        height:
            92% !important;
    }


    /* ======================================================
       CENTER — WAKTU & KESADARAN
       ====================================================== */

    .universe-v5
    .sun-v5 {
        position: absolute !important;

        z-index: 8 !important;

        left:
            50% !important;

        top:
            50% !important;

        width:
            116px !important;

        height:
            116px !important;

        margin:
            0 !important;

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

        display:
            grid !important;

        place-items:
            center !important;

        border:
            1px solid
            rgba(245,202,108,.88)
            !important;

        border-radius:
            50% !important;

        background:
            radial-gradient(
                circle,
                rgba(8,37,54,.98) 0%,
                rgba(5,27,41,.98) 58%,
                rgba(3,19,30,.98) 100%
            )
            !important;

        box-shadow:
            0 0 20px
            rgba(242,185,70,.50),

            0 0 48px
            rgba(228,169,55,.22),

            inset 0 0 22px
            rgba(255,206,103,.16)
            !important;
    }

    .universe-v5
    .sun-v5 span {
        color:
            #f7efe0 !important;

        font-family:
            var(--serif) !important;

        font-size:
            14px !important;

        font-weight:
            500 !important;

        line-height:
            1.13 !important;

        text-align:
            center !important;
    }


    /* ======================================================
       PLANETS
       Explicit mobile positions.
       Labels live INSIDE planets.
       ====================================================== */

    .universe-v5
    .solar-v5 .planet {
        position: absolute !important;

        z-index: 10 !important;

        width:
            52px !important;

        height:
            52px !important;

        margin:
            0 !important;

        display:
            grid !important;

        place-items:
            center !important;

        border:
            1px solid
            rgba(255,213,122,.76)
            !important;

        border-radius:
            50% !important;

        background:
            radial-gradient(
                circle at 34% 29%,
                #f3cf7a 0%,
                #ad7429 37%,
                #6d3c12 68%,
                #2a1608 100%
            )
            !important;

        box-shadow:
            0 0 12px
            rgba(236,181,70,.48),

            0 0 26px
            rgba(223,156,49,.18)
            !important;

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

        opacity:
            1 !important;
    }

    .universe-v5
    .solar-v5 .planet b {
        color:
            #fff3d9 !important;

        font-family:
            var(--sans) !important;

        font-size:
            9px !important;

        font-weight:
            700 !important;

        line-height:
            1 !important;

        letter-spacing:
            .025em !important;

        text-shadow:
            0 1px 5px
            rgba(0,0,0,.65);
    }


    /*
     * Deliberately asymmetric placement
     * makes it feel like a living conceptual constellation,
     * not six perfectly mechanical dots.
     */

    .universe-v5 .solar-v5 .p1 {
        left: 19% !important;
        top: 35% !important;
    }

    .universe-v5 .solar-v5 .p2 {
        left: 79% !important;
        top: 27% !important;
    }

    .universe-v5 .solar-v5 .p3 {
        left: 87% !important;
        top: 57% !important;
    }

    .universe-v5 .solar-v5 .p4 {
        left: 68% !important;
        top: 82% !important;
    }

    .universe-v5 .solar-v5 .p5 {
        left: 33% !important;
        top: 84% !important;
    }

    .universe-v5 .solar-v5 .p6 {
        left: 11% !important;
        top: 61% !important;
    }


    /* ======================================================
       FRAMEWORK
       5P + 5K FIRST, then five pillars as chips.
       ====================================================== */

    .universe-v5
    .pillar-list {
        width: 100% !important;

        display: grid !important;

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

        gap:
            9px !important;
    }

    .universe-v5
    .pillar-list > strong {
        grid-column:
            1 / -1;

        margin-bottom:
            1px;

        color:
            #e7c678 !important;

        font-size:
            10px !important;

        letter-spacing:
            .13em !important;
    }

    .universe-v5
    .pillar-list .framework-row {
        display: grid !important;

        grid-template-columns:
            39px
            minmax(0,1fr)
            !important;

        align-items:
            center !important;

        gap:
            9px !important;

        min-height:
            72px !important;

        padding:
            10px !important;

        border:
            1px solid
            rgba(78,153,194,.20)
            !important;

        border-radius:
            8px;

        background:
            rgba(8,31,46,.48)
            !important;
    }

    .universe-v5
    .framework-row > i {
        width:
            39px !important;

        height:
            39px !important;

        display:
            grid !important;

        place-items:
            center !important;

        border:
            1px solid
            rgba(235,193,104,.36);

        border-radius:
            50%;

        color:
            #efc96e !important;

        font-size:
            9px !important;

        font-style:
            normal !important;
    }

    .universe-v5
    .framework-row span {
        min-width:
            0 !important;
    }

    .universe-v5
    .framework-row span b {
        display:
            block;

        color:
            #f3eee5 !important;

        font-size:
            10px !important;

        line-height:
            1.25 !important;
    }

    .universe-v5
    .framework-row small {
        display:
            block;

        margin-top:
            4px;

        color:
            #90a8b7 !important;

        font-size:
            7px !important;

        line-height:
            1.35 !important;
    }


    /*
     * Restore the five actual pillars as compact readable chips.
     */

    .universe-v5
    .pillar-subtitle {
        display:
            block !important;

        grid-column:
            1 / -1;

        margin:
            8px 0 0 !important;

        color:
            rgba(230,194,119,.78)
            !important;

        font-size:
            8px !important;

        font-weight:
            700 !important;

        letter-spacing:
            .13em !important;
    }

    .universe-v5
    .pillar-list >
    div:not(.framework-row):not(.pillar-subtitle) {
        display:
            grid !important;

        grid-template-columns:
            30px
            minmax(0,1fr)
            !important;

        align-items:
            center !important;

        gap:
            7px !important;

        min-height:
            42px;

        padding:
            7px 8px !important;

        border-bottom:
            1px solid
            rgba(91,149,181,.12);
    }

    .universe-v5
    .pillar-list >
    div:not(.framework-row):not(.pillar-subtitle)
    i {
        color:
            #e1ba66 !important;

        font-size:
            7px !important;

        font-style:
            normal !important;
    }

    .universe-v5
    .pillar-list >
    div:not(.framework-row):not(.pillar-subtitle)
    span {
        color:
            #d3dde3 !important;

        font-size:
            8px !important;

        line-height:
            1.3 !important;
    }


    /* ======================================================
       METHOD DOMAIN
       ====================================================== */

    .universe-v5
    .method-list {
        width:
            100% !important;

        display:
            grid !important;

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

        gap:
            8px !important;
    }

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

        margin-bottom:
            1px;

        color:
            #e7c678 !important;

        font-size:
            10px !important;

        letter-spacing:
            .13em !important;
    }

    .universe-v5
    .method-list > div {
        min-height:
            55px !important;

        display:
            grid !important;

        grid-template-columns:
            36px
            minmax(0,1fr)
            !important;

        align-items:
            center !important;

        gap:
            8px !important;

        padding:
            8px !important;

        border:
            1px solid
            rgba(77,151,191,.18)
            !important;

        border-radius:
            7px;

        background:
            rgba(7,27,41,.36);
    }

    .universe-v5
    .method-list b {
        width:
            36px !important;

        height:
            36px !important;

        min-height:
            36px !important;

        display:
            grid !important;

        place-items:
            center;

        padding:
            0 !important;

        border:
            1px solid
            rgba(91,180,226,.28);

        border-radius:
            5px;

        color:
            #8ed2f4 !important;

        font-size:
            8px !important;
    }

    .universe-v5
    .method-list span {
        color:
            #d5dfe5 !important;

        font-size:
            8px !important;

        line-height:
            1.28 !important;
    }


    /* ======================================================
       5K FLOW
       ====================================================== */

    .universe-v5
    .five-k-v5 {
        width: 100% !important;

        max-width:
            360px !important;

        margin:
            21px auto 0 !important;

        padding:
            10px 12px !important;

        display:
            flex !important;

        align-items:
            center !important;

        justify-content:
            center !important;

        flex-wrap:
            wrap !important;

        gap:
            5px 7px !important;

        border:
            1px solid
            rgba(83,158,197,.14);

        border-radius:
            999px;

        background:
            rgba(4,23,36,.44);

        color:
            #a9bac5 !important;

        font-size:
            7px !important;

        line-height:
            1.2 !important;
    }

    .universe-v5
    .five-k-v5 b {
        color:
            #dcb25d !important;

        font-weight:
            400 !important;
    }

}


/* ==========================================================
   SMALL PHONE
   ========================================================== */

@media (max-width:390px) {

    .universe-v5
    .solar-v5 {
        width:
            350px !important;

        height:
            350px !important;
    }

    .universe-v5
    .solar-v5 .planet {
        width:
            47px !important;

        height:
            47px !important;
    }

    .universe-v5
    .sun-v5 {
        width:
            105px !important;

        height:
            105px !important;
    }

}


/* ==========================================================
   MOBILE HOME LOWER SECTIONS V1
   Worlds + Products + Journey + CTA + Footer
   ========================================================== */

@media (max-width:760px) {


    /* ======================================================
       DARI KODE KE BUKU
       ====================================================== */

    .worlds-v5 {
        width: 100% !important;

        display: grid !important;

        grid-template-columns:
            repeat(2,minmax(0,1fr))
            !important;

        min-height: 0 !important;
        height: auto !important;

        overflow: hidden !important;
    }


    .world-intro {
        grid-column:
            1 / -1;

        min-height:
            220px !important;

        height:
            220px !important;

        padding:
            31px 22px
            27px !important;

        display:
            flex !important;

        flex-direction:
            column !important;

        justify-content:
            flex-start !important;

        align-items:
            flex-start !important;
    }


    .world-intro h2 {
        max-width:
            250px !important;

        margin:
            0 !important;

        font-size:
            31px !important;

        font-weight:
            600 !important;

        line-height:
            1.02 !important;

        letter-spacing:
            -.025em !important;
    }


    .world-intro p {
        max-width:
            310px !important;

        margin:
            13px 0 0 !important;

        font-size:
            11px !important;

        line-height:
            1.52 !important;
    }


    .world-intro .button-dark {
        margin-top:
            15px !important;

        min-height:
            38px !important;

        padding:
            0 14px !important;

        font-size:
            8px !important;
    }


    .world-card {
        min-height:
            188px !important;

        height:
            188px !important;

        overflow:
            hidden !important;
    }


    .world-card > div {
        height:
            100% !important;

        padding:
            20px 15px
            !important;

        display:
            flex !important;

        flex-direction:
            column !important;

        justify-content:
            flex-end !important;

        align-items:
            flex-start !important;
    }


    .world-card strong {
        font-size:
            26px !important;

        font-weight:
            600 !important;

        line-height:
            .95 !important;
    }


    .world-card span {
        max-width:
            130px !important;

        margin-top:
            7px !important;

        font-size:
            9px !important;

        font-weight:
            500 !important;

        line-height:
            1.35 !important;
    }



    /* ======================================================
       PRODUK TEKNOLOGI
       ====================================================== */

    .products-v5 {
        padding:
            48px 15px
            52px !important;
    }


    .products-v5
    .section-head-v5 {
        width:
            100% !important;

        display:
            flex !important;

        align-items:
            flex-end !important;

        justify-content:
            space-between !important;

        gap:
            13px !important;
    }


    .products-v5
    .section-head-v5 > div {
        min-width:
            0 !important;
    }


    .products-v5
    .section-head-v5 h2 {
        margin:
            0 !important;

        font-size:
            29px !important;

        font-weight:
            500 !important;

        line-height:
            1 !important;
    }


    .products-v5
    .section-head-v5 p {
        max-width:
            250px !important;

        margin-top:
            7px !important;

        font-size:
            10px !important;

        line-height:
            1.42 !important;
    }


    .products-v5
    .section-head-v5 > a {
        flex:
            0 0 auto;

        padding-bottom:
            2px;

        font-size:
            8px !important;

        white-space:
            nowrap !important;
    }


    .product-grid-v5 {
        width:
            100% !important;

        margin-top:
            25px !important;

        display:
            grid !important;

        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            )
            !important;

        gap:
            10px !important;
    }


    .product-grid-v5 > a,
    .product-grid-v5 > div {
        position:
            relative;

        min-height:
            125px !important;

        padding:
            14px 12px
            !important;

        display:
            grid !important;

        grid-template-columns:
            45px
            minmax(0,1fr)
            !important;

        align-content:
            center !important;

        align-items:
            center !important;

        column-gap:
            10px !important;

        border-radius:
            8px !important;
    }


    .product-grid-v5 i {
        width:
            45px !important;

        height:
            45px !important;

        display:
            grid !important;

        place-items:
            center !important;

        border-radius:
            9px !important;

        font-size:
            10px !important;
    }


    .product-grid-v5 strong {
        display:
            block !important;

        font-size:
            13px !important;

        font-weight:
            600 !important;

        line-height:
            1.15 !important;
    }


    .product-grid-v5 span {
        display:
            block !important;

        margin-top:
            5px !important;

        font-size:
            8px !important;

        line-height:
            1.35 !important;
    }


    .product-grid-v5 b {
        position:
            absolute !important;

        top:
            8px !important;

        right:
            9px !important;

        font-size:
            9px !important;
    }



    /* ======================================================
       JOURNEY
       Proper mobile storytelling timeline
       ====================================================== */

    .journey-v5 {
        position:
            relative;

        min-height:
            0 !important;

        padding:
            47px 18px
            48px !important;

        overflow:
            hidden !important;

        background-position:
            center 58% !important;
    }


    .journey-head-v5 {
        position:
            relative;

        z-index:
            3;

        width:
            100% !important;

        margin:
            0 !important;

        text-align:
            left !important;
    }


    .journey-head-v5 h2 {
        margin:
            0 !important;

        font-size:
            31px !important;

        font-weight:
            500 !important;

        line-height:
            1 !important;
    }


    .journey-head-v5 p {
        margin-top:
            7px !important;

        font-size:
            10px !important;

        line-height:
            1.4 !important;
    }


    .journey-line-v5 {
        position:
            relative !important;

        z-index:
            3;

        width:
            100% !important;

        margin:
            29px 0 0
            !important;

        padding:
            0 0 0 27px
            !important;

        display:
            grid !important;

        grid-template-columns:
            1fr !important;

        gap:
            14px !important;

        overflow:
            visible !important;
    }


    /*
     * Main timeline spine.
     */
    .journey-line-v5::before {
        content: "";

        position:
            absolute !important;

        left:
            6px !important;

        top:
            11px !important;

        bottom:
            11px !important;

        width:
            1px !important;

        height:
            auto !important;

        background:
            linear-gradient(
                180deg,
                rgba(225,185,104,.82),
                rgba(225,185,104,.23)
            )
            !important;
    }


    .journey-line-v5 > * {
        position:
            relative !important;

        min-height:
            58px !important;

        display:
            grid !important;

        grid-template-columns:
            53px
            minmax(0,1fr)
            !important;

        grid-template-rows:
            auto auto;

        align-items:
            start !important;

        gap:
            4px 10px !important;

        padding:
            9px 10px
            9px 12px !important;

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

        border-radius:
            7px;

        background:
            rgba(2,14,22,.32);

        backdrop-filter:
            blur(3px);

        text-align:
            left !important;
    }


    .journey-line-v5 > *::before {
        content: "";

        position:
            absolute;

        left:
            -25px;

        top:
            17px;

        width:
            9px;

        height:
            9px;

        border:
            2px solid
            rgba(222,184,105,.85);

        border-radius:
            50%;

        background:
            #07151e;

        box-shadow:
            0 0 10px
            rgba(222,184,105,.28);
    }


    .journey-line-v5 strong {
        grid-column:
            1;

        grid-row:
            1 / span 2;

        align-self:
            center;

        font-size:
            12px !important;

        font-weight:
            600 !important;

        line-height:
            1 !important;
    }


    .journey-line-v5 i {
        display:
            none !important;
    }


    .journey-line-v5 span {
        grid-column:
            2;

        max-width:
            none !important;

        margin:
            0 !important;

        font-size:
            9px !important;

        font-weight:
            500 !important;

        line-height:
            1.36 !important;

        text-align:
            left !important;
    }



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

    .final-v5 {
        position:
            relative;

        min-height:
            245px !important;

        padding:
            38px 20px
            34px !important;

        overflow:
            hidden !important;
    }


    .final-copy {
        position:
            relative;

        z-index:
            3;

        width:
            100% !important;

        display:
            flex !important;

        flex-direction:
            column !important;

        align-items:
            center !important;

        justify-content:
            center !important;

        gap:
            13px !important;

        text-align:
            center !important;
    }


    .final-copy > small {
        max-width:
            295px !important;

        margin:
            0 auto !important;

        font-size:
            10px !important;

        font-weight:
            500 !important;

        line-height:
            1.4 !important;

        letter-spacing:
            .05em !important;

        text-align:
            center !important;
    }


    .final-copy > div > span {
        font-size:
            8px !important;

        line-height:
            1.3 !important;
    }


    .final-copy h2 {
        max-width:
            335px !important;

        margin:
            7px auto 0
            !important;

        font-size:
            31px !important;

        font-weight:
            500 !important;

        line-height:
            1.02 !important;

        white-space:
            normal !important;
    }


    .final-copy > a {
        min-width:
            150px !important;

        min-height:
            41px !important;

        margin-top:
            2px;

        display:
            inline-flex !important;

        align-items:
            center !important;

        justify-content:
            center !important;

        align-self:
            center !important;

        font-size:
            9px !important;
    }



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

    .footer-v5 {
        width:
            calc(100% - 32px)
            !important;

        max-width:
            none !important;

        min-height:
            184px !important;

        margin:
            0 auto !important;

        padding:
            27px 0
            25px !important;

        display:
            flex !important;

        flex-direction:
            column !important;

        align-items:
            center !important;

        justify-content:
            center !important;

        gap:
            20px !important;

        text-align:
            center !important;
    }


    .footer-brand {
        display:
            flex !important;

        align-items:
            center !important;

        justify-content:
            center !important;

        gap:
            9px !important;
    }


    .footer-brand .v5-mark {
        font-size:
            38px !important;
    }


    .footer-brand strong {
        display:
            block;

        font-size:
            11px !important;

        font-weight:
            700 !important;

        line-height:
            1 !important;

        letter-spacing:
            .15em !important;
    }


    .footer-brand small {
        display:
            block;

        margin-top:
            4px !important;

        font-size:
            7px !important;

        line-height:
            1 !important;
    }


    .footer-v5 nav {
        width:
            100%;

        display:
            flex !important;

        flex-wrap:
            wrap !important;

        align-items:
            center !important;

        justify-content:
            center !important;

        gap:
            11px 25px
            !important;
    }


    .footer-v5 nav a {
        font-size:
            10px !important;

        font-weight:
            500 !important;

        line-height:
            1 !important;
    }


    .footer-v5 > span {
        font-size:
            8px !important;

        line-height:
            1 !important;
    }

}


/* ==========================================================
   VERY NARROW PHONE
   ========================================================== */

@media (max-width:390px) {

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

    .product-grid-v5 {
        gap:
            8px !important;
    }

    .product-grid-v5 > a,
    .product-grid-v5 > div {
        min-height:
            117px !important;

        padding:
            11px 9px
            !important;
    }

}