/* =========================================
    RESET / GLOBAL / VARIABLES
========================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --bg: #020817;
    --blue: #168cff;
    --blue-light: #38bdf8;
    --blue-dark: #2563eb;
}


html{
    scroll-behavior: smooth;
}



body {
    min-height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    background: var(--bg);
    color: white;
      font-family: "Outfit", sans-serif;
}



/* =========================================
   MAIN BACKGROUND
========================================= */

.animated-bg {
    position: fixed;
    inset: 0;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 50%,
            rgba(15, 60, 120, .15),
            transparent 60%
        ),
        #020817;

    z-index: -1;
}


/* =========================================
   CORNER LIGHT
========================================= */

.corner-light {

    position: absolute;

    width: 450px;
    height: 450px;

    border-radius: 50%;

    filter: blur(80px);

    opacity: .25;

    animation:
        cornerPulse 7s ease-in-out infinite alternate;
}


.light-left {

    left: -280px;
    top: -250px;

    background: #006eff;
}


.light-right {

    right: -250px;
    top: -250px;

    background: #00bfff;

    animation-delay: 2s;
}


/* =========================================
    ANIMATIONS
    Component-local keyframes remain near their dependent rules.
========================================= */

@keyframes cornerPulse {

    0% {

        transform: scale(.8);

        opacity: .18;

    }

    100% {

        transform: scale(1.2);

        opacity: .4;

    }
}


/* =========================================
   MAIN ORBS
========================================= */

.orb {

    position: absolute;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 30% 25%,
            #8ee7ff,
            #168cff 15%,
            #0753b8 35%,
            #031a3b 65%,
            #010713 100%
        );

    box-shadow:
        inset -30px -30px 60px rgba(0, 0, 0, .8),
        0 0 40px rgba(0, 120, 255, .3);

    opacity: .7;
}


.orb-1 {

    width: 270px;
    height: 270px;

    left: -130px;
    bottom: -100px;

    animation:
        orbOne 12s ease-in-out infinite alternate;
}


.orb-2 {

    width: 230px;
    height: 230px;

    right: -100px;
    top: -80px;

    animation:
        orbTwo 14s ease-in-out infinite alternate;
}


.orb-3 {

    width: 130px;
    height: 130px;

    right: 18%;
    bottom: -40px;

    opacity: .35;

    animation:
        orbThree 10s ease-in-out infinite alternate;
}


@keyframes orbOne {

    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(180px, -100px);
    }
}


@keyframes orbTwo {

    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(-100px, 100px);
    }
}


@keyframes orbThree {

    0% {
        transform: scale(.8);
    }

    100% {
        transform: scale(1.3);
    }
}


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

.grid {

    position: absolute;

    inset: 0;

    background-image:
        linear-gradient(
            rgba(0, 140, 255, .04) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(0, 140, 255, .04) 1px,
            transparent 1px
        );

    background-size: 70px 70px;

    mask-image:
        radial-gradient(
            circle at center,
            black,
            transparent 75%
        );

    animation:
        gridMove 12s linear infinite;
}


@keyframes gridMove {

    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(70px);
    }
}


/* =========================================
   MAIN FLOW
========================================= */

.flow-lines {

    position: absolute;

    inset: 0;

    pointer-events: none;
}


.flow-lines svg {

    width: 100%;
    height: 100%;
}


.main-line {

    fill: none;

    stroke: #168cff;

    stroke-width: 1.5;

    opacity: .35;

    stroke-dasharray: 300 1000;

    filter:
        drop-shadow(0 0 5px #168cff)
        drop-shadow(0 0 15px #2563eb);

    animation:
        mainFlow 12s linear infinite;
}


.main-line.second {

    stroke: #38bdf8;

    opacity: .18;

    animation-duration: 16s;

    animation-direction: reverse;
}


@keyframes mainFlow {

    from {
        stroke-dashoffset: 0;
    }

    to {
        stroke-dashoffset: -1300;
    }
}


/* =========================================
   PARTICLES
========================================= */

.particle {

    position: absolute;

    width: 3px;
    height: 3px;

    border-radius: 50%;

    background: #38bdf8;

    box-shadow:
        0 0 6px #38bdf8,
        0 0 15px #2563eb;

    animation:
        floatParticle linear infinite;
}


@keyframes floatParticle {

    0% {

        transform: translateY(100vh);

        opacity: 0;

    }

    20% {

        opacity: .7;

    }

    80% {

        opacity: .7;

    }

    100% {

        transform: translateY(-20vh);

        opacity: 0;

    }
}


/* =========================================
   NAVBAR
========================================= */

.navbar { position: fixed; top: 0; left: 0; width: 100%; height: 78px; padding: 0 7%; display: flex; align-items: center; justify-content: space-between; z-index: 9999; opacity: 0; transform: translateY(-25px); transition: opacity .7s ease, transform .7s cubic-bezier(.16,1,.3,1), background .3s ease, border-color .3s ease; background: linear-gradient( 180deg, rgba(2, 8, 23, .88), rgba(2, 8, 23, .55) ); border-bottom: 1px solid rgba(56, 189, 248, .08); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } 
/* NAVBAR MUNCUL */ .navbar.show { opacity: 1; transform: translateY(0); }


.logo {

    font-size: 25px;

    font-weight: 800;

    letter-spacing: 3px;

    color: #38bdf8;

    text-shadow:
        0 0 10px rgba(56, 189, 248, .5),
        0 0 25px rgba(37, 99, 235, .25);
}


.hamburger {
    display: none;
}


.nav-menu {

    display: flex;
    margin-right: 30rem;
    gap: 35px;
}


.nav-menu a {

    color: #94a3b8;

    text-decoration: none;

    font-size: 14px;
    
    
}

.nav-menu a.active {
    color: var(--blue-primary);
    opacity: 1;
}

.nav-menu.open a.active {
    color: var(--blue-primary) !important;
}

.navbar .nav-menu a::after{
    content:' ';
    display : block;
    border-bottom : 0.1rem solid #0D6EFD ;
    padding-bottom: 0.5rem;
    transform:  scalex(0);
    transition:0.2s linear;
}

.navbar .nav-menu a.active::after {
    transform: scaleX(1);
}

.nav-button {

    padding: 11px 23px;

    border: 1px solid rgba(56, 189, 248, .6);

    border-radius: 30px;

    background: rgba(14, 42, 75, .25);

    color: #e0f2fe;

    cursor: pointer;
    transition: .3s;
}

/* =========================================
   HERO
========================================= */

.hero {

    min-height: 100vh;

    display: flex;

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

    text-align: center;

    padding: 120px 20px 50px;

    opacity: 100;

    transform: translateY(30px);

    transition:
        opacity 1.2s ease,
        transform 1.2s ease;
}

.hero.show { 
    transform: translateY(0); 
}

.hero-content {

    max-width: 850px;
}


.eyebrow {

    color: #38bdf8;

    font-size: 12px;

    letter-spacing: 5px;
}


.hero h1 {

    margin-top: 20px;

    font-size: clamp(45px, 6vw, 78px);

    line-height: 1.05;

    letter-spacing: -3px;
}


.hero h1 span {

    display: block;

    background:
        linear-gradient(
            90deg,
            #38bdf8,
            #168cff,
            #60a5fa
        );

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;
}


.hero p {

    max-width: 600px;

    margin: 25px auto 35px;

    color: #94a3b8;

    font-size: 17px;

    line-height: 1.7;
}


.hero-buttons {

    display: flex;

    justify-content: center;

    gap: 15px;
}


.primary-btn,
.secondary-btn {

    padding: 14px 28px;

    border-radius: 8px;

    cursor: pointer;

    transition: .3s;
}


.primary-btn {

    border: none;

    color: white;

    background:
        linear-gradient(
            135deg,
            #38bdf8,
            #2563eb
        );

    box-shadow:
        0 0 20px rgba(37, 99, 235, .3);
}


.secondary-btn {

    color: #cbd5e1;

    border: 1px solid rgba(56, 189, 248, .35);

    background: rgba(15, 23, 42, .3);
}


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

@media (max-width: 960px) {

    .nav-menu  {
        display: none;
    }

    .navbar  {
        padding: 0 25px;
    }

    .intro-planet.planet-2  {
        width: 180px;
        height: 180px;

        right: -80px;
        top: -50px;
    }

    .planet-1  {
        width: 130px;
        height: 130px;
    }

    .intro-logo  {
        font-size: 35px;
        letter-spacing: 7px;
    }

    .hero h1  {
        letter-spacing: -1px;
    }

    .hero-buttons  {
        flex-direction: column;
        align-items: center;
    }
}

.photo-section {
    min-height: 85vh;

    display: flex;
    flex-direction: column;

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

    padding: 100px 20px;
}


.photo-heading {
    text-align: center;

    margin-bottom: 55px;
}


.photo-heading span {
    color: #38bdf8;

    font-size: 12px;

    letter-spacing: 4px;
}


.photo-heading h2 {
    margin-top: 12px;

    font-size: 50px;

    color: white;
}


.photo-heading strong {
    display: block;

    background:
        linear-gradient(
            90deg,
            #38bdf8,
            #168cff,
            #60a5fa
        );

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;
}


.photo-heading p {
    margin-top: 15px;

    color: #94a3b8;
}


/* ==============================
   TEMPAT FOTO
============================== */

.bagiangambar {

    position: relative;

    width: min(670px, 90vw);

    height: 260px;

    margin: auto;
}


/* ==============================
   SEMUA FOTO
============================== */

.bagiangambar .card {

    position: absolute;

    width: 500px;

    height: 900px;

    overflow: hidden;

    border-radius: 18px;

    border: 1px solid
        rgba(56, 189, 248, .2);

    transition:
        all .8s cubic-bezier(
            .22,
            .61,
            .36,
            1
        );
}


.bagiangambar .card img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;
}


/* ==============================
   FOTO DEPAN
============================== */

.posisi-1 {

    z-index: 3;

    left: 100px;

    top: 30px;

    transform:
        scale(1);

    opacity: 1;

    filter: brightness(1);

    box-shadow:
        0 20px 60px
        rgba(0, 100, 255, .3);
}


/* ==============================
   FOTO BELAKANG KANAN
============================== */

.posisi-2 {

    z-index: 2;

    left: 350px;

    top: 10px;

    transform:
        scale(.94);

    opacity: .65;

    filter: brightness(.5);
}


/* ==============================
   FOTO BELAKANG KIRI
============================== */

.posisi-3 {

    z-index: 1;

    left: -150px;

    top: 6px;

    transform:
        scale(.88);

    opacity: .4;

    filter: brightness(.4);
}

/* =========================================
   WHY ZIGMAX SECTION
========================================= */

.why-section {
    position: relative;
    min-height: 100vh;

    padding: 120px 7% 150px;

    overflow: hidden;
    isolation: isolate;
}


/* =========================================
   BACKGROUND
========================================= */

.why-bg {
    position: absolute;
    inset: 0;

    z-index: -1;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 50%,
            rgba(15, 60, 120, 0.12),
            transparent 65%
        );
}

