:root{
    --lx-bg:#02150d;
    --lx-bg-2:#063a25;

    --lx-card:rgba(5,67,41,.92);
    --lx-card-2:rgba(8,101,60,.88);
    --lx-card-dark:rgba(2,38,24,.96);

    --lx-text:#f4fff8;
    --lx-muted:#c3e8d3;

    --lx-green:#35ff9e;
    --lx-green-soft:#9effc9;
    --lx-lime:#d1ff88;
    --lx-gold:#f4d978;

    --lx-border:rgba(120,255,184,.34);
    --lx-border-soft:rgba(255,255,255,.08);

    --lx-radius:20px;

    --lx-shadow:
        0 14px 34px rgba(0,0,0,.34),
        0 0 18px rgba(53,255,158,.16),
        0 0 45px rgba(53,255,158,.07);
}

/* =========================
   RESET
========================= */

*{
    box-sizing:border-box;
}

html,
body{
    margin:0;
    padding:0;
    min-height:100%;
}

/* =========================
   BACKGROUND RP5.000
========================= */

body{
    position:relative;
    margin:0;
    min-height:100vh;
    overflow-x:hidden;

    color:var(--lx-text);

    background:
        radial-gradient(
            circle at 15% 12%,
            rgba(42,255,151,.33),
            transparent 30%
        ),
        radial-gradient(
            circle at 85% 82%,
            rgba(209,255,136,.14),
            transparent 32%
        ),
        linear-gradient(
            145deg,
            #01130b 0%,
            #033520 35%,
            #087247 68%,
            #01170e 100%
        );

    background-attachment:fixed;
    isolation:isolate;
}

/* POLA QRIS SELURUH HALAMAN */
body::before{
    content:"";
    position:fixed;
    inset:0;
    z-index:-3;
    pointer-events:none;
    opacity:.38;

    background-image:
        linear-gradient(
            90deg,
            transparent 46%,
            rgba(193,255,220,.08) 47%,
            rgba(193,255,220,.08) 53%,
            transparent 54%
        ),
        linear-gradient(
            transparent 46%,
            rgba(193,255,220,.08) 47%,
            rgba(193,255,220,.08) 53%,
            transparent 54%
        ),
        repeating-linear-gradient(
            45deg,
            transparent 0 24px,
            rgba(255,255,255,.024) 24px 26px
        );

    background-size:
        44px 44px,
        44px 44px,
        88px 88px;
}

/* SILUET PAHLAWAN INDONESIA */
body::after{
    content:"";
    position:fixed;
    right:-30px;
    bottom:-40px;
    width:min(450px,70vw);
    height:min(640px,78vh);
    z-index:-2;
    pointer-events:none;
    opacity:.17;

    background-repeat:no-repeat;
    background-position:right bottom;
    background-size:contain;

    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 620'%3E%3Cdefs%3E%3ClinearGradient id='hero' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23ffffff'/%3E%3Cstop offset='1' stop-color='%235cffab'/%3E%3C/linearGradient%3E%3Cfilter id='glow'%3E%3CfeGaussianBlur stdDeviation='6' result='blur'/%3E%3CfeMerge%3E%3CfeMergeNode in='blur'/%3E%3CfeMergeNode in='SourceGraphic'/%3E%3C/feMerge%3E%3C/filter%3E%3C/defs%3E%3Cg fill='url(%23hero)' filter='url(%23glow)'%3E%3Cpath d='M106 110c29-50 166-70 214-10l-10 36H117z'/%3E%3Cpath d='M133 119c7-66 43-96 85-96 48 0 85 39 85 96v48c0 73-37 129-85 129-47 0-85-56-85-129z'/%3E%3Cpath d='M103 618c5-113 18-217 57-281 17-28 38-43 59-43 23 0 47 19 67 49 39 65 49 164 53 275z'/%3E%3Cpath d='M80 616c8-125 18-206 67-251l49 39-25 212z'/%3E%3Cpath d='M356 616c-8-125-18-206-68-251l-49 39 26 212z'/%3E%3Cpath d='M172 301h94l-13 91-34 35-36-35z'/%3E%3Cpath d='M153 160c24 13 105 15 135-7-5 49-30 100-70 100-39 0-62-49-65-93z' opacity='.55'/%3E%3C/g%3E%3C/svg%3E");

    filter:
        drop-shadow(0 0 18px rgba(83,255,166,.55))
        drop-shadow(0 0 58px rgba(83,255,166,.22));

    animation:pahlawanFloat 5s ease-in-out infinite;
}

