/* ============ TOKENS ============ */
    :root {
        --blue: #2B6BFF;
        --blue-d: #16409E;
        --yellow: #FFC93C;
        --yellow-d: #C99000;
        --red: #FF5C5C;
        --red-d: #C93A3A;
        --purple: #8B5CF6;
        --purple-d: #6435D6;
        --teal: #00A9C0;
        --teal-d: #007A8C;
        --navy: #101A3D;

        --bg: #FBF8F2;
        --dot: rgba(16, 26, 61, .13);
        --card: #fff;
        --ink: #101A3D;
        --soft: rgba(16, 26, 61, .72);
        --line: rgba(16, 26, 61, .16);
        --ol: #101A3D; --bd: rgba(16, 26, 61, .28);
        --sh: rgba(16, 26, 61, .09);
        --blue-t: #2B6BFF;
        --teal-t: #007A8C;
        --red-t: #C93A3A;
        --blue-l: #E3EBFF;
        --yellow-l: #FFF3D0;
        --red-l: #FFE3E3;
        --purple-l: #EDE4FF;
        --teal-l: #D8F4F8;
        --foot: #101A3D;
    }

    [data-theme="dark"] {
        --bg: #0F1634;
        --dot: rgba(255, 255, 255, .07);
        --card: #1A2450;
        --ink: #EEF1FF;
        --soft: rgba(238, 241, 255, .72);
        --line: rgba(238, 241, 255, .16);
        --ol: #04071A; --bd: rgba(238, 241, 255, .24);
        --sh: rgba(0, 0, 0, .3);
        --blue-t: #7FA6FF;
        --teal-t: #5FD6E6;
        --red-t: #FF9A9A;
        --blue-l: #22357A;
        --yellow-l: #4D3F14;
        --red-l: #55222C;
        --purple-l: #382A6B;
        --teal-l: #0E4450;
        --foot: #080C22;
    }

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

    html {
        scroll-behavior: smooth;
        -webkit-text-size-adjust: 100%
    }

    body {
        font-family: 'Nunito', system-ui, sans-serif;
        font-size: 15px;
        color: var(--ink);
        background-color: var(--bg);
        background-image: radial-gradient(circle, var(--dot) 1.4px, transparent 1.4px);
        background-size: 22px 22px;
        -webkit-font-smoothing: antialiased;
        overflow-x: hidden;
        padding-bottom: calc(84px + env(safe-area-inset-bottom));
        transition: background-color .25s ease, color .25s ease;
    }

    h1,
    h2,
    h3,
    h4,
    .baloo {
        font-family: 'Baloo 2', cursive;
        font-weight: 800;
        line-height: 1.08;
        letter-spacing: -.4px
    }

    img,
    svg {
        display: block
    }

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

    button {
        font: inherit;
        cursor: pointer;
        border: none;
        background: none;
        color: inherit
    }

    .wrap {
        max-width: 1080px;
        margin: 0 auto;
        padding: 0 16px;
        position: relative
    }

    main {
        overflow-x: clip
    }

    section {
        scroll-margin-top: 70px;
        position: relative
    }

    /* ============ BUTTONS ============ */
    .btn {
        font-family: 'Baloo 2', cursive;
        font-weight: 700;
        font-size: 15px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 11px 20px;
        border-radius: 14px;
        transition: transform .08s ease, box-shadow .08s ease;
        white-space: nowrap;
    }

    .btn-primary {
        background: var(--blue);
        color: #fff;
        box-shadow: 0 5px 0 var(--blue-d)
    }

    .btn-primary:hover {
        background: #3d78ff
    }

    .btn-primary:active {
        transform: translateY(5px);
        box-shadow: 0 0 0 var(--blue-d)
    }

    .btn-secondary {
        background: var(--card);
        color: var(--ink);
        border: 1px solid var(--bd);
        box-shadow: 0 2px 0 var(--bd);
        padding: 9px 18px
    }

    .btn-secondary:active {
        transform: translateY(5px);
        box-shadow: 0 0 0 var(--bd)
    }

    .btn-yellow {
        background: var(--yellow);
        color: var(--navy);
        box-shadow: 0 5px 0 var(--yellow-d)
    }

    .btn-yellow:hover {
        background: #ffd45e
    }

    .btn-yellow:active {
        transform: translateY(5px);
        box-shadow: 0 0 0 var(--yellow-d)
    }

    .btn-sm {
        font-size: 13.5px;
        padding: 7px 14px;
        border-radius: 11px;
        box-shadow: 0 4px 0 var(--blue-d)
    }

    .btn-secondary.btn-sm {
        padding: 5px 12px;
        box-shadow: 0 2px 0 var(--bd)
    }

    .btn-lg {
        font-size: 18px;
        padding: 15px 34px;
        border-radius: 17px;
        box-shadow: 0 6px 0 var(--yellow-d)
    }

    .btn-lg:active {
        transform: translateY(6px)
    }

    .ic {
        width: 14px;
        height: 14px;
        flex: 0 0 auto
    }

    .ic-lg {
        width: 18px;
        height: 18px
    }

    /* ============ DOODLES ============ */
    .doodle {
        position: absolute;
        pointer-events: none;
        opacity: .45;
        z-index: 0;
        width: 38px;
        animation: bob 6s ease-in-out infinite
    }

    .doodle:nth-of-type(2n) {
        animation-duration: 7.5s;
        animation-delay: -2s
    }

    .doodle:nth-of-type(3n) {
        animation-duration: 9s;
        animation-delay: -4s
    }

    @keyframes bob {
        50% {
            translate: 0 -12px;
            rotate: 6deg
        }
    }

    /* ============ NAVBAR ============ */
    .nav {
        position: sticky;
        top: 0;
        z-index: 80;
        background: var(--bg);
        border-bottom: 1px solid var(--bd)
    }

    .nav-in {
        display: flex;
        align-items: center;
        gap: 22px;
        height: 56px
    }

    .brand {
        display: flex;
        align-items: center;
        gap: 8px;
        flex: 0 0 auto
    }

    .brand-mark {
        width: 38px;
        height: 38px;
        flex: 0 0 auto;
        display: block;
    }

    .brand-mark img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: block;
    }

    .brand-name {
        font-family: 'Baloo 2';
        font-weight: 800;
        font-size: 22px;
        color: var(--blue-t);
        letter-spacing: -.6px
    }

    .nav-links {
        display: none;
        gap: 22px
    }

    .nav-links a {
        font-weight: 700;
        font-size: 14.5px;
        opacity: .85;
        transition: .15s
    }

    .nav-links a:hover,
    .nav-links a.on {
        opacity: 1;
        color: var(--blue-t)
    }

    .nav-cta {
        margin-left: auto;
        display: flex;
        gap: 10px;
        align-items: center
    }

    .nav-cta .masuk {
        display: inline-flex
    }

    .theme-btn {
        width: 34px;
        height: 34px;
        border-radius: 11px;
        border: 1px solid var(--bd);
        background: var(--card);
        box-shadow: 0 2px 0 var(--bd);
        display: grid;
        place-items: center;
        transition: transform .08s ease, box-shadow .08s ease;
    }

    .theme-btn:active {
        transform: translateY(4px);
        box-shadow: 0 0 0 var(--bd)
    }

    .theme-btn svg {
        width: 17px;
        height: 17px
    }

    .theme-btn .moon,
    [data-theme="dark"] .theme-btn .sun {
        display: none
    }

    [data-theme="dark"] .theme-btn .moon {
        display: block;
        color: var(--yellow)
    }

    /* ============ BOTTOM NAV (mobile) ============ */
    .bnav {
        position: fixed;
        left: 10px;
        right: 10px;
        bottom: calc(10px + env(safe-area-inset-bottom));
        z-index: 90;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 2px;
        background: var(--card);
        border: 1px solid var(--bd);
        border-radius: 20px;
        box-shadow: 0 2px 0 var(--bd);
        padding: 5px;
    }

    .bnav a {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        padding: 6px 2px 5px;
        border-radius: 14px;
        font-size: 10.5px;
        font-weight: 800;
        color: var(--soft);
        transition: background .18s ease, color .18s ease;
    }

    .bnav svg {
        width: 20px;
        height: 20px
    }

    .bnav a.on {
        background: var(--blue);
        color: #fff
    }

    .bnav a:active {
        transform: scale(.94)
    }

    /* ============ ASISTEN CHAT ============ */
    .chat-fab {
        position: fixed;
        right: 14px;
        bottom: calc(88px + env(safe-area-inset-bottom));
        z-index: 95;
        width: 52px;
        height: 52px;
        border-radius: 18px;
        background: var(--yellow);
        color: var(--navy);
        border: 1px solid var(--bd);
        box-shadow: 0 5px 0 var(--yellow-d);
        display: grid;
        place-items: center;
        transition: transform .08s ease, box-shadow .08s ease;
        animation: fabin .5s cubic-bezier(.2, .9, .3, 1.5) 1.2s both;
    }

    .chat-fab:active {
        transform: translateY(5px);
        box-shadow: 0 0 0 var(--yellow-d)
    }

    .chat-fab svg {
        width: 26px;
        height: 26px
    }

    .chat-fab .x,
    .chat-fab.open .c {
        display: none
    }

    .chat-fab.open .x {
        display: block
    }

    .chat-fab::after {
        content: "";
        position: absolute;
        top: -5px;
        right: -5px;
        width: 13px;
        height: 13px;
        border-radius: 50%;
        background: var(--red);
        border: 1px solid var(--bd);
    }

    .chat-fab.open::after {
        display: none
    }

    @keyframes fabin {
        from {
            opacity: 0;
            scale: .3
        }

        to {
            opacity: 1;
            scale: 1
        }
    }

    .chat-panel {
        position: fixed;
        right: 14px;
        bottom: calc(152px + env(safe-area-inset-bottom));
        z-index: 95;
        width: min(330px, calc(100vw - 28px));
        background: var(--card);
        border: 1px solid var(--bd);
        border-radius: 22px;
        box-shadow: 4px 4px 0 var(--sh);
        overflow: hidden;
        transform-origin: bottom right;
        transform: scale(.6) translateY(20px);
        opacity: 0;
        visibility: hidden;
        transition: transform .22s cubic-bezier(.2, .9, .3, 1.3), opacity .18s ease, visibility 0s .22s;
    }

    .chat-panel.open {
        transform: none;
        opacity: 1;
        visibility: visible;
        transition-delay: 0s
    }

    .chat-head {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 11px 14px;
        background: var(--blue);
        color: #fff;
        border-bottom: 1px solid var(--bd)
    }

    .chat-head .cava {
        width: 32px;
        height: 32px;
        border-radius: 11px;
        background: var(--yellow);
        color: var(--navy);
        border: 1px solid var(--bd);
        display: grid;
        place-items: center;
        flex: 0 0 auto
    }

    .chat-head .cava svg {
        width: 17px;
        height: 17px
    }

    .chat-head b {
        display: block;
        font-family: 'Baloo 2';
        font-weight: 800;
        font-size: 15px;
        line-height: 1.1
    }

    .chat-head small {
        font-size: 11px;
        font-weight: 700;
        opacity: .85
    }

    .chat-body {
        padding: 12px;
        display: flex;
        flex-direction: column;
        gap: 8px;
        max-height: 52vh;
        overflow-y: auto
    }

    .msg {
        max-width: 86%;
        border: 1px solid var(--bd);
        padding: 7px 11px;
        font-weight: 700;
        font-size: 13px;
        line-height: 1.4;
        animation: fadein .25s ease
    }

    .msg.bot {
        align-self: flex-start;
        background: var(--blue-l);
        border-radius: 14px 14px 14px 4px
    }

    .msg.me {
        align-self: flex-end;
        background: var(--yellow-l);
        border-radius: 14px 14px 4px 14px
    }

    .msg a {
        color: var(--blue);
        text-decoration: underline
    }

    .chat-quick {
        display: flex;
        flex-wrap: wrap;
        gap: 6px
    }

    .chat-quick button {
        font-weight: 800;
        font-size: 11.5px;
        border: 1px solid var(--bd);
        border-radius: 99px;
        padding: 3px 10px;
        background: var(--card)
    }

    .chat-quick button:hover {
        background: var(--purple-l)
    }

    /* ============ HERO ============ */
    .hero {
        padding: 30px 0 46px;
        overflow: hidden
    }

    .hero-grid {
        display: grid;
        gap: 30px;
        align-items: center
    }

    .hero-tag {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        font-family: 'Baloo 2';
        font-weight: 800;
        font-size: 12.5px;
        background: var(--yellow);
        color: var(--navy);
        border: 1px solid var(--bd);
        border-radius: 99px;
        padding: 3px 12px;
        margin-bottom: 12px;
        animation: rise .5s ease both;
    }

    .hero h1 {
        font-size: clamp(31px, 8.6vw, 40px)
    }

    .hero h1 .w {
        display: inline-block;
        animation: rise .55s cubic-bezier(.2, .9, .3, 1.3) both
    }

    .hero h1 .w:nth-child(1) {
        animation-delay: .05s
    }

    .hero h1 .w:nth-child(2) {
        animation-delay: .13s
    }

    .hero h1 .w:nth-child(3) {
        animation-delay: .21s
    }

    .hero h1 .w:nth-child(4) {
        animation-delay: .29s
    }

    .hero h1 .w:nth-child(5) {
        animation-delay: .37s
    }

    @keyframes rise {
        from {
            opacity: 0;
            transform: translateY(22px) rotate(-3deg)
        }

        to {
            opacity: 1;
            transform: none
        }
    }

    .hero h1 .hl {
        color: var(--blue-t);
        position: relative;
        z-index: 0
    }

    .hero h1 .hl::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 3px;
        height: 9px;
        background: var(--yellow);
        z-index: -1;
        border-radius: 5px;
        transform-origin: left;
        animation: draw .6s ease .75s both;
    }

    [data-theme="dark"] .hero h1 .hl::after {
        opacity: .45
    }

    @keyframes draw {
        from {
            transform: scaleX(0)
        }

        to {
            transform: scaleX(1)
        }
    }

    .hero-rot {
        margin-top: 14px;
        font-family: 'Baloo 2';
        font-weight: 700;
        font-size: 18px;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 7px;
        animation: rise .5s ease .5s both;
    }

    .rot {
        display: inline-block;
        background: var(--blue);
        color: #fff;
        border: 1px solid var(--bd);
        border-radius: 11px;
        padding: 1px 12px 0;
        box-shadow: 0 4px 0 var(--blue-d);
        overflow: hidden;
    }

    .rot span {
        display: inline-block;
        transition: transform .25s ease, opacity .25s ease
    }

    .rot span.out {
        transform: translateY(-110%);
        opacity: 0
    }

    .rot span.pre {
        transform: translateY(110%);
        opacity: 0;
        transition: none
    }

    .hero-rot b {
        color: var(--teal-t)
    }

    .hero-sub {
        margin-top: 14px;
        font-size: 15.5px;
        line-height: 1.6;
        font-weight: 600;
        color: var(--soft);
        max-width: 440px;
        animation: rise .5s ease .6s both;
    }

    .hero-btns {
        display: flex;
        gap: 12px;
        margin-top: 22px;
        flex-wrap: wrap;
        animation: rise .5s ease .7s both
    }

    .hero-note {
        margin-top: 16px;
        display: flex;
        align-items: center;
        gap: 9px;
        font-weight: 700;
        font-size: 13px;
        color: var(--soft);
        animation: rise .5s ease .8s both;
    }

    .hero-note .dotp {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--teal);
        animation: ping 1.8s ease-out infinite
    }

    @keyframes ping {
        0% {
            box-shadow: 0 0 0 0 rgba(0, 169, 192, .55)
        }

        100% {
            box-shadow: 0 0 0 9px rgba(0, 169, 192, 0)
        }
    }

    /* buku induk (hero visual) */
    .hero-visual {
        position: relative;
        padding: 30px 0 34px;
        max-width: 350px;
        margin: 0 auto;
        width: 100%;
        z-index: 1
    }

    .induk {
        position: relative;
        background: var(--card);
        border: 1px solid var(--bd);
        border-radius: 22px;
        padding: 14px;
        box-shadow: 8px 8px 0 var(--blue);
        transform: rotate(-2deg);
        animation: sway 7s ease-in-out infinite, popin .6s cubic-bezier(.2, .9, .3, 1.25) .3s both;
    }

    @keyframes sway {
        50% {
            transform: rotate(1.2deg) translateY(-6px)
        }
    }

    @keyframes popin {
        from {
            opacity: 0;
            scale: .85
        }

        to {
            opacity: 1;
            scale: 1
        }
    }

    .induk-tab {
        position: absolute;
        top: -15px;
        left: 18px;
        font-family: 'Baloo 2';
        font-weight: 800;
        font-size: 12.5px;
        background: var(--yellow);
        color: var(--navy);
        border: 1px solid var(--bd);
        border-radius: 10px 10px 0 0;
        padding: 2px 12px 0;
    }

    .induk-head {
        display: flex;
        align-items: center;
        gap: 9px
    }

    .ava {
        width: 36px;
        height: 36px;
        border-radius: 12px;
        background: var(--yellow);
        border: 1px solid var(--bd);
        flex: 0 0 auto;
        position: relative;
        overflow: hidden
    }

    .ava::before {
        content: "";
        position: absolute;
        width: 13px;
        height: 13px;
        border-radius: 50%;
        background: var(--navy);
        top: 6px;
        left: 50%;
        transform: translateX(-50%)
    }

    .ava::after {
        content: "";
        position: absolute;
        width: 26px;
        height: 18px;
        border-radius: 50% 50% 0 0;
        background: var(--navy);
        bottom: -5px;
        left: 50%;
        transform: translateX(-50%)
    }

    .induk-name {
        font-family: 'Baloo 2';
        font-weight: 800;
        font-size: 14.5px;
        line-height: 1.15
    }

    .induk-meta {
        font-size: 11px;
        font-weight: 700;
        color: var(--soft)
    }

    .induk-pct {
        margin-left: auto;
        font-family: 'Baloo 2';
        font-weight: 800;
        font-size: 19px;
        color: var(--blue-t)
    }

    .induk-prog {
        height: 10px;
        border: 1px solid var(--bd);
        border-radius: 99px;
        background: var(--blue-l);
        margin: 10px 0 8px;
        overflow: hidden
    }

    .induk-prog span {
        display: block;
        height: 100%;
        width: 0;
        background: var(--teal);
        transition: width .5s ease
    }

    .ik-row {
        display: flex;
        align-items: center;
        gap: 9px;
        padding: 6px 0;
        border-bottom: 2px dotted var(--line)
    }

    .ik-row:last-of-type {
        border-bottom: none
    }

    .ik-tick {
        width: 22px;
        height: 22px;
        border-radius: 8px;
        border: 1px solid var(--bd);
        background: var(--line);
        display: grid;
        place-items: center;
        flex: 0 0 auto;
        color: #fff;
    }

    .ik-tick svg {
        width: 12px;
        height: 12px;
        opacity: 0
    }

    .ik-row.done .ik-tick {
        background: var(--teal);
        animation: tickpop .35s cubic-bezier(.2, .9, .3, 1.6)
    }

    .ik-row.done .ik-tick svg {
        opacity: 1
    }

    @keyframes tickpop {
        from {
            transform: scale(.4)
        }

        to {
            transform: scale(1)
        }
    }

    .ik-txt {
        flex: 1;
        min-width: 0
    }

    .ik-txt b {
        display: block;
        font-size: 12.5px;
        font-weight: 800;
        line-height: 1.2
    }

    .ik-val {
        display: none;
        font-size: 11px;
        font-weight: 700;
        line-height: 14px;
        color: var(--soft)
    }

    .ik-row.done .ik-val {
        display: block;
        animation: fadein .3s ease
    }

    .ik-sk {
        display: block;
        height: 8px;
        width: 62%;
        margin: 3px 0;
        border-radius: 99px;
        background: linear-gradient(90deg, var(--line) 25%, var(--blue-l) 50%, var(--line) 75%);
        background-size: 200% 100%;
        animation: shimmer 1.2s linear infinite;
    }

    .ik-row.done .ik-sk {
        display: none
    }

    @keyframes shimmer {
        to {
            background-position: -200% 0
        }
    }

    @keyframes fadein {
        from {
            opacity: 0;
            transform: translateX(-6px)
        }

        to {
            opacity: 1;
            transform: none
        }
    }

    .induk-foot {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-top: 10px
    }

    .induk-foot span {
        font-size: 11.5px;
        font-weight: 700;
        color: var(--soft)
    }

    .mini-btn {
        font-family: 'Baloo 2';
        font-weight: 800;
        font-size: 12.5px;
        background: var(--blue);
        color: #fff;
        border-radius: 10px;
        padding: 5px 13px;
        box-shadow: 0 4px 0 var(--blue-d);
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

    .induk.full .mini-btn {
        animation: wiggle .5s ease 2
    }

    @keyframes wiggle {
        25% {
            transform: rotate(-5deg) scale(1.06)
        }

        75% {
            transform: rotate(5deg) scale(1.06)
        }
    }

    .induk-stamp {
        position: absolute;
        right: -8px;
        bottom: 44px;
        font-family: 'Baloo 2';
        font-weight: 800;
        font-size: 13px;
        color: var(--teal-t);
        background: var(--teal-l);
        border: 2.5px dashed var(--teal);
        border-radius: 12px;
        padding: 4px 12px;
        transform: rotate(-9deg) scale(0);
        transition: transform .35s cubic-bezier(.2, .9, .3, 1.6);
    }

    .induk.full .induk-stamp {
        transform: rotate(-9deg) scale(1)
    }

    .notif {
        position: absolute;
        z-index: 5;
        display: flex;
        align-items: center;
        gap: 8px;
        background: var(--card);
        border: 1px solid var(--bd);
        border-radius: 14px;
        padding: 7px 12px;
        font-weight: 800;
        font-size: 12px;
        white-space: nowrap;
        box-shadow: 4px 4px 0 var(--sh);
        animation: floaty 4.5s ease-in-out infinite, popin .5s cubic-bezier(.2, .9, .3, 1.4) both;
    }

    .notif .ni {
        width: 22px;
        height: 22px;
        border-radius: 8px;
        border: 1px solid var(--bd);
        display: grid;
        place-items: center;
        flex: 0 0 auto
    }

    .notif .ni svg {
        width: 12px;
        height: 12px
    }

    @keyframes floaty {
        50% {
            translate: 0 -9px
        }
    }

    .n1 {
        top: 0;
        right: 0;
        rotate: 4deg;
        animation-delay: 0s, .9s
    }

    .n2 {
        display: none
    }

    .n3 {
        bottom: 0;
        left: 0;
        rotate: -3deg;
        animation-delay: -2.2s, 1.3s
    }

    .spark {
        position: absolute;
        color: var(--yellow);
        width: 20px;
        height: 20px;
        z-index: 4;
        animation: twinkle 2.2s ease-in-out infinite
    }

    .sp1 {
        top: 14px;
        left: 4px
    }

    .sp2 {
        bottom: 52px;
        right: -2px;
        width: 15px;
        height: 15px;
        color: var(--purple);
        animation-delay: -.8s
    }

    .sp3 {
        top: 44%;
        left: -8px;
        width: 13px;
        height: 13px;
        color: var(--red);
        animation-delay: -1.5s
    }

    @keyframes twinkle {

        0%,
        100% {
            transform: scale(.4) rotate(0);
            opacity: .3
        }

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

    /* ============ SECTION HEAD ============ */
    .sec {
        padding: 48px 0
    }

    .sec-head {
        text-align: center;
        max-width: 600px;
        margin: 0 auto 28px;
        position: relative;
        z-index: 1
    }

    .sec-head h2 {
        font-size: clamp(25px, 6.4vw, 36px)
    }

    .sec-head p {
        margin-top: 10px;
        font-size: 15px;
        font-weight: 600;
        color: var(--soft);
        line-height: 1.55
    }

    .eyebrow {
        display: inline-block;
        font-family: 'Baloo 2';
        font-weight: 800;
        font-size: 12px;
        letter-spacing: .5px;
        text-transform: uppercase;
        color: var(--blue-t);
        background: var(--blue-l);
        border: 1px solid var(--bd);
        border-radius: 99px;
        padding: 3px 12px;
        margin-bottom: 12px;
    }

    /* reveal saat digulir */
    .js .rv {
        opacity: 0;
        transform: translateY(22px);
        transition: opacity .5s ease, transform .5s cubic-bezier(.2, .9, .3, 1.2)
    }

    .js .rv.in {
        opacity: 1;
        transform: none
    }

    /* ============ MASALAH -> SOLUSI ============ */
    .tag {
        display: inline-block;
        margin-right: 4px;
        vertical-align: 1px;
        font-family: 'Baloo 2';
        font-weight: 800;
        font-size: 10.5px;
        letter-spacing: .6px;
        text-transform: uppercase;
        border: 1px solid var(--bd);
        border-radius: 99px;
        padding: 1px 9px 0;
    }

    .tag.m {
        background: var(--red);
        color: #fff
    }

    .tag.s {
        background: var(--blue);
        color: #fff
    }

    .prob,
    .sol {
        border: 1px solid var(--bd);
        border-radius: 14px;
        padding: 10px 12px;
        font-weight: 700;
        font-size: 13.5px;
        line-height: 1.45
    }

    .prob {
        background: var(--red-l)
    }

    .sol {
        background: var(--blue-l)
    }

    .to {
        text-align: center;
        font-family: 'Baloo 2';
        font-weight: 800;
        color: var(--blue-t);
        font-size: 16px;
        line-height: 1;
        margin: 5px 0
    }

    .ps-grid {
        display: grid;
        gap: 18px;
        position: relative;
        z-index: 1
    }

    .pcard {
        background: var(--card);
        border: 1px solid var(--bd);
        border-radius: 22px;
        padding: 16px;
        box-shadow: 4px 4px 0 var(--sh);
        display: flex;
        flex-direction: column;
    }

    .pcard h3 {
        font-size: 19px;
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        gap: 9px
    }

    .pico {
        width: 32px;
        height: 32px;
        border-radius: 11px;
        border: 1px solid var(--bd);
        display: grid;
        place-items: center;
        flex: 0 0 auto;
        color: var(--navy)
    }

    .pico svg {
        width: 16px;
        height: 16px
    }

    .mock {
        margin-top: 12px;
        border: 2px dashed var(--line);
        border-radius: 16px;
        padding: 12px;
        flex: 1
    }

    .mock-inline {
        display: flex;
        align-items: center;
        gap: 10px
    }

    .chip {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        font-weight: 800;
        font-size: 11.5px;
        border: 1px solid var(--bd);
        border-radius: 99px;
        padding: 3px 10px;
    }

    .chip svg {
        width: 12px;
        height: 12px
    }

    .chip.blue {
        background: var(--blue-l)
    }

    .chip.yellow {
        background: var(--yellow-l)
    }

    .chip.red {
        background: var(--red-l)
    }

    .chip.purple {
        background: var(--purple-l)
    }

    .chip.teal {
        background: var(--teal-l)
    }

    .chip.solid-red {
        background: var(--red);
        color: #fff
    }

    .chip.solid-blue {
        background: var(--blue);
        color: #fff
    }

    .chip-row {
        display: flex;
        gap: 7px;
        flex-wrap: wrap;
        margin-top: 10px
    }

    .scan {
        position: relative;
        height: 96px;
        border: 2.5px dashed var(--blue);
        border-radius: 14px;
        background: var(--blue-l);
        display: grid;
        place-items: center;
        overflow: hidden;
        color: var(--ink);
    }

    .scan svg {
        width: 54px;
        height: 54px
    }

    .scan-line {
        position: absolute;
        left: 9%;
        right: 9%;
        height: 3px;
        border-radius: 3px;
        background: var(--blue);
        animation: scanmove 2.4s ease-in-out infinite
    }

    @keyframes scanmove {

        0%,
        100% {
            top: 16%
        }

        50% {
            top: 78%
        }
    }

    .q-text {
        font-weight: 800;
        font-size: 13.5px;
        line-height: 1.35;
        margin-bottom: 8px
    }

    .opt {
        display: flex;
        align-items: center;
        gap: 8px;
        border: 1px solid var(--bd);
        border-radius: 11px;
        padding: 5px 10px;
        font-weight: 700;
        font-size: 12.5px;
        margin-bottom: 6px;
    }

    .opt b {
        width: 19px;
        height: 19px;
        border-radius: 6px;
        background: var(--blue-l);
        border: 1px solid var(--bd);
        display: grid;
        place-items: center;
        font-family: 'Baloo 2';
        font-size: 10.5px;
        flex: 0 0 auto;
    }

    .opt.sel {
        border-color: var(--bd);
        background: var(--yellow-l)
    }

    .qr {
        width: 54px;
        height: 54px;
        border-radius: 9px;
        border: 2px solid var(--navy);
        flex: 0 0 auto;
        background: conic-gradient(#101A3D 25%, #fff 0 50%, #101A3D 0 75%, #fff 0) 0 0/8px 8px;
        background-color: #fff;
    }

    .qr.sm {
        width: 34px;
        height: 34px;
        background-size: 6px 6px;
        border-radius: 7px
    }

    .rc-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 8px;
        font-weight: 700;
        font-size: 12.5px;
        padding: 6px 0;
        border-bottom: 2px dotted var(--line)
    }

    .rc-row:last-of-type {
        border-bottom: none
    }

    .rc-row b {
        font-family: 'Baloo 2';
        font-size: 14.5px;
        white-space: nowrap
    }

    .stamp {
        margin-top: 8px;
        display: flex;
        align-items: center;
        gap: 9px;
        border: 2.5px dashed var(--teal);
        border-radius: 12px;
        padding: 6px 10px;
        background: var(--teal-l);
        font-family: 'Baloo 2';
        font-weight: 800;
        font-size: 12.5px;
        color: var(--teal-t);
        transform: rotate(-2deg);
    }

    .slip-total {
        margin-top: 8px;
        border: 1px solid var(--bd);
        border-radius: 12px;
        background: var(--yellow-l);
        padding: 7px 11px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-weight: 800;
        font-size: 12.5px;
    }

    .slip-total b {
        font-family: 'Baloo 2';
        font-size: 16px
    }

    .meter {
        height: 10px;
        border: 1px solid var(--bd);
        border-radius: 99px;
        background: var(--card);
        overflow: hidden;
        margin: 6px 0 2px
    }

    .meter span {
        display: block;
        height: 100%;
        width: 0;
        background: var(--yellow);
        transition: width 1.1s ease .2s
    }

    .in .meter span {
        width: var(--w)
    }

    .bubble {
        border: 1px solid var(--bd);
        border-radius: 14px 14px 14px 4px;
        background: var(--purple-l);
        padding: 8px 11px;
        font-weight: 700;
        font-size: 12.5px;
        line-height: 1.4
    }

    /* ============ BUKU INDUK ============ */
    .induk-sec {
        padding: 48px 0
    }

    .bi-grid {
        display: grid;
        gap: 14px;
        position: relative;
        z-index: 1
    }

    .bi-card {
        border: 1px solid var(--bd);
        border-radius: 22px;
        padding: 16px;
        box-shadow: 4px 4px 0 var(--sh)
    }

    .bi-card.m {
        background: var(--red-l)
    }

    .bi-card.s {
        background: var(--blue-l);
        box-shadow: 6px 6px 0 var(--blue)
    }

    .bi-card h3 {
        font-size: 19px;
        margin: 8px 0 10px
    }

    .bi-list {
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: 9px
    }

    .bi-list li {
        display: flex;
        gap: 9px;
        align-items: flex-start;
        font-weight: 700;
        font-size: 13.5px;
        line-height: 1.45
    }

    .mk {
        width: 20px;
        height: 20px;
        border-radius: 7px;
        border: 1px solid var(--bd);
        display: grid;
        place-items: center;
        flex: 0 0 auto;
        margin-top: 1px;
        color: #fff;
        font-family: 'Baloo 2';
        font-weight: 800;
        font-size: 12px;
        line-height: 1
    }

    .mk.x {
        background: var(--red)
    }

    .mk.v {
        background: var(--teal)
    }

    .mk svg {
        width: 11px;
        height: 11px
    }

    .books {
        display: flex;
        align-items: flex-end;
        gap: 5px;
        height: 62px;
        margin-top: 14px
    }

    .books i {
        display: block;
        width: 22px;
        border: 1px solid var(--bd);
        border-radius: 5px 5px 2px 2px;
        background: var(--card);
        position: relative
    }

    .books i::after {
        content: "";
        position: absolute;
        left: 3px;
        right: 3px;
        top: 8px;
        height: 6px;
        border-radius: 2px;
        background: var(--red);
        opacity: .7
    }

    .books i:nth-child(1) {
        height: 52px
    }

    .books i:nth-child(2) {
        height: 60px;
        transform: rotate(-3deg)
    }

    .books i:nth-child(3) {
        height: 46px
    }

    .books i:nth-child(4) {
        height: 56px;
        transform: rotate(8deg);
        margin-left: 6px
    }

    .books i:nth-child(5) {
        height: 50px;
        transform: rotate(13deg);
        margin-left: 5px
    }

    .books span {
        margin-left: 10px;
        font-size: 12px;
        font-weight: 800;
        color: var(--red-t);
        align-self: center
    }

    .search {
        margin-top: 14px;
        background: var(--card);
        border: 1px solid var(--bd);
        border-radius: 16px;
        padding: 10px
    }

    .search-bar {
        display: flex;
        align-items: center;
        gap: 8px;
        border: 1px solid var(--bd);
        border-radius: 11px;
        padding: 6px 10px;
        font-weight: 800;
        font-size: 13px;
        background: var(--bg)
    }

    .search-bar svg {
        width: 14px;
        height: 14px;
        color: var(--soft)
    }

    .typed {
        display: inline-block;
        overflow: hidden;
        white-space: nowrap;
        border-right: 2px solid var(--blue);
        width: 0;
        animation: typing 5s steps(17) infinite
    }

    @keyframes typing {

        0%,
        8% {
            width: 0
        }

        45%,
        92% {
            width: 15.5ch
        }

        100% {
            width: 0
        }
    }

    .result {
        display: flex;
        align-items: center;
        gap: 9px;
        margin-top: 9px
    }

    .result .t {
        font-weight: 800;
        font-size: 13px;
        line-height: 1.2
    }

    .result .d {
        font-size: 11px;
        font-weight: 700;
        color: var(--soft)
    }

    .result .mini-btn {
        margin-left: auto;
        flex: 0 0 auto
    }

    /* ============ CHIPS MARQUEE ============ */
    .chips-sec {
        padding: 40px 0;
        overflow: hidden
    }

    .marquee {
        overflow: hidden;
        padding: 8px 0 12px;
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
        mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
    }

    .marquee-track {
        display: flex;
        gap: 12px;
        width: max-content;
        animation: slide 40s linear infinite
    }

    .marquee.rev .marquee-track {
        animation-direction: reverse
    }

    .marquee:hover .marquee-track {
        animation-play-state: paused
    }

    @keyframes slide {
        to {
            transform: translateX(-50%)
        }
    }

    .pill {
        font-family: 'Baloo 2';
        font-weight: 700;
        font-size: 14.5px;
        white-space: nowrap;
        border: 1px solid var(--bd);
        border-radius: 99px;
        padding: 8px 18px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        box-shadow: 0 2px 0 var(--bd);
    }

    .pill .pdot {
        width: 9px;
        height: 9px;
        border-radius: 50%;
        border: 1px solid var(--bd)
    }

    .p-blue {
        background: var(--blue-l)
    }

    .p-yellow {
        background: var(--yellow-l)
    }

    .p-red {
        background: var(--red-l)
    }

    .p-purple {
        background: var(--purple-l)
    }

    .p-teal {
        background: var(--teal-l)
    }

    /* ============ AI ============ */
    .ai-grid {
        display: grid;
        gap: 18px;
        position: relative;
        z-index: 1
    }

    .ai-card {
        border: 1px solid var(--bd);
        border-radius: 22px;
        padding: 16px;
        box-shadow: 4px 4px 0 var(--sh);
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .ai-card.acc-yellow {
        background: var(--yellow-l)
    }

    .ai-card.acc-purple {
        background: var(--purple-l)
    }

    .ai-card.acc-teal {
        background: var(--teal-l)
    }

    .ai-top {
        display: flex;
        align-items: center;
        gap: 10px
    }

    .ai-card h3 {
        font-size: 19px
    }

    .ai-ico {
        width: 38px;
        height: 38px;
        border-radius: 12px;
        border: 1px solid var(--bd);
        display: grid;
        place-items: center;
        flex: 0 0 auto
    }

    .acc-yellow .ai-ico {
        background: var(--yellow);
        box-shadow: 0 4px 0 var(--yellow-d);
        color: var(--navy)
    }

    .acc-purple .ai-ico {
        background: var(--purple);
        box-shadow: 0 4px 0 var(--purple-d);
        color: #fff
    }

    .acc-teal .ai-ico {
        background: var(--teal);
        box-shadow: 0 4px 0 var(--teal-d);
        color: #fff
    }

    .ai-card .prob,
    .ai-card .sol {
        background: var(--card)
    }

    .skel {
        height: 8px;
        border-radius: 99px;
        background: var(--line);
        margin-top: 6px
    }

    .skel.w70 {
        width: 70%
    }

    .skel.w45 {
        width: 45%
    }

    .swatches {
        display: flex;
        gap: 6px;
        margin-top: 7px
    }

    .swatch {
        width: 19px;
        height: 19px;
        border-radius: 6px;
        border: 1px solid var(--bd)
    }

    .ai-note {
        margin-top: 22px;
        font-weight: 700;
        font-size: 13.5px;
        color: var(--soft);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        text-align: center;
        flex-wrap: wrap;
    }

    .ai-note .badge {
        background: var(--yellow);
        border: 1px solid var(--bd);
        border-radius: 99px;
        padding: 2px 12px;
        font-family: 'Baloo 2';
        font-weight: 800;
        font-size: 12px;
        color: var(--navy);
    }

    /* ============ PRICING ============ */
    /* mobile: geser ke samping */
    .price-grid {
        display: flex;
        gap: 14px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding: 24px 16px 14px;
        margin: 0 -16px;
        scrollbar-width: none;
        position: relative;
        z-index: 1
    }

    .price-grid::-webkit-scrollbar {
        display: none
    }

    .price-card {
        flex: 0 0 80%;
        max-width: 300px;
        scroll-snap-align: center;
        background: var(--card);
        border: 1px solid var(--bd);
        border-radius: 22px;
        padding: 20px 18px;
        box-shadow: 4px 4px 0 var(--sh);
        display: flex;
        flex-direction: column;
        gap: 12px;
        position: relative;
    }

    .price-card.hot {
        background: var(--blue-l);
        box-shadow: 7px 7px 0 var(--blue)
    }

    .sticker {
        position: absolute;
        top: -14px;
        right: 16px;
        transform: rotate(6deg);
        font-family: 'Baloo 2';
        font-weight: 800;
        font-size: 12px;
        background: var(--yellow);
        color: var(--navy);
        border: 1px solid var(--bd);
        border-radius: 99px;
        padding: 3px 12px;
        box-shadow: 0 3px 0 var(--yellow-d);
    }

    .plan-name {
        font-family: 'Baloo 2';
        font-weight: 800;
        font-size: 19px
    }

    .price-line {
        display: flex;
        align-items: baseline;
        gap: 5px;
        flex-wrap: wrap
    }

    .amt {
        font-family: 'Baloo 2';
        font-weight: 800;
        font-size: 27px;
        letter-spacing: -.8px
    }

    .per {
        font-weight: 800;
        font-size: 12.5px;
        color: var(--soft)
    }

    .plan-desc {
        font-size: 13px;
        font-weight: 600;
        color: var(--soft);
        line-height: 1.45;
        min-height: 38px
    }

    .plan-list {
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: 8px
    }

    .plan-list li {
        display: flex;
        gap: 8px;
        align-items: flex-start;
        font-weight: 700;
        font-size: 13px;
        line-height: 1.4
    }

    .plan-list .soon {
        display: inline-block;
        margin-left: 4px;
        padding: 0 8px;
        font-size: 11px;
        font-weight: 800;
        border: 1px solid var(--bd);
        border-radius: 99px;
        background: var(--yellow-l);
        white-space: nowrap
    }

    .tick {
        width: 18px;
        height: 18px;
        border-radius: 6px;
        border: 1px solid var(--bd);
        background: var(--yellow);
        color: var(--navy);
        display: grid;
        place-items: center;
        flex: 0 0 auto;
        margin-top: 1px;
    }

    .tick svg {
        width: 10px;
        height: 10px
    }

    .tick.blue {
        background: var(--blue);
        color: #fff
    }

    .tick.purple {
        background: var(--purple);
        color: #fff
    }

    .price-card .btn {
        margin-top: auto;
        width: 100%
    }

    .swipe-hint {
        text-align: center;
        font-size: 12px;
        font-weight: 800;
        color: var(--soft)
    }

    /* ============ FAQ ============ */
    .faq-list {
        max-width: 760px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        gap: 12px;
        position: relative;
        z-index: 1
    }

    .faq-item {
        background: var(--card);
        border: 1px solid var(--bd);
        border-radius: 18px;
        box-shadow: 4px 4px 0 var(--sh);
        overflow: hidden
    }

    .faq-q {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        padding: 14px 16px;
        font-family: 'Baloo 2';
        font-weight: 800;
        font-size: 16px;
        text-align: left;
        line-height: 1.25;
    }

    .chev {
        width: 28px;
        height: 28px;
        border-radius: 10px;
        border: 1px solid var(--bd);
        background: var(--blue-l);
        display: grid;
        place-items: center;
        flex: 0 0 auto;
        transition: transform .2s ease, background .2s ease;
    }

    .faq-item.open .chev {
        transform: rotate(180deg);
        background: var(--yellow);
        color: var(--navy)
    }

    .faq-a {
        max-height: 0;
        overflow: hidden;
        transition: max-height .28s ease
    }

    .faq-a p {
        padding: 0 16px 16px;
        font-size: 14px;
        font-weight: 600;
        line-height: 1.6;
        color: var(--soft)
    }

    /* ============ CTA BAND ============ */
    .cta-band {
        background: var(--blue);
        border-top: 1px solid var(--bd);
        border-bottom: 1px solid var(--bd);
        padding: 52px 0;
        overflow: hidden;
        margin-top: 24px;
    }

    .cta-band::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: radial-gradient(circle, rgba(255, 255, 255, .22) 1.6px, transparent 1.6px);
        background-size: 24px 24px;
    }

    .cta-in {
        position: relative;
        z-index: 2;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 16px
    }

    .cta-band h2 {
        color: #fff;
        font-size: clamp(28px, 7.4vw, 44px);
        text-shadow: 0 3px 0 rgba(16, 26, 61, .25)
    }

    .cta-band p {
        color: rgba(255, 255, 255, .92);
        font-size: 15px;
        font-weight: 700;
        max-width: 420px;
        line-height: 1.5
    }

    .cta-band .doodle {
        opacity: .55
    }

    .cta-band .btn-lg {
        animation: nudge 2.6s ease-in-out infinite
    }

    @keyframes nudge {

        0%,
        80%,
        100% {
            transform: none
        }

        86% {
            transform: rotate(-3deg) scale(1.04)
        }

        93% {
            transform: rotate(3deg) scale(1.04)
        }
    }

    /* ============ FOOTER ============ */
    footer {
        background: var(--foot);
        color: #fff;
        padding: 40px 0 24px;
        position: relative
    }

    .foot-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 28px 20px
    }

    .foot-grid>div:first-child {
        grid-column: 1 / -1
    }

    .foot-brand {
        display: flex;
        align-items: center;
        gap: 9px;
        margin-bottom: 12px
    }


    .foot-name {
        font-family: 'Baloo 2';
        font-weight: 800;
        font-size: 22px;
        color: #fff;
        letter-spacing: -.6px
    }

    footer p.ftag {
        font-size: 13.5px;
        font-weight: 600;
        line-height: 1.6;
        color: rgba(255, 255, 255, .62);
        max-width: 300px
    }

    footer h4 {
        font-family: 'Baloo 2';
        font-weight: 800;
        font-size: 14.5px;
        margin-bottom: 12px;
        color: var(--yellow)
    }

    footer ul {
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: 9px
    }

    footer ul a,
    footer ul li {
        font-size: 13.5px;
        font-weight: 600;
        color: rgba(255, 255, 255, .72);
        transition: .15s
    }

    footer ul a:hover {
        color: #fff
    }

    .foot-bottom {
        margin-top: 32px;
        padding-top: 18px;
        border-top: 2px solid rgba(255, 255, 255, .14);
        display: flex;
        justify-content: space-between;
        gap: 10px;
        flex-wrap: wrap;
        font-size: 12.5px;
        font-weight: 600;
        color: rgba(255, 255, 255, .5);
    }

    @media (max-width:380px) {
        .nav-cta .masuk {
            display: none
        }
    }

    /* ============ TABLET ============ */
    @media (min-width:700px) {
        .wrap {
            padding: 0 24px
        }

        .ps-grid,
        .bi-grid {
            grid-template-columns: 1fr 1fr
        }

        .ai-grid {
            grid-template-columns: repeat(3, 1fr)
        }

        .price-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            overflow: visible;
            margin: 0;
            padding: 24px 0 0;
            gap: 18px
        }

        .price-card {
            max-width: none
        }

        .swipe-hint {
            display: none
        }

        .foot-grid {
            grid-template-columns: 1.5fr 1fr 1fr 1fr
        }

        .foot-grid>div:first-child {
            grid-column: auto
        }

        .doodle {
            width: 46px
        }

        .hero-visual {
            max-width: 380px
        }
    }

    /* ============ DESKTOP ============ */
    @media (min-width:960px) {
        body {
            padding-bottom: 0
        }

        .bnav {
            display: none
        }

        .chat-fab {
            right: 24px;
            bottom: 24px;
            width: 56px;
            height: 56px
        }

        .chat-panel {
            right: 24px;
            bottom: 94px
        }

        .nav-in {
            height: 60px
        }

        .nav-links {
            display: flex
        }

        .nav-cta .masuk {
            display: inline-flex
        }

        .hero {
            padding: 52px 0 70px
        }

        .hero-grid {
            grid-template-columns: 1.05fr .95fr;
            gap: 40px
        }

        .hero h1 {
            font-size: clamp(40px, 4.2vw, 52px)
        }

        .hero-rot {
            font-size: 21px
        }

        .hero-sub {
            font-size: 16.5px
        }

        .hero-visual {
            max-width: 400px;
            margin: 0 0 0 auto;
            padding: 34px 0 40px
        }

        .n1 {
            right: -18px
        }

        .n2 {
            display: flex;
            top: 46%;
            left: -92px;
            rotate: 3deg;
            animation-delay: -1.2s, 1.1s
        }

        .n3 {
            left: -40px
        }

        .sec,
        .induk-sec {
            padding: 64px 0
        }

        .sec-head {
            margin-bottom: 38px
        }

        .ps-grid {
            grid-template-columns: repeat(3, 1fr);
            gap: 20px
        }

        .price-grid {
            grid-template-columns: repeat(3, 1fr);
            align-items: start
        }

        .price-card.hot {
            transform: translateY(-10px)
        }

        .doodle {
            width: 52px;
            opacity: .5
        }

        .cta-band {
            padding: 68px 0
        }
    }

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

        *,
        *::before,
        *::after {
            animation: none !important;
            transition: none !important
        }

        html {
            scroll-behavior: auto
        }

        .js .rv {
            opacity: 1;
            transform: none
        }

        .typed {
            width: auto;
            border-right: none
        }
    }

