/* =====================================================================
   STYLE.CSS — Landing page Linketik
   Bergantung pada brand.css (token & komponen). Hanya style khusus
   halaman ini yang ada di sini.
   ===================================================================== */

[id] { scroll-margin-top: 100px; }

/* ------------------------------------------------------------------
   NAVBAR — kapsul keycap mengambang
   ------------------------------------------------------------------ */
.site-nav {
    padding: .7rem .85rem 0;
    background: transparent;
    pointer-events: none;
}
@media (min-width: 768px) { .site-nav { padding: .85rem 1.25rem 0; } }
.site-nav__shell {
    pointer-events: auto;
    max-width: 80rem;
    margin: 0 auto;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(18px) saturate(1.4);
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
    transform: translateZ(0);
    border-radius: 24px;
    box-shadow:
        0 0 0 2.5px #fff,
        0 5px 0 var(--ink-5),
        0 18px 32px -16px rgba(43, 27, 61, .28);
    transition: box-shadow .3s var(--ease-spring), transform .3s var(--ease-spring);
}
.site-nav.scrolled .site-nav__shell {
    background: #fff;
    box-shadow:
        0 0 0 2.5px #fff,
        0 6px 0 var(--pink),
        0 20px 36px -14px rgba(255, 0, 110, .28);
}
.site-nav__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .55rem .6rem .55rem .75rem;
}
@media (min-width: 1024px) { .site-nav__bar { padding: .55rem .7rem .55rem .85rem; } }
.site-nav__brand { flex: none; }
.nav-links {
    flex: 1;
    justify-content: center;
    gap: .35rem;
}
.nav-links a {
    --nav-c: var(--pink);
    --nav-edge: var(--pink-deep);
    --nav-soft: var(--pink-soft);
    --nav-fg: #fff;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem .9rem .45rem .7rem;
    border-radius: 999px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: .88rem;
    white-space: nowrap;
    color: var(--ink-2);
    background: var(--ink-6);
    box-shadow: 0 2px 0 var(--ink-5);
    transition: color .2s, background .2s, transform .2s var(--ease-spring), box-shadow .2s;
}
.nav-links a::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--nav-c);
    box-shadow: 0 0 0 2px #fff;
    flex: none;
}
.nav-links a:nth-child(1) { --nav-c: var(--pink);   --nav-edge: var(--pink-deep);   --nav-soft: var(--pink-soft);   --nav-fg: #fff; }
.nav-links a:nth-child(2) { --nav-c: var(--lime);   --nav-edge: var(--olive);       --nav-soft: var(--lime-soft);   --nav-fg: var(--ink); }
.nav-links a:nth-child(3) { --nav-c: var(--purple); --nav-edge: var(--purple-deep); --nav-soft: var(--purple-soft); --nav-fg: #fff; }
.nav-links a:nth-child(4) { --nav-c: var(--orange); --nav-edge: var(--orange-deep); --nav-soft: var(--orange-soft); --nav-fg: var(--ink); }
.nav-links a:nth-child(5) { --nav-c: var(--hot);    --nav-edge: var(--hot-deep);    --nav-soft: #FFE4DC;            --nav-fg: #fff; }
.nav-links a:hover {
    color: var(--ink);
    background: var(--nav-soft);
    transform: translateY(-2px);
    box-shadow: 0 4px 0 var(--nav-c);
}
.nav-links a.is-active {
    color: var(--nav-fg);
    background: var(--nav-c);
    box-shadow: 0 3px 0 var(--nav-edge);
    transform: translateY(1px);
}
.nav-links a.is-active::before { background: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,.35); }
.nav-links a:nth-child(2).is-active::before,
.nav-links a:nth-child(4).is-active::before { background: var(--ink); }

.mobile-menu {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding: .15rem .7rem 1rem;
    animation: menu-drop .25s var(--ease-out) both;
}
.mobile-menu.hidden { display: none; }
.mobile-menu a {
    --nav-c: var(--pink);
    --nav-soft: var(--pink-soft);
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .85rem 1rem;
    border-radius: 16px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.08rem;
    color: var(--ink);
    background: var(--ink-6);
    box-shadow: 0 3px 0 var(--ink-5);
}
.mobile-menu a::before {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--nav-c);
    box-shadow: 0 0 0 2px #fff;
    flex: none;
}
.mobile-menu a:nth-child(1) { --nav-c: var(--pink);   --nav-soft: var(--pink-soft); }
.mobile-menu a:nth-child(2) { --nav-c: var(--lime);   --nav-soft: var(--lime-soft); }
.mobile-menu a:nth-child(3) { --nav-c: var(--purple); --nav-soft: var(--purple-soft); }
.mobile-menu a:nth-child(4) { --nav-c: var(--orange); --nav-soft: var(--orange-soft); }
.mobile-menu a:nth-child(5) { --nav-c: var(--hot);    --nav-soft: #FFE4DC; }
.mobile-menu a:hover { background: var(--nav-soft); }
@keyframes menu-drop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------------
   HERO
   ------------------------------------------------------------------ */
.hero { min-height: min(100vh, 940px); overflow-x: hidden; }
.hero__blob {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    opacity: .55;
    will-change: transform;
    transform: translateZ(0);
    animation: blob-drift 16s ease-in-out infinite alternate;
}
.hero__blob--pink   { width: 520px; height: 520px; background: radial-gradient(circle, var(--pink) 0%, transparent 68%); top: -12%; left: -10%; }
.hero__blob--purple { width: 460px; height: 460px; background: radial-gradient(circle, var(--purple) 0%, transparent 68%); top: 20%;  right: -12%; animation-delay: -5s; }
.hero__blob--lime   { width: 420px; height: 420px; background: radial-gradient(circle, var(--lime) 0%, transparent 68%);   bottom: -18%; left: 30%; animation-delay: -9s; }
@keyframes blob-drift {
    0%   { transform: translate(0, 0) scale(1); }
    50%  { transform: translate(40px, -30px) scale(1.08); }
    100% { transform: translate(-30px, 30px) scale(.96); }
}

/* ------------------------------------------------------------------
   HERO COPY — mural keping puzzle (bukan stack template)
   ------------------------------------------------------------------ */
.hero-copy {
    position: relative;
    text-align: center;
}
@media (min-width: 1024px) { .hero-copy { text-align: left; } }

.hero-orbit {
    position: absolute;
    inset: -18px -28px auto -28px;
    height: min(78%, 520px);
    pointer-events: none;
    z-index: 0;
}
.hero-orbit .pz-piece {
    position: absolute;
    animation: piece-drift 5.5s ease-in-out infinite;
    animation-delay: var(--d, 0ms);
}
.hero-orbit .iso-key { z-index: 0; }

.hero-puzzle-scale {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 1.25rem;
    overflow: visible;
}
@media (min-width: 1024px) { .hero-puzzle-scale { justify-content: flex-start; } }

.hero-puzzle {
    --mx: 0;
    --my: 0;
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .92fr);
    grid-template-rows: auto auto auto;
    width: 520px;
    flex: none;
    padding: 12px 18px 18px 18px;
    margin: 0 auto;
    isolation: isolate;
}
@media (min-width: 1024px) { .hero-puzzle { margin: 0; padding: 12px 22px 18px 4px; } }

/* Keping kata */
.wp {
    --wp-bg: var(--pink);
    --wp-fg: #fff;
    --wp-edge: var(--pink-deep);
    --rest-rot: 0deg;
    --d: 0ms;
    --fx: 0px;
    --fy: 0px;
    --fr: 0deg;
    --px: 8px;
    --py: 6px;
    position: relative;
    display: inline-flex;
    color: var(--wp-fg);
    z-index: 2;
    opacity: 0;
    transform: translate(var(--fx), var(--fy)) rotate(var(--fr)) scale(.52);
    filter: drop-shadow(0 18px 22px -12px rgba(43, 27, 61, .42));
    transition: opacity .4s ease, transform .5s var(--ease-out), filter .35s var(--ease-spring);
    cursor: default;
    user-select: none;
    min-width: 0;
}
.hero.is-live .wp {
    opacity: 1;
    transform: translate(calc(var(--mx) * var(--px)), calc(var(--my) * var(--py))) rotate(var(--rest-rot));
    animation: wp-snap .95s var(--ease-spring) var(--d) backwards;
}
.hero.is-live .wp:hover {
    transform: translate(calc(var(--mx) * var(--px)), calc(var(--my) * var(--py) - 10px)) rotate(var(--rest-rot)) scale(1.05);
    z-index: 12;
    filter: drop-shadow(0 26px 28px -12px rgba(43, 27, 61, .5));
}
.wp__inner {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    background: var(--wp-bg);
    color: inherit;
    border-radius: 28px;
    box-shadow:
        0 0 0 5px #fff,
        0 9px 0 var(--wp-edge);
}
.hero.is-live .wp__inner {
    animation: wp-bob 4.8s ease-in-out calc(var(--d) + 1.05s) infinite;
}
.wp__inner::after {
    content: '';
    position: absolute;
    inset: 7px 12px auto 12px;
    height: 36%;
    border-radius: 16px 16px 40% 40%;
    background: linear-gradient(180deg, rgba(255,255,255,.38), transparent);
    pointer-events: none;
}
.wp__word {
    position: relative;
    z-index: 1;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2.05rem, 6.4vw, 3.7rem);
    line-height: 1;
    letter-spacing: -.04em;
    padding: .42em .58em .48em;
}
.wp__keys {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 8px;
    padding: 8px 18px 16px;
}
.wp__keys .kc-key {
    --kc-size: 56px;
    --kc-depth: 8px;
    font-size: calc(var(--kc-size) * .42);
    border-radius: 14px;
    cursor: pointer;
}

/* Tray puzzle lime — bukan kapsul hitam */
.wp__tray {
    position: relative;
    display: block;
    width: 420px;
    max-width: 100%;
    padding: 38px 12px 10px;
}
.wp__tray-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    pointer-events: none;
    filter: drop-shadow(0 10px 0 var(--lime)) drop-shadow(0 18px 20px -10px rgba(43, 27, 61, .35));
}

.wp--ketik {
    --wp-bg: transparent; --wp-edge: var(--olive); --wp-fg: var(--ink);
    --rest-rot: -2deg; --px: 4px; --py: 12px;
    grid-column: 1 / -1; grid-row: 3;
    z-index: 6;
    justify-self: center;
    margin: -28px 0 0;
    filter: none;
}
.hero.is-live .wp--ketik:hover {
    filter: none;
    transform: translate(calc(var(--mx) * var(--px)), calc(var(--my) * var(--py) - 8px)) rotate(var(--rest-rot));
}

