* { margin:0; padding:0; box-sizing:border-box; }
        body {
            font-family: 'Inter', sans-serif;
            color:#1f2937;
            background:transparent;
        }

        .container {
            width:90%;
            max-width:1200px;
            margin:auto;
        }

        /* NAVBAR */
        .navbar {
            padding:20px 0;
            display:flex;
            justify-content:space-between;
            align-items:center;
        }

        .logo {
            font-weight:700;
            font-size:22px;
        }

        .menu a {
            margin-left:25px;
            text-decoration:none;
            color:#374151;
            font-weight:500;
        }

        /* HERO */
        .hero {
            padding:70px 0;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:40px;
        }

        .hero-text {
            flex:1;
        }

        .hero-text h1 {
            font-size:46px;
            line-height:1.2;
            margin-bottom:20px;
        }

        .hero-text span {
            color:#ef4444;
        }

        .hero-text p {
            color:#6b7280;
            font-size:18px;
            margin-bottom:30px;
        }

        .btn {
            background:#ef4444;
            color:#fff;
            padding:14px 26px;
            border-radius:8px;
            text-decoration:none;
            font-weight:600;
            margin-right:15px;
        }

        .btn-secondary {
            border:1px solid #d1d5db;
            padding:14px 26px;
            border-radius:8px;
            text-decoration:none;
            color:#374151;
        }

        .hero-image img {
            width:520px;
            max-width:100%;
        }

        /* FEATURES */
        .features {
            padding:60px 0;
            display:grid;
            grid-template-columns:repeat(4,1fr);
            gap:25px;
        }

        .feature-box {
            background:#fff;
            padding:25px;
            border-radius:12px;
            box-shadow:0 10px 25px rgba(0,0,0,0.05);
        }

        .feature-box h3 {
            margin-bottom:10px;
            font-size:18px;
        }

        footer {
            margin-top:60px;
            padding:30px;
            text-align:center;
            background:#111827;
            color:#fff;
        }

        @media(max-width:900px){
            .hero{flex-direction:column;text-align:center;}
            .features{grid-template-columns:1fr 1fr;}
        }
        .section-title{
    text-align:center;
    font-size:32px;
    margin-bottom:10px;
}

.section-sub{
    text-align:center;
    color:#6b7280;
    margin-bottom:40px;
}

.package-section,
.why-section,
.portfolio-section{
    padding:80px 0;
    background:transparent;
}

.package-grid,
.why-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:25px;
}

.package-card,
.why-card{
    background:#fff;
    padding:25px;
    border-radius:14px;
    box-shadow:0 8px 25px rgba(0,0,0,0.05);
    transition:.3s;
}

.package-card:hover,
.why-card:hover{
    transform:translateY(-6px);
}

.portfolio{
    text-align:center;
}

.portfolio img{
    width:80%;
    border-radius:12px;
    box-shadow:0 20px 40px rgba(0,0,0,0.1);
}

@media(max-width:900px){
    .package-grid,
    .why-grid{
        grid-template-columns:1fr;
    }
}
/* FOOTER */
.main-footer{
    background:#111827;
    color:#d1d5db;
    margin-top:80px;
}

.footer-grid{
    display:grid;
    grid-template-columns:2fr 1fr 1fr 2fr;
    gap:40px;
    padding:60px 0;
}

.footer-col h3{
    color:#fff;
    margin-bottom:15px;
}

.footer-col h4{
    color:#fff;
    margin-bottom:15px;
}

.footer-col p{
    font-size:14px;
    line-height:1.6;
    margin-bottom:10px;
}

.footer-col ul{
    list-style:none;
    padding:0;
}

.footer-col ul li{
    margin-bottom:10px;
}

.footer-col ul li a{
    color:#d1d5db;
    text-decoration:none;
    font-size:14px;
}

.footer-col ul li a:hover{
    color:#ef4444;
}

.map-container{
    border-radius:10px;
    overflow:hidden;
}

.footer-bottom{
    border-top:1px solid #1f2937;
    text-align:center;
    padding:20px;
    font-size:14px;
    color:#9ca3af;
}

/* RESPONSIVE */
@media(max-width:900px){
    .footer-grid{
        grid-template-columns:1fr;
    }
}

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