/* tiga paket: tiga kolom sejak tablet supaya tidak ada kartu yatim */
@media (min-width:820px) and (max-width:959px) {
    .price-grid {
        grid-template-columns: repeat(3, 1fr)
    }
}

/* dua paket: Gratis satu kolom, Pro selebar dua kartu Gratis dengan daftar dua kolom */
.price-card.wide {
    flex-basis: 88%;
    max-width: 340px
}

.price-card.wide .amt {
    font-size: 22px;
    line-height: 1.2
}

.plan-list .ft {
    flex: 1 1 auto;
    min-width: 0
}

@media (min-width:700px) {
    .price-grid {
        grid-template-columns: 1fr;
        max-width: 640px;
        margin: 0 auto;
        align-items: stretch
    }

    .price-card.wide {
        max-width: none
    }

    .price-card.wide .plan-list {
        display: block;
        column-count: 2;
        column-gap: 28px
    }

    .price-card.wide .plan-list li {
        break-inside: avoid;
        margin-bottom: 9px
    }

    .price-card.hot.wide {
        transform: none
    }
}

@media (min-width:960px) {
    .price-grid {
        grid-template-columns: repeat(3, 1fr);
        max-width: 1040px
    }

    .price-card.wide {
        grid-column: span 2
    }
}

/* tombol video demo di butir fitur */
.demo-btn {
    flex: 0 0 auto;
    height: 24px;
    margin: -1px 0 0 auto;
    padding: 0 10px 0 7px;
    border: 1px solid var(--bd);
    border-radius: 99px;
    background: var(--blue-l);
    color: var(--blue);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font: inherit;
    font-size: 11.5px;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    transition: transform .15s, background .15s, color .15s
}

