/* ==========================================================
   WACooking Liquid Ecosystem V1
   Meta + WhatsApp + WACooking
   ========================================================== */

.hero-visual.liquid-hero-visual {
    min-height: 540px;
    display: grid;
    place-items: center;
    perspective: none;
}

.liquid-ecosystem {
    --orbit-radius: clamp(150px, 15vw, 195px);
    --orbit-radius-mid: clamp(92px, 9vw, 125px);

    position: relative;
    width: min(100%, 620px);
    min-height: 520px;
    isolation: isolate;
}

.liquid-filter-defs {
    position: absolute;
    width: 0;
    height: 0;
    pointer-events: none;
}

.liquid-stage-glow {
    position: absolute;
    z-index: 0;
    left: 50%;
    top: 50%;
    width: 78%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background:
        radial-gradient(circle at 45% 45%,
            rgba(255,255,255,.95) 0%,
            rgba(106,132,255,.16) 28%,
            rgba(112,72,255,.11) 45%,
            rgba(25,201,129,.06) 58%,
            transparent 72%);
    filter: blur(12px);
}

.liquid-orbit-ring {
    position: absolute;
    z-index: 0;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    pointer-events: none;
}

.orbit-ring-one {
    width: 72%;
    aspect-ratio: 1;
    border: 1px solid rgba(76,102,190,.14);
    box-shadow:
        inset 0 0 40px rgba(69,100,255,.035),
        0 0 50px rgba(80,90,255,.025);
}

.orbit-ring-two {
    width: 56%;
    aspect-ratio: 1;
    border: 1px dashed rgba(68,93,179,.10);
}

.liquid-goo,
.ecosystem-orbit {
    position: absolute;
    inset: 0;
    transform-origin: 50% 50%;
    animation: ecosystem-wheel 30s linear infinite;
}

.liquid-goo {
    z-index: 1;
    filter: url("#wacooking-liquid-goo");
    opacity: .82;
}

.ecosystem-orbit {
    z-index: 3;
}

.goo-slot,
.ecosystem-slot {
    --node-angle: 0deg;
    --node-angle-negative: 0deg;

    position: absolute;
    left: 50%;
    top: 50%;
    width: 1px;
    height: 1px;
    transform-origin: 0 0;

    animation:
        ecosystem-converge
        18s
        cubic-bezier(.65,0,.35,1)
        infinite;
}

.slot-meta {
    --node-angle: -90deg;
    --node-angle-negative: 90deg;
}

.slot-whatsapp {
    --node-angle: 30deg;
    --node-angle-negative: -30deg;
}

.slot-wacooking {
    --node-angle: 150deg;
    --node-angle-negative: -150deg;
}

.liquid-blob {
    position: absolute;
    left: 0;
    top: 0;
    width: 126px;
    height: 126px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
}

.blob-meta {
    background:
        radial-gradient(circle at 30% 25%,
            rgba(255,255,255,.94),
            rgba(75,118,255,.84) 42%,
            rgba(74,79,223,.82) 100%);
}

.blob-whatsapp {
    background:
        radial-gradient(circle at 30% 25%,
            rgba(255,255,255,.94),
            rgba(45,211,125,.86) 42%,
            rgba(18,160,93,.84) 100%);
}

.blob-wacooking {
    background:
        radial-gradient(circle at 30% 25%,
            rgba(255,255,255,.94),
            rgba(117,92,255,.85) 42%,
            rgba(70,85,224,.86) 100%);
}

.node-counterspin {
    position: absolute;
    left: 0;
    top: 0;
    width: 1px;
    height: 1px;
    transform-origin: 0 0;
    animation: ecosystem-counterspin 30s linear infinite;
}

.ecosystem-node {
    position: absolute;
    left: 0;
    top: 0;
    display: grid;
    justify-items: center;
    gap: 11px;
    transform: translate(-50%, -50%);
    animation: ecosystem-node-visibility 18s ease-in-out infinite;
}

.ecosystem-bubble {
    position: relative;
    width: 112px;
    height: 112px;
    display: grid;
    place-items: center;
    overflow: hidden;

    border: 1px solid rgba(255,255,255,.92);
    border-radius: 50% 47% 52% 48% / 48% 53% 47% 52%;

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

    box-shadow:
        0 22px 55px rgba(26,50,105,.17),
        inset 0 2px 8px rgba(255,255,255,.95),
        inset 0 -12px 28px rgba(43,68,150,.08);

    animation: ecosystem-water-morph 7s ease-in-out infinite;
}

.ecosystem-bubble::before {
    content: "";
    position: absolute;
    width: 48%;
    height: 28%;
    left: 15%;
    top: 11%;
    border-radius: 50%;
    background: rgba(255,255,255,.56);
    filter: blur(8px);
    transform: rotate(-20deg);
}

.ecosystem-bubble::after {
    content: "";
    position: absolute;
    inset: 5px;
    border-radius: inherit;
    border: 1px solid rgba(255,255,255,.35);
    pointer-events: none;
}

.bubble-meta {
    color: #3566ff;
    background:
        radial-gradient(circle at 32% 25%, rgba(255,255,255,.98), rgba(255,255,255,.38) 30%, transparent 52%),
        linear-gradient(145deg, rgba(224,235,255,.92), rgba(192,206,255,.48));
}

