/* ============================================================
   ASSERA - Academic System ERA
   Main Stylesheet
   ============================================================
   Urutan:
   1.  CSS Variables (Token warna, font, dll)
   2.  Reset & Base
   3.  Utility Classes
   4.  Navbar
   5.  Section Hero
   6.  Section Problem
   7.  Section Comparison
   8.  Section Solution
   9.  Section Modules
   10. Section Market
   11. Section Pricing
   12. Section CTA
   13. Footer
   14. Scroll Top Button
   15. Animasi Reveal (Scroll)
   16. Responsive (Mobile)
============================================================ */


/* ============================================================
   1. CSS VARIABLES - Token Desain Global
============================================================ */
:root {
    /* --- Warna Utama (Soft Blue-Teal Palette) --- */
    --clr-primary:     #2196C4;   /* Biru ASSERA soft */
    --clr-primary-dk:  #1976A2;   /* Biru lebih dalam */
    --clr-secondary:   #2DA884;   /* Teal/hijau soft */
    --clr-accent:      #4C8FC8;   /* Biru aksen */

    /* --- Warna Netral --- */
    --clr-dark:        #1A2E40;   /* Dark blue-slate (footer/teks utama) */
    --clr-dark-2:      #243447;   /* Sedikit lebih terang */
    --clr-dark-3:      #3A5068;   /* Border gelap */
    --clr-light:       #F0F8FF;   /* Background terang — light blue-white */
    --clr-white:       #FFFFFF;

    /* --- Teks --- */
    --clr-text:        #1E3A4C;   /* Biru-slate gelap */
    --clr-text-muted:  #5B7A90;   /* Muted blue-gray */
    --clr-text-light:  #90AABB;   /* Light blue-gray */

    /* --- Gradien --- */
    --grad-primary:    linear-gradient(135deg, #2196C4, #2DA884);

    /* Hero: gradasi lebih kuat dan bervariasi (putih ke biru cerah ke biru laut) */
    --grad-hero:       linear-gradient(135deg,
                           #FFFFFF 0%,
                           #E6F4FF 35%,
                           #B0DEFF 75%,
                           #6CC5FF 100%);

    /* Market section: soft deep blue (bukan hitam) */
    --grad-market:     linear-gradient(135deg, #1A3A5C 0%, #1E5478 50%, #1A4A6A 100%);

    --clr-hero-text:   #1A2E40;   /* Teks gelap di atas hero terang */

    /* --- Font --- */
    --font-main:       'Plus Jakarta Sans', sans-serif;

    /* --- Ukuran --- */
    --radius-sm:       8px;
    --radius-md:       16px;
    --radius-lg:       24px;
    --radius-xl:       32px;
    --radius-full:     9999px;

    /* --- Shadow --- */
    --shadow-sm:       0 2px 8px rgba(33, 150, 196, 0.08);
    --shadow-md:       0 8px 24px rgba(33, 150, 196, 0.12);
    --shadow-lg:       0 16px 48px rgba(33, 150, 196, 0.16);
    --shadow-glow:     0 0 40px rgba(33, 150, 196, 0.22);

    /* --- Transisi --- */
    --transition:      all 0.3s ease;
    --transition-slow: all 0.6s ease;
}


/* ============================================================
   2. RESET & BASE STYLES
============================================================ */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: var(--font-main);
    color: var(--clr-text);
    background: var(--clr-white);
    line-height: 1.65;
    overflow-x: hidden;
}

img {
    max-width: 100%;
    display: block;
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
}

ul {
    list-style: none;
}

button {
    cursor: pointer;
    border: none;
    background: none;
    font-family: var(--font-main);
}


/* ============================================================
   3. UTILITY CLASSES
============================================================ */

/* --- Container Lebar Halaman --- */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

/* --- Gradient Text --- */
.gradient-text {
    background: var(--grad-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.gradient-text-red {
    background: linear-gradient(135deg, #EF4444, #F97316);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* --- Section Label Pill --- */
.section-label {
    text-align: center;
    margin-bottom: 16px;
}

.label-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    border-radius: var(--radius-full);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.label-red    { background: #FEE2E2; color: #DC2626; }
.label-blue   { background: #DBEAFE; color: #1D4ED8; }
.label-green  { background: #D1FAE5; color: #065F46; }
.label-indigo { background: #EDE9FE; color: #5B21B6; }
.label-teal   { background: rgba(255,255,255,0.15); color: #fff; border: 1px solid rgba(255,255,255,0.3); }

/* --- Section Title & Subtitle --- */
.section-title {
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    font-weight: 800;
    text-align: center;
    line-height: 1.25;
    margin-bottom: 16px;
    color: var(--clr-dark);
}

.section-subtitle {
    font-size: 1.05rem;
    color: var(--clr-text-muted);
    text-align: center;
    max-width: 600px;
    margin: 0 auto 56px;
    line-height: 1.7;
}

/* --- Tombol Button --- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    border-radius: var(--radius-full);
    font-size: 0.95rem;
    font-weight: 700;
    transition: var(--transition);
    cursor: pointer;
    border: 2px solid transparent;
}

.btn-primary {
    background: var(--grad-primary);
    color: #fff;
    box-shadow: 0 4px 20px rgba(14,165,233,0.4);
}
.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(14,165,233,0.5);
}

.btn-outline {
    background: transparent;
    color: var(--clr-primary);
    border-color: var(--clr-primary);
}
.btn-outline:hover {
    background: var(--clr-primary);
    color: #fff;
}

.btn-white {
    background: #fff;
    color: var(--clr-primary-dk);
    font-weight: 700;
}
.btn-white:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn-whatsapp {
    background: #25D366;
    color: #fff;
    box-shadow: 0 4px 20px rgba(37,211,102,0.4);
}
.btn-whatsapp:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(37,211,102,0.5);
}

.btn-sm  { padding: 8px 18px; font-size: 0.85rem; }
.btn-lg  { padding: 16px 36px; font-size: 1rem; }
.btn-full { width: 100%; justify-content: center; }

/* --- Badge Pill --- */
.badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, rgba(14,165,233,0.12), rgba(16,185,129,0.12));
    border: 1px solid rgba(14,165,233,0.3);
    color: var(--clr-primary);
    padding: 8px 18px;
    border-radius: var(--radius-full);
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 20px;
}


/* ============================================================
   4. NAVBAR - Navigasi Atas
============================================================ */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 18px 0;
    transition: var(--transition);
    /* Default: transparan */
}

/* Saat di-scroll, navbar berubah jadi solid */
.navbar.scrolled {
    background: rgba(255, 255, 255, 0.90);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    padding: 12px 0;
    box-shadow: var(--shadow-sm);
}

.navbar .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

/* --- Logo (gambar PNG) --- */
.nav-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.nav-logo-img {
    height: 58px;
    width: auto;
    object-fit: contain;
    display: block;
    /* Hero sekarang terang, pakai logo warna asli */
    filter: none;
    transition: var(--transition);
}

/* Saat navbar scrolled (putih), logo tetap warna asli */
.navbar.scrolled .nav-logo-img {
    filter: none;
}

/* --- Menu Desktop --- */
.nav-menu {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Default: di atas hero terang, link berwarna gelap */
.nav-link {
    padding: 8px 14px;
    border-radius: var(--radius-full);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--clr-dark);
    transition: var(--transition);
}
.nav-link:hover,
.nav-link.active {
    color: var(--clr-primary);
    background: rgba(33, 150, 196, 0.10);
}

/* Setelah scroll — link tetap gelap */
.navbar.scrolled .nav-link {
    color: var(--clr-text-muted);
}
.navbar.scrolled .nav-link:hover,
.navbar.scrolled .nav-link.active {
    color: var(--clr-primary);
    background: rgba(33, 150, 196, 0.08);
}

/* CTA button di navbar (atas hero terang) */
.navbar:not(.scrolled) .btn-primary {
    background: var(--grad-primary);
    border: 2px solid transparent;
    color: #fff;
    box-shadow: 0 4px 16px rgba(33, 150, 196, 0.30);
}
.navbar:not(.scrolled) .btn-primary:hover {
    box-shadow: 0 6px 24px rgba(33, 150, 196, 0.45);
    transform: translateY(-2px);
}

/* --- Hamburger Mobile --- */
.hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: 8px;
}
.hamburger span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--clr-dark);
    border-radius: 2px;
    transition: var(--transition);
}
.navbar.scrolled .hamburger span {
    background: var(--clr-dark);
}
.hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }


/* ============================================================
   5. SECTION HERO - Banner Utama (Compact Banner Style)
============================================================ */
.hero {
    min-height: 520px;
    background: var(--grad-hero);
    display: flex;
    align-items: center;
    padding: 110px 0 60px;
    position: relative;
    overflow: hidden;
}

/* ---- Islamic geometric pattern overlay (soft, subtle) ---- */
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='rgba(255,255,255,0.30)' stroke-width='1'%3E%3Cpath d='M40 5 L75 22.5 L75 57.5 L40 75 L5 57.5 L5 22.5 Z'/%3E%3Cpath d='M40 15 L65 27.5 L65 52.5 L40 65 L15 52.5 L15 27.5 Z'/%3E%3Cpath d='M40 0 L40 80 M0 40 L80 40'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 80px 80px;
    pointer-events: none;
    z-index: 0;
}

/* ---- Soft glow kanan ---- */
.hero-glow {
    position: absolute;
    width: 600px;
    height: 600px;
    right: 5%;
    top: 50%;
    transform: translateY(-50%);
    background: radial-gradient(circle, rgba(255,255,255,0.55) 0%, rgba(160,220,240,0.20) 40%, transparent 70%);
    pointer-events: none;
    z-index: 1;
}

/* ---- Hero pattern div (extra geometric lines like reference) ---- */
.hero-pattern {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(120deg, transparent 55%, rgba(255,255,255,0.06) 55%, rgba(255,255,255,0.06) 58%, transparent 58%),
        linear-gradient(120deg, transparent 60%, rgba(255,255,255,0.04) 60%, rgba(255,255,255,0.04) 64%, transparent 64%);
    pointer-events: none;
    z-index: 1;
}

/* Blob dekorasi */
.hero-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.55;
    pointer-events: none;
    animation: float 8s ease-in-out infinite;
    z-index: 0;
}
.hero-blob-1 {
    width: 500px; height: 500px;
    background: rgba(255, 255, 255, 0.50);
    top: -100px; right: -60px;
    animation-delay: 0s;
}
.hero-blob-2 {
    width: 350px; height: 350px;
    background: rgba(45, 168, 132, 0.18);
    bottom: -80px; left: -60px;
    animation-delay: 2s;
}

/* Animasi floating */
@keyframes float {
    0%, 100% { transform: translateY(0) scale(1); }
    50%       { transform: translateY(-18px) scale(1.04); }
}

/* === Layout 2 kolom: teks kiri 58%, gambar kanan 42% === */
.hero-content {
    display: grid;
    grid-template-columns: 58% 42%;
    gap: 0;
    align-items: stretch;
    position: relative;
    z-index: 2;
    min-height: 400px;
}

/* --- Teks Kiri Hero --- */
.hero-text {
    position: relative;
    z-index: 3;
    padding-right: 20px;
    align-self: center;      /* teks tetap center vertikal */
}


/* Judul kecil di atas */
.hero-title {
    font-size: clamp(1.1rem, 2.5vw, 1.4rem);
    font-weight: 500;
    line-height: 1.4;
    color: var(--clr-dark);
    margin-bottom: 6px;
    letter-spacing: -0.01em;
}

/* Judul besar tebal */
.hero-title-big {
    display: block;
    font-size: clamp(2rem, 5vw, 3.2rem);
    font-weight: 800;
    color: var(--clr-dark);
    line-height: 1.1;
    letter-spacing: -0.03em;
    margin-bottom: 16px;
}

.hero-desc {
    font-size: 0.95rem;
    color: var(--clr-text-muted);
    margin-bottom: 32px;
    line-height: 1.6;
}

.hero-buttons {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

/* Tombol biru solid "Daftar Sekarang" */
.btn-hero-primary {
    background: var(--grad-primary);
    color: #fff;
    border: 2px solid transparent;
    padding: 13px 28px;
    border-radius: var(--radius-full);
    font-size: 0.92rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 20px rgba(33, 150, 196, 0.40);
    transition: var(--transition);
    cursor: pointer;
}
.btn-hero-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(33, 150, 196, 0.55);
}

/* Tombol outline biru "Request Demo" */
.btn-hero-outline {
    background: rgba(255, 255, 255, 0.60);
    color: var(--clr-primary-dk);
    border: 2px solid rgba(33, 150, 196, 0.40);
    padding: 13px 28px;
    border-radius: var(--radius-full);
    font-size: 0.92rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: var(--transition);
    cursor: pointer;
}
.btn-hero-outline:hover {
    background: rgba(255, 255, 255, 0.90);
    border-color: var(--clr-primary);
    color: var(--clr-primary);
    transform: translateY(-2px);
}

/* --- Visual Kanan: Gambar pojok kanan bawah --- */
.hero-visual {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;   /* tempel ke bawah */
    align-self: stretch;
    margin-right: -24px;     /* keluar ke tepi container */
}

/* Wrapper luar */
.hero-img-outer {
    position: relative;
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
}

/* Wrap gambar — fade SEMUA 4 sisi agar tidak tampak sebagai kotak */
.hero-img-wrap {
    position: relative;

    /* Fade kiri + kanan + atas + bawah sekaligus */
    -webkit-mask-image:
        linear-gradient(to right,
            transparent  0%,
            black        22%,
            black        80%,
            transparent 100%
        ),
        linear-gradient(to bottom,
            transparent  0%,
            black         6%,
            black        88%,
            transparent 100%
        );
    -webkit-mask-composite: destination-in;
    mask-image:
        linear-gradient(to right,
            transparent  0%,
            black        22%,
            black        80%,
            transparent 100%
        ),
        linear-gradient(to bottom,
            transparent  0%,
            black         6%,
            black        88%,
            transparent 100%
        );
    mask-composite: intersect;
}

/* Glow sisi kiri gambar (arah teks) */
.hero-img-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(
        ellipse 55% 70% at 25% 50%,
        rgba(255,255,255,0.55) 0%,
        rgba(180,225,245,0.25) 45%,
        transparent 68%
    );
    filter: blur(24px);
    z-index: 0;
    pointer-events: none;
    animation: glowPulse 4s ease-in-out infinite alternate;
}

@keyframes glowPulse {
    0%   { opacity: 0.70; transform: scale(0.97); }
    100% { opacity: 1.00; transform: scale(1.04); }
}

.hero-student-img {
    position: relative;
    z-index: 1;
    max-height: 460px;       /* sedikit lebih tinggi */
    width: auto;
    max-width: 110%;
    object-fit: contain;
    object-position: center bottom;
    display: block;
    margin-left: auto;
    animation: float 7s ease-in-out infinite;
}

/* Badge floating — di luar .hero-img-wrap agar tidak terpotong mask */
.floating-badge {
    position: absolute;
    background: rgba(255,255,255,0.92);
    border-radius: var(--radius-full);
    padding: 10px 18px;
    box-shadow: 0 6px 20px rgba(33, 150, 196, 0.18);
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--clr-dark);
    border: 1px solid rgba(33, 150, 196, 0.15);
    backdrop-filter: blur(10px);
    animation: float 6s ease-in-out infinite;
    white-space: nowrap;
    z-index: 10;
}
.floating-badge i { color: var(--clr-primary); }