/* =========================
   WRAPPER
========================= */

.lx-wrap{
    position:relative;
    min-height:100vh;
    padding:28px 0;

    color:var(--lx-text);

    background:
        linear-gradient(
            180deg,
            rgba(2,22,14,.26),
            rgba(2,35,22,.18)
        );

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    letter-spacing:.15px;
    line-height:1.8;

    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}

.lx-container{
    position:relative;
    z-index:2;

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

    margin:0 auto;
    padding:0 16px;
}

/* =========================
   CARD / SECTION QRIS
========================= */

.lx-section{
    position:relative;
    z-index:1;
    isolation:isolate;
    overflow:hidden;

    margin-bottom:18px;
    padding:24px;

    border:
        1px solid var(--lx-border);

    border-radius:
        var(--lx-radius);

    background:
        linear-gradient(
            135deg,
            var(--lx-card-dark) 0%,
            var(--lx-card) 48%,
            var(--lx-card-2) 100%
        );

    box-shadow:
        var(--lx-shadow),
        0 0 0 1px rgba(255,255,255,.035) inset;

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

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

/* POLA QRIS DI SECTION */
.lx-section::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-2;
    pointer-events:none;
    opacity:.42;

    background-image:
        linear-gradient(
            90deg,
            transparent 46%,
            rgba(198,255,225,.12) 47%,
            rgba(198,255,225,.12) 53%,
            transparent 54%
        ),
        linear-gradient(
            transparent 46%,
            rgba(198,255,225,.12) 47%,
            rgba(198,255,225,.12) 53%,
            transparent 54%
        ),
        repeating-linear-gradient(
            45deg,
            transparent 0 14px,
            rgba(255,255,255,.025) 14px 16px
        );

    background-size:
        30px 30px,
        30px 30px,
        52px 52px;
}

/* CAHAYA LEWAT DI SECTION */
.lx-section::after{
    content:"";
    position:absolute;
    top:-55%;
    left:-100%;
    width:38%;
    height:220%;
    z-index:-1;
    pointer-events:none;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(224,255,238,.2),
            transparent
        );

    transform:rotate(20deg);
    filter:blur(9px);

    animation:qrisLight 7s linear infinite;
}

.lx-section:hover{
    transform:translateY(-3px);

    border-color:
        rgba(129,255,190,.6);

    box-shadow:
        0 18px 40px rgba(0,0,0,.4),
        0 0 24px rgba(53,255,158,.26),
        0 0 55px rgba(53,255,158,.11),
        0 0 0 1px rgba(255,255,255,.04) inset;
}

/* =========================
   HEADING
========================= */

.lx-head{
    display:flex;
    align-items:center;
    gap:12px;

    margin:0 0 12px;

    font-size:22px;
    line-height:1.25;
    font-weight:700;
    letter-spacing:-.3px;

    color:var(--lx-text);

    font-family:
        Georgia,
        serif;

    text-shadow:
        0 0 8px rgba(67,255,158,.36),
        0 0 20px rgba(67,255,158,.13);
}

.lx-head svg{
    width:22px;
    height:22px;
    flex:0 0 auto;

    color:var(--lx-gold);
    opacity:.95;

    filter:
        drop-shadow(0 0 7px rgba(244,217,120,.35));
}

/* =========================
   BODY TYPOGRAPHY
========================= */

.lx-body{
    color:var(--lx-muted);

    font-size:15.5px;
    line-height:1.9;
}

.lx-body p{
    margin:0 0 16px;
}