.atasan{
    display: flex;
}


.unggulan{
    margin-left: 145px;
    
}

.unggulan h3 {
    display: inline-block;

    padding: 8px 16px;

    border: 1px solid rgba(103, 232, 249, 0.5);
    border-radius: 50px;

    background: linear-gradient(
        135deg,
        rgba(103, 232, 249, 0.12),
        rgba(22, 140, 255, 0.08)
    );

    color: #ffffff;

    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.5px;

    box-shadow: 0 0 18px rgba(103, 232, 249, 0.08);
}

.card-labell {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    width: fit-content;

    margin-top: 10px;
    padding: 5px 18px;

    border-radius: 50px;

    background: linear-gradient(
        135deg,
        rgba(8, 38, 72, 0.92),
        rgba(14, 55, 96, 0.88)
    );

    border: 1px solid rgba(125, 211, 252, 0.35);

    box-shadow:
        0 6px 18px rgba(2, 8, 23, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.10);

    transition: all 0.3s ease;
}

.card-labell i {
    width: 17px;
    height: 17px;

    color: #67e8f9;

    stroke-width: 2.5;
}

.card-labell h4 {
    margin: 0;

    color: #dff9ff;

    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.2px;
}

.feature-card90{
   background:
        radial-gradient(
            circle at 90% 10%,
            rgba(103, 232, 249, 0.18),
            transparent 35%
        ),
        linear-gradient(
            145deg,
            #0b1d35 0%,
            #082c4f 55%,
            #063b67 100%
        );

    border: 1px solid rgba(103, 232, 249, 0.55);

    box-shadow:
        0 0 0 1px rgba(103, 232, 249, 0.08),
        0 15px 45px rgba(14, 165, 233, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}



/* =========================================
   ORB
========================================= */

.why-orb {
    position: absolute;

    border-radius: 50%;

    filter: blur(80px);

    pointer-events: none;
}


/* KIRI ATAS */

.why-orb-1 {
    width: 350px;
    height: 350px;

    top: -150px;
    left: -120px;

    background: #006eff;

    opacity: .18;

    animation:
        whyOrbLeft
        9s ease-in-out
        infinite alternate;
}


/* KANAN BAWAH */

.why-orb-2 {
    width: 320px;
    height: 320px;

    right: -120px;
    bottom: -100px;

    background: #00bfff;

    opacity: .16;

    animation:
        whyOrbRight
        11s ease-in-out
        infinite alternate;
}


/* TENGAH */

.why-orb-3 {
    width: 180px;
    height: 180px;

    left: 45%;
    top: 45%;

    background: #2563eb;

    opacity: .12;

    animation:
        whyOrbCenter
        7s ease-in-out
        infinite alternate;
}


@keyframes whyOrbLeft {

    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(180px, 120px);
    }

}


@keyframes whyOrbRight {

    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(-180px, -120px);
    }

}


@keyframes whyOrbCenter {

    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(1.7);
    }

}


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

.why-grid {
    position: absolute;

    inset: 0;

    background-image:

        linear-gradient(
            rgba(56, 189, 248, .035) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(56, 189, 248, .035) 1px,
            transparent 1px
        );

    background-size: 65px 65px;

    mask-image:
        radial-gradient(
            circle,
            black 10%,
            transparent 80%
        );

    animation:
        whyGridMove
        12s linear
        infinite;
}


@keyframes whyGridMove {

    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(65px);
    }

}


/* =========================================
   GARIS MELENGKUNG
========================================= */

.why-flow {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    pointer-events: none;

    opacity: .35;
}


.why-flow path {

    fill: none;

    stroke: #168cff;

    stroke-width: 1.5;

    stroke-dasharray: 12 18;

    filter:
        drop-shadow(0 0 5px #168cff)
        drop-shadow(
            0 0 15px
            rgba(0, 110, 255, .6)
        );

    animation:
        whyLineMove
        8s linear
        infinite;
}


.why-flow path:nth-child(2) {

    stroke: #38bdf8;

    opacity: .5;

    animation-duration: 11s;
}


@keyframes whyLineMove {

    from {
        stroke-dashoffset: 0;
    }

    to {
        stroke-dashoffset: -500;
    }

}


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

.why-heading {

    position: relative;

    z-index: 5;

    max-width: 800px;

    margin: 0 auto 55px;

    text-align: center;
}


.why-heading span {

    color: #38bdf8;

    font-size: 12px;

    letter-spacing: 4px;
}


.why-heading h2 {

    margin-top: 15px;

    color: white;

    font-size: clamp(
        35px,
        5vw,
        58px
    );

    line-height: 1.1;
}


.why-heading strong {

    display: block;

    background:
        linear-gradient(
            90deg,
            #38bdf8,
            #168cff,
            #60a5fa
        );

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;
}


.why-heading p {

    margin-top: 20px;

    color: #94a3b8;

    line-height: 1.7;
}


/* =========================================
   CARD CONTAINER
========================================= */

.why-section .features-footer1 {

    position: relative;

    z-index: 5;

    width: 100%;

    max-width: 1300px;

    margin: 41px auto 0;

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 35px 30px;
}


/* =========================================
   CARD ANIMATION AWAL
========================================= */

/*
   CARD 1 - 3
   masuk dari kanan
*/

.why-section .feature-card:nth-child(1),
.why-section .feature-card:nth-child(2),
.why-section .feature-card:nth-child(3),
.why-section .feature-card:nth-child(7), 
.why-section .feature-card:nth-child(8),
.why-section .feature-card:nth-child(9){

    opacity: 0;

    transform:
        translateX(120px);

    transition:
        opacity .8s ease,
        transform 1s
        cubic-bezier(
            .22,
            .61,
            .36,
            1
        );
}


/*
   CARD 4 - 6
   masuk dari kiri
*/

.why-section .feature-card:nth-child(4),
.why-section .feature-card:nth-child(5),
.why-section .feature-card:nth-child(6) {

    opacity: 0;

    transform:
        translateX(-120px);

    transition:
        opacity .8s ease,
        transform 1s
        cubic-bezier(
            .22,
            .61,
            .36,
            1
        );
}


/* =========================================
   SAAT SECTION MUNCUL
========================================= */

.why-section.show
.feature-card {

    opacity: 1;

    transform:
        translateX(0);
}


/* =========================================
   DELAY
========================================= */

.why-section.show
.feature-card:nth-child(1) {

    transition-delay: .1s;
}


.why-section.show
.feature-card:nth-child(2) {

    transition-delay: .25s;
}


.why-section.show
.feature-card:nth-child(3) {

    transition-delay: .4s;
}


.why-section.show
.feature-card:nth-child(4) {

    transition-delay: .6s;
}


.why-section.show
.feature-card:nth-child(5) {

    transition-delay: .75s;
}


.why-section.show
.feature-card:nth-child(6) {

    transition-delay: .9s;
}

.why-section.show
.feature-card:nth-child(7) {

    transition-delay: .10s;
}

.why-section.show
.feature-card:nth-child(8) {

    transition-delay: .15s;
}

.why-section.show
.feature-card:nth-child(9) {

    transition-delay: .20s;
}

/* =========================================
   PENTING:
   CARD STYLE ASLI KAMU
========================================= */

.why-section .feature-card {

    position: relative;

    border:
        1px solid
        rgba(56, 189, 248, 0.18);

    border-radius: 20px;

    padding: 28px;

    height: 280px;

    overflow: hidden;

    transition:
        opacity .8s ease,
        transform 1s
        cubic-bezier(
            .22,
            .61,
            .36,
            1
        ),
        border-color .35s ease,
        box-shadow .35s ease;
}


/* =========================================
   CARD GLOW
========================================= */

.why-section .feature-card::after {

    content: "";

    position: absolute;

    width: 150px;
    height: 150px;

    right: -75px;
    bottom: -75px;

    border-radius: 50%;

    background:
        var(--glow-color);

    filter:
        blur(45px);

    opacity: 0;

    transition:
        opacity .4s ease;
}


/* =========================================
   WARNA GLOW CARD
========================================= */

.why-section
.feature-card:nth-child(1) {

    --glow-color: #ff3030;
}


.why-section
.feature-card:nth-child(2) {

    --glow-color: #3085ff;
}


.why-section
.feature-card:nth-child(3) {

    --glow-color: #30ff7a;
}


.why-section
.feature-card:nth-child(4) {

    --glow-color: #a930ff;
}


.why-section
.feature-card:nth-child(5) {

    --glow-color: #ff9d30;
}


.why-section
.feature-card:nth-child(6) {

    --glow-color: #30eaff;
}

.why-section
.feature-card:nth-child(7) {

    --glow-color: #0501f3;
}


.why-section
.feature-card:nth-child(8) {

    --glow-color: #c5bb06;
}

.why-section
.feature-card:nth-child(9) {

    --glow-color: #8e04bc;
}

/* =========================================
   ICON
   STYLE KAMU TETAP
========================================= */


.why-section .feature-icon2,
.why-section .feature-icon4,
.why-section .feature-icon6,
.why-section .feature-icon8

 {

    width: 60px;
    height: 60px;

    display: flex;

    margin: 6px;

    gap: 20px;

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

    flex-shrink: 0;

    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            rgba(2, 168, 245, .2),
            rgba(37, 99, 235, .12)
        );

    border:
        1px solid
        rgba(56, 189, 248, .25);

    color: #60a5fa;

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

.why-section .feature-icon1,
.why-section .feature-icon3,
.why-section .feature-icon5,
.why-section .feature-icon7,
.why-section .feature-icon9 {
 width: 60px;
    height: 60px;

    display: flex;

    margin: 6px;

    gap: 20px;

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

    flex-shrink: 0;

    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            rgba(2, 168, 245, .2),
            rgba(37, 99, 235, .12)
        );

    border:
        1px solid
        rgba(56, 189, 248, .25);

    color: #60a5fa;

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

/* =========================================
   ICON PULSE
========================================= */

@keyframes iconPulse {

    0%, 100% {

        box-shadow:
            0 0 5px
            rgba(56, 189, 248, .15);

    }

    50% {

        box-shadow:

            0 0 12px
            rgba(56, 189, 248, .45),

            0 0 25px
            rgba(56, 189, 248, .18);

    }

}


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

.why-section .feature-card h3 {

    margin-top: 19px;

    margin-left: 5px;
}


.why-section .feature-card p {

    margin-left: 5px;
}


/* =========================================
   LABEL
========================================= */

.why-section .card-label {

    display: flex;

    align-items: end;

    width: fit-content;

    font-size: 14px;

    padding:
        5px 20px 5px 10px;

    position: relative;

    left: 2px;

    gap: 8px;

    color: #7FA7F8;

    border:
        1px solid
        rgba(59, 130, 246, .25);

    border-radius: 999px;

    background:
        #172747;

    box-shadow:

        inset 0 0 12px
        rgba(59, 130, 246, .05),

        0 0 8px
        rgba(59, 130, 246, .04);
}


.why-section .card-label {

    top: 1.3rem;
}


.why-section .card-labell {

    top: 2.4rem;
}


.why-section .card-label svg{

    width: 20px;
}


.why-section .card-label h4 {

    padding-bottom: 2px;
}


@media (min-width: 901px) and (max-width: 1000px) {
    .why-section {
        min-height: auto;
        padding: 90px 5% 120px;
    }

    .why-heading {
        text-align: center;
    }

    .why-heading h2 {
        font-size: clamp(42px, 5vw, 56px);
    }

    .why-section .features-footer1 {
        max-width: 900px;
        margin-top: 34px;
        gap: 22px 18px;
    }

    .why-section .feature-card {
        height: 250px;
        padding: 22px;
        border-radius: 16px;
    }

    .why-section .feature-icon1,
    .why-section .feature-icon2,
    .why-section .feature-icon3,
    .why-section .feature-icon4,
    .why-section .feature-icon5,
    .why-section .feature-icon6,
    .why-section .feature-icon7,
    .why-section .feature-icon8,
    .why-section .feature-icon9 {
        width: 52px;
        height: 52px;
        margin: 4px;
    }

    .why-section .feature-card h3 {
        margin-top: 14px;
        font-size: 15px;
    }

    .why-section .feature-card p {
        font-size: 12px;
        line-height: 1.45;
    }

    .why-section .unggulan {
        margin-right: 90px ;
    }
}

@media (min-width: 1001px) and (max-width: 1100px) {
    .why-section {
        min-height: auto;
        padding: 90px 5% 120px;
    }

    .why-heading {
        text-align: center;
    }

    .why-section .features-footer1 {
        max-width: 900px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-top: 34px;
        gap: 22px 18px;
    }

    .why-section .feature-card {
        height: auto;
        min-height: 320px;
        padding: 20px;
        border-radius: 16px;
        overflow: visible;
    }

    .why-section .feature-icon1,
    .why-section .feature-icon2,
    .why-section .feature-icon3,
    .why-section .feature-icon4,
    .why-section .feature-icon5,
    .why-section .feature-icon6,
    .why-section .feature-icon7,
    .why-section .feature-icon8,
    .why-section .feature-icon9 {
        width: 52px;
        height: 52px;
        margin: 4px;
    }

    
    .why-section .feature-card h3 {
        margin-top: 14px;
        font-size: 15px;
    }

    .why-section .feature-card p {
        font-size: 12px;
        line-height: 1.45;
    }

    .why-section .feature-card .card-label,
    .why-section .feature-card .card-labell {
        margin-top: 14px;
        max-width: 100%;
    }

    .why-section .feature-card .atasan {
        position: relative;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 8px;
    }

    .why-section .feature-card .unggulan {
        position: absolute;
        top: 0;
        right: 0;
        margin: 0 !important;
        min-width: 0;
        max-width: calc(100% - 72px);
    }

    .why-section .feature-card .unggulan h3 {
        max-width: 100%;
        padding: 7px 10px;
        font-size: 12px;
        line-height: 1.2;
        white-space: nowrap;
    }
}


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

@media (max-width: 768px) {

    .why-section .feature-card .atasan {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
        width: 100%;
    }

    .why-section .feature-card .unggulan {
        margin-left: 5rem;
    }

    .why-section .feature-card .unggulan h3 {
        padding: 6px 12px;
        font-size: 12px;
        line-height: 1.2;
        white-space: nowrap;
    }

}

@media (max-width: 960px) {

    .why-section .feature-card .atasan {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
        width: 100%;
    }

    .why-section .feature-card .unggulan {
        margin-left: 3rem;
    }

    .why-section .feature-card .unggulan h3 {
        padding: 6px 12px;
        font-size: 12px;
        line-height: 1.2;
        white-space: nowrap;
    }

}

@media (max-width: 900px) {

    .why-section .features-footer1  {

        grid-template-columns:
            repeat(2, 1fr);

    }

}


@media (max-width: 600px) {

    .why-section  {

        padding:
            100px 20px;
    }


    .why-heading h2  {

        font-size: 35px;
    }


    .why-section
    .features-footer1  {

        grid-template-columns: 1fr;

    }


    /*
       Mobile:
       semua card muncul dari bawah
    */

    .why-section
    .feature-card:nth-child(n)  {

        transform:
            translateY(70px);

    }


    .why-section.show
    .feature-card:nth-child(n)  {

        transform:
            translateY(0);

    }

}

/* =========================================
   HOW ZIGMAX SECTION
========================================= */

.how-section {

    position: relative;

    min-height: 100vh;

    padding: 130px 20px 170px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 40%,
            rgba(15, 75, 140, .10),
            transparent 55%
        ),

        #020817;

    isolation: isolate;
}