.badge-top {
    top: 8%;
    right: -5px;
    animation-delay: 1s;
}
.badge-bottom {
    bottom: 12%;
    left: -10px;
    animation-delay: 3s;
}


/* ---- Footer logo ---- */
.footer-logo-wrap {
    margin-bottom: 16px;
}
.footer-logo-img {
    height: 56px;
    width: auto;
    object-fit: contain;
    display: block;
    filter: brightness(0) invert(1);
    opacity: 0.9;
}



/* ============================================================
   6b. SECTION PROBLEMS — Masalah yang Kami Selesaikan
============================================================ */
.problems-section {
    padding: 100px 0;
    background: var(--clr-white);
}

/* Grid 2 kolom: kiri 1fr, kanan 1.5fr */
.problems-inner {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 80px;
    align-items: center;
}

/* ── Kolom Kiri ── */
.prob-left { }

.prob-section-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--clr-secondary);
    margin-bottom: 16px;
}

.prob-title-big {
    font-size: clamp(1.8rem, 3.5vw, 2.6rem);
    font-weight: 800;
    color: var(--clr-dark);
    line-height: 1.2;
    margin-bottom: 16px;
}

.prob-desc-main {
    font-size: 0.95rem;
    color: var(--clr-text-muted);
    line-height: 1.75;
    margin-bottom: 28px;
    max-width: 380px;
}

