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

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

:root {
    --bg: #EEF3FF;
    --blue: #1769FF;
    --blue-light: #1769FF;
    --blue-dark: #1769FF;
}


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(23,105,255,.10),
            transparent 60%
        ),
        #EEF3FF;

    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: #1769FF;
}


.light-right {

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

    background: #1769FF;

    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;

    }
}



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

.grid {

    position: absolute;

    inset: 0;

    background-image:
        linear-gradient(
            rgba(23,105,255,.10) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(23,105,255,.10) 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: #1769FF;

    stroke-width: 1.5;

    opacity: .35;

    stroke-dasharray: 300 1000;

    filter:
        drop-shadow(0 0 5px #1769FF)
        drop-shadow(0 0 15px #1769FF);

    animation:
        mainFlow 12s linear infinite;
}


.main-line.second {

    stroke: #1769FF;

    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: #1769FF;

    box-shadow:
        0 0 6px #1769FF,
        0 0 15px #1769FF;

    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: 25px; 
    left: 0; 
    width: 100%; 
    height: 78px; 
    padding: 0 7%; 
    display: flex; 
    align-items: center; 
    justify-content: space-between;
     z-index: 9999; 
     opacity: 1; 
     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(255,255,255,.88),
        rgba(238,243,255,.88) );
         border-bottom: 1px solid rgba(23,105,255, .08); 
         backdrop-filter: blur(14px); 
         
         -webkit-backdrop-filter: blur(14px); 
        } 
 


.logo {

    font-size: 25px;

    font-weight: 800;

    letter-spacing: 3px;

    color: #1769FF;

    text-shadow:
        0 0 10px rgba(23,105,255, .5),
        0 0 25px rgba(23,105,255, .25);
}


.hamburger {
    display: none;
}


.nav-menu {

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


.nav-menu a {

    color: #64748B;

    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 #1769FF ;
    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(23,105,255, .6);

    border-radius: 30px;

    background: rgba(23,105,255,.08);

    color: #33415E;

    cursor: pointer;
    transition: .3s;
}

/* main menu */
.hero {

    min-height: 100vh;

    display: flex;

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

    text-align: center;

    padding: 120px 20px 50px;

    opacity: 1;

    transform: translateY(30px);

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





.hero-content {

    max-width: 850px;
}


.eyebrow {

    color: #1769FF;

    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,
            #1769FF,
            #1769FF,
            #4D8DFF
        );

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

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


.hero p {

    max-width: 600px;

    margin: 25px auto 35px;

    color: #64748B;

    font-size: 17px;

    line-height: 1.7;
}

.scroll-down {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;

    color: #64748B;

    font-size: 12px;
    letter-spacing: 1.5px;

    cursor: pointer;
}

.scroll-down i {
    width: 22px;
    height: 22px;

    color: #1769FF;

    animation: moveDown 1.6s ease-in-out infinite;
}

@keyframes moveDown {
    0%,
    100% {
        transform: translateY(0);
        opacity: 0.5;
    }

    50% {
        transform: translateY(8px);
        opacity: 1;
    }
}

/* end main menu */

/* section pendukung */
/* =========================================
   ZIGMAX STATS
========================================= */

.zigmax-stats {

    position: relative;

    width: 100%;

    padding: 70px 7%;

    overflow: hidden;

}


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

.stats-card {

    position: relative;

    width: 100%;

    max-width: 1200px;

    min-height: 135px;

    margin: auto;

    padding: 25px 45px;

    display: grid;

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

    align-items: center;

    border-radius: 22px;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.96),
            rgba(243,246,255,.94),
            rgba(255,255,255,.96)
        );

    border:
        1px solid rgba(23,105,255, .18);

    box-shadow:
        0 20px 50px rgba(0, 0, 0, .30),
        inset 0 1px 0 rgba(255,255,255,.05);

}


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

.stats-card::before {

    content: "";

    position: absolute;

    width: 350px;
    height: 350px;

    left: 25%;

    top: -180px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(23,105,255,.10),
            transparent 68%
        );

    filter: blur(25px);

    animation:
        statsOrb 10s ease-in-out infinite alternate;

    pointer-events: none;
}


@keyframes statsOrb {

    0% {
        transform:
            translateX(-120px)
            scale(.9);
    }

    100% {
        transform:
            translateX(180px)
            scale(1.15);
    }

}


/* =========================================
   LIGHT FLOW
========================================= */

.stats-card::after {

    content: "";

    position: absolute;

    top: 0;

    left: -300px;

    width: 250px;

    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(23,105,255,.08),
            transparent
        );

    transform: skewX(-20deg);

    animation:
        statsLight 9s ease-in-out infinite;

    pointer-events: none;
}


@keyframes statsLight {

    0% {
        left: -300px;
    }

    55% {
        left: 110%;
    }

    100% {
        left: 110%;
    }

}


/* =========================================
   STAT ITEM
========================================= */

.stat-item {

    position: relative;

    z-index: 2;

    min-height: 75px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 17px;
}


/* =========================================
   PEMISAH
========================================= */

.stat-item:not(:last-child)::after {

    content: "";

    position: absolute;

    right: 0;

    top: 15%;

    width: 1px;

    height: 70%;

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(96, 165, 250, .25),
            transparent
        );
}


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

.stat-icon {

    width: 56px;
    height: 56px;

    display: flex;

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

    flex-shrink: 0;

    border-radius: 15px;

    color: #1769FF;

    background:
        linear-gradient(
            145deg,
            rgba(221,233,255,.85),
            rgba(221,233,255,.70)
        );

    border:
        1px solid rgba(96, 165, 250, .18);

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

    transition:
        .4s ease;
}


.stat-icon svg {

    width: 27px;
    height: 27px;

    stroke-width: 1.7;
}


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

.stat-info h3 {

    margin: 0;

    font-size: 15px;

    line-height: 1;

    font-weight: 750;

    letter-spacing: -.5px;

    color: #33415E;
}


.stat-info .plus {

    margin-left: 2px;

    font-size: 19px;

    color: #4D8DFF;
}


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

.stat-info p {

    margin: 7px 0 0;

    font-size: 13px;

    font-weight: 500;

    color:
        rgba(191, 219, 254, .55);

    letter-spacing: .15px;
}


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

@media (max-width: 786px) {

    .stats-card  {

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

        padding:
            25px 20px;

    }

    .stat-item  {

        gap: 10px;

    }

    .stat-icon  {

        width: 48px;
        height: 48px;

    }

    .stat-icon svg  {

        width: 23px;
        height: 23px;

    }

    .stat-info h3  {

        font-size: 24px;

    }

    .stat-info p  {

        font-size: 11px;

    }

}

@media (max-width: 600px) {

    .zigmax-stats  {

        padding:
            50px 20px;

    }

    .stats-card  {

        grid-template-columns: 1fr;

        gap: 5px;

        padding: 20px;

    }

    .stat-item  {

        justify-content: flex-start;

        padding: 15px 5px;

    }

    .stat-item:not(:last-child)::after  {

        display: none;

    }

}

@media (max-width: 600px) {

    .zigmax-stats  {

        padding:
            50px 20px;

    }

    .stats-card  {

        grid-template-columns: 1fr;

        gap: 5px;

        padding: 20px;

    }

    .stat-item  {

        justify-content: flex-start;

        padding: 15px 5px;

    }

    .stat-item:not(:last-child)::after  {

        display: none;

    }

}
/* section pendukung end */




/* section gambar */
/* =========================================
   ZIGMAX VISUAL SECTION
========================================= */

.zigmax-visual-section {

    position: relative;

    width: 100%;

    min-height: 650px;

    padding: 100px 6%;

    overflow: hidden;

    isolation: isolate;

    background:
        radial-gradient(
            circle at 50% 50%,
            rgba(23,105,255,.08),
            transparent 55%
        ),
        #FFFFFF;
}


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

.visual-bg {

    position: absolute;

    inset: 0;

    z-index: -1;

    overflow: hidden;
}


.visual-orb {

    position: absolute;

    border-radius: 50%;

    filter: blur(80px);

    pointer-events: none;

    opacity: .12;
}