.bubble-whatsapp {
    color: #12a966;
    background:
        radial-gradient(circle at 32% 25%, rgba(255,255,255,.98), rgba(255,255,255,.40) 30%, transparent 52%),
        linear-gradient(145deg, rgba(224,255,240,.94), rgba(179,238,210,.52));
}

.bubble-wacooking {
    background:
        radial-gradient(circle at 32% 25%, rgba(255,255,255,.98), rgba(255,255,255,.38) 30%, transparent 52%),
        linear-gradient(145deg, rgba(230,231,255,.94), rgba(210,197,255,.52));
}

.meta-mark {
    position: relative;
    z-index: 2;
    width: 62px;
    height: 46px;
}

.whatsapp-mark {
    position: relative;
    z-index: 2;
    width: 58px;
    height: 58px;
}

.wacooking-mark {
    position: relative;
    z-index: 2;
    width: 70px;
    height: 70px;
    object-fit: contain;
    filter: drop-shadow(0 6px 15px rgba(53,102,255,.14));
}

.ecosystem-node-label {
    min-width: 112px;
    display: grid;
    gap: 1px;
    padding: 7px 11px;

    color: #1f2c41;
    background: rgba(255,255,255,.72);
    border: 1px solid rgba(255,255,255,.88);
    border-radius: 12px;
    box-shadow: 0 9px 24px rgba(28,47,88,.08);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    text-align: center;
}

.ecosystem-node-label strong {
    font-size: 11px;
    letter-spacing: -.01em;
}

.ecosystem-node-label small {
    color: #8894a7;
    font-size: 8px;
    font-weight: 700;
}

.ecosystem-core {
    position: absolute;
    z-index: 5;
    left: 50%;
    top: 50%;
    width: 164px;
    height: 164px;
    opacity: 0;
    transform: translate(-50%, -50%) scale(.68);
    pointer-events: none;
    animation: ecosystem-core-cycle 18s ease-in-out infinite;
}

.core-water {
    position: absolute;
    inset: 15px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 5px;

    background:
        radial-gradient(circle at 30% 22%, rgba(255,255,255,.98), rgba(255,255,255,.50) 24%, transparent 46%),
        linear-gradient(145deg, rgba(215,229,255,.96), rgba(218,203,255,.84) 52%, rgba(186,244,224,.68));

    border: 1px solid rgba(255,255,255,.95);
    border-radius: 48% 52% 45% 55% / 55% 45% 55% 45%;

    box-shadow:
        0 28px 65px rgba(59,75,172,.24),
        inset 0 4px 12px rgba(255,255,255,.88);

    animation: ecosystem-core-morph 4.6s ease-in-out infinite;
}

.core-water img {
    width: 68px;
    height: 68px;
    object-fit: contain;
}

.core-water span {
    color: #51617d;
    font-size: 7px;
    font-weight: 950;
    letter-spacing: .16em;
}

.core-ripple {
    position: absolute;
    inset: 0;
    border: 1px solid rgba(90,103,232,.22);
    border-radius: 50%;
    opacity: 0;
    animation: ecosystem-ripple 18s ease-out infinite;
}

.core-ripple-two {
    animation-delay: .7s;
}

.ecosystem-caption {
    position: absolute;
    z-index: 8;
    left: 50%;
    bottom: 0;
    width: max-content;
    max-width: 92%;
    transform: translateX(-50%);
    display: grid;
    gap: 4px;
    text-align: center;
}

.ecosystem-caption span {
    color: #8b97aa;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .16em;
}

.ecosystem-caption strong {
    color: #263650;
    font-size: 12px;
    letter-spacing: -.01em;
}

@keyframes ecosystem-wheel {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@keyframes ecosystem-counterspin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(-360deg); }
}

@keyframes ecosystem-converge {
    0%, 28% {
        transform:
            rotate(var(--node-angle))
            translateX(var(--orbit-radius))
            rotate(var(--node-angle-negative));
    }

    40% {
        transform:
            rotate(var(--node-angle))
            translateX(var(--orbit-radius-mid))
            rotate(var(--node-angle-negative));
    }

    48%, 62% {
        transform:
            rotate(var(--node-angle))
            translateX(0)
            rotate(var(--node-angle-negative));
    }

    71% {
        transform:
            rotate(var(--node-angle))
            translateX(var(--orbit-radius-mid))
            rotate(var(--node-angle-negative));
    }

    80%, 100% {
        transform:
            rotate(var(--node-angle))
            translateX(var(--orbit-radius))
            rotate(var(--node-angle-negative));
    }
}

@keyframes ecosystem-node-visibility {
    0%, 39% {
        opacity: 1;
        filter: blur(0);
    }

    48%, 62% {
        opacity: .08;
        filter: blur(3px);
    }

    72%, 100% {
        opacity: 1;
        filter: blur(0);
    }
}

@keyframes ecosystem-core-cycle {
    0%, 43% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(.68);
    }

    50% {
        opacity: .96;
        transform: translate(-50%, -50%) scale(.94);
    }

    54%, 60% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }

    68% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.13);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(.68);
    }
}

@keyframes ecosystem-ripple {
    0%, 47% {
        opacity: 0;
        transform: scale(.78);
    }

    52% {
        opacity: .52;
    }

    66% {
        opacity: 0;
        transform: scale(1.42);
    }

    100% {
        opacity: 0;
    }
}