/* Wrapper arrow + pill */
.prob-cta-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: fit-content;
}

/* Lingkaran → */
.prob-arrow-btn {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--grad-primary);
    color: #fff;
    font-size: 1.3rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 20px rgba(33, 150, 196, 0.35);
    transition: var(--transition);
}
.prob-arrow-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(33, 150, 196, 0.45);
}

/* Pill "ASSERA ADALAH SOLUSINYA" */
.prob-solution-pill {
    display: inline-flex;
    align-items: center;
    padding: 7px 18px;
    border: 1.5px solid var(--clr-secondary);
    border-radius: var(--radius-full);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--clr-secondary);
}

/* ── Kolom Kanan: Cards ── */
.prob-cards {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.prob-card {
    display: flex;
    gap: 16px;
    padding: 20px 24px;
    border-radius: var(--radius-md);
    border: 1px solid #E2E8F0;
    background: var(--clr-white);
    transition: var(--transition);
    align-items: flex-start;
}
.prob-card:hover {
    border-color: #FFCDD2;
    box-shadow: 0 8px 32px rgba(198, 40, 40, 0.08);
    transform: translateX(4px);
}

.prob-icon-wrap {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.prob-icon-wrap i {
    font-size: 1.25rem;
    color: #fff;
}
.prob-card:hover .prob-icon-wrap {
    transform: scale(1.1) rotate(-5deg);
}

/* Variant Merah — Aplikasi Terpisah */
.prob-icon-red {
    background: linear-gradient(135deg, #EF4444, #B91C1C);
    box-shadow: 0 6px 18px rgba(239, 68, 68, 0.35);
}
.prob-card:hover .prob-icon-red {
    box-shadow: 0 10px 28px rgba(239, 68, 68, 0.50);
}

/* Variant Orange — Waktu Terbuang */
.prob-icon-orange {
    background: linear-gradient(135deg, #F97316, #C2410C);
    box-shadow: 0 6px 18px rgba(249, 115, 22, 0.35);
}
.prob-card:hover .prob-icon-orange {
    box-shadow: 0 10px 28px rgba(249, 115, 22, 0.50);
}

/* Variant Ungu — Orang Tua Tidak Tahu */
.prob-icon-purple {
    background: linear-gradient(135deg, #8B5CF6, #6D28D9);
    box-shadow: 0 6px 18px rgba(139, 92, 246, 0.35);
}
.prob-card:hover .prob-icon-purple {
    box-shadow: 0 10px 28px rgba(139, 92, 246, 0.50);
}

.prob-card-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #C62828;
    margin-bottom: 6px;
}

.prob-card-desc {
    font-size: 0.845rem;
    color: var(--clr-text-muted);
    line-height: 1.65;
}

/* Responsive */
@media (max-width: 900px) {
    .problems-inner { grid-template-columns: 1fr; gap: 48px; }
    .prob-desc-main { max-width: 100%; }
    .prob-cta-wrap  { align-items: flex-start; }
}


/* ============================================================
   6a. SECTION USP - Keunggulan / Value Proposition
============================================================ */
.usp {
    position: relative;
    padding: 120px 0 100px;
    background: linear-gradient(180deg, #ffffff 0%, #f0f8ff 100%);
    overflow: hidden;
}

/* Blob dekorasi */
.usp-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: 0.45;
    pointer-events: none;
    z-index: 0;
}
.usp-blob-1 {
    width: 500px; height: 500px;
    background: rgba(33, 150, 196, 0.14);
    top: -100px; left: -100px;
    animation: float 10s ease-in-out infinite;
}
.usp-blob-2 {
    width: 400px; height: 400px;
    background: rgba(45, 168, 132, 0.12);
    bottom: -80px; right: -80px;
    animation: float 12s ease-in-out infinite reverse;
}

/* Label pill khusus USP */
.label-usp {
    background: linear-gradient(135deg, rgba(33,150,196,0.12), rgba(45,168,132,0.12));
    color: var(--clr-primary-dk);
    border: 1.5px solid rgba(33,150,196,0.25);
}

/* Grid 4 kartu */
.usp-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    position: relative;
    z-index: 1;
    margin-bottom: 40px;
}

/* Kartu USP */
.usp-card {
    background: #fff;
    border-radius: 22px;
    padding: 28px 24px 24px;
    border: 1.5px solid rgba(33, 150, 196, 0.10);
    box-shadow: 0 8px 32px rgba(33, 150, 196, 0.08);
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
}
.usp-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 48px rgba(33, 150, 196, 0.15);
}

/* Kartu BINTANG – Al Bi'ah (UNIQUE!) */
.usp-card-star {
    background: linear-gradient(145deg, #fffbeb, #fff);
    border: 2px solid rgba(245, 158, 11, 0.30);
    box-shadow: 0 8px 40px rgba(245, 158, 11, 0.15);
}
.usp-card-star:hover {
    box-shadow: 0 18px 56px rgba(245, 158, 11, 0.22);
}

/* Badge "UNIK!" di pojok */
.usp-star-badge {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #F59E0B, #EF4444);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 800;
    padding: 5px 14px;
    border-radius: var(--radius-full);
    letter-spacing: 0.5px;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 5px;
    box-shadow: 0 4px 14px rgba(239, 68, 68, 0.35);
    animation: pulseGlow 2.5s ease-in-out infinite;
}

@keyframes pulseGlow {
    0%, 100% { box-shadow: 0 4px 14px rgba(239, 68, 68, 0.35); }
    50%       { box-shadow: 0 6px 24px rgba(239, 68, 68, 0.55); }
}

/* Icon wrap bulat berwarna */
.usp-icon-wrap {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 8px;
}
.usp-icon-wrap i {
    font-size: 1.5rem;
    color: #fff;
}

/* Judul kartu */
.usp-title {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--clr-dark);
    line-height: 1.3;
    margin: 0;
}

/* Deskripsi */
.usp-desc {
    font-size: 0.875rem;
    color: var(--clr-text-muted);
    line-height: 1.65;
    flex: 1;
}
.usp-desc strong {
    color: var(--clr-primary-dk);
}

/* Tag row bawah kartu */
.usp-tag-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}
.usp-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(33, 150, 196, 0.08);
    color: var(--clr-primary-dk);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: var(--radius-full);
}
.usp-tag i {
    color: var(--clr-secondary);
    font-size: 0.7rem;
}
.usp-card-star .usp-tag {
    background: rgba(245, 158, 11, 0.10);
    color: #92400E;
}
.usp-card-star .usp-tag i {
    color: #F59E0B;
}

/* Banner CTA bawah */
.usp-cta-banner {
    background: linear-gradient(135deg, var(--clr-primary), var(--clr-secondary));
    border-radius: 20px;
    padding: 24px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    box-shadow: 0 12px 40px rgba(33, 150, 196, 0.25);
    position: relative;
    z-index: 1;
}

.usp-cta-left {
    display: flex;
    align-items: center;
    gap: 16px;
}
.usp-cta-left > i {
    font-size: 2rem;
    color: rgba(255,255,255,0.80);
    flex-shrink: 0;
}
.usp-cta-left div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.usp-cta-left strong {
    color: #fff;
    font-size: 1rem;
    font-weight: 800;
}
.usp-cta-left span {
    color: rgba(255,255,255,0.75);
    font-size: 0.85rem;
}