.demo-btn svg {
    width: 12px;
    height: 12px
}

.demo-btn:hover,
.demo-btn:focus-visible {
    background: var(--blue);
    color: #fff;
    transform: scale(1.06)
}

/* mode gelap: teks, ikon, dan garis tepi putih */
[data-theme="dark"] .demo-btn {
    color: #fff;
    border-color: #fff
}

/* pemutar video demo */
.demo-modal {
    position: fixed;
    inset: 0;
    margin: auto;
    height: fit-content;
    width: min(880px, calc(100vw - 24px));
    max-width: none;
    border: 1px solid var(--bd);
    border-radius: 22px;
    background: var(--card);
    color: inherit;
    box-shadow: 4px 4px 0 var(--sh);
    padding: 14px 14px 16px
}

.demo-modal::backdrop {
    background: rgba(8, 12, 30, .7)
}

.demo-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px
}

.demo-head h2 {
    margin: 0;
    font-size: 18px;
    line-height: 1.25
}

.demo-close {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border: 1px solid var(--bd);
    border-radius: 50%;
    background: var(--yellow);
    color: var(--navy);
    display: grid;
    place-items: center;
    padding: 0;
    cursor: pointer
}

.demo-close svg {
    width: 14px;
    height: 14px
}

.dp {
    position: relative;
    background: #0B1230;
    border: 1px solid var(--bd);
    border-radius: 16px;
    overflow: hidden
}

