/* =========================================
   GLOBAL ANTI-BOX OVERFLOW (ANTI-LAYAR GOYANG)
========================================= */
        /* Untuk Browser Chrome, Edge, dan Safari */

        /* 1. Lebar scrollbar */
        ::-webkit-scrollbar {
          width: 10px;
          /* Lebar untuk scrollbar vertikal */
          height: 10px;
          /* Tinggi untuk scrollbar horizontal */
        }

        /* 2. Track (jalur latar belakang scrollbar) */
        ::-webkit-scrollbar-track {
          background: #f1f5f9;
          /* Warna latar belakang jalur */
          border-radius: 5px;
        }

        /* 3. Thumb (bagian yang bisa ditarik/geser) */
        ::-webkit-scrollbar-thumb {
          background: #94a3b8;
          /* Warna thumb */
          border-radius: 5px;
          /* Membuat sudut membulat */
          border: 2px solid #f1f5f9;
          /* Memberi jarak antara thumb dan track */
        }

        /* 4. Hover effect pada thumb */
        ::-webkit-scrollbar-thumb:hover {
          background: #171c25;
          /* Warna saat mouse diarahkan ke scrollbar */
        }

        html,
        body {
          width: 100%;
          max-width: 100%;

          /* KUNCI UTAMA: Memotong semua elemen yang meluber ke kanan/kiri, 
       tapi tetap membiarkan user scroll ke bawah dengan lancar */
          overflow-x: hidden;

          /* Opsional: Membuat scroll terasa jauh lebih smooth saat berpindah section */
          scroll-behavior: smooth;

          margin: 0;
          padding: 0;
          box-sizing: border-box;
        }

        /* =========================================
   MODERN SAAS HEADER STYLE (ENHANCED DEPTH)
========================================= */
        /* =========================================
   CORE PRESTIGE SITE HEADER STYLE (UPGRADED SCALE)
========================================= */
        .site-header {
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          z-index: 1000;
          padding: 16px 0;
          /* Diperluas agar megah saat pertama dimuat */
          background: transparent;
          transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
        }

        /* Kondisi Saat Di-scroll (Lebih Berisi & Bold) */
        .site-header.scrolled {
          padding: 2px 0;
          /* Naik dari 14px agar tidak kekecilan */
          background: rgba(255, 255, 255, 0.7);
          backdrop-filter: blur(24px) saturate(190%);
          -webkit-backdrop-filter: blur(24px) saturate(190%);
          border-bottom: 1px solid rgba(15, 23, 42, 0.06);
          box-shadow:
            0 8px 30px -10px rgba(15, 23, 42, 0.04),
            inset 0 1px 0 rgba(255, 255, 255, 0.8);
        }

        .header-container {
          display: grid;
          grid-template-columns: 1fr auto 1fr;
          align-items: center;
          width: 100%;
          max-width: 1280px;
          /* Diperlebar sedikit untuk ruang bernapas */
          margin: 0 auto;
          padding: 0 32px;
          /* Ditambah dari 24px */
          box-sizing: border-box;
        }

        .logo {
          display: flex;
          align-items: center;
          justify-self: start;
        }

        .logo img {
          height: 94px;
          /* Naik dari 64px, logo tampil tegas */
          width: auto;
          transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .site-header.scrolled .logo img {
          height: 82px;
          /* Naik dari 48px */
        }

        /* === MAIN NAVIGATION (BIGGER DESKTOP CAPSULE) === */
        .main-nav {
          justify-self: center;
          display: flex;
          gap: 6px;
          background: rgba(255, 255, 255, 0.8);
          padding: 8px;
          /* Lebih tebal kapsulnya */
          border-radius: 100px;
          border: 1px solid rgba(15, 23, 42, 0.06);
          backdrop-filter: blur(12px);
          -webkit-backdrop-filter: blur(12px);
          box-shadow: 0 6px 20px rgba(15, 23, 42, 0.03);
        }

        .main-nav a {
          font-size: 15px;
          /* Naik dari 14px, lebih terbaca */
          font-weight: 500;
          /* Naik ke 600 agar karakternya kuat */
          letter-spacing: -0.015em;
          color: #0f172a;
          padding: 10px 24px;
          /* Naik dari 8px 18px */
          border-radius: 100px;
          text-decoration: none;
          transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .main-nav a:hover {
          color: #09be4f;
          background: #ffffff;
          box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
        }

        /* Sembunyikan tombol mobile di desktop */
        .mobile-contact-btn {
          display: none !important;
        }

        /* === ACTION BUTTON (DESKTOP - STRONGER PRESENCE) === */
        .desktop-contact-btn {
          position: relative;
          /* Wajib untuk posisi ::after */
          overflow: hidden;
          /* Wajib agar efek liquid tidak luber keluar border-radius */
          display: inline-flex;
          align-items: center;
          justify-self: end;
          padding: 12px 28px;
          font-size: 15px;
          background: #0f172a !important;
          color: #ffffff !important;
          border: 1px solid #0f172a;
          border-radius: 100px;
          font-family: 'Plus Jakarta Sans', sans-serif;
          font-weight: 600;
          box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
          text-decoration: none;
          z-index: 1;
          /* Membuat context layering baru */
          transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
        }

        /* Konten di dalam tombol harus berada di atas lapisan liquid */
        .desktop-contact-btn span,
        .desktop-contact-btn .btn-icon {
          position: relative;
          z-index: 2;
          transition: color 0.4s ease;
        }

        /* Lapisan Liquid (Efek Cairan Putih) */
        .desktop-contact-btn::after {
          content: '';
          position: absolute;
          bottom: -100%;
          /* Sembunyikan di bawah tombol saat normal */
          left: -10%;
          width: 120%;
          /* Sedikit lebih lebar untuk efek bergelombang */
          height: 100%;
          background-color: #ffffff;
          /* Warna pengisi saat di-hover */
          color: #0f172a;
          border-color: 1px solid #0f172a;

          /* Membuat bentuk melengkung/bergelombang seperti liquid */
          border-radius: 40% 40% 0 0;

          z-index: 1;
          /* Transisi naik yang smooth ala liquid */
          transition: bottom 0.5s cubic-bezier(0.16, 1, 0.3, 1), border-radius 0.5s ease;
        }

        /* === HOVER STATE === */
        .desktop-contact-btn:hover {
          color: #0f172a !important;
          /* Warna teks berubah jadi gelap saat background memutih */
          border-color: #ffffff;
          transform: translateY(-3px);
          box-shadow: 0 12px 28px rgba(15, 23, 42, 0.15);
          border: 1px solid #0f172a;
        }

        /* Trigger Cairan Naik & Merata */
        .desktop-contact-btn:hover::after {
          bottom: 0;
          border-radius: 0;
          /* Ubah lengkungan jadi flat saat memenuhi tombol */
        }

        /* Jika ada icon gambar di dalamnya agar warnanya ikut menyesuaikan (Opsional) */
        .desktop-contact-btn:hover .btn-icon img {
          filter: invert(1);
          /* Membalik warna icon panah jika awalnya putih menjadi gelap */
        }

        /* === HIDE CHECKBOX SYSTEM ON DESKTOP === */
        .menu-toggle-checkbox {
          display: none;
        }

        .menu-toggle-btn {
          display: none;
        }

        /* =========================================================
   ULTRA-PREMIUM SAAS-CLASS MOBILE SIDENAV BREAKPOINT (991px)
========================================================= */
        @media (max-width: 991px) {
          .site-header {
            padding: 18px 0;
            background: rgba(255, 255, 255, 0.75);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border-bottom: 1px solid rgba(15, 23, 42, 0.05);
            transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
          }

          .site-header.scrolled {
            padding: 14px 0;
            background: rgba(255, 255, 255, 0.85);
          }

          .header-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 24px;
          }

          .logo img {
            height: 44px;
            transition: height 0.4s ease;
          }

          .site-header.scrolled .logo img {
            height: 38px;
          }

          .desktop-contact-btn {
            display: none;
          }

          /* === HIGH-END ASYMMETRIC MORPHING BURGER SYSTEM === */
          .menu-toggle-btn {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-end;
            gap: 5px;
            width: 44px;
            height: 44px;
            cursor: pointer;
            z-index: 2000;
            /* Berada di atas seluruh elemen termasuk Sidenav */
            background: rgba(15, 23, 42, 0.03);
            border: 1px solid rgba(15, 23, 42, 0.05);
            border-radius: 50%;
            padding: 0;
            position: relative;
            transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
          }

          .menu-toggle-btn:hover {
            background: rgba(15, 23, 42, 0.06);
            transform: scale(1.05);
          }

          .menu-toggle-btn span {
            display: block;
            height: 2px;
            background: #0f172a;
            border-radius: 10px;
            transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
            right: 12px;
            position: relative;
          }

          /* Formula Panjang Garis Asimetris Premium */
          .menu-toggle-btn span:nth-child(1) {
            width: 20px;
          }

          .menu-toggle-btn span:nth-child(2) {
            width: 12px;
          }

          .menu-toggle-btn span:nth-child(3) {
            width: 16px;
          }

          /* === SAAS premium FIXED RIGHT SIDENAV SYSTEM === */
          .main-nav {
            display: flex;
            flex-direction: column;
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            width: 320px;
            /* Lebar ideal side drawer premium */
            max-width: 85vw;
            height: 100vh;
            background: rgba(255, 255, 255, 0.88);
            backdrop-filter: blur(30px);
            -webkit-backdrop-filter: blur(30px);

            /* Ruang atas sengaja longgar agar tidak menabrak tombol close */
            padding: 110px 32px 40px 32px;
            gap: 4px;
            border-left: 1px solid rgba(15, 23, 42, 0.06);
            box-sizing: border-box;
            z-index: 1999;
            /* Tepat di bawah tombol hamburger */

            /* Efek Sidenav Tertutup: Berada di luar layar kanan */
            transform: translateX(100%);
            opacity: 0;
            pointer-events: none;

            /* Kunci kelembutan animasi tirai meluncur */
            transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.4s ease,
              box-shadow 0.55s ease;

            border-radius: 0;
          }

          /* === TYPOGRAPHY & LINKS ALIGNMENT (SaaS Aesthetic) === */
          .main-nav a {
            width: 100%;
            font-size: 17px;
            font-weight: 600;
            letter-spacing: -0.3px;
            padding: 14px 16px;
            box-sizing: border-box;
            text-align: left;
            /* SaaS mahal menggunakan rata kiri, bukan center */
            border-radius: 12px;
            color: #334155;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: space-between;
          }

          /* Efek Micro-interaction saat menu di-hover/tap */
          .main-nav a:hover {
            background: rgba(9, 190, 79, 0.05);
            color: #09be4f;
            transform: translateX(4px);
            /* Efek bergeser tipis yang mewah */
          }

          /* Tombol Utama di Bagian Bawah Sidenav */
          .mobile-contact-btn {
            display: flex !important;
            align-items: center;
            justify-content: center;
            background: #0f172a !important;
            color: #ffffff !important;
            margin-top: auto;
            /* Memaksa tombol selalu berada di paling bawah drawer */
            padding: 16px 24px;
            font-size: 15px;
            font-weight: 600;
            border-radius: 14px;
            box-shadow: 0 12px 30px -10px rgba(15, 23, 42, 0.25);
          }

          .mobile-contact-btn:hover {
            background: #09be4f !important;
            transform: translateY(-2px);
          }

          /* === TRIGGER ACTIONS (CHECKED STATE) === */

          /* Saat Aktif, Tombol Burger berubah menjadi nuansa hijau brand */
          .menu-toggle-checkbox:checked~.menu-toggle-btn {
            background: rgba(9, 190, 79, 0.08);
            border-color: rgba(9, 190, 79, 0.15);
          }

          /* Meluncurkan Sidenav & Membuat Efek Overlay Gelap Semu di Sisi Kiri */
          .menu-toggle-checkbox:checked~.main-nav {
            opacity: 1;
            transform: translateX(0);
            pointer-events: auto;

            /* Menggunakan teknik box-shadow raksasa untuk menciptakan backdrop gelap instan */
            box-shadow: -20px 0 60px rgba(15, 23, 42, 0.05),
              -100vw 0 0 100vw rgba(15, 23, 42, 0.25);
          }

          /* Animasi X Sempurna pada Burger Line */
          .menu-toggle-checkbox:checked~.menu-toggle-btn span:nth-child(1) {
            width: 20px;
            transform: translateY(7px) rotate(45deg);
            background: #09be4f;
          }

          .menu-toggle-checkbox:checked~.menu-toggle-btn span:nth-child(2) {
            width: 0px;
            opacity: 0;
          }

          .menu-toggle-checkbox:checked~.menu-toggle-btn span:nth-child(3) {
            width: 20px;
            transform: translateY(-7px) rotate(-45deg);
            background: #09be4f;
          }
        }

        /* CSS for section section:Hero */
        .hero-section {
          padding: 180px 0 100px;
          position: relative;
          overflow: hidden;
        }

        .hero-title {
          font-family: 'Plus Jakarta Sans', sans-serif !important;
          font-weight: 600 !important;
          /* Semibold murni sesuai Figma */

          /* === KUNCI RAHASIA ANTI-BENGKAK === */
          font-synthesis: none;
          /* Melarang browser menambahkan ketebalan palsu pada h1 */
          -webkit-font-smoothing: antialiased;
          /* Menghaluskan pinggiran pixel font ala macOS/Figma */
          -moz-osx-font-smoothing: grayscale;

          /* Penyesuaian jarak agar proporsinya persis seperti di Figma */
          font-size: 54px;
          /* Sesuaikan ukuran judulmu */
          line-height: 1.2;
          /* Mengatur kerapatan antar baris agar padat dan bagus */
          letter-spacing: -0.015em;
          /* Merapatkan sedikit jarak antar huruf khas Figma */
          color: #1a1a1a;
          margin-bottom: 24px;
        }

        /* Pastikan teks hijaunya juga kena aturan yang sama */
        .hero-title span {
          font-weight: 700 !important;
          font-synthesis: none;
          color: var(--primary-color, #09be4f);
        }

        .hero-subtitle {
          font-family: 'Plus Jakarta Sans', sans-serif;
          font-size: 18px;
          /* Sedikit diturunkan dari 20px agar judul utama kamu (H1) terlihat lebih pop-out */
          font-weight: 400;
          /* Regular murni agar memberikan kontras mewah dengan judul semibold-mu */
          line-height: 1.6;
          /* KUNCI KERAPIAN: Memberikan ruang napas antar baris agar tidak berdempetan */
          color: #565660;
          /* Menggunakan warna abu-abu netral yang elegan, tidak terlalu pudar dan tidak kehitaman */

          /* Mengunci lebar maksimal agar teks patah menjadi 2 baris dengan proporsi kiri-kanan yang seimbang */
          max-width: 500px;
          margin: 0 auto 40px;
          text-align: center;

          /* Racikan khusus anti-bengkak & rendering tajam ala Figma */
          letter-spacing: -0.01em;
          font-synthesis: none;
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
        }

        /* =========================================
    SaaS PREMIUM SPLIT-PILL BUTTON
  ========================================= */
        .hero-btn {
          position: relative;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          height: 54px;
          padding: 0 36px;
          background: #09be4f;
          color: #ffffff !important;
          text-decoration: none;
          border-radius: 100px;

          /* Tipografi Semibold Ramping */
          font-family: 'Plus Jakarta Sans', sans-serif;
          font-size: 16px;
          font-weight: 600;
          letter-spacing: -0.01em;
          font-synthesis: none;
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;

          margin-right: 62px;
          margin-bottom: 5rem;

          /* KUNCI: Gunakan kurva dinamis (Overshoot) agar gerakan membal seperti pegas */
          transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        /* === LINGKARAN HIJAU LUAR === */
        .hero-btn .btn-icon {
          position: absolute;
          right: -60px;
          /* Jarak awal */
          top: 50%;
          transform: translateY(-50%) scale(1);
          width: 54px;
          height: 54px;
          background: #09be4f;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;

          /* Efek transisi posisi kanan dan skala */
          transition:
            right 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275),
            transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275),
            background-color 0.4s ease;
        }

        /* === LINGKARAN PUTIH DALAM === */
        .hero-btn .btn-icon::before {
          content: '';
          position: absolute;
          width: 30px;
          height: 30px;
          background: #ffffff;
          border-radius: 50%;
          z-index: 1;
          /* Transisi membesar secara elastis */
          transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        /* === ICON PANAH HIJAU === */
        .hero-btn .btn-icon img {
          position: relative;
          z-index: 2;
          width: 14px;
          height: 14px;
          object-fit: contain;
        }

        /* =========================================
    SUPER DYNAMIC HOVER INTERACTION
  ========================================= */
        .hero-btn:hover {
          background: #07aa45;
          /* Menggelap bersamaan dengan lingkaran kanan */
          transform: translateY(-3px) scale(1.02);
          /* Tombol utama membal naik sedikit */
          box-shadow: 0 12px 30px rgba(9, 190, 79, 0.25);
          /* Bayangan melebar halus */
        }

        /* 1. Efek Magnetic Docking (Menyatu secara organik) */
        .hero-btn:hover .btn-icon {
          background: #07aa45;
          right: -42px;
          /* Menarik lingkaran ke kiri, memotong gap dan menyatu ke badan tombol */
          transform: translateY(-50%) scale(1.05);
          /* Membesar sedikit saat merapat */
        }

        /* 2. Efek Spring Bulatan Putih */
        .hero-btn:hover .btn-icon::before {
          transform: scale(1.2);
          /* Membesar elastis, membuat border hijau luarnya menipis mewah */
        }

        /* 3. Efek Arrow Infinity Loop (Melesat Keluar - Masuk Lagi) */
        .hero-btn:hover .btn-icon img {
          animation: arrowShotLoop 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        }

        /* === FRAME ANIMASI PANAH MELESAT === */
        @keyframes arrowShotLoop {
          0% {
            transform: translateX(0);
            opacity: 1;
          }

          40% {
            transform: translateX(20px);
            /* Melesat keluar ke kanan */
            opacity: 0;
          }

          41% {
            transform: translateX(-20px);
            /* Pindah ke kiri luar secara gaib tanpa terlihat */
            opacity: 0;
          }

          100% {
            transform: translateX(0);
            /* Masuk kembali dari kiri ke posisi tengah pas */
            opacity: 1;
          }
        }

        /* =========================================
    HIGH-END LIQUID GLASS STATS GRID (AURORA GLOW)
  ========================================= */
        .stats-grid {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 32px;
          max-width: 1140px;
          margin: 0 auto;
          padding: 30px 20px;
          width: 100%;
          box-sizing: border-box;
        }

        /* === RESPONSIVE GRID LAYOUT === */
        @media (max-width: 991px) {
          .stats-grid {
            grid-template-columns: repeat(2, 1fr);
          }
        }

        @media (max-width: 767px) {
          .stats-grid {
            grid-template-columns: 1fr;
            gap: 24px;
          }
        }

        /* === BASE CARD WITH AURORA BLUR EFFECT === */
        .stat-card {
          background: rgba(255, 255, 255, 0.75);
          /* Semi transparan untuk efek glassmorphism */
          backdrop-filter: blur(20px);
          /* Efek blur kaca latar belakang */
          -webkit-backdrop-filter: blur(20px);
          border: 1px solid rgba(15, 23, 42, 0.06);
          border-radius: 24px;
          padding: 40px 30px;
          text-align: left;
          position: relative;
          overflow: hidden;
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          isolation: isolate;
          /* Mengisolasi z-index agar aksen blur tidak menutupi teks */
          width: 100%;
          box-sizing: border-box;

          box-shadow:
            0 4px 24px rgba(15, 23, 42, 0.02),
            0 12px 36px rgba(15, 23, 42, 0.03);

          transition:
            transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
            box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1),
            border-color 0.5s cubic-bezier(0.16, 1, 0.3, 1),
            background 0.5s cubic-bezier(0.16, 1, 0.3, 1);
        }

        /* Aksen Blur Gradient Hijau (Aurora Object) */
        .stat-card::before {
          content: '';
          position: absolute;
          top: -100px;
          right: -100px;
          width: 150px;
          height: 150px;
          /* Gradasi lingkaran hijau ke transparan */
          background: radial-gradient(circle, rgba(9, 190, 79, 0.18) 0%, rgba(9, 190, 79, 0) 70%);
          filter: blur(30px);
          /* Melembutkan pinggiran gradien */
          border-radius: 50%;
          z-index: -1;
          /* Berada di belakang teks */
          pointer-events: none;
          transition:
            transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
            background 0.6s cubic-bezier(0.16, 1, 0.3, 1),
            width 0.6s ease,
            height 0.6s ease;
        }

        /* === TYPOGRAPHY === */
        .stat-card h3 {
          font-family: 'Plus Jakarta Sans', sans-serif;
          font-size: 24px;
          font-weight: 800;
          letter-spacing: -0.02em;
          margin-bottom: 12px;
          color: #0f172a;
          display: block;
          transition: color 0.4s ease;
        }

        .stat-card h3 .counter,
        .stat-card h3 {
          color: #0f172a;
        }

        .stat-card .stat-label {
          color: #0f172a;
          font-weight: 700;
        }

        .stat-card p {
          font-family: 'Plus Jakarta Sans', sans-serif;
          color: #64748b;
          font-size: 15px;
          line-height: 1.6;
          margin-bottom: 40px;
          flex-grow: 1;
        }

        /* === POSITIONED ICON WRAPPER (CENTERED AT BOTTOM) === */
        .stat-icon-wrapper {
          position: relative;
          width: 64px;
          height: 64px;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-top: auto;
          align-self: center;
          animation: iconFloat 4s ease-in-out infinite;
        }

        /* Efek Opacity Gradasi (Atas 0% kosong -> bawah solid) tetap dipertahankan */
        .stat-icon-bg {
          position: absolute;
          inset: 0;
          background-image: linear-gradient(to bottom, rgba(9, 190, 79, 0) 0%, rgba(9, 190, 79, 0.12) 100%);
          border-radius: 50%;
          transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
        }

        .stat-icon {
          position: relative;
          z-index: 2;
          width: 26px;
          height: 26px;
          object-fit: contain;
          transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), filter 0.4s ease;
        }

        /* =========================================
    DYNAMIC HOVER EFFECTS
  ========================================= */
        .stat-card:hover {
          transform: translateY(-8px);
          background: rgba(255, 255, 255, 0.9);
          /* Sedikit lebih solid saat di-hover */
          border-color: rgba(9, 190, 79, 0.4);
          /* Border hijau menyala lembut */
          box-shadow:
            0 20px 40px -15px rgba(9, 190, 79, 0.12),
            0 0 20px rgba(9, 190, 79, 0.02);
        }

        /* Saat hover, aksen blur gradient membesar, melebar, dan menebal intensitasnya */
        .stat-card:hover::before {
          width: 260px;
          height: 260px;
          background: radial-gradient(circle, rgba(9, 190, 79, 0.35) 0%, rgba(9, 190, 79, 0) 70%);
          transform: translate(-20px, 20px);
          /* Bergerak dinamis sedikit ke arah tengah */
        }

        .stat-card:hover h3,
        .stat-card:hover h3 .counter,
        .stat-card:hover .stat-label {
          color: #09be4f;
        }

        /* Saat hover, gradasi pembungkus ikon tetap solid sesuai request */
        .stat-card:hover .stat-icon-bg {
          background-image: linear-gradient(to bottom, rgba(9, 190, 79, 0) 0%, rgba(9, 190, 79, 1) 100%);
          transform: scale(1.05);
          box-shadow: 0 8px 20px -5px rgba(9, 190, 79, 0.4);
        }

        .stat-card:hover .stat-icon {
          filter: brightness(0) invert(1);
          transform: scale(1.1);
        }

        /* Animasi Mengambang */
        .stats-grid .stat-card:nth-child(2) .stat-icon-wrapper {
          animation-delay: 0.8s;
        }

        .stats-grid .stat-card:nth-child(3) .stat-icon-wrapper {
          animation-delay: 1.6s;
        }

        @keyframes iconFloat {

          0%,
          100% {
            transform: translateY(0);
          }

          50% {
            transform: translateY(-5px);
          }
        }

        /* RESPONSIVE STRIP */
        @media (max-width: 991px) {
          .stats-grid {
            grid-template-columns: 1fr;
            gap: 24px;
            padding: 0 20px;
          }

          .stat-card {
            padding: 40px 30px;
          }
        }

        @media (max-width: 992px) {
          .hero-title {
            font-size: 40px;
          }
        }

        /* Pastikan hero section memiliki warna dasar putih agar garis terlihat tegas */
        /* =========================================
    CONTAINERIZED HERO SECTION (ISLAND STYLE)
  ========================================= */
        .hero-section {
          position: relative;

          /* 1. MENGATUR JARAK/MARGIN KIRI & KANAN (FRAME EFFECT) */
          max-width: 1500px;
          /* Batasan lebar maksimal agar proporsinya pas di layar desktop */
          width: calc(100% - 48px);
          /* Otomatis memberikan margin luar 24px di kiri dan kanan */
          margin: 80px auto 80px;
          /* Jarak 20px dari navbar, center horizontal, 80px ke bawah */

          /* 2. MEMBUAT SUDUT MEMBULAT SEMPURNA SEPERTI DI GAMBAR */
          border-radius: 32px;

          /* 3. KUNCI MUTLAK: Memotong background blur & lines agar rapi mengikuti border-radius */
          overflow: hidden;

          /* Mengatur ketebalan jarak isi konten di dalam hero section */
          padding: 100px 0 120px;

          /* Background dasar agar kontras dengan warna putih body halaman utama */
          background: #ffffff;

          /* Memberikan kedalaman shadow yang sangat soft ala Apple/SaaS premium */
          box-shadow:
            0 1px 3px rgba(15, 23, 42, 0.03),
            0 10px 40px rgba(15, 23, 42, 0.015);

          z-index: 1;
        }

        /* Memastikan elemen pembungkus bootstrap di dalamnya tetap presisi di tengah */
        .hero-content {
          position: relative;
          z-index: 2;
          /* Menaikkan konten di atas layer absolute blur agar teks bisa dibaca & tombol bisa diklik */
        }

        /* =========================================
    EFEK FRACTAL GLASS BARS
  ========================================= */
        .hero-bg-lines {
          position: absolute;
          inset: 0;
          z-index: 1;

          /* Efek Kaca Super Halus - Pemisah Membaur Samar */
          background-image: repeating-linear-gradient(to right,
              rgba(255, 255, 255, 0.25) 0px,
              /* Highlight putih tipis di awal lekukan */
              rgba(255, 255, 255, 0) 35px,
              /* Bauran cahaya dibuat melebar agar transisinya super soft */
              transparent 85px,
              rgba(0, 0, 0, 0.01) 110px,
              /* Bayangan gelap diturunkan jadi ultra-tipis (hanya 1% opacity) */
              transparent 120px
              /* KUNCI: Ditutup transparan agar sambungan antar-pilar meleleh alami */
            );

          /* Masking atas-bawah agar efek memudar di ujung section */
          -webkit-mask-image: linear-gradient(to bottom,
              transparent 0%,
              rgba(0, 0, 0, 0.3) 15%,
              black 30%,
              black 70%,
              rgba(0, 0, 0, 0.3) 85%,
              transparent 100%);
          mask-image: linear-gradient(to bottom,
              transparent 0%,
              rgba(0, 0, 0, 0.3) 15%,
              black 30%,
              black 70%,
              rgba(0, 0, 0, 0.3) 85%,
              transparent 100%);
        }

        /* =========================================
    ELEVASI KONTEN UTAMA
  ========================================= */
        /* Wajib ditambahkan agar konten dan tombol bisa di-klik & tidak tertutup fractal */
        .hero-content {
          position: relative;
          z-index: 2;
        }

        /* =========================================
            CORE VARIABLES & RESET
          ========================================= */
        :root {
          --brand-green: #00c853;
          --brand-green-light: #e8fbf0;
          --text-dark: #0f172a;
          --text-muted: #475569;
          --bg-base: #f4faf6;
          /* Off-white premium dengan tone hijau lembut */
          --card-bg: rgba(255, 255, 255, 0.82);
          --border-subtle: rgba(0, 200, 83, 0.16);
        }

        .text-center {
          text-align: center;
        }

        /* =========================================================================
    REVISI FIX MOBILE: ANTI-POTONG & GLOW SUBTEL PREMIUM (MAX-WIDTH: 767px)
    ========================================================================= */
        @media (max-width: 767px) {

          /* --- 1. JINAKKAN BACKGROUND BLUR (Agar tidak pekat/banjir hijau) --- */
          .bg-blur-green {
            width: 350px !important;
            /* Perkecil ukuran bulatan di HP */
            height: 1100px !important;
            right: -150px !important;
            /* Geser agak keluar pilar biar pas di sudut */
            bottom: -80px !important;
            /* Turunkan opacity gradasi dari 0.49 menjadi 0.18 agar tetap putih-clean dengan glow anggun */
            background: radial-gradient(circle, rgba(9, 190, 78, 0.382) 0%, rgba(255, 255, 255, 0) 70%) !important;
            filter: blur(80px) !important;
            /* Kurangi radius blur agar tidak menyebar ke seluruh pilar */
          }

          .bg-blur-red {
            width: 280px !important;
            height: 1000px !important;
            left: -130px !important;
            bottom: -150px !important;
            background: radial-gradient(circle, rgba(235, 87, 87, 0.204) 0%, rgba(255, 255, 255, 0) 70%) !important;
            filter: blur(60px) !important;
          }

          /* --- 2. HERO SECTION CONTAINER (Kunci Anti-Kepotong) --- */
          .hero-section {
            margin: 20px auto 40px;
            /* Ditambah dari 60px ke 105px untuk memberi ruang aman bagi badge agar TIDAK KEPOTONG */
            padding: 105px 0 60px;
            width: calc(100% - 32px);
            border-radius: 24px;
          }

          /* --- 3. TYPOGRAPHY ADJUSTMENT --- */
          .hero-title {
            font-size: 30px;
            /* Sedikit disesuaikan agar proporsi teks mengalir cantik */
            line-height: 1.25;
            margin-bottom: 16px;
            padding: 0 12px;
          }

          .hero-subtitle {
            font-size: 14px;
            margin: 0 auto 28px;
            padding: 0 20px;
            max-width: 100%;
          }

          .hero-btn {
            margin-bottom: 3.5rem;
            height: 48px;
            padding: 0 28px;
            font-size: 15px;
          }

          /* --- 4. SWIPEABLE STATS ROW (Breathe Room & No Clipping) --- */
          .stats-grid {
            display: flex !important;
            flex-direction: row;
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            gap: 16px;
            /* Padding atas diperbesar sedikit agar bayangan/shadow atas kartu tidak terpotong */
            padding: 15px 24px 30px 24px;
            width: 100%;
            box-sizing: border-box;
            scrollbar-width: none;
            -webkit-overflow-scrolling: touch;
          }

          .stats-grid::-webkit-scrollbar {
            display: none;
          }

          .stat-card {
            flex: 0 0 270px;
            scroll-snap-align: center;
            padding: 28px 20px;
            text-align: left;
            /* Pastikan backdrop blur tidak bentrok saat di-swipe */
            box-shadow: 0 10px 25px rgba(15, 23, 42, 0.04);
          }

          .stat-card h3 {
            font-size: 24px;
            margin-bottom: 8px;
          }

          .stat-card p {
            font-size: 13.5px;
            margin-bottom: 24px;
          }

          .stat-icon-wrapper {
            width: 48px;
            height: 48px;
          }
        }

        /* =========================================
           OUR MISSION SECTION
        ========================================= */
        .mission-section {
          padding: 160px 0;
          position: relative;
          overflow: hidden;
          background: #ffffff;
        }

        /* DIV AKSEN HIJAU BLUR (MANUAL PLACEMENT)
           Ditempatkan secara absolut untuk memancarkan cahaya halus di belakang diagram
        */
        .bg-blur-ambient-center {
          position: absolute;
          top: 55%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 850px;
          height: 850px;
          background: radial-gradient(circle, rgba(0, 200, 83, 0.15) 0%, rgba(0, 200, 83, 0.03) 50%, rgba(255, 255, 255, 0) 70%);
          filter: blur(60px);
          border-radius: 50%;
          z-index: 1;
          pointer-events: none;
        }

        .bg-blur-ambient-side {
          position: absolute;
          top: 20%;
          right: -10%;
          width: 500px;
          height: 500px;
          background: radial-gradient(circle, rgba(0, 200, 83, 0.06) 0%, rgba(255, 255, 255, 0) 70%);
          filter: blur(80px);
          border-radius: 50%;
          z-index: 1;
          pointer-events: none;
        }

        .container {
          max-width: 1280px;
          margin: 0 auto;
          position: relative;
          z-index: 2;
          padding: 0 24px;
        }

        /* Pill Tag */
        .section-tag {
          display: inline-block;
          font-size: 11px;
          font-weight: 700;
          letter-spacing: 0.08em;
          color: #00a846;
          background: #e1f7e9;
          padding: 6px 18px;
          border-radius: 100px;
          margin-bottom: 16px;
        }

        /* Typography Heading */
        .section-title {
          font-size: 46px;
          font-weight: 600;
          /* Semi-Bold elegan */
          color: var(--text-dark);
          line-height: 1.25;
          letter-spacing: -0.03em;
          max-width: 800px;
          margin: 0 auto;
        }

        .section-title span {
          color: var(--brand-green);
        }

        /* =========================================
    DIAGRAM CANVAS & RINGS (FIXED SPACE)
========================================= */
        .mission-diagram {
          position: relative;
          max-width: 1200px;
          margin: 100px auto 0;
          height: 690px;
          /* Ditambah sedikit tinggi agar proporsi sempurna */
          z-index: 3;
        }

        /* Canvas SVG pembungkus Garis Penghubung */
        .diagram-connectors {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          z-index: 1;
          pointer-events: none;
        }

        /* Ring Lingkaran Luar (Sekarang Terlihat Jelas & Berputar Lambat) */
        .diagram-rings {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 780px;
          /* Diperbesar agar menyentuh bodi kartu */
          height: 780px;
          border: 1px dashed rgba(0, 200, 83, 0.22);
          /* Menggunakan dashed dan opacity naik */
          border-radius: 50%;
          z-index: 2;
          pointer-events: none;
          animation: ringRotate 80s linear infinite;
          /* Animasi rotasi tech modern */
        }

        /* Ring Lingkaran Dalam */
        .diagram-rings::before {
          content: '';
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 440px;
          /* Diperbesar proporsional */
          height: 440px;
          border: 1px dashed rgba(0, 200, 83, 0.3);
          /* Dibuat lebih kontras */
          background: rgba(0, 200, 83, 0.01);
          border-radius: 50%;
        }

        /* === CENTRAL NODE === */
        .diagram-center {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          z-index: 10;
        }

        .center-box {
          width: 100px;
          height: 100px;
          background: linear-gradient(135deg, #00e676 0%, #00c853 100%);
          border-radius: 26px;
          display: flex;
          align-items: center;
          justify-content: center;
          box-shadow:
            0 0 0 24px rgba(0, 200, 83, 0.05),
            0 16px 40px rgba(0, 200, 83, 0.25);
          position: relative;
        }

        .center-box::after {
          content: '';
          position: absolute;
          width: 100%;
          height: 100%;
          border-radius: 26px;
          border: 2px solid rgba(0, 200, 83, 0.4);
          animation: corePulse 3.5s infinite ease-out;
        }

        .center-box i {
          font-size: 38px;
          color: #ffffff;
        }

        /* === MODERN LARGE SaaS CARDS (NODES) === */
        .diagram-node {
          position: absolute;
          display: flex;
          align-items: flex-start;
          gap: 22px;
          background: rgba(255, 255, 255, 0.75);
          backdrop-filter: blur(24px) saturate(180%);
          -webkit-backdrop-filter: blur(24px) saturate(180%);
          padding: 30px 34px;
          border-radius: 24px;
          border: 1px solid rgba(15, 23, 42, 0.06);
          width: 440px;
          text-align: left;
          box-shadow:
            0 4px 30px rgba(0, 0, 0, 0.01),
            0 20px 50px -12px rgba(15, 23, 42, 0.04);
          z-index: 5;
          box-sizing: border-box;
          transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
        }

        /* Efek Hover: Transisi transform dimatikan dari 'transition' utama 
           supaya tidak berbenturan/patah saat animasi idle sedang berjalan */
        .diagram-node:hover {
          background: #ffffff;
          border-color: rgba(0, 200, 83, 0.4);
          box-shadow:
            0 30px 70px -15px rgba(0, 200, 83, 0.12),
            0 0 0 1px rgba(0, 200, 83, 0.03);
        }

        /* RE-POSITIONING & FLOATING MOTION (Dibuat asinkron dengan jeda waktu berbeda) */
        .node-1 {
          top: 0px;
          left: 40px;
          animation: nodeFloat1 6s infinite ease-in-out;
        }

        .node-2 {
          top: 80px;
          right: 40px;
          animation: nodeFloat2 6.5s infinite ease-in-out 1s;
        }

        .node-3 {
          bottom: 80px;
          left: 40px;
          animation: nodeFloat1 7s infinite ease-in-out 0.5s;
        }

        .node-4 {
          bottom: 0px;
          right: 40px;
          animation: nodeFloat2 5.5s infinite ease-in-out 1.5s;
        }

        /* Squircle Premium Icon Container */
        .node-icon {
          width: 52px;
          height: 52px;
          background: rgba(0, 200, 83, 0.06);
          border: 1px solid rgba(0, 200, 83, 0.12);
          border-radius: 16px;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #00c853;
          font-size: 28px;
          flex-shrink: 0;
          transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .diagram-node:hover .node-icon {
          background: #00c853;
          color: #ffffff;
          transform: rotate(-6deg) scale(1.05);
          box-shadow: 0 12px 24px -6px rgba(0, 200, 83, 0.3);
        }

        .node-content {
          display: flex;
          flex-direction: column;
          gap: 6px;
        }

        .node-content h3 {
          font-size: 20px;
          font-weight: 600;
          color: var(--text-dark, #0f172a);
          margin: 0;
          letter-spacing: -0.015em;
          transition: color 0.3s ease;
        }

        .diagram-node:hover .node-content h3 {
          color: #00c853;
        }

        .node-content p {
          font-size: 16px;
          line-height: 1.55;
          color: var(--text-muted, #475569);
          margin: 0;
        }

        /* =========================================
    NEW & UPDATED KEYFRAMES
========================================= */
        @keyframes ringRotate {
          0% {
            transform: translate(-50%, -50%) rotate(0deg);
          }

          100% {
            transform: translate(-50%, -50%) rotate(360deg);
          }
        }

        @keyframes corePulse {
          0% {
            transform: scale(1);
            opacity: 0.6;
          }

          100% {
            transform: scale(1.3);
            opacity: 0;
          }
        }

        /* Animasi Melayang Sisi Kiri */
        @keyframes nodeFloat1 {

          0%,
          100% {
            transform: translateY(0);
          }

          50% {
            transform: translateY(-12px);
          }
        }

        /* Animasi Melayang Sisi Kanan */
        @keyframes nodeFloat2 {

          0%,
          100% {
            transform: translateY(0);
          }

          50% {
            transform: translateY(-10px);
          }
        }


        /* =========================================
    RESPONSIVE MORPHING (MOBILE-FIRST)
========================================= */
        @media (max-width: 991px) {
          .mission-section {
            padding: 90px 0;
          }

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

          .mission-diagram {
            height: auto;
            display: flex;
            flex-direction: column;
            gap: 20px;
            margin-top: 60px;
            padding: 0 16px;
            max-width: 480px;
          }

          /* Sembunyikan elemen dekoratif desktop yang tidak diperlukan di mobile */
          .diagram-center,
          .diagram-rings,
          .diagram-connectors {
            display: none !important;
          }

          /* PENYESUAIAN BLUR AMBIENT UNTUK MOBILE
               Memusatkan pancaran cahaya di tengah tumpukan kartu agar estetik */
          .bg-blur-ambient-center {
            display: block !important;
            /* Paksa tampil */
            top: 60%;
            left: 50%;
            width: 100%;
            height: 800px;
            filter: blur(50px);
            background: radial-gradient(circle, rgba(0, 200, 83, 0.12) 0%, rgba(255, 255, 255, 0) 70%);
          }

          .bg-blur-ambient-side {
            display: block !important;
            /* Paksa tampil */
            top: 40%;
            right: 50%;
            transform: translateX(50%);
            width: 90%;
            height: 350px;
            filter: blur(60px);
            /* Menambahkan aksen soft red/coral untuk menyesuaikan request */
            background: radial-gradient(circle, rgba(239, 68, 68, 0.05) 0%, rgba(255, 255, 255, 0) 70%);
          }

          .diagram-node {
            position: relative !important;
            top: auto !important;
            bottom: auto !important;
            left: auto !important;
            right: auto !important;
            width: 100%;
            padding: 24px;
            align-items: center;
            /* Nonaktifkan animasi float berat desktop di mobile demi performa batre */
            animation: none !important;
            transition: transform 0.3s ease, background 0.3s ease;
          }

          .diagram-node:hover {
            transform: translateY(-4px);
          }
        }


        /* ==========================================================================
   FLUID OVERLAPPING WORKS SECTION (DYNAMIC REFACTOR)
   ========================================================================== */
        .works-section {
          padding: 100px 0 120px 0;
          position: relative;
          background: #ffffff;
        }

        .works-fluid-stack {
          display: flex;
          flex-direction: column;
          gap: 60px;
          margin-top: 60px;
        }

        /* --- FLUID CARD CONTAINER --- */
        .fluid-card {
          position: relative;
          width: 100%;
          background: #f8fafc;
          border-radius: 40px;
          padding: 60px 80px;
          border: none;
          transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.6s cubic-bezier(0.16, 1, 0.3, 1);
          overflow: hidden;
        }

        /* Efek Spotlight Border Mengikuti Kursor (Menggunakan Variabel Dinamis) */
        .fluid-card::before {
          content: '';
          position: absolute;
          inset: 0;
          border-radius: 40px;
          padding: 1.5px;
          -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          -webkit-mask-composite: xor;
          mask-composite: exclude;
          pointer-events: none;
          z-index: 3;
          background: radial-gradient(380px circle at var(--mouse-x, 0px) var(--mouse-y, 0px),
              var(--theme-color, #fd9819) 0%,
              transparent 100%);
          opacity: 0;
          transition: opacity 0.4s ease;
        }

        .fluid-card:hover::before {
          opacity: 1;
        }

        .fluid-card-body {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 80px;
          align-items: center;
          position: relative;
          z-index: 5;
        }

        /* Reverse layout logic */
        .fluid-card.layout-reverse .fluid-card-body {
          grid-template-columns: 1fr 1fr;
        }

        .fluid-card.layout-reverse .fluid-image-block {
          order: 2;
        }

        .fluid-card.layout-reverse .fluid-info-block {
          order: 1;
        }

        /* --- THE AMBIENT GLOW LAYER (OTOMATIS MENGIKUTI ORIENTASI SELEKSI) --- */
        .fluid-aura {
          position: absolute;
          width: 600px;
          height: 600px;
          border-radius: 50%;
          filter: blur(90px);
          opacity: 0.35;
          pointer-events: none;
          z-index: 1;
          transition: opacity 0.5s ease, transform 0.5s ease;

          /* Default posisi kiri (Layout Normal) */
          top: 35%;
          left: 15%;
          transform: translate(-50%, -50%);
          background: radial-gradient(circle, var(--theme-color, #fd9819) 0%, transparent 70%);
        }

        /* Otomatis pindah posisi ke kanan jika kartu berstatus terbalik (layout-reverse) */
        .fluid-card.layout-reverse .fluid-aura {
          left: auto;
          right: 15%;
          transform: translate(50%, -50%);
        }

        .fluid-card:hover {
          transform: translateY(-6px);
          box-shadow: 0 30px 60px -15px rgba(15, 23, 42, 0.08);
        }

        .fluid-card:not(.layout-reverse):hover .fluid-aura {
          opacity: 0.55;
          transform: translate(-50%, -50%) scale(1.05);
        }

        .fluid-card.layout-reverse:hover .fluid-aura {
          opacity: 0.55;
          transform: translate(50%, -50%) scale(1.05);
        }

        /* --- IMAGE BLOCK --- */
        .fluid-image-block {
          width: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          position: relative;
        }

        .mockup-mesh-hemi,
        .mockup-mesh-wbe {
          position: relative;
          width: 100%;
          max-width: 520px;
          margin: 0 auto;
          transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .mockup-mesh-hemi .fluid-laptop,
        .mockup-mesh-wbe .fluid-laptop-single {
          width: 100%;
          height: auto;
          display: block;
          filter: drop-shadow(0 20px 40px rgba(15, 23, 42, 0.1));
        }

        .mockup-mesh-hemi .fluid-phone {
          position: absolute;
          left: -15px;
          bottom: -15px;
          width: 25%;
          z-index: 5;
          filter: drop-shadow(-10px 20px 30px rgba(15, 23, 42, 0.15));
        }

        .fluid-card:hover .mockup-mesh-hemi,
        .fluid-card:hover .mockup-mesh-wbe {
          transform: translateY(-8px) scale(1.02);
        }

        /* --- TYPOGRAPHY & TEXT CONTENT --- */
        .fluid-info-block {
          display: flex;
          flex-direction: column;
          padding-right: 30px;
        }

        .fluid-card.layout-reverse .fluid-info-block {
          padding-right: 0;
          padding-left: 30px;
        }

        .proj-tag {
          display: inline-block;
          width: fit-content;
          font-size: 11px;
          font-weight: 700;
          text-transform: uppercase;
          letter-spacing: 0.12em;
          margin-bottom: 16px;
          padding: 6px 14px;
          border-radius: 100px;

          /* Pewarnaan otomatis berkat fungsi color-mix CSS Modern */
          color: var(--theme-color);
          background-color: color-mix(in srgb, var(--theme-color) 15%, transparent);
        }

        .fluid-info-block h3 {
          font-size: 38px;
          line-height: 1.2;
          font-weight: 700;
          color: #0f172a;
          margin: 0 0 16px 0;
          letter-spacing: -0.02em;
        }

        .fluid-info-block p {
          font-size: 15px;
          line-height: 1.75;
          color: #475569;
          margin: 0 0 32px 0;
          max-width: 92%;
        }

        /* --- MODERN ACTION BUTTONS (DYNAMIC) --- */
        .btn-fluid-action {
          display: inline-flex;
          align-items: center;
          gap: 12px;
          padding: 14px 32px;
          border-radius: 100px;
          font-size: 15px;
          font-weight: 600;
          color: #ffffff;
          text-decoration: none;
          width: fit-content;
          transition: all 0.3s ease;
          background: var(--theme-color);
          box-shadow: 0 10px 25px color-mix(in srgb, var(--theme-color) 25%, transparent);
        }

        .btn-fluid-action:hover {
          background: color-mix(in srgb, var(--theme-color) 85%, #000000);
          transform: translateY(-2px);
          color: #fff;
        }

        .btn-fluid-action svg {
          transition: transform 0.3s ease;
        }

        .btn-fluid-action:hover svg {
          transform: translateX(4px);
        }

        /* --- ALL PROJECTS CTA --- */
        .works-footer-center {
          margin-top: 80px;
          display: flex;
          justify-content: center;
          width: 100%;
        }

        .btn-luxury-all {
          display: inline-flex;
          align-items: center;
          gap: 20px;
          background: #0f172a;
          color: #ffffff;
          padding: 12px 12px 12px 36px;
          border-radius: 100px;
          font-size: 15px;
          font-weight: 600;
          text-decoration: none;
          transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
          box-shadow: 0 20px 40px rgba(15, 23, 42, 0.12);
        }

        .arrow-circle {
          width: 46px;
          height: 46px;
          background: rgba(255, 255, 255, 0.08);
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          transition: all 0.4s ease;
        }

        .btn-luxury-all:hover {
          background: #020617;
          transform: translateY(-4px);
          box-shadow: 0 30px 50px rgba(15, 23, 42, 0.2);
          color: #fff;
        }

        .btn-luxury-all:hover .arrow-circle {
          background: #ffffff;
          color: #0f172a;
          transform: rotate(-45deg);
        }

        /* --- RESPONSIVE LAYOUT DISRUPTION (MOBILE) --- */
        @media (max-width: 992px) {
          .works-section {
            padding: 60px 0 80px 0;
          }

          .fluid-card {
            padding: 40px 24px;
            border-radius: 32px;
          }

          .fluid-card::before {
            border-radius: 32px;
          }

          .fluid-card-body {
            grid-template-columns: 1fr !important;
            gap: 40px;
          }

          .fluid-card.layout-reverse .fluid-image-block,
          .fluid-image-block {
            order: 1;
          }

          .fluid-card.layout-reverse .fluid-info-block,
          .fluid-info-block {
            order: 2;
            text-align: center;
            align-items: center;
            padding-right: 0 !important;
            padding-left: 0 !important;
          }

          .fluid-info-block h3 {
            font-size: 28px;
          }

          .fluid-info-block p {
            max-width: 100%;
            font-size: 15px;
          }

          .works-footer-center {
            margin-top: 60px;
          }

          .mockup-mesh-mobile-single {
            max-width: 200px;
          }
        }

        .expertise-section {
          padding: 100px 0;
          position: relative;
          /* overflow: hidden; */
          /* Mencegah aura blur keluar frame */
        }

        .expertise-grid {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 24px;
          margin-top: 60px;
        }

        .expertise-card {
          background: #ffffff;
          border: 1px solid rgba(9, 190, 79, 0.15);
          border-radius: 28px;
          /* Slightly rounded for modern look */
          padding: 40px 30px;
          text-align: left;
          position: relative;
          /* Transisi Premium */
          transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
          /* box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05); */
        }

        /* Hover Effect: Lift up & Shadow */
        .expertise-card:hover {
          transform: translateY(-10px);
          border-color: var(--primary-color);
          box-shadow: 0 20px 40px -10px rgba(9, 190, 79, 0.2);
        }

        .icon-box {
          width: 60px;
          height: 60px;
          background: rgba(9, 190, 79, 0.08);
          border-radius: 16px;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-bottom: 24px;
          transition: all 0.4s ease;
          /* Transisi warna ikon */
        }

        .icon-box i {
          font-size: 24px;
          color: var(--primary-color);
          transition: transform 0.4s ease;
        }

        /* Hover Effect: Ikon bergetar/membesar sedikit */
        .expertise-card:hover .icon-box {
          background: var(--primary-color);
        }

        .expertise-card:hover .icon-box i {
          color: #ffffff;
          transform: scale(1.1);
        }

        .expertise-card h3 {
          font-size: 20px;
          color: #111827;
          margin-bottom: 12px;
          font-weight: 600;
          transition: color 0.3s ease;
        }

        .expertise-card:hover h3 {
          color: var(--primary-color);
        }

        .expertise-card p {
          color: #6b7280;
          font-size: 15px;
          line-height: 1.6;
          margin: 0;
        }

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

        @media (max-width: 768px) {
          .expertise-grid {
            grid-template-columns: 1fr;
          }
        }

        .partners-section {
          padding: 80px 0;
          overflow: hidden;
          background: linear-gradient(to bottom, transparent, rgba(9, 190, 79, 0.03));
        }

        .marquee-wrapper {
          display: flex;
          overflow: hidden;
          padding: 20px 0;
          /* Efek fade transparan di ujung kiri dan kanan */
          mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
        }

        .marquee-row {
          display: flex;
          gap: 20px;
          animation: scroll 30s linear infinite;
          white-space: nowrap;
        }

        .marquee-right {
          animation-direction: reverse;
          /* Arah sebaliknya */
        }

        @keyframes scroll {
          from {
            transform: translateX(0);
          }

          to {
            transform: translateX(-50%);
          }

          /* Karena diduplikasi, geser 50% sudah cukup */
        }

        .partner-logo {
          background: #fff;
          border-radius: 18px;
          padding: 20px 30px;
          height: 100px;
          min-width: 200px;
          display: flex;
          align-items: center;
          justify-content: center;
          border: 2px solid rgba(0, 0, 0, 0.05);
          transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .partner-logo img {
          max-height: 68px;
          opacity: 0.75;
          transition: all 0.4s ease;
        }

        /* Hover State */
        .partner-logo:hover {
          border-color: #09be4f;
          transform: translateY(-5px);
          box-shadow: 0 15px 30px rgba(9, 190, 79, 0.15);
        }

        .partner-logo:hover img {
          opacity: 1;
        }

        /* Pause animasi saat di-hover */
        .marquee-row:hover {
          animation-play-state: paused;
        }

        :root {
          --primary-color: #09be4f;
        }

        .testimonials-section {
          padding: 120px 0;
          background: #ffffff;
          position: relative;
          overflow: hidden;
        }

        .ambient-glow {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 600px;
          height: 600px;
          background: radial-gradient(circle, rgba(9, 190, 79, 0.05) 0%, transparent 70%);
          pointer-events: none;
          z-index: 0;
        }

        .testimonials-section .container {
          position: relative;
          z-index: 1;
        }

        .testimonials-slider {
          display: flex;
          gap: 24px;
          margin-top: 60px;
          overflow-x: auto;
          scroll-snap-type: x mandatory;
          scroll-behavior: smooth;
          padding: 20px;
          scrollbar-width: none;
        }

        .testimonials-slider::-webkit-scrollbar {
          display: none;
        }

        /* Base Card Style */
        .testimonial-card {
          background: #ffffff;
          border: 1px solid rgba(0, 0, 0, 0.05);
          border-radius: 20px;
          padding: 40px;
          text-align: left;
          width: 460px;
          flex-shrink: 0;
          scroll-snap-align: center;
          box-shadow: 0 4px 30px rgba(0, 0, 0, 0.01);
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        }

        /* Hover Interaction */
        .testimonial-card:hover {
          transform: translateY(-6px);
          border-color: rgba(9, 190, 79, 0.3);
          box-shadow: 0 20px 40px rgba(9, 190, 79, 0.05);
        }

        /* Gaya Teks Testimoni (SaaS Look: Sedikit Lebih Besar & Berjarak) */
        .testimonial-text {
          color: #333333;
          font-size: 16px;
          line-height: 1.75;
          font-weight: 400;
          margin: 0 0 40px 0;
          position: relative;
        }

        /* Footer di dalam Card */
        .testimonial-footer {
          display: flex;
          align-items: center;
          justify-content: space-between;
          border-top: 1px solid rgba(0, 0, 0, 0.04);
          padding-top: 24px;
        }

        .name {
          font-weight: 600;
          color: #111111;
          font-size: 15px;
          letter-spacing: -0.2px;
        }

        /* Container Logo Perusahaan Klien */
        .client-logo {
          display: flex;
          align-items: center;
          height: 48px;
        }

        .client-logo img {
          max-height: 48px;
          max-width: 100px;
          object-fit: contain;
          filter: grayscale(10%);
          opacity: 0.6;
          transition: all 0.4s ease;
        }

        /* Saat card di-hover, logo perusahaan berubah jadi berwarna/jelas */
        .testimonial-card:hover .client-logo img {
          filter: grayscale(0%);
          opacity: 0.85;
        }

        /* Slider Controls & Dots */
        .slider-controls {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 20px;
          margin-top: 48px;
        }

        .control-btn {
          width: 44px;
          height: 44px;
          border-radius: 50%;
          border: 1px solid rgba(0, 0, 0, 0.06);
          background: #ffffff;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          transition: all 0.3s ease;
        }

        .control-btn:hover {
          border-color: var(--primary-color);
          background: rgba(9, 190, 79, 0.02);
          transform: scale(1.05);
        }

        .dots {
          display: flex;
          gap: 8px;
        }

        .dot {
          width: 8px;
          height: 8px;
          border-radius: 50%;
          background: rgba(0, 0, 0, 0.12);
          transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
          cursor: pointer;
        }

        .dot.active {
          background: var(--primary-color);
          width: 20px;
          border-radius: 4px;
        }

        /* Responsive Desain */
        @media (max-width: 768px) {
          .testimonials-section {
            padding: 80px 0;
          }

          .testimonials-slider {
            gap: 16px;
            padding: 16px;
            margin-top: 40px;
          }

          .testimonial-card {
            width: 85vw;
            padding: 30px;
          }

          .testimonial-text {
            margin-bottom: 30px;
            font-size: 15px;
          }
        }

        :root {
          --primary-color: #09be4f;
          --text-dark: #1e293b;
          --text-muted: #64748b;
          --border-light: rgba(0, 0, 0, 0.06);
        }

        .contact-section {
          padding: 120px 0;
          background: #ffffff;
        }

        /* Grid Wrapper - Dikunci ke 'start' agar tinggi objek kiri & kanan sejajar dari atas */
        .contact-grid {
          display: grid;
          grid-template-columns: 1fr 1.1fr;
          gap: 70px;
          margin-bottom: 80px;
          align-items: start;
        }

        /* Paksa area info kontak rata kiri penuh dan putus inheritance align center global */
        .contact-info {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          text-align: left;
        }

        /* Memperbaiki pill badge agar tidak melar semeter */
        .contact-info .section-tag {
          align-self: flex-start;
          text-align: left;
          display: inline-block;
        }

        /* Memperbaiki heading text agar tidak ikut rata tengah */
        .contact-info .section-title {
          text-align: left !important;
          width: 100%;
          margin-top: 16px;
          margin-bottom: 20px;
        }

        .contact-desc {
          color: var(--text-muted);
          margin-bottom: 40px;
          font-size: 16px;
          line-height: 1.7;
          text-align: left;
        }

        /* List Detail Informasi */
        .contact-details {
          display: flex;
          flex-direction: column;
          gap: 24px;
          width: 100%;
        }

        .contact-item {
          display: flex;
          align-items: center;
          gap: 16px;
        }

        .contact-item .icon-wrapper {
          width: 44px;
          height: 44px;
          background: rgba(9, 190, 79, 0.06);
          border: 1px solid rgba(9, 190, 79, 0.15);
          border-radius: 12px;
          display: flex;
          align-items: center;
          justify-content: center;
          transition: all 0.3s ease;
        }

        .contact-item:hover .icon-wrapper {
          background: var(--primary-color);
          transform: translateY(-2px);
        }

        .contact-item .icon-wrapper img {
          width: 16px;
          transition: all 0.3s ease;
        }

        .contact-item:hover .icon-wrapper img {
          filter: brightness(0) invert(1);
        }

        .contact-text {
          display: flex;
          flex-direction: column;
          text-align: left;
        }

        .contact-text label {
          font-size: 11px;
          text-transform: uppercase;
          letter-spacing: 0.5px;
          color: #94a3b8;
          font-weight: 600;
          margin-bottom: 2px;
        }

        .contact-text span {
          color: var(--text-dark);
          font-weight: 500;
          font-size: 15px;
        }

        /* Wadah Form Card Premium */
        .contact-form-card {
          background: #ffffff;
          border: 1px solid var(--border-light);
          border-radius: 24px;
          padding: 40px;
          box-shadow: 0 10px 40px rgba(0, 0, 0, 0.02);
        }

        .contact-form {
          display: flex;
          flex-direction: column;
          gap: 18px;
        }

        .form-row {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 18px;
        }

        /* Modifikasi Input Controls Berkontras Jelas */
        .form-control {
          width: 100%;
          padding: 14px 18px;
          background: #f8fafc;
          border: 1px solid #e2e8f0;
          border-radius: 12px;
          font-family: inherit;
          font-size: 14px;
          color: var(--text-dark);
          outline: none;
          transition: all 0.2s ease;
          text-align: left;
        }

        .form-control::placeholder {
          color: #94a3b8;
        }

        .form-control:focus {
          background: #ffffff;
          border-color: var(--primary-color);
          box-shadow: 0 0 0 4px rgba(9, 190, 79, 0.1);
        }

        .select-wrapper {
          position: relative;
        }

        select.form-control {
          appearance: none;
          cursor: pointer;
          padding-right: 40px;
        }

        .select-arrow {
          position: absolute;
          right: 18px;
          top: 50%;
          transform: translateY(-50%);
          pointer-events: none;
          width: 12px;
          opacity: 0.6;
        }

        textarea.form-control {
          resize: none;
        }

        /* Tombol Kirim Pesan */
        .btn-submit {
          align-self: flex-start;
          padding: 14px 32px;
          border: none;
          background: #0f172a;
          color: #ffffff;
          border-radius: 12px;
          font-size: 14px;
          font-weight: 600;
          cursor: pointer;
          display: flex;
          align-items: center;
          gap: 8px;
          transition: all 0.2s ease;
        }

        .btn-submit:hover {
          background: var(--primary-color);
          transform: translateY(-2px);
          box-shadow: 0 8px 24px rgba(9, 190, 79, 0.2);
        }

        .btn-icon {
          width: 14px;
          transition: transform 0.2s ease;
        }

        .btn-submit:hover .btn-icon {
          transform: translateX(3px);
        }

        /* Google Maps Box Wrapper */
        .map-container {
          border-radius: 24px;
          overflow: hidden;
          height: 450px;
          background: #f1f5f9;
          border: 1px solid var(--border-light);
          box-shadow: 0 8px 30px rgba(0, 0, 0, 0.02);
          margin-top: 20px;
        }

        /* =============================================================================
   MEDIA QUERIES RESPONSIF (PERBAIKAN MOBILE & TABLET)
   ============================================================================= */

        @media (max-width: 992px) {
          .contact-section {
            padding: 80px 0;
            /* Mengurangi padding vertikal agar tidak terlalu longgar */
          }

          .contact-grid {
            grid-template-columns: 1fr;
            gap: 48px;
            /* Jarak antar elemen kiri dan kanan yang ideal */
          }

          .contact-form-card {
            padding: 30px;
          }

          .map-container {
            height: 350px;
            /* Mengecilkan tinggi maps di tablet */
          }
        }

        @media (max-width: 576px) {
          .contact-section {
            padding: 60px 0;
            /* Padding lebih rapat khusus layar smartphone */
          }

          .contact-info .section-title {
            font-size: 28px !important;
            /* Mencegah font judul terlalu besar/patah berantakan */
            line-height: 1.3;
          }

          .contact-desc {
            margin-bottom: 32px;
            font-size: 15px;
            /* Sedikit penyesuaian ukuran teks deskripsi */
          }

          .contact-details {
            gap: 20px;
            /* Jarak antar item kontak (WA & Email) lebih rapat */
          }

          .contact-form-card {
            padding: 20px;
            /* Mengurangi padding dalam card agar input text dapet ruang maksimum */
            border-radius: 20px;
            /* Melunakkan corner radius di layar kecil */
          }

          .contact-form {
            gap: 16px;
            /* Jarak antar field input form */
          }

          .form-row {
            grid-template-columns: 1fr;
            /* Memecah row nama/email menjadi vertikal */
            gap: 16px;
          }

          .form-control {
            padding: 12px 16px;
            /* Mengecilkan sedikit padding input agar pas di jempol */
          }

          .btn-submit {
            width: 100%;
            justify-content: center;
            /* Tombol kirim otomatis full-width di HP */
            padding: 14px;
          }

          .map-container {
            height: 280px;
            /* Tinggi map optimal di HP agar tidak menutupi seluruh screen */
            border-radius: 20px;
            margin-top: 10px;
          }
        }

        /* CSS for section section:Footer */
        .site-footer {
          background-color: var(--bg-dark);
          color: #989898;
          padding: 80px 0 30px;
        }

        .footer-grid {
          display: grid;
          grid-template-columns: 2fr 1fr 1fr;
          gap: 60px;
          margin-bottom: 60px;
        }

        .brand-desc {
          margin-bottom: 30px;
          line-height: 1.8;
          max-width: 400px;
        }

        .social-links {
          display: flex;
          gap: 16px;
        }

        .social-icon {
          width: 40px;
          height: 40px;
          background: #353543;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          transition: background 0.3s;
        }

        .social-icon:hover {
          background: var(--primary-color);
        }

        .social-icon img {
          width: 20px;
          filter: brightness(0) invert(1);
        }

        .footer-links h4,
        .footer-connect h4 {
          color: #c7c7c7;
          font-size: 18px;
          margin-bottom: 24px;
        }

        .footer-links ul,
        .footer-connect ul {
          list-style: none;
          display: flex;
          flex-direction: column;
          gap: 16px;
        }

        .footer-links a,
        .footer-connect a {
          transition: color 0.3s;
          display: flex;
          align-items: center;
          gap: 12px;
        }

        .footer-connect a img {
          width: 20px;
          filter: brightness(0) invert(0.6);
        }

        .footer-links a:hover,
        .footer-connect a:hover {
          color: #fff;
        }

        .footer-bottom {
          border-top: 1px solid #3f3f3f;
          padding-top: 30px;
          text-align: center;
          color: #626262;
          font-size: 14px;
        }

        @media (max-width: 768px) {
          .footer-grid {
            grid-template-columns: 1fr;
            gap: 40px;
          }
        }

        .section-tag {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          gap: 8px;
          /* Menggantikan margin inline, otomatis presisi di tengah */
          padding: 6px 24px;
          background: rgba(9, 190, 79, 0.05);
          border: 1px solid rgba(9, 190, 79, 0.12);
          /* Border halus pembungkus kaca */
          border-radius: 100px;

          /* Tipografi Premium (Kunci Anti-Bengkak) */
          font-family: 'Plus Jakarta Sans', sans-serif;
          font-size: 15px;
          /* Ukuran tag ideal (tidak kebesaran) */
          font-weight: 600;
          /* Semibold murni */
          color: #09be4f;
          /* Warna hijau brand utama */
          letter-spacing: -0.01em;
          font-synthesis: none;
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;

          /* Animasi Dasar */
          transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
          cursor: pointer;
          user-select: none;

          /* Kedalaman Dimensi Halus */
          box-shadow:
            0 2px 8px rgba(9, 190, 79, 0.02),
            inset 0 1px 0 rgba(255, 255, 255, 0.6);
        }

        /* Mengatur Proporsi Icon di Dalam Badge */
        .section-tag img {
          height: 20px;
          /* Ukuran ikon dikunci agar presisi dengan tinggi teks */
          width: auto;
          object-fit: contain;
          transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        }

        /* =========================================
   EFFECT HOVER (ULTRA SMOOTH MICRO-INTERACTION)
========================================= */
        .section-tag:hover {
          background: rgba(9, 190, 79, 0.1);
          /* Background sedikit menebal */
          border-color: rgba(9, 190, 79, 0.25);
          /* Border melembut menyala */
          transform: translateY(-1px);
          /* Efek melayang naik 1 piksel */
          box-shadow: 0 6px 16px rgba(9, 190, 79, 0.08);
          /* Bayangan melebar halus */
        }

        /* Efek Micro-Interaction: Ikon bergerak miring sedikit saat badge disentuh pointer */
        .section-tag:hover img {
          transform: rotate(12deg) scale(1.05);
        }

        /* =========================================
   OUR MISSION SECTION - FIXED TITLE STYLING
========================================= */
        .section-title {
          font-family: 'Plus Jakarta Sans', sans-serif;
          font-size: 46px;
          font-weight: 600;
          /* Tetap Semi-Bold sesuai request */
          line-height: 1.2;
          /* Diberi ruang bernapas sedikit agar pas ada <br> tidak menempel */
          letter-spacing: -0.02em;
          color: #0f172a;
          margin: 0 auto 56px auto;
          max-width: 920px;
          /* Ditambah sedikit biar potongannya pas */
          text-align: center;
        }

        /* Perbaikan total di sini */
        .section-title span {
          font-weight: 600;
          color: #09be4f;
          display: inline;
          /* DIUBAH KE INLINE: Menghilangkan bug teks melompat ke atas */
        }

        /* === ULTRA-RESPONSIVE OPTIMIZATION === */
        @media (max-width: 991px) {
          .section-title {
            font-size: 40px;
            line-height: 1.25;
            padding: 0 24px;
          }
        }

        @media (max-width: 768px) {
          .section-title {
            font-size: 32px;
            line-height: 1.3;
            letter-spacing: -0.01em;
          }
        }

        /* Memperbesar ukuran font ikon di dalam box */
        .expertise-card .icon-box i {
          font-size: 32px;
          /* Ukuran font ikon disesuaikan agar proporsional di dalam box 80px */
          color: #09be4f;
          /* Warna hijau khas brand kamu */
          transition: all 0.4s ease;
        }

        /* Warna default icon sebelum di-hover */
        .contact-item .icon-wrapper i {
          color: #09be4f;
          transition: all 0.3s ease;
          /* Biar transisi perubahan warna halus */
        }

        /* Ketika area contact-item di-hover, icon otomatis berubah jadi putih */
        .contact-item:hover .icon-wrapper i {
          color: #ffffff !important;
        }

        /* Mengatur kontainer reCAPTCHA dan tombol agar sejajar */
        .captcha-action-row {
          display: flex;
          flex-wrap: wrap;
          /* Membuatnya otomatis turun ke bawah jika layar HP kesempitan */
          align-items: center;
          /* Membuat tombol dan reCAPTCHA rata tengah secara vertikal */
          gap: 24px;
          /* Jarak spasi horizontal antara reCAPTCHA dan tombol */
          margin-top: 20px;
          margin-bottom: 10px;
        }

        /* Memastikan tombol tidak memiliki margin bawaan yang merusak keselarasan */
        .captcha-action-row .btn-submit {
          margin: 0 !important;
          height: fit-content;
          /* Menyesuaikan tinggi tombol dengan kontennya */
        }

        /* Responsif: Jika di layar handphone kecil, beri sedikit jarak vertikal */
        @media (max-width: 576px) {
          .captcha-action-row {
            flex-direction: column;
            /* Di HP otomatis tersusun ke bawah lagi agar tidak kepotong */
            align-items: flex-start;
            /* Rata kiri merapat */
            gap: 15px;
          }
        }

        .scroll-to-top {
          position: fixed;
          /* Membuat tombol melayang relatif terhadap layar */
          bottom: 30px;
          /* Jarak dari batas bawah layar */
          right: 30px;
          /* Jarak dari batas kanan layar */
          display: none;
          /* Sembunyikan dulu secara default (nanti dimunculkan lewat JS) */
          z-index: 99;
          /* Memastikan tombol berada di atas elemen lain */

          /* Desain tambahan (opsional) */
          padding: 10px 15px;
          background-color: #007bff;
          color: white;
          border: none;
          border-radius: 50%;
          cursor: pointer;
        }


        @media (max-width: 767px) {

          /* 1. Ratakan Kontainer Utama */
          .hero-content {
            display: flex;
            flex-direction: column;
            align-items: center;
            /* Memastikan semua elemen center secara konsisten */
            text-align: center;
            padding: 0 20px;
          }

          /* 2. Rapikan Section Tag (Badge Atas) */
          .section-tag {
            display: inline-flex;
            align-items: center;
            background: rgba(9, 190, 78, 0.1);
            /* Sedikit warna latar agar badge terlihat kotak */
            padding: 8px 16px;
            border-radius: 50px;
            margin-bottom: 20px;
            font-size: 13px;
            font-weight: 600;
            color: #09be4e;
          }

          /* 3. Perbaiki Judul (Hero Title) */
          .hero-title {
            font-size: 32px;
            /* Dikecilkan sedikit agar tidak terlalu 'memakan' layar */
            line-height: 1.2;
            margin-bottom: 16px;
            /* Spasi cukup ke subtitle */
            padding: 0 10px;
            letter-spacing: -0.5px;
            /* Sedikit merapatkan agar terlihat lebih bold */
          }

          /* 4. Perbaiki Subtitle */
          .hero-subtitle {
            font-size: 15px;
            line-height: 1.6;
            color: #475569;
            margin-bottom: 32px;
            /* Memberi napas sebelum tombol */
            max-width: 90%;
            /* Membatasi lebar teks agar tidak terlalu panjang ke samping */
          }

        }



        /* ===================================================
   MEDIA QUERY KHUSUS TAMPILAN MOBILE (MAKSIMAL 768px)
   =================================================== */
        @media (max-width: 768px) {

          /* 2. MEMBESARKAN INPUT FIELD & TOMBOL */
          .contact-section .form-control {
            padding: 16px 20px !important;
            font-size: 16px !important;
            min-height: 55px !important;
          }

          /* Khusus untuk dropdown select agar panah bawaan hilang */
          .contact-section select.form-control {
            appearance: none !important;
            -webkit-appearance: none !important;
          }

          /* Mengatur posisi ikon panah kustom pada select box yang membesar */
          .contact-section .select-wrapper .select-arrow {
            top: 50% !important;
            transform: translateY(-50%) !important;
            right: 20px !important;
          }

          /* Khusus untuk textarea agar tingginya proporsional */
          .contact-section textarea.form-control {
            padding: 18px 20px !important;
            font-size: 16px !important;
            min-height: auto !important;
          }

          /* Membesarkan Tombol Submit */
          .contact-section .btn-submit {
            padding: 15px 30px !important;
            min-height: 55px !important;
          }
        }

        /* ==========================================
   STYLING PREMIUM UNTUK DROPDOWN SELECT
   ========================================== */

        /* 1. Atur container pembungkus agar memposisikan panah kustom */
        .select-wrapper {
          position: relative;
          width: 100%;
        }

        /* 2. Styling elemen select utama */
        .select-wrapper select.form-control {
          width: 100%;
          min-height: 56px;
          padding: 16px 45px 16px 20px;
          /* Padding kanan dilebihkan agar teks tidak menabrak ikon panah */
          font-size: 16px;
          color: #2d3748;
          background-color: #ffffff;
          border: 1.5px solid #e2e8f0;
          border-radius: 12px;
          /* Membuat sudut membulat modern */
          cursor: pointer;
          transition: all 0.3s ease;

          /* CRITICAL: Menghilangkan panah default bawaan Browser/OS */
          appearance: none !important;
          -webkit-appearance: none !important;
          -moz-appearance: none !important;
        }

        /* 3. Efek saat Dropdown diklik / aktif (Focus State) */
        .select-wrapper select.form-control:focus {
          border-color: #09be4f !important;
          /* Warna hijau sesuai tema brand kamu */
          box-shadow: 0 0 0 4px rgba(9, 190, 79, 0.15) !important;
          /* Efek glow halus */
          outline: none;
        }

        /* 4. Styling Ikon Panah Kustom (SVG) */
        .select-wrapper .select-arrow {
          position: absolute;
          top: 50%;
          right: 20px;
          transform: translateY(-50%);
          width: 14px;
          /* Sesuaikan ukuran ikon panahmu */
          height: auto;
          transition: transform 0.3s ease;

          /* CRITICAL: Klik user akan menembus gambar ini langsung ke select box di bawahnya */
          pointer-events: none !important;
        }

        /* Efek opsional: Memutar sedikit panah saat select sedang aktif (hanya bekerja di beberapa browser modern) */
        .select-wrapper select.form-control:focus+.select-arrow {
          transform: translateY(-50%) rotate(180deg);
        }

        /* 5. Styling isi pilihan di dalam dropdown (Option) */
        .select-wrapper select option {
          padding: 12px;
          font-size: 16px;
          background-color: #ffffff;
          color: #2d3748;
        }

        /* Opsi untuk pilihan disabled (Select Services placeholder) */
        .select-wrapper select option:disabled {
          color: #a0aec0;
        }


        /* Container Utama */
        .custom-select-wrapper {
          position: relative;
          width: 100%;
        }

        /* Kotak Trigger Utama */
        .custom-select-trigger {
          width: 100%;
          min-height: 56px;
          padding: 16px 20px;
          font-size: 16px;
          color: #2d3748;
          background-color: #ffffff;
          border: 1.5px solid #e2e8f0;
          border-radius: 12px;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: space-between;
          transition: all 0.3s ease;
        }

        .custom-select-trigger:hover {
          border-color: #09be4f;
        }

        /* Ketika Dropdown Terbuka */
        .custom-select-wrapper.open .custom-select-trigger {
          border-color: #09be4f;
          box-shadow: 0 0 0 4px rgba(9, 190, 79, 0.12);
        }

        .custom-select-wrapper.open .select-arrow {
          transform: rotate(180deg);
        }

        .select-arrow {
          width: 12px;
          transition: transform 0.3s ease;
        }

        /* ===================================================
   ENHANCEMENT STYLE UNTUK DROPDOWN VALUES (POPUP)
   =================================================== */
        .custom-options-list {
          position: absolute;
          top: calc(100% + 8px);
          left: 0;
          width: 100%;
          background-color: #ffffff;
          border: 1.5px solid #e2e8f0;
          border-radius: 12px;
          box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
          /* Efek bayangan halus */
          padding: 8px 0;
          margin: 0;
          list-style: none;
          z-index: 999;

          /* Animasi saat dropdown muncul */
          opacity: 0;
          visibility: hidden;
          transform: translateY(-10px);
          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        /* State saat dropdown terbuka */
        .custom-select-wrapper.open .custom-options-list {
          opacity: 1;
          visibility: visible;
          transform: translateY(0);
        }

        /* Style Tiap Baris Pilihan (Value) */
        .custom-option {
          padding: 14px 20px;
          font-size: 15px;
          color: #4a5568;
          cursor: pointer;
          transition: all 0.2s ease;
          text-align: left;
        }

        /* Efek Hover Baru: Menggantikan abu-abu kaku dengan soft green */
        .custom-option:hover {
          background-color: rgba(9, 190, 79, 0.08) !important;
          color: #09be4f !important;
          padding-left: 24px;
          /* Efek bergeser sedikit yang interaktif */
        }

        /* Style ketika Item Terpilih (Selected) */
        .custom-option.selected {
          background-color: #09be4f !important;
          color: #ffffff !important;
          font-weight: 600;
        }

        /* Style Pilihan Placeholder */
        .custom-option.disabled {
          color: #a0aec0;
          pointer-events: none;
          border-bottom: 1px solid #edf2f7;
          margin-bottom: 4px;
        }



        /* CONTACT NEW DESIGN */
        /* ====== 1. DESAIN STRUKTUR DASAR & AMBIENT GLOW ====== */
        .contact-section {
          position: relative;
          overflow: hidden;
        }

        .ambient-glow {
          position: absolute;
          width: 1000px;
          border-radius: 50%;
          z-index: 0;
          pointer-events: none;
        }

        .glow-green {
          height: 350px;
          background: rgba(9, 190, 79, 0.12);
          filter: blur(200px);
          top: -50px;
          left: -100px;
        }

        .glow-red {
          height: 400px;
          background: rgba(180, 43, 43, 0.08);
          filter: blur(120px);
          top: 30%;
          right: -150px;
        }

        .honeypot-field {
          display: none !important;
        }

        .contact-link {
          text-decoration: none;
          color: #2d3748;
        }

        /* ====== 2. STANDARISASI KESERAGAMAN FIELD INPUT (HOMOGENIZATION) ====== */
        .contact-section .form-control,
        .contact-section .custom-select-trigger {
          width: 100%;
          min-height: 56px;
          padding: 16px 20px;
          font-size: 16px;
          color: #2d3748;
          background-color: #ffffff;
          border: 1.5px solid #e2e8f0;
          border-radius: 12px;
          box-shadow: none;
          outline: none;
          display: flex;
          align-items: center;
          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        /* Penyesuaian khusus textarea agar tingginya fleksibel */
        .contact-section textarea.form-control {
          min-height: 140px;
          align-items: flex-start;
          padding: 18px 20px;
          resize: vertical;
        }

        /* Placeholder text styling universal */
        .contact-section .form-control::placeholder {
          color: #a0aec0;
          opacity: 1;
        }

        /* ====== 3. INTERAKSI STATE SAAT DIKLIK/AKTIF (FOCUS STATE GLOBAL) ====== */
        .contact-section .form-control:focus,
        .contact-section .custom-select-wrapper.open .custom-select-trigger {
          border-color: #09be4f !important;
          background-color: #ffffff;
          box-shadow: 0 0 0 4px rgba(9, 190, 79, 0.12) !important;
        }

        /* ====== 4. ATURAN GAYA KUSTOM DROPDOWN POPUP ====== */
        .custom-select-wrapper {
          position: relative;
          width: 100%;
        }

        .custom-select-trigger {
          cursor: pointer;
          justify-content: space-between;
        }

        .custom-select-trigger .select-arrow {
          width: 12px;
          height: auto;
          transition: transform 0.3s ease;
        }

        .custom-select-wrapper.open .select-arrow {
          transform: rotate(180deg);
        }

        .custom-options-list {
          position: absolute;
          top: calc(100% + 8px);
          left: 0;
          width: 100%;
          background-color: #ffffff;
          border: 1.5px solid #e2e8f0;
          border-radius: 12px;
          box-shadow: 0 10px 30px rgba(0, 0, 0, 0.07);
          padding: 8px 0;
          margin: 0;
          list-style: none;
          z-index: 999;
          opacity: 0;
          visibility: hidden;
          transform: translateY(-10px);
          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .custom-select-wrapper.open .custom-options-list {
          opacity: 1;
          visibility: visible;
          transform: translateY(0);
        }

        .custom-option {
          padding: 14px 20px;
          font-size: 15px;
          color: #4a5568;
          cursor: pointer;
          transition: all 0.2s ease;
          text-align: left;
        }

        .custom-option:hover {
          background-color: rgba(9, 190, 79, 0.06) !important;
          color: #09be4f !important;
          padding-left: 26px;
        }

        .custom-option.selected {
          background-color: #09be4f !important;
          color: #ffffff !important;
          font-weight: 600;
        }

        .custom-option.disabled {
          color: #a0aec0;
          pointer-events: none;
          border-bottom: 1px solid #edf2f7;
          margin-bottom: 6px;
          padding-bottom: 10px;
        }

        /* ====== 5. RESPONSIVE MEDIA QUERY (MOBILE CENTER STATE - MAX 768px) ====== */
        @media (max-width: 768px) {
          /* .contact-section .contact-info {
            text-align: center !important;
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
          } */

          .contact-section .section-tag {
            align-self: center !important;
            /* margin-bottom: 16px !important; */
          }

          .contact-section .section-title,
          .contact-section .contact-desc {
            text-align: center !important;
            margin-left: auto !important;
            margin-right: auto !important;
            width: 100% !important;
          }

          .contact-section .contact-item .icon-wrapper {
            margin-right: 0 !important;
            margin-bottom: 10px !important;
          }

          /* Pengaturan ukuran teks input di mobile agar tebal & nyaman disentuh */
          .contact-section .form-control,
          .contact-section .custom-select-trigger {
            font-size: 16px !important;
            padding: 16px 20px !important;
          }
        }

        @media (max-width: 768px) {

          .expertise-section .bg-blur-green {
            width: 800px !important;
            height: 3000px !important;
            opacity: 0.6 !important;
            top: 50% !important;
            left: 50% !important;
            transform: translate(-50%, -50%) !important;
          }

        }


        /* ===================================================
   KODE UTAMA KAMU (YANG SUDAH ADA)
   =================================================== */
        .stat-icon {
          filter: invert(36%) sepia(85%) saturate(1352%) hue-rotate(110deg) brightness(95%) contrast(105%);
          transition: filter 0.3s ease;
        }

        .stat-icon-wrapper:hover .stat-icon,
        .stat-icon:hover {
          filter: brightness(0) invert(1) !important;
        }


        /* ===================================================
   TAMBAHAN: SKRIP RESPONSIVE MOBILE (Breakpoint 768px)
   =================================================== */
        @media (max-width: 768px) {

          /* 1. Mengecilkan ukuran lingkaran background icon */
          .stat-icon-wrapper {
            width: 46px !important;
            /* Ukuran lingkaran di HP (sesuaikan kebutuhan) */
            height: 46px !important;
            margin-left: auto;
            /* Trik agar posisi lingkaran tetap di tengah */
            margin-right: auto;
            /* jika struktur card berubah jadi center alignment */
          }

          /* 2. Mengecilkan dimensi gambar icon di dalamnya */
          .stat-icon {
            width: 20px !important;
            /* Ukuran gambar icon di HP */
            height: 20px !important;
          }
        }

        /* --- MOBILE ONLY: phone di-center, bukan nempel pojok laptop --- */
        .mockup-mesh-mobile-single {
          position: relative;
          width: 100%;
          max-width: 260px;
          margin: 0 auto;
          display: flex;
          justify-content: center;
          align-items: center;
          transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .fluid-phone-single {
          width: 100%;
          height: auto;
          display: block;
          filter: drop-shadow(0 20px 40px rgba(15, 23, 42, 0.12));
        }

        .fluid-card:hover .mockup-mesh-mobile-single {
          transform: translateY(-8px) scale(1.02);
        }

        /* --- WIREFRAME PLACEHOLDER (dipakai kalau mockup belum diupload) ---
   Warna otomatis ikut var(--theme-color) yang sudah di-set per-card
   lewat inline style di .fluid-card, konsisten dengan .proj-tag dan
   .btn-fluid-action yang juga pakai var(--theme-color). */
        .mockup-wireframe-desktop {
          width: 100%;
          height: auto;
          color: var(--theme-color, #6366f1);
          opacity: 0.8;
        }

        .mockup-wireframe-mobile {
          position: absolute;
          left: -15px;
          bottom: -15px;
          width: 25%;
          z-index: 5;
          color: var(--theme-color, #6366f1);
          opacity: 0.85;
          filter: drop-shadow(-8px 16px 24px rgba(15, 23, 42, 0.1));
        }

        .mockup-wireframe-mobile-single {
          width: 100%;
          height: auto;
          color: var(--theme-color, #6366f1);
          opacity: 0.8;
        }

        /* --- MOBILE ONLY: phone di-center, bukan nempel pojok laptop --- */
        .mockup-mesh-mobile-single {
          position: relative;
          width: 100%;
          max-width: 190px;
          /* dikecilkan dari 260px */
          margin: 0 auto;
          display: flex;
          justify-content: center;
          align-items: center;
          transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .fluid-phone-single {
          width: 100%;
          height: auto;
          max-height: 420px;
          /* pengaman kedua: batasi tinggi walau lebar sudah dibatasi */
          object-fit: contain;
          display: block;
          filter: drop-shadow(0 20px 40px rgba(15, 23, 42, 0.12));
        }