.usp-cta-banner .btn-primary {
    background: #fff;
    color: var(--clr-primary-dk);
    box-shadow: 0 4px 20px rgba(0,0,0,0.12);
    white-space: nowrap;
    flex-shrink: 0;
}
.usp-cta-banner .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(0,0,0,0.18);
}


/* ============================================================
   6. SECTION SHOWCASE - Masalah & Solusi (New Side-by-Side Unified Design)
============================================================ */
.showcase {
    position: relative;
    padding: 120px 0;
    background: #e6f4ff; /* Soft blue sky */
    overflow: hidden;
}

/* Pola background gelembung/air ala referensi */
.showcase-bg-pattern {
    position: absolute;
    inset: 0;
    opacity: 0.6;
    background-image: 
        radial-gradient(circle at 15% 50%, rgba(255, 255, 255, 0.4) 0%, transparent 20%),
        radial-gradient(circle at 85% 30%, rgba(255, 255, 255, 0.4) 0%, transparent 20%),
        radial-gradient(circle at 50% 80%, rgba(255, 255, 255, 0.3) 0%, transparent 25%),
        radial-gradient(circle at 70% 60%, rgba(160, 220, 240, 0.5) 0%, transparent 35%);
    pointer-events: none;
    z-index: 0;
}

/* Container utama grid showcase */
.showcase-grid {
    display: flex;
    flex-direction: column;
    gap: 60px;
    position: relative;
    z-index: 1;
    max-width: 1000px;
    margin: 0 auto;
}

/* Card Raksasa (Kiri & Kanan) - Glassmorphism */
.showcase-card {
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 28px;
    padding: 32px;
    box-shadow: 0 16px 48px rgba(33, 150, 196, 0.1);
    display: flex;
    flex-direction: column;
}

.showcase-badge-wrap {
    text-align: center;
    margin-bottom: 24px;
}

.s-badge {
    display: inline-block;
    padding: 8px 24px;
    border-radius: var(--radius-full);
    font-size: 0.9rem;
    font-weight: 700;
    color: #fff;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.badge-blue { background: linear-gradient(135deg, #1D4ED8, #3B82F6); }
.badge-teal { background: linear-gradient(135deg, #0EA5E9, #10B981); }

.s-badge i { font-size: 0.8rem; margin-left: 4px; }

.showcase-title {
    text-align: center;
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 800;
    color: var(--clr-dark);
    margin-bottom: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
}

.badge-inline {
    background: #10B981;
    color: #fff;
    font-size: 0.8rem;
    padding: 4px 10px;
    border-radius: 12px;
    display: inline-block;
    transform: translateY(-4px);
    box-shadow: 0 4px 10px rgba(16, 185, 129, 0.3);
}

/* Placeholder Gambar untuk Visual Kiri */
.showcase-visual {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 40px;
}
.showcase-main-img {
    max-width: 100%;
    max-height: 340px;
    object-fit: contain;
    border-radius: 20px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.1);
    margin: 0 auto;
    display: block;
    animation: float 6s ease-in-out infinite;
}

/* Internal Split Cards for Comparison */
.comp-cards-split {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 32px;
    flex-grow: 1;
}

.comp-inner-card {
    flex: 1;
    background: #fff;
    border-radius: 16px;
    padding: 16px;
    text-align: center;
    box-shadow: 0 4px 16px rgba(0,0,0,0.05);
    border: 1px solid rgba(0,0,0,0.03);
    position: relative;
    overflow: hidden;
    transition: var(--transition);
}
.comp-inner-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(33, 150, 196, 0.12);
}

.comp-inner-img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 12px;
    margin-top: 8px;
}

.comp-inner-label {
    font-size: 0.95rem;
    font-weight: 800;
    margin-bottom: 8px;
}
.text-red { color: #DC2626; }
.text-green { color: #10B981; }

.comp-arrow-center {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: var(--grad-primary);
    color: #fff;
    border-radius: 50%;
    font-size: 1.2rem;
    box-shadow: 0 4px 12px rgba(33, 150, 196, 0.3);
    flex-shrink: 0;
    z-index: 2;
    margin: 0 -8px;
}

/* Stats Kotak Kiri bawah visual */
.showcase-stats-wrap {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 16px;
    background: linear-gradient(135deg, #ECF6FC 0%, #A9DDF6 100%);
    border: 1px solid rgba(255, 255, 255, 0.7);
    padding: 24px;
    border-radius: 20px;
    box-shadow: 0 12px 32px rgba(33, 150, 196, 0.12);
}

.s-stat-box { flex: 1; text-align: center; }

.s-stat-num-small {
    font-size: 2.6rem;
    font-weight: 800;
    color: #1A2E40;
    margin-bottom: 2px;
    line-height: 1;
    letter-spacing: -1px;
}

.s-stat-symbol {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--clr-primary);
    line-height: 1;
    margin-bottom: 12px;
}

.s-stat-title {
    font-size: 0.95rem;
    font-weight: 800;
    color: #1A2E40;
    margin-bottom: 6px;
}

.s-stat-desc {
    font-size: 0.8rem;
    font-weight: 500;
    color: #4A6A80;
    display: block;
    line-height: 1.5;
}

.s-stat-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #CBD5E1;
    font-size: 1.5rem;
}

/* Feature Grid Kanan (Solusi Islam) */
.showcase-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    flex-grow: 1;
    margin-bottom: 32px;
}

.sf-item {
    background: #fff;
    border-radius: 20px;
    padding: 24px 16px;
    text-align: center;
    box-shadow: 0 8px 24px rgba(33, 150, 196, 0.06);
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 1px solid rgba(0,0,0,0.03);
    transition: var(--transition);
}
.sf-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(33, 150, 196, 0.12);
}

.sf-item-center {
    transform: scale(1.05); /* Card tengah dibikin lebih besar sedikit seperti referensi */
    box-shadow: 0 12px 32px rgba(16, 185, 129, 0.15);
    border-color: rgba(16, 185, 129, 0.2);
    z-index: 2;
}
.sf-item-center:hover { transform: scale(1.05) translateY(-5px); }

.sf-icon-img {
    width: 80px;
    height: 80px;
    object-fit: contain;
    margin-bottom: 20px;
    filter: drop-shadow(0 8px 12px rgba(16, 185, 129, 0.15));
    mix-blend-mode: multiply;
    transition: var(--transition);
}
.sf-item:hover .sf-icon-img {
    transform: scale(1.1) translateY(-4px);
    filter: drop-shadow(0 12px 20px rgba(16, 185, 129, 0.25));
}

.sf-item h4 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--clr-dark);
    margin-bottom: 8px;
    line-height: 1.3;
}
.sf-item p {
    font-size: 0.8rem;
    color: var(--clr-text-muted);
    line-height: 1.5;
}

/* Footer Card Kanan (Eksklusif) */
.sf-footer {
    text-align: center;
    font-weight: 700;
    color: #1E3A4C;
    font-size: 1rem;
    padding-top: 16px;
    border-top: 1px solid rgba(0,0,0,0.05);
}

/* ============================================================
   9. SECTION MODULES - Modul All-in-One
============================================================ */
.modules {
    padding: 100px 0;
    background: var(--clr-light);
}

/* Grid 3x3 ikon modul */
.modules-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 32px;
}

.module-item {
    background: #fff;
    border-radius: var(--radius-md);
    padding: 28px 20px;
    text-align: center;
    border: 1px solid #E2E8F0;
    transition: var(--transition);
    cursor: default;
}
.module-item:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
    border-color: var(--clr-primary);
}

.module-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.4rem;
    margin: 0 auto 14px;
}

.module-item span {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--clr-text);
}