.dp video {
    display: block;
    width: 100%;
    max-height: 68vh;
    min-height: 180px;
    background: #000;
    cursor: pointer
}

.dp:fullscreen video {
    max-height: calc(100vh - 56px);
    height: calc(100vh - 56px)
}

.dp-big {
    position: absolute;
    left: 50%;
    top: calc(50% - 28px);
    transform: translate(-50%, -50%);
    width: 68px;
    height: 68px;
    border: 1px solid var(--bd);
    border-radius: 50%;
    background: var(--yellow);
    color: var(--navy);
    box-shadow: 0 4px 0 var(--yellow-d);
    display: grid;
    place-items: center;
    padding: 0;
    cursor: pointer;
    transition: transform .15s, opacity .15s
}

.dp-big svg {
    width: 28px;
    height: 28px;
    margin-left: 3px
}

.dp-big:hover {
    transform: translate(-50%, -50%) scale(1.07)
}

.dp.playing .dp-big,
.dp.loading .dp-big,
.dp.failed .dp-big {
    opacity: 0;
    pointer-events: none
}

.dp-spin {
    position: absolute;
    left: 50%;
    top: calc(50% - 28px);
    width: 38px;
    height: 38px;
    margin: -19px 0 0 -19px;
    border: 4px solid rgba(255, 255, 255, .25);
    border-top-color: var(--yellow);
    border-radius: 50%;
    animation: dp-turn .8s linear infinite;
    display: none
}