@keyframes ecosystem-water-morph {
    0%, 100% {
        border-radius: 50% 47% 52% 48% / 48% 53% 47% 52%;
    }

    33% {
        border-radius: 46% 54% 48% 52% / 54% 46% 55% 45%;
    }

    66% {
        border-radius: 55% 45% 54% 46% / 45% 55% 46% 54%;
    }
}

@keyframes ecosystem-core-morph {
    0%, 100% {
        border-radius: 48% 52% 45% 55% / 55% 45% 55% 45%;
    }

    35% {
        border-radius: 55% 45% 56% 44% / 46% 57% 43% 54%;
    }

    70% {
        border-radius: 43% 57% 46% 54% / 58% 42% 56% 44%;
    }
}

@media (max-width: 920px) {
    .hero-visual.liquid-hero-visual {
        width: min(100%, 680px);
        min-height: 520px;
        margin-inline: auto;
    }

    .liquid-ecosystem {
        --orbit-radius: clamp(145px, 22vw, 190px);
    }
}

@media (max-width: 720px) {
    .hero-visual.liquid-hero-visual {
        width: 100%;
        min-height: 430px;
        margin-left: 0;
        margin-inline: auto;
    }

    .liquid-ecosystem {
        --orbit-radius: 136px;
        --orbit-radius-mid: 82px;
        min-height: 420px;
    }

    .ecosystem-bubble {
        width: 92px;
        height: 92px;
    }

    .liquid-blob {
        width: 104px;
        height: 104px;
    }

    .meta-mark {
        width: 52px;
    }

    .whatsapp-mark {
        width: 49px;
        height: 49px;
    }

    .wacooking-mark {
        width: 58px;
        height: 58px;
    }

    .ecosystem-node-label {
        min-width: 95px;
        padding: 6px 8px;
    }

    .ecosystem-core {
        width: 144px;
        height: 144px;
    }
}

@media (max-width: 480px) {
    .hero-visual.liquid-hero-visual {
        min-height: 390px;
    }

    .liquid-ecosystem {
        --orbit-radius: 112px;
        --orbit-radius-mid: 68px;
        min-height: 380px;
    }

    .ecosystem-bubble {
        width: 78px;
        height: 78px;
    }

    .liquid-blob {
        width: 90px;
        height: 90px;
    }

    .meta-mark {
        width: 44px;
    }

    .whatsapp-mark {
        width: 42px;
        height: 42px;
    }

    .wacooking-mark {
        width: 49px;
        height: 49px;
    }

    .ecosystem-node-label {
        min-width: 82px;
        border-radius: 10px;
    }

    .ecosystem-node-label strong {
        font-size: 9px;
    }

    .ecosystem-node-label small {
        font-size: 7px;
    }

    .ecosystem-core {
        width: 126px;
        height: 126px;
    }

    .core-water img {
        width: 53px;
        height: 53px;
    }

    .ecosystem-caption strong {
        font-size: 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .liquid-goo,
    .ecosystem-orbit,
    .node-counterspin,
    .ecosystem-node,
    .ecosystem-bubble,
    .ecosystem-core,
    .core-ripple {
        animation: none !important;
    }

    .goo-slot,
    .ecosystem-slot {
        animation: none !important;
        transform:
            rotate(var(--node-angle))
            translateX(var(--orbit-radius))
            rotate(var(--node-angle-negative));
    }

    .ecosystem-core {
        opacity: 0;
    }
}


/* === WACOOKING LIQUID V2 START === */

/* Hero atmosphere */
.hero-section {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 76% 28%, rgba(83,110,255,.14), transparent 20%),
        radial-gradient(circle at 83% 56%, rgba(124,77,255,.13), transparent 22%),
        radial-gradient(circle at 70% 70%, rgba(25,201,129,.08), transparent 18%),
        linear-gradient(180deg, rgba(255,255,255,.92), rgba(244,248,255,.97)),
        #f5f8ff;
}

.hero-section::before,
.hero-section::after {
    content: "";
    position: absolute;
    pointer-events: none;
    border-radius: 50%;
    filter: blur(12px);
    z-index: 0;
}

.hero-section::before {
    width: 620px;
    height: 620px;
    right: -40px;
    top: 30px;
    background:
        radial-gradient(circle, rgba(86,108,255,.18), rgba(86,108,255,.08) 35%, rgba(124,77,255,.06) 58%, transparent 74%);
}

.hero-section::after {
    width: 420px;
    height: 420px;
    right: 130px;
    top: 170px;
    background:
        radial-gradient(circle, rgba(25,201,129,.10), rgba(25,201,129,.05) 32%, transparent 68%);
}

.hero-grid {
    opacity: .72;
    mask-image: linear-gradient(to bottom, black, rgba(0,0,0,.86) 54%, transparent 88%);
}

.hero-content {
    max-width: 610px;
}

.hero-content h1 {
    max-width: 10.5ch;
    letter-spacing: -.072em;
}