/* Catatan kecil bawah grid modul */
.modules-note {
    text-align: center;
    font-size: 0.9rem;
    color: var(--clr-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.modules-note i { color: var(--clr-primary); }



/* ============================================================
   9b. SECTION FEATURES — Mod Card Grid (New Design)
============================================================ */
.mod-section {
    padding: 100px 0;
    background: var(--clr-light);
}

/* Grid 4 kolom responsive */
.mod-card-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 8px;
}

/* Kartu dasar (putih) */
.mod-card {
    background: var(--clr-white);
    border: 1px solid #E2E8F0;
    border-radius: var(--radius-lg);
    padding: 24px 20px;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.mod-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--clr-light), transparent);
    opacity: 0;
    transition: opacity 0.3s;
}
.mod-card:hover {
    border-color: rgba(33,150,196,0.3);
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
}
.mod-card:hover::before { opacity: 1; }

/* Kartu EKSKLUSIF — gelap hijau tua */
.mod-card-exclusive {
    background: linear-gradient(135deg, #004D40, #00695C);
    border: none;
}
.mod-card-exclusive::before { display: none; }
.mod-card-exclusive:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(0,77,64,.35);
    border: none;
}

/* Variasi teal sedikit lebih terang untuk Tahfizh */
.mod-card-teal {
    background: linear-gradient(135deg, #00695C, #00897B);
}

/* Icon wrapper */
.mod-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    margin-bottom: 4px;
    position: relative;
    z-index: 1;
    flex-shrink: 0;
}
.mod-icon-blue  { background: var(--clr-light); }
.mod-icon-teal  { background: rgba(45,168,132,0.12); }
.mod-icon-white { background: rgba(255,255,255,0.15); }

/* Badge eksklusif */
.mod-exclusive-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(77,208,225,0.20);
    color: #4DD0E1;
    font-size: 0.68rem;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    border: 1px solid rgba(77,208,225,0.30);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    width: fit-content;
    position: relative;
    z-index: 1;
}

/* Nama modul */
.mod-card-name {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--clr-dark);
    line-height: 1.3;
    position: relative;
    z-index: 1;
}
.mod-card-exclusive .mod-card-name { color: var(--clr-white); }

/* Deskripsi */
.mod-card-desc {
    font-size: 0.8rem;
    color: var(--clr-text-muted);
    line-height: 1.65;
    position: relative;
    z-index: 1;
}
.mod-card-exclusive .mod-card-desc { color: rgba(255,255,255,0.72); }

/* Responsive */
@media (max-width: 1024px) {
    .mod-card-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .mod-card-grid { grid-template-columns: 1fr; }
}


/* ============================================================
   10. SECTION MARKET - Peluang Pasar
============================================================ */
.market {
    padding: 100px 0;
    background: var(--grad-market);
    position: relative;
    overflow: hidden;
}

.market-blob {
    position: absolute;
    width: 600px; height: 600px;
    border-radius: 50%;
    background: rgba(14,165,233,0.05);
    filter: blur(100px);
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
}

/* Grid 3 kartu statistik */
.market-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 48px;
}

.market-stat-card {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.12);
    backdrop-filter: blur(8px);
    border-radius: var(--radius-lg);
    padding: 40px 28px;
    text-align: center;
    color: #fff;
    transition: var(--transition);
}
.market-stat-card:hover {
    background: rgba(255,255,255,0.1);
    transform: translateY(-4px);
}

.market-stat-icon {
    font-size: 2rem;
    color: var(--clr-primary);
    margin-bottom: 16px;
}

.market-stat-num {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    background: var(--grad-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline;
}

.market-stat-plus {
    font-size: 2rem;
    font-weight: 800;
    color: var(--clr-primary);
    display: inline;
}

.market-stat-card p {
    font-size: 0.9rem;
    color: rgba(255,255,255,0.65);
    margin-top: 10px;
}

/* Baris KPI kecil (retensi, pengguna, kota) */
.market-kpi-row {
    display: flex;
    justify-content: center;
    gap: 48px;
    flex-wrap: wrap;
}

.market-kpi {
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(255,255,255,0.8);
    font-size: 0.95rem;
}
.market-kpi i { color: var(--clr-primary); font-size: 1.1rem; }
.market-kpi strong { color: #fff; }


/* ============================================================
   11. SECTION PRICING — New Design dengan Toggle
============================================================ */
.pricing-section {
    padding: 100px 0;
    background: var(--clr-light);
}

/* ── Toggle Bulanan / Tahunan ── */
.pricing-toggle-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 48px;
    flex-wrap: wrap;
}
.pt-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--clr-text-muted);
    transition: color 0.25s;
}
.pt-label.active { color: var(--clr-dark); }

/* Switch track */
.pt-switch {
    width: 52px;
    height: 28px;
    border-radius: var(--radius-full);
    background: #CBD5E1;
    border: none;
    cursor: pointer;
    position: relative;
    padding: 0;
    flex-shrink: 0;
    transition: background 0.3s;
}
.pt-switch.yearly {
    background: var(--grad-primary);
}
/* Thumb */
.pt-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    transition: transform 0.3s ease;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.pt-switch.yearly .pt-thumb {
    transform: translateX(24px);
}

/* Badge "Hemat 10%" */
.pt-save-badge {
    background: rgba(45,168,132,0.12);
    color: var(--clr-secondary);
    border: 1px solid rgba(45,168,132,0.3);
    font-size: 0.72rem;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: var(--radius-full);
    letter-spacing: 0.3px;
}

/* ── Card Grid ── */
.pricing-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    align-items: center;
    margin-bottom: 36px;
    padding-top: 20px;   /* ruang untuk badge "Terpopuler" */
    overflow: visible;
}

/* Kartu dasar */
.pc-card {
    background: var(--clr-white);
    border-radius: var(--radius-xl);
    padding: 36px 28px;
    border: 1.5px solid #E2E8F0;
    position: relative;
    transition: var(--transition);
    display: flex;
    flex-direction: column;
}
.pc-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-5px);
    border-color: rgba(33,150,196,0.25);
}