.dp.loading .dp-spin {
    display: block
}

@keyframes dp-turn {
    to {
        transform: rotate(360deg)
    }
}

.dp-err {
    position: absolute;
    inset: 0 0 56px;
    margin: 0;
    display: none;
    place-items: center;
    padding: 20px;
    text-align: center;
    font-weight: 700;
    color: #fff;
    background: rgba(11, 18, 48, .92)
}

.dp.failed .dp-err {
    display: grid
}

.dp-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    background: #101A3D;
    color: #fff
}

.dp-btn {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 10px;
    background: rgba(255, 255, 255, .1);
    color: #fff;
    display: grid;
    place-items: center;
    padding: 0;
    cursor: pointer;
    transition: background .15s
}

.dp-btn:hover,
.dp-btn:focus-visible {
    background: rgba(255, 255, 255, .22)
}

.dp-btn svg {
    width: 17px;
    height: 17px
}

.dp-time {
    flex: 0 0 auto;
    font-size: 12.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: rgba(255, 255, 255, .8);
    white-space: nowrap
}

.dp-seek {
    --p: 0%;
    flex: 1 1 auto;
    min-width: 0;
    height: 18px;
    margin: 0;
    background: transparent;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none
}

.dp-seek::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 99px;
    background: linear-gradient(to right, var(--yellow) var(--p), rgba(255, 255, 255, .25) var(--p))
}

.dp-seek::-moz-range-track {
    height: 6px;
    border-radius: 99px;
    background: rgba(255, 255, 255, .25)
}

.dp-seek::-moz-range-progress {
    height: 6px;
    border-radius: 99px;
    background: var(--yellow)
}

.dp-seek::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    margin-top: -5px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--yellow)
}

.dp-seek::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--yellow)
}

.dp-seek:focus-visible {
    outline: 2px solid var(--yellow);
    outline-offset: 3px;
    border-radius: 6px
}

@media (max-width:480px) {
    .dp-time {
        display: none
    }

    .dp-bar {
        gap: 8px;
        padding: 8px
    }
}