.animated-bg{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:-1;
    overflow:hidden;
    background:linear-gradient(120deg,#f8fafc,#eef2f7);
}

/* floating shapes */
.animated-bg span{
    position:absolute;
    display:block;
    width:40px;
    height:40px;
    background:rgba(239,68,68,0.08);
    animation:float 20s linear infinite;
    bottom:-150px;
    border-radius:50%;
}

/* variasi posisi */
.animated-bg span:nth-child(1){
    left:10%;
    width:60px;
    height:60px;
    animation-duration:18s;
}
.animated-bg span:nth-child(2){
    left:25%;
    animation-duration:22s;
}
.animated-bg span:nth-child(3){
    left:40%;
    width:80px;
    height:80px;
    animation-duration:25s;
}
.animated-bg span:nth-child(4){
    left:65%;
    animation-duration:19s;
}
.animated-bg span:nth-child(5){
    left:80%;
    width:50px;
    height:50px;
    animation-duration:23s;
}

/* animasi naik */
@keyframes float{
    0%{
        transform:translateY(0) rotate(0deg);
        opacity:0;
    }
    10%{
        opacity:1;
    }
    100%{
        transform:translateY(-1000px) rotate(360deg);
        opacity:0;
    }
}
.hero,
.features,
.package-section,
.why-section,
.portfolio-section{
    background:transparent;
}
/* ============================================
   RESPONSIVE PROFESSIONAL MODE
   MOBILE & TABLET OPTIMIZATION
============================================ */

/* ---------- TABLET (768px - 1024px) ---------- */
@media (max-width:1024px){

    .container{
        width:92%;
    }

    .hero{
        padding:80px 0;
        gap:30px;
    }

    .hero-text h1{
        font-size:38px;
    }

    .hero-text p{
        font-size:17px;
    }

    .hero-image img{
        width:100%;
        max-width:420px;
    }

    .features{
        grid-template-columns:repeat(2,1fr);
    }

    .package-grid,
    .why-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .footer-grid{
        grid-template-columns:1fr 1fr;
        gap:30px;
    }
}


/* ---------- MOBILE (<768px) ---------- */
@media (max-width:768px){

    /* Container lebih nyaman dibaca */
    .container{
        width:92%;
    }

    /* NAVBAR */
    .navbar{
        padding:15px 0;
        flex-wrap:wrap;
    }

    .menu{
        width:100%;
        margin-top:15px;
        display:flex;
        justify-content:center;
        flex-wrap:wrap;
        gap:12px;
    }

    .menu a{
        margin:0;
        font-size:14px;
    }

    /* HERO */
    .hero{
        display:flex;
        flex-direction:column;
        align-items:center;
        text-align:center;
    }

    /* ini kuncinya */
    .hero-text{
        display:contents;
    }


/* urutan */
.hero-text h1{
    order:1;
    font-size:30px;
    line-height:1.3;
}

.hero-image{
    order:2;
}

.hero-text p{
    order:3;
    font-size:16px;
}

.hero-text .btn{
    order:4;
}

.hero-text .btn-secondary{
    order:5;
}

.hero-image img{
    width:100%;
    max-width:320px;
    margin:20px 0;
}

/* BUTTON jadi besar & enak diklik */
.btn,
.btn-secondary{
    display:block;
    width:100%;
    margin:10px 0;
    padding:14px;
    font-size:16px;
}

    /* FEATURES jadi 1 kolom */
    .features{
        grid-template-columns:1fr;
        gap:20px;
    }

    /* SECTION spacing biar lega */
    .package-section,
    .why-section,
    .portfolio-section{
        padding:60px 0;
    }

    .section-title{
        font-size:26px;
    }

    .section-sub{
        font-size:15px;
        padding:0 10px;
    }

    /* CARD */
    .package-card,
    .why-card,
    .feature-box{
        padding:22px;
        border-radius:14px;
    }

    /* GRID semua jadi stack */
    .package-grid,
    .why-grid{
        grid-template-columns:1fr;
        gap:20px;
    }

    /* portfolio image */
    .portfolio img{
        width:100%;
    }

    /* FOOTER */
    .footer-grid{
        grid-template-columns:1fr;
        text-align:center;
        padding:40px 0;
    }

    .footer-col{
        margin-bottom:20px;
    }

    .map-container iframe{
        height:220px;
    }

}


/* ---------- SMALL MOBILE (<480px) ---------- */
@media (max-width:480px){

    .hero-text h1{
        font-size:26px;
    }

    .section-title{
        font-size:22px;
    }

    .btn,
    .btn-secondary{
        font-size:15px;
        padding:12px;
    }

}
/* =========================
   MOBILE NAVBAR SYSTEM
========================= */

/* hamburger hidden di desktop */
.hamburger{
    display:none;
    flex-direction:column;
    cursor:pointer;
    gap:5px;
}

.hamburger span{
    width:26px;
    height:3px;
    background:#111827;
    border-radius:3px;
    transition:.4s;
}

/* MOBILE MODE */
@media(max-width:768px){

    .hamburger{
        display:flex;
    }

    .menu{
        position:absolute;
        top:70px;
        left:0;
        width:100%;
        background:#fff;
        flex-direction:column;
        align-items:center;
        padding:25px 0;
        gap:20px;

        /* hidden state */
        opacity:0;
        transform:translateY(-20px);
        pointer-events:none;

        transition:.35s ease;
        box-shadow:0 15px 40px rgba(0,0,0,0.08);
        border-radius:0 0 16px 16px;
    }

    .menu a{
        margin:0;
        font-size:16px;
        font-weight:600;
    }

    /* ACTIVE STATE */
    .menu.active{
        opacity:1;
        transform:translateY(0);
        pointer-events:auto;
    }
}

/* HAMBURGER ANIMATION */
.hamburger.active span:nth-child(1){
    transform:rotate(45deg) translate(5px,5px);
}

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

.hamburger.active span:nth-child(3){
    transform:rotate(-45deg) translate(6px,-6px);
}