@media (max-width: 375px) {
    .why-section .feature-card .atasan {
        width: 100%;
        align-items: flex-start;
        justify-content: space-between;
        gap: 8px;
    }

    .why-section .feature-card .unggulan {
        
        margin-left: -20rem;
        min-width: 0;
    }

    
}


/* =========================================
   BACKGROUND
========================================= */

.how-bg {

    position: absolute;

    inset: 0;

    overflow: hidden;

    z-index: -1;
}


/* =========================================
   ORBS
========================================= */

.how-orb {

    position: absolute;

    border-radius: 50%;

    filter: blur(90px);

    pointer-events: none;
}


.how-orb-1 {

    width: 420px;
    height: 420px;

    top: -180px;
    left: -150px;

    background: #006eff;

    opacity: .13;

    animation:
        howOrb1 10s ease-in-out infinite alternate;
}


.how-orb-2 {

    width: 380px;
    height: 380px;

    right: -160px;
    top: 35%;

    background: #00bfff;

    opacity: .11;

    animation:
        howOrb2 12s ease-in-out infinite alternate;
}


.how-orb-3 {

    width: 260px;
    height: 260px;

    left: 42%;
    bottom: -130px;

    background: #2563eb;

    opacity: .13;

    animation:
        howOrb3 8s ease-in-out infinite alternate;
}


@keyframes howOrb1 {

    from {
        transform:
            translate(0, 0)
            scale(1);
    }

    to {
        transform:
            translate(180px, 120px)
            scale(1.2);
    }

}


@keyframes howOrb2 {

    from {
        transform:
            translate(0, 0)
            scale(1);
    }

    to {
        transform:
            translate(-150px, 100px)
            scale(1.25);
    }

}


@keyframes howOrb3 {

    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.6);
    }

}


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

.how-grid {

    position: absolute;

    inset: 0;

    background-image:

        linear-gradient(
            rgba(56, 189, 248, .035) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(56, 189, 248, .035) 1px,
            transparent 1px
        );

    background-size: 70px 70px;

    mask-image:
        radial-gradient(
            circle at center,
            black 10%,
            transparent 75%
        );

    animation:
        howGridMove 14s linear infinite;
}


@keyframes howGridMove {

    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(70px);
    }

}


/* =========================================
   PARTICLES
========================================= */

.how-particles span {

    position: absolute;

    width: 3px;
    height: 3px;

    border-radius: 50%;

    background: #38bdf8;

    box-shadow:
        0 0 8px #38bdf8,
        0 0 18px #2563eb;

    animation:
        howParticle 7s linear infinite;
}


.how-particles span:nth-child(1) {
    left: 10%;
    animation-delay: 0s;
}

.how-particles span:nth-child(2) {
    left: 22%;
    animation-delay: 1s;
}

.how-particles span:nth-child(3) {
    left: 35%;
    animation-delay: 3s;
}

.how-particles span:nth-child(4) {
    left: 48%;
    animation-delay: 2s;
}

.how-particles span:nth-child(5) {
    left: 62%;
    animation-delay: 4s;
}

.how-particles span:nth-child(6) {
    left: 73%;
    animation-delay: 1.5s;
}

.how-particles span:nth-child(7) {
    left: 84%;
    animation-delay: 3.5s;
}

.how-particles span:nth-child(8) {
    left: 92%;
    animation-delay: 5s;
}


@keyframes howParticle {

    0% {
        transform: translateY(110vh);
        opacity: 0;
    }

    20% {
        opacity: .8;
    }

    80% {
        opacity: .8;
    }

    100% {
        transform: translateY(-10vh);
        opacity: 0;
    }

}


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

.how-header {

    position: relative;

    max-width: 700px;

    margin: 0 auto 90px;

    text-align: center;

    z-index: 3;
}


.how-label {

    display: inline-block;

    margin-bottom: 16px;

    padding: 7px 15px;

    border: 1px solid
        rgba(56, 189, 248, .25);

    border-radius: 999px;

    background:
        rgba(14, 116, 200, .08);

    color: #38bdf8;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 2px;

    box-shadow:
        0 0 20px
        rgba(56, 189, 248, .06);
}


.how-header h2 {

    margin: 0;

    color: #ffffff;

    font-size: 45px;

    line-height: 1.15;

    font-weight: 700;
}


.how-header h2 span {

    color: #38bdf8;

    text-shadow:
        0 0 12px
        rgba(56, 189, 248, .5),

        0 0 30px
        rgba(37, 99, 235, .3);
}


.how-header p {

    max-width: 550px;

    margin: 18px auto 0;

    color: #64748b;

    font-size: 14px;

    line-height: 1.7;
}


/* =========================================
   TIMELINE
========================================= */

.how-timeline {

    position: relative;

    width: 100%;

    max-width: 1050px;

    margin: auto;

    display: flex;

    flex-direction: column;

    gap: 75px;
}


/* =========================================
   CENTRAL LINE
========================================= */

.how-line {

    position: absolute;

    top: 0;
    bottom: 0;

    left: 50%;

    width: 2px;

    transform: translateX(-50%);

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(56, 189, 248, .3),
            #38bdf8,
            rgba(37, 99, 235, .4),
            transparent
        );

    box-shadow:
        0 0 8px rgba(56, 189, 248, .5),
        0 0 25px rgba(37, 99, 235, .2);

    overflow: hidden;
}


/* moving light */

.how-line::after {

    content: "";

    position: absolute;

    top: -30%;

    left: -4px;

    width: 10px;

    height: 30%;

    border-radius: 50%;

    background: #ffffff;

    box-shadow:
        0 0 8px #ffffff,
        0 0 20px #38bdf8,
        0 0 40px #2563eb;

    animation:
        lineLight 3s linear infinite;
}


@keyframes lineLight {

    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(430%);
    }

}


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

.how-card {

    position: relative;

    width: 390px;

    min-height: 175px;

    padding: 28px;

    box-sizing: border-box;

    border-radius: 20px;

    border: 1px solid
        rgba(56, 189, 248, .16);

    background:
        linear-gradient(
            145deg,
            rgba(10, 31, 55, .92),
            rgba(2, 12, 25, .96)
        );

    backdrop-filter: blur(14px);

    box-shadow:
        0 20px 50px rgba(0, 0, 0, .28),

        inset 0 1px 0
        rgba(255, 255, 255, .025);

    opacity: 0;

    transition:
        opacity .9s ease,
        transform 1s cubic-bezier(.22,.61,.36,1),
        border-color .35s ease,
        box-shadow .35s ease;
}


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