/* Knob — menonjol ke keping tetangga (saling nyolok) */
.wp__knob {
    position: absolute;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--wp-bg);
    box-shadow: 0 0 0 4px #fff, 0 6px 0 var(--wp-edge);
    pointer-events: none;
    z-index: 3;
}
.wp__knob--r { right: -20px; top: 50%; margin-top: -20px; }
.wp__knob--b { bottom: -20px; left: 52%; margin-left: -20px; }

/* Warna + rotasi + posisi collage */
.wp--bikin {
    --wp-bg: var(--pink); --wp-edge: var(--pink-deep); --wp-fg: #fff;
    --rest-rot: -8deg; --px: -10px; --py: -8px;
    grid-column: 1; grid-row: 1;
    z-index: 5;
    justify-self: start;
    margin: 0 -38px 0 0;
}
.wp--web {
    --wp-bg: var(--lime); --wp-edge: var(--olive); --wp-fg: var(--ink);
    --rest-rot: 7deg; --px: 12px; --py: -6px;
    grid-column: 2; grid-row: 1;
    z-index: 4;
    justify-self: start;
    margin: 22px 0 0 -8px;
}
.wp--cuman {
    --wp-bg: var(--purple); --wp-edge: var(--purple-deep); --wp-fg: #fff;
    --rest-rot: 5deg; --px: -8px; --py: 10px;
    grid-column: 1; grid-row: 2;
    z-index: 5;
    justify-self: start;
    margin: -22px -32px 0 4px;
}
.wp--modal {
    --wp-bg: var(--orange); --wp-edge: var(--hot); --wp-fg: var(--ink);
    --rest-rot: -6deg; --px: 10px; --py: 8px;
    grid-column: 2; grid-row: 2;
    z-index: 4;
    justify-self: start;
    margin: -10px 0 0 -18px;
}
.wp--web .wp__inner, .wp--modal .wp__inner { color: var(--ink); }

@keyframes wp-snap {
    0%   { opacity: 0; transform: translate(var(--fx), var(--fy)) rotate(var(--fr)) scale(.52); }
    70%  { opacity: 1; transform: translate(0, 0) rotate(var(--rest-rot)) scale(1.07); }
    100% { opacity: 1; transform: translate(0, 0) rotate(var(--rest-rot)) scale(1); }
}
@keyframes wp-bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-5px); }
}

/* Stiker & percikan di sekitar mural */
.hero-deco {
    position: absolute;
    inset: -8px -12px;
    pointer-events: none;
    z-index: 8;
    opacity: 0;
    transition: opacity .4s ease;
}
.hero.is-live .hero-deco { opacity: 1; }
.hero-deco img { position: absolute; display: block; }
.hero-deco__spark--a { width: 28px; top: 6%; left: 2%; }
.hero-deco__spark--b { width: 22px; top: 42%; right: 0; }
.hero-deco__spark--c { width: 18px; bottom: 22%; left: 8%; }
.hero-deco__star { width: 36px; top: -2%; right: 18%; }
.hero-deco__heart { width: 30px; bottom: 28%; right: 4%; }
.hero.is-live .hero-deco__spark--a { animation: spark-pop 2.4s ease-in-out .8s infinite; }
.hero.is-live .hero-deco__spark--b { animation: spark-pop 2.8s ease-in-out 1.2s infinite; }
.hero.is-live .hero-deco__spark--c { animation: spark-pop 2.2s ease-in-out 1.6s infinite; }
.hero.is-live .hero-deco__star { animation: star-spin 6s linear 1s infinite; }
.hero.is-live .hero-deco__heart { animation: heart-beat 1.6s var(--ease-spring) 1.4s infinite; }
@keyframes spark-pop {
    0%, 100% { transform: scale(.6) rotate(0); opacity: .35; }
    50%      { transform: scale(1.15) rotate(18deg); opacity: 1; }
}
@keyframes star-spin {
    0%   { transform: rotate(0) scale(1); }
    50%  { transform: rotate(180deg) scale(1.12); }
    100% { transform: rotate(360deg) scale(1); }
}
@keyframes heart-beat {
    0%, 100% { transform: scale(1) rotate(-12deg); }
    40%      { transform: scale(1.22) rotate(-6deg); }
    55%      { transform: scale(.94) rotate(-14deg); }
}

.hero-snap {
    position: absolute;
    top: 38%;
    left: 54%;
    z-index: 16;
    width: 108px;
    pointer-events: none;
    display: grid;
    place-items: center;
    opacity: 0;
    transform: scale(.2) rotate(-18deg);
    filter: drop-shadow(0 10px 14px rgba(43, 27, 61, .35));
}
.hero-snap img { width: 100%; grid-area: 1 / 1; }
.hero-snap b {
    grid-area: 1 / 1;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.05rem;
    color: #fff;
    letter-spacing: .02em;
    text-shadow: 0 2px 0 rgba(0,0,0,.2);
    transform: rotate(-8deg);
}
.hero-snap.is-on {
    animation: snap-burst .9s var(--ease-spring) both;
}
@keyframes snap-burst {
    0%   { opacity: 0; transform: scale(.2) rotate(-28deg); }
    40%  { opacity: 1; transform: scale(1.18) rotate(8deg); }
    70%  { opacity: 1; transform: scale(.96) rotate(-6deg); }
    100% { opacity: 0; transform: scale(1.35) rotate(12deg) translate(12px, -18px); }
}

/* Kursor: JS yang menggeser --cx/--cy, lalu ngeklik pakai .is-click */
.hero-clicker {
    position: absolute;
    left: 0;
    top: 0;
    width: 44px;
    height: 44px;
    z-index: 14;
    pointer-events: none;
    opacity: 0;
    transform: translate(var(--cx, 280px), var(--cy, -70px)) rotate(16deg) scale(.4);
    transition: transform .32s var(--ease-spring), opacity .2s;
    filter: drop-shadow(0 8px 10px rgba(43, 27, 61, .35));
}
.hero-clicker.is-in {
    opacity: 1;
    transform: translate(var(--cx, 0px), var(--cy, 0px)) rotate(-8deg) scale(1);
}
.hero-clicker.is-click {
    transform: translate(var(--cx, 0px), calc(var(--cy, 0px) + 10px)) rotate(-16deg) scale(.82);
    transition-duration: .12s;
}
.hero:not(.is-live) .hero-clicker { opacity: 0 !important; }
.hero-clicker img, .hero-clicker svg { width: 100%; height: 100%; display: block; }
.link-cta__cursor img { width: 100%; height: 100%; display: block; }

.hero-sub {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .55rem .45rem;
    max-width: 34rem;
    margin: 0 auto 1.75rem;
}
@media (min-width: 1024px) { .hero-sub { justify-content: flex-start; margin-left: 0; } }

.sub-pz {
    --pz: var(--pink);
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem .9rem .45rem 1.05rem;
    border-radius: 999px;
    background: #fff;
    color: var(--ink);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.02rem;
    line-height: 1.2;
    box-shadow: 0 0 0 2px var(--ink-5), 0 6px 0 var(--pz), 0 12px 18px -12px rgba(43, 27, 61, .35);
    transform: rotate(var(--tilt, -2deg));
    animation: sub-bob 3.6s ease-in-out infinite;
}
.sub-pz::before {
    content: '';
    position: absolute;
    left: -8px; top: 50%;
    width: 16px; height: 16px;
    margin-top: -8px;
    border-radius: 50%;
    background: var(--pz);
    box-shadow: 0 0 0 3px #fff;
}
.sub-pz--pink   { --pz: var(--pink);   --tilt: -3deg; animation-delay: 0s; }
.sub-pz--lime   { --pz: var(--lime);   --tilt: 2.5deg; animation-delay: .4s; }
.sub-pz--purple { --pz: var(--purple); --tilt: -1.5deg; animation-delay: .8s; }
.sub-pz img { width: 16px; height: 16px; display: block; }
.sub-pz .pz-piece { flex: none; width: var(--sz, 22px); height: auto; }
.hero.is-live .sub-pz { animation: sub-pop .7s var(--ease-spring) both, sub-bob 3.6s ease-in-out .9s infinite; }
.hero.is-live .sub-pz--lime { animation-delay: .12s, 1.1s; }
.hero.is-live .sub-pz--purple { animation-delay: .24s, 1.4s; }
@keyframes sub-pop {
    0%   { opacity: 0; transform: translateY(14px) rotate(var(--tilt, 0deg)) scale(.7); }
    70%  { opacity: 1; transform: translateY(-3px) rotate(var(--tilt, 0deg)) scale(1.08); }
    100% { opacity: 1; transform: translateY(0) rotate(var(--tilt, 0deg)) scale(1); }
}
@keyframes sub-bob {
    0%, 100% { transform: translateY(0) rotate(var(--tilt, 0deg)); }
    50%      { transform: translateY(-5px) rotate(calc(var(--tilt, 0deg) * -1)); }
}

