.elementor-kit-8{--e-global-color-primary:#1B0D00;--e-global-color-secondary:#54595F;--e-global-color-text:#F67C04;--e-global-color-accent:#F83B00;--e-global-color-4c2443f:#1B0D00;--e-global-color-9a0bb1a:#F67C04;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;background-color:transparent;background-image:linear-gradient(180deg, #090400 0%, #1B0D00 100%);}.elementor-kit-8 e-page-transition{background-color:#FFBC7D;}.elementor-kit-8 label{color:#F83B00;}.elementor-kit-8 input:not([type="button"]):not([type="submit"]),.elementor-kit-8 textarea,.elementor-kit-8 .elementor-field-textual{background-color:#F83B00;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS */<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>B05 Project - Mobile Ready</title>
    <style>
        /* Font Import */
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
        
        /* Root Variables */
        :root {
            --orange-primary: #f67c04;
            --orange-secondary: #f83b00;
            --black: #000000;
            --dark-gray: #1a1a1a;
            --light-gray: #f5f5f5;
            --white: #ffffff;
            --text-gray: #666666;
        }
        
        /* Reset & Base */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Inter', sans-serif;
            line-height: 1.6;
            color: var(--black);
            overflow-x: hidden;
        }
        
        /* Header Styles */
        .header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            background: rgba(0, 0, 0, 0.95);
            backdrop-filter: blur(10px);
            z-index: 1000;
            padding: 12px 0;
            transition: all 0.3s ease;
        }
        
        .header.scrolled {
            background: rgba(0, 0, 0, 0.98);
            box-shadow: 0 2px 20px rgba(246, 124, 4, 0.2);
        }
        
        .nav-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 20px;
            max-width: 1200px;
            margin: 0 auto;
        }
        
        .logo {
            font-size: 24px;
            font-weight: 800;
            background: linear-gradient(135deg, var(--orange-primary) 0%, var(--orange-secondary) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        .nav-menu {
            display: none;
            list-style: none;
            gap: 32px;
        }
        
        .nav-menu.active {
            display: flex;
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            background: rgba(0, 0, 0, 0.98);
            flex-direction: column;
            padding: 20px;
            gap: 16px;
            border-top: 1px solid rgba(246, 124, 4, 0.3);
        }
        
        .nav-link {
            color: var(--white);
            text-decoration: none;
            font-weight: 500;
            transition: color 0.3s ease;
            position: relative;
        }
        
        .nav-link:hover {
            color: var(--orange-primary);
        }
        
        .nav-link::after {
            content: '';
            position: absolute;
            bottom: -4px;
            left: 0;
            width: 0;
            height: 2px;
            background: linear-gradient(135deg, var(--orange-primary) 0%, var(--orange-secondary) 100%);
            transition: width 0.3s ease;
        }
        
        .nav-link:hover::after {
            width: 100%;
        }
        
        .hamburger {
            display: flex;
            flex-direction: column;
            cursor: pointer;
            gap: 4px;
        }
        
        .hamburger span {
            width: 25px;
            height: 3px;
            background: var(--white);
            transition: all 0.3s ease;
            border-radius: 2px;
        }
        
        .hamburger.active span:nth-child(1) {
            transform: rotate(45deg) translate(6px, 6px);
        }
        
        .hamburger.active span:nth-child(2) {
            opacity: 0;
        }
        
        .hamburger.active span:nth-child(3) {
            transform: rotate(-45deg) translate(6px, -6px);
        }
        
        /* Welcome Banner */
        .welcome-banner {
            background: linear-gradient(135deg, var(--orange-primary) 0%, var(--orange-secondary) 100%);
            padding: 100px 20px 60px;
            text-align: center;
            position: relative;
            overflow: hidden;
        }
        
        .welcome-banner::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="20" cy="20" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="80" cy="40" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="40" cy="80" r="1" fill="rgba(255,255,255,0.1)"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
            opacity: 0.3;
        }
        
        .welcome-content {
            position: relative;
            z-index: 2;
        }
        
        .welcome-icon {
            width: 80px;
            height: 80px;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 24px;
            backdrop-filter: blur(10px);
        }
        
        .welcome-title {
            font-size: 32px;
            font-weight: 800;
            color: var(--white);
            margin-bottom: 16px;
            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
        }
        
        .welcome-subtitle {
            font-size: 18px;
            color: rgba(255, 255, 255, 0.9);
            margin-bottom: 32px;
            max-width: 300px;
            margin-left: auto;
            margin-right: auto;
        }
        
        .cta-button {
            background: var(--white);
            color: var(--orange-primary);
            padding: 16px 32px;
            border: none;
            border-radius: 50px;
            font-weight: 700;
            font-size: 16px;
            cursor: pointer;
            transition: all 0.3s ease;
            text-decoration: none;
            display: inline-block;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
        }
        
        .cta-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
        }
        
        /* Services Section */
        .services {
            padding: 60px 20px;
            background: var(--light-gray);
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
        }
        
        .section-title {
            font-size: 28px;
            font-weight: 700;
            text-align: center;
            margin-bottom: 16px;
            color: var(--black);
        }
        
        .section-subtitle {
            text-align: center;
            color: var(--text-gray);
            margin-bottom: 40px;
            font-size: 16px;
        }
        
        .services-grid {
            display: grid;
            gap: 24px;
            grid-template-columns: 1fr;
        }
        
        .service-card {
            background: var(--white);
            padding: 32px 24px;
            border-radius: 16px;
            text-align: center;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }
        
        .service-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(135deg, var(--orange-primary) 0%, var(--orange-secondary) 100%);
        }
        
        .service-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 12px 40px rgba(246, 124, 4, 0.2);
        }
        
        .service-icon {
            width: 64px;
            height: 64px;
            background: linear-gradient(135deg, var(--orange-primary) 0%, var(--orange-secondary) 100%);
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 20px;
        }
        
        .service-title {
            font-size: 20px;
            font-weight: 600;
            margin-bottom: 12px;
            color: var(--black);
        }
        
        .service-description {
            color: var(--text-gray);
            font-size: 14px;
            line-height: 1.6;
        }
        
        /* Products Section */
        .products {
            padding: 60px 20px;
            background: var(--white);
        }
        
        .products-grid {
            display: grid;
            gap: 24px;
            grid-template-columns: 1fr;
        }
        
        .product-card {
            background: var(--white);
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            transition: all 0.3s ease;
        }
        
        .product-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 12px 40px rgba(246, 124, 4, 0.15);
        }
        
        .product-image {
            height: 200px;
            background: linear-gradient(135deg, var(--orange-primary) 0%, var(--orange-secondary) 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }
        
        .product-badge {
            position: absolute;
            top: 16px;
            right: 16px;
            background: rgba(255, 255, 255, 0.9);
            color: var(--orange-primary);
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 600;
        }
        
        .product-content {
            padding: 24px;
        }
        
        .product-title {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 8px;
            color: var(--black);
        }
        
        .product-description {
            color: var(--text-gray);
            font-size: 14px;
            margin-bottom: 20px;
            line-height: 1.5;
        }
        
        .product-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .product-price {
            font-size: 20px;
            font-weight: 700;
            color: var(--orange-primary);
        }
        
        .buy-button {
            background: linear-gradient(135deg, var(--orange-primary) 0%, var(--orange-secondary) 100%);
            color: var(--white);
            padding: 10px 20px;
            border: none;
            border-radius: 25px;
            font-weight: 600;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .buy-button:hover {
            transform: scale(1.05);
            box-shadow: 0 4px 15px rgba(246, 124, 4, 0.4);
        }
        
        /* Contact Section */
        .contact {
            padding: 60px 20px;
            background: linear-gradient(135deg, var(--black) 0%, var(--dark-gray) 100%);
            color: var(--white);
        }
        
        .contact-form {
            background: rgba(255, 255, 255, 0.1);
            padding: 32px 24px;
            border-radius: 16px;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        .form-label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: var(--white);
        }
        
        .form-input {
            width: 100%;
            padding: 14px 16px;
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 8px;
            background: rgba(255, 255, 255, 0.1);
            color: var(--white);
            font-size: 16px;
            transition: all 0.3s ease;
        }
        
        .form-input:focus {
            outline: none;
            border-color: var(--orange-primary);
            box-shadow: 0 0 0 3px rgba(246, 124, 4, 0.2);
        }
        
        .form-input::placeholder {
            color: rgba(255, 255, 255, 0.6);
        }
        
        .form-textarea {
            width: 100%;
            padding: 14px 16px;
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 8px;
            background: rgba(255, 255, 255, 0.1);
            color: var(--white);
            font-size: 16px;
            resize: vertical;
            min-height: 120px;
            transition: all 0.3s ease;
        }
        
        .form-textarea:focus {
            outline: none;
            border-color: var(--orange-primary);
            box-shadow: 0 0 0 3px rgba(246, 124, 4, 0.2);
        }
        
        .submit-button {
            width: 100%;
            background: linear-gradient(135deg, var(--orange-primary) 0%, var(--orange-secondary) 100%);
            color: var(--white);
            padding: 16px;
            border: none;
            border-radius: 8px;
            font-weight: 600;
            font-size: 16px;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .submit-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(246, 124, 4, 0.4);
        }
        
        /* Footer */
        .footer {
            background: var(--black);
            color: var(--white);
            padding: 40px 20px 20px;
            text-align: center;
        }
        
        .footer-content {
            max-width: 1200px;
            margin: 0 auto;
        }
        
        .footer-logo {
            font-size: 24px;
            font-weight: 800;
            background: linear-gradient(135deg, var(--orange-primary) 0%, var(--orange-secondary) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            margin-bottom: 16px;
        }
        
        .footer-text {
            color: rgba(255, 255, 255, 0.7);
            margin-bottom: 24px;
            font-size: 14px;
        }
        
        .social-links {
            display: flex;
            justify-content: center;
            gap: 16px;
            margin-bottom: 24px;
        }
        
        .social-link {
            width: 40px;
            height: 40px;
            background: linear-gradient(135deg, var(--orange-primary) 0%, var(--orange-secondary) 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
            transition: all 0.3s ease;
        }
        
        .social-link:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(246, 124, 4, 0.4);
        }
        
        .copyright {
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            padding-top: 20px;
            color: rgba(255, 255, 255, 0.5);
            font-size: 12px;
        }
        
        /* Responsive Design */
        @media (min-width: 768px) {
            .nav-menu {
                display: flex;
                position: static;
                background: none;
                flex-direction: row;
                padding: 0;
                border: none;
            }
            
            .hamburger {
                display: none;
            }
            
            .welcome-title {
                font-size: 48px;
            }
            
            .welcome-subtitle {
                font-size: 20px;
                max-width: 500px;
            }
            
            .services-grid,
            .products-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            
            .section-title {
                font-size: 36px;
            }
        }
        
        @media (min-width: 1024px) {
            .services-grid,
            .products-grid {
                grid-template-columns: repeat(3, 1fr);
            }
            
            .contact-form {
                max-width: 600px;
                margin: 0 auto;
            }
        }
        
        /* Animations */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .fade-in {
            animation: fadeInUp 0.6s ease forwards;
        }
        
        /* Scroll animations */
        .scroll-animate {
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.6s ease;
        }
        
        .scroll-animate.visible {
            opacity: 1;
            transform: translateY(0);
        }
    </style>
</head>
<body>
    <!-- Header -->
    <header class="header" id="header">
        <nav class="nav-container">
            <div class="logo">B05 Project</div>
            <ul class="nav-menu" id="nav-menu">
                <li><a href="#home" class="nav-link">Beranda</a></li>
                <li><a href="#services" class="nav-link">Layanan</a></li>
                <li><a href="#products" class="nav-link">Produk</a></li>
                <li><a href="#contact" class="nav-link">Kontak</a></li>
            </ul>
            <div class="hamburger" id="hamburger">
                <span></span>
                <span></span>
                <span></span>
            </div>
        </nav>
    </header>

    <!-- Welcome Banner -->
    <section id="home" class="welcome-banner">
        <div class="welcome-content">
            <div class="welcome-icon">
                <svg width="40" height="40" fill="white" viewBox="0 0 24 24">
                    <path d="M13 10V3L4 14h7v7l9-11h-7z"/>
                </svg>
            </div>
            <h1 class="welcome-title fade-in">Selamat Datang di B05 Project</h1>
            <p class="welcome-subtitle fade-in">House Production & Digital Products terdepan untuk solusi kreatif bisnis Anda</p>
            <a href="#services" class="cta-button fade-in">Mulai Eksplorasi</a>
        </div>
    </section>

    <!-- Services Section -->
    <section id="services" class="services">
        <div class="container">
            <h2 class="section-title scroll-animate">Layanan Kami</h2>
            <p class="section-subtitle scroll-animate">Solusi lengkap untuk kebutuhan produksi dan digital</p>
            
            <div class="services-grid">
                <div class="service-card scroll-animate">
                    <div class="service-icon">
                        <svg width="32" height="32" fill="white" viewBox="0 0 24 24">
                            <path d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"/>
                        </svg>
                    </div>
                    <h3 class="service-title">Video Production</h3>
                    <p class="service-description">Produksi video berkualitas tinggi untuk promosi, dokumentasi, dan konten kreatif dengan teknologi terdepan.</p>
                </div>
                
                <div class="service-card scroll-animate">
                    <div class="service-icon">
                        <svg width="32" height="32" fill="white" viewBox="0 0 24 24">
                            <path d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
                        </svg>
                    </div>
                    <h3 class="service-title">Digital Products</h3>
                    <p class="service-description">Pengembangan aplikasi, website, dan platform digital inovatif yang user-friendly dan modern.</p>
                </div>
                
                <div class="service-card scroll-animate">
                    <div class="service-icon">
                        <svg width="32" height="32" fill="white" viewBox="0 0 24 24">
                            <path d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"/>
                        </svg>
                    </div>
                    <h3 class="service-title">Creative Consulting</h3>
                    <p class="service-description">Konsultasi strategis untuk branding, marketing, dan pengembangan konten yang efektif dan menarik.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Products Section -->
    <section id="products" class="products">
        <div class="container">
            <h2 class="section-title scroll-animate">Produk Digital</h2>
            <p class="section-subtitle scroll-animate">Koleksi produk premium untuk mendukung bisnis Anda</p>
            
            <div class="products-grid">
                <div class="product-card scroll-animate">
                    <div class="product-image">
                        <div class="product-badge">POPULER</div>
                        <svg width="64" height="64" fill="white" viewBox="0 0 24 24">
                            <path d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.746 0 3.332.477 4.5 1.253v13C19.832 18.477 18.246 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/>
                        </svg>
                    </div>
                    <div class="product-content">
                        <h3 class="product-title">Template Bisnis Pro</h3>
                        <p class="product-description">Koleksi template presentasi, proposal, dan dokumen bisnis profesional siap pakai dengan desain modern.</p>
                        <div class="product-footer">
                            <span class="product-price">Rp 299K</span>
                            <button class="buy-button">Beli Sekarang</button>
                        </div>
                    </div>
                </div>
                
                <div class="product-card scroll-animate">
                    <div class="product-image">
                        <div class="product-badge">TERLARIS</div>
                        <svg width="64" height="64" fill="white" viewBox="0 0 24 24">
                            <path d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/>
                        </svg>
                    </div>
                    <div class="product-content">
                        <h3 class="product-title">Marketing Toolkit</h3>
                        <p class="product-description">Paket lengkap tools dan template untuk kampanye digital marketing yang efektif dan terukur.</p>
                        <div class="product-footer">
                            <span class="product-price">Rp 499K</span>
                            <button class="buy-button">Beli Sekarang</button>
                        </div>
                    </div>
                </div>
                
                <div class="product-card scroll-animate">
                    <div class="product-image">
                        <div class="product-badge">BARU</div>
                        <svg width="64" height="64" fill="white" viewBox="0 0 24 24">
                            <path d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/>
                        </svg>
                    </div>
                    <div class="product-content">
                        <h3 class="product-title">Masterclass Online</h3>
                        <p class="product-description">Kursus komprehensif tentang produksi konten, digital marketing, dan strategi bisnis modern.</p>
                        <div class="product-footer">
                            <span class="product-price">Rp 799K</span>
                            <button class="buy-button">Beli Sekarang</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Contact Section -->
    <section id="contact" class="contact">
        <div class="container">
            <h2 class="section-title scroll-animate" style="color: white;">Hubungi Kami</h2>
            <p class="section-subtitle scroll-animate" style="color: rgba(255,255,255,0.8);">Siap memulai proyek Anda? Mari diskusikan kebutuhan Anda</p>
            
            <form class="contact-form scroll-animate">
                <div class="form-group">
                    <label class="form-label">Nama Lengkap</label>
                    <input type="text" class="form-input" placeholder="Masukkan nama Anda" required>
                </div>
                
                <div class="form-group">
                    <label class="form-label">Email</label>
                    <input type="email" class="form-input" placeholder="nama@email.com" required>
                </div>
                
                <div class="form-group">
                    <label class="form-label">Nomor WhatsApp</label>
                    <input type="tel" class="form-input" placeholder="+62 812-3456-7890" required>
                </div>
                
                <div class="form-group">
                    <label class="form-label">Pesan</label>
                    <textarea class="form-textarea" placeholder="Ceritakan tentang proyek atau kebutuhan Anda..." required></textarea>
                </div>
                
                <button type="submit" class="submit-button">Kirim Pesan</button>
            </form>
        </div>
    </section>

    <!-- Footer -->
    <footer class="footer">
        <div class="footer-content">
            <div class="footer-logo">B05 Project</div>
            <p class="footer-text">House Production & Digital Products terdepan untuk solusi kreatif bisnis Anda</p>
            
            <div class="social-links">
                <a href="#" class="social-link">
                    <svg width="20" height="20" fill="white" viewBox="0 0 24 24">
                        <path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"/>
                    </svg>
                </a>
                <a href="#" class="social-link">
                    <svg width="20" height="20" fill="white" viewBox="0 0 24 24">
                        <path d="M22.46 6c-.77.35-1.6.58-2.46.69.88-.53 1.56-1.37 1.88-2.38-.83.5-1.75.85-2.72 1.05C18.37 4.5 17.26 4 16 4c-2.35 0-4.27 1.92-4.27 4.29 0 .34.04.67.11.98C8.28 9.09 5.11 7.38 3 4.79c-.37.63-.58 1.37-.58 2.15 0 1.49.75 2.81 1.91 3.56-.71 0-1.37-.2-1.95-.5v.03c0 2.08 1.48 3.82 3.44 4.21a4.22 4.22 0 0 1-1.93.07 4.28 4.28 0 0 0 4 2.98 8.521 8.521 0 0 1-5.33 1.84c-.34 0-.68-.02-1.02-.06C3.44 20.29 5.7 21 8.12 21 16 21 20.33 14.46 20.33 8.79c0-.19 0-.37-.01-.56.84-.6 1.56-1.36 2.14-2.23z"/>
                    </svg>
                </a>
                <a href="#" class="social-link">
                    <svg width="20" height="20" fill="white" viewBox="0 0 24 24">
                        <path d="M12.017 0C5.396 0 .029 5.367.029 11.987c0 5.079 3.158 9.417 7.618 11.174-.105-.949-.199-2.403.041-3.439.219-.937 1.406-5.957 1.406-5.957s-.359-.72-.359-1.781c0-1.663.967-2.911 2.168-2.911 1.024 0 1.518.769 1.518 1.688 0 1.029-.653 2.567-.992 3.992-.285 1.193.6 2.165 1.775 2.165 2.128 0 3.768-2.245 3.768-5.487 0-2.861-2.063-4.869-5.008-4.869-3.41 0-5.409 2.562-5.409 5.199 0 1.033.394 2.143.889 2.741.099.12.112.225.085.345-.09.375-.293 1.199-.334 1.363-.053.225-.172.271-.402.165-1.495-.69-2.433-2.878-2.433-4.646 0-3.776 2.748-7.252 7.92-7.252 4.158 0 7.392 2.967 7.392 6.923 0 4.135-2.607 7.462-6.233 7.462-1.214 0-2.357-.629-2.75-1.378l-.748 2.853c-.271 1.043-1.002 2.35-1.492 3.146C9.57 23.812 10.763 24.009 12.017 24.009c6.624 0 11.99-5.367 11.99-11.988C24.007 5.367 18.641.001.012.001z"/>
                    </svg>
                </a>
                <a href="#" class="social-link">
                    <svg width="20" height="20" fill="white" viewBox="0 0 24 24">
                        <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
                    </svg>
                </a>
            </div>
            
            <div class="copyright">
                <p>&copy; 2024 B05 Project. All rights reserved. | Jakarta, Indonesia</p>
            </div>
        </div>
    </footer>

    <script>
        // Mobile Navigation Toggle
        const hamburger = document.getElementById('hamburger');
        const navMenu = document.getElementById('nav-menu');
        
        hamburger.addEventListener('click', () => {
            hamburger.classList.toggle('active');
            navMenu.classList.toggle('active');
        });
        
        // Close mobile menu when clicking on links
        document.querySelectorAll('.nav-link').forEach(link => {
            link.addEventListener('click', () => {
                hamburger.classList.remove('active');
                navMenu.classList.remove('active');
            });
        });
        
        // Header scroll effect
        const header = document.getElementById('header');
        window.addEventListener('scroll', () => {
            if (window.scrollY > 100) {
                header.classList.add('scrolled');
            } else {
                header.classList.remove('scrolled');
            }
        });
        
        // Smooth scrolling for navigation links
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                const target = document.querySelector(this.getAttribute('href'));
                if (target) {
                    const headerHeight = header.offsetHeight;
                    const targetPosition = target.offsetTop - headerHeight;
                    
                    window.scrollTo({
                        top: targetPosition,
                        behavior: 'smooth'
                    });
                }
            });
        });
        
        // Scroll animations
        const observerOptions = {
            threshold: 0.1,
            rootMargin: '0px 0px -50px 0px'
        };
        
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('visible');
                }
            });
        }, observerOptions);
        
        // Observe all elements with scroll-animate class
        document.querySelectorAll('.scroll-animate').forEach(el => {
            observer.observe(el);
        });
        
        // Form submission
        document.querySelector('.contact-form').addEventListener('submit', function(e) {
            e.preventDefault();
            
            // Get form data
            const name = this.querySelector('input[type="text"]').value;
            const email = this.querySelector('input[type="email"]').value;
            const phone = this.querySelector('input[type="tel"]').value;
            const message = this.querySelector('textarea').value;
            
            // Simple validation
            if (!name || !email || !phone || !message) {
                alert('Mohon lengkapi semua field yang diperlukan.');
                return;
            }
            
            // Simulate form submission
            const submitBtn = this.querySelector('.submit-button');
            const originalText = submitBtn.textContent;
            submitBtn.textContent = 'Mengirim...';
            submitBtn.disabled = true;
            
            setTimeout(() => {
                alert('Terima kasih! Pesan Anda telah terkirim. Kami akan segera menghubungi Anda melalui WhatsApp.');
                this.reset();
                submitBtn.textContent = originalText;
                submitBtn.disabled = false;
            }, 2000);
        });
        
        // Product purchase handlers
        document.querySelectorAll('.buy-button').forEach(btn => {
            btn.addEventListener('click', function() {
                const productCard = this.closest('.product-card');
                const productName = productCard.querySelector('.product-title').textContent;
                const productPrice = productCard.querySelector('.product-price').textContent;
                
                // Simulate purchase process
                this.textContent = 'Memproses...';
                this.disabled = true;
                
                setTimeout(() => {
                    alert(`Terima kasih! Anda akan membeli ${productName} seharga ${productPrice}. Tim kami akan menghubungi Anda untuk proses pembayaran.`);
                    this.textContent = 'Beli Sekarang';
                    this.disabled = false;
                }, 1500);
            });
        });
        
        // CTA Button action
        document.querySelector('.cta-button').addEventListener('click', function(e) {
            e.preventDefault();
            document.querySelector('#services').scrollIntoView({
                behavior: 'smooth'
            });
        });
        
        // Add loading animation on page load
        window.addEventListener('load', () => {
            document.querySelectorAll('.fade-in').forEach((el, index) => {
                setTimeout(() => {
                    el.style.opacity = '1';
                    el.style.transform = 'translateY(0)';
                }, index * 200);
            });
        });
    </script>
<script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'9773eac0b392a071',t:'MTc1NjU1MzAxNi4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script></body>
</html>/* End custom CSS */