.how-left {

    align-self: flex-start;

    transform:
        translateX(-120px);
}


/* =========================================
   RIGHT
========================================= */

.how-right {

    align-self: flex-end;

    transform:
        translateX(120px);
}


/* =========================================
   SHOW
========================================= */

.how-card.show {

    opacity: 1;

    transform:
        translateX(0);
}


/* =========================================
   DELAY
========================================= */

.how-card:nth-child(2) {
    transition-delay: .1s;
}

.how-card:nth-child(3) {
    transition-delay: .3s;
}

.how-card:nth-child(4) {
    transition-delay: .5s;
}

.how-card:nth-child(5) {
    transition-delay: .7s;
}


/* =========================================
   CONNECTOR
========================================= */

.how-left::after,
.how-right::after {

    content: "";

    position: absolute;

    top: 50%;

    width: 80px;

    border-top:
        1px dashed
        rgba(56, 189, 248, .45);

    transform:
        translateY(-50%);
}


.how-left::after {

    right: -80px;
}


.how-right::after {

    left: -80px;
}


/* =========================================
   CONNECTOR DOT
========================================= */

.how-left::before,
.how-right::before {

    content: "";

    position: absolute;

    top: 50%;

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #38bdf8;

    box-shadow:
        0 0 8px #38bdf8,
        0 0 20px rgba(56, 189, 248, .7);

    transform:
        translateY(-50%);
}


.how-left::before {

    right: -84px;
}


.how-right::before {

    left: -84px;
}


/* =========================================
   NUMBER
========================================= */

.how-card-number {

    position: absolute;

    top: 17px;

    right: 18px;

    width: 38px;
    height: 28px;

    display: flex;

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

    border-radius: 9px;

    border: 1px solid
        rgba(56, 189, 248, .25);

    background:
        linear-gradient(
            135deg,
            rgba(56, 189, 248, .15),
            rgba(37, 99, 235, .08)
        );

    color: #38bdf8;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1px;

    box-shadow:
        inset 0 0 10px
        rgba(56, 189, 248, .04);
}


/* =========================================
   ICON
========================================= */

.how-icon {

    width: 52px;
    height: 52px;

    display: flex;

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

    margin-bottom: 18px;

    border-radius: 15px;

    border: 1px solid
        rgba(56, 189, 248, .25);

    background:
        linear-gradient(
            145deg,
            rgba(30, 92, 145, .45),
            rgba(5, 25, 48, .8)
        );

    color: #38bdf8;

    box-shadow:
        0 0 15px
        rgba(56, 189, 248, .08);

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        background .35s ease;
}


.how-icon svg {

    width: 22px;
    height: 22px;
}


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

.how-content span {

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 2px;

    color: #38bdf8;
}


.how-content h3 {

    margin: 7px 0 9px;

    font-size: 17px;

    color: #ffffff;
}


.how-content p {

    margin: 0;

    font-size: 12px;

    line-height: 1.7;

    color: #718096;
}


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

@media (max-width: 850px) {

    .how-section  {

        padding:
            100px 20px 120px;
    }


    .how-header h2  {

        font-size: 34px;
    }


    .how-timeline  {

        gap: 45px;

        padding-left: 35px;
    }


    .how-line  {

        left: 10px;

        transform: none;
    }


    .how-card,
    .how-left,
    .how-right  {

        width: 100%;

        align-self: stretch;

        transform:
            translateY(70px);
    }


    .how-card.show  {

        transform:
            translateY(0);
    }


    .how-left::after,
    .how-right::after,
    .how-left::before,
    .how-right::before  {

        display: none;
    }

}


@media (max-width: 500px) {

    .how-header h2  {

        font-size: 29px;
    }


    .how-header p  {

        font-size: 13px;
    }


    .how-card  {

        min-height: 165px;

        padding: 23px;
    }


    .how-content h3  {

        font-size: 15px;
    }


    .how-content p  {

        font-size: 11px;
    }

}

/* =========================================
   CHOOSE ZIGMAX SECTION
========================================= */

.choose-section {
    position: relative;
    min-height: 100vh;

    padding: 130px 20px 150px;

    display: flex;
    flex-direction: column;
    align-items: center;

    overflow: hidden;
    isolation: isolate;

    background:
        radial-gradient(
            circle at 50% 40%,
            rgba(16, 70, 150, .16),
            transparent 55%
        ),
        #020817;
}


/* =========================================
   BACKGROUND
========================================= */

.choose-bg {
    position: absolute;
    inset: 0;

    z-index: -1;

    overflow: hidden;

    pointer-events: none;
}


/* =========================================
   ORB
========================================= */

.choose-orb {
    position: absolute;

    border-radius: 50%;

    filter: blur(70px);

    pointer-events: none;
}


.orb-one {
    width: 420px;
    height: 420px;

    left: -180px;
    top: 15%;

    background: #006eff;

    opacity: .18;

    animation:
        orbMoveOne 9s ease-in-out infinite alternate;
}


.orb-two {
    width: 380px;
    height: 380px;

    right: -160px;
    top: 35%;

    background: #00c8ff;

    opacity: .15;

    animation:
        orbMoveTwo 11s ease-in-out infinite alternate;
}


.orb-three {
    width: 220px;
    height: 220px;

    left: 50%;
    top: 45%;

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

    background: #2563eb;

    opacity: .12;

    animation:
        orbMoveThree 7s ease-in-out infinite alternate;
}


@keyframes orbMoveOne {

    from {
        transform: translate(0, 0);
    }

    to {
        transform: translate(150px, 100px);
    }

}


@keyframes orbMoveTwo {

    from {
        transform: translate(0, 0);
    }

    to {
        transform: translate(-150px, -80px);
    }

}


@keyframes orbMoveThree {

    from {
        transform: translate(-50%, -50%) scale(1);
    }

    to {
        transform: translate(-50%, -50%) scale(1.5);
    }

}


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

.choose-grid {

    position: absolute;

    inset: 0;

    background-image:
        linear-gradient(
            rgba(56,189,248,.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(56,189,248,.035) 1px,
            transparent 1px
        );

    background-size: 65px 65px;

    mask-image:
        radial-gradient(
            circle at center,
            black,
            transparent 75%
        );

    animation:
        gridMove 15s linear infinite;
}


@keyframes gridMove {

    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(65px);
    }

}


/* =========================================
   PARTICLES
========================================= */

.particle {

    position: absolute;

    width: 4px;
    height: 4px;

    border-radius: 50%;

    background: #38bdf8;

    box-shadow:
        0 0 8px #38bdf8,
        0 0 20px rgba(56,189,248,.7);

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


.p1 {
    left: 15%;
    top: 25%;
}

.p2 {
    left: 80%;
    top: 20%;

    animation-delay: 1s;
}

.p3 {
    left: 25%;
    top: 75%;

    animation-delay: 2s;
}

.p4 {
    left: 75%;
    top: 70%;

    animation-delay: 3s;
}

.p5 {
    left: 50%;
    top: 15%;

    animation-delay: 1.5s;
}


@keyframes particleFloat {

    0%,100% {
        transform:
            translateY(0)
            scale(1);

        opacity: .3;
    }

    50% {
        transform:
            translateY(-30px)
            scale(1.7);

        opacity: 1;
    }

}


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

.choose-header {

    text-align: center;

    max-width: 650px;

    margin-bottom: 55px;

    opacity: 0;

    transform: translateY(40px);

    animation:
        headerReveal 1s ease forwards;

    animation-delay: .2s;
}


.choose-label {

    display: inline-flex;

    padding: 7px 16px;

    border-radius: 999px;

    font-size: 11px;

    letter-spacing: 2px;

    color: #38bdf8;

    background:
        rgba(14,165,233,.08);

    border:
        1px solid rgba(56,189,248,.2);

    box-shadow:
        0 0 20px rgba(14,165,233,.08);
}


.choose-header h2 {

    margin: 18px 0 12px;

    font-size: clamp(36px, 5vw, 58px);

    color: #f8fafc;

    letter-spacing: -2px;
}


.choose-header h2 span {

    background:
        linear-gradient(
            90deg,
            #60a5fa,
            #38bdf8,
            #22d3ee
        );

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;
}


.choose-header p {

    margin: 0;

    color: #64748b;

    line-height: 1.7;

    font-size: 14px;
}


@keyframes headerReveal {

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


/* =========================================
   MAIN CARD
========================================= */

.choose-card {

    position: relative;

    width: min(460px, 92vw);

    padding: 34px;

    border-radius: 28px;

    background:
        linear-gradient(
            145deg,
            rgba(12,37,70,.94),
            rgba(3,15,32,.97)
        );

    border:
        1px solid rgba(56,189,248,.25);

    box-shadow:
        0 30px 100px rgba(0,0,0,.45),
        0 0 50px rgba(14,165,233,.08),
        inset 0 1px 0 rgba(255,255,255,.06);

    overflow: hidden;

    opacity: 0;

    transform:
        translateY(80px)
        scale(.94);

    animation:
        cardReveal 1s cubic-bezier(.22,.61,.36,1) forwards;

    animation-delay: .55s;

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


@keyframes cardReveal {

    to {

        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }

}


/* =========================================
   CARD LIGHT
========================================= */

.card-light {

    position: absolute;

    width: 180px;
    height: 180px;

    right: -90px;
    top: -90px;

    border-radius: 50%;

    background: #168cff;

    filter: blur(70px);

    opacity: .16;

    animation:
        cardLightMove 5s ease-in-out infinite alternate;
}


@keyframes cardLightMove {

    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.5);
    }

}


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

.bagianjudulcard {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;
}


.zigmax-brand {

    display: flex;

    align-items: center;

    gap: 14px;
}


.logo-box {

    width: 55px;
    height: 55px;

    display: flex;

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

    border-radius: 15px;

    background:
        linear-gradient(
            145deg,
            rgba(37,99,235,.25),
            rgba(14,165,233,.08)
        );

    border:
        1px solid rgba(56,189,248,.3);

    box-shadow:
        0 0 20px rgba(37,99,235,.12);
}


.logo-box img {

    width: 36px;
    height: 36px;

    object-fit: contain;
}


.judul-titlecard {

    margin: 0;

    font-size: 23px;

    letter-spacing: 2px;

    color: #f8fafc;
}


.explain-card3 {

    margin: 4px 0 0;

    font-size: 11px;

    font-weight: 500;

    color: #64748b;
}


.card-badge {

    display: flex;

    align-items: center;

    gap: 6px;

    padding: 7px 10px;

    border-radius: 10px;

    font-size: 8px;

    letter-spacing: 1px;

    color: #38bdf8;

    background:
        rgba(14,165,233,.07);

    border:
        1px solid rgba(56,189,248,.15);
}


.card-badge svg {

    width: 12px;
}


/* =========================================
   DIVIDER
========================================= */

.card-divider {

    height: 1px;

    margin: 28px 0;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(56,189,248,.25),
            transparent
        );
}