.demo__hint .hk {
    display: inline-grid;
    place-items: center;
    min-width: 1.55rem;
    height: 1.55rem;
    padding: 0 .3rem;
    margin: 0 .08rem;
    border-radius: 6px;
    font-family: var(--font-display);
    font-size: .72rem;
    font-weight: 700;
    color: var(--hk-fg, #fff);
    background: var(--hk-bg, var(--ink));
    box-shadow: 0 3px 0 var(--hk-edge, var(--ink-deep));
    vertical-align: middle;
    animation: hk-idle 2.8s var(--ease-spring) infinite;
}
.hk--pink   { --hk-bg: var(--pink);   --hk-edge: var(--pink-deep);   --hk-fg: #fff; animation-delay: 0s; }
.hk--lime   { --hk-bg: var(--lime);   --hk-edge: var(--olive);       --hk-fg: var(--ink); animation-delay: .12s; }
.hk--purple { --hk-bg: var(--purple); --hk-edge: var(--purple-deep); --hk-fg: #fff; animation-delay: .24s; }
.hk--orange { --hk-bg: var(--orange); --hk-edge: var(--hot);         --hk-fg: var(--ink); animation-delay: .36s; }
.hk--ink    { --hk-bg: var(--ink);    --hk-edge: var(--ink-deep);    --hk-fg: #fff; animation-delay: .48s; }
@keyframes hk-idle {
    0%, 70%, 100% { transform: translateY(0); box-shadow: 0 3px 0 var(--hk-edge); }
    78% { transform: translateY(2px); box-shadow: 0 1px 0 var(--hk-edge); }
}
@media (max-width: 767px) {
    .demo__hint { display: none; }
}

.hero.is-live .hero__cta .kc-btn--lg > i,
.hero.is-live .hero__cta .kc-btn--lg > svg {
    animation: icon-nudge 4.5s var(--ease-spring) 2.2s infinite;
}
@keyframes icon-nudge {
    0%, 82%, 100% { transform: rotate(0) scale(1); }
    88% { transform: rotate(-18deg) scale(1.15); }
    94% { transform: rotate(10deg) scale(1.05); }
}

@media (max-width: 1023px) {
    .hero > .max-w-7xl,
    .hero > .max-w-7xl > * { min-width: 0; max-width: 100%; }
    .hero-copy {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow: visible;
        padding-inline: 0;
        text-align: center;
        box-sizing: border-box;
    }
    .hero-puzzle-scale {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        justify-content: center;
        overflow: visible;
        padding: 8px 12px 0;
        margin-bottom: 1.25rem;
        box-sizing: border-box;
    }
    .hero-puzzle {
        width: 100%;
        max-width: 100%;
        padding: 12px 14px 10px;
        margin: 0 auto;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        justify-content: center;
        justify-items: center;
        align-items: center;
        column-gap: 10px;
        row-gap: 6px;
        box-sizing: border-box;
    }
    .wp { max-width: 100%; }
    .hero-deco { display: block; inset: -6px -4px; }
    .hero-deco__spark--a { width: 18px; top: 6%; left: 2%; }
    .hero-deco__spark--b { width: 16px; top: 38%; right: 2%; }
    .hero-deco__spark--c { width: 14px; bottom: 22%; left: 6%; }
    .hero-deco__star { width: 24px; top: 0; right: 14%; }
    .hero-deco__heart { width: 22px; bottom: 20%; right: 4%; }
    .hero-snap { width: 72px; top: 32%; left: 50%; margin-left: -36px; }
    .wp--bikin,
    .wp--cuman { justify-self: end; margin: 0; }
    .wp--web,
    .wp--modal { justify-self: start; margin: 0; }
    .wp--web { margin-top: 8px; }
    .wp--modal { margin-top: 4px; }
    .wp--ketik { justify-self: center; width: max-content; max-width: 100%; margin: 0 auto; }
    .wp__tray { width: max-content; max-width: 100%; padding: 8px 8px 6px; box-sizing: border-box; }
    .hero__cta,
    .hero-sub { min-width: 0; width: 100%; box-sizing: border-box; }
}

@media (max-width: 639px) {
    .hero-orbit {
        display: block;
        inset: 10px 6px auto;
        height: 72%;
        overflow: visible;
    }
    .hero-orbit .pz-piece { --sz: 20px !important; }
    .hero-orbit .pz-piece:nth-child(1) { left: auto !important; right: 8% !important; top: 8% !important; }
    .hero-orbit .pz-piece:nth-child(2) { left: 8% !important; top: 34% !important; }
    .hero-orbit .pz-piece:nth-child(3) { left: auto !important; right: 10% !important; top: 58% !important; }
    .hero-orbit .pz-piece:nth-child(4) { left: 14% !important; top: 4% !important; }
    .hero-orbit .pz-piece:nth-child(5) { left: 8% !important; bottom: 12% !important; top: auto !important; }
    .hero-orbit .iso-key { --sz: 36px !important; }
    .hero-orbit .iso-key--sway {
        left: 2% !important;
        top: 6% !important;
    }
    .hero-orbit .iso-key--tilt {
        left: auto !important;
        right: 2% !important;
        top: 50% !important;
    }
    .hero-puzzle {
        width: 100%;
        max-width: 100%;
        padding: 10px 12px 8px;
        column-gap: 8px;
        row-gap: 4px;
    }
    .wp {
        --fx: 0px !important;
        --fy: 12px !important;
        --fr: 6deg !important;
        --px: 0px;
        --py: 0px;
    }
    .wp__word {
        font-size: clamp(1.7rem, 8.4vw, 2.25rem);
        padding: .34em .42em .36em;
    }
    .wp__inner { border-radius: 22px; box-shadow: 0 0 0 3px #fff, 0 6px 0 var(--wp-edge); }
    .wp__knob { width: 18px; height: 18px; box-shadow: 0 0 0 3px #fff, 0 3px 0 var(--wp-edge); }
    .wp__knob--r { right: -9px; margin-top: -9px; }
    .wp__knob--b { bottom: -9px; margin-left: -9px; }
    .wp--bikin { --rest-rot: -5deg; margin: 0; }
    .wp--web   { --rest-rot: 5deg;  margin: 8px 0 0; }
    .wp--cuman { --rest-rot: 3deg;  margin: 0; }
    .wp--modal { --rest-rot: -4deg; margin: 4px 0 0; }
    .wp--ketik { --rest-rot: -1deg; margin: 0 auto; width: max-content; max-width: 100%; }
    .wp__tray {
        width: max-content;
        max-width: 100%;
        padding: 6px 6px 6px;
        background: var(--lime);
        border: 3px solid #fff;
        border-radius: 20px;
        box-shadow: 0 6px 0 var(--olive);
        box-sizing: border-box;
    }
    .wp__tray-img { display: none; }
    .wp__keys { gap: 4px; padding: 0; }
    .wp__keys .kc-key { --kc-size: 42px; --kc-depth: 5px; border-radius: 11px; }
    .hero-clicker { width: 28px; height: 28px; }
    .hero-sub {
        width: 100%;
        max-width: 100%;
        margin: .45rem auto 1.1rem;
        padding: 0;
        justify-content: center;
        gap: .35rem;
    }
    .sub-pz {
        font-size: .86rem;
        padding: .38rem .7rem .38rem .88rem;
        max-width: calc(100% - 8px);
    }
    .hero__cta {
        flex-direction: column !important;
        align-items: stretch;
        justify-content: center;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }
    .hero__cta .kc-btn {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

@media (min-width: 640px) and (max-width: 1023px) {
    .hero__cta { justify-content: center; }
}

/* CTA: satu keycap + tautan berkursor */
.hero__cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
}
@media (min-width: 640px) { .hero__cta { flex-direction: row; gap: 1.75rem; } }
@media (min-width: 1024px) { .hero__cta { justify-content: flex-start; } }

.link-cta {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--ink);
    text-decoration: underline;
    text-decoration-style: wavy;
    text-decoration-color: var(--pink);
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
    transition: color .2s, text-decoration-color .2s;
}
.link-cta:hover { color: var(--pink); text-decoration-color: var(--lime); }
.link-cta__cursor {
    width: 26px; height: 26px;
    display: inline-grid; place-items: center;
    filter: drop-shadow(0 4px 6px rgba(43, 27, 61, .3));
    animation: cursor-nudge 2.2s ease-in-out infinite;
}
.link-cta__cursor svg { width: 100%; height: 100%; }
.link-cta:hover .link-cta__cursor { animation-duration: .8s; }
@keyframes cursor-nudge {
    0%, 100% { transform: translate(0, 0) rotate(0); }
    50% { transform: translate(-4px, 3px) rotate(-8deg); }
}

/* kbd kecil untuk hint */
kbd {
    display: inline-grid; place-items: center;
    min-width: 1.5rem; height: 1.5rem; padding: 0 .35rem;
    border-radius: 6px;
    background: #fff;
    color: var(--ink);
    font-family: var(--font-display);
    font-size: .75rem; font-weight: 700;
    box-shadow: 0 0 0 1.5px var(--ink-5), 0 2px 0 var(--ink-4);
    vertical-align: middle;
}

/* ------------------------------------------------------------------
   DEMO — AI merakit web seperti puzzle
   ------------------------------------------------------------------ */
.demo { position: relative; max-width: 620px; margin: 0 auto; }

.demo__frame {
    position: relative;
    background: #fff;
    border-radius: 28px;
    box-shadow:
        0 0 0 2px var(--ink-5),
        0 0 0 8px #fff,
        0 0 0 10px var(--ink-5),
        0 40px 80px -30px rgba(43, 27, 61, .45);
    overflow: hidden;
    transform: rotate(-1.2deg);
    transition: transform .6s var(--ease-out);
}
.demo:hover .demo__frame { transform: rotate(0deg); }

.demo__bar {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .8rem 1rem;
    border-bottom: 2px solid var(--ink-5);
    background: var(--ink-6);
}
.demo__dot { width: 11px; height: 11px; border-radius: 50%; flex: none; }
.demo__url {
    margin-left: .6rem;
    flex: 1;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem .8rem;
    border-radius: 999px;
    background: #fff;
    box-shadow: var(--shadow-ring);
    font-size: .78rem;
    font-weight: 700;
    color: var(--ink-3);
    min-width: 0;
}
.demo__url > i, .demo__url > svg { width: .85rem; height: .85rem; color: var(--olive); flex: none; }
.demo__url > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.demo__url b { color: var(--ink); }
.demo__live {
    margin-left: auto;
    padding: .15rem .5rem;
    border-radius: 999px;
    background: var(--ink-5);
    color: var(--ink-4);
    font-size: .62rem;
    letter-spacing: .1em;
    transition: background .4s, color .4s, transform .4s var(--ease-spring);
    flex: none;
}
.demo__live.is-on { background: var(--lime); color: var(--ink); transform: scale(1.08); }

.demo__canvas {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: min-content;
    gap: 10px;
    padding: 14px;
    min-height: 300px;
    background:
        radial-gradient(rgba(43, 27, 61, .08) 1.2px, transparent 1.2px) 0 0 / 18px 18px,
        linear-gradient(180deg, #FFFDF8, #FFF);
}
@media (min-width: 640px) { .demo__canvas { min-height: 340px; } }

.demo__empty {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem;
    color: var(--ink-4);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: .95rem;
    transition: opacity .4s;
    pointer-events: none;
}
.demo__empty > i, .demo__empty > svg { width: 2.2rem; height: 2.2rem; }
.demo__empty.is-hidden { opacity: 0; }

/* Blok = keping puzzle */
.blk {
    --blk-knob: var(--purple);
    position: relative;
    border-radius: 14px;
    background: #fff;
    box-shadow: var(--shadow-ring), 0 6px 16px -10px rgba(43, 27, 61, .35);
    opacity: 0;
    transform: translateY(-40px) scale(.85) rotate(-4deg);
    transition:
        opacity .35s ease,
        transform .6s var(--ease-spring),
        background-color .4s;
}
.blk::before {
    content: '';
    position: absolute;
    top: -8px; left: 14px;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: var(--blk-knob);
    border: 2px solid #fff;
    box-shadow: var(--shadow-ring);
}
.blk.in { opacity: 1; transform: none; }
.blk.snap { animation: blk-snap .45s var(--ease-spring); }
@keyframes blk-snap {
    0% { transform: scale(1); }
    40% { transform: scale(1.04) translateY(2px); }
    100% { transform: scale(1); }
}

.blk--nav {
    --blk-knob: var(--pink);
    grid-column: 1 / -1;
    display: flex; align-items: center; gap: .6rem;
    padding: .55rem .75rem;
}
.blk__logo { width: 22px; height: 22px; border-radius: 7px; background: var(--olive); flex: none; }
.blk__lines { display: flex; gap: .4rem; margin-left: auto; }
.blk__lines i { display: block; width: 26px; height: 6px; border-radius: 3px; background: var(--ink-5); }
.blk__pill { width: 46px; height: 18px; border-radius: 999px; background: var(--olive); }

.blk--hero {
    --blk-knob: var(--lime);
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: .75rem;
    padding: 1rem;
    background: linear-gradient(135deg, #EEF3D8, #F9FBE9);
}
.blk__text { display: flex; flex-direction: column; gap: .5rem; justify-content: center; }
.blk__text b { display: block; height: 10px; border-radius: 5px; background: var(--olive); opacity: .85; }
.blk__text b + b { height: 8px; opacity: .45; }
.blk__cta {
    margin-top: .35rem;
    align-self: flex-start;
    padding: .38rem .7rem;
    border-radius: 9px;
    background: var(--pink);
    color: #fff;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: .7rem;
    box-shadow: 0 3px 0 var(--pink-deep);
    transition: background .35s, box-shadow .35s, color .35s, transform .35s var(--ease-spring);
}
.blk__cta.is-orange { background: var(--orange); color: var(--ink); box-shadow: 0 3px 0 var(--hot); }
.blk__cta.pop { animation: cta-pop .5s var(--ease-spring); }
@keyframes cta-pop { 50% { transform: scale(1.18) rotate(-3deg); } }
.blk__img {
    display: grid; place-items: center;
    border-radius: 12px;
    background: var(--olive);
    color: #fff;
    min-height: 72px;
}
.blk__img > i, .blk__img > svg { width: 30px; height: 30px; }

.blk--card {
    display: flex; flex-direction: column; gap: .45rem;
    padding: .8rem;
}
.blk--card > i, .blk--card > svg { width: 20px; height: 20px; color: var(--olive); }
.blk--card b { display: block; height: 7px; border-radius: 4px; background: var(--ink-5); width: 100%; }
.blk--card:nth-of-type(3) { --blk-knob: var(--orange); }
.blk--card:nth-of-type(4) { --blk-knob: var(--pink); }
.blk--card:nth-of-type(5) { --blk-knob: var(--hot); }

.blk--foot {
    --blk-knob: var(--olive);
    grid-column: 1 / -1;
    display: flex; align-items: center; justify-content: space-between;
    padding: .6rem .75rem;
    background: var(--ink);
}
.blk--foot b { display: block; height: 8px; border-radius: 4px; background: rgba(255,255,255,.45); }
.blk--foot span { display: flex; gap: .35rem; }
.blk--foot span i { display: block; width: 14px; height: 14px; border-radius: 4px; background: rgba(255,255,255,.3); }

.demo__status {
    position: absolute;
    left: 14px; bottom: 12px;
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .38rem .7rem;
    border-radius: 999px;
    background: #fff;
    color: var(--ink-2);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: .72rem;
    box-shadow: var(--shadow-ring), 0 6px 14px -8px rgba(43,27,61,.35);
    transition: transform .3s var(--ease-spring), background .3s, color .3s;
    z-index: 3;
    max-width: calc(100% - 28px);
}
.demo__status > i, .demo__status > svg { width: .85rem; height: .85rem; color: var(--pink); flex: none; }
.demo__status > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.demo__status.is-busy > i, .demo__status.is-busy > svg { animation: spin-key .9s linear infinite; }
.demo__status.is-done { background: var(--lime); color: var(--ink); }
.demo__status.is-done > i, .demo__status.is-done > svg { color: var(--ink); }
.demo__status.bump { animation: status-bump .35s var(--ease-spring); }
@keyframes status-bump { 50% { transform: translateY(-4px) scale(1.04); } }

.demo__prompt {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .75rem;
    border-top: 2px solid var(--ink-5);
    background: #fff;
}
.demo__input {
    --demo-lh: 1.35;
    flex: 1;
    position: relative;
    display: grid;
    align-items: start;
    min-height: calc(var(--demo-lh) * 2em + 1.1rem);
    padding: .55rem .9rem;
    border-radius: 14px;
    background: var(--ink-6);
    box-shadow: none;
    border: 2px solid var(--ink-5);
    font-size: .86rem;
    font-weight: 600;
    color: var(--ink);
    line-height: var(--demo-lh);
    min-width: 0;
}
.demo__sizer,
.demo__typed {
    grid-area: 1 / 1;
    min-width: 0;
    width: 100%;
    direction: ltr;
    text-align: left;
    unicode-bidi: isolate;
    color: var(--ink);
    font-weight: 700;
    letter-spacing: normal;
    background: none;
    margin: 0;
    padding: 0;
    transform: none;
}
.demo__sizer {
    visibility: hidden;
    pointer-events: none;
    user-select: none;
    color: transparent;
}
.demo__typed {
    position: relative;
    z-index: 1;
    color: var(--ink);
}
.demo__input .caret { height: 1.05em; }
@media (max-width: 639px) {
    .demo__input { min-height: calc(var(--demo-lh) * 3em + 1.1rem); }
}
@media (max-width: 380px) {
    .demo__input { min-height: calc(var(--demo-lh) * 4em + 1.1rem); }
}

.demo__cursor {
    position: absolute;
    width: 34px; height: 34px;
    left: 0; top: 0;
    filter: drop-shadow(0 6px 10px rgba(43, 27, 61, .35));
    transform: translate(60%, 50%);
    transition: transform .7s var(--ease-out), opacity .3s;
    z-index: 20;
    pointer-events: none;
        opacity: 0;
}
.demo__cursor.is-on { opacity: 1; }
.demo__cursor.click { animation: cursor-click .25s ease; }
@keyframes cursor-click { 50% { scale: .82; } }

/* Keycaps melayang di sekitar demo */
.demo__keys { position: absolute; inset: 0; pointer-events: none; }
.demo__key { position: absolute; display: block; }
.demo__key .kc-key { pointer-events: auto; cursor: pointer; }
.demo__key .kc-key > i, .demo__key .kc-key > svg { width: 45%; height: 45%; }
@media (max-width: 1023px) {
    .demo { padding: 22px 18px 8px; }
    .demo__key .kc-key { --kc-size: 40px; --kc-depth: 5px; }
    .demo__keys .demo__key:nth-child(1) { top: -2% !important; left: 0 !important; }
    .demo__keys .demo__key:nth-child(2) { top: -4% !important; right: 6% !important; }
    .demo__keys .demo__key:nth-child(3) { top: 26% !important; right: -4% !important; display: block; }
    .demo__keys .demo__key:nth-child(4) { bottom: 16% !important; right: -4% !important; }
    .demo__keys .demo__key:nth-child(5) { bottom: 6% !important; left: -2% !important; display: block; }
}
@media (max-width: 639px) {
    .demo { padding: 28px 12px 10px; }
    .demo__keys { display: block; }
    .demo__key .kc-key { --kc-size: 34px; --kc-depth: 4px; }
    .demo__keys .demo__key:nth-child(1) { top: 4% !important; left: 4% !important; }
    .demo__keys .demo__key:nth-child(2) { top: 2% !important; right: 8% !important; }
    .demo__keys .demo__key:nth-child(3) { top: 30% !important; right: 2% !important; }
    .demo__keys .demo__key:nth-child(4) { bottom: 16% !important; right: 2% !important; }
    .demo__keys .demo__key:nth-child(5) { bottom: 8% !important; left: 4% !important; }
}

/* ------------------------------------------------------------------
   MARQUEE BAND
   ------------------------------------------------------------------ */
.marquee-band .marquee__track { --marquee-speed: 55s; padding: .6rem 0; }
.marquee-band .pz-chip { pointer-events: auto; }

/* ------------------------------------------------------------------
   CARA KERJA — 3 keycaps
   ------------------------------------------------------------------ */
.steps { position: relative; }
.steps__cable {
    display: none;
    position: absolute;
    top: 60px; left: 16%; right: 16%;
    height: 4px;
    border-radius: 4px;
    background: repeating-linear-gradient(90deg, var(--ink-4) 0 12px, transparent 12px 24px);
    background-size: 24px 4px;
    animation: cable-flow 1.1s linear infinite;
    z-index: 0;
}
@keyframes cable-flow { to { background-position: 24px 0; } }
@media (min-width: 768px) { .steps__cable { display: block; } }

.step { position: relative; z-index: 1; text-align: center; }
.step__key { position: relative; display: inline-block; }
.step__key .kc-key {
    letter-spacing: .04em;
    cursor: pointer;
    touch-action: manipulation;
    transition: transform .14s var(--ease-spring), box-shadow .14s var(--ease-spring);
}
@media (hover: hover) {
    .step:hover .step__key .kc-key { transform: translateY(-6px) rotate(-2deg); }
}
.step .step__key .kc-key:active,
.step .step__key .kc-key.is-pressed,
.step:hover .step__key .kc-key:active,
.step:hover .step__key .kc-key.is-pressed {
    transform: translateY(calc(var(--kc-depth) - 2px));
    box-shadow:
        0 2px 0 var(--kc-edge),
        0 6px 12px -8px rgba(43, 27, 61, .35);
}
.step__num {
    position: absolute;
    top: -14px; right: -14px;
    width: 34px; height: 34px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--ink);
    color: #fff;
    font-family: var(--font-display);
    font-weight: 700;
    border: 3px solid #fff;
    box-shadow: var(--shadow-ring);
}

/* ------------------------------------------------------------------
   PUZZLE DIVIDER — tepi puzzle asli (knob + socket), bergerak saat scroll
   ------------------------------------------------------------------ */
.pz-divider {
    --h: 56px;
    --shift: 0px;
    position: relative;
    height: var(--h);
    background: #fff;
    overflow: visible;
    z-index: 2;
}
@media (min-width: 768px) { .pz-divider { --h: 80px; } }
.pz-divider--flip {
    background-color: var(--ink);
    background-image: radial-gradient(rgba(255, 255, 255, .10) 1.5px, transparent 1.5px);
    background-size: 28px 28px;
}
.pz-divider__clip {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
}

/* Warna seksi bawah + gigi puzzle. Mask = 1 modul (240x200) diulang horizontal.
   Elemen dibuat lebih tinggi dari divider supaya bisa "snap" turun tanpa bocor. */
.pz-divider__edge {
    position: absolute;
    left: -240px; right: -240px;
    top: 0;
    height: calc(var(--h) * 2.5);
    -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 200'%3E%3Cpath d='M0 40 H47 A5 5 0 0 0 52 36 A16 16 0 1 1 68 36 A5 5 0 0 0 73 40 H167 A5 5 0 0 1 172 44 A16 16 0 1 0 188 44 A5 5 0 0 1 193 40 H240 V200 H0 Z'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 200'%3E%3Cpath d='M0 40 H47 A5 5 0 0 0 52 36 A16 16 0 1 1 68 36 A5 5 0 0 0 73 40 H167 A5 5 0 0 1 172 44 A16 16 0 1 0 188 44 A5 5 0 0 1 193 40 H240 V200 H0 Z'/%3E%3C/svg%3E");
    -webkit-mask-repeat: repeat-x;
            mask-repeat: repeat-x;
    -webkit-mask-size: calc(var(--h) * 3) calc(var(--h) * 2.5);
            mask-size: calc(var(--h) * 3) calc(var(--h) * 2.5);
    -webkit-mask-position: var(--shift) 0;
            mask-position: var(--shift) 0;
    transform: translateY(-8px);
    transition: transform .4s var(--ease-spring);
    will-change: transform, mask-position;
}
.pz-divider.in .pz-divider__edge { transform: translateY(0); }

/* Keping puzzle kecil melayang di sekitar sambungan */
.pz-divider__piece {
    --speed: .6;
    position: absolute;
    z-index: 1;
    display: block;
    transform: translateX(calc(var(--shift) * var(--speed)));
    pointer-events: none;
}
.pz-divider .pz-piece {
    animation-duration: 3.2s;
}

.pz-piece {
    --sz: 28px;
    --rot: 0deg;
    position: relative;
    display: block;
    width: var(--sz);
    height: auto;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    pointer-events: none;
    animation: piece-drift 5.5s ease-in-out infinite;
}
.pz-piece::before,
.pz-piece::after { content: none; display: none; }
@keyframes piece-drift {
    0%, 100% { transform: translateY(0) rotate(var(--rot)); }
    50%      { transform: translateY(-7px) rotate(calc(var(--rot) + 14deg)); }
}

/* ------------------------------------------------------------------
   MICRO-MOTION — hidup saat elemen masuk viewport (.in)
   ------------------------------------------------------------------ */
/* Kata keycap di judul ditekan seperti diketik */
[data-reveal].in .kw { animation: kw-press .7s var(--ease-spring) .45s both; }
@keyframes kw-press {
    0%   { transform: rotate(-2deg) translateY(0); }
    40%  { transform: rotate(-2deg) translateY(.12em); box-shadow: 0 .01em 0 var(--kw-edge, var(--pink-deep)); }
    100% { transform: rotate(-2deg) translateY(0); }
}

/* Stabilo digambar dari kiri */
[data-reveal] .hl::after {
    transform: skewX(-8deg) rotate(-1deg) scaleX(0);
    transform-origin: left center;
    transition: transform .6s var(--ease-out) .55s;
}
[data-reveal].in .hl::after { transform: skewX(-8deg) rotate(-1deg) scaleX(1); }

/* Keycap KETIK / KLIK / JADI ditekan berurutan saat muncul */
.step.in .step__key .kc-key { animation: key-tap .55s var(--ease-spring) calc(var(--d, 0ms) + 180ms) backwards; }
@keyframes key-tap {
    0%, 100% {
        transform: translateY(0);
        box-shadow:
            0 var(--kc-depth) 0 var(--kc-edge),
            0 calc(var(--kc-depth) + 14px) 28px -12px rgba(43, 27, 61, .4);
    }
    40% {
        transform: translateY(calc(var(--kc-depth) - 2px));
        box-shadow:
            0 2px 0 var(--kc-edge),
            0 6px 12px -8px rgba(43, 27, 61, .35);
    }
}

/* Knob kartu puzzle "nyolok" saat kartu muncul */
.pz-card[data-reveal].in::before { animation: knob-plug .6s var(--ease-spring) .35s backwards; }
@keyframes knob-plug {
    0%   { transform: translateY(-14px) scale(.6); }
    60%  { transform: translateY(2px) scale(1.12); }
    100% { transform: translateY(0) scale(1); }
}

/* Ikon fitur goyang sekali saat muncul */
.pz-card[data-reveal].in .feat__icon { animation: icon-wiggle .7s ease-in-out .5s backwards; }
@keyframes icon-wiggle {
    0%, 100% { transform: rotate(0); }
    30% { transform: rotate(-10deg) scale(1.06); }
    60% { transform: rotate(7deg); }
}

/* Chip di grid seksi dan marquee sedikit bergoyang */
.marquee-band .pz-chip { animation: chip-bob 4.2s ease-in-out infinite; }
.marquee-band .pz-chip:nth-child(odd) { animation-delay: -2.1s; }
.marquee-band .pz-chip:nth-child(3n) { animation-duration: 5s; }
@keyframes chip-bob {
    0%, 100% { transform: translateY(0) rotate(0); }
    50% { transform: translateY(-4px) rotate(-1deg); }
}

/* ------------------------------------------------------------------
   ISO KEYCAPS — aset keycaps1–6, mengambang + ditekan
   ------------------------------------------------------------------ */
.iso-field {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: visible;
}
#cara-kerja > .max-w-7xl,
#fitur > .max-w-7xl { position: relative; z-index: 1; }
.iso-key {
    --sz: 72px;
    --rot: -12deg;
    --d: 0s;
    --iso-move: iso-bob;
    --iso-dur: 5s;
    position: absolute;
    z-index: 1;
    width: var(--sz);
    line-height: 0;
    pointer-events: auto;
    cursor: pointer;
    filter: drop-shadow(5px 10px 12px rgba(43, 27, 61, .2));
    animation: var(--iso-move) var(--iso-dur) ease-in-out var(--d) infinite;
    will-change: translate, rotate;
}
.iso-key--bob { --iso-move: iso-bob; --iso-dur: 4.6s; }
.iso-key--drift { --iso-move: iso-drift; --iso-dur: 6.4s; }
.iso-key--orbit { --iso-move: iso-orbit; --iso-dur: 7.2s; }
.iso-key--sway { --iso-move: iso-sway; --iso-dur: 5.5s; }
.iso-key--tilt { --iso-move: iso-tilt; --iso-dur: 4.1s; }
.iso-key img {
    display: block;
    width: 100%;
    height: auto;
    transform-origin: 50% 82%;
    transform: rotate(var(--rot));
}
.iso-key--press img {
    animation: iso-press 3.8s var(--ease-spring) var(--d) infinite;
}
.iso-key.is-pressed img {
    animation: none;
    transform: rotate(var(--rot)) scale(1.08, .78) translateY(8px);
    transition: transform .12s var(--ease-spring);
}
.iso-field .iso-key { opacity: 0; animation: none; }
.iso-field.is-on .iso-key {
    animation:
        iso-fade .45s ease var(--d) both,
        var(--iso-move) var(--iso-dur) ease-in-out var(--d) infinite;
}
@keyframes iso-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes iso-bob {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -18px; }
}
@keyframes iso-drift {
    0%, 100% { translate: 0 0; }
    50% { translate: 16px 10px; }
}
@keyframes iso-orbit {
    0%, 100% { translate: 0 0; }
    25% { translate: 14px -10px; }
    50% { translate: 0 -20px; }
    75% { translate: -14px -8px; }
}
@keyframes iso-sway {
    0%, 100% { rotate: -9deg; translate: 0 0; }
    50% { rotate: 11deg; translate: 0 8px; }
}
@keyframes iso-tilt {
    0%, 100% { rotate: 0deg; translate: 0 0; }
    35% { rotate: -14deg; translate: -6px 4px; }
    70% { rotate: 10deg; translate: 6px 0; }
}
@keyframes iso-press {
    0%, 70%, 100% { transform: rotate(var(--rot)) scale(1, 1) translateY(0); }
    78% { transform: rotate(var(--rot)) scale(1.07, .8) translateY(8px); }
    86% { transform: rotate(var(--rot)) scale(1, 1) translateY(0); }
}
.iso-field--dark .iso-key {
    filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .35));
}
@media (max-width: 767px) {
    .iso-key--hide-sm { display: none; }
    .hero-orbit .iso-key { --sz: 36px; }
    .cta__keys .iso-key { --sz: 56px; opacity: .5; }
    .hero-orbit .iso-key--sway { left: 2% !important; top: 6% !important; }
    .hero-orbit .iso-key--tilt { left: auto !important; right: 2% !important; top: 48% !important; }
}
@media (prefers-reduced-motion: reduce) {
    .iso-key,
    .iso-field.is-on .iso-key,
    .iso-key img,
    .iso-key--press img { animation: none; }
    .iso-field .iso-key,
    .iso-field.is-on .iso-key { opacity: .85; }
}


/* ------------------------------------------------------------------
   FITUR
   ------------------------------------------------------------------ */
.feat__icon {
    width: 56px; height: 56px;
    display: grid; place-items: center;
    border-radius: 16px;
    background: var(--c);
    color: var(--ink);
    margin-bottom: 1.25rem;
    box-shadow: 0 6px 0 rgba(0,0,0,.25), 0 0 0 3px #fff;
    transition: transform .4s var(--ease-spring);
}
.feat__icon > i, .feat__icon > svg { width: 26px; height: 26px; }
.pz-card:hover .feat__icon { transform: translateY(-4px) rotate(-6deg); }
.pz-card--dark .feat__icon[style*="--pink"],
.pz-card--dark .feat__icon[style*="--hot"],
.pz-card--dark .feat__icon[style*="--olive"] { color: #fff; }

/* ------------------------------------------------------------------
   SEKSI — chips grid
   ------------------------------------------------------------------ */
.chips-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem .9rem;
    max-width: 62rem;
    margin: 0 auto;
}
.chips-grid .pz-chip:nth-child(6n+1) { --pz-knob: var(--pink); }
.chips-grid .pz-chip:nth-child(6n+2) { --pz-knob: var(--lime); }
.chips-grid .pz-chip:nth-child(6n+3) { --pz-knob: var(--purple); }
.chips-grid .pz-chip:nth-child(6n+4) { --pz-knob: var(--orange); }
.chips-grid .pz-chip:nth-child(6n+5) { --pz-knob: var(--hot); }
.chips-grid .pz-chip:nth-child(6n+6) { --pz-knob: var(--olive); }
.chips-grid .pz-chip:nth-child(6n+2) > i, .chips-grid .pz-chip:nth-child(6n+2) > svg { color: var(--olive); }

/* ------------------------------------------------------------------
   KEYCAP RULE — pemisah section harga (strip warna, tanpa puzzle)
   ------------------------------------------------------------------ */
.kc-rule {
    position: relative;
    z-index: 2;
    line-height: 0;
    font-size: 0;
}
.kc-rule__spectrum {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    height: 10px;
    overflow: hidden;
    box-shadow: 0 4px 0 rgba(43, 27, 61, .18);
}
.kc-rule__spectrum i {
    display: block;
    flex: 1 1 0%;
    min-width: 0;
    height: 100%;
}
.kc-rule__spectrum i:nth-child(1) { background: var(--pink); }
.kc-rule__spectrum i:nth-child(2) { background: var(--lime); }
.kc-rule__spectrum i:nth-child(3) { background: var(--purple); }
.kc-rule__spectrum i:nth-child(4) { background: var(--orange); }
.kc-rule__spectrum i:nth-child(5) { background: var(--hot); }

/* ------------------------------------------------------------------
   KOMPONEN → HARGA — transisi langit yang halus
   ------------------------------------------------------------------ */
.komponen-sec {
    padding-bottom: 8.5rem;
}
@media (min-width: 768px) {
    .komponen-sec { padding-bottom: 10.5rem; }
}
.komponen-sec::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: min(380px, 48%);
    background: linear-gradient(
        180deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,.08) 22%,
        rgba(220, 238, 252, .28) 46%,
        rgba(196, 228, 250, .62) 68%,
        rgba(184, 224, 248, .9) 86%,
        #B8E0F8 100%
    );
    pointer-events: none;
    z-index: 0;
}
.komponen-sec__inner {
    position: relative;
    z-index: 1;
}

/* ------------------------------------------------------------------
   HARGA — toko bangunan (papan, kanopi, etalase, papan promo)
   ------------------------------------------------------------------ */
.harga-sec {
    --shop-wood: #4A2E18;
    --shop-wood-deep: #2F1C0E;
    --shop-wall: #F6C15A;
    --shop-wall-deep: #E0A33A;
    --shop-cream: #FFF6EA;
    --shop-glass: #8FD0F2;
    --aw-a: var(--pink);
    --aw-b: #FFF4E8;
    --aw-w: 30px;

    position: relative;
    z-index: 2;
    overflow: hidden;
    margin-top: -1px;
    background: linear-gradient(180deg, #B8E0F8 0%, #8EC8F5 20%, #C9E8FF 42%, #FFF1D2 76%, #D7B36A 100%);
    padding: 4.5rem 0 4.75rem;
}
.harga-sec__inner {
    position: relative;
    z-index: 2;
    max-width: 80rem;
    margin: 0 auto;
    padding: 0 1.25rem;
}
@media (min-width: 768px) {
    .harga-sec { padding: 6.25rem 0 5.5rem; }
    .harga-sec__inner { padding: 0 2rem; }
}

.harga-sky {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}
.harga-sun {
    position: absolute;
    top: 16%;
    right: 6%;
    left: auto;
    width: 78px;
    height: 78px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 32%, #FFE56A 0 42%, var(--orange) 100%);
    box-shadow:
        0 0 0 12px rgba(249, 156, 1, .22),
        0 0 0 26px rgba(249, 156, 1, .1);
    animation: harga-sun-pulse 5.5s ease-in-out infinite;
}
@keyframes harga-sun-pulse {
    0%, 100% { box-shadow: 0 0 0 12px rgba(249, 156, 1, .22), 0 0 0 26px rgba(249, 156, 1, .1); }
    50% { box-shadow: 0 0 0 16px rgba(249, 156, 1, .28), 0 0 0 34px rgba(249, 156, 1, .12); }
}
.harga-cloud {
    position: absolute;
    width: 92px;
    height: 30px;
    background: #fff;
    border-radius: 40px;
    opacity: .94;
    animation: harga-cloud-drift 16s ease-in-out infinite;
}
.harga-cloud::before,
.harga-cloud::after {
    content: '';
    position: absolute;
    background: #fff;
    border-radius: 50%;
}
.harga-cloud::before { width: 40px; height: 40px; top: -18px; left: 12px; }
.harga-cloud::after  { width: 52px; height: 52px; top: -26px; left: 34px; }
.harga-cloud--a { top: 12%; left: 5%; transform: scale(1.22); animation-duration: 18s; }
.harga-cloud--e { top: 22%; left: 16%; transform: scale(.78); animation-duration: 16s; animation-delay: -4s; }
.harga-cloud--c { top: 17%; left: 32%; transform: scale(.7); animation-duration: 15s; animation-delay: -3s; }
.harga-cloud--b { top: 11%; left: 50%; transform: scale(1.05); animation-duration: 22s; animation-delay: -6s; }
.harga-cloud--d { top: 20%; left: 68%; transform: scale(.82); animation-duration: 20s; animation-delay: -9s; }
@keyframes harga-cloud-drift {
    0%, 100% { translate: 0 0; }
    50% { translate: 22px -10px; }
}

.harga-bird {
    position: absolute;
    width: 14px;
    height: 14px;
    border-color: var(--ink);
    border-style: solid;
    border-width: 2.5px 2.5px 0 0;
    border-radius: 0 8px 0 0;
    transform: rotate(-40deg);
    opacity: .55;
    animation: harga-bird-fly 7s ease-in-out infinite;
}
.harga-bird::after {
    content: '';
    position: absolute;
    left: -9px;
    top: 0;
    width: 14px;
    height: 14px;
    border-color: var(--ink);
    border-style: solid;
    border-width: 2.5px 0 0 2.5px;
    border-radius: 8px 0 0 0;
    transform: rotate(80deg);
}
.harga-bird--1 { top: 16%; left: 14%; animation-duration: 8s; }
.harga-bird--2 { top: 13%; left: 28%; transform: rotate(-40deg) scale(.8); animation-duration: 6.5s; animation-delay: -2s; }
.harga-bird--3 { top: 19%; left: 44%; transform: rotate(-40deg) scale(.7); animation-duration: 9s; animation-delay: -4s; }
@keyframes harga-bird-fly {
    0%, 100% { translate: 0 0; }
    50% { translate: 28px -14px; }
}

.harga-balloon {
    position: absolute;
    width: 22px;
    height: 28px;
    border-radius: 50% 50% 50% 50% / 42% 42% 58% 58%;
    animation: harga-balloon-bob 4.2s ease-in-out infinite;
}
.harga-balloon::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 100%;
    width: 1.5px;
    height: 42px;
    margin-left: -.75px;
    background: var(--ink-3);
}
.harga-balloon::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -3px;
    width: 6px;
    height: 5px;
    margin-left: -3px;
    background: inherit;
    clip-path: polygon(50% 100%, 0 0, 100% 0);
}
.harga-balloon--pink { top: 24%; left: 6%; background: var(--pink); animation-delay: -.8s; }
.harga-balloon--lime { top: 20%; left: 12%; background: var(--lime); animation-duration: 4.8s; }
@keyframes harga-balloon-bob {
    0%, 100% { translate: 0 0 rotate(-6deg); }
    50% { translate: 6px -12px rotate(5deg); }
}

.harga-hill,
.harga-hill--far {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 50% 50% 0 0;
}
.harga-hill--far {
    bottom: -28%;
    width: 360%;
    height: 42%;
    background: #E8C98A;
    z-index: 0;
    opacity: .85;
}
.harga-hill {
    bottom: -42%;
    width: 480%;
    height: 58%;
    background: #D7B36A;
    box-shadow: 0 -10px 0 #E4C888;
    z-index: 1;
}

.harga-tree {
    position: absolute;
    z-index: 2;
    bottom: 11%;
    width: 14px;
    height: 58px;
    background: #6B4423;
    border-radius: 4px;
}
.harga-tree::before,
.harga-tree::after {
    content: '';
    position: absolute;
    left: 50%;
    border-radius: 50%;
    background: #5F8A32;
}
.harga-tree::before {
    width: 52px;
    height: 52px;
    bottom: 28px;
    margin-left: -26px;
}
.harga-tree::after {
    width: 38px;
    height: 38px;
    bottom: 52px;
    margin-left: -19px;
    background: #6F9A38;
}
.harga-tree--l { left: 2.5%; bottom: 13%; }
.harga-tree--r { left: auto; right: 2%; bottom: 12%; transform: scale(1.15); }

.harga-bush {
    position: absolute;
    z-index: 2;
    bottom: 10%;
    width: 44px;
    height: 22px;
    background: #6F9A38;
    border-radius: 20px 20px 8px 8px;
}
.harga-bush::before {
    content: '';
    position: absolute;
    left: 10px;
    top: -10px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #5F8A32;
}
.harga-bush--a { left: 14%; }
.harga-bush--b { right: 12%; background: #7AAA42; }

.harga-bloom {
    --x: 10%;
    position: absolute;
    z-index: 2;
    left: var(--x);
    bottom: 12%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--pink);
    box-shadow: 0 8px 0 #6F9A38;
    animation: harga-bloom-sway 3.4s ease-in-out infinite;
    animation-delay: var(--d, 0s);
}
.harga-bloom--lime { background: var(--lime); }
.harga-bloom--orange { background: var(--orange); }
@keyframes harga-bloom-sway {
    0%, 100% { translate: 0 0; }
    50% { translate: 3px -4px; }
}

.shop-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.25rem;
}
.shop {
    --shop-wood: #4A2E18;
    --shop-wood-deep: #2F1C0E;
    --shop-wall: #F6C15A;
    --shop-wall-deep: #E0A33A;
    --shop-cream: #FFF6EA;
    --aw-a: var(--pink);
    --aw-b: #FFF4E8;
    --aw-w: 30px;

    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 58rem;
    margin: 2rem 0 0;
    padding-top: 40px;
    filter:
        drop-shadow(14px 16px 0 var(--shop-wall-deep))
        drop-shadow(0 28px 36px rgba(43, 27, 61, .28));
}
@media (min-width: 960px) {
    .shop-row {
        display: grid;
        grid-template-columns: 248px minmax(0, 1fr);
        align-items: end;
        gap: 2rem 2.75rem;
    }
    .shop {
        max-width: none;
        margin-top: 2rem;
    }
    .shop-promo { margin-bottom: 6px; }
}
@media (max-width: 959px) {
    .shop { order: -1; }
}