/* Kartu Pro — dark teal-blue premium, sesuai tema ASSERA */
.pc-card-popular {
    background: linear-gradient(155deg, #0D3B55 0%, #1565A0 40%, #1A7A8A 75%, #2DA884 100%);
    border: 1.5px solid rgba(45, 200, 180, 0.25);
    padding: 28px 28px 44px;   /* padding atas lebih kecil karena badge sudah di dalam flow */
    box-shadow:
        0 12px 50px rgba(13, 59, 85, 0.55),
        0 0 0 1px rgba(45, 200, 180, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.10);
    overflow: visible;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    align-items: center;       /* badge center */
}

/* Orb dekorasi dalam kartu — dikliping oleh border-radius kartu sendiri */
.pc-card-popular::before {
    content: '';
    position: absolute;
    top: -60px;
    right: -60px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(45, 200, 180, 0.25) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
    /* orb tetap di dalam batas visual kartu */
    clip-path: inset(0 -100% -100% 0 round var(--radius-xl));
}
.pc-card-popular::after {
    content: '';
    position: absolute;
    bottom: -40px;
    left: -40px;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(33, 150, 196, 0.20) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
    clip-path: inset(-100% 0 0 -100% round var(--radius-xl));
}

/* Semua konten dalam kartu Pro — full width & z-index di atas orb */
.pc-card-popular .pc-name,
.pc-card-popular .pc-tagline,
.pc-card-popular .pc-price-wrap,
.pc-card-popular .pc-period,
.pc-card-popular .pc-features,
.pc-card-popular .pc-btn {
    position: relative;
    z-index: 1;
    align-self: stretch;   /* stretch penuh walau parent align-items: center */
    width: 100%;
}

.pc-card-popular:hover {
    transform: translateY(-10px);
    box-shadow:
        0 24px 70px rgba(13, 59, 85, 0.65),
        0 0 0 1px rgba(45, 200, 180, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
    border: 1.5px solid rgba(45, 200, 180, 0.40);
}

/* Badge populer — flow alami, tidak absolute, sehingga tidak ter-clip */
.pc-popular-badge {
    display: inline-flex;
    align-self: center;
    background: linear-gradient(135deg, #2DA884, #00BFA5);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 800;
    padding: 7px 22px;
    border-radius: var(--radius-full);
    white-space: nowrap;
    box-shadow:
        0 4px 16px rgba(45, 168, 132, 0.50),
        0 0 0 2px rgba(255, 255, 255, 0.20);
    animation: pulseGlow 2.5s ease-in-out infinite;
    letter-spacing: 0.3px;
    margin-bottom: 16px;
    position: static;
    transform: none;
    z-index: auto;
}

/* Nama paket */
.pc-name {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--clr-dark);
    margin-bottom: 4px;
}
.pc-card-popular .pc-name { color: #fff; }

.pc-tagline {
    font-size: 0.82rem;
    color: var(--clr-text-muted);
    margin-bottom: 20px;
}
.pc-card-popular .pc-tagline { color: rgba(255,255,255,0.72); }

/* Harga besar */
.pc-price-wrap {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin-bottom: 4px;
}
.pc-curr {
    font-size: 1rem;
    font-weight: 600;
    color: var(--clr-text-muted);
}
.pc-num {
    font-size: clamp(1.8rem, 3.5vw, 2.5rem);
    font-weight: 800;
    color: var(--clr-dark);
    transition: all 0.3s ease;
}
.pc-card-popular .pc-curr,
.pc-card-popular .pc-num { color: #fff; }

.pc-period {
    font-size: 0.78rem;
    color: var(--clr-text-muted);
    margin-bottom: 24px;
}
.pc-card-popular .pc-period { color: rgba(255,255,255,0.65); }

/* Fitur list */
.pc-features {
    flex: 1;
    margin-bottom: 28px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.pc-features li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 0;
    font-size: 0.86rem;
    color: var(--clr-text);
    border-bottom: 1px solid #F1F5F9;
}
.pc-card-popular .pc-features li {
    color: rgba(255,255,255,0.88);
    border-color: rgba(255,255,255,0.1);
}
.pc-features li i {
    font-size: 0.8rem;
    color: var(--clr-secondary);
    flex-shrink: 0;
}
.pc-card-popular .pc-features li i { color: #5EEAD4; font-size: 0.85rem; }

/* Tombol */
.pc-btn {
    display: block;
    text-align: center;
    padding: 13px 20px;
    border-radius: var(--radius-full);
    font-size: 0.9rem;
    font-weight: 700;
    transition: var(--transition);
    text-decoration: none;
    margin-top: auto;
}
.pc-btn-outline {
    background: transparent;
    border: 2px solid var(--clr-primary);
    color: var(--clr-primary);
}
.pc-btn-outline:hover {
    background: var(--clr-primary);
    color: #fff;
}
.pc-btn-solid {
    background: linear-gradient(135deg, #2DA884, #00BFA5);
    color: #fff;
    border: 2px solid transparent;
    box-shadow: 0 6px 20px rgba(45, 168, 132, 0.45);
    font-weight: 800;
    letter-spacing: 0.3px;
}
.pc-btn-solid:hover {
    background: linear-gradient(135deg, #248D6E, #00A896);
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(45, 168, 132, 0.60);
}

/* Note */
.pricing-note {
    text-align: center;
    font-size: 0.82rem;
    color: var(--clr-text-muted);
}

/* Responsive */
@media (max-width: 900px) {
    .pricing-cards { grid-template-columns: 1fr; max-width: 420px; margin-left: auto; margin-right: auto; }
    .pc-card-popular { padding: 44px 28px; }
}



/* ============================================================
   12. SECTION CTA - Call to Action
============================================================ */
.cta-section {
    padding: 120px 0;
    background: var(--grad-hero);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.cta-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    pointer-events: none;
}
.cta-blob-1 {
    width: 400px; height: 400px;
    background: rgba(255, 255, 255, 0.55);
    top: -100px; right: -100px;
}
.cta-blob-2 {
    width: 300px; height: 300px;
    background: rgba(45, 168, 132, 0.15);
    bottom: -80px; left: -80px;
}

.cta-content { position: relative; z-index: 2; }

.cta-icon {
    width: 80px; height: 80px;
    background: var(--grad-primary);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: #fff;
    margin: 0 auto 28px;
    box-shadow: 0 8px 30px rgba(33, 150, 196, 0.35);
    animation: float 4s ease-in-out infinite;
}

.cta-content h2 {
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    font-weight: 800;
    color: var(--clr-dark);
    margin-bottom: 16px;
    line-height: 1.25;
}

.cta-content p {
    font-size: 1rem;
    color: var(--clr-text-muted);
    max-width: 500px;
    margin: 0 auto 36px;
    line-height: 1.75;
}

.cta-buttons {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

/* Tombol CTA buka popup */
.btn-cta-popup {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #0D3B55, #1565A0 50%, #2DA884);
    color: #fff;
    border: none;
    padding: 16px 36px;
    border-radius: var(--radius-full);
    font-size: 1rem;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 8px 30px rgba(13, 59, 85, 0.40);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    margin-bottom: 32px;
    letter-spacing: 0.2px;
}
.btn-cta-popup:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 40px rgba(13, 59, 85, 0.55);
}
.btn-cta-popup i { font-size: 1.15rem; }

/* CTA form (lama - tetap untuk kompatibilitas) */
.cta-form { display: none; }


/* ============================================================
   POPUP MODAL — Form Pendaftaran
============================================================ */

/* Overlay gelap */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10, 25, 45, 0.72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.modal-overlay.active {
    opacity: 1;
    pointer-events: all;
}

/* Box modal */
.modal-box {
    background: #fff;
    border-radius: 24px;
    width: 100%;
    max-width: 580px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow:
        0 24px 80px rgba(10, 25, 45, 0.35),
        0 0 0 1px rgba(33, 150, 196, 0.12);
    transform: translateY(24px) scale(0.97);
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
    opacity: 0;
    scrollbar-width: thin;
    scrollbar-color: #E2E8F0 transparent;
}
.modal-overlay.active .modal-box {
    transform: translateY(0) scale(1);
    opacity: 1;
}

/* Header modal */
.modal-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 24px 28px 20px;
    border-bottom: 1px solid #F1F5F9;
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 1;
    border-radius: 24px 24px 0 0;
}
.modal-header-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: linear-gradient(135deg, #2DA884, #00BFA5);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 14px rgba(45, 168, 132, 0.35);
}
.modal-header-icon i {
    font-size: 1.3rem;
    color: #fff;
}
.modal-header h3 {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--clr-dark);
    margin: 0 0 2px;
    line-height: 1.2;
}
.modal-header p {
    font-size: 0.8rem;
    color: var(--clr-text-muted);
    margin: 0;
}
.modal-header p strong { color: var(--clr-secondary); }
.modal-header > div:nth-child(2) { flex: 1; }

/* Tombol X tutup */
.modal-close {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    background: #F1F5F9;
    color: var(--clr-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    flex-shrink: 0;
    font-size: 0.85rem;
}
.modal-close:hover {
    background: #E2E8F0;
    color: var(--clr-dark);
}

/* Form dalam modal */
.modal-form {
    padding: 24px 28px 28px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Baris 2 kolom */
.mf-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

/* Grup field */
.mf-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Label */
.mf-label {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--clr-text);
    display: flex;
    align-items: center;
    gap: 6px;
}
.mf-label i {
    color: var(--clr-primary);
    font-size: 0.75rem;
}
.mf-req { color: #EF4444; }

/* Input & Select */
.mf-input,
.mf-select {
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid #E2E8F0;
    border-radius: 10px;
    font-size: 0.875rem;
    font-family: var(--font-main);
    color: var(--clr-dark);
    background: #FAFBFC;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    box-sizing: border-box;
}
.mf-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%235B7A90' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
    cursor: pointer;
}
.mf-input:focus,
.mf-select:focus {
    border-color: var(--clr-primary);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(33, 150, 196, 0.12);
}
.mf-input::placeholder { color: #AABBC8; }

/* Input WA dengan prefix */
.mf-phone-wrap {
    display: flex;
    border: 1.5px solid #E2E8F0;
    border-radius: 10px;
    overflow: hidden;
    background: #FAFBFC;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.mf-phone-wrap:focus-within {
    border-color: var(--clr-primary);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(33, 150, 196, 0.12);
}
.mf-phone-prefix {
    padding: 11px 14px;
    background: #F1F5F9;
    color: var(--clr-text-muted);
    font-size: 0.875rem;
    font-weight: 600;
    border-right: 1.5px solid #E2E8F0;
    white-space: nowrap;
    flex-shrink: 0;
}
.mf-phone-input {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    flex: 1;
}

/* Hint text */
.mf-hint {
    font-size: 0.75rem;
    color: var(--clr-text-muted);
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 0;
}
.mf-hint i { color: var(--clr-primary); }

/* Error */
.mf-error {
    background: #FEF2F2;
    border: 1px solid #FECACA;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 0.82rem;
    color: #DC2626;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Tombol submit */
.mf-submit {
    width: 100%;
    padding: 15px 20px;
    background: linear-gradient(135deg, #0D3B55, #1565A0 50%, #2DA884);
    color: #fff;
    border: none;
    border-radius: var(--radius-full);
    font-size: 0.95rem;
    font-weight: 800;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 6px 24px rgba(13, 59, 85, 0.35);
    transition: transform 0.25s ease, box-shadow 0.25s ease, opacity 0.25s;
    letter-spacing: 0.2px;
    margin-top: 4px;
}
.mf-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 32px rgba(13, 59, 85, 0.48);
}
.mf-submit:active { transform: translateY(0); }
.mf-submit.loading {
    opacity: 0.7;
    cursor: not-allowed;
    pointer-events: none;
}
.mf-submit i { font-size: 1rem; }

/* Privacy text */
.mf-privacy {
    font-size: 0.73rem;
    color: var(--clr-text-muted);
    text-align: center;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    flex-wrap: wrap;
}
.mf-privacy i { color: var(--clr-secondary); }
.mf-privacy a {
    color: var(--clr-primary);
    text-decoration: underline;
}

/* Responsive modal */
@media (max-width: 600px) {
    .modal-box { border-radius: 20px; }
    .modal-header { padding: 20px 20px 16px; }
    .modal-form { padding: 20px 20px 24px; gap: 14px; }
    .mf-row { grid-template-columns: 1fr; }
}



.footer {
    background: var(--clr-dark);
    color: rgba(255,255,255,0.7);
    padding: 64px 0 0;
}

/* Grid 4 kolom footer */
.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 48px;
    padding-bottom: 48px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.footer-brand p {
    font-size: 0.9rem;
    line-height: 1.75;
    margin-top: 16px;
    margin-bottom: 20px;
}

.footer-brand .nav-logo { margin-bottom: 4px; }
.footer-brand .logo-main,
.footer-brand .logo-sub { color: #fff; }
.footer-brand .logo-sub { color: rgba(255,255,255,0.5); }

/* Ikon sosial media */
.footer-social {
    display: flex;
    gap: 12px;
}
.footer-social a {
    width: 38px; height: 38px;
    background: rgba(255,255,255,0.06);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    color: rgba(255,255,255,0.6);
    border: 1px solid rgba(255,255,255,0.08);
    transition: var(--transition);
}
.footer-social a:hover {
    background: var(--clr-primary);
    color: #fff;
    border-color: var(--clr-primary);
}

.footer-col h4 {
    font-size: 0.9rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 18px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.footer-col ul li {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.88rem;
}
.footer-col ul li a {
    color: rgba(255,255,255,0.6);
    transition: var(--transition);
}
.footer-col ul li a:hover { color: var(--clr-primary); }
.footer-col ul li i { color: var(--clr-primary); font-size: 0.85rem; flex-shrink: 0; }

/* Baris bawah footer (copyright) */
.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 0;
    font-size: 0.82rem;
    color: rgba(255,255,255,0.35);
    flex-wrap: wrap;
    gap: 8px;
}


/* ============================================================
   14. SCROLL TO TOP BUTTON
============================================================ */
.scroll-top {
    position: fixed;
    bottom: 32px;
    right: 32px;
    width: 48px; height: 48px;
    background: var(--grad-primary);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    box-shadow: var(--shadow-md);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: var(--transition);
    z-index: 999;
}
.scroll-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.scroll-top:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }


/* ============================================================
   15. ANIMASI REVEAL - Muncul saat di-scroll
============================================================ */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

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

/* Delay kelas untuk animasi berurutan */
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }


/* ============================================================
   16. RESPONSIVE - Mobile & Tablet
============================================================ */

/* --- Tablet (≤ 1024px) --- */
@media (max-width: 1024px) {

    .hero-content       { grid-template-columns: 1fr; gap: 40px; text-align: center; }
    .hero-text          { order: 1; }
    .hero-visual        { order: 2; }
    .hero-buttons       { justify-content: center; }
    .hero-social-proof  { justify-content: center; }
    .hero-desc          { max-width: 100%; }

    .showcase-grid      { grid-template-columns: 1fr; }
    .showcase-features  { grid-template-columns: 1fr; gap: 24px; }
    .sf-item-center     { transform: none; box-shadow: 0 8px 24px rgba(33, 150, 196, 0.06); }
    .sf-item-center:hover { transform: translateY(-5px); }
    .pricing-grid       { grid-template-columns: 1fr; max-width: 480px; margin-left: auto; margin-right: auto; }
    .pricing-card-popular { transform: none; }

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

/* --- Mobile (≤ 768px) --- */
@media (max-width: 768px) {

    /* Hamburger muncul di mobile */
    .hamburger  { display: flex; }
    .nav-cta    { display: none; }

    /* Menu tersembunyi, muncul saat hamburger diklik */
    .nav-menu {
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(15,23,42,0.97);
        flex-direction: column;
        justify-content: center;
        gap: 8px;
        opacity: 0;
        visibility: hidden;
        transition: var(--transition);
        z-index: 998;
    }

    .nav-menu.open {
        opacity: 1;
        visibility: visible;
    }

    .nav-menu .nav-link {
        font-size: 1.3rem;
        color: #fff;
        padding: 14px 28px;
    }

    .showcase-grid      { grid-template-columns: 1fr; }
    .showcase-features  { grid-template-columns: 1fr; gap: 16px; }
    .modules-grid       { grid-template-columns: repeat(2, 1fr); }
    .market-stats-grid  { grid-template-columns: 1fr; }
    .market-kpi-row     { gap: 24px; flex-direction: column; align-items: center; }

    .comparison-table   { grid-template-columns: 1fr; }
    .comp-vs            { width: 100%; height: 50px; }

    .problem-stats {
        flex-direction: column;
        gap: 28px;
        padding: 36px 24px;
    }
    .pstat-divider { width: 60px; height: 1px; }

    .footer-grid       { grid-template-columns: 1fr; }
    .footer-bottom     { flex-direction: column; text-align: center; }

    .floating-badge    { display: none; }

    .section-subtitle  { margin-bottom: 36px; }

    /* USP Responsive */
    .usp-grid          { grid-template-columns: repeat(2, 1fr); }
    .usp-cta-banner    { flex-direction: column; text-align: center; }
    .usp-cta-left      { flex-direction: column; align-items: center; gap: 10px; }
    .usp-cta-banner .btn-primary { width: 100%; justify-content: center; }
}

/* --- Mobile Kecil (≤ 480px) --- */
@media (max-width: 480px) {
    .modules-grid  { grid-template-columns: repeat(2, 1fr); }
    .cta-buttons   { flex-direction: column; align-items: center; }
    .hero-buttons  { flex-direction: column; align-items: center; }
    .scroll-top    { bottom: 20px; right: 20px; }
    .usp-grid      { grid-template-columns: 1fr; }
}


/* ============================================================
   HERO — Social Proof Row (baru)
============================================================ */
.hero-social-proof {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 24px;
    flex-wrap: wrap;
}
.hero-stars {
    display: flex;
    gap: 2px;
}
.hero-stars span {
    color: #FFC107;
    font-size: 1rem;
}
.hero-proof-text {
    font-size: 0.82rem;
    color: var(--clr-text-muted);
    line-height: 1.55;
}
.hero-proof-text strong {
    color: var(--clr-dark);
    font-weight: 700;
}


/* ============================================================
   MODULES — Exclusive Badge
============================================================ */
.module-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.mod-exclusive-badge {
    display: inline-block;
    margin-top: 6px;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--clr-primary-dk);
    background: rgba(33,150,196,0.09);
    padding: 2px 8px;
    border-radius: var(--radius-full);
    letter-spacing: 0.3px;
}
.module-item-exclusive {
    background: linear-gradient(145deg, #fffbeb, #fff);
    border-color: rgba(245,158,11,0.25);
}
.module-item-exclusive .mod-exclusive-badge {
    color: #92400E;
    background: rgba(245,158,11,0.10);
}


/* ============================================================
   SOCIAL PROOF SECTION
============================================================ */
.proof {
    padding: 100px 0;
    background: var(--clr-dark);
    position: relative;
    overflow: hidden;
}

/* Angka statistik 4 kolom */
.proof-nums {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: rgba(255,255,255,0.08);
    border-radius: var(--radius-xl);
    overflow: hidden;
    margin-bottom: 64px;
}
.proof-num {
    background: rgba(255,255,255,0.04);
    padding: 36px 24px;
    text-align: center;
}
.proof-num-val {
    font-size: clamp(1.8rem, 4vw, 3.5rem);
    font-weight: 900;
    line-height: 1;
    margin-bottom: 8px;
    white-space: nowrap;
}
.teal-text  { color: var(--clr-secondary); }
.white-text { color: #fff; }
.proof-num-lbl {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.5);
    line-height: 1.5;
}

/* Testimonial 3 kolom */
.testimonials {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 48px;
}
.testi {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: var(--radius-lg);
    padding: 24px;
    transition: var(--transition);
}
.testi:hover {
    background: rgba(255,255,255,0.09);
    transform: translateY(-4px);
}
.testi-text {
    font-size: 0.88rem;
    color: rgba(255,255,255,0.80);
    line-height: 1.75;
    margin-bottom: 20px;
    font-style: italic;
    position: relative;
}
.testi-text::before {
    content: '"';
    font-size: 2.8rem;
    color: var(--clr-secondary);
    line-height: 0.5;
    display: block;
    margin-bottom: 12px;
    font-style: normal;
}
.testi-author {
    display: flex;
    align-items: center;
    gap: 12px;
}
.testi-avatar {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--grad-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    font-weight: 800;
    color: #fff;
    flex-shrink: 0;
}
.testi-name {
    font-size: 0.82rem;
    font-weight: 700;
    color: #fff;
}
.testi-role {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.45);
    margin-top: 2px;
}

/* Chips sekolah */
.school-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}
.school-chip {
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.65);
    font-size: 0.78rem;
    font-weight: 500;
    padding: 8px 18px;
    border-radius: var(--radius-full);
    transition: var(--transition);
    cursor: default;
}
.school-chip:hover {
    background: rgba(255,255,255,0.12);
    color: #fff;
}


/* ============================================================
   HOW IT WORKS SECTION
============================================================ */
.how-section {
    padding: 100px 0;
    background: var(--clr-white);
}

.how-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    position: relative;
}

/* Garis connector antar step */
.how-steps::before {
    content: '';
    position: absolute;
    top: 40px;
    left: calc(16.66% + 24px);
    right: calc(16.66% + 24px);
    height: 2px;
    background: var(--grad-primary);
    z-index: 0;
}

.how-step {
    text-align: center;
    padding: 0 24px;
    position: relative;
    z-index: 1;
}

.step-num {
    width: 64px; height: 64px;
    border-radius: 50%;
    background: var(--grad-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 900;
    color: #fff;
    margin: 0 auto 20px;
    box-shadow: 0 8px 24px rgba(33,150,196,0.35);
}

.step-icon {
    font-size: 1.8rem;
    margin-bottom: 12px;
}

.step-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--clr-dark);
    margin-bottom: 10px;
}

.step-desc {
    font-size: 0.875rem;
    color: var(--clr-text-muted);
    line-height: 1.7;
}


/* ============================================================
   FAQ SECTION
============================================================ */
.faq-section {
    padding: 100px 0;
    background: var(--clr-light);
}

.faq-inner {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 80px;
    align-items: start;
}

.faq-label {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--clr-secondary);
    margin-bottom: 12px;
}

.faq-title {
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 800;
    color: var(--clr-dark);
    line-height: 1.2;
    margin-bottom: 16px;
}

.faq-sub {
    font-size: 0.9rem;
    color: var(--clr-text-muted);
    line-height: 1.7;
}

.faq-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.faq-item {
    border: 1px solid #E2E8F0;
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: border-color 0.2s;
    background: #fff;
}
.faq-item.open {
    border-color: var(--clr-primary);
}

.faq-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px;
    cursor: pointer;
    gap: 16px;
}
.faq-q-text {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--clr-dark);
}
.faq-icon {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--clr-light);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.3s;
    font-size: 1rem;
    color: var(--clr-primary);
    font-weight: 700;
}
.faq-item.open .faq-icon {
    background: var(--clr-primary);
    color: #fff;
    transform: rotate(45deg);
}

.faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.3s;
}
.faq-item.open .faq-a {
    max-height: 200px;
    padding: 0 22px 18px;
}
.faq-a p {
    font-size: 0.875rem;
    color: var(--clr-text-muted);
    line-height: 1.75;
}


/* ============================================================
   CTA SECTION — Form Input Version
============================================================ */
.cta-form {
    display: flex;
    gap: 12px;
    max-width: 580px;
    margin: 0 auto 16px;
    flex-wrap: wrap;
}
.cta-input {
    flex: 1;
    min-width: 180px;
    padding: 14px 20px;
    border-radius: var(--radius-full);
    border: 1.5px solid rgba(33,150,196,0.25);
    background: rgba(255,255,255,0.80);
    color: var(--clr-dark);
    font-family: var(--font-main);
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    backdrop-filter: blur(8px);
}
.cta-input::placeholder { color: var(--clr-text-muted); }
.cta-input:focus {
    border-color: var(--clr-primary);
    box-shadow: 0 0 0 3px rgba(33,150,196,0.15);
}
.cta-trust {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
    margin-top: 32px;
    flex-wrap: wrap;
}
.cta-trust-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    color: var(--clr-text-muted);
}
.cta-trust-item i {
    color: var(--clr-primary);
    font-size: 0.95rem;
}