.lx-body h1,
.lx-body h2,
.lx-body h3{
    color:var(--lx-text);

    font-family:
        Georgia,
        serif;

    font-weight:700;
    line-height:1.25;
    letter-spacing:-.3px;

    margin:28px 0 14px;

    text-shadow:
        0 0 8px rgba(66,255,157,.3),
        0 0 18px rgba(66,255,157,.1);
}

.lx-body h1{
    font-size:42px;
}

.lx-body h2{
    font-size:30px;
}

.lx-body h3{
    font-size:22px;
}

.lx-body a{
    color:var(--lx-lime);

    text-decoration:none;

    border-bottom:
        1px solid rgba(209,255,136,.35);

    text-shadow:
        0 0 7px rgba(209,255,136,.18);

    transition:
        color .2s ease,
        border-color .2s ease,
        text-shadow .2s ease;
}

.lx-body a:hover{
    color:var(--lx-gold);
    border-color:var(--lx-gold);

    text-shadow:
        0 0 9px rgba(244,217,120,.42);
}

/* =========================
   STATS / PILLS
========================= */

.lx-stats{
    display:flex;
    flex-wrap:wrap;
    gap:10px;

    margin-top:14px;
}

.lx-pill{
    position:relative;
    overflow:hidden;

    display:inline-flex;
    align-items:center;
    gap:8px;

    padding:8px 12px;

    border:
        1px solid rgba(124,255,187,.3);

    border-radius:999px;

    font-size:13.5px;

    color:var(--lx-text);

    background:
        linear-gradient(
            135deg,
            rgba(8,101,60,.65),
            rgba(3,55,34,.92)
        );

    box-shadow:
        0 5px 14px rgba(0,0,0,.22),
        0 0 12px rgba(53,255,158,.12),
        0 0 0 1px rgba(255,255,255,.025) inset;
}

.lx-pill::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;
    opacity:.28;

    background-image:
        linear-gradient(
            90deg,
            transparent 45%,
            rgba(220,255,235,.16) 46%,
            rgba(220,255,235,.16) 54%,
            transparent 55%
        ),
        linear-gradient(
            transparent 45%,
            rgba(220,255,235,.16) 46%,
            rgba(220,255,235,.16) 54%,
            transparent 55%
        );

    background-size:
        20px 20px,
        20px 20px;
}

.lx-pill > *{
    position:relative;
    z-index:1;
}

.lx-pill svg{
    width:16px;
    height:16px;
    opacity:.95;

    color:var(--lx-gold);

    filter:
        drop-shadow(0 0 6px rgba(244,217,120,.35));
}

/* =========================
   GRID
========================= */

.lx-grid{
    display:grid;
    gap:12px;

    grid-template-columns:
        repeat(4,minmax(0,1fr));
}

/* =========================
   FEATURE CARD QRIS
========================= */

.lx-feature{
    position:relative;
    isolation:isolate;
    overflow:hidden;

    padding:18px;

    border:
        1px solid rgba(113,255,181,.3);

    border-radius:16px;

    background:
        linear-gradient(
            145deg,
            rgba(7,96,57,.83),
            rgba(2,47,29,.96)
        );

    box-shadow:
        0 8px 20px rgba(0,0,0,.25),
        0 0 15px rgba(53,255,158,.13),
        0 0 0 1px rgba(255,255,255,.025) inset;

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

.lx-feature::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    pointer-events:none;
    opacity:.4;

    background-image:
        linear-gradient(
            90deg,
            transparent 46%,
            rgba(198,255,225,.12) 47%,
            rgba(198,255,225,.12) 53%,
            transparent 54%
        ),
        linear-gradient(
            transparent 46%,
            rgba(198,255,225,.12) 47%,
            rgba(198,255,225,.12) 53%,
            transparent 54%
        ),
        repeating-linear-gradient(
            45deg,
            transparent 0 12px,
            rgba(255,255,255,.022) 12px 14px
        );

    background-size:
        26px 26px,
        26px 26px,
        44px 44px;
}

