<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PT Maju Sejahtera — Corporate Landing</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
    <style>
        :root {
            --primary: #1e40af;
            --primary-dark: #1e3a8a;
            --primary-light: #3b82f6;
            --accent: #f59e0b;
            --accent-dark: #d97706;
            --gray-50: #f9fafb;
            --gray-100: #f3f4f6;
            --gray-200: #e5e7eb;
            --gray-300: #d1d5db;
            --gray-400: #9ca3af;
            --gray-500: #6b7280;
            --gray-600: #4b5563;
            --gray-700: #374151;
            --gray-800: #1f2937;
            --gray-900: #111827;
            --white: #ffffff;
            --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
            --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1);
            --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1);
            --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1);
            --radius-sm: 6px;
            --radius-md: 10px;
            --radius-lg: 16px;
            --radius-xl: 24px;
        }
        * { margin: 0; padding: 0; box-sizing: border-box; }
        html { scroll-behavior: smooth; }
        body {
            font-family: 'Inter', -apple-system, sans-serif;
            color: var(--gray-800);
            background: var(--white);
            line-height: 1.6;
            overflow-x: hidden;
        }
        .container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

        /* ─── NAV ─── */
        nav {
            position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
            background: rgba(255,255,255,0.92);
            backdrop-filter: blur(16px) saturate(180%);
            border-bottom: 1px solid var(--gray-200);
            transition: box-shadow 0.3s;
        }
        nav.scrolled { box-shadow: var(--shadow-lg); }
        nav .container {
            display: flex; align-items: center; justify-content: space-between;
            height: 72px;
        }
        .logo {
            display: flex; align-items: center; gap: 12px;
            font-weight: 800; font-size: 1.25rem;
            color: var(--primary); text-decoration: none;
        }
        .logo-icon {
            width: 40px; height: 40px;
            background: linear-gradient(135deg, var(--primary), var(--primary-light));
            border-radius: var(--radius-sm);
            display: flex; align-items: center; justify-content: center;
            color: white; font-weight: 900; font-size: 1.1rem;
        }
        .nav-links { display: flex; align-items: center; gap: 32px; list-style: none; }
        .nav-links a {
            text-decoration: none; color: var(--gray-600);
            font-size: 0.85rem; font-weight: 500;
            transition: color 0.2s;
            position: relative;
        }
        .nav-links a::after {
            content: ''; position: absolute;
            bottom: -4px; left: 0; width: 0; height: 2px;
            background: var(--primary);
            transition: width 0.3s;
        }
        .nav-links a:hover { color: var(--primary); }
        .nav-links a:hover::after { width: 100%; }
        .nav-cta {
            padding: 10px 24px;
            background: linear-gradient(135deg, var(--primary), var(--primary-light));
            color: white !important;
            border-radius: var(--radius-sm);
            font-weight: 600;
        }
        .nav-cta::after { display: none !important; }
        .nav-cta:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
        .hamburger {
            display: none; flex-direction: column; gap: 5px;
            background: none; border: none; cursor: pointer; padding: 4px;
        }
        .hamburger span {
            display: block; width: 24px; height: 2.5px;
            background: var(--gray-700); border-radius: 4px;
            transition: all 0.3s;
        }
        .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(5px,-5px); }

        /* ─── HERO ─── */
        .hero {
            min-height: 100vh;
            display: flex; align-items: center;
            background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 40%, #2563eb 100%);
            position: relative; overflow: hidden;
            padding-top: 72px;
        }
        .hero::before {
            content: ''; position: absolute;
            top: -50%; right: -30%;
            width: 800px; height: 800px;
            background: radial-gradient(circle, rgba(245,158,11,0.15) 0%, transparent 70%);
            border-radius: 50%;
        }
        .hero::after {
            content: ''; position: absolute;
            bottom: -30%; left: -20%;
            width: 600px; height: 600px;
            background: radial-gradient(circle, rgba(59,130,246,0.2) 0%, transparent 70%);
            border-radius: 50%;
        }
        .hero .container {
            position: relative; z-index: 1;
            display: grid; grid-template-columns: 1fr 1fr;
            gap: 60px; align-items: center;
        }
        .hero-content h1 {
            font-size: 3.5rem; font-weight: 900;
            line-height: 1.1; color: white;
            margin-bottom: 20px;
        }
        .hero-content h1 span {
            background: linear-gradient(135deg, var(--accent), #fbbf24);
            -webkit-background-clip: text; -webkit-text-fill-color: transparent;
        }
        .hero-content p {
            font-size: 1.1rem; color: rgba(255,255,255,0.7);
            margin-bottom: 32px; max-width: 500px;
        }
        .hero-buttons { display: flex; gap: 16px; flex-wrap: wrap; }
        .btn-primary {
            display: inline-flex; align-items: center; gap: 8px;
            padding: 14px 32px;
            background: linear-gradient(135deg, var(--accent), var(--accent-dark));
            color: white; font-weight: 700; font-size: 0.9rem;
            border-radius: var(--radius-sm); text-decoration: none;
            transition: all 0.3s; border: none; cursor: pointer;
        }
        .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(245,158,11,0.35); }
        .btn-outline {
            display: inline-flex; align-items: center; gap: 8px;
            padding: 14px 32px;
            background: transparent; color: white; font-weight: 600; font-size: 0.9rem;
            border-radius: var(--radius-sm); text-decoration: none;
            border: 2px solid rgba(255,255,255,0.3);
            transition: all 0.3s;
        }
        .btn-outline:hover { border-color: white; background: rgba(255,255,255,0.1); }
        .hero-stats {
            display: flex; gap: 40px; margin-top: 40px;
        }
        .hero-stat h3 { font-size: 2rem; font-weight: 800; color: white; }
        .hero-stat h3 span { color: var(--accent); }
        .hero-stat p { font-size: 0.8rem; color: rgba(255,255,255,0.5); margin: 0; }
        .hero-visual {
            position: relative;
            display: flex; align-items: center; justify-content: center;
        }
        .hero-card {
            background: rgba(255,255,255,0.08);
            backdrop-filter: blur(12px);
            border: 1px solid rgba(255,255,255,0.12);
            border-radius: var(--radius-lg);
            padding: 40px; width: 100%;
        }
        .hero-card-grid {
            display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
        }
        .hc-item {
            background: rgba(255,255,255,0.06);
            border-radius: var(--radius-md);
            padding: 20px; text-align: center;
            border: 1px solid rgba(255,255,255,0.06);
            transition: all 0.3s;
        }
        .hc-item:hover { background: rgba(255,255,255,0.1); transform: translateY(-2px); }
        .hc-icon {
            width: 48px; height: 48px; margin: 0 auto 12px;
            background: rgba(245,158,11,0.15);
            border-radius: var(--radius-sm);
            display: flex; align-items: center; justify-content: center;
            font-size: 1.3rem;
        }
        .hc-item h4 { color: white; font-size: 0.9rem; font-weight: 700; margin-bottom: 4px; }
        .hc-item p { color: rgba(255,255,255,0.5); font-size: 0.75rem; margin: 0; }

        /* ─── SECTION COMMON ─── */
        section { padding: 100px 0; }
        .section-label {
            display: inline-block;
            padding: 6px 16px;
            background: rgba(30,64,175,0.08);
            color: var(--primary);
            border-radius: 50px;
            font-size: 0.75rem; font-weight: 700; text-transform: uppercase;
            letter-spacing: 0.5px; margin-bottom: 16px;
        }
        .section-title {
            font-size: 2.5rem; font-weight: 800;
            color: var(--gray-900);
            margin-bottom: 16px;
            line-height: 1.2;
        }
        .section-sub {
            font-size: 1.05rem; color: var(--gray-500);
            max-width: 600px;
        }
        .section-head { text-align: center; margin-bottom: 60px; }
        .section-head .section-sub { margin: 0 auto; }

        /* ─── PARTNERS ─── */
        .partners { background: var(--gray-50); padding: 60px 0; }
        .partners p {
            text-align: center;
            font-size: 0.75rem; font-weight: 600; text-transform: uppercase;
            letter-spacing: 1px; color: var(--gray-400);
            margin-bottom: 32px;
        }
        .partner-logos {
            display: flex; justify-content: center; align-items: center;
            gap: 48px; flex-wrap: wrap;
        }
        .partner-logos div {
            height: 32px;
            background: var(--gray-200);
            border-radius: var(--radius-sm);
            padding: 0 24px;
            display: flex; align-items: center;
            font-size: 0.8rem; font-weight: 700;
            color: var(--gray-400);
            letter-spacing: 0.5px;
        }

        /* ─── ABOUT ─── */
        .about-grid {
            display: grid; grid-template-columns: 1fr 1fr;
            gap: 60px; align-items: center;
        }
        .about-image {
            background: linear-gradient(135deg, var(--gray-100), var(--gray-200));
            border-radius: var(--radius-lg);
            height: 400px;
            display: flex; align-items: center; justify-content: center;
            position: relative; overflow: hidden;
        }
        .about-image::before {
            content: ''; position: absolute;
            width: 200px; height: 200px;
            background: rgba(30,64,175,0.08);
            border-radius: 50%; top: -50px; right: -50px;
        }
        .about-image-inner { text-align: center; position: relative; z-index: 1; }
        .about-image-inner .big-number {
            font-size: 6rem; font-weight: 900;
            background: linear-gradient(135deg, var(--primary), var(--primary-light));
            -webkit-background-clip: text; -webkit-text-fill-color: transparent;
            line-height: 1;
        }
        .about-image-inner p { font-size: 1rem; font-weight: 600; color: var(--gray-500); margin-top: 8px; }
        .about-text .about-features { margin-top: 24px; display: flex; flex-direction: column; gap: 16px; }
        .about-text .af-item {
            display: flex; gap: 14px; align-items: flex-start;
        }
        .about-text .af-check {
            width: 24px; height: 24px; margin-top: 2px;
            background: #d1fae5; border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            color: #059669; font-size: 0.7rem; font-weight: 700;
            flex-shrink: 0;
        }
        .about-text .af-item h4 { font-size: 0.95rem; font-weight: 700; color: var(--gray-800); margin-bottom: 2px; }
        .about-text .af-item p { font-size: 0.85rem; color: var(--gray-500); margin: 0; }

        /* ─── SERVICES ─── */
        .services { background: var(--gray-50); }
        .services-grid {
            display: grid; grid-template-columns: repeat(3, 1fr);
            gap: 28px;
        }
        .service-card {
            background: var(--white);
            border-radius: var(--radius-lg);
            padding: 36px 28px;
            border: 1px solid var(--gray-200);
            transition: all 0.3s;
        }
        .service-card:hover {
            transform: translateY(-6px);
            box-shadow: var(--shadow-xl);
            border-color: var(--primary-light);
        }
        .service-icon {
            width: 56px; height: 56px;
            border-radius: var(--radius-md);
            display: flex; align-items: center; justify-content: center;
            font-size: 1.4rem; margin-bottom: 20px;
        }
        .service-card:nth-child(1) .service-icon { background: #dbeafe; color: var(--primary); }
        .service-card:nth-child(2) .service-icon { background: #fef3c7; color: var(--accent-dark); }
        .service-card:nth-child(3) .service-icon { background: #d1fae5; color: #059669; }
        .service-card:nth-child(4) .service-icon { background: #ede9fe; color: #7c3aed; }
        .service-card:nth-child(5) .service-icon { background: #fce7f3; color: #db2777; }
        .service-card:nth-child(6) .service-icon { background: #e0f2fe; color: #0284c7; }
        .service-card h3 { font-size: 1.15rem; font-weight: 700; margin-bottom: 10px; color: var(--gray-900); }
        .service-card p { font-size: 0.88rem; color: var(--gray-500); line-height: 1.7; }

        /* ─── TESTIMONIALS ─── */
        .testimonials-grid {
            display: grid; grid-template-columns: repeat(3, 1fr);
            gap: 28px;
        }
        .testimonial-card {
            background: var(--white);
            border-radius: var(--radius-lg);
            padding: 32px;
            border: 1px solid var(--gray-200);
        }
        .testimonial-card .stars { color: var(--accent); font-size: 0.9rem; margin-bottom: 16px; }
        .testimonial-card blockquote {
            font-size: 0.9rem; color: var(--gray-600);
            line-height: 1.7; font-style: italic;
            margin-bottom: 20px;
        }
        .testimonial-author { display: flex; align-items: center; gap: 14px; }
        .testimonial-author .avatar {
            width: 44px; height: 44px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--primary), var(--primary-light));
            display: flex; align-items: center; justify-content: center;
            color: white; font-weight: 700; font-size: 0.9rem;
        }
        .testimonial-author h4 { font-size: 0.9rem; font-weight: 700; color: var(--gray-800); }
        .testimonial-author p { font-size: 0.78rem; color: var(--gray-400); margin: 0; }

        /* ─── CTA ─── */
        .cta {
            background: linear-gradient(135deg, var(--primary-dark), var(--primary));
            text-align: center; padding: 80px 0;
        }
        .cta h2 {
            font-size: 2.5rem; font-weight: 800; color: white;
            margin-bottom: 16px;
        }
        .cta p {
            font-size: 1.05rem; color: rgba(255,255,255,0.7);
            max-width: 600px; margin: 0 auto 32px;
        }

        /* ─── FOOTER ─── */
        footer {
            background: var(--gray-900);
            color: rgba(255,255,255,0.6);
            padding: 60px 0 0;
        }
        .footer-grid {
            display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
            gap: 40px; padding-bottom: 40px;
            border-bottom: 1px solid rgba(255,255,255,0.08);
        }
        footer h4 {
            color: white; font-size: 0.85rem; font-weight: 700;
            text-transform: uppercase; letter-spacing: 0.5px;
            margin-bottom: 20px;
        }
        footer p, footer li, footer a {
            font-size: 0.85rem; color: rgba(255,255,255,0.45);
            text-decoration: none; line-height: 1.8;
        }
        footer ul { list-style: none; }
        footer ul li { margin-bottom: 4px; }
        footer ul li a:hover { color: var(--accent); }
        footer .footer-brand p { margin-top: 12px; max-width: 320px; }
        .footer-social { display: flex; gap: 10px; margin-top: 20px; }
        .footer-social a {
            width: 36px; height: 36px;
            border-radius: var(--radius-sm);
            background: rgba(255,255,255,0.06);
            display: flex; align-items: center; justify-content: center;
            color: rgba(255,255,255,0.4); transition: all 0.2s;
        }
        .footer-social a:hover { background: var(--accent); color: var(--gray-900); }
        .footer-bottom {
            padding: 20px 0;
            display: flex; justify-content: space-between; align-items: center;
            font-size: 0.8rem; color: rgba(255,255,255,0.3);
        }
        .footer-bottom-links { display: flex; gap: 24px; }
        .footer-bottom-links a { color: rgba(255,255,255,0.3); font-size: 0.78rem; }
        .footer-bottom-links a:hover { color: var(--accent); }

        /* ─── CONTACT ─── */
        .contact-grid {
            display: grid; grid-template-columns: 1fr 1fr;
            gap: 60px;
        }
        .contact-form { display: flex; flex-direction: column; gap: 20px; }
        .contact-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
        .contact-form input,
        .contact-form textarea {
            width: 100%; padding: 14px 18px;
            border: 1px solid var(--gray-200);
            border-radius: var(--radius-sm);
            font-family: inherit; font-size: 0.9rem;
            transition: border-color 0.2s;
            outline: none;
        }
        .contact-form input:focus,
        .contact-form textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(30,64,175,0.1); }
        .contact-form textarea { min-height: 140px; resize: vertical; }
        .contact-info { display: flex; flex-direction: column; gap: 24px; }
        .contact-info .ci-item {
            display: flex; gap: 16px; align-items: flex-start;
        }
        .contact-info .ci-icon {
            width: 48px; height: 48px;
            background: rgba(30,64,175,0.08);
            border-radius: var(--radius-sm);
            display: flex; align-items: center; justify-content: center;
            color: var(--primary); font-size: 1.1rem;
            flex-shrink: 0;
        }
        .contact-info .ci-item h4 { font-size: 0.95rem; font-weight: 700; color: var(--gray-800); margin-bottom: 2px; }
        .contact-info .ci-item p { font-size: 0.88rem; color: var(--gray-500); margin: 0; }

        /* ─── ANIMATIONS ─── */
        .fade-up {
            opacity: 0; transform: translateY(40px);
            transition: all 0.7s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .fade-up.visible { opacity: 1; transform: translateY(0); }

        /* ─── RESPONSIVE ─── */
        @media (max-width: 1024px) {
            .hero .container { grid-template-columns: 1fr; gap: 40px; text-align: center; }
            .hero-content p { margin: 0 auto 32px; }
            .hero-buttons { justify-content: center; }
            .hero-stats { justify-content: center; }
            .services-grid { grid-template-columns: repeat(2, 1fr); }
            .testimonials-grid { grid-template-columns: repeat(2, 1fr); }
            .footer-grid { grid-template-columns: repeat(2, 1fr); }
            .contact-grid { grid-template-columns: 1fr; }
        }
        @media (max-width: 768px) {
            nav .container { height: 64px; }
            .nav-links {
                display: none; position: fixed; top: 64px; left: 0; right: 0;
                background: var(--white); flex-direction: column;
                padding: 24px; gap: 16px;
                border-bottom: 1px solid var(--gray-200);
                box-shadow: var(--shadow-lg);
            }
            .nav-links.open { display: flex; }
            .hamburger { display: flex; }
            section { padding: 60px 0; }
            .hero-content h1 { font-size: 2.2rem; }
            .section-title { font-size: 1.8rem; }
            .about-grid { grid-template-columns: 1fr; gap: 40px; }
            .services-grid { grid-template-columns: 1fr; }
            .testimonials-grid { grid-template-columns: 1fr; }
            .footer-grid { grid-template-columns: 1fr; gap: 28px; }
            .contact-form .form-row { grid-template-columns: 1fr; }
            .footer-bottom { flex-direction: column; gap: 12px; text-align: center; }
            .hero-stats { flex-wrap: wrap; gap: 24px; }
            .cta h2 { font-size: 1.8rem; }
        }
        @media (max-width: 480px) {
            .hero-content h1 { font-size: 1.7rem; }
            .hero-card-grid { grid-template-columns: 1fr; }
        }
    </style>
</head>
<body>

<!-- ─── NAVBAR ─── -->
<nav id="navbar">
    <div class="container">
        <a href="#" class="logo">
            <div class="logo-icon">M</div>
            MajuSejahtera
        </a>
        <ul class="nav-links" id="navLinks">
            <li><a href="#about">Tentang</a></li>
            <li><a href="#services">Perkhidmatan</a></li>
            <li><a href="#testimonials">Testimoni</a></li>
            <li><a href="#contact">Hubungi</a></li>
            <li><a href="#contact" class="nav-cta">Dapatkan Tawaran</a></li>
        </ul>
        <button class="hamburger" id="hamburger" aria-label="Toggle menu">
            <span></span><span></span><span></span>
        </button>
    </div>
</nav>

<!-- ─── HERO ─── -->
<section class="hero" id="hero">
    <div class="container">
        <div class="hero-content">
            <h1>Bina Masa Depan <span>Digital</span> Perniagaan Anda</h1>
            <p>Kami menyediakan penyelesaian teknologi termaju untuk membantu perniagaan anda berkembang pesat di era digital.</p>
            <div class="hero-buttons">
                <a href="#contact" class="btn-primary">Mulakan Projek →</a>
                <a href="#services" class="btn-outline">Lihat Perkhidmatan</a>
            </div>
            <div class="hero-stats">
                <div class="hero-stat"><h3>250<span>+</span></h3><p>Projek Selesai</p></div>
                <div class="hero-stat"><h3>98<span>%</span></h3><p>Kepuasan Klien</p></div>
                <div class="hero-stat"><h3>15<span>+</span></h3><p>Tahun Pengalaman</p></div>
            </div>
        </div>
        <div class="hero-visual">
            <div class="hero-card">
                <div class="hero-card-grid">
                    <div class="hc-item">
                        <div class="hc-icon">🚀</div>
                        <h4>Pantas</h4>
                        <p>Prestasi optimum</p>
                    </div>
                    <div class="hc-item">
                        <div class="hc-icon">🔒</div>
                        <h4>Selamat</h4>
                        <p>Data terjamin</p>
                    </div>
                    <div class="hc-item">
                        <div class="hc-icon">📱</div>
                        <h4>Responsif</h4>
                        <p>Semua peranti</p>
                    </div>
                    <div class="hc-item">
                        <div class="hc-icon">⚡</div>
                        <h4>Inovatif</h4>
                        <p>Teknologi terkini</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- ─── PARTNERS ─── -->
<section class="partners">
    <div class="container">
        <p>Dipercayai oleh syarikat-syarikat terkemuka</p>
        <div class="partner-logos">
            <div>TechCorp</div>
            <div>GlobalInovasi</div>
            <div>DigitalAsia</div>
            <div>PrimeSolution</div>
            <div>MegaTech</div>
            <div>FutureLab</div>
        </div>
    </div>
</section>

<!-- ─── ABOUT ─── -->
<section id="about">
    <div class="container">
        <div class="about-grid fade-up">
            <div class="about-image">
                <div class="about-image-inner">
                    <div class="big-number">15</div>
                    <p>Tahun Pengalaman Dalam Industri</p>
                </div>
            </div>
            <div class="about-text">
                <div class="section-label">Tentang Kami</div>
                <h2 class="section-title">Rakan Digital Strategik Anda</h2>
                <p class="section-sub" style="max-width:100%">Sejak 2010, kami telah membantu transformasi digital pelbagai organisasi dari pelbagai sektor.</p>
                <div class="about-features">
                    <div class="af-item">
                        <div class="af-check">✓</div>
                        <div><h4>Pasukan Profesional</h4><p>Lebih 50 pakar dalam pelbagai bidang teknologi.</p></div>
                    </div>
                    <div class="af-item">
                        <div class="af-check">✓</div>
                        <div><h4>Penyelesaian Terbukti</h4><p>Ratusan projek berjaya dengan impak nyata.</p></div>
                    </div>
                    <div class="af-item">
                        <div class="af-check">✓</div>
                        <div><h4>Sokongan 24/7</h4><p>Pasukan sokongan teknikal sedia membantu bila-bila masa.</p></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- ─── SERVICES ─── -->
<section id="services" class="services">
    <div class="container">
        <div class="section-head fade-up">
            <div class="section-label">Perkhidmatan</div>
            <h2 class="section-title">Penyelesaian Komprehensif</h2>
            <p class="section-sub">Dari strategi hingga pelaksanaan, kami menyediakan perkhidmatan lengkap untuk keperluan digital anda.</p>
        </div>
        <div class="services-grid">
            <div class="service-card fade-up">
                <div class="service-icon">🌐</div>
                <h3>Pembangunan Web</h3>
                <p>Laman web korporat, portal, sistem pengurusan kandungan dan aplikasi web tersuai.</p>
            </div>
            <div class="service-card fade-up">
                <div class="service-icon">📱</div>
                <h3>Aplikasi Mudah Alih</h3>
                <p>Aplikasi iOS dan Android dengan pengalaman pengguna yang lancar dan prestasi tinggi.</p>
            </div>
            <div class="service-card fade-up">
                <div class="service-icon">☁️</div>
                <h3>Infrastruktur Awan</h3>
                <p>Penyelesaian awan yang berskala, selamat dan kos efektif untuk perniagaan anda.</p>
            </div>
            <div class="service-card fade-up">
                <div class="service-icon">🤖</div>
                <h3>AI & Analitis Data</h3>
                <p>Kecerdasan buatan dan analitis data untuk membuat keputusan perniagaan yang lebih pintar.</p>
            </div>
            <div class="service-card fade-up">
                <div class="service-icon">🔐</div>
                <h3>Keselamatan Siber</h3>
                <p>Perlindungan menyeluruh terhadap ancaman siber dengan audit keselamatan berkala.</p>
            </div>
            <div class="service-card fade-up">
                <div class="service-icon">📊</div>
                <h3>Perundingan IT</h3>
                <p>Perundingan strategik untuk memaksimumkan pelaburan teknologi organisasi anda.</p>
            </div>
        </div>
    </div>
</section>

<!-- ─── TESTIMONIALS ─── -->
<section id="testimonials">
    <div class="container">
        <div class="section-head fade-up">
            <div class="section-label">Testimoni</div>
            <h2 class="section-title">Apa Kata Klien Kami</h2>
            <p class="section-sub">Pendapat dan pengalaman mereka yang telah bekerjasama dengan kami.</p>
        </div>
        <div class="testimonials-grid">
            <div class="testimonial-card fade-up">
                <div class="stars">★★★★★</div>
                <blockquote>"Pasukan MajuSejahtera benar-benar memahami visi kami. Hasilnya melebihi jangkaan dan prosesnya sangat profesional."</blockquote>
                <div class="testimonial-author">
                    <div class="avatar">AR</div>
                    <div><h4>Ahmad Razak</h4><p>CEO, TechCorp Sdn Bhd</p></div>
                </div>
            </div>
            <div class="testimonial-card fade-up">
                <div class="stars">★★★★★</div>
                <blockquote>"Sistem yang dibangunkan telah meningkatkan produktiviti syarikat kami sebanyak 40%. Sangat berbaloi untuk melabur dengan mereka."</blockquote>
                <div class="testimonial-author">
                    <div class="avatar">SL</div>
                    <div><h4>Sarah Lim</h4><p>Pengarah IT, GlobalInovasi</p></div>
                </div>
            </div>
            <div class="testimonial-card fade-up">
                <div class="stars">★★★★★</div>
                <blockquote>"Sokongan teknikal yang responsif dan penyelesaian yang inovatif. Kami sangat berpuas hati dengan perkhidmatan yang diberikan."</blockquote>
                <div class="testimonial-author">
                    <div class="avatar">MK</div>
                    <div><h4>Mohd Kamal</h4><p>Founder, DigitalAsia</p></div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- ─── CTA ─── -->
<section class="cta">
    <div class="container">
        <h2 class="fade-up">Sedia Untuk Transformasi Digital?</h2>
        <p class="fade-up">Jadualkan sesi perundingan percuma bersama pakar kami dan lihat bagaimana kami boleh membantu perniagaan anda berkembang.</p>
        <a href="#contact" class="btn-primary fade-up">Jadual Perundingan →</a>
    </div>
</section>

<!-- ─── CONTACT ─── -->
<section id="contact">
    <div class="container">
        <div class="section-head fade-up">
            <div class="section-label">Hubungi</div>
            <h2 class="section-title">Mari Bekerjasama</h2>
            <p class="section-sub">Hubungi kami untuk perbincangan lanjut atau sebarang pertanyaan.</p>
        </div>
        <div class="contact-grid">
            <form class="contact-form fade-up" onsubmit="event.preventDefault(); alert('Terima kasih! Mesej anda telah dihantar.');">
                <div class="form-row">
                    <input type="text" placeholder="Nama Penuh" required>
                    <input type="email" placeholder="Alamat Emel" required>
                </div>
                <input type="text" placeholder="Subjek">
                <textarea placeholder="Mesej anda..." required></textarea>
                <button type="submit" class="btn-primary" style="align-self:flex-start">Hantar Mesej →</button>
            </form>
            <div class="contact-info fade-up">
                <div class="ci-item">
                    <div class="ci-icon">📍</div>
                    <div>
                        <h4>Alamat</h4>
                        <p>Level 10, Menara Maju,<br>Jalan Sultan Ismail,<br>50250 Kuala Lumpur</p>
                    </div>
                </div>
                <div class="ci-item">
                    <div class="ci-icon">📧</div>
                    <div>
                        <h4>Emel</h4>
                        <p>hello@majusejahtera.com<br>support@majusejahtera.com</p>
                    </div>
                </div>
                <div class="ci-item">
                    <div class="ci-icon">📞</div>
                    <div>
                        <h4>Telefon</h4>
                        <p>+603-2700 8000<br>+603-2700 8001</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- ─── FOOTER ─── -->
<footer>
    <div class="container">
        <div class="footer-grid">
            <div class="footer-brand">
                <a href="#" class="logo" style="color:white">
                    <div class="logo-icon">M</div>
                    MajuSejahtera
                </a>
                <p>Rakan digital strategik anda dalam transformasi perniagaan. Kami komited untuk memberikan penyelesaian teknologi yang inovatif dan berkesan.</p>
                <div class="footer-social">
                    <a href="#" aria-label="Facebook">fb</a>
                    <a href="#" aria-label="Twitter">tw</a>
                    <a href="#" aria-label="LinkedIn">in</a>
                    <a href="#" aria-label="YouTube">yt</a>
                </div>
            </div>
            <div>
                <h4>Perkhidmatan</h4>
                <ul>
                    <li><a href="#">Pembangunan Web</a></li>
                    <li><a href="#">Aplikasi Mudah Alih</a></li>
                    <li><a href="#">Infrastruktur Awan</a></li>
                    <li><a href="#">AI & Analitis</a></li>
                    <li><a href="#">Keselamatan Siber</a></li>
                </ul>
            </div>
            <div>
                <h4>Syarikat</h4>
                <ul>
                    <li><a href="#">Tentang Kami</a></li>
                    <li><a href="#">Kerjaya</a></li>
                    <li><a href="#">Blog</a></li>
                    <li><a href="#">Rakan Kongsi</a></li>
                    <li><a href="#">Hubungi</a></li>
                </ul>
            </div>
            <div>
                <h4>Sokongan</h4>
                <ul>
                    <li><a href="#">Pusat Bantuan</a></li>
                    <li><a href="#">Dokumentasi</a></li>
                    <li><a href="#">API</a></li>
                    <li><a href="#">Status</a></li>
                    <li><a href="#">Laporan</a></li>
                </ul>
            </div>
        </div>
        <div class="footer-bottom">
            <span>© 2026 PT Maju Sejahtera. Hak Cipta Terpelihara.</span>
            <div class="footer-bottom-links">
                <a href="#">Dasar Privasi</a>
                <a href="#">Terma & Syarat</a>
                <a href="#">Penafian</a>
            </div>
        </div>
    </div>
</footer>

<script>
    // ─── NAVBAR SCROLL ───
    window.addEventListener('scroll', () => {
        document.getElementById('navbar').classList.toggle('scrolled', window.scrollY > 20);
    });

    // ─── MOBILE MENU ───
    const hamburger = document.getElementById('hamburger');
    const navLinks = document.getElementById('navLinks');
    hamburger.addEventListener('click', () => {
        hamburger.classList.toggle('active');
        navLinks.classList.toggle('open');
    });
    navLinks.querySelectorAll('a').forEach(link => {
        link.addEventListener('click', () => {
            hamburger.classList.remove('active');
            navLinks.classList.remove('open');
        });
    });

    // ─── SCROLL REVEAL ───
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.classList.add('visible');
            }
        });
    }, { threshold: 0.15 });

    document.querySelectorAll('.fade-up').forEach(el => observer.observe(el));
</script>

</body>
</html>