/* =========================================
   FEATURES
========================================= */

.isicard {

    display: flex;

    flex-direction: column;

    gap: 12px;
}


.card-feature {

    position: relative;

    display: flex;

    align-items: center;

    gap: 13px;

    padding: 13px;

    border-radius: 16px;

    border:
        1px solid rgba(56,189,248,.08);

    background:
        rgba(15,40,70,.28);

    transition:
        transform .35s ease,
        border-color .35s ease,
        background .35s ease,
        box-shadow .35s ease;

    opacity: 0;

    transform: translateX(-25px);

    animation:
        featureReveal .7s ease forwards;
}


.card-feature:nth-child(1) {
    animation-delay: .9s;
}

.card-feature:nth-child(2) {
    animation-delay: 1.05s;
}

.card-feature:nth-child(3) {
    animation-delay: 1.2s;
}


@keyframes featureReveal {

    to {

        opacity: 1;

        transform:
            translateX(0);
    }

}


/* =========================================
   FEATURE ICON
========================================= */

.feature-icon {

    width: 42px;
    height: 42px;

    flex-shrink: 0;

    display: flex;

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

    border-radius: 12px;

    color: #60a5fa;

    background:
        linear-gradient(
            145deg,
            rgba(37,99,235,.22),
            rgba(56,189,248,.06)
        );

    border:
        1px solid rgba(56,189,248,.2);

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


.feature-icon svg {

    width: 19px;
}


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

.feature-text {

    flex: 1;
}


.feature-text p {

    margin: 0;

    color: #e2e8f0;

    font-size: 13px;

    font-weight: 600;
}


.feature-text span {

    display: block;

    margin-top: 3px;

    color: #64748b;

    font-size: 10px;
}


.feature-check {

    width: 17px;

    color: #38bdf8;

    filter:
        drop-shadow(
            0 0 5px
            rgba(56,189,248,.6)
        );
}


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

.btn-started-now {

    margin-top: 28px;
}


.btn-started-now a {

    position: relative;

    width: 100%;

    padding: 15px 18px;

    display: flex;

    align-items: center;

    justify-content: center;

    box-sizing: border-box;

    text-decoration: none;

    color: white;

    font-size: 13px;

    font-weight: 600;

    border-radius: 14px;

    overflow: hidden;

    background:
        linear-gradient(
            100deg,
            #1556d8,
            #087eea,
            #06b6d4
        );

    box-shadow:
        0 10px 30px rgba(14,165,233,.2);

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


.btn-started-now a::before {

    content: "";

    position: absolute;

    top: 0;
    left: -120%;

    width: 70%;
    height: 100%;

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

    transform: skewX(-20deg);

    animation:
        buttonLight 4s ease-in-out infinite;
}


@keyframes buttonLight {

    0%,45% {
        left: -120%;
    }

    65%,100% {
        left: 150%;
    }

}


.btn-started-now svg {

    width: 18px;

    transition:
        transform .3s ease;
}


/* =========================================
   BOTTOM GLOW
========================================= */

.card-bottom-glow {

    position: absolute;

    bottom: -80px;
    left: 50%;

    width: 280px;
    height: 120px;

    transform: translateX(-50%);

    border-radius: 50%;

    background: #087eea;

    filter: blur(55px);

    opacity: .16;

    pointer-events: none;
}


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

@media (max-width: 600px) {

    .choose-section  {

        padding:
            100px 18px 120px;
    }


    .choose-header  {

        margin-bottom: 40px;
    }


    .choose-header h2  {

        font-size: 38px;
    }


    .choose-card  {

        padding: 24px;

        border-radius: 23px;
    }


    .card-badge  {

        display: none;
    }


    .judul-titlecard  {

        font-size: 20px;
    }


    .logo-box  {

        width: 48px;
        height: 48px;
    }

}


/* =========================================
   FINAL CTA
========================================= */

.zigmax-cta {
    position: relative;
    min-height: 620px;
    padding: 120px 7%;

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

    text-align: center;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(14, 80, 170, .18),
            transparent 38%
        ),
        linear-gradient(
            135deg,
            #010611 0%,
            #020b1c 48%,
            #010817 100%
        );

    border-top: 1px solid rgba(56,189,248,.06);
}


/* =========================================
   BACKGROUND GLOW
========================================= */

.zigmax-cta::before,
.zigmax-cta::after {
    content: "";
    position: absolute;

    width: 420px;
    height: 420px;

    border-radius: 50%;

    filter: blur(100px);

    pointer-events: none;
}

.zigmax-cta::before {
    left: -220px;
    top: 20%;

    background: rgba(14, 116, 214, .08);

    animation: ctaGlowLeft 8s ease-in-out infinite alternate;
}

.zigmax-cta::after {
    right: -220px;
    bottom: 10%;

    background: rgba(37, 99, 235, .09);

    animation: ctaGlowRight 8s ease-in-out infinite alternate;
}


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

.cta-content {
    position: relative;
    z-index: 5;

    max-width: 850px;

    opacity: 0;
    transform: translateY(35px);

    transition:
        opacity 1s ease,
        transform 1s cubic-bezier(.16,1,.3,1);
}

.zigmax-cta.show .cta-content {
    opacity: 1;
    transform: translateY(0);
}


/* =========================================
   EYEBROW
========================================= */

.cta-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 25px;

    color: #38bdf8;

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 4px;
}

.cta-eyebrow::before,
.cta-eyebrow::after {
    content: "";

    width: 30px;
    height: 1px;

    background: linear-gradient(
        90deg,
        transparent,
        #38bdf8
    );
}


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

.cta-content h2 {
    margin: 0;

    font-size: clamp(48px, 6vw, 82px);
    line-height: .98;

    font-weight: 800;
    letter-spacing: -3px;

    color: #f1f7ff;
}

.cta-content h2 span {
    display: block;

    background:
        linear-gradient(
            90deg,
            #168cff,
            #38bdf8,
            #60a5fa,
            #168cff
        );

    background-size: 250% auto;

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;

    animation: ctaTextFlow 5s linear infinite;
}


/* =========================================
   DESCRIPTION
========================================= */

.cta-content p {
    max-width: 650px;

    margin: 30px auto 0;

    color: #8ea4c3;

    font-size: 16px;
    line-height: 1.8;
}


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

.cta-button {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    margin-top: 38px;

    padding: 15px 30px;

    border: 1px solid rgba(56,189,248,.55);
    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            #168cff,
            #2563eb
        );

    color: white;

    font-size: 14px;
    font-weight: 700;

    text-decoration: none;

    box-shadow:
        0 0 25px rgba(37,99,235,.22);

    overflow: hidden;

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

.cta-button::before {
    content: "";

    position: absolute;

    top: 0;
    left: -120%;

    width: 80%;
    height: 100%;

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

    transform: skewX(-20deg);

    animation: ctaButtonShine 4s ease-in-out infinite;
}


/* =========================================
   SMALL BRAND
========================================= */

.cta-brand {
    margin-top: 75px;

    color: #38bdf8;

    font-size: 20px;
    font-weight: 800;

    letter-spacing: 5px;

    opacity: .75;
}

.cta-brand span {
    display: block;

    margin-top: 7px;

    color: #536987;

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

    letter-spacing: 4px;
}


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

@keyframes ctaGlowLeft {

    0% {
        transform: translate(0, 0) scale(1);
    }

    100% {
        transform: translate(120px, -40px) scale(1.25);
    }

}

@keyframes ctaGlowRight {

    0% {
        transform: translate(0, 0) scale(1);
    }

    100% {
        transform: translate(-100px, 50px) scale(1.2);
    }

}

@keyframes ctaTextFlow {

    0% {
        background-position: 0% center;
    }

    100% {
        background-position: 250% center;
    }

}

@keyframes ctaButtonShine {

    0%,
    45% {
        left: -120%;
    }

    65% {
        left: 140%;
    }

    100% {
        left: 140%;
    }

}


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

@media (max-width: 768px) {

    .zigmax-cta  {
        min-height: 550px;
        padding: 100px 25px;
    }

    .cta-content h2  {
        font-size: clamp(42px, 11vw, 60px);
        letter-spacing: -2px;
    }

    .cta-content p  {
        font-size: 14px;
        line-height: 1.7;
    }

    .cta-brand  {
        margin-top: 55px;
    }

}


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

.footer {
    position: relative;
    min-height: 430px;

    padding: 80px 8% 30px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 100%,
            rgba(0, 102, 255, .13),
            transparent 45%
        ),
        linear-gradient(
            180deg,
            #050d1c 0%,
            #030814 100%
        );

    border-top: 1px solid rgba(56, 189, 248, .12);

    isolation: isolate;
}


/* =========================================
   3D DECORATION
========================================= */

.footer-3d {
    position: absolute;

    pointer-events: none;

    z-index: -1;
}


/* =========================================
   3D CUBE - KIRI
========================================= */

.footer-3d-left {

    left: -25px;
    bottom: -35px;

    width: 170px;
    height: 170px;

    perspective: 700px;

    opacity: .7;
}


.cube-3d {

    position: absolute;

    left: 30px;
    bottom: 15px;

    width: 100px;
    height: 100px;

    transform-style: preserve-3d;

    transform:
        rotateX(-18deg)
        rotateY(30deg)
        rotateZ(-8deg);
}


/* setiap sisi cube */

.cube-3d span {

    position: absolute;

    width: 100px;
    height: 100px;

    border: 1px solid rgba(56, 189, 248, .45);

    background:
        linear-gradient(
            135deg,
            rgba(30, 120, 255, .20),
            rgba(3, 20, 50, .65)
        );

    box-shadow:
        inset 0 0 25px rgba(0, 153, 255, .12),
        0 0 15px rgba(0, 119, 255, .12);
}


/* depan */

.cube-3d span:nth-child(1) {
    transform: translateZ(50px);
}


/* belakang */

.cube-3d span:nth-child(2) {
    transform: rotateY(180deg) translateZ(50px);
}


/* kanan */

.cube-3d span:nth-child(3) {
    transform:
        rotateY(90deg)
        translateZ(50px);
}


/* kiri */

.cube-3d span:nth-child(4) {
    transform:
        rotateY(-90deg)
        translateZ(50px);
}


/* atas */

.cube-3d span:nth-child(5) {
    transform:
        rotateX(90deg)
        translateZ(50px);
}


/* bawah */

.cube-3d span:nth-child(6) {
    transform:
        rotateX(-90deg)
        translateZ(50px);
}


/* =========================================
   3D ORB - KANAN
========================================= */

.footer-3d-right {

    right: -80px;
    bottom: -80px;

    width: 260px;
    height: 260px;

    opacity: .7;
}


.orb-3d {

    position: relative;

    width: 210px;
    height: 210px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 30% 25%,
            #8bdcff 0%,
            #258cff 12%,
            #0758c9 35%,
            #06265f 62%,
            #020b1c 82%
        );

    box-shadow:
        inset -25px -25px 45px rgba(0, 0, 0, .75),
        inset 15px 10px 30px rgba(120, 220, 255, .2),
        0 0 35px rgba(0, 119, 255, .22);

    transform:
        rotate(-18deg);
}