.lx-feature:hover{
    transform:translateY(-3px);

    border-color:
        rgba(130,255,192,.58);

    box-shadow:
        0 13px 27px rgba(0,0,0,.3),
        0 0 22px rgba(53,255,158,.23),
        0 0 44px rgba(53,255,158,.08);
}

.lx-feature h3{
    display:flex;
    align-items:center;
    gap:8px;

    margin:0 0 6px;

    font-size:16.5px;

    color:var(--lx-text);

    font-family:
        Georgia,
        serif;

    text-shadow:
        0 0 8px rgba(53,255,158,.25);
}

.lx-feature p{
    margin:0;

    color:var(--lx-muted);

    font-size:14.5px;
    line-height:1.75;
}

.lx-icon{
    width:18px;
    height:18px;

    color:var(--lx-gold);
    opacity:.95;

    filter:
        drop-shadow(0 0 6px rgba(244,217,120,.3));
}

/* =========================
   STEPS QRIS
========================= */

.lx-steps{
    counter-reset:step;

    display:flex;
    flex-direction:column;
    gap:12px;

    margin:10px 0 0;
    padding:0;

    list-style:none;
}

.lx-step{
    position:relative;
    isolation:isolate;
    overflow:hidden;

    display:flex;
    gap:12px;
    align-items:flex-start;

    padding:14px 16px;

    border:
        1px solid rgba(113,255,181,.28);

    border-radius:14px;

    background:
        linear-gradient(
            135deg,
            rgba(7,93,56,.82),
            rgba(2,45,28,.96)
        );

    box-shadow:
        0 7px 18px rgba(0,0,0,.23),
        0 0 14px rgba(53,255,158,.11);

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

.lx-step::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    pointer-events:none;
    opacity:.3;

    background-image:
        linear-gradient(
            90deg,
            transparent 46%,
            rgba(198,255,225,.12) 47%,
            rgba(198,255,225,.12) 53%,
            transparent 54%
        ),
        linear-gradient(
            transparent 46%,
            rgba(198,255,225,.12) 47%,
            rgba(198,255,225,.12) 53%,
            transparent 54%
        );

    background-size:
        26px 26px,
        26px 26px;
}

.lx-step:hover{
    transform:translateX(4px);

    border-color:
        rgba(131,255,192,.55);

    box-shadow:
        0 10px 22px rgba(0,0,0,.28),
        0 0 20px rgba(53,255,158,.21);
}

.lx-step::before{
    counter-increment:step;
    content:counter(step);

    position:relative;
    z-index:2;

    flex:0 0 34px;
    width:34px;
    height:34px;

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

    border-radius:999px;

    font-weight:800;

    color:#06271a;

    background:
        linear-gradient(
            135deg,
            var(--lx-gold),
            var(--lx-lime),
            var(--lx-green)
        );

    box-shadow:
        0 5px 12px rgba(0,0,0,.25),
        0 0 14px rgba(53,255,158,.25);

    font-size:14px;
}

/* =========================
   BUTTON
========================= */

.lx-cta{
    display:flex;
    flex-wrap:wrap;
    gap:10px;

    margin-top:14px;
}

.lx-btn{
    position:relative;
    overflow:hidden;

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

    padding:12px 18px;

    border-radius:12px;

    text-decoration:none;

    font-weight:700;
    line-height:1;

    transition:
        transform .22s ease,
        box-shadow .22s ease,
        filter .22s ease;
}

.lx-btn::before{
    content:"";
    position:absolute;
    top:-60%;
    left:-110%;
    width:42%;
    height:220%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.48),
            transparent
        );

    transform:rotate(22deg);

    transition:left .6s ease;
}

.lx-btn:hover::before{
    left:155%;
}

.lx-btn:hover{
    transform:translateY(-2px);
    filter:brightness(1.07);
}

.lx-btn--primary{
    color:#052619;

    border:
        1px solid rgba(255,247,190,.62);

    background:
        linear-gradient(
            135deg,
            var(--lx-gold) 0%,
            var(--lx-lime) 48%,
            var(--lx-green) 100%
        );

    box-shadow:
        0 9px 20px rgba(0,0,0,.25),
        0 0 18px rgba(53,255,158,.24),
        0 0 35px rgba(244,217,120,.1);
}

