* { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: 'Poppins', sans-serif; background: #f8fafc; color: #1e293b; }
        :root { --primary: #007bff; --primary-dark: #0056b3; }

        /* NAVBAR */
        .navbar { background: white; box-shadow: 0 2px 12px rgba(0,0,0,0.08); position: sticky; top: 0; z-index: 100; }
        .nav-container { max-width: 1200px; margin: 0 auto; padding: 1rem 1.5rem; display: flex; align-items: center; justify-content: space-between; }
        .logo { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; }
        .logo img { height: 40px; }
        .logo span { font-weight: 700; font-size: 1.1rem; color: #1e293b; }
        .nav-links { display: flex; gap: 1.5rem; align-items: center; }
        .nav-links a { text-decoration: none; color: #64748b; font-size: 0.9rem; font-weight: 500; transition: color 0.2s; }
        .nav-links a:hover, .nav-links a.active { color: var(--primary); font-weight: 600; }

        /* HERO */
        .hero {
            background: linear-gradient(135deg, #007bff 0%, #0056b3 60%, #003d80 100%);
            color: white; padding: 5rem 1.5rem 4rem; text-align: center; position: relative; overflow: hidden;
        }
        .hero::before {
            content: ''; position: absolute; top: -50%; left: -50%;
            width: 200%; height: 200%;
            background: radial-gradient(circle, rgba(255,255,255,0.05) 0%, transparent 60%);
        }
        .hero-badge { display: inline-block; background: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.3); padding: 0.4rem 1.2rem; border-radius: 20px; font-size: 0.85rem; margin-bottom: 1.5rem; backdrop-filter: blur(4px); }
        .hero h1 { font-size: 2.8rem; font-weight: 800; margin-bottom: 1rem; line-height: 1.2; }
        .hero p { font-size: 1.1rem; opacity: 0.9; max-width: 600px; margin: 0 auto; line-height: 1.8; }

        /* CONTAINER */
        .container { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }
        .section { padding: 5rem 0; }
        .section-alt { background: white; }
        .section-title { font-size: 1.8rem; font-weight: 800; color: #1e293b; margin-bottom: 0.75rem; }
        .section-subtitle { color: #64748b; font-size: 1rem; line-height: 1.7; max-width: 600px; }
        .badge-label { display: inline-block; background: #eff6ff; color: var(--primary); padding: 0.3rem 1rem; border-radius: 20px; font-size: 0.8rem; font-weight: 600; margin-bottom: 1rem; }

        /* STATS */
        .stats-section { background: white; padding: 3rem 0; border-bottom: 1px solid #f1f5f9; }
        .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; text-align: center; }
        .stat-item { padding: 1.5rem; }
        .stat-number { font-size: 2.5rem; font-weight: 800; color: var(--primary); line-height: 1; margin-bottom: 0.5rem; }
        .stat-label { font-size: 0.9rem; color: #64748b; font-weight: 500; }

        /* STORY */
        .story-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
        .story-image { border-radius: 20px; overflow: hidden; position: relative; }
        .story-image img { width: 100%; height: 400px; object-fit: cover; }
        .story-image-placeholder {
            height: 400px; background: linear-gradient(135deg, #007bff, #0056b3);
            display: flex; align-items: center; justify-content: center;
            color: white; font-size: 6rem; border-radius: 20px;
        }
        .story-image-badge {
            position: absolute; bottom: 20px; left: 20px;
            background: white; border-radius: 12px; padding: 1rem 1.25rem;
            box-shadow: 0 4px 20px rgba(0,0,0,0.15);
        }
        .story-image-badge .badge-num { font-size: 1.5rem; font-weight: 800; color: var(--primary); }
        .story-image-badge .badge-text { font-size: 0.8rem; color: #64748b; }
        .story-content { }
        .story-content p { color: #64748b; line-height: 1.9; margin-bottom: 1.25rem; }

        /* VALUES */
        .values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 3rem; }
        .value-card {
            background: white; border-radius: 16px; padding: 2rem;
            box-shadow: 0 2px 12px rgba(0,0,0,0.06); text-align: center;
            transition: transform 0.2s, box-shadow 0.2s;
        }
        .value-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,0.1); }
        .value-icon {
            width: 64px; height: 64px; border-radius: 16px;
            display: flex; align-items: center; justify-content: center;
            font-size: 1.75rem; margin: 0 auto 1.25rem;
        }
        .value-card h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: 0.5rem; }
        .value-card p { font-size: 0.87rem; color: #64748b; line-height: 1.7; }

        /* WHY US */
        .why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-top: 2rem; }
        .why-item {
            display: flex; gap: 1rem; align-items: flex-start;
            background: white; padding: 1.25rem; border-radius: 12px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        }
        .why-icon { width: 44px; height: 44px; border-radius: 10px; background: #eff6ff; color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; }
        .why-item h4 { font-size: 0.95rem; font-weight: 600; margin-bottom: 0.25rem; }
        .why-item p { font-size: 0.83rem; color: #64748b; line-height: 1.6; }

        /* CTA */
        .cta-section {
            background: linear-gradient(135deg, #007bff, #0056b3);
            color: white; padding: 5rem 1.5rem; text-align: center;
        }
        .cta-section h2 { font-size: 2rem; font-weight: 800; margin-bottom: 1rem; }
        .cta-section p { opacity: 0.9; margin-bottom: 2rem; font-size: 1rem; }
        .cta-btns { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
        .btn-white { padding: 0.85rem 2rem; background: white; color: var(--primary); border-radius: 10px; text-decoration: none; font-weight: 700; transition: transform 0.2s; }
        .btn-white:hover { transform: translateY(-2px); }
        .btn-outline-white { padding: 0.85rem 2rem; background: transparent; color: white; border: 2px solid rgba(255,255,255,0.6); border-radius: 10px; text-decoration: none; font-weight: 600; transition: all 0.2s; }
        .btn-outline-white:hover { background: rgba(255,255,255,0.1); }

        /* FOOTER */
        footer { background: #1e293b; color: #94a3b8; padding: 2rem 1.5rem; text-align: center; font-size: 0.88rem; }
        footer a { color: #94a3b8; text-decoration: none; }

        /* RESPONSIVE */
        html, body { overflow-x: hidden; max-width: 100%; }

        /* Tombol kembali mobile */
        .back-link-mobile {
            display: none;
            color: var(--primary);
            font-weight: 600;
            font-size: 0.85rem;
            text-decoration: none;
            align-items: center;
            gap: 0.4rem;
            white-space: nowrap;
        }

        @media (max-width: 768px) {
            .back-link-mobile { display: flex; }
            .nav-links { display: none; }
            .nav-container { padding: 0.75rem 1rem; }
            .logo img { height: 32px; }
            .logo span { font-size: 0.9rem; }

            .hero { padding: 3rem 1rem 2.5rem; }
            .hero h1 { font-size: 1.5rem; }
            .hero p { font-size: 0.9rem; }

            .stats-section { padding: 2rem 0; }
            .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
            .stat-number { font-size: 1.8rem; }
            .stat-label { font-size: 0.82rem; }

            .section { padding: 3rem 0; }
            .container { padding: 0 1rem; }
            .section-title { font-size: 1.4rem; }

            .story-grid { grid-template-columns: 1fr; gap: 1.5rem; }
            .story-image img { height: 250px; }
            .story-image-placeholder { height: 250px; font-size: 4rem; }

            .values-grid { grid-template-columns: 1fr 1fr; gap: 1rem; }
            .value-card { padding: 1.25rem; }
            .value-card h3 { font-size: 0.95rem; }
            .value-card p { font-size: 0.82rem; }

            .why-grid { grid-template-columns: 1fr; gap: 0.75rem; }

            .cta-section { padding: 3rem 1rem; }
            .cta-section h2 { font-size: 1.5rem; }
            .cta-btns { flex-direction: column; align-items: center; }
            .btn-white, .btn-outline-white { width: 100%; text-align: center; justify-content: center; display: flex; align-items: center; gap: 0.5rem; }
        }

        @media (max-width: 480px) {
            .values-grid { grid-template-columns: 1fr; }
            .stats-grid { grid-template-columns: repeat(2, 1fr); }
        }