/* highlight orb */

.orb-3d::before {

    content: "";

    position: absolute;

    width: 65px;
    height: 35px;

    top: 25px;
    left: 40px;

    border-radius: 50%;

    background:
        rgba(190, 240, 255, .35);

    filter: blur(12px);

    transform: rotate(-25deg);
}


/* ring */

.orb-ring {

    position: absolute;

    width: 255px;
    height: 65px;

    top: 75px;
    left: -23px;

    border-radius: 50%;

    border:
        2px solid rgba(56, 189, 248, .55);

    transform:
        rotateX(65deg)
        rotateZ(-12deg);

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


/* ring kedua */

.orb-ring::after {

    content: "";

    position: absolute;

    inset: 8px;

    border-radius: 50%;

    border:
        1px solid rgba(147, 220, 255, .25);
}


/* inti orb */

.orb-core {

    position: absolute;

    width: 20px;
    height: 20px;

    top: 55px;
    left: 60px;

    border-radius: 50%;

    background: #9de8ff;

    box-shadow:
        0 0 15px #38bdf8,
        0 0 35px rgba(0, 153, 255, .8);
}


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

.judul-footer {
    max-width: 420px;

    position: relative;
    z-index: 2;
}


.footer .logo {

    display: flex;

    align-items: center;

    gap: 12px;
}


.footer .logo img {

    width: 42px;
    height: 42px;

    object-fit: contain;
}


.footer-judul {

    margin: 0;

    font-size: 24px;

    letter-spacing: 2px;

    color: #ffffff;
}


.footer-judul span {
    color: #38bdf8;
}


.explain-footer {

    margin-top: 18px;

    max-width: 390px;

    color: #71839d;

    font-size: 13px;

    line-height: 1.7;
}

/* CONTACT */
.kontact {
    display: flex;
    gap: 12px;
    align-items: center;
}

.kontact a {
    width: 48px;
    height: 48px;

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

    background: #f0f5ff;
    border: 1px solid #dce8ff;
    border-radius: 16px;

    text-decoration: none;
    color: #1769ff !important;

    transition: all 0.25s ease;
}

/* SVG */
.kontact a svg {
    width: 22px;
    height: 22px;
    stroke: #1769ff !important;
    color: #1769ff !important;
}

/* Hover */
.kontact a:hover {
    background: #1769ff;
    border-color: #1769ff;
}

.kontact a:hover svg {
    stroke: #ffffff !important;
    color: #ffffff !important;
}


/* =========================================
   FOOTER MENU
========================================= */

.isi-footer {

    position: relative;

    z-index: 2;

    transform: translateY(-73px);

    display: grid;

    grid-template-columns:
        repeat(2, 150px);

    gap: 70px;

    margin-left: 57%;

    margin-top: -115px;
}

@media (min-width: 901px) {
    .isi-footer {
        width: fit-content;
        margin-left: auto;
        margin-right: 0;
    }
}

@media (max-width: 900px) {
    .isi-footer  {
        transform: none;
    }
}


.isi-footer h5 {

    margin: 0 0 20px;

    font-size: 14px;

    color: #ffffff;

    letter-spacing: .5px;
}


.isi-footer a,
.isi-footer p {

    display: block;

    margin: 0 0 12px;

    color: #70829c;

    font-size: 12px;

    text-decoration: none;
}


.isi-contact p {
    margin-top: 12px;
}


/* =========================================
   GARIS
========================================= */

.garis {

    position: relative;

    z-index: 2;

    margin-top: 75px;

    border: 0;

    border-top:
        1px solid rgba(56, 189, 248, .12);
}


/* =========================================
   COPYRIGHT
========================================= */

.copyright {

    position: relative;

    z-index: 2;

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding-top: 22px;
}


.copyright p {

    margin: 0;

    font-size: 11px;

    color: #52647d;
}


.explain-copyright {
    color: #315b82 !important;
}


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

@media (max-width: 900px) {

    .footer  {
        padding: 70px 6% 30px;
    }

    .isi-footer  {

        margin-left: 0;

        margin-top: 55px;

        grid-template-columns:
            repeat(3, 1fr);

        gap: 25px;
    }

    .garis  {
        margin-top: 50px;
    }

}


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

@media (max-width: 600px) {

    .footer  {

        padding:
            60px 25px 25px;

        min-height: auto;
    }


    .footer-3d-left  {

        left: -70px;
        bottom: -60px;

        transform: scale(.7);

        opacity: .4;
    }


    .footer-3d-right  {

        right: -100px;
        bottom: -80px;

        transform: scale(.65);

        opacity: .4;
    }


    .isi-footer  {

        grid-template-columns: 1fr 1fr;

        gap: 35px;

        margin-top: 45px;
    }


    .isi-contact  {

        grid-column: 1 / -1;
    }


    .copyright  {

        flex-direction: column;

        align-items: flex-start;

        gap: 8px;
    }

}

@media (min-width: 375px) and (max-width: 440px) {
    .footer {
        min-height: auto;
        padding: 36px 2px 12px;
    }

    .footer .logo img {
        width: 150px !important;
        height: 40px !important;
    }

    .explain-footer {
        max-width: 340px;
        margin-top: 14px;
        font-size: 11px;
        line-height: 1.65;
    }

    .kontact {
        gap: 10px;
        margin-top: 12px;
    }

    .kontact a {
        width: 48px;
        height: 48px;
        border-radius: 14px;
    }

    .isi-footer {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 18px;
        margin: 42px 0 0;
        transform: none !important;
    }

    .isi-footer h5 {
        margin-bottom: 14px;
        font-size: 13px;
    }

    .isi-footer a,
    .isi-footer p {
        margin-bottom: 10px;
        font-size: 10px;
        line-height: 1.4;
        overflow-wrap: anywhere;
    }

    .isi-contact {
        grid-column: auto;
    }

    .garis {
        margin-top: 38px;
    }

    .copyright {
        gap: 7px;
        padding-top: 17px;
    }

    .copyright p {
        font-size: 9px;
    }
}
/* =========================================================
   MOBILE PERFORMANCE ONLY
   ========================================================= */
@media (max-width: 768px) {
    html,
    body  {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
        overscroll-behavior-x: none;
        overscroll-behavior-y: auto;
        touch-action: auto;
        -webkit-overflow-scrolling: touch;
    }

    html  {
        overflow-y: auto;
    }

    body  {
        overflow-y: visible;
    }

    .animated-bg,
    .intro,
    .flow-lines,
    .why-bg,
    .how-bg,
    .choose-bg,
    .footer  {
        max-width: 100vw;
        overflow-x: hidden;
    }

    .corner-light,
    .orb,
    .grid,
    .main-line,
    .main-line.second,
    .particle,
    .why-orb,
    .why-grid,
    .why-particles span,
    .how-orb,
    .how-grid,
    .how-particles span,
    .choose-orb,
    .choose-grid,
    .card-light,
    .card-bottom-glow  {
        animation: none !important;
    }

    .particle,
    .why-particles span,
    .how-particles span  {
        display: block !important;
    }

    .main-line,
    .main-line.second  {
        stroke-dashoffset: 0;
    }

    .intro-glow,
    .intro-planet,
    .intro-line  {
        animation: none !important;
    }

    .intro-logo  {
        animation: none !important;
        opacity: 1;
        transform: scale(1);
        filter: blur(0);
    }
}

@media (max-width: 768px) and (pointer: coarse) {
    html,
    body  {
        overscroll-behavior-y: auto;
        touch-action: auto;
    }
}


/* =========================================================
   RESPONSIVE IMAGE / PHOTO SECTION
   =========================================================
   Desktop  : gambar tetap proporsional dan tidak terlalu besar
   Tablet   : menyesuaikan lebar layar
   HP       : gambar dibuat lebih besar/nyaman dilihat
   HTML     : TIDAK DIUBAH
========================================================= */

/* Desktop besar */
@media (min-width: 1200px) {
    .bagiangambar  {
        width: min(760px, 78vw);
        height: 300px;
    }

    .bagiangambar .card  {
        height: 230px;
    }
}

/* Desktop kecil / laptop */
@media (min-width: 769px) and (max-width: 1199px) {
    .bagiangambar  {
        width: min(680px, 86vw);
        height: 280px;
    }

    .bagiangambar .card  {
        height: 215px;
    }
}

/* Tablet */
@media (min-width: 601px) and (max-width: 768px) {
    .bagiangambar  {
        width: 88vw;
        height: 280px;
    }

    .bagiangambar .card  {
        height: 220px;
    }

    .posisi-2  {
        left: 38px;
    }

    .posisi-3  {
        left: -38px;
    }
}

/* HP */
@media (max-width: 600px) {
    .bagiangambar  {
        width: 94vw;
        height: 300px;
        max-width: 100%;
    }

    .bagiangambar .card  {
        width: 100%;
        height: 245px;
        border-radius: 16px;
    }

    .intro-lines {
        display: none;
    }

    .flow-lines {
        display: none;
    }
    /* Supaya komposisi 3 gambar tetap terlihat dan tidak keluar layar */
    .posisi-1  {
        left: 0;
        top: 30px;
    }

    .posisi-2  {
        left: 24px;
        top: 10px;
    }

    .posisi-3  {
        left: -24px;
        top: 50px;
    }
}

/* HP kecil */
@media (max-width: 400px) {
    .bagiangambar  {
        width: 95vw;
        height: 265px;
    }

    .bagiangambar .card  {
        height: 215px;
    }

    .posisi-2  {
        left: 18px;
    }

    .posisi-3  {
        left: -18px;
    }

    .intro-lines {
        display: none;
    }
    .flow-lines {
        display: none;
    }
}

@media screen and (max-width: 800px) {

    .navbar  {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 999999 !important;
        opacity: 1 !important;
        transform: translateY(0) !important;

        display: flex !important;
        align-items: center !important;

        width: 100%;
        box-sizing: border-box;
    }

    .navbar.show  {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }

    body  {
        padding-top: 78px;
    }

     .nav-button {
        display: none;
     }
    /* ===============================
       HAMBURGER BUTTON
    =============================== */

    .hamburger  {
        display: flex !important;

        margin-left: auto !important;

        width: 52px !important;
        height: 52px !important;

        padding: 0 !important;

        background: #06172d !important;

        border: 1px solid #168cff !important;

        border-radius: 14px !important;

        flex-direction: column !important;

        align-items: center !important;
        justify-content: center !important;

        gap: 5px !important;

        cursor: pointer !important;

        position: relative !important;

        z-index: 9999999 !important;
    }


    .hamburger span  {
        display: block !important;

        width: 24px !important;
        height: 3px !important;

        background: #38bdf8 !important;

        border-radius: 10px !important;

        transition: 0.3s ease !important;
    }


    /* ===============================
       MENU TERTUTUP
    =============================== */

    .nav-menu  {
        display: none !important;
    }


    /* ===============================
       MENU TERBUKA
    =============================== */

    .nav-menu.open  {
        display: flex !important;

        position: absolute !important;

        top: 70px !important;

        right: 15px !important;

        width: 240px !important;

        padding: 10px !important;

        flex-direction: column !important;

        gap: 5px !important;

        background: #031329 !important;

        border: 1px solid #168cff !important;

        border-radius: 15px !important;

        box-shadow:
            0 15px 40px rgba(0, 0, 0, 0.7),
            0 0 25px rgba(22, 140, 255, 0.2) !important;

        z-index: 9999998 !important;

        box-sizing: border-box !important;
    }


    /* ===============================
       MENU LINK
    =============================== */

    .nav-menu.open a  {
        display: block !important;

        width: 100% !important;

        padding: 15px !important;

        box-sizing: border-box !important;

        color: #ffffff !important;

        background: transparent !important;

        text-decoration: none !important;

        font-size: 16px !important;

        border-radius: 8px !important;
    }


    /* ===============================
       HAMBURGER MENJADI X
    =============================== */

    .hamburger.active span:nth-child(1)  {
        transform: translateY(8px) rotate(45deg) !important;
    }

    .hamburger.active span:nth-child(2)  {
        opacity: 0 !important;
    }

    .hamburger.active span:nth-child(3)  {
        transform: translateY(-8px) rotate(-45deg) !important;
    }
}

/* =========================================
   ZIGMAX LIGHT ENTERPRISE THEME
========================================= */
:root {
    --white: #FFFFFF;
    --soft-bg: #F7FAFF;
    --border-soft: #E5EDFA;
    --navy: #071A3B;
    --text-primary: #33415E;
    --text-muted: #64748B;
    --blue-primary: #1769FF;
    --blue-dark: #0B43BD;
    --blue-glow: rgba(23,105,255,.15);
    --blue-glow-strong: rgba(23,105,255,.30);
}

body {
    background: var(--white);
    color: var(--text-primary);
}

.animated-bg,
.why-bg,
.how-section {
    background: var(--white);
}

.animated-bg {
    background: radial-gradient(circle at 50% 50%, var(--blue-glow), transparent 60%), var(--white);
}

.corner-light,
.why-orb,
.how-orb {
    background: var(--blue-primary);
}

.grid,
.why-grid,
.how-grid {
    background-image: linear-gradient(rgba(23,105,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(23,105,255,.045) 1px, transparent 1px);
}

.orb {
    background: radial-gradient(circle at 30% 25%, #8db7ff, var(--blue-primary) 20%, var(--blue-dark) 48%, rgba(23,105,255,.08) 75%, transparent 100%);
    box-shadow: inset -20px -20px 45px rgba(7,26,59,.18), 0 0 40px var(--blue-glow-strong);
}

.main-line,
.why-flow path,
.flow-line,
.flow-main { stroke: var(--blue-primary); }
.main-line.second,
.why-flow path:nth-child(2) { stroke: #6b9cff; }
.particle,
.how-particles span { background: var(--blue-primary); box-shadow: 0 0 6px var(--blue-primary), 0 0 15px var(--blue-glow-strong); }

.navbar {
    background: rgba(255,255,255,.94);
    border-bottom-color: var(--border-soft);
    box-shadow: 0 4px 20px rgba(7,26,59,.04);
}
.logo { color: var(--blue-primary); text-shadow: 0 0 18px var(--blue-glow); }
.nav-menu a { color: var(--text-primary); }
.nav-button {
    border-color: var(--blue-primary);
    border-radius: 14px;
    background: linear-gradient(135deg, var(--blue-primary), #2b72e8);
    color: #ffffff;
    box-shadow: 0 8px 18px rgba(23,105,255,.18);
}
.hamburger { color: var(--navy); }

h1, h2, h3, h4, h5, h6 { color: var(--navy); }
.eyebrow, .photo-heading span, .why-heading span, .how-label { color: var(--blue-primary); }
.hero h1 span, .photo-heading strong, .why-heading strong { background: linear-gradient(90deg, var(--blue-primary), var(--blue-dark)); }
.hero h1 span, .photo-heading strong, .why-heading strong,
.visual-content h2 span, .why-content h2 span {
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.hero p, .photo-heading p, .why-heading p, .how-header p { color: var(--text-muted); }
.primary-btn, .contact-button { background: var(--blue-primary); box-shadow: 0 8px 25px var(--blue-glow-strong); }
.secondary-btn { color: var(--blue-primary); border-color: var(--blue-primary); background: var(--white); }

.photo-section,
.zigmax-visual-section,
.why-section { background: var(--white); }
.photo-section:nth-of-type(even),
.zigmax-stats { background: var(--soft-bg); }
.photo-heading h2, .visual-content h2, .why-heading h2, .how-header h2 { color: var(--navy); }
.photo-heading strong, .visual-content h2 span, .why-heading strong, .why-content h2 span { color: var(--blue-primary); }
.bagiangambar .card, .stats-card, .visual-image img { border-color: var(--border-soft); }
.posisi-2, .posisi-3 { filter: brightness(.92); }
.stats-card, .feature-card, .how-card, .flow-card, .system-node { background: var(--white); border-color: var(--border-soft); box-shadow: 0 10px 30px rgba(23,105,255,.08); }
.stat-info h3, .feature-card h3, .how-card h3, .flow-card h3, .system-node h3 { color: var(--navy); }
.stat-info p, .card-explain, .how-card p, .flow-card p, .system-node p { color: var(--text-muted); }
.stat-icon, .feature-icon1, .feature-icon2, .feature-icon3, .feature-icon4, .feature-icon5, .feature-icon6, .feature-icon7, .feature-icon8, .feature-icon9, .flow-icon { background: rgba(23,105,255,.08); border-color: var(--border-soft); color: var(--blue-primary); }
.why-section .feature-card { background: var(--white); }
.feature-card90, .zigmax-card { background: var(--navy); border-color: var(--blue-primary); }
.feature-card90 h3, .zigmax-card h3 { color: var(--white); }
.why-section .card-label { color: var(--blue-dark); background: var(--soft-bg); border-color: var(--border-soft); }
.why-section .feature-card:nth-child(n) { --glow-color: var(--blue-primary); }
.how-line { background: linear-gradient(to bottom, transparent, var(--border-soft), var(--blue-primary), var(--border-soft), transparent); box-shadow: 0 0 8px var(--blue-glow-strong); }
.how-left::after, .how-right::after { border-color: var(--border-soft); }
.how-left::before, .how-right::before { background: var(--blue-primary); }
.how-content h3 { color: var(--navy); }
.how-icon { background: #D1E0FF; border-color: var(--border-soft); color: var(--blue-primary); box-shadow: none; }

.footer { background: var(--white); border-top-color: var(--border-soft); }

@media (max-width: 768px) {
    .footer { min-height: auto; padding: 34px 22px 18px !important; }
    .footer .logo img { width: 150px !important; height: 40px !important; }
    .explain-footer { max-width: 360px; margin-top: 14px; font-size: 11px; line-height: 1.65; }
    .kontact { gap: 10px; margin-top: 12px; }
    .kontact a { width: 48px; height: 48px; border-radius: 14px; }
    .isi-footer { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; gap: 18px !important; margin: 42px 0 0 !important; transform: none !important; }
    .isi-contact { grid-column: auto !important; }
    .isi-footer h5 { margin-bottom: 14px; font-size: 13px; }
    .isi-footer a, .isi-footer p { margin-bottom: 10px; font-size: 10px; line-height: 1.4; overflow-wrap: anywhere; }
    .garis { margin-top: 38px; }
    .copyright { gap: 7px; padding-top: 17px; }
    .copyright p { font-size: 9px; }
}
.footer .logo img { filter: none; }
.footer-judul, .isi-footer h5 { color: var(--navy); }.footer-judul span, .kontak a { color: var(--blue-primary); }
.explain-footer, .isi-footer a, .isi-footer p { color: var(--text-muted); }
.kontak a { background: var(--white); border-color: #000; color: var(--blue-primary); }
.cube-3d span { border-color: rgba(23,105,255,.45); background: rgba(23,105,255,.12); }
.orb-3d { background: radial-gradient(circle at 30% 25%, #b9d0ff, var(--blue-primary) 25%, var(--blue-dark) 60%, var(--navy) 85%); box-shadow: inset -20px -20px 45px rgba(7,26,59,.55), 0 0 35px var(--blue-glow-strong); }

@media (max-width: 768px) {
    .hamburger  { background: var(--white) !important; border-color: var(--blue-primary) !important; }
    .hamburger span  { background: var(--blue-primary) !important; }
    .nav-menu.open  { background: var(--white) !important; border-color: var(--border-soft) !important; box-shadow: 0 15px 40px rgba(7,26,59,.12) !important; }
    .nav-menu.open a  { color: var(--text-primary) !important; }
}

/* =========================================
   FEATURES CLEAN SURFACE OVERRIDES
========================================= */
.why-section,
.how-section,
.zigmax-cta {
    background: var(--white);
}

.why-bg,
.how-bg {
    background: transparent;
}

.animated-bg {
    background: var(--white);
}

.corner-light,
.orb,
.image-glow,
.system-glow,
.choose-orb,
.why-glow {
    display: none;
}

.main-line,
.why-flow path {
    filter: none;
}

.particle {
    box-shadow: none;
}
.particle,
.how-particles span,
.how-line::after,
.why-section .feature-card,
.how-card {
    will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
    .particle,
    .how-particles span,
    .how-line::after  {
        animation: none !important;
    }
}

html.low-performance .particle,
html.low-performance .grid,
html.low-performance .why-grid,
html.low-performance .how-grid,
html.low-performance .how-particles,
html.low-performance .why-orb,
html.low-performance .how-orb,
html.low-performance .corner-light {
    display: none !important;
}

html.low-performance * {
    animation-duration: .01ms !important;
    animation-delay: 0s !important;
    transition-duration: .2s !important;
    transition-delay: 0s !important;
}

html.compact-device .particle,
html.compact-device .grid,
html.compact-device .why-grid,
html.compact-device .how-grid,
html.compact-device .how-particles,
html.compact-device .why-orb,
html.compact-device .how-orb,
html.compact-device .corner-light {
    display: none !important;
}

html.compact-device .why-section,
html.compact-device .how-section,
html.compact-device .zigmax-cta {
    content-visibility: auto;
    contain-intrinsic-size: 720px;
}

html.compact-device .how-line::after,
html.compact-device .how-particles span {
    animation-duration: 2s !important;
}

/* =========================================
   FAST REVEAL MOTION
========================================= */
.why-section .feature-card,
.how-card,
.hero,
.navbar,
.cta-content {
    transition-duration: .4s !important;
    transition-delay: 0s !important;
}

.why-section.show .feature-card:nth-child(n),
.how-card:nth-child(n) {
    transition-delay: 0s !important;
}

.why-orb,
.how-orb,
.how-particles span,
.why-section .feature-card::after,
.zigmax-cta::before,
.zigmax-cta::after {
    display: none;
}

.why-section .feature-card,
.how-card {
    background: var(--white);
    border: 1px solid var(--border-soft);
    box-shadow: 0 8px 22px rgba(23,105,255,.06);
    transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease;
}

.why-section .feature-card .feature-icon1,
.why-section .feature-card .feature-icon2,
.why-section .feature-card .feature-icon3,
.why-section .feature-card .feature-icon4,
.why-section .feature-card .feature-icon5,
.why-section .feature-card .feature-icon6,
.why-section .feature-card .feature-icon7,
.why-section .feature-card .feature-icon8,
.why-section .feature-card .feature-icon9 {
    background: #D1E0FF;
    border-color: var(--border-soft);
    box-shadow: none;
    transition: transform .28s ease, border-color .28s ease;
}

.why-section .feature-card h3,
.how-content h3,
.how-card-number {
    color: var(--navy);
}

.why-section .feature-card p,
.how-content p {
    color: var(--text-muted);
}

.why-section .card-label {
    color: var(--blue-dark);
    background: var(--soft-bg);
    border-color: var(--border-soft);
    box-shadow: none;
}

.why-section .card-label h4 {
    color: var(--navy);
}

.feature-card90 {
    background: var(--white);
    border-color: var(--border-soft);
}

.feature-card90 h3 {
    color: var(--navy);
}

.feature-card90 p {
    color: var(--text-muted);
}

.card-labell {
    background: var(--soft-bg);
    border-color: var(--border-soft);
    box-shadow: none;
}

.card-labell i {
    color: var(--blue-dark);
}

.card-labell h4 {
    color: var(--navy);
}

.unggulan h3 {
    border-color: var(--blue-primary);
    border-radius: 14px;
    background: linear-gradient(135deg, var(--blue-primary), #2b72e8);
    color: #ffffff;
    box-shadow: 0 0 0 1px rgba(23,105,255,.16), 0 8px 18px rgba(23,105,255,.18);
}

.feature-card90 .unggulan h3 {
    color: #ffffff;
}

.zigmax-cta {
    border-top-color: var(--border-soft);
}

.cta-content h2 { color: var(--navy); }
.cta-content p { color: var(--text-muted); }
.cta-button { box-shadow: none; }

@media (max-width: 375px) {
    .why-section .feature-card90 .atasan {
        position: relative;
        display: flex;
        width: 100%;
    }

    .why-section .feature-card90 .unggulan {
        position: absolute;
        top: 0;
        right: 0;
        margin: 0 !important;
        max-width: calc(100% - 72px);
    }

    .why-section .feature-card90 .unggulan h3 {
        display: block;
        max-width: 100%;
        padding: 7px 12px;
        font-size: 13px;
        line-height: 1.2;
        white-space: nowrap;
        box-sizing: border-box;
    }
}


/* ============================================
   HOVER STYLES (desktop/mouse only)
   Auto-wrapped: prevents sticky :hover on touch
   ============================================ */
@media (hover: hover) and (pointer: fine) {
    .nav-menu a:hover {
    color: #41ceeae8;
    opacity: 1;
}
    .navbar .nav-menu a:hover::after {
    transform: scaleX(1);
}
    .nav-button:hover {
    background:  linear-gradient(
            90deg,
            #38bdf8,
            #168cff,
            #60a5fa
        );;
}
    .why-section .feature-card:hover {

    transform:
        translateY(-8px) !important;

    border-color:
        rgba(21, 111, 150, .45);

    box-shadow:

        0 20px 50px
        rgba(3, 105, 161, .25),

        0 0 30px
        rgba(0, 202, 253, .08);
}
    .why-section .feature-card:hover::after {

    opacity: .7;
}
    .why-section
.feature-card:hover
.feature-icon1, .why-section
.feature-card:hover
.feature-icon2, .why-section
.feature-card:hover
.feature-icon3, .why-section
.feature-card:hover
.feature-icon4, .why-section
.feature-card:hover
.feature-icon5, .why-section
.feature-card:hover
.feature-icon6, .why-section
.feature-card:hover
.feature-icon7, .why-section
.feature-card:hover
.feature-icon8, .why-section
.feature-card:hover
.feature-icon9 {

    animation:
        iconPulse
        1.5s ease-in-out
        infinite;
}
    .why-section
.feature-card:hover svg {

    color:
        var(--glow-color);
}
    .how-card:hover .how-icon {

    transform: scale(1.08);

    background:
        linear-gradient(
            145deg,
            #1765a5,
            #0a3158
        );

    color: #ffffff;

    box-shadow:
        0 0 15px
        rgba(56, 189, 248, .45),

        0 0 35px
        rgba(37, 99, 235, .2);
}
    .how-card:hover {

    border-color:
        rgba(56, 189, 248, .5);

    box-shadow:

        0 25px 60px
        rgba(0, 0, 0, .4),

        0 0 25px
        rgba(56, 189, 248, .10),

        inset 0 0 25px
        rgba(37, 99, 235, .05);
}
    .choose-card:hover {

    transform:
        translateY(-8px)
        scale(1.01);

    border-color:
        rgba(56,189,248,.55);

    box-shadow:
        0 40px 100px rgba(0,0,0,.5),
        0 0 35px rgba(14,165,233,.15),
        0 0 90px rgba(37,99,235,.08),
        inset 0 1px 0 rgba(255,255,255,.08);
}
    .card-feature:hover {

    transform: translateX(7px);

    border-color:
        rgba(56,189,248,.28);

    background:
        rgba(14,60,100,.35);

    box-shadow:
        0 10px 30px rgba(0,0,0,.15),
        inset 0 0 20px rgba(56,189,248,.025);
}
    .card-feature:hover .feature-icon {

    transform:
        rotate(-5deg)
        scale(1.08);

    box-shadow:
        0 0 15px rgba(56,189,248,.25);
}
    .btn-started-now a:hover {

    transform: translateY(-3px);

    box-shadow:
        0 15px 40px rgba(14,165,233,.35),
        0 0 25px rgba(56,189,248,.15);
}
    .btn-started-now a:hover svg {

    transform:
        translate(3px,-3px);
}
    .cta-button:hover {
    transform: translateY(-4px);

    box-shadow:
        0 0 30px rgba(37,99,235,.4),
        0 10px 35px rgba(0,0,0,.3);
}
    .isi-footer a:hover {
    color: #38bdf8;
}
    .nav-menu a:hover { color: var(--blue-primary); }
    .nav-button:hover { background: linear-gradient(135deg, #2b72e8, var(--blue-primary)); color: var(--white); }
    .primary-btn:hover, .contact-button:hover { background: var(--blue-dark); }
    .secondary-btn:hover { background: var(--soft-bg); }
    .why-section .feature-card:hover, .how-card:hover, .flow-card:hover, .system-node:hover { border-color: var(--blue-primary); box-shadow: 0 14px 35px var(--blue-glow); }
    .how-card:hover .how-icon { background: rgba(23,105,255,.08); color: var(--blue-primary); }
    .footer a:hover, .isi-footer a:hover { color: var(--blue-primary); }
    .why-section .feature-card:hover, .how-card:hover {
    transform: translateY(-7px) !important;
    border-color: var(--blue-primary);
    box-shadow: 0 14px 28px rgba(23,105,255,.12);
}
    .why-section .feature-card:hover svg, .why-section .feature-card:hover .feature-icon1, .why-section .feature-card:hover .feature-icon2, .why-section .feature-card:hover .feature-icon3, .why-section .feature-card:hover .feature-icon4, .why-section .feature-card:hover .feature-icon5, .why-section .feature-card:hover .feature-icon6, .why-section .feature-card:hover .feature-icon7, .why-section .feature-card:hover .feature-icon8, .why-section .feature-card:hover .feature-icon9 {
    color: var(--blue-primary);
    animation: none;
}
    .why-section .feature-card:hover .feature-icon1, .why-section .feature-card:hover .feature-icon2, .why-section .feature-card:hover .feature-icon3, .why-section .feature-card:hover .feature-icon4, .why-section .feature-card:hover .feature-icon5, .why-section .feature-card:hover .feature-icon6, .why-section .feature-card:hover .feature-icon7, .why-section .feature-card:hover .feature-icon8, .why-section .feature-card:hover .feature-icon9 {
    transform: translateY(-3px) rotate(-3deg);
    border-color: var(--blue-primary);
}
    .cta-button:hover { box-shadow: 0 8px 18px rgba(23,105,255,.18); }
}

@media (max-width: 768px) and (hover: hover) and (pointer: fine) {
    .why-section .feature-card:hover, .how-card:hover, .choose-card:hover, .card-feature:hover {
        transform: none !important;
    }
    .nav-menu.open a:hover,
    .nav-menu.open a:active { background: var(--soft-bg) !important; color: var(--blue-primary) !important; }

    .nav-menu.open a.active {
        background: var(--soft-bg) !important;
        color: var(--blue-primary) !important;
    }

    .nav-menu.open a.active::after,
    .nav-menu.open a:hover::after {
        content: '' !important;
        display: block !important;
        border-bottom: 2px solid var(--blue-primary) !important;
        margin-top: 5px !important;
        width: 100% !important;
    }
}

@media screen and (max-width: 768px) and (hover: hover) and (pointer: fine) {
    .nav-menu.open a:hover {
        background: #0b3158 !important;

        color: #38bdf8 !important;
    }
}

@media (max-width: 768px) {
    .nav-menu.open a.active {
        background: var(--soft-bg) !important;
        color: var(--blue-primary) !important;
    }

    .nav-menu.open a.active::after,
    .nav-menu.open a:hover::after {
        content: '' !important;
        display: block !important;
        border-bottom: 2px solid var(--blue-primary) !important;
        margin-top: 5px !important;
        width: 100% !important;
    }
}

/* Match the shared mobile navbar used by the other pages. */
@media (max-width: 768px) {
    .hamburger {
        background: var(--white) !important;
        border-color: var(--blue-primary) !important;
    }

    .hamburger span {
        background: var(--blue-primary) !important;
    }

    .nav-menu.open {
        position: absolute !important;
        top: 70px !important;
        right: 15px !important;
        width: 240px !important;
        padding: 10px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 5px !important;
        background: var(--white) !important;
        border: 1px solid var(--blue-primary) !important;
        border-radius: 15px !important;
        box-shadow: 0 15px 40px rgba(0, 0, 0, .7), 0 0 25px rgba(23, 105, 255, .2) !important;
    }

    .nav-menu.open a {
        display: block !important;
        width: 100% !important;
        padding: 15px !important;
        color: var(--text-primary) !important;
        text-decoration: none !important;
        font-size: 16px !important;
        border-radius: 8px !important;
        background: transparent !important;
    }

    .nav-menu.open a::after {
        display: block !important;
    }

    .nav-menu.open a:hover,
    .nav-menu.open a:active,
    .nav-menu.open a.active {
        background: #F0F6FF !important;
        color: var(--blue-primary) !important;
    }
}