.hero-content h1 span {
    background: linear-gradient(100deg, #265dff 6%, #5a63ff 44%, #8649ff 76%, #18c981 115%);
    -webkit-background-clip: text;
    background-clip: text;
}

.hero-description {
    max-width: 560px;
    color: #51617a;
    font-size: 17px;
    line-height: 1.82;
}

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

.hero-proof {
    margin-top: 24px;
}

/* Liquid stage */
.hero-visual.liquid-hero-visual {
    min-height: 560px;
    transform: translateX(6px);
}

.liquid-ecosystem {
    width: min(100%, 650px);
    min-height: 548px;
}

.liquid-ecosystem::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 7% 4% 12%;
    border-radius: 36px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.48), rgba(255,255,255,.18));
    border: 1px solid rgba(255,255,255,.52);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.72),
        0 30px 80px rgba(55,78,155,.08);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.liquid-ecosystem::after {
    content: "";
    position: absolute;
    z-index: 0;
    left: 50%;
    top: 49%;
    width: 74%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background:
        radial-gradient(circle,
            rgba(92,114,255,.16) 0%,
            rgba(124,77,255,.12) 30%,
            rgba(25,201,129,.07) 48%,
            transparent 70%);
    filter: blur(16px);
}

.liquid-stage-glow {
    width: 84%;
    background:
        radial-gradient(circle at 45% 45%,
            rgba(255,255,255,.98) 0%,
            rgba(89,118,255,.22) 24%,
            rgba(124,77,255,.15) 43%,
            rgba(25,201,129,.10) 58%,
            transparent 76%);
    filter: blur(10px);
}

.orbit-ring-one {
    width: 74%;
    border: 1px solid rgba(70,98,189,.12);
    box-shadow:
        inset 0 0 46px rgba(69,100,255,.04),
        0 0 54px rgba(80,90,255,.04);
}

.orbit-ring-two {
    width: 58%;
    border: 1px dashed rgba(68,93,179,.08);
}

.liquid-goo,
.ecosystem-orbit {
    animation: ecosystem-wheel 22s linear infinite;
}

.goo-slot,
.ecosystem-slot {
    animation: ecosystem-converge 22s cubic-bezier(.65,0,.35,1) infinite;
}

.node-counterspin {
    animation: ecosystem-counterspin 22s linear infinite;
}

.ecosystem-node {
    animation: ecosystem-node-visibility 22s ease-in-out infinite;
}

.liquid-blob {
    width: 136px;
    height: 136px;
    opacity: .94;
    filter: saturate(1.06) blur(.2px);
}

.blob-meta {
    box-shadow: 0 0 45px rgba(53,102,255,.18);
}

.blob-whatsapp {
    box-shadow: 0 0 45px rgba(18,169,102,.18);
}

.blob-wacooking {
    box-shadow: 0 0 45px rgba(116,91,255,.18);
}

.ecosystem-bubble {
    width: 118px;
    height: 118px;
    box-shadow:
        0 26px 62px rgba(26,50,105,.18),
        inset 0 2px 8px rgba(255,255,255,.95),
        inset 0 -12px 28px rgba(43,68,150,.08);
    animation:
        ecosystem-water-morph 7s ease-in-out infinite,
        ecosystem-bubble-breathe 5.5s ease-in-out infinite;
}

.ecosystem-node-label {
    background: rgba(255,255,255,.78);
    box-shadow:
        0 12px 28px rgba(28,47,88,.10),
        inset 0 1px 0 rgba(255,255,255,.74);
}

.ecosystem-node-label strong {
    font-size: 11px;
}

.ecosystem-node-label small {
    color: #7f8ca3;
}

.ecosystem-core {
    width: 178px;
    height: 178px;
    animation: ecosystem-core-cycle 22s ease-in-out infinite;
}

.core-water {
    box-shadow:
        0 32px 70px rgba(59,75,172,.28),
        inset 0 4px 12px rgba(255,255,255,.88);
}

.core-water span {
    color: #4f607c;
    font-size: 7px;
    letter-spacing: .18em;
}

.core-ripple {
    animation: ecosystem-ripple 22s ease-out infinite;
}

.ecosystem-caption {
    bottom: 6px;
}

.ecosystem-caption span {
    color: #7f8ca4;
    font-size: 9px;
    letter-spacing: .18em;
}

.ecosystem-caption strong {
    color: #233552;
    font-size: 13px;
}

/* Motion polish */
@keyframes ecosystem-bubble-breathe {
    0%, 100% { transform: scale(1) translateZ(0); }
    50% { transform: scale(1.035) translateZ(0); }
}

/* Responsive polish */
@media (max-width: 920px) {
    .hero-content h1 {
        max-width: none;
    }

    .hero-visual.liquid-hero-visual {
        transform: none;
        min-height: 540px;
    }
}

@media (max-width: 720px) {
    .hero-section::before {
        width: 420px;
        height: 420px;
        right: -90px;
        top: 100px;
    }

    .hero-section::after {
        width: 280px;
        height: 280px;
        right: 60px;
        top: 220px;
    }

    .hero-visual.liquid-hero-visual {
        min-height: 450px;
    }

    .liquid-ecosystem {
        min-height: 430px;
    }

    .liquid-ecosystem::before {
        inset: 6% 1% 10%;
        border-radius: 28px;
    }

    .ecosystem-bubble {
        width: 98px;
        height: 98px;
    }

    .liquid-blob {
        width: 110px;
        height: 110px;
    }
}