.lx-btn--primary:hover{
    box-shadow:
        0 13px 25px rgba(0,0,0,.3),
        0 0 24px rgba(53,255,158,.36),
        0 0 45px rgba(244,217,120,.16);
}

.lx-btn--outline{
    color:var(--lx-text);

    border:
        1px solid rgba(115,255,182,.38);

    background:
        linear-gradient(
            135deg,
            rgba(7,101,60,.65),
            rgba(2,46,29,.9)
        );

    box-shadow:
        0 8px 18px rgba(0,0,0,.22),
        0 0 14px rgba(53,255,158,.13);
}

.lx-btn--outline:hover{
    border-color:
        rgba(131,255,192,.64);

    box-shadow:
        0 12px 23px rgba(0,0,0,.27),
        0 0 21px rgba(53,255,158,.24);
}

/* =========================
   SEMUA BOX TAMBAHAN
========================= */

.lx-card,
.lx-box,
.lx-panel,
.lx-padding,
.lx-item{
    position:relative;
    isolation:isolate;
    overflow:hidden;

    border:
        1px solid rgba(115,255,182,.3);

    border-radius:
        16px;

    background:
        linear-gradient(
            135deg,
            rgba(7,97,58,.84),
            rgba(2,43,27,.96)
        );

    box-shadow:
        0 10px 24px rgba(0,0,0,.28),
        0 0 17px rgba(53,255,158,.14),
        0 0 40px rgba(53,255,158,.06);
}

.lx-card::before,
.lx-box::before,
.lx-panel::before,
.lx-padding::before,
.lx-item::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    pointer-events:none;
    opacity:.38;

    background-image:
        linear-gradient(
            90deg,
            transparent 46%,
            rgba(198,255,225,.12) 47%,
            rgba(198,255,225,.12) 53%,
            transparent 54%
        ),
        linear-gradient(
            transparent 46%,
            rgba(198,255,225,.12) 47%,
            rgba(198,255,225,.12) 53%,
            transparent 54%
        );

    background-size:
        28px 28px,
        28px 28px;
}

/* =========================
   ANIMASI
========================= */

@keyframes qrisLight{
    0%{
        left:-100%;
    }

    45%,
    100%{
        left:155%;
    }
}

@keyframes pahlawanFloat{
    0%,
    100%{
        transform:translateY(0) scale(1);
        opacity:.14;
    }

    50%{
        transform:translateY(-9px) scale(1.015);
        opacity:.2;
    }
}

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

@media(max-width:980px){
    .lx-grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

    .lx-body h1{
        font-size:36px;
    }

    .lx-body h2{
        font-size:27px;
    }
}

@media(max-width:768px){
    .lx-wrap{
        padding:18px 0;
    }

    .lx-section{
        padding:20px;
        border-radius:18px;
    }

    body::after{
        right:-110px;
        width:390px;
        height:550px;
        opacity:.1;
    }
}

@media(max-width:520px){
    .lx-grid{
        grid-template-columns:1fr;
    }

    .lx-container{
        padding:0 10px;
    }

    .lx-section{
        padding:17px 14px;
        border-radius:16px;
    }

    .lx-head{
        font-size:20px;
    }

    .lx-body{
        font-size:15px;
    }

    .lx-body h1{
        font-size:30px;
    }

    .lx-body h2{
        font-size:24px;
    }

    .lx-body h3{
        font-size:20px;
    }

    .lx-cta{
        flex-direction:column;
    }

    .lx-btn{
        width:100%;
    }

    body::after{
        right:-150px;
        bottom:-20px;
        width:340px;
        height:490px;
        opacity:.08;
    }
}

/* NONAKTIFKAN ANIMASI JIKA DIPERLUKAN */
@media(prefers-reduced-motion:reduce){
    *,
    *::before,
    *::after{
        animation:none !important;
        transition:none !important;
    }
}