:root{--blue:#0867ff;--blue2:#0754d8;--ink:#071326;--muted:#66758c;--bg:#f7faff;--surface:#fff;--surface2:#f1f6ff;--line:#d9e4f3;--shadow:0 18px 60px rgba(19,61,120,.10)}
        html.dark{--ink:#f5f8ff;--muted:#9aabc3;--bg:#020814;--surface:#071321;--surface2:#091a2f;--line:#17304f;--shadow:0 18px 60px rgba(0,0,0,.35)}
        *{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;overflow-x:hidden}.surface{background:var(--surface)}.muted{color:var(--muted)}.line{border-color:var(--line)}.blue{color:var(--blue)}
        .nav{background:color-mix(in srgb,var(--surface) 84%,transparent);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
        .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:43px;padding:11px 18px;border-radius:9px;font-size:12px;font-weight:800;transition:.22s ease}.btn-blue{color:#fff;background:linear-gradient(135deg,#0b72ff,#0758df);box-shadow:0 10px 28px rgba(8,103,255,.25)}.btn-blue:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(8,103,255,.34)}.btn-white{background:#fff;color:#0754d8}.btn-outline{border:1px solid var(--line);background:color-mix(in srgb,var(--surface) 82%,transparent);color:var(--ink)}.btn-outline:hover{border-color:#72a7ff;color:var(--blue)}
        .grid-bg{background-image:linear-gradient(rgba(8,103,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(8,103,255,.045) 1px,transparent 1px);background-size:34px 34px}.dark .grid-bg{background-image:linear-gradient(rgba(55,139,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(55,139,255,.06) 1px,transparent 1px)}
        .hero{
                position:relative;
                overflow:hidden;
                background:
                    radial-gradient(circle at 78% 38%,rgba(0,105,255,.18),transparent 34%),
                    radial-gradient(circle at 18% 85%,rgba(0,105,255,.07),transparent 30%),
                    linear-gradient(180deg,#f7faff 0%,#f4f8ff 100%);
            }

            .dark .hero{
                background:
                    radial-gradient(circle at 76% 38%,rgba(0,105,255,.32),transparent 36%),
                    radial-gradient(circle at 15% 90%,rgba(0,105,255,.10),transparent 32%),
                    linear-gradient(180deg,#020916 0%,#031126 100%);
            }
        .eyebrow{font-size:10px;line-height:1;text-transform:uppercase;letter-spacing:.16em;font-weight:900;color:var(--blue)}
        .glow{position:absolute;border-radius:999px;background:radial-gradient(circle,rgba(14,116,255,.38),transparent 68%);filter:blur(18px);pointer-events:none}.glow-ring{position:absolute;border:1px solid rgba(24,128,255,.6);border-radius:50%;box-shadow:0 0 25px rgba(0,111,255,.4),inset 0 0 30px rgba(0,111,255,.08)}
        .hero-stage{
            position:relative;
            height:590px;
            width:100%;
            display:flex;
            align-items:center;
            justify-content:center;
        }
        .hero-product-img{
            position:relative;
            z-index:4;
            width:min(100%,900px);
            max-height:700px;
            object-fit:contain;
            transform:translateX(-45px) scale(1.30);
            filter:drop-shadow(0 35px 45px rgba(0,70,180,.38));
            animation:heroFloat 7s ease-in-out infinite;
        }
        .pack{position:relative;width:190px;height:285px;z-index:3;border-radius:7px 12px 12px 7px;background:linear-gradient(120deg,#ffffff,#e6edf7 52%,#cbd7e5);border:1px solid #bccbdd;box-shadow:22px 35px 55px rgba(0,0,0,.25);transform:perspective(850px) rotateY(-12deg)}.dark .pack{background:linear-gradient(120deg,#f6f9ff,#aebbd0 55%,#7b8ba1)}.pack:before{content:"iniasli.id";position:absolute;left:23px;right:23px;top:55px;height:130px;border:1px solid #b7c6d9;border-radius:6px;display:flex;align-items:center;justify-content:center;color:#173d72;font-weight:900;font-size:17px}.pack:after{content:"PREMIUM\A PRODUCT";white-space:pre;position:absolute;left:0;right:0;bottom:34px;text-align:center;color:#18355c;font-size:9px;font-weight:800;line-height:1.7}
        .bottle{position:relative;width:104px;height:255px;margin-left:-34px;z-index:5;filter:drop-shadow(14px 25px 20px rgba(0,0,0,.26))}.cap{width:43px;height:66px;margin:auto;border-radius:8px 8px 5px 5px;background:linear-gradient(90deg,#111a2b,#51617a,#0b1220)}.body{height:193px;margin-top:-2px;border-radius:24px 24px 31px 31px;background:linear-gradient(100deg,#041a37,#0d57b5 55%,#061932);border:2px solid rgba(255,255,255,.34);padding:72px 9px 10px;box-shadow:inset 10px 0 22px rgba(255,255,255,.06)}.label{height:79px;border-radius:5px;background:#f8fbff;color:#0c326c;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:8px;font-weight:900;line-height:1.4}.label:after{content:"▦";font-size:30px;line-height:27px;margin-top:2px}
        .phone{position:relative;z-index:6;width:145px;height:285px;margin-left:-30px;border:6px solid #0d1725;border-radius:25px;background:#06172e;box-shadow:14px 25px 40px rgba(0,0,0,.3);transform:rotate(7deg);overflow:hidden}.phone:before{content:"";position:absolute;top:8px;left:50%;transform:translateX(-50%);width:54px;height:12px;border-radius:20px;background:#02060c;z-index:3}.screen{position:absolute;inset:8px;border-radius:19px;background:linear-gradient(160deg,#071b35,#0b3b75);padding:48px 11px 12px;color:white;text-align:center}.check{width:48px;height:48px;border-radius:50%;margin:auto;background:#20c36a;display:grid;place-items:center;font-size:28px;box-shadow:0 0 25px rgba(32,195,106,.35)}
        .verify-float{position:absolute;right:0;bottom:76px;z-index:8;width:205px;padding:16px;border-radius:14px;border:1px solid rgba(40,123,255,.25);background:color-mix(in srgb,var(--surface) 93%,transparent);box-shadow:0 22px 55px rgba(0,0,0,.18)}.dark .verify-float{background:rgba(6,18,34,.94)}
        .feature-card,.soft-card{border:1px solid var(--line);background:var(--surface);border-radius:12px;box-shadow:var(--shadow)}.feature-card{padding:20px}.icon{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;color:var(--blue);background:linear-gradient(145deg,color-mix(in srgb,var(--blue) 18%,transparent),color-mix(in srgb,var(--blue) 4%,transparent));border:1px solid color-mix(in srgb,var(--blue) 24%,var(--line));font-size:22px}.dark .feature-card{box-shadow:0 15px 40px rgba(0,0,0,.2)}
        .step-line{position:absolute;left:13%;right:13%;top:29px;border-top:1px dashed #87a4ca}.step-dot{position:relative;z-index:2;width:58px;height:58px;border-radius:16px;display:grid;place-items:center;border:1px solid #9dc0f4;background:var(--surface);color:var(--blue);box-shadow:0 10px 25px rgba(31,96,180,.12);font-size:22px}.dark .step-dot{background:#0a1a2e}
        .identity{position:relative;overflow:hidden;background:linear-gradient(110deg,#fff 0%,#f1f7ff 58%,#dcecff 100%)}.dark .identity{background:linear-gradient(110deg,#071322,#0a1c33 60%,#0a274d)}.identity:after{content:"";position:absolute;width:520px;height:280px;right:-130px;top:-80px;border-radius:50%;background:radial-gradient(circle,rgba(28,126,255,.16),transparent 68%)}
        .mini-bottle{width:84px;height:205px}.mini-bottle .cap{width:34px;height:50px}.mini-bottle .body{height:155px;padding-top:53px;border-radius:20px 20px 26px 26px}.mini-bottle .label{height:62px;font-size:7px}.mini-bottle .label:after{font-size:22px}
        .qr-card{background:linear-gradient(135deg,#f7fbff,#eaf3ff);border:1px solid #bcd5f6}.dark .qr-card{background:linear-gradient(135deg,#071a30,#09264b)}.qr-image{width:88px;height:88px;object-fit:contain;background:#fff;border-radius:10px;padding:7px}.shield{width:120px;height:120px;border-radius:30px;display:grid;place-items:center;font-size:55px;color:#fff;background:linear-gradient(145deg,#0872ff,#043d9e);box-shadow:0 20px 45px rgba(0,91,220,.3),inset 0 0 25px rgba(255,255,255,.13);border:1px solid #67a7ff}
        .person-card{min-height:220px;position:relative;overflow:hidden}.person{position:absolute;right:12px;bottom:0;width:43%;height:90%;border-radius:45% 45% 0 0;background:linear-gradient(160deg,#e8eef6,#b9c6d7);opacity:.9}.person:before{content:"";position:absolute;width:62px;height:62px;border-radius:50%;left:50%;top:8px;transform:translateX(-50%);background:#e5b38f;box-shadow:0 -12px 0 4px #2a2730}.person:after{content:"";position:absolute;left:18%;right:18%;top:75px;bottom:0;border-radius:35px 35px 0 0;background:linear-gradient(160deg,#edf2f8,#7d8ea4)}.woman{background:linear-gradient(160deg,#f1f5f9,#a9bad0)}.man{background:linear-gradient(160deg,#172d4b,#0a172a)}
        .stat{padding:16px;border-right:1px solid var(--line)}.stat:last-child{border-right:0}.stat-num{font-size:30px;line-height:1;font-weight:900;color:var(--blue)}
        .cta{background:linear-gradient(105deg,#06265f,#0867ff 60%,#0b4fc4);position:relative;overflow:hidden}.cta:after{content:"";position:absolute;right:-50px;bottom:-140px;width:440px;height:300px;border-radius:50%;border:65px solid rgba(255,255,255,.08);box-shadow:0 0 60px rgba(255,255,255,.04)}

        .hero-art{
            position:relative;
            height:590px;
            width:100%;
            display:flex;
            align-items:center;
            justify-content:center;
            overflow:visible;
            isolation:isolate;
        }

            .hero-art:before{
                content:"";
                position:absolute;
                width:620px;
                height:620px;
                border-radius:50%;
                border:1px solid rgba(40,132,255,.35);
                box-shadow:
                    0 0 35px rgba(0,111,255,.18),
                    inset 0 0 45px rgba(0,111,255,.06);
                z-index:0;
            }

            .hero-art:after{
                content:"";
                position:absolute;
                width:470px;
                height:470px;
                border-radius:50%;
                border:1px solid rgba(40,132,255,.25);
                box-shadow:0 0 45px rgba(0,111,255,.12);
                z-index:0;
            }
        .hero-verified-card{
            position:absolute;
            z-index:8;
            right:3%;
            bottom:72px;
            width:225px;
            padding:15px;
            border-radius:16px;
            background:rgba(255,255,255,.94);
            border:1px solid rgba(61,135,255,.25);
            box-shadow:0 22px 55px rgba(0,32,90,.28);
            color:#071326;
            backdrop-filter:blur(12px);
            animation:verifyFloat 5s ease-in-out infinite;
        }

.mobile-menu{display:none}.mobile-menu.open{display:block}
        @media(max-width:900px){
            .hero-stage{
                height:500px;
            }

            .hero-art{
                height:480px;
            }

            .hero-art:before{
                width:430px;
                height:430px;
            }

            .hero-art:after{
                width:320px;
                height:320px;
            }

            .hero-product-img{
                position:relative;
                z-index:4;
                width:min(100%,650px);
                max-height:545px;
                object-fit:contain;
                transform:translateX(-25px) scale(1.08);
                filter:drop-shadow(0 28px 35px rgba(0,70,180,.32));
                animation:heroFloat 7s ease-in-out infinite;
            }

            .phone{
                width:120px;
                height:235px;
            }

            .pack{
                width:150px;
                height:235px;
            }

            .bottle{
                transform:scale(.85);
                margin-left:-25px;
            }

            .hero-verified-card{
                position:absolute;
                z-index:8;
                right:3%;
                bottom:72px;
                width:225px;
                padding:15px;
                border-radius:16px;
                background:rgba(255,255,255,.94);
                border:1px solid rgba(61,135,255,.25);
                box-shadow:0 22px 55px rgba(0,32,90,.28);
                color:#071326;
                backdrop-filter:blur(12px);
                animation:verifyFloat 5s ease-in-out infinite;
            }

            .verify-float{
                right:2%;
                bottom:35px;
            }

            .step-line{
                display:none;
            }
        }
        @media(max-width:640px){
            .hero-stage{
                height:420px;
            }

            .hero-art{
                height:420px;
            }

            .hero-art:before{
                width:330px;
                height:330px;
            }

            .hero-art:after{
                width:250px;
                height:250px;
            }

            .hero-product-img{
                width:115%;
                max-height:380px;
            }

            .phone{
                width:105px;
                height:215px;
                margin-left:-22px;
            }

            .pack{
                width:125px;
                height:205px;
            }

            .bottle{
                transform:scale(.72);
                margin-left:-30px;
            }

            .hero-verified-card{
                width:175px;
                right:-2%;
                bottom:15px;
                padding:12px;
                font-size:9px;
            }

            .verify-float{
                width:175px;
                bottom:18px;
                font-size:9px;
            }

            .stat{
                border-right:0;
                border-bottom:1px solid var(--line);
            }

            .stat:nth-last-child(-n+2){
                border-bottom:0;
            }
        }

    /* =========================================================
   TYPOGRAPHY SCALE - INIASLI.ID
   ========================================================= */

    /* Navbar */
    .nav{
        font-size:15px;
    }

    .nav a{
        font-size:15px;
    }

    .nav .text-xs{
        font-size:13px !important;
    }

    /* Hero */
    .hero h1{
        font-size:64px !important;
        line-height:1.04 !important;
        letter-spacing:-.045em;
    }

    .hero p{
        font-size:17px !important;
        line-height:1.7 !important;
    }

    .hero .btn{
        font-size:14px !important;
        min-height:50px;
        padding:13px 20px;
    }

    .hero .text-\[10px\]{
        font-size:12px !important;
    }

    .hero .text-\[11px\]{
        font-size:13px !important;
    }

    /* Badge */
    .hero .rounded-full{
        font-size:12px !important;
    }

    /* Feature Cards */
    .feature-card h3,
    .feature-card h4{
        font-size:16px !important;
    }

    .feature-card p{
        font-size:13px !important;
        line-height:1.65 !important;
    }

    /* Section headings */
    section h2{
        font-size:42px !important;
        line-height:1.12 !important;
    }

    section h3{
        font-size:20px !important;
    }

    /* Small eyebrow / label */
    .eyebrow{
        font-size:12px !important;
        letter-spacing:.16em;
    }

    /* General muted text */
    .muted{
        font-size:14px;
    }

    /* Process / Steps */
    .step-dot + *{
        font-size:13px;
    }

    .step-line ~ div{
        font-size:13px;
    }

    /* Stats */
    .stat-num{
        font-size:38px !important;
    }

    .stat{
        font-size:14px;
    }

    /* Buttons globally */
    .btn{
        font-size:14px;
    }

    /* Cards */
    .soft-card{
        font-size:14px;
    }

    .soft-card p{
        font-size:14px;
        line-height:1.65;
    }

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

    .nav img{
        width:50px !important;
        height:50px !important;
        object-fit:contain;
    }

    .nav .font-black{
        font-size:24px !important;
        line-height:1.1 !important;
    }

    .nav .text-\[9px\],
    .nav .text-\[10px\]{
        font-size:10px !important;
        line-height:1.2 !important;
    }

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

    footer img{
        width:58px !important;
        height:58px !important;
        object-fit:contain;
    }

    footer .font-black{
        font-size:21px !important;
        line-height:1.1 !important;
    }

    footer .text-\[9px\],
    footer .text-\[10px\]{
        font-size:12px !important;
        line-height:1.5 !important;
    }

    footer p{
        font-size:14px !important;
        line-height:1.7 !important;
    }

    footer a{
        font-size:14px !important;
    }
    /* =========================================
   LOGO LIGHT / DARK MODE
   ========================================= */

    .site-logo{
        display:block;
        position:relative;
        width:48px;
        height:48px;
        flex-shrink:0;
    }

    .site-logo img{
        width:100% !important;
        height:100% !important;
        object-fit:contain;
    }

    .logo-dark{
        display:none !important;
    }

    /* DARK MODE */
    .dark .logo-light{
        display:none !important;
    }

    .dark .logo-dark{
        display:block !important;
    }

    .icon{
    width:60px;
    height:60px;
    display:grid;
    place-items:center;
    border-radius:12px;
    }

    .icon svg{
        width:48px;
        height:48px;
        display:block;
    }
    .btn svg{
    width:30px;
    height:30px;
    flex-shrink:0;
    }

    .step-dot{
        width:72px;
        height:72px;
        display:grid;
        place-items:center;
        position:relative;
        border-radius:16px;

        background:
            linear-gradient(
                145deg,
                rgba(18,39,67,.95),
                rgba(5,17,35,.98)
            );

        border:1px solid rgba(0,145,255,.85);

        box-shadow:
            0 0 0 1px rgba(0,110,255,.08),
            0 0 22px rgba(0,110,255,.18),
            inset 0 0 25px rgba(0,110,255,.08);

        color:#f4f8ff;
    }

    .step-dot::before{
        content:"";
        position:absolute;
        inset:1px;
        border-radius:15px;

        background:
            radial-gradient(
                circle at 50% 20%,
                rgba(0,140,255,.16),
                transparent 65%
            );

        pointer-events:none;
    }

    .step-dot svg{
        width:42px;
        height:42px;
        display:block;
        position:relative;
        z-index:2;

        filter:
            drop-shadow(0 0 5px rgba(255,255,255,.15));
    }

            #cara-kerja .text-\[10px\]{
            font-size:16px !important;
            line-height:1 !important;
            margin-top:16px !important;
            letter-spacing:-.02em;
        }

        #cara-kerja h3{
            font-size:14px !important;
            margin-top:8px !important;
        }

        #cara-kerja p{
            font-size:10px !important;
            line-height:1.55 !important;
            max-width:190px !important;
        }
/* =========================================================
   PRODUCT IDENTITY - MOCKUP STYLE
   ========================================================= */

/* =========================================================
   PRODUCT IDENTITY
   LIGHT MODE
   ========================================================= */

.identity-product{
    position:relative;

    overflow:hidden;

    min-height:430px;

    background:
        radial-gradient(
            circle at 55% 55%,
            rgba(0,120,255,.12),
            transparent 30%
        ),
        radial-gradient(
            circle at 82% 45%,
            rgba(0,100,255,.10),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f7fbff 48%,
            #eaf4ff 100%
        );

    border-color:
        rgba(60,140,230,.30) !important;

    box-shadow:
        inset 0 0 80px rgba(0,90,180,.06),
        0 20px 70px rgba(30,80,140,.14);
}


/* =========================================================
   DARK MODE
   ========================================================= */

.dark .identity-product{
    background:
        radial-gradient(
            circle at 55% 60%,
            rgba(0,110,255,.20),
            transparent 25%
        ),
        radial-gradient(
            circle at 78% 50%,
            rgba(0,75,180,.16),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #05162a 0%,
            #061f3d 100%
        );

    border-color:
        rgba(46,139,255,.25) !important;

    box-shadow:
        inset 0 0 80px rgba(0,80,180,.08),
        0 20px 70px rgba(0,30,80,.28);
}

.identity-product-inner{
    position:relative;
    z-index:5;

    min-height:430px;

    display:grid;

    grid-template-columns:
        minmax(300px,.85fr)
        minmax(600px,1.55fr)
        minmax(380px,.95fr);

    align-items:center;

    gap:0;

    padding:42px 55px;
}


/* =========================================================
   LEFT CONTENT
   ========================================================= */

.identity-copy{
    position:relative;
    z-index:10;
}

.identity-copy h2{
    font-size:38px !important;
    line-height:1.08 !important;
    letter-spacing:-.04em;
}

.identity-copy p{
    font-size:13px !important;
    line-height:1.65 !important;
}

.identity-list{
    display:flex;
    flex-direction:column;
    gap:9px;

    font-size:11px;
}

.identity-list li{
    display:flex;
    align-items:center;
    gap:8px;
}

.identity-check{
    width:15px;
    height:15px;

    display:grid;
    place-items:center;

    flex:none;

    border-radius:50%;

    background:#18d64d;
    color:#001408;

    font-size:9px;
    font-weight:900;

    box-shadow:
        0 0 10px rgba(24,214,77,.35);
}


/* =========================================================
   CENTER PRODUCT
   ========================================================= */

.identity-product-visual{
    position:relative;

    height:430px;

    display:flex;

    align-items:center;

    justify-content:center;

    isolation:isolate;

    overflow:visible;
}


/* BLUE GLOW */

.identity-glow{
    position:absolute;

    width:600px;
    height:430px;

    left:50%;
    top:50%;

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

    border-radius:50%;

    background:
        radial-gradient(
            ellipse,
            rgba(0,130,255,.20) 0%,
            rgba(0,110,255,.12) 28%,
            rgba(0,90,255,.06) 48%,
            transparent 72%
        );

    filter:blur(20px);

    z-index:0;

    pointer-events:none;
}


.dark .identity-glow{
    background:
        radial-gradient(
            ellipse,
            rgba(0,140,255,.48) 0%,
            rgba(0,110,255,.28) 28%,
            rgba(0,90,255,.14) 48%,
            transparent 72%
        );
}


/* LIGHT RAYS / PARTICLES */

.identity-rays{
    position:absolute;

    width:600px;
    height:230px;

    left:50%;
    top:60%;

    transform:
        translate(-50%,-50%)
        perspective(300px)
        rotateX(65deg);

    border-radius:50%;

    background:
        repeating-radial-gradient(
            ellipse at center,
            transparent 0 14px,
            rgba(0,120,255,.12) 15px 16px,
            transparent 17px 28px
        );

    opacity:.55;

    filter:blur(.5px);

    z-index:1;

    pointer-events:none;
}


.dark .identity-rays{
    background:
        repeating-radial-gradient(
            ellipse at center,
            transparent 0 14px,
            rgba(0,135,255,.18) 15px 16px,
            transparent 17px 28px
        );

    opacity:.75;
}


/* SECOND GLOW */

.identity-product-visual::after{
    content:"";

    position:absolute;

    width:330px;
    height:90px;

    left:50%;
    bottom:38px;

    transform:translateX(-50%);

    border-radius:50%;

    background:
        radial-gradient(
            ellipse,
            rgba(0,140,255,.42),
            rgba(0,90,255,.12) 40%,
            transparent 72%
        );

    filter:blur(10px);

    z-index:1;
}


    /* =========================================================
    MULTI PRODUCT PACKAGING
    ========================================================= */

.identity-packaging{
    position:relative;

    z-index:4;

    width:760px;
    max-width:none;

    height:auto;

    object-fit:contain;

    transform:translateY(-5px) scale(1.08);

    filter:
        drop-shadow(0 25px 35px rgba(0,0,0,.25))
        drop-shadow(0 0 35px rgba(0,110,255,.25));

    animation:
        identityPackagingFloat 7s ease-in-out infinite;
}


.identity-packaging-light{
    display:block;
}

.identity-packaging-dark{
    display:none;
}


.dark .identity-packaging-light{
    display:none;
}

.dark .identity-packaging-dark{
    display:block;
}



/* =========================================================
   PRODUCT IDENTITY TEXT - LIGHT MODE
   ========================================================= */

.identity-copy h2{
    color:#07152a;
}

.identity-copy p{
    color:#60738d;
}

.identity-list{
    color:#26384f;
}

.identity-list .identity-check{
    color:#ffffff;
}


/* =========================================================
   DARK MODE TEXT
   ========================================================= */

.dark .identity-copy h2{
    color:#f4f8ff;
}

.dark .identity-copy p{
    color:#91a8c5;
}

.dark .identity-list{
    color:#e4edf8;
}    


/* =========================================================
   RIGHT VERIFICATION CARD
   ========================================================= */

.identity-verification{
    position:relative;

    z-index:10;

    display:flex;
    justify-content:center;
}

.identity-verification-card{
    background:
        rgba(255,255,255,.94) !important;

    border:
        1px solid rgba(70,135,210,.25);

    box-shadow:
        0 25px 55px rgba(40,80,130,.16);

    color:#10213a;
}


.identity-verification-card .muted{
    color:#71839a;
}


.identity-verification-card b{
    color:#162943;
}


/* DARK */

.dark .identity-verification-card{
    background:
        rgba(5,18,34,.96) !important;

    border-color:
        rgba(40,123,255,.28);

    box-shadow:
        0 25px 55px rgba(0,0,0,.35);

    color:#edf5ff;
}


.dark .identity-verification-card b{
    color:#edf5ff;
}

.dark .identity-verification-card .muted{
    color:#8196b1;
}


.identity-status{
    display:flex;

    align-items:center;

    justify-content:space-between;

    padding-bottom:12px;

    border-bottom:1px solid rgba(80,130,180,.20);
}

.identity-verified{
    display:flex;
    align-items:center;
    gap:6px;

    color:#21e878;

    font-size:9px;
    font-weight:900;

    letter-spacing:.08em;
}

.verified-dot-small{
    width:7px;
    height:7px;

    border-radius:50%;

    background:#20e875;

    box-shadow:
        0 0 8px rgba(32,232,117,.8);
}

.identity-date{
    font-size:8px;
    color:#6d829f;
}


/* DATA */

.identity-data{
    display:flex;
    flex-direction:column;

    gap:10px;

    padding-top:15px;
}

.identity-data > div{
    display:grid;

    grid-template-columns:1fr 1.35fr;

    align-items:center;

    column-gap:10px;
}

.identity-data span{
    font-size:9px;

    letter-spacing:.02em;
}

.identity-data b{
    font-size:9px;

    color:#e9f1fb;

    font-weight:700;
}


/* =========================================================
   VERIFIED SHIELD
   ========================================================= */

.identity-shield{
    position:absolute;

    right:-18px;
    bottom:-18px;

    width:64px;
    height:64px;

    display:grid;
    place-items:center;

    border-radius:18px;

    color:#24f15f;

    background:
        radial-gradient(
            circle,
            rgba(0,255,100,.20),
            rgba(0,120,60,.08)
        );

    box-shadow:
        0 0 25px rgba(0,255,90,.25),
        inset 0 0 15px rgba(0,255,90,.08);
}

.identity-shield svg{
    width:42px;
    height:42px;

    filter:
        drop-shadow(0 0 5px rgba(0,255,90,.55));
}


/* =========================================================
   ANIMATION
   ========================================================= */

@keyframes identityBottleFloat{

    0%,
    100%{
        transform:
            translateY(-5px)
            scale(1.15);
    }

    50%{
        transform:
            translateY(-12px)
            scale(1.15);
    }

}


/* =========================================================
   TABLET
   ========================================================= */

@media(max-width:1000px){

    .identity-product-inner{
        grid-template-columns:
            1fr 1fr;

        gap:25px;
    }

    .identity-product-visual{
        width:100%;
        height:330px;
        order:2;

        overflow:visible;
    }

    .identity-packaging{
        width:520px;
        max-width:none;

        transform:
            translateY(-3px)
            scale(.95);
    }

    .identity-glow{
        width:420px;
        height:300px;
    }

    .identity-rays{
        width:420px;
        height:170px;
    } height:350px;

}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:700px){

    .identity-product{
        min-height:auto;
    }

    .identity-product-inner{
        display:flex;
        flex-direction:column;

        padding:28px 20px 35px;

        gap:5px;
    }

    .identity-copy{
        width:100%;
    }

    .identity-copy h2{
        font-size:30px !important;
    }

    .identity-product-visual{
        width:100%;

        height:310px;

        order:2;
    }

    .identity-packaging{
        width:520px;

        max-width:none;

        transform:
            translateY(-3px)
            scale(1.02);
    }

    .identity-platform{
        bottom:25px;
    }

    .identity-verification{
        width:100%;

        order:3;
    }

    .identity-verification-card{
        max-width:100%;

        padding:17px !important;
    }

    .identity-shield{
        right:-8px;
        bottom:-10px;

        width:54px;
        height:54px;
    }

}

        /* =========================================================
    HERO PRODUCT - LIGHT / DARK MODE
    ========================================================= */

    .hero-product-img{
        position:relative;
        z-index:4;

        width:min(100%, 900px);
        max-height:700px;

        object-fit:contain;

        transform:
            translateX(-45px)
            scale(1.30);

        filter:
            drop-shadow(0 35px 45px rgba(0,70,180,.30));

        transition:
            opacity .35s ease,
            transform .35s ease,
            filter .35s ease;
    }


    /* =========================================================
    LIGHT MODE
    hero-produk-white.webp
    ========================================================= */

    .hero-product-light{
        display:block;
    }

    .hero-product-dark{
        display:none;
    }


    /* =========================================================
    DARK MODE
    hero-produk-black.webp
    ========================================================= */

    .dark .hero-product-light{
        display:none;
    }

    .dark .hero-product-dark{
        display:block;
    }


    /* =========================================================
    LIGHT MODE GLOW
    ========================================================= */

    .hero-art .glow{
        opacity:.75;
    }

    .hero-art .glow-ring{
        opacity:.65;
    }


    /* =========================================================
    DARK MODE GLOW
    ========================================================= */

    .dark .hero-art .glow{
        opacity:1;

        filter:
            blur(2px)
            drop-shadow(0 0 25px rgba(0,100,255,.35));
    }

    .dark .hero-art .glow-ring{
        opacity:.9;
    }


    /* =========================================================
    RESPONSIVE
    ========================================================= */

    @media(max-width:900px){

        .hero-product-img{
            width:min(100%, 720px);
            max-height:600px;

            transform:
                translateX(-15px)
                scale(1.15);
        }

    }


    @media(max-width:640px){

        .hero-product-img{
            width:115%;
            max-height:480px;

            transform:
                translateX(0)
                scale(1.05);
        }

    }

        #brand .icon{
        width:52px;
        height:52px;

        display:grid;
        place-items:center;

        border-radius:14px;

        background:
            linear-gradient(
                145deg,
                rgba(18,43,73,.95),
                rgba(5,18,35,.98)
            );

        border:1px solid rgba(0,130,255,.45);

        color:#f4f8ff;

        box-shadow:
            0 0 18px rgba(0,100,255,.14),
            inset 0 0 18px rgba(0,110,255,.06);

        transition:
            transform .25s ease,
            border-color .25s ease,
            box-shadow .25s ease;
    }


    #brand .icon svg{
        width:30px;
        height:30px;

        display:block;

        filter:
            drop-shadow(
                0 0 5px rgba(255,255,255,.12)
            );
    }


    #brand .feature-card:hover .icon{
        transform:translateY(-2px);

        border-color:rgba(0,150,255,.85);

        box-shadow:
            0 0 22px rgba(0,120,255,.28),
            inset 0 0 18px rgba(0,120,255,.10);
    }


    /* =========================================================
   FIX VERIFICATION CARD
   ========================================================= */

.identity-verification{
    position:relative;
    z-index:20;

    width:100%;

    display:flex;
    align-items:center;
    justify-content:center;

    min-width:0;
}

.identity-verification-card{
    position:relative;

    width:100%;
    max-width:390px;

    min-height:300px;

    box-sizing:border-box;

    padding:22px !important;

    border-radius:16px !important;

    overflow:visible;

    /* LIGHT MODE */
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.98),
            rgba(244,249,255,.98)
        ) !important;

    border:1px solid rgba(55,130,220,.28) !important;

    box-shadow:
        0 20px 50px rgba(30,75,130,.16),
        inset 0 0 25px rgba(50,130,220,.04);

    color:#12233a;
}


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

.identity-status{
    display:flex;

    align-items:center;

    justify-content:space-between;

    padding-bottom:13px;

    border-bottom:
        1px solid rgba(80,130,180,.18);
}

.identity-verified{
    display:flex;

    align-items:center;

    gap:7px;

    color:#12c95d;

    font-size:10px;

    font-weight:900;

    letter-spacing:.09em;
}

.verified-dot-small{
    width:8px;
    height:8px;

    flex:none;

    border-radius:50%;

    background:#19dc68;

    box-shadow:
        0 0 9px rgba(25,220,104,.75);
}

.identity-date{
    font-size:8px;

    color:#7b8da3;
}


/* =========================================================
   DATA
   ========================================================= */

.identity-data{
    display:flex;

    flex-direction:column;

    gap:12px;

    padding-top:17px;
}

.identity-data > div{
    display:grid;

    grid-template-columns:
        1fr 1.35fr;

    align-items:center;

    column-gap:14px;
}

.identity-data span{
    font-size:9px;

    color:#71849b !important;

    letter-spacing:.02em;
}

.identity-data b{
    font-size:9px;

    color:#1a2b40 !important;

    font-weight:700;

    white-space:nowrap;
}

.identity-data b.text-emerald-500{
    color:#11bf5a !important;
}


/* =========================================================
   VERIFIED SHIELD
   ========================================================= */

.identity-shield{
    position:absolute;

    right:-22px;
    bottom:-22px;

    width:70px;
    height:70px;

    display:grid;
    place-items:center;

    border-radius:20px;

    color:#16e866;

    background:
        radial-gradient(
            circle,
            rgba(0,255,100,.18),
            rgba(0,120,60,.04)
        );

    box-shadow:
        0 0 28px rgba(0,255,90,.28),
        inset 0 0 15px rgba(0,255,90,.08);

    z-index:30;
}

.identity-shield svg{
    width:46px;
    height:46px;

    filter:
        drop-shadow(
            0 0 7px rgba(0,255,90,.65)
        );
}


/* =========================================================
   DARK MODE
   ========================================================= */

.dark .identity-verification-card{
    background:
        linear-gradient(
            145deg,
            rgba(7,25,46,.98),
            rgba(3,14,28,.99)
        ) !important;

    border-color:
        rgba(0,125,255,.30) !important;

    box-shadow:
        0 22px 50px rgba(0,0,0,.38),
        inset 0 0 30px rgba(0,90,180,.05);

    color:#edf5ff;
}

.dark .identity-status{
    border-bottom-color:
        rgba(80,130,180,.20);
}

.dark .identity-date{
    color:#6d829f;
}

.dark .identity-data span{
    color:#8196b1 !important;
}

.dark .identity-data b{
    color:#e9f1fb !important;
}

.dark .identity-data b.text-emerald-500{
    color:#20e875 !important;
}

/* =========================================================
   CONSUMER & BRAND OWNER CARDS
   ========================================================= */

.person-card{
    position:relative;

    min-height:360px;

    overflow:hidden;

    border-radius:16px !important;

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f5f9ff 55%,
            #eaf3ff 100%
        );

    border:1px solid rgba(65,135,215,.22);

    box-shadow:
        0 18px 45px rgba(30,80,140,.12);

    isolation:isolate;
}


/* DARK MODE */

.dark .person-card{
    background:
        linear-gradient(
            135deg,
            #071322 0%,
            #081a30 55%,
            #0a2548 100%
        );

    border-color:
        rgba(50,125,220,.28);

    box-shadow:
        0 20px 50px rgba(0,0,0,.25);
}


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

.person-card > div{
    position:relative;

    z-index:10;

    width:58%;

    max-width:none !important;

    padding:36px !important;
}

.person-card h3{
    font-size:22px !important;

    line-height:1.15 !important;

    letter-spacing:-.025em;
}

.person-card p{
    max-width:360px;

    font-size:13px !important;

    line-height:1.65 !important;
}

.person-card .btn{
    font-size:13px !important;

    min-height:44px;

    padding:
        11px 17px;
}


/* =========================================================
   PERSON IMAGE
   ========================================================= */

.person-card .person-photo{
    position:absolute;

    z-index:3;

    right:0;
    bottom:0;

    width:52%;
    height:100%;

    max-width:none;

    object-fit:cover;

    object-position:center;

    display:block;

    pointer-events:none;

    user-select:none;
}


/* =========================================================
   IMAGE FADE
   ========================================================= */

.person-card::after{
    content:"";

    position:absolute;

    z-index:5;

    left:0;
    top:0;
    bottom:0;

    width:58%;

    pointer-events:none;

    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,1) 0%,
            rgba(255,255,255,.96) 42%,
            rgba(255,255,255,.55) 72%,
            rgba(255,255,255,0) 100%
        );
}


/* DARK IMAGE FADE */

.dark .person-card::after{
    background:
        linear-gradient(
            90deg,
            rgba(7,19,34,1) 0%,
            rgba(7,19,34,.96) 42%,
            rgba(7,19,34,.55) 72%,
            rgba(7,19,34,0) 100%
        );
}


/* =========================================================
   IMAGE POSITION
   ========================================================= */

.person-card .woman-photo{
    width:56%;

    object-position:center center;
}

.person-card .man-photo{
    width:56%;

    object-position:center center;
}


/* =========================================================
   HOVER
   ========================================================= */

.person-card .person-photo{
    transition:
        transform .6s ease;
}

.person-card:hover .person-photo{
    transform:scale(1.035);
}


/* =========================================================
   TABLET
   ========================================================= */

@media(max-width:900px){

    .person-card{
        min-height:330px;
    }

    .person-card > div{
        width:60%;

        padding:28px !important;
    }

    .person-card .person-photo{
        width:52%;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:640px){

    .person-card{
        min-height:430px;
    }

    .person-card > div{
        width:100%;

        padding:25px !important;
    }

    .person-card .person-photo{
        width:100%;

        height:58%;

        top:auto;
        bottom:0;

        object-fit:cover;
    }

    .person-card::after{
        left:0;
        right:0;

        width:100%;

        height:58%;

        bottom:auto;

        background:
            linear-gradient(
                180deg,
                rgba(255,255,255,1) 0%,
                rgba(255,255,255,.90) 25%,
                rgba(255,255,255,.15) 75%,
                rgba(255,255,255,0) 100%
            );
    }

    .dark .person-card::after{
        background:
            linear-gradient(
                180deg,
                rgba(7,19,34,1) 0%,
                rgba(7,19,34,.90) 25%,
                rgba(7,19,34,.15) 75%,
                rgba(7,19,34,0) 100%
            );
    }

    .person-card h3{
        font-size:20px !important;
    }

}

/* =========================================================
   CONTENT PAGES — kontak, kebijakan privasi, hapus akun
   Same tokens as the landing page. These rules are deliberately
   NOT scoped to `section`, because the typography block above
   pins `section h1/h2/h3` with !important and would override them.
   ========================================================= */

.page-head{
    position:relative;
    overflow:hidden;
    text-align:center;
    background:
        radial-gradient(circle at 78% 38%,rgba(0,105,255,.16),transparent 34%),
        radial-gradient(circle at 18% 85%,rgba(0,105,255,.07),transparent 30%),
        linear-gradient(180deg,#f7faff 0%,#f4f8ff 100%);
}

.dark .page-head{
    background:
        radial-gradient(circle at 76% 38%,rgba(0,105,255,.30),transparent 36%),
        radial-gradient(circle at 15% 90%,rgba(0,105,255,.10),transparent 32%),
        linear-gradient(180deg,#020916 0%,#031126 100%);
}

.page-head h1{
    font-size:44px;
    line-height:1.12;
    letter-spacing:-.035em;
    font-weight:900;
    margin:0;
}

.page-head p{
    font-size:16px;
    line-height:1.7;
    margin:.75rem auto 0;
    max-width:44rem;
}

@media(max-width:640px){
    .page-head h1{font-size:30px}
    .page-head p{font-size:14px}
}

/* Long-form policy text ------------------------------------------------ */

.prose h2{
    font-size:23px;
    line-height:1.3;
    font-weight:900;
    letter-spacing:-.01em;
    color:var(--blue);
    margin:2.25rem 0 .75rem;
}

.prose h2:first-child{margin-top:0}

.prose h3{
    font-size:16px;
    line-height:1.4;
    font-weight:800;
    margin:1.5rem 0 .5rem;
}

.prose p{
    font-size:14px;
    line-height:1.85;
    color:var(--muted);
    margin-bottom:.9rem;
}

.prose ul,
.prose ol{
    padding-left:1.35rem;
    margin-bottom:.9rem;
}

.prose ul{list-style:disc}
.prose ol{list-style:decimal}

.prose li{
    font-size:14px;
    line-height:1.85;
    color:var(--muted);
    margin-bottom:.4rem;
}

.prose strong{color:var(--ink);font-weight:800}

.prose a{
    color:var(--blue);
    text-decoration:underline;
    text-underline-offset:2px;
}

.prose a:hover{color:var(--blue2)}

.prose address{font-style:normal}

/* Contact tiles -------------------------------------------------------- */

.contact-tile{
    border:1px solid var(--line);
    border-radius:12px;
    background:var(--surface2);
    transition:transform .2s ease,box-shadow .2s ease;
}

.contact-tile:hover{
    transform:translateY(-2px);
    box-shadow:var(--shadow);
}

/* Static map embed ----------------------------------------------------- */

.map-frame{
    border:1px solid var(--line);
    border-radius:12px;
    overflow:hidden;
    background:var(--surface);
}

.map-frame iframe{
    display:block;
    width:100%;
    border:0;
}

.info-grid dt{color:var(--muted);font-size:13px}
.info-grid dd{color:var(--ink);font-size:14px;font-weight:600}

@media(min-width:640px){
    .info-grid dt{width:11rem;flex-shrink:0}
}