@media (max-width: 480px) {
    .hero-content h1 {
        letter-spacing: -.058em;
    }

    .hero-description {
        font-size: 15px;
        line-height: 1.75;
    }

    .hero-visual.liquid-hero-visual {
        min-height: 410px;
    }

    .liquid-ecosystem {
        min-height: 390px;
    }

    .liquid-ecosystem::before {
        inset: 5% 0 11%;
        border-radius: 22px;
    }

    .ecosystem-bubble {
        width: 82px;
        height: 82px;
    }

    .liquid-blob {
        width: 94px;
        height: 94px;
    }

    .ecosystem-core {
        width: 136px;
        height: 136px;
    }

    .ecosystem-caption strong {
        font-size: 11px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-section::before,
    .hero-section::after {
        filter: none;
    }

    .ecosystem-bubble {
        animation: none !important;
    }
}

/* === WACOOKING LIQUID V2 END === */


/* === WACOOKING LIQUID V2.1 START === */

/* ==========================================================
   ALIGNMENT FIX
   Biar orb putih + warna belakang lebih menyatu
   ========================================================== */

.liquid-blob {
    width: 122px;
    height: 122px;
    transform: translate(-50%, -43%) scale(1.02);
    border-radius: 50% 50% 46% 54% / 42% 44% 56% 58%;
    opacity: .96;
    filter: saturate(1.08) blur(.4px);
    animation:
        ecosystem-blob-breathe 4.8s ease-in-out infinite,
        ecosystem-blob-wobble 6.2s ease-in-out infinite;
}

.ecosystem-bubble {
    position: relative;
    z-index: 3;
    width: 112px;
    height: 112px;
    animation:
        ecosystem-water-morph-strong 4.8s ease-in-out infinite,
        ecosystem-bubble-breathe-strong 4.6s ease-in-out infinite,
        ecosystem-bubble-sway 5.8s ease-in-out infinite;
}

.ecosystem-bubble::before {
    width: 52%;
    height: 30%;
    left: 14%;
    top: 10%;
    background: rgba(255,255,255,.62);
    filter: blur(7px);
}

.ecosystem-bubble::after {
    inset: 4px;
    border: 1px solid rgba(255,255,255,.38);
}

.ecosystem-node {
    gap: 8px;
}

/* label sedikit naik supaya hubungan bubble + label lebih rapat */
.ecosystem-node-label {
    position: relative;
    z-index: 4;
    margin-top: -4px;
}

/* ==========================================================
   STRONGER MOTION
   ========================================================== */

@keyframes ecosystem-bubble-breathe-strong {
    0%, 100% {
        transform: scale(1) translateY(0);
    }
    25% {
        transform: scale(1.03) translateY(-1px);
    }
    50% {
        transform: scale(1.055) translateY(-3px);
    }
    75% {
        transform: scale(1.025) translateY(-1px);
    }
}

@keyframes ecosystem-bubble-sway {
    0%, 100% {
        rotate: 0deg;
    }
    20% {
        rotate: -2.4deg;
    }
    45% {
        rotate: 1.8deg;
    }
    65% {
        rotate: -1.2deg;
    }
    85% {
        rotate: 2.1deg;
    }
}

@keyframes ecosystem-blob-breathe {
    0%, 100% {
        transform: translate(-50%, -43%) scale(1.00);
        opacity: .94;
    }
    50% {
        transform: translate(-50%, -45%) scale(1.07);
        opacity: 1;
    }
}

@keyframes ecosystem-blob-wobble {
    0%, 100% {
        border-radius: 50% 50% 46% 54% / 42% 44% 56% 58%;
    }
    25% {
        border-radius: 46% 54% 52% 48% / 44% 53% 47% 56%;
    }
    50% {
        border-radius: 54% 46% 48% 52% / 57% 43% 55% 45%;
    }
    75% {
        border-radius: 49% 51% 55% 45% / 45% 57% 43% 55%;
    }
}

@keyframes ecosystem-water-morph-strong {
    0%, 100% {
        border-radius: 50% 47% 52% 48% / 48% 53% 47% 52%;
    }
    20% {
        border-radius: 44% 56% 48% 52% / 54% 44% 56% 46%;
    }
    40% {
        border-radius: 56% 44% 53% 47% / 43% 57% 45% 55%;
    }
    60% {
        border-radius: 47% 53% 57% 43% / 56% 42% 58% 44%;
    }
    80% {
        border-radius: 54% 46% 45% 55% / 46% 56% 44% 54%;
    }
}

/* ==========================================================
   PER-NODE TUNING
   supaya masing-masing bubble lebih pas posisinya
   ========================================================== */

/* Meta */
.slot-meta .liquid-blob {
    transform: translate(-50%, -44%) scale(1.03);
}
.slot-meta .ecosystem-bubble {
    transform: translateZ(0);
}

/* WhatsApp */
.slot-whatsapp .liquid-blob {
    transform: translate(-50%, -42%) scale(1.04);
}

/* WACooking */
.slot-wacooking .liquid-blob {
    transform: translate(-50%, -42%) scale(1.02);
}

/* warna shadow tiap blob lebih terasa */
.blob-meta {
    box-shadow:
        0 0 50px rgba(53,102,255,.20),
        0 10px 28px rgba(53,102,255,.16);
}
.blob-whatsapp {
    box-shadow:
        0 0 50px rgba(18,169,102,.20),
        0 10px 28px rgba(18,169,102,.16);
}
.blob-wacooking {
    box-shadow:
        0 0 50px rgba(116,91,255,.20),
        0 10px 28px rgba(116,91,255,.16);
}

/* ==========================================================
   MOBILE
   ========================================================== */
@media (max-width: 720px) {
    .liquid-blob {
        width: 104px;
        height: 104px;
        transform: translate(-50%, -43%) scale(1.02);
    }

    .ecosystem-bubble {
        width: 98px;
        height: 98px;
    }
}

@media (max-width: 480px) {
    .liquid-blob {
        width: 90px;
        height: 90px;
    }

    .ecosystem-bubble {
        width: 82px;
        height: 82px;
    }

    .ecosystem-node-label {
        margin-top: -2px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .liquid-blob,
    .ecosystem-bubble {
        animation: none !important;
    }
}

/* === WACOOKING LIQUID V2.1 END === */



/* === WACOOKING LIQUID V2.2 START === */

/* ==========================================================
   TRUE CENTER LOCK
   Node sekarang hanya sebesar orb.
   Label dibuat absolute sehingga tidak lagi menggeser
   pusat bubble putih dari pusat liquid warna.
   ========================================================== */

.ecosystem-node {
    position: absolute;
    left: 0;
    top: 0;

    width: 118px;
    height: 118px;

    display: block;
    transform: translate(-50%, -50%);
    transform-origin: center;

    animation: ecosystem-node-visibility 22s ease-in-out infinite;
}

.ecosystem-bubble {
    position: absolute;
    z-index: 3;

    left: 0;
    top: 0;

    width: 118px;
    height: 118px;

    transform-origin: 50% 50%;

    animation:
        ecosystem-liquid-shape-v22 4.2s ease-in-out infinite,
        ecosystem-bubble-motion-v22 3.8s ease-in-out infinite;
}

/* Label tidak ikut menghitung center node lagi */
.ecosystem-node-label {
    position: absolute;
    z-index: 5;

    left: 50%;
    top: calc(100% + 7px);

    width: max-content;
    min-width: 118px;

    margin: 0;
    transform: translateX(-50%);

    pointer-events: none;
}

/* ==========================================================
   COLORED LIQUID BASE
   Pusatnya EXACT sama dengan bubble putih.
   Hanya sedikit lebih besar agar terlihat sebagai liquid rim.
   ========================================================== */

.liquid-blob {
    position: absolute;

    left: 0;
    top: 0;

    width: 124px;
    height: 124px;

    transform-origin: 50% 50%;
    transform: translate(-50%, -50%);

    opacity: .96;

    animation:
        ecosystem-liquid-shape-v22 4.2s ease-in-out infinite,
        ecosystem-blob-motion-v22 3.8s ease-in-out infinite;
}

/* Hapus offset per-node V2.1 */
.slot-meta .liquid-blob,
.slot-whatsapp .liquid-blob,
.slot-wacooking .liquid-blob {
    transform: translate(-50%, -50%);
}

/* ==========================================================
   STRONG LIQUID SHAPE
   Bubble putih & liquid warna memakai fase bentuk yang sama.
   ========================================================== */

@keyframes ecosystem-liquid-shape-v22 {
    0%, 100% {
        border-radius:
            50% 50% 48% 52% /
            49% 52% 48% 51%;
    }

    16% {
        border-radius:
            43% 57% 51% 49% /
            55% 43% 57% 45%;
    }

    32% {
        border-radius:
            57% 43% 55% 45% /
            44% 58% 42% 56%;
    }

    50% {
        border-radius:
            46% 54% 42% 58% /
            58% 46% 54% 42%;
    }

    68% {
        border-radius:
            55% 45% 58% 42% /
            43% 54% 46% 57%;
    }

    84% {
        border-radius:
            45% 55% 48% 52% /
            53% 44% 56% 47%;
    }
}

/* Gerakan orb putih: lebih jelas */
@keyframes ecosystem-bubble-motion-v22 {
    0%, 100% {
        transform: rotate(0deg) scale(1);
    }

    20% {
        transform: rotate(-4deg) scale(1.045);
    }

    40% {
        transform: rotate(2.8deg) scale(.985);
    }

    60% {
        transform: rotate(-2.5deg) scale(1.055);
    }

    80% {
        transform: rotate(3.6deg) scale(1.015);
    }
}

/* Warna bergerak dalam fase sama, pusat tetap terkunci */
@keyframes ecosystem-blob-motion-v22 {
    0%, 100% {
        transform: translate(-50%, -50%) rotate(0deg) scale(1);
    }

    20% {
        transform: translate(-50%, -50%) rotate(-4deg) scale(1.055);
    }

    40% {
        transform: translate(-50%, -50%) rotate(2.8deg) scale(.995);
    }

    60% {
        transform: translate(-50%, -50%) rotate(-2.5deg) scale(1.065);
    }

    80% {
        transform: translate(-50%, -50%) rotate(3.6deg) scale(1.025);
    }
}

/* ==========================================================
   WATER HIGHLIGHT
   Pantulan putih ikut bergerak supaya orb terasa seperti air.
   ========================================================== */

.ecosystem-bubble::before {
    width: 54%;
    height: 31%;

    left: 13%;
    top: 9%;

    background: rgba(255,255,255,.66);
    filter: blur(7px);

    transform-origin: center;

    animation: ecosystem-water-highlight-v22 3.4s ease-in-out infinite;
}

.ecosystem-bubble::after {
    inset: 4px;

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

    box-shadow:
        inset 8px 10px 22px rgba(255,255,255,.18),
        inset -8px -10px 22px rgba(72,87,180,.05);

    animation: ecosystem-inner-water-v22 4.1s ease-in-out infinite;
}

@keyframes ecosystem-water-highlight-v22 {
    0%, 100% {
        transform:
            translate(0, 0)
            rotate(-20deg)
            scale(1);
        opacity: .64;
    }

    25% {
        transform:
            translate(7px, 3px)
            rotate(-12deg)
            scale(1.08);
        opacity: .82;
    }

    50% {
        transform:
            translate(12px, 9px)
            rotate(-5deg)
            scale(.90);
        opacity: .54;
    }

    75% {
        transform:
            translate(3px, 6px)
            rotate(-28deg)
            scale(1.10);
        opacity: .78;
    }
}

@keyframes ecosystem-inner-water-v22 {
    0%, 100% {
        opacity: .74;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(.975);
    }
}

/* ==========================================================
   STRONGER COLOR / DEPTH
   ========================================================== */

.blob-meta {
    background:
        radial-gradient(
            circle at 34% 25%,
            rgba(255,255,255,.88),
            rgba(91,128,255,.96) 38%,
            rgba(55,84,231,.94) 72%,
            rgba(51,70,200,.92) 100%
        );

    box-shadow:
        0 0 52px rgba(53,102,255,.22),
        0 14px 36px rgba(53,102,255,.19);
}

.blob-whatsapp {
    background:
        radial-gradient(
            circle at 34% 25%,
            rgba(255,255,255,.87),
            rgba(48,221,139,.94) 38%,
            rgba(22,182,108,.94) 72%,
            rgba(13,145,84,.92) 100%
        );

    box-shadow:
        0 0 52px rgba(18,169,102,.22),
        0 14px 36px rgba(18,169,102,.19);
}

.blob-wacooking {
    background:
        radial-gradient(
            circle at 34% 25%,
            rgba(255,255,255,.88),
            rgba(132,107,255,.95) 38%,
            rgba(101,82,240,.94) 72%,
            rgba(76,68,213,.92) 100%
        );

    box-shadow:
        0 0 52px rgba(116,91,255,.23),
        0 14px 36px rgba(116,91,255,.19);
}

/* ==========================================================
   MOBILE CENTER LOCK
   ========================================================== */

@media (max-width: 720px) {
    .ecosystem-node,
    .ecosystem-bubble {
        width: 98px;
        height: 98px;
    }

    .liquid-blob {
        width: 104px;
        height: 104px;
    }

    .ecosystem-node-label {
        min-width: 98px;
        top: calc(100% + 6px);
    }
}

@media (max-width: 480px) {
    .ecosystem-node,
    .ecosystem-bubble {
        width: 82px;
        height: 82px;
    }

    .liquid-blob {
        width: 88px;
        height: 88px;
    }

    .ecosystem-node-label {
        min-width: 84px;
        top: calc(100% + 5px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ecosystem-bubble,
    .liquid-blob,
    .ecosystem-bubble::before,
    .ecosystem-bubble::after {
        animation: none !important;
    }

    .liquid-blob,
    .slot-meta .liquid-blob,
    .slot-whatsapp .liquid-blob,
    .slot-wacooking .liquid-blob {
        transform: translate(-50%, -50%) !important;
    }
}

/* === WACOOKING LIQUID V2.2 END === */


/* === WACOOKING DARK TEXT FIX START === */

/* Hero dark version: text gelap jadi putih */
.hero-section .hero-content h1 {
    color: #f7f9ff;
    text-shadow: 0 8px 30px rgba(0,0,0,.16);
}

/* Text highlight tetap terang / gradient */
.hero-section .hero-content h1 span {
    background: linear-gradient(100deg, #3f79ff 6%, #6a6eff 44%, #9f6dff 76%, #54d7a8 115%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Deskripsi */
.hero-section .hero-description {
    color: rgba(233, 239, 255, .76);
}

/* Eyebrow / badge */
.hero-section .hero-eyebrow {
    color: #7ea1ff;
    background: rgba(36, 60, 138, .24);
    border-color: rgba(101, 127, 222, .24);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

/* Bullet keunggulan */
.hero-section .hero-proof span {
    color: rgba(235, 241, 255, .82);
}

.hero-section .hero-proof svg {
    color: #35d38a;
}

/* Kalau ada teks/caption kecil di hero kanan */
.hero-section .ecosystem-caption span {
    color: rgba(201, 211, 238, .74);
}

.hero-section .ecosystem-caption strong {
    color: #eef3ff;
}

/* Header nav di atas tetap jelas */
.landing-header .desktop-nav a {
    color: #33435f;
}

.landing-header .desktop-nav a:hover {
    color: #4f67ff;
}

/* Mobile sedikit lebih terang juga */
@media (max-width: 720px) {
    .hero-section .hero-content h1 {
        color: #f7f9ff;
    }

    .hero-section .hero-description {
        color: rgba(233, 239, 255, .80);
    }
}

/* === WACOOKING DARK TEXT FIX END === */


/* === WACOOKING FINAL DARK COLOR LOCK START === */

/* ==========================================================
   HERO BACKGROUND - EXACT DARK DIRECTION
   ========================================================== */

.hero-section {
    position: relative !important;
    overflow: hidden !important;

    background:
        radial-gradient(
            circle at 16% 20%,
            rgba(53, 102, 255, .20),
            transparent 28%
        ),
        radial-gradient(
            circle at 90% 74%,
            rgba(124, 77, 255, .15),
            transparent 25%
        ),
        var(--landing-night, #071426) !important;
}

/* Jangan biarkan glow V2 lama memutihkan hero */
.hero-section::before {
    background:
        radial-gradient(
            circle,
            rgba(53, 102, 255, .13),
            rgba(53, 102, 255, .055) 38%,
            transparent 72%
        ) !important;

    opacity: .90 !important;
}

.hero-section::after {
    background:
        radial-gradient(
            circle,
            rgba(124, 77, 255, .11),
            rgba(124, 77, 255, .045) 38%,
            transparent 72%
        ) !important;

    opacity: .88 !important;
}

/* Grid tetap terlihat tapi halus */
.hero-section .hero-grid {
    opacity: .54 !important;

    background-image:
        linear-gradient(
            rgba(76, 111, 190, .085) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(76, 111, 190, .085) 1px,
            transparent 1px
        ) !important;
}


/* ==========================================================
   TEXT
   ========================================================== */

/* Text gelap -> putih */
.hero-section .hero-content h1 {
    color: #f7f9ff !important;

    text-shadow:
        0 10px 34px rgba(0, 0, 0, .18) !important;
}

/* Gradient terang tetap */
.hero-section .hero-content h1 span {
    color: transparent !important;
    background: linear-gradient(135deg, #86f6ff, #08008d);
    -webkit-background-clip: text !important;
    background-clip: text !important;
}

/* Deskripsi jadi terang */
.hero-section .hero-description {
    color: rgba(232, 239, 255, .84) !important;
}

/* Proof bawah */
.hero-section .hero-proof span {
    color: rgba(230, 238, 255, .82) !important;
}

.hero-section .hero-proof svg {
    color: #31d99a !important;
}

/* Badge atas */
.hero-section .hero-eyebrow {
    color: #000000 !important;
    background: rgb(255 255 255) !important;
    border-color:
        rgba(83, 117, 224, .29) !important;
}

.hero-section .status-dot {
    background: #4e4fff !important;
    box-shadow:
        0 0 0 5px rgba(39, 215, 151, .14) !important;
}


/* ==========================================================
   LIQUID STAGE GLOW
   PAKAI WARNA YANG ANDA SET
   ========================================================== */

.hero-section .liquid-stage-glow {
    width: 84% !important;
    background: radial-gradient(circle at 45% 45%, rgb(255 255 255 / 0%) 0%, rgb(89 118 255 / 0%) 24%, rgb(63 63 63 / 0%) 43%, rgb(2 0 68 / 16%) 58%, #0c007100 76%) !important;
    filter: blur(10px) !important;
}


/* ==========================================================
   GLASS PANEL
   Dibuat mengikuti dark/purple screenshot
   ========================================================== */

.hero-section .liquid-ecosystem::before {
    background: radial-gradient(circle at 46% 40%, rgb(101 71 134 / 36%), rgb(74 66 205 / 0%) 38%, rgb(31 28 132 / 0%) 74%, rgba(12, 18, 53, .58) 100%), linear-gradient(145deg, rgb(105 119 218 / 0%), rgb(2 185 255 / 0%)) !important;
    border:
        1px solid rgba(190, 205, 255, .60) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .18),
        inset 0 0 75px rgba(97, 88, 255, .15),
        0 30px 90px rgba(15, 24, 86, .34),
        0 0 70px rgba(94, 71, 255, .10) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
}

.hero-section .liquid-ecosystem::after {
    background:
        radial-gradient(
            circle,
            rgba(89, 118, 255, .17) 0%,
            rgba(124, 77, 255, .18) 33%,
            rgba(29, 25, 201, .10) 53%,
            transparent 72%
        ) !important;

    filter: blur(16px) !important;
}


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

.hero-section .orbit-ring-one {
    border-color:
        rgba(128, 150, 255, .12) !important;

    box-shadow:
        inset 0 0 52px rgba(73, 91, 255, .045),
        0 0 52px rgba(77, 72, 255, .035) !important;
}

.hero-section .orbit-ring-two {
    border-color:
        rgba(121, 139, 235, .08) !important;
}


/* ==========================================================
   CAPTION
   ========================================================== */

.hero-section .ecosystem-caption span {
    color:
        rgba(201, 213, 245, .72) !important;
}

.hero-section .ecosystem-caption strong {
    color: #f0f4ff !important;

    text-shadow:
        0 4px 16px rgba(0, 0, 0, .24) !important;
}


/* ==========================================================
   CTA SECONDARY
   ========================================================== */

.hero-section .button-outline {
    color: #17263f !important;

    background:
        rgba(255, 255, 255, .76) !important;

    border-color:
        rgba(255, 255, 255, .58) !important;
}


/* Mobile */
@media (max-width: 720px) {
    .hero-section .hero-content h1 {
        color: #f7f9ff !important;
    }

    .hero-section .hero-description {
        color: rgba(232, 239, 255, .86) !important;
    }
}

/* === WACOOKING FINAL DARK COLOR LOCK END === */