.shop-sign {
    position: relative;
    z-index: 5;
    height: 58px;
    background: var(--shop-wood);
    border-radius: 10px 10px 0 0;
}
.shop-sign__arch {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: min(240px, 62vw);
    height: 92px;
    display: grid;
    place-items: center;
    padding-bottom: 4px;
    background: var(--shop-wood);
    color: #fff;
    border-radius: 110px 110px 0 0;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.6rem, 4vw, 2.15rem);
    letter-spacing: .18em;
    line-height: 1;
    text-shadow: 0 3px 0 var(--shop-wood-deep);
}

.shop-awning {
    position: relative;
    z-index: 4;
}
.shop-awning__rod {
    display: block;
    height: 10px;
    background: var(--shop-wood-deep);
    box-shadow: inset 0 2px 0 rgba(255,255,255,.08);
}
.shop-awning__body {
    display: block;
    height: 58px;
    background: repeating-linear-gradient(
        90deg,
        var(--aw-a) 0 var(--aw-w),
        var(--aw-b) var(--aw-w) calc(var(--aw-w) * 2)
    );
    box-shadow:
        inset 0 8px 0 rgba(255,255,255,.2),
        inset 0 -10px 0 rgba(43, 27, 61, .1);
}
.shop-awning__scallop {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -16px;
    height: 18px;
    background: repeating-linear-gradient(
        90deg,
        var(--aw-a) 0 var(--aw-w),
        var(--aw-b) var(--aw-w) calc(var(--aw-w) * 2)
    );
    -webkit-mask-image: radial-gradient(circle at 50% 0, #000 calc(var(--aw-w) / 2), transparent calc(var(--aw-w) / 2 + 1px));
            mask-image: radial-gradient(circle at 50% 0, #000 calc(var(--aw-w) / 2), transparent calc(var(--aw-w) / 2 + 1px));
    -webkit-mask-size: var(--aw-w) 18px;
            mask-size: var(--aw-w) 18px;
    -webkit-mask-repeat: repeat-x;
            mask-repeat: repeat-x;
}

.shop-wall {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.15rem;
    padding: 2.1rem 1rem 1.35rem;
    background: var(--shop-wall);
    box-shadow:
        inset 0 22px 16px -12px rgba(255, 0, 110, .12),
        inset 0 16px 0 rgba(255,255,255,.14);
}
@media (min-width: 768px) {
    .shop-wall {
        grid-template-columns: 1fr 1fr;
        gap: 1.25rem;
        padding: 2.35rem 1.35rem 1.5rem;
        align-items: stretch;
    }
}

.shop-win {
    min-width: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.shop-win__frame {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    padding: 1.4rem 1rem 1rem;
    background: #E7F6FF;
    border: 6px solid var(--shop-cream);
    border-radius: 6px;
    box-shadow:
        0 0 0 4px var(--shop-wood),
        inset 0 0 0 3px rgba(74, 46, 24, .08);
}
.shop-win__glass {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        linear-gradient(135deg, rgba(255,255,255,.7) 0 16%, transparent 17% 26%, rgba(255,255,255,.28) 27% 35%, transparent 36%),
        linear-gradient(180deg, rgba(143, 208, 242, .22), rgba(143, 208, 242, .08));
    border-radius: 1px;
}
.shop-win__sill {
    display: block;
    height: 14px;
    margin: 0 2px;
    background: var(--shop-cream);
    border-radius: 0 0 6px 6px;
    box-shadow: 0 5px 0 var(--shop-wood), 0 10px 14px -10px rgba(43, 27, 61, .35);
}

.shop-base {
    height: 26px;
    background: var(--shop-wood);
    box-shadow: inset 0 6px 0 var(--shop-wood-deep);
}
.shop-street {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 1.5rem;
    min-height: 44px;
    padding: .7rem .75rem .15rem;
    background:
        repeating-linear-gradient(90deg, #E8D4B0 0 48px, #DCC6A0 48px 96px);
}
.shop-pot {
    position: relative;
    width: 38px;
    height: 26px;
    background: #E07030;
    clip-path: polygon(12% 0, 88% 0, 100% 100%, 0 100%);
    border-radius: 0 0 5px 5px;
    box-shadow: 0 3px 0 #B04E1C;
}
.shop-pot::before {
    content: '';
    position: absolute;
    bottom: 88%;
    left: 50%;
    width: 36px;
    height: 28px;
    margin-left: -18px;
    background: #6F9A38;
    border-radius: 50% 50% 40% 40%;
    box-shadow: -11px 6px 0 #5C862E, 11px 6px 0 #5C862E;
}
.shop-pot::after {
    content: '';
    position: absolute;
    bottom: 132%;
    left: 50%;
    width: 11px;
    height: 11px;
    margin-left: -5px;
    border-radius: 50%;
    background: var(--pink);
    box-shadow: -10px 6px 0 var(--lime), 10px 6px 0 var(--orange);
}
.shop-pot--l { margin-right: auto; }
.shop-pot--r { margin-left: auto; }

.shop-promo {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 236px;
    transform: rotate(3.5deg);
    filter: drop-shadow(8px 10px 0 rgba(74, 46, 24, .16));
}
.shop-promo__board {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 0 1.15rem 1.45rem;
    background: #FFF6E4;
    border: 5px solid var(--shop-wood);
    border-radius: 14px;
    text-align: center;
    box-shadow: inset 0 0 0 2px #E8D4B0;
}
.shop-promo__title {
    margin: 0 -1.15rem 1.15rem;
    padding: .85rem 1rem .8rem;
    background: var(--shop-wood);
    color: #FFF6E4;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.08rem;
    letter-spacing: .04em;
    line-height: 1.2;
    border-radius: 8px 8px 0 0;
}
.shop-promo__lead {
    margin: 0 0 .7rem;
    font-weight: 700;
    font-size: .92rem;
    color: var(--ink-2);
    line-height: 1.35;
}
.shop-promo__deal {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--ink);
}
.shop-promo__price {
    margin: .35rem 0 .7rem;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.85rem;
    letter-spacing: -.03em;
    color: var(--ink);
    line-height: 1;
}
.shop-promo__sub {
    margin: 0;
    padding-top: .85rem;
    font-size: .78rem;
    font-weight: 700;
    color: var(--ink-3);
    border-top: 2px dashed rgba(74, 46, 24, .28);
}
.shop-promo__pole {
    display: block;
    width: 16px;
    height: 340px;
    margin-top: -2px;
    background: linear-gradient(90deg, #6B4423 0%, #4A2E18 38%, #7A5230 100%);
    box-shadow: 3px 0 0 rgba(47, 28, 14, .25);
}
.shop-promo__foot {
    display: block;
    width: 68px;
    height: 12px;
    margin-top: -2px;
    background: var(--shop-wood);
    border-radius: 4px;
    box-shadow: 0 3px 0 var(--shop-wood-deep);
}
@media (max-width: 959px) {
    .shop-promo__pole,
    .shop-promo__foot { display: none; }
}

.shop-win .price-card {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 1.55rem 1.35rem 1.45rem;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 14px 28px -20px rgba(43, 27, 61, .35);
    transition: transform .35s var(--ease-spring), box-shadow .35s var(--ease-spring);
}
.shop-win .price-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 32px -18px rgba(43, 27, 61, .4);
}
.shop-win .price-card--hero {
    background: var(--lime);
}
.shop-win .price-card--hero:hover {
    box-shadow: 0 20px 32px -16px rgba(116, 140, 44, .45);
}

@media (max-width: 899px) {
    .shop { margin-top: 1.5rem; padding-top: 36px; --aw-w: 24px; }
    .shop-sign { height: 44px; }
    .shop-sign__arch { height: 78px; }
}
@media (max-width: 639px) {
    .harga-cloud--c,
    .harga-cloud--d,
    .harga-bird--3,
    .harga-balloon--lime,
    .harga-tree--r,
    .harga-bush--b,
    .shop-pot { display: none; }
    .shop-awning__body { height: 44px; }
    .shop-win .price-card { padding: 1.35rem 1.1rem 1.25rem; }
    .shop-win .h-display.text-6xl { font-size: 2.6rem; }
    .shop-promo { width: 210px; }
    .shop-promo__title { font-size: 1rem; }
}
@media (max-width: 767px) {
    .harga-sun {
        top: 8px;
        right: 8px;
        left: auto;
        width: 38px;
        height: 38px;
        box-shadow:
            0 0 0 7px rgba(249, 156, 1, .2),
            0 0 0 14px rgba(249, 156, 1, .08);
    }
    .harga-cloud--a { top: 6px; left: 3%; transform: scale(.52); }
    .harga-cloud--b { top: 12px; left: 34%; transform: scale(.4); }
    .harga-cloud--e { top: 4px; left: 18%; transform: scale(.38); }
    .harga-cloud--c,
    .harga-cloud--d { display: none; }
    .harga-balloon--pink { top: 26px; left: 5%; transform: scale(.85); }
}

@media (prefers-reduced-motion: reduce) {
    .harga-cloud,
    .harga-sun,
    .harga-bird,
    .harga-balloon,
    .harga-bloom { animation: none; }
}

/* ------------------------------------------------------------------
   SOIL JOIN — tepi tanah toko ke FAQ
   ------------------------------------------------------------------ */
.soil-join {
    position: relative;
    z-index: 3;
    margin-top: -2px;
    line-height: 0;
    overflow: hidden;
    pointer-events: none;
    background: #D7B36A;
}
.soil-join__bed {
    position: relative;
    z-index: 1;
    height: 76px;
    background:
        radial-gradient(ellipse 5px 3.5px at 11% 32%, rgba(90, 58, 18, .32) 0 70%, transparent 72%),
        radial-gradient(ellipse 3.5px 2.5px at 27% 68%, rgba(90, 58, 18, .24) 0 70%, transparent 72%),
        radial-gradient(ellipse 6px 4px at 48% 44%, rgba(90, 58, 18, .28) 0 70%, transparent 72%),
        radial-gradient(ellipse 4px 3px at 63% 72%, rgba(90, 58, 18, .22) 0 70%, transparent 72%),
        radial-gradient(ellipse 5px 3px at 86% 38%, rgba(90, 58, 18, .3) 0 70%, transparent 72%),
        linear-gradient(180deg, #D7B36A 0%, #C9A45A 100%);
}
.soil-join__pebble {
    position: absolute;
    left: var(--x);
    top: var(--y, 40%);
    width: calc(11px * var(--s, 1));
    height: calc(7.5px * var(--s, 1));
    border-radius: 50%;
    background: #8B6A38;
    box-shadow: 1px 1.5px 0 #6E5228;
    opacity: .72;
    transform: rotate(-18deg);
}
.soil-join__root {
    position: absolute;
    left: var(--x);
    top: 6%;
    width: 3px;
    height: 78%;
    background: #A67C52;
    border-radius: 2px;
    transform: rotate(9deg);
    opacity: .42;
}
.soil-join__root::before,
.soil-join__root::after {
    content: '';
    position: absolute;
    background: inherit;
    border-radius: 2px;
    width: 2.5px;
}
.soil-join__root::before {
    height: 42%;
    top: 28%;
    left: 5px;
    transform: rotate(30deg);
}
.soil-join__root::after {
    height: 36%;
    top: 48%;
    left: -6px;
    transform: rotate(-34deg);
}
.soil-join__root--b {
    transform: rotate(-8deg);
    height: 70%;
    top: 14%;
    opacity: .34;
}
.soil-join__sprout {
    position: absolute;
    left: var(--x);
    top: 8%;
    width: 3px;
    height: 26px;
    background: #5F8A32;
    border-radius: 3px;
}
.soil-join__sprout::before,
.soil-join__sprout::after {
    content: '';
    position: absolute;
    top: 1px;
    width: 12px;
    height: 8px;
    background: #7AAA42;
    border-radius: 50%;
}
.soil-join__sprout::before { left: -10px; transform: rotate(-28deg); }
.soil-join__sprout::after { left: 2px; transform: rotate(28deg); background: #6F9A38; }
.soil-join__shroom {
    position: absolute;
    left: var(--x);
    top: 18%;
    width: 5px;
    height: 14px;
    background: #F3E0C4;
    border-radius: 2px;
}
.soil-join__shroom::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 10px;
    width: 20px;
    height: 12px;
    margin-left: -10px;
    background: var(--pink);
    border-radius: 12px 12px 4px 4px;
    box-shadow: inset 4px 3px 0 rgba(255, 255, 255, .35);
}
.soil-join__wave {
    display: block;
    width: 100%;
    height: 78px;
    margin-top: -1px;
}
@media (min-width: 768px) {
    .soil-join__bed { height: 88px; }
    .soil-join__wave { height: 92px; }
}

.price-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 2rem 2.05rem 2.1rem;
    border-radius: 32px;
    background: #fff;
    box-shadow:
        0 0 0 3px #fff,
        0 8px 0 var(--ink-5),
        0 26px 40px -18px rgba(43, 27, 61, .28);
    transition: transform .4s var(--ease-spring), box-shadow .4s var(--ease-spring);
}
.price-card:hover {
    transform: translateY(-8px);
    box-shadow:
        0 0 0 3px #fff,
        0 11px 0 var(--ink-5),
        0 34px 48px -16px rgba(43, 27, 61, .32);
}
.price-card--hero {
    background: var(--lime);
    box-shadow:
        0 0 0 3px #fff,
        0 8px 0 var(--olive),
        0 26px 40px -16px rgba(116, 140, 44, .42);
}
.price-card--hero:hover {
    box-shadow:
        0 0 0 3px #fff,
        0 11px 0 var(--olive),
        0 34px 48px -14px rgba(116, 140, 44, .48);
}

.price-card__badge {
    position: absolute;
    top: -18px; right: 24px;
    --tilt: 3deg;
}
.price-list { display: flex; flex-direction: column; gap: .8rem; }
.price-list li {
    display: flex; align-items: flex-start; gap: .7rem;
    font-weight: 600;
    color: var(--ink-2);
    line-height: 1.4;
}
.price-list li > i, .price-list li > svg {
    flex: none;
    width: 24px; height: 24px;
    padding: 4px;
    border-radius: 7px;
    background: var(--lime);
    color: var(--ink);
    box-shadow: 0 2px 0 var(--olive);
}
.price-list li > span {
    flex: 1 1 0;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.price-list li .font-mono {
    font-size: .82em;
}
.price-list--dark li { color: var(--ink); }
.price-list--dark li > i, .price-list--dark li > svg { background: var(--ink); color: #fff; box-shadow: 0 2px 0 var(--ink-deep); }

/* ------------------------------------------------------------------
   FAQ
   ------------------------------------------------------------------ */
.faq-section {
    position: relative;
    z-index: 3;
    overflow: visible;
    background-color: var(--ink-6);
    background-image: linear-gradient(180deg, var(--ink-6) 0%, var(--ink-6) calc(100% - 5.5rem), #fff 100%);
    padding-top: 3.25rem;
}
@media (min-width: 768px) {
    .faq-section { padding-top: 4rem; }
}
.faq-orbit {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}
.faq-orbit .pz-piece {
    position: absolute;
    animation: piece-drift 5.5s ease-in-out infinite;
    animation-delay: var(--d, 0ms);
    opacity: .92;
}
@media (max-width: 767px) {
    .faq-section { padding-top: 3.25rem; padding-bottom: 5.75rem; }
    .faq-orbit .pz-piece {
        display: block;
        opacity: 1;
        animation-name: piece-drift-faq;
        animation-duration: 4.2s;
    }
    .faq-orbit .pz-piece:nth-child(1) {
        --sz: 64px !important;
        top: 10px !important; left: 6px !important;
        right: auto; bottom: auto;
    }
    .faq-orbit .pz-piece:nth-child(2) {
        --sz: 54px !important;
        top: 6px !important; right: 8px !important;
        left: auto; bottom: auto;
    }
    .faq-orbit .pz-piece:nth-child(3) {
        --sz: 44px !important;
        top: 8px !important;
        left: auto !important;
        right: 72px !important;
        bottom: auto;
    }
    .faq-orbit .pz-piece:nth-child(4) {
        --sz: 58px !important;
        top: auto !important; right: 4px !important; bottom: 14px !important;
        left: auto;
    }
    .faq-orbit .pz-piece:nth-child(5) {
        --sz: 56px !important;
        top: auto !important; left: 4px !important; bottom: 10px !important;
        right: auto;
    }
    .faq-orbit .pz-piece:nth-child(6) {
        --sz: 42px !important;
        top: auto !important; right: 36% !important; bottom: 62px !important;
        left: auto;
    }
}
@keyframes piece-drift-faq {
    0%, 100% { transform: translateY(0) rotate(var(--rot)); }
    50%      { transform: translateY(-16px) rotate(calc(var(--rot) + 20deg)); }
}
.faq {
    background: #fff;
    border-radius: 20px;
    box-shadow: var(--shadow-ring), 0 4px 0 var(--ink-5);
    overflow: hidden;
    transition: box-shadow .25s, transform .25s var(--ease-spring);
}
.faq[open] { box-shadow: 0 0 0 2px var(--ink), 0 4px 0 var(--ink); }
.faq summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.15rem 1.35rem;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
    content: '+';
    flex: none;
    width: 30px; height: 30px;
    display: grid; place-items: center;
    border-radius: 9px;
    background: var(--ink-6);
    color: var(--ink);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.2rem;
    transition: transform .3s var(--ease-spring), background .3s, color .3s;
}
.faq[open] summary::after { content: '−'; background: var(--pink); color: #fff; transform: rotate(180deg); }
.faq p {
    padding: 0 1.35rem 1.25rem;
    color: var(--ink-2);
    font-weight: 500;
    line-height: 1.65;
    animation: faq-in .3s var(--ease-out) both;
}
@keyframes faq-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------------
   CTA
   ------------------------------------------------------------------ */
.cta { box-shadow: 0 0 0 6px #fff, 0 0 0 8px var(--ink-5), 0 40px 80px -30px rgba(43,27,61,.5); overflow: hidden; }
.cta__keys { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.cta__keys .iso-key { z-index: 1; }
.cta-sec {
    background-color: #fff;
    padding-top: 2.75rem;
}
@media (min-width: 768px) {
    .cta-sec { padding-top: 3.75rem; }
}

/* ------------------------------------------------------------------
   FOOTER — papan keycap + puzzle, tidak bergantung Tailwind
   ------------------------------------------------------------------ */
.site-footer {
    position: relative;
    background-color: var(--ink-6);
    background-image: radial-gradient(rgba(43, 27, 61, .08) 1.5px, transparent 1.5px);
    background-size: 28px 28px;
    overflow: hidden;
    margin: 0;
    padding: 0;
    max-width: 100%;
    border-top: 2px solid var(--ink-5);
}
.site-footer__orbit {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}
.site-footer__orbit .pz-piece {
    position: absolute;
    opacity: .55;
}
.site-footer__star {
    position: absolute;
    width: 28px;
    height: auto;
    top: 42%;
    right: 16%;
    animation: star-spin 8s linear infinite;
    opacity: .7;
}
@media (max-width: 767px) {
    .site-footer__orbit .pz-piece:nth-child(1) {
        top: auto !important;
        right: auto !important;
        left: -18px;
        bottom: 10px;
        --sz: 26px !important;
        opacity: .4;
    }
    .site-footer__orbit .pz-piece:nth-child(2) {
        top: 8px !important;
        right: -16px !important;
        left: auto;
        --sz: 22px !important;
        opacity: .38;
    }
    .site-footer__orbit .pz-piece:nth-child(3) {
        bottom: 8px !important;
        right: -14px !important;
        --sz: 24px !important;
        opacity: .38;
    }
    .site-footer__star {
        top: auto;
        bottom: 12px;
        right: 28%;
        width: 18px;
        opacity: .45;
    }
}
.site-footer__inner {
    position: relative;
    z-index: 1;
    max-width: 80rem;
    margin: 0 auto;
    padding: 2.75rem 1.25rem 1.35rem;
}
@media (min-width: 768px) {
    .site-footer__inner { padding: 3.5rem 2rem 1.6rem; }
}
.site-footer__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.75rem 1.1rem;
    align-items: start;
}
.site-footer__brand,
.site-footer__play { grid-column: 1 / -1; }
@media (min-width: 900px) {
    .site-footer__grid {
        grid-template-columns: 1.35fr .9fr .85fr 1.15fr;
        gap: 2rem 1.75rem;
    }
    .site-footer__brand,
    .site-footer__play { grid-column: auto; }
}
.site-footer__logo {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    margin-bottom: .85rem;
    color: inherit;
    text-decoration: none;
}
.site-footer__logo img {
    width: 44px;
    height: 44px;
    display: block;
}
.site-footer__tagline {
    max-width: 20rem;
    margin: 0 0 1.1rem;
    color: var(--ink-2);
    font-weight: 600;
    font-size: .98rem;
    line-height: 1.55;
}
.site-footer__label {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 .85rem;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--ink);
}
.site-footer__dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: var(--c, var(--pink));
    box-shadow: 0 0 0 2px #fff, 0 2px 0 var(--ink-5);
    flex: none;
}
.site-footer__links {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.foot-link {
    --c: var(--pink);
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .55rem .8rem;
    border-radius: 14px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: .95rem;
    color: var(--ink-2);
    background: #fff;
    box-shadow: 0 0 0 2px #fff, 0 3px 0 var(--ink-5);
    text-decoration: none;
    transition: color .2s, transform .2s var(--ease-spring), box-shadow .2s;
}
.foot-link > i {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: var(--c);
    box-shadow: 0 0 0 2px #fff;
    flex: none;
}
.foot-link:hover {
    color: var(--ink);
    transform: translateY(-2px);
    box-shadow: 0 0 0 2px #fff, 0 5px 0 var(--c);
}
.site-footer__play {
    background: #fff;
    border-radius: 24px;
    padding: 1.15rem 1.15rem 1.05rem;
    box-shadow: 0 0 0 2px #fff, 0 6px 0 var(--ink-5), 0 18px 28px -18px rgba(43, 27, 61, .28);
    transform: rotate(-1deg);
}
.footer-keys {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 7px;
    padding-bottom: 4px;
    white-space: nowrap;
}
.footer-keys .kc-key {
    --kc-size: 40px;
    --kc-depth: 5px;
    flex: none;
    font-size: .95rem;
}
.site-footer__hint {
    margin: .85rem 0 0;
    font-size: .78rem;
    font-weight: 700;
    color: var(--ink-3);
}
.site-footer__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .65rem 1rem;
    margin-top: 2rem;
    padding: .85rem 1rem;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 0 0 2px #fff, 0 4px 0 var(--ink-5);
    font-size: .85rem;
    font-weight: 700;
    color: var(--ink-3);
}
.site-footer__domain {
    font-family: var(--font-mono);
    color: var(--ink);
    background: var(--lime-soft);
    padding: .25rem .55rem;
    border-radius: 8px;
    box-shadow: 0 2px 0 var(--lime);
}