.orb-left {

    width: 300px;
    height: 300px;

    left: -150px;
    top: 30%;

    background: #1769FF;

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


.orb-right {

    width: 280px;
    height: 280px;

    right: -140px;
    bottom: 10%;

    background: #1769FF;

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


@keyframes orbFloatLeft {

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

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

}


@keyframes orbFloatRight {

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

    to {
        transform:
            translate(-120px, 70px);
    }

}


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

.visual-container {

    position: relative;

    max-width: 1350px;

    min-height: 450px;

    margin: auto;

    display: grid;

    grid-template-columns:
        1fr 1.25fr 1fr;

    align-items: center;

    gap: 45px;
}


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

.visual-image {

    position: relative;

    width: 100%;

    max-width: 350px;

    justify-self: center;

    transition:
        transform .5s ease;
}


.visual-image img {

    position: relative;

    width: 100%;

    display: block;

    border-radius: 22px;

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

    box-shadow:
        0 25px 70px rgba(23,47,88,.12),
        0 0 35px rgba(14,165,233,.08);

    z-index: 2;
}


/* =========================================
   IMAGE GLOW
========================================= */

.image-glow {

    position: absolute;

    inset: 15%;

    background:
        #1769FF;

    filter: blur(70px);

    opacity: .12;

    z-index: 0;
}


/* =========================================
   GERAKAN GAMBAR
========================================= */

.image-left {

    animation:
        imageLeftFloat 6s ease-in-out infinite;
}


.image-right {

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


@keyframes imageLeftFloat {

    0%, 100% {

        transform:
            translateY(0)
            rotate(-2deg);

    }

    50% {

        transform:
            translateY(-18px)
            rotate(2deg);

    }

}


@keyframes imageRightFloat {

    0%, 100% {

        transform:
            translateY(0)
            rotate(2deg);

    }

    50% {

        transform:
            translateY(18px)
            rotate(-2deg);

    }

}


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

.visual-content {

    text-align: center;

    max-width: 520px;

    margin: auto;

    z-index: 5;
}


.visual-label {

    display: inline-block;

    margin-bottom: 18px;

    padding: 7px 14px;

    border-radius: 999px;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.5px;

    color: #4D8DFF;

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

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


.visual-content h2 {

    margin: 0;

    font-size: clamp(30px, 4vw, 48px);

    line-height: 1.1;

    letter-spacing: -1.5px;

    color: #33415E;
}


.visual-content h2 span {

    display: block;

    background:
        linear-gradient(
            90deg,
            #4D8DFF,
            #1769FF,
            #6B9FFF
        );

    -webkit-background-clip: text;

    background-clip: text;

    color: transparent;
}


.visual-content > p {

    max-width: 470px;

    margin: 22px auto 25px;

    font-size: 14px;

    line-height: 1.8;

    color:
        rgba(23,105,255,.18);
}


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

.visual-features {

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 10px;
}


.visual-features div {

    display: flex;

    align-items: center;

    gap: 7px;

    padding: 8px 12px;

    border-radius: 999px;

    font-size: 11px;

    color:
        rgba(219,234,254,.70);

    background:
        rgba(23,105,255,.08);

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

    transition:
        .3s ease;
}


.visual-features svg {

    width: 14px;
    height: 14px;

    color: #4D8DFF;
}

.image-left {
    animation: imageLeftFloat 6s ease-in-out infinite;
}

.image-right {
    animation: imageRightFloat 7s ease-in-out infinite;
}


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

@media (max-width: 950px) {

    .visual-container  {

        grid-template-columns: 1fr;

        gap: 45px;
    }


    .visual-content  {

        order: 1;
    }


    .image-left  {

        order: 2;
    }


    .image-right  {

        order: 3;
    }


    .visual-image  {

        max-width: 500px;
    }

}

@media (max-width: 768px) {

    .zigmax-visual-section  {

        padding:
            80px 20px;
    }


    .visual-content h2  {

        font-size: 32px;
    }

    .visual-image{
        display: flex;
        flex-direction: column;
    }

    .visual-content > p  {

        font-size: 13px;
    }


    .visual-features  {

        flex-direction: column;

        align-items: center;
    }


    .visual-image  {

        max-width: 90%;
    }

}

@media (max-width: 600px) {

    .zigmax-visual-section  {

        padding:
            80px 20px;
    }


    .visual-content h2  {

        font-size: 32px;
    }


    .visual-content > p  {

        font-size: 13px;
    }


    .visual-features  {

        flex-direction: column;

        align-items: center;
    }


    .visual-image  {

        max-width: 90%;
    }

}

@media (max-width: 400px) {

    .zigmax-visual-section  {

        padding:
            80px 20px;
    }


    .visual-content h2  {

        font-size: 32px;
    }


    .visual-content > p  {

        font-size: 13px;
    }


    .visual-features  {

        flex-direction: column;

        align-items: center;
    }


    .visual-image  {

        max-width: 90%;
    }

}
/* section gambar end */


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

.why-zigmax {

    position: relative;

    min-height: 820px;

    padding: 120px 7%;

    display: flex;

    align-items: center;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 75% 45%,
            rgba(14, 116, 214, .22),
            transparent 34%
        ),

        radial-gradient(
            circle at 20% 80%,
            rgba(23,105,255, .14),
            transparent 32%
        ),

        linear-gradient(
            135deg,
            #E8F0FF 0%,
            #DDE9FF 45%,
            #E7F0FF 100%
        );

    border-top:
        1px solid
        rgba(23,105,255, .10);

    border-bottom:
        1px solid
        rgba(23,105,255, .10);
}


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

.why-glow {

    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    filter: blur(50px);
}


.glow-1 {

    width: 450px;
    height: 450px;

    top: -180px;
    right: -100px;

    background:
        radial-gradient(
            circle,
            rgba(14, 165, 233, .18),
            transparent 70%
        );

    animation:
        bgFloatOne 9s ease-in-out infinite;
}


.glow-2 {

    width: 400px;
    height: 400px;

    bottom: -180px;
    left: -120px;

    background:
        radial-gradient(
            circle,
            rgba(23,105,255, .16),
            transparent 70%
        );

    animation:
        bgFloatTwo 11s ease-in-out infinite;
}


@keyframes bgFloatOne {

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

    50% {
        transform:
            translate(-30px, 25px)
            scale(1.1);
    }

}


@keyframes bgFloatTwo {

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

    50% {
        transform:
            translate(30px, -20px)
            scale(1.08);
    }

}


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

.why-grid {

    position: absolute;

    inset: 0;

    opacity: .15;

    background-image:
        linear-gradient(
            rgba(23,105,255, .035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(23,105,255, .035) 1px,
            transparent 1px
        );

    background-size:
        80px 80px;

    mask-image:
        linear-gradient(
            to bottom,
            transparent,
            black 25%,
            black 75%,
            transparent
        );

    pointer-events: none;
}

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

.zigmax-flow {

    position: relative;

    width: 100%;

    height: 850px;

    overflow: visible;

}


/* =========================================
   SVG
========================================= */

.about-flow {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    overflow: visible;

}


/* =========================================
   MAIN LINE
========================================= */

.flow-main {

    fill: none;

    stroke: #1769FF;

    stroke-width: 3;

    stroke-linecap: round;

    stroke-linejoin: round;

    stroke-dasharray: 10 16;

    filter:
        drop-shadow(0 0 5px rgba(23,105,255, .8));

    animation:
        flowDash 3s linear infinite;

}


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

.flow-glow {

    fill: none;

    stroke: #1769FF;

    stroke-width: 12;

    stroke-linecap: round;

    opacity: .22;

    filter: blur(8px);

}


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

@keyframes flowDash {

    to {
        stroke-dashoffset: -100;
    }

}


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

.flow-card {

    position: absolute;

    width: 205px;

    height: 90px;

    display: flex;

    align-items: center;

    gap: 14px;

    padding: 16px 18px;

    border-radius: 20px;

    background:
        linear-gradient(
            145deg,
            rgba(12, 65, 120, .78),
            rgba(4, 30, 62, .9)
        );

    border: 1px solid rgba(45, 163, 255, .3);

    backdrop-filter: blur(14px);

    box-shadow:
        0 15px 35px rgba(0, 0, 0, .25),
        0 0 20px rgba(0, 120, 255, .05);

    z-index: 5;

    transition:
        .35s ease;

}


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

.flow-icon {

    width: 45px;

    height: 45px;

    flex-shrink: 0;

    display: grid;

    place-items: center;

    border-radius: 13px;

    color: #1769FF;

    font-size: 21px;

    background:
        linear-gradient(
            145deg,
            rgba(20, 120, 220, .25),
            rgba(10, 60, 110, .35)
        );

    border: 1px solid rgba(23,105,255, .22);

}


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

.flow-card h3 {

    margin: 0;

    color: #33415E;

    font-size: 14px;

    letter-spacing: 1px;

}


.flow-card p {

    margin: 5px 0 0;

    color: #64748B;

    font-size: 12px;

}


/* =========================================
   SMALL GLOW DOT
========================================= */

.flow-dot {

    position: absolute;

    top: 13px;

    right: 14px;

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background: #1769FF;

    box-shadow:
        0 0 8px #1769FF,
        0 0 18px rgba(23,105,255, .8);

    animation: dotPulse 2s ease-in-out infinite;

}


@keyframes dotPulse {

    0%,
    100% {
        transform: scale(.8);
        opacity: .5;
    }

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

}


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

/* ASSETS - ATAS */

.card-1 {

    top: -20px;
    bottom: 10px;

    right: 140px;

    transform: translateX(-1%);

}


/* DATA - KIRI */

.card-2 {

    top: 205px;

    left: 0;

}


/* TRACKING - KANAN */

.card-3 {

    top: 380px;

    right: 0;

}


/* STATUS - KIRI */

.card-4 {

    top: 555px;

    left: 5px;

}


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

.zigmax-card {

    position: absolute;

    top: 820px;

    left: 50%;

    transform: translateX(-50%);

    width: 230px;

    height: 120px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    border-radius: 27px;

    background:
        linear-gradient(
            145deg,
            rgba(12, 75, 140, .8),
            rgba(4, 30, 62, .95)
        );

    border: 1px solid rgba(30, 164, 255, .45);

    box-shadow:
        0 0 30px rgba(0, 130, 255, .12),
        inset 0 0 30px rgba(0, 120, 255, .08);

    z-index: 6;

}


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

.zigmax-icon {

    width: 38px;

    height: 38px;

    display: grid;

    place-items: center;

    margin-bottom: 7px;

    border-radius: 11px;

    background:
        linear-gradient(
            145deg,
            #1769FF,
            #4D8DFF
        );

    color: white;

    box-shadow:
        0 0 20px rgba(0, 145, 255, .35);

}


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

.zigmax-card h3 {

    margin: 0;

    font-size: 21px;

    letter-spacing: 3px;

    color: white;

}


.zigmax-card h3 span {

    color: #1769FF;

}


.zigmax-card p {

    margin: 5px 0 0;

    color: #64748B;

    font-size: 8px;

    letter-spacing: 4px;

}


/* =========================================
   MOVING LIGHT
========================================= */

.flow-light {

    position: absolute;

    width: 9px;

    height: 9px;

    border-radius: 50%;

    background: #DCE8FF;

    box-shadow:
        0 0 8px #1769FF,
        0 0 18px #1769FF,
        0 0 35px rgba(23,105,255, .9);

    pointer-events: none;

    z-index: 4;

}


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

@media (max-width: 700px) {

    .zigmax-flow  {

        height: 760px;
        display: block;

    }


    .flow-card  {

        width: 170px;

        height: 78px;

        padding: 12px;

    }


    .flow-icon  {

        width: 38px;

        height: 38px;

    }


    .card-1  {

        top: 0;

        right: 90px;

        left: auto;

        transform: none;

    }


    .card-2  {

        top: 190px;

        left: 0;

    }


    .card-3  {

        top: 350px;

        right: 0;

    }


    .card-4  {

        top: 500px;

        left: 0;

    }


    .zigmax-card  {

        top: 730px;

        width: 200px;
        left: 240px;
        height: 105px;
        margin-left: -1.5rem;
    }

}


@media (max-width: 700px) {

    .zigmax-flow  {

        height: 760px;
        display: block;

    }


    .flow-card  {

        width: 170px;

        height: 78px;

        padding: 12px;

    }


    .flow-icon  {

        width: 38px;

        height: 38px;

    }


    .card-1  {

        top: 0;

        right: 90px;

        left: auto;

        transform: none;

    }


    .card-2  {

        top: 190px;

        left: 0;

    }


    .card-3  {

        top: 350px;

        right: 0;

    }


    .card-4  {

        top: 500px;

        left: 0;

    }


    .zigmax-card  {

        top: 730px;

        width: 200px;
        left: 240px;
        height: 105px;
        margin-left: -1.5rem;
    }

}


@media (max-width: 700px) {

    .zigmax-flow  {

        height: 760px;
        display: block;

    }


    .flow-card  {

        width: 170px;

        height: 78px;

        padding: 12px;

    }


    .flow-icon  {

        width: 38px;

        height: 38px;

    }


    .card-1  {

        top: 0;

        right: 90px;

        left: auto;

        transform: none;

    }


    .card-2  {

        top: 190px;

        left: 0;

    }


    .card-3  {

        top: 350px;

        right: 0;

    }


    .card-4  {

        top: 500px;

        left: 0;

    }


    .zigmax-card  {

        top: 730px;

        width: 200px;
        left: 240px;
        height: 105px;
        margin-left: -1.5rem;
    }

}


@media (max-width: 400px) {
    .card-1 {
        top: 2px;
        left: 150px;
        right: auto;
        transform: none;
    }

    .card-2 {
        top: 190px;
        left: 0;
    }

    .card-3 {
        top: 350px;
        right: 0;
    }

    .card-4 {
        top: 500px;
        left: 0;
    }

    .zigmax-card {
        top: 730px;
        width: 200px;
        height: 105px;

        /* tengah layar 400px */
        left: 50%;
        transform: translateX(-50%);

        margin-left: 0;
    }
}
/* =========================================
   CONTAINER
========================================= */

.why-container {

    position: relative;

    z-index: 5;

    width: 100%;

    max-width: 1280px;

    margin: auto;

    display: grid;

    grid-template-columns:
        .9fr 1.1fr;

    align-items: center;

    gap: 70px;
}


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

.why-content {

    opacity: 0;

    transform:
        translateX(-50px);

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


.why-zigmax.show .why-content {

    opacity: 1;

    transform:
        translateX(0);
}


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

.why-eyebrow {

    display: inline-flex;

    padding: 8px 15px;

    margin-bottom: 24px;

    border-radius: 50px;

    border:
        1px solid
        rgba(23,105,255, .25);

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

    color: #1769FF;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 2px;

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


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

.why-content h2 {

    max-width: 620px;

    margin: 0 0 28px;

    color: #33415E;

    font-size:
        clamp(40px, 4.3vw, 64px);

    line-height: 1.05;

    letter-spacing: -2.5px;

    font-weight: 700;
}


.why-content h2 span {

    display: block;

    background:
        linear-gradient(
            90deg,
            #4D8DFF,
            #1769FF,
            #1769FF,
            #4D8DFF
        );

    background-size:
        250% 100%;

    -webkit-background-clip: text;

    background-clip: text;

    color: transparent;

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


@keyframes textFlow {

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

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }

}


/* =========================================
   PARAGRAPH
========================================= */

.why-content p {

    max-width: 590px;

    margin: 0 0 16px;

    color: #64748B;

    font-size: 15px;

    line-height: 1.85;
}


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

.why-line {

    width: 75px;

    height: 2px;

    margin: 30px 0 22px;

    background:
        linear-gradient(
            90deg,
            #1769FF,
            transparent
        );

    box-shadow:
        0 0 15px
        rgba(23,105,255, .6);
}


/* =========================================
   HIGHLIGHT
========================================= */

.why-highlight {

    display: flex;

    align-items: center;

    gap: 14px;

    width: fit-content;

    padding: 13px 18px;

    border-radius: 15px;

    background:
        rgba(8, 48, 94, .48);

    border:
        1px solid
        rgba(23,105,255, .16);

    box-shadow:
        inset 0 0 25px
        rgba(23,105,255, .05);

    transition:
        .35s ease;
}


.highlight-icon {

    width: 40px;
    height: 40px;

    display: flex;

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

    border-radius: 11px;

    color: #1769FF;

    background:
        linear-gradient(
            135deg,
            rgba(23,105,255, .35),
            rgba(14, 165, 233, .12)
        );

    border:
        1px solid
        rgba(23,105,255, .22);
}


.highlight-icon svg {

    width: 19px;
}


.highlight-text strong {

    display: block;

    color: #DDE7F7;

    font-size: 13px;
}


.highlight-text span {

    display: block;

    margin-top: 4px;

    color: #64748B;

    font-size: 11px;
}


/* =========================================
   ASSET SYSTEM
========================================= */

.asset-system {

    position: relative;

    width: min(680px, 100%);

    aspect-ratio: 680 / 650;

    margin: auto;

    opacity: 0;

    transform:
        translateX(50px)
        scale(.95);

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


.why-zigmax.show .asset-system {

    opacity: 1;

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


/* =========================================
   SYSTEM GLOW
========================================= */

.system-glow {

    position: absolute;

    width: 390px;
    height: 390px;

    left: 50%;
    top: 55%;

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

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(23,105,255, .20),
            rgba(14, 165, 233, .08) 40%,
            transparent 72%
        );

    filter: blur(18px);

    animation:
        systemPulse 5s ease-in-out infinite;

    pointer-events: none;
}


@keyframes systemPulse {

    0%, 100% {

        opacity: .55;

        transform:
            translate(-50%, -50%)
            scale(.9);
    }

    50% {

        opacity: 1;

        transform:
            translate(-50%, -50%)
            scale(1.1);
    }

}


/* =========================================
   SVG
========================================= */

.system-lines {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    z-index: 2;

    overflow: visible;

    pointer-events: none;
}


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

.flow-line {

    fill: none;

    stroke:
        url(#blueFlow);

    stroke-width: 2.4;

    stroke-linecap: round;

    stroke-dasharray:
        8 11;

    opacity: .68;

    filter:
        url(#lineGlow);

    animation:
        flowMove 2.8s linear infinite;
}


.main-flow {

    stroke-width: 3;

    opacity: .95;

    animation-duration: 1.8s;
}


@keyframes flowMove {

    from {
        stroke-dashoffset: 0;
    }

    to {
        stroke-dashoffset: -80;
    }

}


/* =========================================
   FLOW PARTICLE
========================================= */

.flow-particle {

    fill: #1769FF;

    filter:
        drop-shadow(
            0 0 7px
            rgba(23,105,255, .95)
        );

    opacity: .95;
}


.main-particle {

    fill: #4D8DFF;

    filter:
        drop-shadow(
            0 0 10px
            rgba(96, 165, 250, 1)
        );
}


/* =========================================
   NODE
========================================= */

.system-node {

    position: absolute;

    width: 180px;

    min-height: 82px;

    padding: 15px 17px;

    box-sizing: border-box;

    display: flex;

    align-items: center;

    gap: 12px;

    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            rgba(8, 48, 94, .96),
            rgba(5, 29, 62, .98)
        );

    border:
        1px solid
        rgba(23,105,255, .22);

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

        0 0 30px
        rgba(23,105,255, .10);

    backdrop-filter:
        blur(15px);

    z-index: 5;

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


/* =========================================
   ASSETS
========================================= */

.node-assets {

    left: 50%;

    top: 0;

    transform:
        translateX(-50%);
}


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

.node-data {

    left: 0;

    top: 190px;
}


/* =========================================
   TRACKING
========================================= */

.node-tracking {

    right: 0;

    top: 190px;
}


/* =========================================
   STATUS
========================================= */

.node-status {

    left: 50%;

    top: 385px;

    transform:
        translateX(-50%);
}


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

.node-icon {

    width: 42px;
    height: 42px;

    flex-shrink: 0;

    display: flex;

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

    border-radius: 12px;

    color: #1769FF;

    background:
        linear-gradient(
            135deg,
            rgba(23,105,255, .32),
            rgba(14, 165, 233, .10)
        );

    border:
        1px solid
        rgba(23,105,255, .20);

    box-shadow:
        inset 0 0 18px
        rgba(23,105,255, .05);
}


.node-icon svg {

    width: 19px;
    height: 19px;
}


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

.node-text strong {

    display: block;

    color: #DDE7F7;

    font-size: 12px;

    letter-spacing: .8px;
}


.node-text span {

    display: block;

    margin-top: 5px;

    color: #64748B;

    font-size: 10px;
}


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

.node-dot {

    position: absolute;

    top: 13px;
    right: 13px;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #1769FF;

    box-shadow:
        0 0 12px
        rgba(23,105,255, .9);

    animation:
        dotPulse 2s ease-in-out infinite;
}


@keyframes dotPulse {

    0%, 100% {

        opacity: .35;

        transform:
            scale(.8);
    }

    50% {

        opacity: 1;

        transform:
            scale(1.25);
    }

}


/* =========================================
   ZIGMAX CORE
========================================= */

.zigmax-core {

    position: absolute;

    left: 50%;

    bottom: 0;

    width: 220px;
    height: 140px;

    transform:
        translateX(-50%);

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    border-radius: 30px;

    background:
        linear-gradient(
            145deg,
            rgba(8, 58, 113, .98),
            rgba(4, 28, 61, .99)
        );

    border:
        1px solid
        rgba(23,105,255, .45);

    box-shadow:
        0 25px 70px
        rgba(0, 0, 0, .38),

        0 0 55px
        rgba(23,105,255, .22);

    overflow: hidden;

    z-index: 7;

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


@keyframes coreFloat {

    0%, 100% {

        transform:
            translateX(-50%)
            translateY(0);
    }

    50% {

        transform:
            translateX(-50%)
            translateY(-7px);
    }

}


/* =========================================
   CORE SCAN
========================================= */

.zigmax-core::before {

    content: "";

    position: absolute;

    top: 0;

    left: -100%;

    width: 70%;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #1769FF,
            transparent
        );

    box-shadow:
        0 0 12px
        rgba(23,105,255, .8);

    animation:
        coreScan 3s linear infinite;
}


@keyframes coreScan {

    from {
        left: -100%;
    }

    to {
        left: 150%;
    }

}


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

.core-icon {

    position: relative;

    z-index: 4;

    width: 50px;
    height: 50px;

    margin-bottom: 9px;

    display: flex;

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

    border-radius: 14px;

    color: #33415E;

    background:
        linear-gradient(
            135deg,
            #1769FF,
            #1769FF
        );

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

    animation:
        iconPulse 3s ease-in-out infinite;
}


.core-icon svg {

    width: 23px;
    height: 23px;
}


@keyframes iconPulse {

    0%, 100% {

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

    50% {

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

}


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

.zigmax-core strong {

    position: relative;

    z-index: 4;

    color: #33415E;

    font-size: 17px;

    letter-spacing: 2.5px;
}


.zigmax-core > span {

    position: relative;

    z-index: 4;

    margin-top: 5px;

    color: #64748B;

    font-size: 9px;

    letter-spacing: 2.5px;
}


/* =========================================
   CORE RINGS
========================================= */

.core-ring {

    position: absolute;

    left: 50%;
    top: 50%;

    width: 195px;
    height: 195px;

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

    border-radius: 50%;

    border:
        1px solid
        rgba(23,105,255, .09);

    animation:
        ringRotate 12s linear infinite;

    pointer-events: none;
}


.ring-two {

    width: 245px;
    height: 245px;

    border-color:
        rgba(23,105,255, .055);

    animation:
        ringRotate 18s linear infinite reverse;
}


@keyframes ringRotate {

    from {

        transform:
            translate(-50%, -50%)
            rotate(0deg);
    }

    to {

        transform:
            translate(-50%, -50%)
            rotate(360deg);
    }

}


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

@media (max-width: 1050px) {

    .why-container  {

        grid-template-columns: 1fr;

        gap: 80px;
    }

    .why-content  {

        text-align: center;
    }

    .why-content h2,
    .why-content p  {

        margin-left: auto;
        margin-right: auto;
    }

    .why-line  {

        margin-left: auto;
        margin-right: auto;
    }

    .why-highlight  {

        margin-left: auto;
        margin-right: auto;
    }

}

@media (min-width: 701px) and (max-width: 1000px) {
    .why-zigmax {
        min-height: auto;
        padding: 90px 5% 110px;
    }

    .why-container {
        max-width: 820px;
        gap: 46px;
    }

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

    .why-content h2,
    .why-content p {
        margin-left: auto;
        margin-right: auto;
    }

    .why-line,
    .why-highlight {
        margin-left: auto;
        margin-right: auto;
    }

    .zigmax-flow {
        width: min(100%, 760px);
        height: 710px;
        margin: 0 auto;
    }

    .flow-card {
        width: 180px;
        height: 78px;
        padding: 12px 14px;
        gap: 10px;
    }

    .flow-icon {
        width: 38px;
        height: 38px;
        font-size: 18px;
    }

    .flow-card h3 {
        font-size: 13px;
    }

    .flow-card p {
        font-size: 11px;
    }

    .card-1 {
        top: 0;
        right: 250px;
    }

    .card-2 {
        top: 170px;
        left: 21px;
    }

    .card-3 {
        top: 330px;
        right: 30px;
    }

    .card-4 {
        top: 470px;
        left: 40px;
    }

    .zigmax-card {
        top: 680px;
        width: 200px;
        height: 105px;
    }
}

@media (min-width: 1001px) and (max-width: 1100px) {
    .zigmax-flow {
        width: min(100%, 820px);
        height: 760px;
        margin: 0 auto;
    }

    .flow-card {
        width: 185px;
        height: 82px;
        padding: 13px 14px;
        gap: 10px;
    }

    .flow-icon {
        width: 40px;
        height: 40px;
        font-size: 19px;
    }

    .flow-card h3 {
        font-size: 13px;
    }

    .flow-card p {
        font-size: 11px;
    }

    .card-1 {
        top: -10px;
        right: 250px;
    }

    .card-2 {
        top: 185px;
        left: 50px;
    }

    .card-3 {
        top: 350px;
        right: 50px;
    }

    .card-4 {
        top: 505px;
        left: 60px;
    }

    .zigmax-card {
        top: 730px;
        width: 210px;
        height: 110px;
    }
}


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

@media (max-width: 650px) {

    .why-zigmax  {

        min-height: auto;

        padding:
            90px 18px 100px;
    }

    .why-content h2  {

        font-size: 39px;

        letter-spacing: -1.8px;
    }

    .why-content p  {

        font-size: 14px;

        line-height: 1.8;
    }

    .asset-system  {

        width: 100%;

        transform:
            scale(.86);
    }

    .why-zigmax.show .asset-system  {

        transform:
            scale(.86);
    }

    .system-node  {

        width: 160px;

        min-height: 76px;
    }

    .zigmax-core  {

        width: 200px;

        height: 130px;
    }
}


@media (max-width: 480px) {

    .asset-system  {

        width: 680px;

        max-width: none;

        left: 50%;

        transform:
            translateX(-50%)
            scale(.62);

        transform-origin:
            center center;

        margin-top: -40px;

        margin-bottom: -50px;
    }

    .why-zigmax.show .asset-system  {

        transform:
            translateX(-50%)
            scale(.62);
    }

}

@media (max-width: 400px) {

    .asset-system  {

        width: 680px;

        max-width: none;

        left: 50%;

        transform:
            translateX(-50%)
            scale(.62);

        transform-origin:
            center center;

        margin-top: -40px;

        margin-bottom: -50px;
    }

    .why-zigmax.show .asset-system  {

        transform:
            translateX(-50%)
            scale(.62);
    }

}

/* =========================================
   FROM PHYSICAL TO DIGITAL
========================================= */
.zig-connect-section {
    position: relative;
    min-height: 900px;
    padding: 130px 7%;

    display: flex;
    align-items: center;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(8, 35, 78, 0.22),
            transparent 45%
        ),
        linear-gradient(
            135deg,
            #F3F6FF 0%,
            #FFFFFF 45%,
            #F3F6FF 100%
        );

    border-top: 1px solid rgba(23,105,255, 0.04);
    border-bottom: 1px solid rgba(23,105,255, 0.04);
}


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

.zig-connect-bg-glow {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    filter: blur(90px);

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

.zig-connect-bg-glow-1 {
    width: 420px;
    height: 420px;

    left: -180px;
    top: 20%;

    background: rgba(30, 64, 175, .12);
}

.zig-connect-bg-glow-2 {
    width: 350px;
    height: 350px;

    right: -120px;
    bottom: 10%;

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

    animation-delay: 2s;
}

@keyframes zigBackgroundGlow {

    0% {
        transform: scale(.9);
        opacity: .45;
    }

    100% {
        transform: scale(1.15);
        opacity: .9;
    }

}


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

.zig-connect-container {

    position: relative;

    z-index: 2;

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

    margin: auto;

    display: grid;

    grid-template-columns:
        1.05fr
        .95fr;

    align-items: center;

    gap: 90px;

}


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

.zig-connect-visual {

    position: relative;

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

    height: 650px;

    margin: auto;

    opacity: 0;

    transform: translateX(-60px);

    animation:
        zigVisualReveal 1.2s
        cubic-bezier(.16,1,.3,1)
        .2s forwards;

}

@keyframes zigVisualReveal {

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

}


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

.zig-connect-visual-grid {

    position: absolute;

    inset: 30px;

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

    background-size: 45px 45px;

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

    opacity: .7;

}


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

.zig-connect-orbit {

    position: absolute;

    left: 50%;
    top: 50%;

    border-radius: 50%;

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

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

}

.orbit-one {

    width: 540px;
    height: 540px;

}

.orbit-two {

    width: 400px;
    height: 400px;

    border-style: dashed;

    animation:
        zigOrbitRotate
        20s
        linear
        infinite;

}

@keyframes zigOrbitRotate {

    from {
        transform:
            translate(-50%,-50%)
            rotate(0deg);
    }

    to {
        transform:
            translate(-50%,-50%)
            rotate(360deg);
    }

}


/* =========================================
   PHYSICAL ASSET
========================================= */

.zig-connect-asset-card {

    position: absolute;

    top: 20px;
    left: 50%;

    transform:
        translateX(-50%);

    width: 250px;
    height: 95px;

    padding: 16px;

    display: flex;
    align-items: center;

    gap: 14px;

    border-radius: 20px;

    border:
        1px solid
        rgba(96,165,250,.25);

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.94),
            rgba(255,255,255,.96)
        );

    box-shadow:
        0 25px 60px rgba(0,0,0,.35),
        inset 0 1px rgba(255,255,255,.05);

    backdrop-filter: blur(18px);

    z-index: 5;

    animation:
        zigFloat
        5s
        ease-in-out
        infinite;

}

@keyframes zigFloat {

    0%,100% {
        transform:
            translateX(-50%)
            translateY(0);
    }

    50% {
        transform:
            translateX(-50%)
            translateY(-8px);
    }

}


.zig-connect-asset-icon {

    width: 50px;
    height: 50px;

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

    border-radius: 14px;

    background:
        linear-gradient(
            145deg,
            #1769FF,
            #DDE9FF
        );

    color: #4D8DFF;

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

}

.zig-connect-asset-icon svg {
    width: 24px;
}


.zig-connect-asset-info span {

    display: block;

    font-size: 8px;

    letter-spacing: 2px;

    color: #64748B;

}

.zig-connect-asset-info strong {

    display: block;

    margin-top: 4px;

    font-size: 14px;

    color: #33415E;

}

.zig-connect-asset-info small {

    display: block;

    margin-top: 3px;

    font-size: 9px;

    color: #64748B;

}


/* =========================================
   LIVE
========================================= */

.zig-connect-live {

    position: absolute;

    top: 12px;
    right: 14px;

    display: flex;
    align-items: center;

    gap: 5px;

    font-size: 7px;

    letter-spacing: 1px;

    color: #4D8DFF;

}

.zig-connect-live span {

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #1769FF;

    box-shadow:
        0 0 10px #1769FF;

    animation:
        zigPulse
        1.5s
        ease-in-out
        infinite;

}

@keyframes zigPulse {

    50% {
        opacity: .25;
        transform: scale(.6);
    }

}


/* =========================================
   ASSET ID
========================================= */

.zig-connect-id-card {

    position: absolute;

    left: 25px;
    top: 200px;

    width: 190px;
    height: 72px;

    padding: 12px;

    display: flex;
    align-items: center;

    gap: 12px;

    border-radius: 17px;

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

    background:
        rgba(255,255,255,.92);

    backdrop-filter: blur(14px);

    z-index: 5;

}

.zig-connect-id-icon {

    width: 40px;
    height: 40px;

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

    border-radius: 11px;

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

    color: #1769FF;

}

.zig-connect-id-icon svg {
    width: 19px;
}

.zig-connect-id-card span {

    display: block;

    font-size: 8px;

    letter-spacing: 1.5px;

    color: #64748B;

}

.zig-connect-id-card strong {

    display: block;

    margin-top: 4px;

    font-size: 13px;

    color: #33415E;

}


/* =========================================
   SCANNER
========================================= */

.zig-connect-scanner {

    position: absolute;

    right: 25px;
    top: 175px;

    width: 125px;
    height: 125px;

    display: flex;
    flex-direction: column;

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

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(37,99,235,.22),
            rgba(255,255,255,.95) 68%
        );

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

    color: #1769FF;

    z-index: 5;

    box-shadow:
        0 0 45px
        rgba(37,99,235,.18);

}

.zig-connect-scanner-icon svg {
    width: 28px;
}

.zig-connect-scanner > span {

    margin-top: 8px;

    font-size: 8px;

    letter-spacing: 2px;

    font-weight: 700;

}


.zig-connect-scan-ring {

    position: absolute;

    inset: -10px;

    border-radius: 50%;

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

    animation:
        zigScanRing
        2.5s
        ease-out
        infinite;

}

.scan-ring-two {

    animation-delay:
        1.25s;

}

@keyframes zigScanRing {

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

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

}


/* =========================================
   SCAN CORNERS
========================================= */

.zig-connect-scan-corner {

    position: absolute;

    width: 15px;
    height: 15px;

    border-color: #1769FF;

    opacity: .7;

}

.corner-tl {
    left: 185px;
    top: 170px;
    border-left: 1px solid;
    border-top: 1px solid;
}

.corner-tr {
    right: 185px;
    top: 170px;
    border-right: 1px solid;
    border-top: 1px solid;
}

.corner-bl {
    left: 185px;
    top: 290px;
    border-left: 1px solid;
    border-bottom: 1px solid;
}

.corner-br {
    right: 185px;
    top: 290px;
    border-right: 1px solid;
    border-bottom: 1px solid;
}


/* =========================================
   ZIGMAX CORE
========================================= */

.zig-connect-core {

    position: absolute;

    left: 50%;
    top: 325px;

    width: 215px;
    height: 145px;

    transform:
        translateX(-50%);

    display: flex;
    flex-direction: column;

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

    border-radius: 28px;

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

    background:
        radial-gradient(
            circle at center,
            rgba(37,99,235,.22),
            rgba(255,255,255,.98) 70%
        );

    box-shadow:
        0 0 60px
        rgba(37,99,235,.18);

    z-index: 6;

    animation:
        zigCorePulse
        4s
        ease-in-out
        infinite;

}

@keyframes zigCorePulse {

    0%,100% {
        box-shadow:
            0 0 40px
            rgba(37,99,235,.12);
    }

    50% {
        box-shadow:
            0 0 70px
            rgba(37,99,235,.28);
    }

}


.zig-connect-core-glow {

    position: absolute;

    inset: -25px;

    border-radius: 35px;

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

    filter: blur(25px);

    z-index: -1;

}


.zig-connect-core-icon {

    width: 50px;
    height: 50px;

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

    border-radius: 15px;

    background:
        linear-gradient(
            145deg,
            #1769FF,
            #1769FF
        );

    color: white;

    box-shadow:
        0 0 30px
        rgba(56,189,248,.35);

}

.zig-connect-core-icon svg {
    width: 25px;
}


.zig-connect-core strong {

    margin-top: 9px;

    font-size: 18px;

    letter-spacing: 3px;

    color: #33415E;

}


.zig-connect-core > span {

    margin-top: 4px;

    font-size: 8px;

    letter-spacing: 2px;

    color: #64748B;

}


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

.zig-connect-digital {

    position: absolute;

    left: 50%;

    bottom: 15px;

    transform:
        translateX(-50%);

    width: 590px;

    display: grid;

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

    gap: 12px;

    z-index: 5;

}


.zig-connect-digital-item {

    height: 72px;

    padding: 12px;

    display: flex;
    align-items: center;

    gap: 10px;

    border-radius: 17px;

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

    background:
        rgba(255,255,255,.90);

    backdrop-filter:
        blur(12px);

}


.zig-connect-digital-icon {

    width: 36px;
    height: 36px;

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

    border-radius: 10px;

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

    color: #1769FF;

}

.zig-connect-digital-icon svg {
    width: 17px;
}


.zig-connect-digital-item strong {

    display: block;

    font-size: 9px;

    letter-spacing: 1px;

    color: #33415E;

}


.zig-connect-digital-item span {

    display: block;

    margin-top: 4px;

    font-size: 8px;

    color: #64748B;

}


/* =========================================
   SVG
========================================= */

.zig-connect-svg {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    z-index: 2;

    pointer-events: none;

}


.zig-svg-line {

    fill: none;

    stroke:
        url(#zigConnectFlow);

    stroke-width: 1.5;

    stroke-linecap: round;

    opacity: .55;

    filter:
        url(#zigConnectGlow);

    stroke-dasharray:
        7 9;

    animation:
        zigLineFlow
        3s
        linear
        infinite;

}

@keyframes zigLineFlow {

    to {
        stroke-dashoffset:
            -32;
    }

}


.zig-main-line {

    stroke-width: 2;

    opacity: .8;

}


.zig-svg-particle {

    fill: #1769FF;

    filter:
        drop-shadow(
            0 0 7px
            #1769FF
        );

}


.zig-main-particle {

    fill: #4D8DFF;

    filter:
        drop-shadow(
            0 0 12px
            #1769FF
        );

}


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

.zig-connect-content {

    max-width: 590px;

    opacity: 0;

    transform:
        translateX(60px);

    animation:
        zigContentReveal
        1.2s
        cubic-bezier(.16,1,.3,1)
        .35s forwards;

}

@keyframes zigContentReveal {

    to {

        opacity: 1;

        transform:
            translateX(0);

    }

}


.zig-connect-eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 24px;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 3px;

    color: #1769FF;

}

.zig-connect-eyebrow::before {

    content: "";

    width: 30px;
    height: 1px;

    background:
        #1769FF;

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

}


.zig-connect-content h2 {

    margin: 0;

    font-size:
        clamp(43px,4.5vw,68px);

    line-height: 1.05;

    letter-spacing: -2.5px;

    font-weight: 800;

    color: #33415E;

}


.zig-connect-content h2 span {

    display: block;

    background:
        linear-gradient(
            90deg,
            #1769FF,
            #4D8DFF,
            #1769FF
        );

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

    color: transparent;

}


.zig-connect-main-text {

    margin-top: 30px;

    font-size: 16px;

    line-height: 1.9;

    color: #64748B;

}


.zig-connect-sub-text {

    margin-top: 15px;

    font-size: 14px;

    line-height: 1.8;

    color: #64748B;

}


/* =========================================
   CONCEPT ITEMS
========================================= */

.zig-connect-concept {

    display: flex;

    gap: 15px;

    margin-top: 25px;

}


.zig-connect-concept-number {

    width: 34px;
    height: 34px;

    flex-shrink: 0;

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

    border-radius: 10px;

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

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

    font-size: 9px;

    color: #1769FF;

}


.zig-connect-concept strong {

    display: block;

    font-size: 13px;

    color: #33415E;

}


.zig-connect-concept span {

    display: block;

    margin-top: 5px;

    font-size: 11px;

    line-height: 1.6;

    color: #64748B;

}


/* =========================================
   MESSAGE
========================================= */

.zig-connect-message {

    margin-top: 35px;

    padding: 15px 18px;

    display: flex;

    align-items: center;

    gap: 13px;

    border-radius: 16px;

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

    background:
        linear-gradient(
            90deg,
            rgba(37,99,235,.1),
            rgba(238,243,255,.75)
        );

}


.zig-connect-message-icon {

    width: 40px;
    height: 40px;

    flex-shrink: 0;

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

    border-radius: 11px;

    background:
        rgba(56,189,248,.1);

    color: #1769FF;

}


.zig-connect-message-icon svg {
    width: 18px;
}


.zig-connect-message strong {

    display: block;

    font-size: 12px;

    color: #33415E;

}


.zig-connect-message span {

    display: block;

    margin-top: 4px;

    font-size: 10px;

    color: #64748B;

}


/* =========================================
   RESPONSIVE — FROM PHYSICAL TO DIGITAL
========================================= */

/* ---------- TABLET / SMALL LAPTOP ---------- */

@media (max-width: 1100px) {

    .zig-connect-section  {
        min-height: auto;
        padding: 110px 6%;
    }

    .zig-connect-container  {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .zig-connect-visual  {
        width: min(680px, 100%);
        height: 600px;
        margin: 0 auto;
    }

    .zig-connect-content  {
        width: 100%;
        max-width: 720px;
        margin: 0 auto;
        text-align: center;
    }

    .zig-connect-eyebrow  {
        justify-content: center;
    }

    .zig-connect-main-text,
    .zig-connect-sub-text  {
        max-width: 650px;
        margin-left: auto;
        margin-right: auto;
    }

    .zig-connect-message  {
        text-align: left;
    }

}


/* ---------- ALIGN VISUAL LINE ---------- */

@media (min-width: 801px) and (max-width: 960px) {

    .zig-connect-scanner {
        right: 85px;
        top: 180px;
    }

}


/* ---------- TABLET ---------- */

@media (max-width: 800px) {

    .zig-connect-section  {
        padding: 90px 30px;
    }

    .zig-connect-visual  {
        width: 620px;
        height: 560px;
    }

    .orbit-one  {
        width: 470px;
        height: 470px;
    }

    .orbit-two  {
        width: 350px;
        height: 350px;
    }

    .zig-connect-asset-card  {
        width: 220px;
        height: 86px;
    }

    .zig-connect-id-card  {
        left: 20px;
        top: 175px;
    }

    .zig-connect-scanner  {
        right: 20px;
        top: 155px;
        width: 110px;
        height: 110px;
    }

    .corner-tl  {
        left: 160px;
        top: 150px;
    }

    .corner-tr  {
        right: 160px;
        top: 150px;
    }

    .corner-bl  {
        left: 160px;
        top: 265px;
    }

    .corner-br  {
        right: 160px;
        top: 265px;
    }

    .zig-connect-core  {
        top: 285px;
        width: 195px;
        height: 130px;
    }

    .zig-connect-digital  {
        width: 500px;
        bottom: 10px;
    }

    .zig-connect-content h2  {
        font-size: clamp(36px, 7vw, 52px);
        letter-spacing: -1.8px;
    }

}


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

@media (max-width: 600px) {

    .zig-connect-section  {
        min-height: auto;
        padding: 85px 18px 90px;
    }

    .zig-connect-container  {
        display: flex;
        flex-direction: column;
        gap: 55px;
    }


    /* =========================
       VISUAL
    ========================= */

    .zig-connect-visual  {
        width: 100%;
        max-width: 430px;
        height: 480px;

        margin: 0 auto;

        transform: none;

        animation:
            zigVisualMobileReveal
            1s
            cubic-bezier(.16,1,.3,1)
            forwards;
    }

    @keyframes zigVisualMobileReveal  {

        from {
            opacity: 0;
            transform: translateY(25px);
        }

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

    }


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

    .zig-connect-visual-grid  {
        inset: 15px;

        background-size: 30px 30px;

        opacity: .45;
    }


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

    .orbit-one  {
        width: min(90vw, 370px);
        height: min(90vw, 370px);
    }

    .orbit-two  {
        width: min(68vw, 280px);
        height: min(68vw, 280px);
    }


    /* =========================
       PHYSICAL ASSET CARD
    ========================= */

    .zig-connect-asset-card  {

        top: 10px;

        width: min(220px, 65vw);
        height: 76px;

        padding: 11px;

        gap: 10px;

        border-radius: 16px;
    }

    .zig-connect-asset-icon  {

        width: 40px;
        height: 40px;

        flex-shrink: 0;

        border-radius: 11px;
    }

    .zig-connect-asset-icon svg  {
        width: 20px;
    }

    .zig-connect-asset-info span  {
        font-size: 7px;
        letter-spacing: 1.5px;
    }

    .zig-connect-asset-info strong  {
        font-size: 12px;
    }

    .zig-connect-asset-info small  {
        font-size: 8px;
    }


    /* =========================
       LIVE
    ========================= */

    .zig-connect-live  {

        top: 9px;
        right: 10px;

        font-size: 6px;
    }


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

    .zig-connect-id-card  {

        left: 0;
        top: 145px;

        width: 150px;
        height: 60px;

        padding: 9px;

        gap: 8px;

        border-radius: 14px;
    }

    .zig-connect-id-icon  {

        width: 34px;
        height: 34px;

        border-radius: 9px;
    }

    .zig-connect-id-icon svg  {
        width: 16px;
    }

    .zig-connect-id-card span  {
        font-size: 6.5px;
        letter-spacing: 1px;
    }

    .zig-connect-id-card strong  {
        margin-top: 3px;
        font-size: 11px;
    }


    /* =========================
       SCANNER
    ========================= */

    .zig-connect-scanner  {

        right: 0;
        top: 135px;

        width: 95px;
        height: 95px;

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

    .zig-connect-scanner-icon svg  {
        width: 22px;
    }

    .zig-connect-scanner > span  {

        margin-top: 6px;

        font-size: 6px;

        letter-spacing: 1.5px;
    }


    /* =========================
       SCAN CORNERS
    ========================= */

    .zig-connect-scan-corner  {

        width: 11px;
        height: 11px;
    }

    .corner-tl  {
        left: calc(50% - 100px);
        top: 130px;
    }

    .corner-tr  {
        right: calc(50% - 100px);
        top: 130px;
    }

    .corner-bl  {
        left: calc(50% - 100px);
        top: 220px;
    }

    .corner-br  {
        right: calc(50% - 100px);
        top: 220px;
    }


    /* =========================
       CORE
    ========================= */

    .zig-connect-core  {

        top: 225px;

        width: 165px;
        height: 115px;

        border-radius: 22px;
    }

    .zig-connect-core-icon  {

        width: 42px;
        height: 42px;

        border-radius: 12px;
    }

    .zig-connect-core-icon svg  {
        width: 21px;
    }

    .zig-connect-core strong  {

        margin-top: 7px;

        font-size: 14px;

        letter-spacing: 2px;
    }

    .zig-connect-core > span  {

        margin-top: 3px;

        font-size: 6.5px;

        letter-spacing: 1.5px;
    }


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

    .zig-connect-digital  {

        left: 50%;
        bottom: 5px;

        width: min(100%, 360px);

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

        gap: 7px;
    }

    .zig-connect-digital-item  {

        height: 62px;

        padding: 8px;

        gap: 7px;

        border-radius: 13px;
    }

    .zig-connect-digital-icon  {

        width: 29px;
        height: 29px;

        flex-shrink: 0;

        border-radius: 8px;
    }

    .zig-connect-digital-icon svg  {
        width: 14px;
    }

    .zig-connect-digital-item strong  {
        font-size: 7px;
        letter-spacing: .5px;
    }

    .zig-connect-digital-item span  {

        margin-top: 3px;

        font-size: 6.5px;
    }


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

    .zig-connect-content  {

        width: 100%;

        text-align: center;
    }

    .zig-connect-eyebrow  {

        margin-bottom: 18px;

        gap: 8px;

        font-size: 8px;

        letter-spacing: 2px;
    }

    .zig-connect-eyebrow::before  {
        width: 20px;
    }

    .zig-connect-content h2  {

        font-size:
            clamp(30px, 9vw, 40px);

        line-height: 1.08;

        letter-spacing: -1.5px;
    }

    .zig-connect-main-text  {

        margin-top: 20px;

        font-size: 13px;

        line-height: 1.75;
    }

    .zig-connect-sub-text  {

        margin-top: 12px;

        font-size: 11.5px;

        line-height: 1.7;
    }


    /* =========================
       CONCEPT
    ========================= */

    .zig-connect-concept  {

        gap: 11px;

        margin-top: 22px;
        
        text-align: center;
    
    }

    .zig-connect-concept-number  {

        width: 30px;
        height: 30px;

        border-radius: 8px;
        font-size: 8px;
    }

    .zig-connect-concept strong  {
        font-size: 11px;
    }

    .zig-connect-concept span  {

        margin-top: 4px;

        font-size: 9.5px;

        line-height: 1.55;
    }


    /* =========================
       MESSAGE
    ========================= */

    .zig-connect-message  {

        margin-top: 25px;

        padding: 12px 13px;

        gap: 10px;

        border-radius: 13px;

        text-align: left;
    }

    .zig-connect-message-icon  {

        width: 34px;
        height: 34px;

        border-radius: 9px;
    }

    .zig-connect-message-icon svg  {
        width: 16px;
    }

    .zig-connect-message strong  {
        font-size: 10px;
    }

    .zig-connect-message span  {

        margin-top: 3px;

        font-size: 8.5px;

        line-height: 1.4;
    }


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

    .zig-connect-bg-glow-1  {

        width: 250px;
        height: 250px;

        left: -150px;

        filter: blur(70px);
    }

    .zig-connect-bg-glow-2  {

        width: 220px;
        height: 220px;

        right: -130px;

        filter: blur(70px);
    }

}


/* =========================================
   SMALL PHONE
========================================= */

@media (max-width: 400px) {

    .zig-connect-section  {
        padding: 75px 14px 80px;
    }

    .zig-connect-container  {
        gap: 40px;
    }

    .zig-connect-visual  {

        max-width: 340px;
        height: 410px;
    }


    /* ORBIT */

    .orbit-one  {
        width: 300px;
        height: 300px;
    }

    .orbit-two  {
        width: 225px;
        height: 225px;
    }


    /* ASSET */

    .zig-connect-asset-card  {

        width: 190px;
        height: 68px;

        padding: 9px;
    }

    .zig-connect-asset-icon  {

        width: 35px;
        height: 35px;
    }

    .zig-connect-asset-info strong  {
        font-size: 10px;
    }


    /* ID */

    .zig-connect-id-card  {

        top: 125px;

        width: 125px;
        height: 54px;
    }

    .zig-connect-id-icon  {

        width: 29px;
        height: 29px;
    }

    .zig-connect-id-card strong  {
        font-size: 9px;
    }


    /* SCANNER */

    .zig-connect-scanner  {

        top: 118px;

        width: 80px;
        height: 80px;
    }

    .zig-connect-scanner-icon svg  {
        width: 19px;
    }


    /* CORE */

    .zig-connect-core  {

        top: 195px;

        width: 145px;
        height: 100px;

        border-radius: 19px;
    }

    .zig-connect-core-icon  {

        width: 36px;
        height: 36px;
    }

    .zig-connect-core-icon svg  {
        width: 18px;
    }

    .zig-connect-core strong  {
        font-size: 12px;
    }


    /* DIGITAL */

    .zig-connect-digital  {

        width: 100%;

        gap: 5px;
    }

    .zig-connect-digital-item  {

        height: 56px;

        padding: 6px;

        gap: 5px;
    }

    .zig-connect-digital-icon  {

        width: 25px;
        height: 25px;
    }

    .zig-connect-digital-item strong  {
        font-size: 6.5px;
    }

    .zig-connect-digital-item span  {
        font-size: 5.5px;
    }


    /* TEXT */

    .zig-connect-content h2  {

        font-size: 29px;

        letter-spacing: -1px;
    }

    .zig-connect-main-text  {
        font-size: 12px;
    }

    .zig-connect-sub-text  {
        font-size: 10.5px;
    }

}


/* =========================================
   EXTRA SMALL PHONE
========================================= */

@media (max-width: 340px) {

    .zig-connect-section  {
        padding-left: 12px;
        padding-right: 12px;
    }

    .zig-connect-visual  {
        max-width: 310px;
        height: 370px;
    }

    .zig-connect-content h2  {
        font-size: 26px;
    }

    .zig-connect-main-text  {
        font-size: 11.5px;
    }

    .zig-connect-digital-item span  {
        display: none;
    }

}
/* =========================================
   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,
            #FFFFFF 0%,
            #F3F6FF 48%,
            #F3F6FF 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(80px);

    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(23,105,255, .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: #1769FF;

    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,
        #1769FF
    );
}


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

.cta-content h2 {
    margin: 0;

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

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

    color: #FFFFFF;
}

.cta-content h2 span {
    display: block;

    background:
        linear-gradient(
            90deg,
            #1769FF,
            #1769FF,
            #4D8DFF,
            #1769FF
        );

    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: #64748B;

    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,
            #1769FF,
            #1769FF
        );

    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: #1769FF;

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

    letter-spacing: 5px;

    opacity: .75;
}

.cta-brand span {
    display: block;

    margin-top: 7px;

    color: #64748B;

    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,
            #FFFFFF 0%,
            #F3F6FF 100%
        );

    border-top: 1px solid rgba(23,105,255, .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(23,105,255, .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%,
            #4D8DFF 0%,
            #1769FF 12%,
            #1769FF 35%,
            #DDE9FF 62%,
            #F3F6FF 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(23,105,255, .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: #DCE8FF;

    box-shadow:
        0 0 15px #1769FF,
        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: #1769FF;
}


.explain-footer {

    margin-top: 18px;

    max-width: 390px;

    color: #64748B;

    font-size: 13px;

    line-height: 1.7;
}


/* =========================================
   KONTAK
========================================= */

/* 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;
}

/* FORCE SVG BLUE */
.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;
    }
}

.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: #64748B;

    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(23,105,255, .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: #64748B;
}


.explain-copyright {
    color: #64748B !important;
}
/* end footer */
/* =========================================
   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  {

        width: 100%;

        transform: none;

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

        gap: 35px;

        margin-left: 0;

        margin-top: 45px;
    }


    .isi-contact  {

        grid-column: 1 / -1;
    }


    .copyright  {

        flex-direction: column;

        align-items: flex-start;

        gap: 8px;
    }
}
/* =========================================
   ZIGMAX HAMBURGER MENU
========================================= */

@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: #F3F6FF !important;

        border: 1px solid #1769FF !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: #1769FF !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: #FFFFFF !important;

        border: 1px solid #1769FF !important;

        border-radius: 15px !important;

        box-shadow:
            0 15px 40px rgba(0, 0, 0, 0.7),
            0 0 25px rgba(23,105,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 VISUAL SECTION
========================================= */

.zigmax-visual-section  {
    position: relative;
    width: 100%;
    min-height: 650px;

    padding: 100px 6%;

    overflow: hidden;
    isolation: isolate;

    background:
        radial-gradient(
            circle at 50% 50%,
            rgba(23,105,255,.08),
            transparent 55%
        ),
        #FFFFFF;
}


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

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

    z-index: -1;
    overflow: hidden;
}


.visual-orb  {
    position: absolute;

    border-radius: 50%;

    filter: blur(100px);

    pointer-events: none;

    opacity: .12;
}


.orb-left  {
    width: 300px;
    height: 300px;

    left: -150px;
    top: 30%;

    background: #1769FF;

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


.orb-right  {
    width: 280px;
    height: 280px;

    right: -140px;
    bottom: 10%;

    background: #1769FF;

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


@keyframes orbFloatLeft  {

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

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

}


@keyframes orbFloatRight  {

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

    to {
        transform: translate(-120px, 70px);
    }

}


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

.visual-container  {
    position: relative;

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

    min-height: 450px;

    margin: auto;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1.25fr)
        minmax(0, 1fr);

    align-items: center;

    gap: clamp(25px, 4vw, 55px);
}


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

.visual-image  {
    position: relative;

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

    justify-self: center;

    transition:
        transform .5s ease;
}


.visual-image img  {
    position: relative;

    width: 100%;
    height: auto;

    display: block;

    border-radius: 22px;

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

    box-shadow:
        0 25px 70px rgba(23,47,88,.12),
        0 0 35px rgba(14,165,233,.08);

    z-index: 2;
}


/* =========================================
   IMAGE GLOW
========================================= */

.image-glow  {
    position: absolute;

    inset: 15%;

    background: #1769FF;

    filter: blur(70px);

    opacity: .12;

    z-index: 0;
}


/* =========================================
   GERAKAN GAMBAR
========================================= */

.image-left  {
    animation:
        imageLeftFloat 6s ease-in-out infinite;
}


.image-right  {
    animation:
        imageRightFloat 7s ease-in-out infinite;
}


@keyframes imageLeftFloat  {

    0%, 100% {
        transform:
            translateY(0)
            rotate(-2deg);
    }

    50% {
        transform:
            translateY(-18px)
            rotate(2deg);
    }

}


@keyframes imageRightFloat  {

    0%, 100% {
        transform:
            translateY(0)
            rotate(2deg);
    }

    50% {
        transform:
            translateY(18px)
            rotate(-2deg);
    }

}


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

.visual-content  {
    width: 100%;
    max-width: 520px;

    margin: auto;

    text-align: center;

    z-index: 5;
}


.visual-label  {
    display: inline-block;

    margin-bottom: 18px;

    padding: 7px 14px;

    border-radius: 999px;

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

    letter-spacing: 1.5px;

    color: #4D8DFF;

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

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


.visual-content h2  {
    margin: 0;

    font-size: clamp(30px, 4vw, 48px);

    line-height: 1.1;

    letter-spacing: -1.5px;

    color: #33415E;
}


.visual-content h2 span  {
    display: block;

    background:
        linear-gradient(
            90deg,
            #4D8DFF,
            #1769FF,
            #6B9FFF
        );

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

    color: transparent;
}


.visual-content > p  {
    width: 100%;
    max-width: 470px;

    margin: 22px auto 25px;

    font-size: 14px;

    line-height: 1.8;

    color:
        rgba(23,105,255,.18);
}

}

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

@media (max-width: 1000px) {

    .zigmax-visual-section  {
        padding: 90px 5%;
    }


    .visual-container  {
        grid-template-columns:
            minmax(0, .85fr)
            minmax(0, 1.3fr)
            minmax(0, .85fr);

        gap: 25px;
    }


    .visual-image  {
        max-width: 280px;
    }


    .visual-content h2  {
        font-size: clamp(28px, 4vw, 40px);
    }


    .visual-content > p  {
        font-size: 13px;

        line-height: 1.7;
    }

}


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

@media (max-width: 800px) {

    .zigmax-visual-section  {
        padding: 80px 25px;
    }


    .visual-container  {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 45px;
        min-height: auto;
    }


    .visual-image  {
        width: min(82vw, 300px);
        max-width: 300px;
        margin: 0 auto;
    }


    .visual-image img  {
        border-radius: 18px;
    }


    .visual-content h2  {
        font-size: 32px;

        letter-spacing: -1px;
    }


    .visual-content > p  {
        font-size: 13px;

        line-height: 1.7;
    }


    .visual-label  {
        margin-bottom: 14px;

        padding: 6px 12px;

        font-size: 9px;
    }

}


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

@media (max-width: 600px) {

    .zigmax-visual-section  {
        min-height: auto;

        padding: 75px 20px 85px;
    }


    /* Container menjadi vertikal */

    .visual-container  {
        display: flex;

        flex-direction: column;

        align-items: center;

        gap: 45px;

        min-height: auto;
    }


    /* =====================================
       GAMBAR
    ===================================== */

    .visual-image  {
        width: min(82vw, 300px);

        max-width: 300px;

        margin: 0 auto;
    }


    .visual-image img  {
        width: 100%;

        border-radius: 18px;

        box-shadow:
            0 20px 50px rgba(23,47,88,.12),
            0 0 25px rgba(14,165,233,.07);
    }


    /* =====================================
       GAMBAR KIRI
    ===================================== */

    .image-left  {
        animation:
            imageLeftFloatMobile 6s ease-in-out infinite;
    }


    /* =====================================
       GAMBAR KANAN
    ===================================== */

    .image-right  {
        animation:
            imageRightFloatMobile 7s ease-in-out infinite;
    }


    @keyframes imageLeftFloatMobile  {

        0%, 100% {
            transform:
                translateY(0)
                rotate(-1deg);
        }

        50% {
            transform:
                translateY(-8px)
                rotate(1deg);
        }

    }


    @keyframes imageRightFloatMobile  {

        0%, 100% {
            transform:
                translateY(0)
                rotate(1deg);
        }

        50% {
            transform:
                translateY(8px)
                rotate(-1deg);
        }

    }


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

    .visual-content  {
        width: 100%;

        max-width: 500px;

        padding: 0 5px;
    }


    .visual-label  {
        margin-bottom: 15px;

        padding: 6px 12px;

        font-size: 9px;

        letter-spacing: 1.3px;
    }


    .visual-content h2  {
        font-size: clamp(28px, 8vw, 34px);

        line-height: 1.12;

        letter-spacing: -1px;
    }


    .visual-content h2 span  {
        margin-top: 3px;
    }


    .visual-content > p  {
        width: 100%;

        max-width: 420px;

        margin: 18px auto 0;

        padding: 0 5px;

        font-size: 13px;

        line-height: 1.75;

        color:
            rgba(191,219,254,.62);
    }


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

    .orb-left  {
        width: 200px;
        height: 200px;

        left: -120px;

        filter: blur(75px);

        opacity: .09;
    }


    .orb-right  {
        width: 190px;
        height: 190px;

        right: -120px;

        filter: blur(75px);

        opacity: .09;
    }

}


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

@media (max-width: 400px) {

    .zigmax-visual-section  {
        padding:
            65px
            16px
            75px;
    }


    .visual-container  {
        gap: 38px;
    }


    .visual-image  {
        width: min(84vw, 270px);
    }


    .visual-image img  {
        border-radius: 16px;
    }


    .visual-content h2  {
        font-size: 28px;

        line-height: 1.15;

        letter-spacing: -.8px;
    }


    .visual-content > p  {
        font-size: 12.5px;

        line-height: 1.7;

        padding: 0;
    }


    .visual-label  {
        font-size: 8px;

        padding: 6px 11px;

        letter-spacing: 1.1px;
    }

}

/* =========================================
   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, .zigmax-visual-section { background: var(--white); }
.animated-bg { background: radial-gradient(circle at 50% 50%, var(--blue-glow), transparent 60%), var(--white); }
.corner-light, .visual-orb, .why-glow { background: var(--blue-primary); }
.grid, .why-grid { background-image: linear-gradient(rgba(23,105,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(23,105,255,.045) 1px, transparent 1px); }
.main-line, .flow-main { stroke: var(--blue-primary); }
.main-line.second { stroke: #6b9cff; }
.particle { 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); background: var(--white); color: var(--blue-primary); }
.hamburger { color: var(--navy); }
h1, h2, h3, h4, h5, h6 { color: var(--navy); }
.eyebrow, .visual-label, .why-eyebrow { color: var(--blue-primary); }
.hero h1 span, .visual-content h2 span, .why-content h2 span { background: linear-gradient(90deg, var(--blue-primary), var(--blue-dark)); }
.hero h1 span, .visual-content h2 span, .why-content h2 span,
.hero h1 span strong, .visual-content h2 span strong, .why-content h2 span strong {
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.hero p, .visual-content > p, .why-content p { color: var(--text-muted); }
.primary-btn { 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); }
.zigmax-stats, .why-zigmax { background: var(--soft-bg); border-color: var(--border-soft); }
.stats-card, .visual-image img { border-color: var(--border-soft); box-shadow: 0 10px 30px rgba(23,105,255,.08); }
.stat-info h3, .visual-content h2, .why-content h2 { color: var(--navy); }
.stat-info p { color: var(--text-muted); }
.stat-icon, .highlight-icon { background: rgba(23,105,255,.08); border-color: var(--border-soft); color: var(--blue-primary); }
.flow-card, .system-node, .why-highlight { background: var(--white); border-color: var(--border-soft); box-shadow: 0 10px 30px rgba(23,105,255,.08); }
.flow-card h3, .system-node h3, .highlight-text strong { color: var(--navy); }
.flow-card p, .system-node p, .highlight-text span { color: var(--text-muted); }
.flow-icon { background: rgba(23,105,255,.08); border-color: var(--border-soft); }
.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; }
}

@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; }
}
.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); }

.visual-features div { color: var(--text-primary); background: rgba(23,105,255,.08); border-color: var(--border-soft); }
.visual-features svg { color: var(--blue-primary); }

@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; }
}

/* =========================================
   HOME CTA LIGHT SURFACE
========================================= */
.zigmax-cta {
    background: var(--soft-bg);
    border-top-color: var(--border-soft);
}

.zigmax-cta::before,
.zigmax-cta::after {
    display: none;
}

.cta-content h2 {
    color: var(--navy);
}

.cta-content p {
    color: var(--text-muted);
}

.cta-button {
    box-shadow: none;
}

.why-glow,
.system-glow,
.image-glow {
    display: none;
}

.why-highlight {
    box-shadow: none;
}

.flow-card,
.zigmax-card {
    background: var(--white);
    border-color: var(--border-soft);
    box-shadow: none;
    transition: transform .35s ease, border-color .35s ease;
}

.flow-card h3,
.zigmax-card h3 {
    color: var(--navy);
}

.flow-card p,
.zigmax-card p {
    color: var(--text-muted);
}

.flow-icon,
.zigmax-icon {
    background: rgba(23,105,255,.08);
    border-color: var(--border-soft);
    color: var(--blue-primary);
    box-shadow: none;
}

.zigmax-card h3 span {
    color: var(--blue-primary);
}

.flow-glow,
.flow-main {
    filter: none;
}

.flow-light,
.flow-dot {
    box-shadow: none;
}
.particle,
.flow-light,
.visual-image,
.zig-connect-visual,
.zig-connect-orbit {
    will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
    .particle,
    .flow-light,
    .visual-image,
    .zig-connect-orbit  {
        animation: none !important;
    }
}

.zig-connect-asset-card,
.zig-connect-id-card,
.zig-connect-live-card {
    box-shadow: 0 8px 22px rgba(7,26,59,.08);
}

.zig-connect-asset-icon {
    background: rgba(23,105,255,.08);
    color: var(--blue-primary);
    box-shadow: none;
}

.zig-connect-live span {
    box-shadow: none;
}

/* =========================================
   FAST HOME REVEALS
========================================= */
.hero,
.navbar,
.why-content,
.asset-system,
.cta-content,
.contact-header,
.contact-card {
    transition-duration: .4s !important;
    transition-delay: 0s !important;
}

html.low-performance .particle,
html.low-performance .grid,
html.low-performance .why-grid,
html.low-performance .zig-connect-visual-grid,
html.low-performance .zig-connect-orbit,
html.low-performance .zig-connect-bg-glow-1,
html.low-performance .zig-connect-bg-glow-2,
html.low-performance .visual-orb,
html.low-performance .why-glow,
html.low-performance .image-glow,
html.low-performance .system-glow {
    display: none !important;
}

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

html.low-performance .zig-connect-section,
html.low-performance .zigmax-visual-section {
    background: var(--white);
}

/* Home keeps content responsive while reducing scroll-time painting. */
html.home-lite .animated-bg {
    position: absolute;
    background: var(--white);
}

html.home-lite .particles,
html.home-lite .grid,
html.home-lite .visual-orb,
html.home-lite .why-glow,
html.home-lite .why-grid,
html.home-lite .image-glow,
html.home-lite .system-glow,
html.home-lite .zig-connect-bg-glow,
html.home-lite .zig-connect-visual-grid,
html.home-lite .zig-connect-orbit,
html.home-lite .flow-light {
    display: none !important;
}

html.home-lite .corner-light,
html.home-lite .orb,
html.home-lite .visual-image,
html.home-lite .zig-connect-visual,
html.home-lite .how-orb,
html.home-lite .how-particles span {
    animation: none !important;
}

html.home-lite .zigmax-stats,
html.home-lite .zigmax-visual-section,
html.home-lite .why-zigmax,
html.home-lite .zig-connect-section,
html.home-lite .how-section,
html.home-lite .zigmax-cta {
    content-visibility: auto;
    contain-intrinsic-size: 800px;
}

html.home-lite .visual-image img,
html.home-lite .stats-card,
html.home-lite .flow-card,
html.home-lite .zigmax-card,
html.home-lite .system-node {
    box-shadow: none;
}

/* Keep the useful motion while dropping only expensive decoration. */
html.home-lite .flow-lines,
html.home-lite .flow-light,
html.home-lite .zig-connect-orbit {
    display: block !important;
}

html.home-lite .visual-image.image-left {
    animation: imageLeftFloat 6s ease-in-out infinite !important;
}

html.home-lite .visual-image.image-right {
    animation: imageRightFloat 7s ease-in-out infinite !important;
}

html.home-lite .zig-connect-visual {
    animation: zigVisualReveal 1.2s cubic-bezier(.16,1,.3,1) .2s forwards !important;
}

html.home-lite .orbit-two {
    animation: zigOrbitRotate 20s linear infinite !important;
}

html.home-lite .corner-light {
    animation: cornerPulse 7s ease-in-out infinite alternate !important;
}

/* Home section reveals use the same motion language as Features. */
.home-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .45s ease, transform .45s cubic-bezier(.22,.61,.36,1);
}

.home-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.home-reveal-left,
.home-reveal-right {
    opacity: 0;
    transition: opacity .45s ease, transform .45s cubic-bezier(.22,.61,.36,1);
}

.home-reveal-left { transform: translateX(-34px); }
.home-reveal-right { transform: translateX(34px); }

.home-reveal-left.is-visible,
.home-reveal-right.is-visible {
    opacity: 1;
    transform: translateX(0);
}

.home-reveal-stagger > * {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .4s ease, transform .4s cubic-bezier(.22,.61,.36,1);
}

.home-reveal-stagger.is-visible > * {
    opacity: 1;
    transform: translateY(0);
}

.home-reveal-stagger.is-visible > *:nth-child(2) { transition-delay: .08s; }
.home-reveal-stagger.is-visible > *:nth-child(3) { transition-delay: .16s; }

html.compact-device .animated-bg {
    position: absolute;
}

html.compact-device .particles,
html.compact-device .grid,
html.compact-device .zig-connect-bg-glow,
html.compact-device .zig-connect-visual-grid,
html.compact-device .visual-orb,
html.compact-device .why-glow,
html.compact-device .image-glow,
html.compact-device .system-glow {
    display: none !important;
}

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

html.compact-device .visual-image img,
html.compact-device .stats-card,
html.compact-device .flow-card,
html.compact-device .zigmax-card,
html.compact-device .system-node {
    box-shadow: none;
}


/* ============================================
   HOVER STYLES (desktop/mouse only)
   Auto-wrapped: prevents sticky :hover on touch
   ============================================ */
@media (hover: hover) and (pointer: fine) {
    .nav-menu a:hover {
    color: #1769FF;
    opacity: 1;
}
    .navbar .nav-menu a:hover::after {
    transform: scaleX(1);
}
    .nav-button:hover {
    background:  linear-gradient(
            90deg,
            #1769FF,
            #1769FF,
            #4D8DFF
        );;
}
    .stat-item:hover .stat-icon {

    transform:
        translateY(-3px);

    color: #4D8DFF;

    border-color:
        rgba(96,165,250,.35);

    box-shadow:
        0 0 18px rgba(56,189,248,.12),
        inset 0 0 15px rgba(56,189,248,.06);
}
    .visual-image:hover {

    transform:
        translateY(-10px)
        scale(1.025);

}
    .visual-image:hover img {

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

    box-shadow:
        0 30px 80px rgba(23,47,88,.14),
        0 0 40px rgba(14,165,233,.16);

}
    .visual-features div:hover {

    transform:
        translateY(-3px);

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

    background:
        rgba(23,105,255,.08);

}
    .flow-card:hover {

    transform: translateY(-5px);

    border-color: rgba(23,105,255, .7);

    box-shadow:
        0 15px 40px rgba(0, 130, 255, .15),
        0 0 25px rgba(0, 150, 255, .12);

}
    .why-highlight:hover {

    transform:
        translateY(-5px);

    border-color:
        rgba(23,105,255, .38);

    box-shadow:
        0 15px 40px
        rgba(14, 165, 233, .12);
}
    .system-node:hover {

    transform:
        translateY(-6px);

    border-color:
        rgba(23,105,255, .45);

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

        0 0 35px
        rgba(23,105,255, .18);
}
    .node-assets:hover {

    transform:
        translateX(-50%)
        translateY(-6px);
}
    .node-status:hover {

    transform:
        translateX(-50%)
        translateY(-6px);
}
    .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: #1769FF;
}
    .nav-menu a:hover { color: var(--blue-primary); }
    .nav-button:hover { background: var(--blue-dark); color: var(--white); }
    .primary-btn:hover { background: var(--blue-dark); }
    .secondary-btn:hover { background: var(--soft-bg); }
    .flow-card:hover, .system-node:hover { border-color: var(--blue-primary); }
    .footer a:hover, .isi-footer a:hover { color: var(--blue-primary); }
    .cta-button:hover {
    box-shadow: 0 8px 18px var(--blue-glow);
}
    .flow-card:hover, .zigmax-card:hover {
    transform: translateY(-5px);
    border-color: var(--blue-primary);
    box-shadow: none;
}
    .zigmax-card:hover {
    transform: translateX(-50%) translateY(-5px);
}
    .zig-connect-asset-card:hover, .zig-connect-id-card:hover, .zig-connect-live-card:hover {
    transform: translateY(-4px);
    border-color: var(--blue-primary);
    box-shadow: 0 12px 26px rgba(7,26,59,.10);
}
    .zig-connect-asset-card:hover {
    transform: translateX(-50%) translateY(-4px);
}
}

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

        color: #1769FF !important;
    }
    .visual-image:hover {
    transform:
        translateY(-10px)
        scale(1.025);
}
    .visual-image:hover img {
    border-color:
        rgba(56,189,248,.45);

    box-shadow:
        0 30px 80px rgba(23,47,88,.14),
        0 0 40px rgba(14,165,233,.16);
}
}

@media (max-width: 768px) and (hover: hover) and (pointer: fine) {
    .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 {
        content: '' !important;
        display: block !important;
        border-bottom: 2px solid var(--blue-primary) !important;
        margin-top: 5px !important;
        width: 100% !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 {
        content: '' !important;
        display: block !important;
        border-bottom: 2px solid var(--blue-primary) !important;
        margin-top: 5px !important;
        width: 100% !important;
    }
}