/* ============================================================
   FOOTER — Contact items & badges (new)
============================================================ */
.footer-contacts {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
    margin-top: 12px;
}
.footer-contact-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    color: rgba(255,255,255,0.5);
}
.footer-contact-item i {
    color: var(--clr-primary);
    font-size: 0.85rem;
    width: 14px;
    text-align: center;
    flex-shrink: 0;
}
.footer-badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.footer-badge {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: var(--radius-full);
    padding: 5px 14px;
    font-size: 0.72rem;
    color: rgba(255,255,255,0.45);
}


/* ============================================================
   RESPONSIVE — New Sections
============================================================ */
@media (max-width: 1024px) {
    .proof-nums        { grid-template-columns: repeat(2, 1fr); }
    .testimonials      { grid-template-columns: 1fr; }
    .how-steps         { grid-template-columns: 1fr; gap: 40px; }
    .how-steps::before { display: none; }
    .faq-inner         { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 768px) {
    .proof-nums        { grid-template-columns: repeat(2, 1fr); }
    .testimonials      { grid-template-columns: 1fr; }
    .cta-form          { flex-direction: column; }
    .cta-input         { min-width: 100%; }
    .cta-trust         { gap: 16px; flex-direction: column; align-items: flex-start; justify-content: center; }
    .hero-social-proof { justify-content: center; }
}

@media (max-width: 480px) {
    .proof-nums        { grid-template-columns: 1fr; }
    .footer-badges     { justify-content: center; }
}