:root {
                --blue: #2b3be8;
                --blue-deep: #1a249c;
                --blue-soft: #eef0ff;
                --sun: #ffce3a;
                --ink: #0e1220;
                --ink-2: #1a1f33;
                --muted: #5b6275;
                --line: #e4e7f0;
                --bg: #f7f8fc;
                --white: #fff;
                --ok: #12a150;
                --f: "Onest", system-ui, sans-serif;
                --wrap: min(1200px, 100% - 32px);
                --r: 14px;
            }
            * {
                box-sizing: border-box;
                margin: 0;
            }
            html {
                overflow-x: clip;
            }
            body {
                background: var(--white);
                color: var(--ink);
                font: 400 16.5px/1.6 var(--f);
            }
            img,
            svg {
                display: block;
                max-width: 100%;
            }
            a {
                color: inherit;
            }
            button,
            input,
            select,
            textarea {
                font: inherit;
                color: inherit;
            }
            :focus-visible {
                outline: 3px solid var(--blue);
                outline-offset: 3px;
                border-radius: 6px;
            }
            .sr-only {
                position: absolute;
                width: 1px;
                height: 1px;
                overflow: hidden;
                clip: rect(0 0 0 0);
                white-space: nowrap;
            }
            .wrap {
                width: var(--wrap);
                margin-inline: auto;
            }
            h1,
            h2,
            h3 {
                font-weight: 650;
                letter-spacing: -0.03em;
                line-height: 1.08;
            }
            h2 {
                font-size: clamp(2rem, 4.2vw, 3.2rem);
                max-width: 20ch;
            }
            h3 {
                font-size: 1.2rem;
                letter-spacing: -0.015em;
                line-height: 1.25;
            }
            section {
                padding: clamp(80px, 10vw, 128px) 0;
                position: relative;
            }
            .head {
                display: grid;
                gap: 14px;
                margin-bottom: 52px;
            }
            .head.center {
                text-align: center;
                justify-items: center;
            }
            .head p {
                color: var(--muted);
                max-width: 60ch;
                font-size: 1.08rem;
            }
            .eyebrow {
                display: inline-flex;
                align-items: center;
                gap: 8px;
                font-weight: 600;
                color: var(--blue);
                font-size: 0.95rem;
            }
            .eyebrow::before {
                content: "";
                width: 8px;
                height: 8px;
                border-radius: 50%;
                background: var(--blue);
                box-shadow: 0 0 0 4px var(--blue-soft);
            }
            .btn {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                gap: 8px;
                padding: 13px 22px;
                border-radius: 12px;
                font-weight: 600;
                text-decoration: none;
                border: 0;
                cursor: pointer;
                transition:
                    background 0.2s,
                    box-shadow 0.2s;
                will-change: transform;
            }
            .btn-blue {
                background: var(--blue);
                color: #fff;
                box-shadow:
                    0 1px 0 rgba(255, 255, 255, 0.25) inset,
                    0 10px 24px -12px rgba(43, 59, 232, 0.9);
            }
            .btn-blue:hover {
                background: var(--blue-deep);
            }
            .btn-line {
                background: #fff;
                color: var(--ink);
                box-shadow: inset 0 0 0 1.5px var(--line);
            }
            .btn-line:hover {
                box-shadow: inset 0 0 0 1.5px var(--ink);
            }
            .btn-sun {
                background: var(--sun);
                color: var(--ink);
            }
            .btn svg {
                transition: transform 0.25s;
            }
            .btn:hover svg {
                transform: translateX(3px);
            }

            /* Progress & header */
            .progress {
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                height: 3px;
                background: var(--blue);
                transform-origin: left;
                transform: scaleX(0);
                z-index: 70;
            }
            .announce {
                background: var(--ink);
                color: #dde1f0;
                font-size: 0.9rem;
                text-align: center;
                padding: 9px 16px;
            }
            .announce b {
                color: var(--sun);
                font-weight: 600;
            }
            .announce a {
                color: #fff;
                margin-left: 8px;
            }
            .hdr {
                position: sticky;
                top: 0;
                z-index: 60;
                background: rgba(255, 255, 255, 0.82);
                backdrop-filter: blur(14px);
                border-bottom: 1px solid transparent;
                transition: border-color 0.3s;
            }
            .hdr[data-scrolled="true"] {
                border-color: var(--line);
            }
            .hdr .wrap {
                display: flex;
                align-items: center;
                gap: 18px;
                height: 66px;
            }
            .logo {
                display: flex;
                align-items: center;
                gap: 10px;
                font-weight: 700;
                font-size: 1.2rem;
                letter-spacing: -0.03em;
                text-decoration: none;
                margin-right: auto;
            }
            .logo svg {
                width: 30px;
                height: 30px;
            }
            .nav {
                display: flex;
                gap: 2px;
                position: relative;
                padding: 4px;
                border-radius: 12px;
            }
            .nav a {
                position: relative;
                z-index: 1;
                text-decoration: none;
                padding: 7px 13px;
                border-radius: 9px;
                font-weight: 500;
                font-size: 0.95rem;
                color: var(--muted);
                transition: color 0.2s;
            }
            .nav a.on {
                color: var(--ink);
            }
            .nav .pill {
                position: absolute;
                top: 4px;
                left: 0;
                height: calc(100% - 8px);
                background: var(--blue-soft);
                border-radius: 9px;
                opacity: 0;
            }
            .hdr .login {
                text-decoration: none;
                font-weight: 500;
                font-size: 0.95rem;
                padding: 8px 10px;
            }
            @media (max-width: 960px) {
                .nav,
                .hdr .login {
                    display: none;
                }
            }

            /* HERO */
            .hero {
                padding: clamp(56px, 7vw, 88px) 0 40px;
                background: var(--bg);
                overflow: hidden;
                isolation: isolate;
            }
            .hero-grid {
                position: absolute;
                inset: 0;
                z-index: -1;
                background-image:
                    linear-gradient(var(--line) 1px, transparent 1px),
                    linear-gradient(90deg, var(--line) 1px, transparent 1px);
                background-size: 56px 56px;
                mask-image: radial-gradient(
                    ellipse 70% 60% at 50% 30%,
                    #000 30%,
                    transparent 75%
                );
                opacity: 0.8;
            }
            .hero-glow {
                position: absolute;
                z-index: -1;
                width: 620px;
                height: 620px;
                border-radius: 50%;
                background: radial-gradient(
                    circle,
                    rgba(43, 59, 232, 0.22),
                    transparent 65%
                );
                left: 50%;
                top: 0;
                transform: translate(-50%, -30%);
                pointer-events: none;
            }
            .hero .head {
                margin-bottom: 40px;
            }
            .hero h1 {
                font-size: clamp(2.5rem, 6vw, 4.6rem);
                max-width: 16ch;
                letter-spacing: -0.04em;
            }
            .hero h1 .w {
                display: inline-block;
                overflow: hidden;
                vertical-align: top;
                padding-bottom: 0.08em;
            }
            .hero h1 .w > span {
                display: inline-block;
            }
            .hero .sub {
                font-size: 1.15rem;
                max-width: 56ch;
            }
            .hero .cta {
                display: flex;
                gap: 10px;
                flex-wrap: wrap;
                justify-content: center;
                margin-top: 8px;
            }
            .micro {
                display: flex;
                gap: 18px;
                flex-wrap: wrap;
                justify-content: center;
                color: var(--muted);
                font-size: 0.9rem;
                list-style: none;
                padding: 0;
                margin-top: 6px;
            }
            .micro li {
                display: flex;
                gap: 6px;
                align-items: center;
            }
            .micro svg {
                color: var(--ok);
            }

            /* Studio: panel admin + pratinjau */
            .studio {
                position: relative;
                display: grid;
                grid-template-columns: 360px minmax(0, 1fr);
                background: #fff;
                border-radius: 20px;
                box-shadow:
                    0 0 0 1px var(--line),
                    0 50px 100px -40px rgba(26, 36, 156, 0.35),
                    0 20px 40px -30px rgba(14, 18, 32, 0.3);
                overflow: hidden;
                max-width: 1160px;
                margin: 0 auto;
            }
            .panel {
                border-right: 1px solid var(--line);
                display: grid;
                grid-template-columns: 52px minmax(0, 1fr);
                min-height: 560px;
            }
            .rail {
                background: var(--bg);
                border-right: 1px solid var(--line);
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 6px;
                padding: 14px 0;
            }
            .rail i {
                width: 34px;
                height: 34px;
                border-radius: 10px;
                display: grid;
                place-items: center;
                color: var(--muted);
            }
            .rail i.on {
                background: #fff;
                color: var(--blue);
                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
            }
            .rail i:first-child {
                background: var(--blue);
                color: #fff;
                margin-bottom: 10px;
            }
            .form {
                padding: 18px 18px 16px;
                display: flex;
                flex-direction: column;
                gap: 14px;
                min-width: 0;
            }
            .form-top {
                display: flex;
                justify-content: space-between;
                align-items: center;
            }
            .form-top b {
                font-size: 0.98rem;
            }
            .saved {
                font-size: 0.78rem;
                color: var(--muted);
                display: flex;
                align-items: center;
                gap: 6px;
            }
            .saved i {
                width: 7px;
                height: 7px;
                border-radius: 50%;
                background: var(--ok);
            }
            .fld {
                display: grid;
                gap: 6px;
                min-width: 0;
            }
            .fld > span {
                font-size: 0.8rem;
                font-weight: 600;
                color: var(--muted);
            }
            .fld input[type="text"],
            .fld input[type="date"] {
                border: 1.5px solid var(--line);
                border-radius: 10px;
                padding: 9px 11px;
                background: #fff;
                width: 100%;
                font-size: 0.92rem;
                min-width: 0;
            }
            .fld input:focus {
                outline: none;
                border-color: var(--blue);
                box-shadow: 0 0 0 3px var(--blue-soft);
            }
            .fld.hot input {
                border-color: var(--blue);
                box-shadow: 0 0 0 3px var(--blue-soft);
            }
            .range {
                display: flex;
                gap: 10px;
                align-items: center;
            }
            .range input {
                flex: 1;
                accent-color: var(--blue);
                min-width: 0;
            }
            .range output {
                font-weight: 700;
                font-variant-numeric: tabular-nums;
                min-width: 52px;
                text-align: right;
                font-size: 0.92rem;
            }
            .themes-pick {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: 6px;
            }
            .themes-pick button {
                border: 1.5px solid var(--line);
                background: #fff;
                border-radius: 10px;
                padding: 8px 6px;
                cursor: pointer;
                display: grid;
                gap: 6px;
                justify-items: center;
                font-size: 0.8rem;
                font-weight: 600;
                transition:
                    border-color 0.2s,
                    background 0.2s;
            }
            .themes-pick button[aria-pressed="true"] {
                border-color: var(--blue);
                background: var(--blue-soft);
            }
            .themes-pick .sw {
                display: flex;
                gap: 2px;
            }
            .themes-pick .sw i {
                width: 12px;
                height: 12px;
                border-radius: 3px;
            }
            .publish {
                margin-top: auto;
                display: flex;
                gap: 8px;
                align-items: center;
            }
            .publish .btn {
                flex: 1;
                padding: 11px;
            }
            .hint {
                font-size: 0.8rem;
                color: var(--muted);
                text-align: center;
                min-height: 1.2em;
            }

            .preview {
                background: var(--bg);
                display: flex;
                flex-direction: column;
                min-width: 0;
            }
            .bbar {
                display: flex;
                align-items: center;
                gap: 7px;
                padding: 11px 14px;
                border-bottom: 1px solid var(--line);
                background: #fff;
            }
            .bbar i {
                width: 10px;
                height: 10px;
                border-radius: 50%;
                background: #e0e3ee;
                flex: none;
            }
            .bbar .u {
                flex: 1;
                min-width: 0;
                margin-left: 8px;
                border: 1px solid var(--line);
                border-radius: 8px;
                padding: 4px 10px;
                font-size: 0.8rem;
                color: var(--muted);
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                display: flex;
                align-items: center;
                gap: 6px;
            }
            .bbar .u svg {
                color: var(--ok);
                flex: none;
            }
            .bbar .u b {
                color: var(--ink);
                font-weight: 600;
            }
            .live {
                font-size: 0.75rem;
                font-weight: 600;
                color: var(--ok);
                display: flex;
                align-items: center;
                gap: 6px;
            }
            .live i {
                width: 7px;
                height: 7px;
                border-radius: 50%;
                background: var(--ok);
                animation: pulse 1.6s infinite;
            }
            @keyframes pulse {
                0% {
                    box-shadow: 0 0 0 0 rgba(18, 161, 80, 0.5);
                }
                100% {
                    box-shadow: 0 0 0 8px rgba(18, 161, 80, 0);
                }
            }
            .stage {
                position: relative;
                flex: 1;
                padding: 18px;
                overflow: hidden;
            }
            .wipe {
                position: absolute;
                inset: 0;
                transform: scaleX(0);
                transform-origin: left;
                z-index: 5;
                pointer-events: none;
            }
            .toast {
                position: absolute;
                right: 18px;
                bottom: 18px;
                z-index: 6;
                background: var(--ink);
                color: #fff;
                border-radius: 12px;
                padding: 10px 14px;
                font-size: 0.88rem;
                font-weight: 500;
                display: flex;
                gap: 8px;
                align-items: center;
                opacity: 0;
                transform: translateY(10px);
            }
            .toast svg {
                color: var(--sun);
            }
            .cursor {
                position: absolute;
                z-index: 20;
                left: 0;
                top: 0;
                width: 22px;
                height: 22px;
                pointer-events: none;
                opacity: 0;
                filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.3));
            }
            @media (max-width: 980px) {
                .studio {
                    grid-template-columns: minmax(0, 1fr);
                }
                .panel {
                    border-right: 0;
                    border-top: 1px solid var(--line);
                    order: 2;
                    min-height: 0;
                }
                .preview {
                    order: 1;
                }
                .cursor {
                    display: none;
                }
            }

            /* Situs mini dengan tiga kulit tema */
            .site {
                height: 100%;
                min-height: 440px;
                border-radius: 12px;
                overflow: hidden;
                position: relative;
                display: flex;
                flex-direction: column;
                box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.35);
            }
            .s-nav {
                display: flex;
                align-items: center;
                gap: 10px;
                padding: 12px 16px;
                position: relative;
                z-index: 2;
            }
            .s-logo {
                width: 22px;
                height: 22px;
                border-radius: 6px;
                flex: none;
            }
            .s-short {
                font-size: 0.82rem;
                margin-right: auto;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                min-width: 0;
            }
            .s-nav i {
                width: 34px;
                height: 6px;
                border-radius: 4px;
                opacity: 0.35;
                background: currentColor;
                flex: none;
            }
            .s-cta {
                font-size: 0.72rem;
                font-weight: 700;
                padding: 6px 10px;
                border-radius: 6px;
                flex: none;
            }
            .s-hero {
                padding: 18px 20px 10px;
                position: relative;
                z-index: 2;
                max-width: 68%;
            }
            .s-kicker {
                font-size: 0.72rem;
                font-weight: 700;
                margin-bottom: 8px;
            }
            .s-name {
                font-size: clamp(1.5rem, 3.2vw, 2.5rem);
                line-height: 1;
                letter-spacing: -0.02em;
                min-height: 1em;
                overflow-wrap: anywhere;
            }
            .s-tag {
                font-size: 0.8rem;
                margin-top: 10px;
                opacity: 0.8;
                max-width: 34ch;
            }
            .s-cd {
                display: flex;
                gap: 6px;
                margin-top: 16px;
                align-items: center;
                flex-wrap: wrap;
            }
            .s-cd small.l {
                font-size: 0.72rem;
                font-weight: 700;
                width: 100%;
                margin-bottom: 2px;
            }
            .s-cd div {
                min-width: 50px;
                text-align: center;
                padding: 6px 6px 4px;
                border-radius: 6px;
            }
            .s-cd b {
                display: block;
                font-size: 1.25rem;
                line-height: 1;
                font-variant-numeric: tabular-nums;
            }
            .s-cd div small {
                font-size: 0.62rem;
                opacity: 0.8;
            }
            .s-stats {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: 8px;
                padding: 10px 20px;
                position: relative;
                z-index: 2;
                margin-top: auto;
            }
            .s-stats div {
                padding: 10px 12px;
                border-radius: 8px;
            }
            .s-stats b {
                display: block;
                font-size: 1.4rem;
                line-height: 1.1;
                font-variant-numeric: tabular-nums;
            }
            .s-stats small {
                font-size: 0.7rem;
                opacity: 0.8;
            }
            .s-cards {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: 8px;
                padding: 0 20px 18px;
                position: relative;
                z-index: 2;
            }
            .s-cards div {
                height: 46px;
                border-radius: 8px;
            }
            .deco {
                position: absolute;
                pointer-events: none;
                z-index: 1;
                opacity: 0;
            }
            .site[data-skin="pusaka"] {
                background: #f3f5f6;
                color: #16203d;
                font-family: var(--f);
            }
            .site[data-skin="pusaka"] .s-name,
            .site[data-skin="pusaka"] .s-short,
            .site[data-skin="pusaka"] .s-cd b,
            .site[data-skin="pusaka"] .s-stats b {
                font-family: "Young Serif", serif;
                font-weight: 400;
            }
            .site[data-skin="pusaka"] .s-logo {
                background: #1d2b53;
            }
            .site[data-skin="pusaka"] .s-cta {
                background: #1d2b53;
                color: #fff;
            }
            .site[data-skin="pusaka"] .s-kicker {
                color: #b3261e;
            }
            .site[data-skin="pusaka"] .s-cd div {
                background: #16203d;
                color: #fff;
            }
            .site[data-skin="pusaka"] .s-stats div {
                background: #fff;
                border: 1px solid #d3d9df;
            }
            .site[data-skin="pusaka"] .s-cards div {
                background: #fff;
                border: 1px solid #e9ddbd;
            }
            .site[data-skin="pusaka"] .d-pusaka {
                opacity: 1;
            }
            .site[data-skin="presisi"] {
                background-color: #0b3a82;
                color: #fff;
                background-image:
                    linear-gradient(
                        rgba(255, 255, 255, 0.08) 1px,
                        transparent 1px
                    ),
                    linear-gradient(
                        90deg,
                        rgba(255, 255, 255, 0.08) 1px,
                        transparent 1px
                    );
                background-size: 28px 28px;
                font-family: "Archivo", sans-serif;
            }
            .site[data-skin="presisi"] .s-name,
            .site[data-skin="presisi"] .s-short {
                font-weight: 900;
                font-variation-settings: "wdth" 125;
            }
            .site[data-skin="presisi"] .s-name {
                color: #ffc400;
            }
            .site[data-skin="presisi"] .s-logo {
                background: #ffc400;
                border-radius: 0;
            }
            .site[data-skin="presisi"] .s-cta {
                background: #ffc400;
                color: #0f1a2e;
                border-radius: 0;
            }
            .site[data-skin="presisi"] .s-kicker {
                color: #b8c8e6;
            }
            .site[data-skin="presisi"] .s-cd div {
                background: #0f1a2e;
                color: #ffc400;
                border-radius: 2px;
            }
            .site[data-skin="presisi"] .s-cd b {
                font-weight: 900;
                font-variation-settings: "wdth" 80;
            }
            .site[data-skin="presisi"] .s-stats div {
                background: #0f1a2e;
                border-radius: 0;
            }
            .site[data-skin="presisi"] .s-stats b {
                color: #ffc400;
                font-weight: 900;
                font-variation-settings: "wdth" 90;
            }
            .site[data-skin="presisi"] .s-cards div {
                background: #fff;
                border-top: 4px solid #ffc400;
                border-radius: 0;
            }
            .site[data-skin="presisi"] .d-presisi {
                opacity: 1;
            }
            .site[data-skin="cakrawala"] {
                background: linear-gradient(#bfe0f0, #eaf5f4 60%, #f4f9f2);
                color: #14261d;
                font-family: "Bricolage Grotesque", sans-serif;
            }
            .site[data-skin="cakrawala"] .s-name,
            .site[data-skin="cakrawala"] .s-short {
                font-weight: 800;
            }
            .site[data-skin="cakrawala"] .s-nav {
                background: rgba(255, 255, 255, 0.75);
                margin: 10px;
                border-radius: 30px;
                padding: 8px 10px 8px 14px;
            }
            .site[data-skin="cakrawala"] .s-logo {
                background: #1e6b47;
                border-radius: 50%;
            }
            .site[data-skin="cakrawala"] .s-cta {
                background: #1e6b47;
                color: #fff;
                border-radius: 20px;
            }
            .site[data-skin="cakrawala"] .s-kicker {
                color: #1e6b47;
            }
            .site[data-skin="cakrawala"] .s-cd div {
                background: #fff;
                color: #1e6b47;
                border-radius: 12px;
            }
            .site[data-skin="cakrawala"] .s-stats div {
                background: rgba(255, 255, 255, 0.85);
                border-radius: 16px;
            }
            .site[data-skin="cakrawala"] .s-stats b {
                color: #1e6b47;
                font-weight: 800;
            }
            .site[data-skin="cakrawala"] .s-cards div {
                background: #2f8a5e;
                border-radius: 16px;
                opacity: 0.85;
            }
            .site[data-skin="cakrawala"] .d-cakrawala {
                opacity: 1;
            }
            .d-pusaka {
                right: 8%;
                top: 10px;
                width: 90px;
                height: 230px;
            }
            .d-presisi {
                right: 4%;
                top: 40px;
                width: 210px;
                height: 210px;
            }
            .d-cakrawala {
                inset: 0;
                width: 100%;
                height: 100%;
            }
            @media (max-width: 600px) {
                .s-hero {
                    max-width: 100%;
                }
                .d-pusaka,
                .d-presisi {
                    opacity: 0 !important;
                }
                .s-nav i {
                    display: none;
                }
            }

            /* Masalah */
            .probs {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: 16px;
            }
            .prob {
                border: 1px solid var(--line);
                border-radius: 18px;
                padding: 26px;
                background: #fff;
                transition:
                    border-color 0.25s,
                    transform 0.3s;
            }
            .prob:hover {
                border-color: var(--blue);
                transform: translateY(-4px);
            }
            .prob b {
                display: block;
                font-size: clamp(2.4rem, 4.4vw, 3.2rem);
                font-weight: 700;
                letter-spacing: -0.04em;
                line-height: 1;
                color: var(--blue);
                margin-bottom: 10px;
            }
            .prob h3 {
                margin-bottom: 6px;
            }
            .prob p {
                color: var(--muted);
                font-size: 0.96rem;
            }
            @media (max-width: 900px) {
                .probs {
                    grid-template-columns: 1fr;
                }
            }

            /* Cara kerja (dipin) */
            .how {
                background: var(--ink);
                color: #fff;
                padding: 0;
            }
            .how-in {
                min-height: 100vh;
                display: grid;
                grid-template-columns: 0.9fr 1.1fr;
                gap: clamp(24px, 5vw, 72px);
                align-items: center;
                padding: 96px 0;
            }
            .how .eyebrow {
                color: var(--sun);
            }
            .how .eyebrow::before {
                background: var(--sun);
                box-shadow: 0 0 0 4px rgba(255, 206, 58, 0.18);
            }
            .how .head p {
                color: #a7adc2;
            }
            .steps {
                list-style: none;
                padding: 0;
                display: grid;
                gap: 8px;
            }
            .steps li {
                border-radius: 14px;
                padding: 16px 18px;
                cursor: pointer;
                transition: background 0.3s;
                display: grid;
                grid-template-columns: 34px 1fr;
                gap: 4px 14px;
            }
            .steps li .n {
                grid-row: span 3;
                width: 34px;
                height: 34px;
                border-radius: 50%;
                border: 1.5px solid #3a4160;
                display: grid;
                place-items: center;
                font-weight: 700;
                font-size: 0.9rem;
                transition: all 0.3s;
            }
            .steps li p {
                color: #8c93ab;
                font-size: 0.95rem;
                transition: color 0.3s;
            }
            .steps li.on {
                background: var(--ink-2);
            }
            .steps li.on .n {
                background: var(--sun);
                border-color: var(--sun);
                color: var(--ink);
            }
            .steps li.on p {
                color: #c9cee0;
            }
            .steps .bar {
                height: 2px;
                background: #2a3150;
                border-radius: 2px;
                overflow: hidden;
                margin-top: 6px;
            }
            .steps .bar span {
                display: block;
                height: 100%;
                background: var(--sun);
                transform: scaleX(0);
                transform-origin: left;
            }
            .vis {
                position: relative;
                aspect-ratio: 1.15;
                background: var(--ink-2);
                border-radius: 22px;
                border: 1px solid #2a3150;
                overflow: hidden;
            }
            .v {
                position: absolute;
                inset: 0;
                padding: clamp(18px, 3vw, 32px);
                display: flex;
                flex-direction: column;
                gap: 12px;
                opacity: 0;
                visibility: hidden;
            }
            .v.on {
                opacity: 1;
                visibility: visible;
            }
            .v h4 {
                font-size: 0.9rem;
                color: #a7adc2;
                font-weight: 500;
                display: flex;
                gap: 8px;
                align-items: center;
            }
            .imp-bar {
                height: 8px;
                background: #2a3150;
                border-radius: 8px;
                overflow: hidden;
            }
            .imp-bar span {
                display: block;
                height: 100%;
                width: 0;
                background: linear-gradient(90deg, var(--blue), #6c7bff);
            }
            .imp-rows {
                list-style: none;
                padding: 0;
                display: grid;
                gap: 8px;
            }
            .imp-rows li {
                display: grid;
                grid-template-columns: 1fr auto 26px;
                gap: 12px;
                align-items: center;
                background: #20263d;
                border-radius: 10px;
                padding: 11px 14px;
                font-size: 0.95rem;
            }
            .imp-rows b {
                font-variant-numeric: tabular-nums;
            }
            .imp-rows .ck {
                width: 22px;
                height: 22px;
                border-radius: 50%;
                background: var(--ok);
                display: grid;
                place-items: center;
                transform: scale(0);
            }
            .fan {
                position: relative;
                flex: 1;
            }
            .fan .card {
                position: absolute;
                left: 50%;
                top: 50%;
                width: 52%;
                aspect-ratio: 4/3.1;
                margin: -19% 0 0 -26%;
                border-radius: 12px;
                overflow: hidden;
                box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.6);
            }
            .fan .card .site {
                min-height: 0;
                height: 100%;
                border-radius: 0;
            }
            .fan .card .site .s-hero {
                padding: 10px 12px 4px;
                max-width: 80%;
            }
            .fan .card .site .s-name {
                font-size: 1.05rem;
            }
            .fan .card .site .s-tag,
            .fan .card .site .s-cd,
            .fan .card .site .s-kicker {
                display: none;
            }
            .fan .card .site .s-stats {
                padding: 6px 12px;
                gap: 5px;
            }
            .fan .card .site .s-stats div {
                padding: 5px 7px;
            }
            .fan .card .site .s-stats b {
                font-size: 0.85rem;
            }
            .fan .card .site .s-stats small {
                font-size: 0.55rem;
            }
            .fan .card .site .s-cards {
                padding: 0 12px 10px;
                gap: 5px;
            }
            .fan .card .site .s-cards div {
                height: 20px;
            }
            .fan .card .site .s-nav {
                padding: 6px 10px;
                gap: 6px;
            }
            .fan .card .site .s-nav i {
                width: 14px;
            }
            .fan .card .site .s-short,
            .fan .card .site .s-cta {
                font-size: 0.55rem;
            }
            .fan .card .d-pusaka {
                width: 40px;
                height: 110px;
            }
            .fan .card .d-presisi {
                width: 90px;
                height: 90px;
                top: 24px;
            }
            .fan .card.sel {
                outline: 3px solid var(--sun);
                outline-offset: 4px;
            }
            .url-type {
                background: #fff;
                color: var(--ink);
                border-radius: 12px;
                padding: 14px 16px;
                display: flex;
                gap: 10px;
                align-items: center;
                font-size: 1.05rem;
            }
            .url-type svg {
                color: var(--ok);
                flex: none;
            }
            .url-type .caret {
                width: 2px;
                height: 1.1em;
                background: var(--blue);
                animation: blink 1s steps(1) infinite;
            }
            @keyframes blink {
                50% {
                    opacity: 0;
                }
            }
            .badges {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 10px;
            }
            .badges div {
                background: #20263d;
                border-radius: 12px;
                padding: 14px;
                display: flex;
                gap: 10px;
                align-items: center;
                font-weight: 500;
                transform: scale(0.6);
                opacity: 0;
            }
            .badges svg {
                color: var(--sun);
                flex: none;
            }
            .launch {
                margin-top: auto;
                display: flex;
                align-items: center;
                gap: 12px;
                background: linear-gradient(
                    90deg,
                    rgba(18, 161, 80, 0.18),
                    transparent
                );
                border: 1px solid rgba(18, 161, 80, 0.4);
                border-radius: 12px;
                padding: 14px 16px;
                opacity: 0;
            }
            .launch .live i {
                background: #3fd37e;
            }
            @media (max-width: 900px) {
                .how-in {
                    grid-template-columns: minmax(0, 1fr);
                    min-height: 0;
                    padding: 80px 0;
                }
                .vis {
                    aspect-ratio: auto;
                    min-height: 420px;
                }
                .badges {
                    grid-template-columns: 1fr;
                }
            }

            /* Fitur: tab auto */
            .ftabs {
                display: grid;
                grid-template-columns: repeat(4, 1fr);
                gap: 8px;
                margin-bottom: 22px;
            }
            .ftab {
                border: 0;
                background: var(--bg);
                border-radius: 14px;
                padding: 16px;
                text-align: left;
                cursor: pointer;
                display: grid;
                gap: 4px;
                position: relative;
                overflow: hidden;
                transition: background 0.25s;
            }
            .ftab b {
                font-weight: 600;
            }
            .ftab small {
                color: var(--muted);
                font-size: 0.86rem;
                line-height: 1.4;
            }
            .ftab .tl {
                position: absolute;
                left: 0;
                bottom: 0;
                height: 3px;
                width: 100%;
                background: var(--blue);
                transform: scaleX(0);
                transform-origin: left;
            }
            .ftab[aria-selected="true"] {
                background: var(--blue-soft);
            }
            .fpanels {
                position: relative;
                background: var(--bg);
                border-radius: 22px;
                border: 1px solid var(--line);
                overflow: hidden;
                display: grid;
            }
            .fp {
                grid-area: 1/1;
                padding: clamp(18px, 3vw, 34px);
                display: grid;
                grid-template-columns: 0.8fr 1.2fr;
                gap: 28px;
                align-items: center;
            }
            .fp[hidden] {
                display: none;
            }
            .fp .copy h3 {
                font-size: 1.6rem;
                margin-bottom: 10px;
            }
            .fp .copy p {
                color: var(--muted);
            }
            .fp .copy ul {
                list-style: none;
                padding: 0;
                display: grid;
                gap: 8px;
                margin-top: 16px;
            }
            .fp .copy li {
                display: flex;
                gap: 8px;
                font-size: 0.95rem;
            }
            .fp .copy li svg {
                color: var(--blue);
                flex: none;
                margin-top: 4px;
            }
            .mock {
                background: #fff;
                border-radius: 16px;
                box-shadow:
                    0 0 0 1px var(--line),
                    0 30px 60px -30px rgba(26, 36, 156, 0.3);
                padding: 18px;
                display: grid;
                gap: 14px;
                min-width: 0;
            }
            .kpis {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: 10px;
            }
            .kpis div {
                background: var(--bg);
                border-radius: 12px;
                padding: 12px;
            }
            .kpis small {
                color: var(--muted);
                font-size: 0.78rem;
                display: block;
            }
            .kpis b {
                font-size: 1.5rem;
                font-variant-numeric: tabular-nums;
                letter-spacing: -0.02em;
            }
            .kpis .up {
                color: var(--ok);
                font-size: 0.75rem;
                font-weight: 600;
                display: block;
            }
            .jbars {
                display: grid;
                grid-template-columns: repeat(4, 1fr);
                gap: 10px;
                align-items: end;
                height: 110px;
                padding: 0 4px;
                border-bottom: 1px solid var(--line);
            }
            .jbars div {
                display: flex;
                flex-direction: column;
                gap: 4px;
                align-items: center;
                justify-content: flex-end;
                height: 100%;
            }
            .jbars span {
                width: 100%;
                max-width: 46px;
                background: var(--blue);
                border-radius: 6px 6px 0 0;
                transform-origin: bottom;
            }
            .jbars div:nth-child(2) span {
                background: #6c7bff;
            }
            .jbars div:nth-child(3) span {
                background: var(--sun);
            }
            .jbars div:nth-child(4) span {
                background: #c9ceff;
            }
            .jbars small {
                font-size: 0.72rem;
                color: var(--muted);
            }
            .feed {
                list-style: none;
                padding: 0;
                display: flex;
                flex-direction: column;
                gap: 6px;
                height: 150px;
                overflow: hidden;
            }
            .feed li {
                display: grid;
                grid-template-columns: 30px 1fr auto;
                gap: 10px;
                align-items: center;
                font-size: 0.86rem;
                line-height: 1.3;
                background: var(--bg);
                border-radius: 10px;
                padding: 7px 10px;
                flex: none;
            }
            .feed .av {
                width: 30px;
                height: 30px;
                border-radius: 50%;
                background: var(--blue-soft);
                color: var(--blue);
                display: grid;
                place-items: center;
                font-weight: 700;
                font-size: 0.75rem;
            }
            .feed small {
                color: var(--muted);
            }
            .tagj {
                font-size: 0.72rem;
                font-weight: 700;
                padding: 3px 8px;
                border-radius: 20px;
                background: var(--blue-soft);
                color: var(--blue);
            }
            .drop {
                border: 2px dashed var(--line);
                border-radius: 12px;
                padding: 16px;
                display: flex;
                gap: 12px;
                align-items: center;
                cursor: pointer;
                transition:
                    border-color 0.2s,
                    background 0.2s;
                background: none;
                text-align: left;
                width: 100%;
            }
            .drop:hover {
                border-color: var(--blue);
                background: var(--blue-soft);
            }
            .drop .fi {
                width: 40px;
                height: 40px;
                border-radius: 10px;
                background: #e6f6ec;
                color: var(--ok);
                display: grid;
                place-items: center;
                flex: none;
            }
            .drop small {
                color: var(--muted);
                display: block;
            }
            .upbar {
                height: 6px;
                background: var(--line);
                border-radius: 6px;
                overflow: hidden;
            }
            .upbar span {
                display: block;
                height: 100%;
                width: 0;
                background: var(--ok);
            }
            .bosv {
                display: grid;
                grid-template-columns: 150px 1fr;
                gap: 18px;
                align-items: center;
            }
            .bosv svg {
                transform: rotate(-90deg);
            }
            .bosv circle {
                fill: none;
                stroke-width: 22;
            }
            .bosl {
                list-style: none;
                padding: 0;
                display: grid;
                gap: 6px;
                font-size: 0.86rem;
            }
            .bosl li {
                display: grid;
                grid-template-columns: 10px 1fr auto;
                gap: 8px;
                align-items: center;
            }
            .bosl i {
                width: 10px;
                height: 10px;
                border-radius: 3px;
            }
            .jobform {
                display: grid;
                grid-template-columns: 1fr 1fr auto;
                gap: 8px;
                align-items: end;
            }
            .jobform label {
                display: grid;
                gap: 4px;
                font-size: 0.75rem;
                font-weight: 600;
                color: var(--muted);
                min-width: 0;
            }
            .jobform .in {
                border: 1.5px solid var(--line);
                border-radius: 9px;
                padding: 8px 10px;
                font-size: 0.88rem;
                min-height: 38px;
                color: var(--ink);
                font-weight: 500;
                background: #fff;
                white-space: nowrap;
                overflow: hidden;
            }
            .jobform .btn {
                padding: 9px 14px;
                font-size: 0.88rem;
            }
            .board {
                background: #0f1a2e;
                border-radius: 12px;
                padding: 8px;
                display: grid;
                gap: 4px;
                height: 196px;
                align-content: start;
                overflow: hidden;
            }
            .board .row {
                display: grid;
                grid-template-columns: 54px 1fr auto;
                gap: 10px;
                align-items: center;
                color: #fff;
                font-size: 0.86rem;
                padding: 8px;
                border-radius: 8px;
                background: #1a2640;
            }
            .board .row .m {
                background: #ffc400;
                color: #0f1a2e;
                font-weight: 800;
                text-align: center;
                border-radius: 4px;
                font-size: 0.72rem;
                padding: 3px 0;
            }
            .board .row small {
                color: #ffc400;
                font-weight: 600;
            }
            .board .row span {
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            .chat {
                background: #efe7dd;
                border-radius: 14px;
                padding: 14px;
                display: grid;
                gap: 8px;
                min-height: 280px;
                align-content: start;
                background-image: radial-gradient(
                    rgba(0, 0, 0, 0.04) 1px,
                    transparent 1px
                );
                background-size: 14px 14px;
                overflow: hidden;
            }
            .chat-h {
                display: flex;
                gap: 10px;
                align-items: center;
                background: #075e54;
                color: #fff;
                margin: -14px -14px 6px;
                padding: 10px 14px;
                font-size: 0.9rem;
            }
            .chat-h .av {
                width: 30px;
                height: 30px;
                border-radius: 50%;
                background: #fff;
                color: #075e54;
                display: grid;
                place-items: center;
                font-weight: 700;
                font-size: 0.75rem;
            }
            .chat-h small {
                display: block;
                opacity: 0.8;
                font-size: 0.72rem;
            }
            .msg {
                max-width: 80%;
                padding: 8px 11px;
                border-radius: 10px;
                font-size: 0.88rem;
                line-height: 1.4;
                box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
            }
            .msg.in {
                background: #fff;
                justify-self: start;
                border-top-left-radius: 2px;
            }
            .msg.out {
                background: #d9fdd3;
                justify-self: end;
                border-top-right-radius: 2px;
            }
            .msg small {
                display: block;
                text-align: right;
                font-size: 0.66rem;
                color: #667;
            }
            .msg.form {
                border-left: 3px solid var(--blue);
            }
            .typing {
                justify-self: end;
                background: #d9fdd3;
                padding: 10px 12px;
                border-radius: 10px;
                display: flex;
                gap: 4px;
            }
            .typing i {
                width: 6px;
                height: 6px;
                border-radius: 50%;
                background: #6b8f6b;
                animation: tp 1s infinite;
            }
            .typing i:nth-child(2) {
                animation-delay: 0.15s;
            }
            .typing i:nth-child(3) {
                animation-delay: 0.3s;
            }
            @keyframes tp {
                0%,
                60%,
                100% {
                    transform: none;
                    opacity: 0.5;
                }
                30% {
                    transform: translateY(-4px);
                    opacity: 1;
                }
            }
            @media (max-width: 980px) {
                .ftabs {
                    grid-template-columns: 1fr 1fr;
                }
                .fp {
                    grid-template-columns: minmax(0, 1fr);
                }
            }
            @media (max-width: 560px) {
                .ftab small {
                    display: none;
                }
                .kpis {
                    grid-template-columns: 1fr 1fr;
                }
                .jobform {
                    grid-template-columns: minmax(0, 1fr);
                }
                .bosv {
                    grid-template-columns: 1fr;
                }
                .bosv svg {
                    max-width: 150px;
                    margin: auto;
                }
            }

            /* Tema */
            .themes {
                background: var(--bg);
            }
            .tgrid {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: 20px;
                perspective: 1200px;
            }
            .tcard {
                background: #fff;
                border-radius: 20px;
                overflow: hidden;
                box-shadow: 0 0 0 1px var(--line);
                position: relative;
                transform-style: preserve-3d;
                will-change: transform;
            }
            .tcard::after {
                content: "";
                position: absolute;
                inset: 0;
                pointer-events: none;
                background: radial-gradient(
                    360px circle at var(--mx, 50%) var(--my, 50%),
                    rgba(255, 255, 255, 0.35),
                    transparent 45%
                );
                opacity: 0;
                transition: opacity 0.3s;
                z-index: 3;
            }
            .tcard:hover::after {
                opacity: 1;
            }
            .tprev {
                aspect-ratio: 4/3.1;
                position: relative;
                overflow: hidden;
                background: #fff;
                border-bottom: 1px solid var(--line);
            }
            .tprev iframe {
                position: absolute;
                left: 0;
                top: 0;
                width: 1440px;
                height: 1116px;
                border: 0;
                transform-origin: 0 0;
                pointer-events: none;
                max-width: none;
            }
            .tbody {
                padding: 20px 22px 24px;
                display: grid;
                gap: 10px;
            }
            .tbody p {
                color: var(--muted);
                font-size: 0.95rem;
            }
            .tmeta {
                display: flex;
                justify-content: space-between;
                align-items: center;
            }
            .swatch {
                display: flex;
                gap: 5px;
            }
            .swatch i {
                width: 18px;
                height: 18px;
                border-radius: 5px;
                box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
            }
            .fit {
                font-size: 0.88rem;
            }
            .fit b {
                font-weight: 600;
            }
            .tbody a {
                font-weight: 600;
                color: var(--blue);
                text-decoration: none;
                display: inline-flex;
                gap: 6px;
                align-items: center;
            }
            @media (max-width: 1000px) {
                .tgrid {
                    grid-template-columns: 1fr;
                }
            }

            /* Integrasi */
            .integ {
                display: grid;
                grid-template-columns: repeat(6, 1fr);
                gap: 12px;
            }
            .ig {
                border: 1px solid var(--line);
                border-radius: 16px;
                padding: 18px;
                display: grid;
                gap: 8px;
                justify-items: start;
                background: #fff;
                transition:
                    border-color 0.2s,
                    transform 0.3s;
            }
            .ig:hover {
                border-color: var(--blue);
                transform: translateY(-4px);
            }
            .ig .gi {
                width: 40px;
                height: 40px;
                border-radius: 12px;
                display: grid;
                place-items: center;
                color: #fff;
                font-weight: 800;
                font-size: 0.9rem;
            }
            .ig b {
                font-weight: 600;
                font-size: 0.95rem;
            }
            .ig small {
                color: var(--muted);
                font-size: 0.82rem;
                line-height: 1.4;
            }
            @media (max-width: 1000px) {
                .integ {
                    grid-template-columns: repeat(2, 1fr);
                }
            }

            /* Perbandingan */
            .cmp-wrap {
                overflow-x: auto;
                border: 1px solid var(--line);
                border-radius: 18px;
            }
            .cmp {
                width: 100%;
                border-collapse: collapse;
                min-width: 680px;
            }
            .cmp th,
            .cmp td {
                padding: 15px 18px;
                text-align: left;
                border-bottom: 1px solid var(--line);
                font-size: 0.95rem;
            }
            .cmp thead th {
                font-size: 0.88rem;
                color: var(--muted);
                font-weight: 600;
            }
            .cmp .us {
                background: var(--blue-soft);
            }
            .cmp thead .us {
                color: var(--blue);
            }
            .cmp td.us {
                font-weight: 600;
            }
            .cmp tr:last-child td,
            .cmp tr:last-child th {
                border-bottom: 0;
            }
            .yes {
                color: var(--blue);
                display: inline-block;
            }
            .no {
                color: #b0b5c6;
            }

            /* Harga */
            .pricing {
                background: var(--bg);
            }
            .toggle {
                position: relative;
                display: inline-flex;
                background: #fff;
                border-radius: 40px;
                padding: 4px;
                border: 1px solid var(--line);
                margin-top: 10px;
            }
            .toggle button {
                position: relative;
                z-index: 1;
                border: 0;
                background: none;
                padding: 9px 18px;
                border-radius: 40px;
                cursor: pointer;
                font-weight: 600;
                transition: color 0.25s;
            }
            .toggle button[aria-pressed="true"] {
                color: #fff;
            }
            .toggle .knob {
                position: absolute;
                top: 4px;
                bottom: 4px;
                left: 0;
                border-radius: 40px;
                background: var(--ink);
            }
            .plans {
                display: grid;
                grid-template-columns: repeat(3, minmax(0, 1fr));
                gap: 16px;
            }
            .plan {
                position: relative;
                background: #fff;
                border-radius: 20px;
                padding: 28px;
                display: flex;
                flex-direction: column;
                gap: 12px;
                box-shadow: 0 0 0 1px var(--line);
                overflow: hidden;
                isolation: isolate;
            }
            .plan::before {
                content: "";
                position: absolute;
                inset: 0;
                z-index: -1;
                background: radial-gradient(
                    420px circle at var(--mx, 50%) var(--my, -20%),
                    rgba(43, 59, 232, 0.12),
                    transparent 50%
                );
                opacity: 0;
                transition: opacity 0.3s;
            }
            .plan:hover::before {
                opacity: 1;
            }
            .plan.pop {
                box-shadow:
                    0 0 0 2px var(--blue),
                    0 30px 60px -30px rgba(43, 59, 232, 0.5);
            }
            .plan .tag {
                align-self: start;
                background: var(--blue);
                color: #fff;
                border-radius: 30px;
                padding: 3px 11px;
                font-size: 0.78rem;
                font-weight: 600;
            }
            .price {
                display: flex;
                align-items: baseline;
                gap: 6px;
                flex-wrap: wrap;
            }
            .price b {
                font-size: 2.4rem;
                font-weight: 700;
                letter-spacing: -0.03em;
            }
            .price span {
                color: var(--muted);
                font-size: 0.9rem;
            }
            .plan .sub {
                color: var(--muted);
                font-size: 0.93rem;
                min-height: 2.8em;
            }
            .plan ul {
                list-style: none;
                padding: 0;
                display: grid;
                gap: 9px;
                margin: 4px 0 10px;
            }
            .plan li {
                display: flex;
                gap: 9px;
                font-size: 0.94rem;
            }
            .plan li svg {
                flex: none;
                color: var(--blue);
                margin-top: 4px;
            }
            .plan .btn {
                margin-top: auto;
            }
            .pnote {
                margin-top: 20px;
                color: var(--muted);
                font-size: 0.9rem;
                text-align: center;
            }
            @media (max-width: 900px) {
                .plans {
                    grid-template-columns: minmax(0, 1fr);
                }
                .price b {
                    font-size: 2.1rem;
                }
            }

            /* Daftar */
            .join {
                display: grid;
                grid-template-columns: 0.85fr 1.15fr;
                gap: clamp(28px, 5vw, 64px);
                align-items: start;
            }
            .join-side ul {
                list-style: none;
                padding: 0;
                display: grid;
                gap: 12px;
                margin-top: 22px;
            }
            .join-side li {
                display: flex;
                gap: 12px;
            }
            .join-side li svg {
                flex: none;
                color: var(--blue);
                margin-top: 4px;
            }
            form.wl {
                background: #fff;
                border-radius: 22px;
                padding: clamp(22px, 3vw, 32px);
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 14px;
                align-items: start;
                box-shadow:
                    0 0 0 1px var(--line),
                    0 40px 80px -40px rgba(26, 36, 156, 0.35);
            }
            .field {
                display: grid;
                gap: 6px;
                min-width: 0;
                align-content: start;
            }
            .field.wide {
                grid-column: 1/-1;
            }
            .field label,
            .field legend {
                font-weight: 600;
                font-size: 0.9rem;
            }
            .field input,
            .field select,
            .field textarea {
                background: var(--bg);
                border: 1.5px solid var(--line);
                border-radius: 11px;
                padding: 11px 13px;
                width: 100%;
            }
            form.wl .field input,
            form.wl .field select {
                height: 52px;
                padding: 0 14px;
            }
            form.wl .field select {
                padding-right: 36px;
            }
            .field input:focus,
            .field select:focus,
            .field textarea:focus {
                outline: none;
                border-color: var(--blue);
                box-shadow: 0 0 0 3px var(--blue-soft);
                background: #fff;
            }
            .field [aria-invalid="true"] {
                border-color: #e5484d;
            }
            .err {
                color: #c4282d;
                font-size: 0.84rem;
                min-height: 1em;
            }
            fieldset.field {
                border: 0;
                padding: 0;
            }
            .opts {
                display: flex;
                flex-wrap: wrap;
                gap: 8px;
                margin-top: 4px;
            }
            .opts label {
                position: relative;
                cursor: pointer;
            }
            .opts input {
                position: absolute;
                opacity: 0;
                pointer-events: none;
            }
            .opts span {
                display: block;
                border: 1.5px solid var(--line);
                border-radius: 30px;
                padding: 7px 14px;
                font-weight: 500;
                font-size: 0.9rem;
                transition: all 0.2s;
            }
            .opts input:checked + span {
                background: var(--ink);
                border-color: var(--ink);
                color: #fff;
            }
            .opts input:focus-visible + span {
                outline: 3px solid var(--blue);
                outline-offset: 2px;
            }
            form.wl .btn {
                grid-column: 1/-1;
            }
            .done {
                grid-column: 1/-1;
                background: #e6f6ec;
                color: #0b6b36;
                border-radius: 12px;
                padding: 14px 16px;
                font-weight: 600;
                display: flex;
                gap: 10px;
                align-items: center;
            }
            @media (max-width: 900px) {
                .join {
                    grid-template-columns: minmax(0, 1fr);
                }
                form.wl {
                    grid-template-columns: minmax(0, 1fr);
                }
            }

            /* FAQ */
            .faq {
                max-width: 820px;
                margin: 0 auto;
                display: grid;
                gap: 10px;
            }
            .faq details {
                border: 1px solid var(--line);
                border-radius: 16px;
                background: #fff;
                transition: border-color 0.2s;
            }
            .faq details[open] {
                border-color: var(--blue);
            }
            .faq summary {
                list-style: none;
                cursor: pointer;
                display: flex;
                justify-content: space-between;
                gap: 16px;
                padding: 18px 22px;
                font-weight: 600;
            }
            .faq summary::-webkit-details-marker {
                display: none;
            }
            .faq summary i {
                flex: none;
                width: 26px;
                height: 26px;
                border-radius: 50%;
                background: var(--blue-soft);
                display: grid;
                place-items: center;
                font-style: normal;
                color: var(--blue);
                transition: transform 0.3s;
            }
            .faq details[open] summary i {
                transform: rotate(45deg);
            }
            .faq .body {
                overflow: hidden;
            }
            .faq .body p {
                padding: 0 22px 18px;
                color: var(--muted);
            }

            /* CTA penutup */
            .final {
                padding: 0 0 clamp(80px, 10vw, 120px);
            }
            .final-box {
                position: relative;
                overflow: hidden;
                border-radius: 28px;
                background: var(--blue);
                color: #fff;
                padding: clamp(40px, 7vw, 88px) clamp(24px, 5vw, 72px);
                text-align: center;
                isolation: isolate;
            }
            .final-box::before {
                content: "";
                position: absolute;
                inset: 0;
                z-index: -1;
                background-image:
                    linear-gradient(
                        rgba(255, 255, 255, 0.12) 1px,
                        transparent 1px
                    ),
                    linear-gradient(
                        90deg,
                        rgba(255, 255, 255, 0.12) 1px,
                        transparent 1px
                    );
                background-size: 44px 44px;
                -webkit-mask-image: radial-gradient(
                    circle at var(--mx, 50%) var(--my, 50%),
                    #000,
                    transparent 55%
                );
                mask-image: radial-gradient(
                    circle at var(--mx, 50%) var(--my, 50%),
                    #000,
                    transparent 55%
                );
            }
            .final-box .glow {
                position: absolute;
                z-index: -1;
                width: 520px;
                height: 520px;
                border-radius: 50%;
                background: radial-gradient(
                    circle,
                    rgba(255, 206, 58, 0.4),
                    transparent 60%
                );
                left: var(--mx, 50%);
                top: var(--my, 50%);
                transform: translate(-50%, -50%);
                pointer-events: none;
                transition:
                    left 0.5s ease-out,
                    top 0.5s ease-out;
            }
            .final-box h2 {
                margin: 0 auto 14px;
                font-size: clamp(2rem, 4.6vw, 3.6rem);
            }
            .final-box p {
                color: #d3d7ff;
                max-width: 52ch;
                margin: 0 auto 26px;
            }
            .final-box .cta {
                display: flex;
                gap: 10px;
                justify-content: center;
                flex-wrap: wrap;
            }
            .final-box .btn-line {
                background: transparent;
                color: #fff;
                box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.5);
            }
            footer {
                border-top: 1px solid var(--line);
                padding: 36px 0;
                color: var(--muted);
                font-size: 0.92rem;
            }
            footer .wrap {
                display: flex;
                flex-wrap: wrap;
                gap: 20px;
                justify-content: space-between;
                align-items: center;
            }
            footer nav {
                display: flex;
                gap: 18px;
                flex-wrap: wrap;
            }
            footer a {
                text-decoration: none;
            }
            footer a:hover {
                color: var(--ink);
            }
            @media (prefers-reduced-motion: reduce) {
                * {
                    transition: none !important;
                    animation: none !important;
                }
            }