/* Variabel Warna Baru */
        :root {
          --gradient-dark: linear-gradient(to right, #0f2027, #203a43, #2c5364);
          /* Gradien utama */
          --color-dark-start: #0f2027;
          /* Warna awal gradien */
          --color-dark-mid: #203a43;
          /* Warna tengah gradien */
          --color-dark-end: #2c5364;
          /* Warna akhir gradien */
          --accent-blue: #00CFFF;
          /* Vibrant Electric Blue */
          --accent-green: #00E066;
          /* Bright Green */
          --light-bg: #F8F9FA;
          /* Soft Gray untuk section terang */
          --text-dark: #333333;
          --text-light: #FFFFFF;
        }

        body {
          font-family: 'Inter', sans-serif;
          color: var(--text-dark);
          background-color: var(--light-bg);
          /* Default background */
          overflow-x: hidden;
          /* Mencegah scrollbar horizontal yang tidak diinginkan */
        }

        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
          font-family: 'Oxanium', sans-serif;
          /* Untuk judul */
          color: var(--text-dark);
        }

        /* Override untuk teks judul di latar belakang gelap */
        .text-light h1,
        .text-light h2,
        .text-light h3,
        .text-light h4,
        .text-light h5,
        .text-light h6,
        .hero-section h1,
        .pricing-section h2,
        .cta-section h2 {
          color: var(--text-light);
        }

        /* Navigasi */
        .navbar {
          background: var(--gradient-dark);
          /* Menggunakan gradien */
          padding: 1rem 0;
          box-shadow: 0 2px 15px rgba(0, 0, 0, 0.4);
          /* Shadow lebih kuat */
        }

        .navbar-brand {
          color: var(--text-light) !important;
          font-family: 'Oxanium', sans-serif;
          font-weight: 700;
          font-size: 1.5rem;
        }

        /* Gaya untuk logo di navbar */
        .navbar-logo {
          height: 35px;
          /* Sesuaikan tinggi logo */
          width: auto;
          vertical-align: middle;
        }

        .navbar-nav .nav-link {
          color: rgba(255, 255, 255, 0.7) !important;
          margin-left: 1.5rem;
          transition: color 0.3s ease;
        }

        .navbar-nav .nav-link:hover {
          color: var(--accent-blue) !important;
        }

        .btn-outline-light-custom {
          color: var(--text-light);
          border-color: var(--text-light);
          transition: all 0.3s ease;
        }

        .btn-outline-light-custom:hover {
          background-color: var(--accent-blue);
          border-color: var(--accent-blue);
          color: var(--color-dark-start);
          /* Teks gelap di tombol terang */
        }

        /* Toggle button for mobile */
        .navbar-toggler {
          border-color: rgba(255, 255, 255, 0.5);
        }

        .navbar-toggler-icon {
          background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.7%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
        }


        /* Hero Section */
        .hero-section {
          background: var(--gradient-dark);
          /* Menggunakan gradien */
          color: var(--text-light);
          padding: 8rem 0;
          position: relative;
          overflow: hidden;
          border-bottom: 5px solid var(--accent-blue);
          /* Garis bawah aksen */
        }

        .hero-section::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          /* Contoh SVG abstrak, sesuaikan warnanya jika perlu */
          background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none"><path fill="%23203a43" opacity="0.4" d="M0,0 L100,0 L100,70 L0,100 Z" /></svg>') no-repeat center center / cover;
          background-size: 150% 150%;
          opacity: 0.2;
          z-index: 0;
        }

        .hero-content {
          position: relative;
          z-index: 1;
        }

        .hero-section h1 {
          font-size: 3.8rem;
          font-weight: 700;
          line-height: 1.2;
          color: var(--text-light);
          animation: fadeInDown 1s ease-out;
        }

        .hero-section p.lead {
          font-size: 1.35rem;
          margin-top: 1.5rem;
          margin-bottom: 2.5rem;
          color: rgba(255, 255, 255, 0.9);
          animation: fadeInUp 1s ease-out;
        }

        .hero-buttons .btn {
          font-size: 1.2rem;
          padding: 0.9rem 2.8rem;
          border-radius: 0.6rem;
          margin: 0 0.8rem;
          transition: all 0.3s ease;
          animation: zoomIn 1s ease-out;
        }

        .btn-primary-custom {
          background-color: var(--accent-blue);
          border-color: var(--accent-blue);
          color: var(--color-dark-start);
          font-weight: 700;
          box-shadow: 0 4px 15px rgba(0, 207, 255, 0.4);
        }

        .btn-primary-custom:hover {
          background-color: #00A3CC;
          border-color: #00A3CC;
          transform: translateY(-5px);
          box-shadow: 0 8px 25px rgba(0, 207, 255, 0.6);
        }

        .btn-outline-light-custom {
          color: var(--text-light);
          border-color: rgba(255, 255, 255, 0.6);
          background: transparent;
          font-weight: 600;
        }

        .btn-outline-light-custom:hover {
          background-color: rgba(255, 255, 255, 0.15);
          border-color: var(--accent-blue);
          color: var(--accent-blue);
          transform: translateY(-5px);
        }

        /* Section Fitur */
        .features-section {
          padding: 6rem 0;
          background-color: var(--light-bg);
        }

        .features-section h2 {
          font-size: 2.8rem;
          margin-bottom: 3.5rem;
          position: relative;
          display: inline-block;
        }

        .features-section h2::after {
          content: '';
          display: block;
          width: 80px;
          height: 5px;
          background-color: var(--accent-blue);
          margin: 15px auto 0;
          border-radius: 2px;
        }

        .feature-card {
          background: var(--text-light);
          padding: 2.8rem;
          border-radius: 1rem;
          box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
          transition: all 0.3s ease;
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
          align-items: center;
          text-align: center;
          border: 1px solid rgba(0, 0, 0, 0.05);
        }

        .feature-card:hover {
          transform: translateY(-10px);
          box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
          border-color: var(--accent-blue);
        }

        .feature-icon {
          font-size: 4rem;
          color: var(--accent-blue);
          margin-bottom: 1.8rem;
          animation: pulse 2s infinite;
        }

        .feature-card h5 {
          font-family: 'Oxanium', sans-serif;
          font-size: 1.6rem;
          margin-bottom: 1.2rem;
          color: var(--color-dark-start);
        }

        .feature-card p {
          font-size: 1.05rem;
          line-height: 1.7;
          color: var(--text-dark);
        }

        /* Pricing Section */
        .pricing-section {
          background: var(--gradient-dark);
          color: var(--text-light);
          padding: 6rem 0;
        }

        .pricing-section h2 {
          color: var(--text-light);
          margin-bottom: 3.5rem;
          position: relative;
          display: inline-block;
        }

        .pricing-section h2::after {
          content: '';
          display: block;
          width: 80px;
          height: 5px;
          background-color: var(--accent-blue);
          margin: 15px auto 0;
          border-radius: 2px;
        }

        .pricing-card-wrapper {
          display: flex;
          flex-wrap: wrap;
          justify-content: center;
          align-items: stretch;
          gap: 2rem;
        }

        .pricing-card {
          background: var(--text-light);
          color: var(--text-dark);
          padding: 3.2rem 2.2rem;
          border-radius: 1rem;
          box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
          transition: all 0.3s ease;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          align-items: center;
          width: calc(25% - 1.5rem);
          max-width: 320px;
        }

        /* Responsiveness for pricing cards */
        @media (max-width: 1200px) {
          .pricing-card {
            width: calc(33.33% - 1.5rem);
          }
        }

        @media (max-width: 992px) {
          .pricing-card {
            width: calc(50% - 1.5rem);
          }
        }

        @media (max-width: 768px) {
          .pricing-card {
            width: 90%;
            margin-bottom: 1.5rem;
          }

          .pricing-card-wrapper {
            gap: 0;
          }
        }

        .pricing-card:hover {
          transform: translateY(-12px);
          box-shadow: 0 20px 45px rgba(0, 0, 0, 0.3);
        }

        .pricing-card.highlight {
          /* Untuk paket "Pro" */
          border: 4px solid var(--accent-blue);
          transform: scale(1.07);
          background: linear-gradient(145deg, var(--accent-blue) 0%, #00FFFF 100%);
          color: var(--color-dark-start);
          box-shadow: 0 15px 40px rgba(0, 207, 255, 0.5);
        }

        .pricing-card.highlight h5,
        .pricing-card.highlight p.fw-bold,
        .pricing-card.highlight .list-unstyled li {
          color: var(--color-dark-start) !important;
        }

        .pricing-card h5 {
          font-size: 2rem;
          margin-bottom: 1rem;
          color: var(--color-dark-start);
          font-family: 'Oxanium', sans-serif;
        }

        .pricing-card p.fw-bold {
          font-size: 2.5rem;
          font-weight: 700 !important;
          margin-bottom: 1.8rem;
          color: var(--accent-blue);
        }

        .pricing-card.highlight p.fw-bold {
          color: var(--color-dark-start) !important;
        }

        /* Gaya untuk highlight Nawala Suite */
        .pricing-card.highlight-nawala {
          border: 4px solid var(--accent-blue);
          transform: translateY(-8px);
          box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);
          background: var(--text-light);
        }

        .pricing-card.highlight-nawala h5,
        .pricing-card.highlight-nawala p.fw-bold,
        .pricing-card.highlight-nawala .list-unstyled li {
          color: inherit;
        }

        .pricing-card.highlight-nawala p.fw-bold {
          color: var(--accent-blue) !important;
        }


        .pricing-card .list-unstyled {
          text-align: left;
          margin-bottom: 2.2rem;
          padding-left: 0;
          list-style: none;
        }

        .pricing-card .list-unstyled li::before {
          content: "✓ ";
          color: var(--accent-green);
          font-weight: bold;
          margin-right: 0.6rem;
        }

        .pricing-card .list-unstyled li.disabled::before {
          content: "✕ ";
          color: #DC3545;
        }

        .pricing-card .btn {
          width: 100%;
          padding: 0.9rem 1.8rem;
          font-size: 1.2rem;
          border-radius: 0.6rem;
          font-weight: 700;
          transition: all 0.3s ease;
        }

        .btn-pricing-cta {
          background-color: var(--color-dark-start);
          border-color: var(--color-dark-start);
          color: var(--text-light);
        }

        .btn-pricing-cta:hover {
          background-color: var(--accent-blue);
          border-color: var(--accent-blue);
          color: var(--color-dark-start);
        }

        /* Tombol di kartu highlight Pro */
        .pricing-card.highlight .btn-pricing-cta {
          background-color: var(--color-dark-start);
          border-color: var(--color-dark-start);
          color: var(--accent-blue);
        }

        .pricing-card.highlight .btn-pricing-cta:hover {
          background-color: rgba(0, 0, 0, 0.15);
          border-color: rgba(0, 0, 0, 0.15);
          color: var(--color-dark-start);
        }

        /* Tombol di kartu highlight Nawala Suite */
        .pricing-card.highlight-nawala .btn-pricing-cta {
          background-color: var(--color-dark-start);
          border-color: var(--color-dark-start);
          color: var(--text-light);
        }

        .pricing-card.highlight-nawala .btn-pricing-cta:hover {
          background-color: var(--accent-blue);
          border-color: var(--accent-blue);
          color: var(--color-dark-start);
        }


        /* How It Works Section */
        .how-it-works-section {
          padding: 6rem 0;
          background-color: var(--light-bg);
        }

        .how-it-works-section h2 {
          font-size: 2.8rem;
          margin-bottom: 3.5rem;
          position: relative;
          display: inline-block;
        }

        .how-it-works-section h2::after {
          content: '';
          display: block;
          width: 80px;
          height: 5px;
          background-color: var(--accent-blue);
          margin: 15px auto 0;
          border-radius: 2px;
        }

        .how-it-works-section .card {
          box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
          border: none;
          border-radius: 1rem;
          transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .how-it-works-section .card:hover {
          transform: translateY(-8px);
          box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
        }

        .how-it-works-section .card-body {
          padding: 3rem;
          display: flex;
          flex-direction: column;
          align-items: center;
          text-align: center;
        }

        .how-it-works-section .card-body i {
          font-size: 4rem;
          margin-bottom: 1.5rem;
          color: var(--accent-blue);
        }

        .how-it-works-section .card-title {
          font-family: 'Oxanium', sans-serif;
          font-size: 1.6rem;
          color: var(--color-dark-start);
          margin-bottom: 1rem;
        }

        .how-it-works-section .card-text {
          font-size: 1.05rem;
          line-height: 1.7;
          color: var(--text-dark);
        }


        /* Testimonials Section */
        .testimonials-section {
          background: var(--color-dark-start);
          color: var(--text-light);
          padding: 7rem 0;
          /* Lebih banyak padding */
          border-top: 5px solid var(--accent-blue);
        }

        .testimonials-section h2 {
          color: var(--text-light);
          margin-bottom: 3.5rem;
          position: relative;
          display: inline-block;
        }

        .testimonials-section h2::after {
          content: '';
          display: block;
          width: 80px;
          height: 5px;
          background-color: var(--accent-blue);
          margin: 15px auto 0;
          border-radius: 2px;
        }

        .carousel-item p.lead {
          font-size: 1.6rem;
          /* Lebih besar */
          line-height: 1.8;
          color: rgba(255, 255, 255, 0.95);
          /* Lebih terang */
          margin-bottom: 2.5rem;
          /* Lebih banyak margin */
          max-width: 900px;
          /* Lebih lebar */
          margin-left: auto;
          margin-right: auto;
          font-weight: 300;
          /* Lebih ringan */
        }

        .carousel-item p.author {
          /* Gaya baru untuk nama penulis */
          font-size: 1.2rem;
          font-weight: 700;
          color: var(--accent-blue);
          /* Warna aksen */
          margin-top: 1.5rem;
        }

        .carousel-item p.role {
          /* Gaya baru untuk peran */
          font-size: 1rem;
          color: rgba(255, 255, 255, 0.7);
          margin-top: 0.5rem;
        }

        .carousel-control-prev-icon,
        .carousel-control-next-icon {
          background-color: rgba(0, 0, 0, 0.4);
          /* Lebih gelap */
          border-radius: 50%;
          padding: 1.2rem;
          /* Lebih besar */
        }

        .carousel-control-prev,
        .carousel-control-next {
          width: 5%;
        }

        .carousel-indicators [data-bs-target] {
          /* Indikator carousel */
          background-color: rgba(255, 255, 255, 0.5);
          width: 10px;
          height: 10px;
          border-radius: 50%;
        }

        .carousel-indicators .active {
          background-color: var(--accent-blue);
        }


        /* Call to Action (CTA) */
        .cta-section {
          background: linear-gradient(135deg, var(--color-dark-start) 0%, var(--color-dark-end) 100%);
          color: var(--text-light);
          padding: 5rem 0;
        }

        .cta-section h2 {
          font-size: 2.8rem;
          margin-bottom: 1.5rem;
          color: var(--text-light);
        }

        .cta-section p {
          font-size: 1.2rem;
          margin-bottom: 2.5rem;
          color: rgba(255, 255, 255, 0.85);
        }

        .cta-section .btn {
          background-color: var(--accent-blue);
          border-color: var(--accent-blue);
          color: var(--color-dark-start);
          font-weight: 700;
          padding: 1.1rem 3.5rem;
          font-size: 1.35rem;
          border-radius: 0.75rem;
          transition: all 0.3s ease;
          box-shadow: 0 6px 20px rgba(0, 207, 255, 0.5);
        }

        .cta-section .btn:hover {
          background-color: #00A3CC;
          border-color: #00A3CC;
          transform: translateY(-7px);
          box-shadow: 0 10px 30px rgba(0, 207, 255, 0.7);
        }

        /* FAQ Section */
        .faq-section {
          padding: 6rem 0;
          background-color: var(--light-bg);
        }

        .faq-section h2 {
          font-size: 2.8rem;
          margin-bottom: 3.5rem;
          /* Memberikan jarak lebih dari accordion */
          position: relative;
          display: inline-block;
        }

        /* Garis bawah hanya untuk judul section FAQ */
        .faq-section h2::after {
          content: '';
          display: block;
          width: 80px;
          height: 5px;
          background-color: var(--accent-blue);
          margin: 15px auto 0;
          border-radius: 2px;
        }

        .accordion-button {
          font-family: 'Oxanium', sans-serif;
          font-size: 1.25rem;
          color: var(--color-dark-start);
          background-color: var(--text-light);
          /* Hapus border-bottom bawaan Bootstrap */
          border: none;
          padding: 1.5rem;
          box-shadow: none !important;
          /* Hapus shadow default */
          transition: background-color 0.3s ease, color 0.3s ease;
        }

        .accordion-button:not(.collapsed) {
          color: var(--accent-blue);
          /* Warna teks saat terbuka */
          background-color: #e7f5ff;
          /* Background lebih terang saat terbuka */
          border-bottom: 1px solid var(--accent-blue);
          /* Garis bawah aksen saat terbuka */
          border-radius: 0.5rem 0.5rem 0 0 !important;
          /* Agar sudut atas tetap bulat */
        }

        .accordion-button:focus {
          outline: 0;
          box-shadow: none;
        }

        .accordion-body {
          background-color: var(--text-light);
          padding: 1.5rem;
          font-size: 1.05rem;
          line-height: 1.7;
          color: var(--text-dark);
          border-top: none;
          /* Hapus border top default */
          border-bottom: 1px solid rgba(0, 0, 0, .08);
          /* Border bawah halus untuk isi */
        }

        .accordion-item {
          border: 1px solid rgba(0, 0, 0, .125);
          border-radius: 0.5rem;
          margin-bottom: 1.2rem;
          /* Jarak antar item lebih baik */
          overflow: hidden;
          box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
          /* Shadow yang lebih halus */
          transition: box-shadow 0.3s ease, transform 0.3s ease;
        }

        .accordion-item:hover {
          box-shadow: 0 12px 25px rgba(0, 0, 0, 0.12);
          /* Shadow sedikit lebih kuat saat hover */
          transform: translateY(-3px);
          /* Sedikit terangkat saat hover */
        }

        .accordion-item:last-of-type {
          margin-bottom: 0;
          /* Hapus margin di item terakhir */
        }


        /* Footer */
        .footer-section {
          background-color: var(--color-dark-start);
          color: rgba(255, 255, 255, 0.6);
          padding: 3rem 0;
          font-size: 0.95rem;
          border-top: 1px solid rgba(255, 255, 255, 0.1);
        }

        .footer-links a {
          color: rgba(255, 255, 255, 0.7);
          text-decoration: none;
          margin: 0 1.2rem;
          transition: color 0.3s ease;
        }

        .footer-links a:hover {
          color: var(--accent-blue);
        }

        /* Utility classes for text color */
        .text-accent-blue {
          color: var(--accent-blue) !important;
        }

        .text-accent-green {
          color: var(--accent-green) !important;
        }

        /* Keyframe Animations */
        @keyframes fadeInDown {
          from {
            opacity: 0;
            transform: translateY(-20px);
          }

          to {
            opacity: 1;
            transform: translateY(0);
          }
        }

        @keyframes fadeInUp {
          from {
            opacity: 0;
            transform: translateY(20px);
          }

          to {
            opacity: 1;
            transform: translateY(0);
          }
        }

        @keyframes zoomIn {
          from {
            opacity: 0;
            transform: scale(0.9);
          }

          to {
            opacity: 1;
            transform: scale(1);
          }
        }

        @keyframes pulse {
          0% {
            transform: scale(1);
          }

          50% {
            transform: scale(1.05);
          }

          100% {
            transform: scale(1);
          }
        }

        /* Responsive Adjustments (Specific for UI/UX compatibility) */
        @media (max-width: 991.98px) {

          /* Tablet and Mobile Navbar Styling */
          .navbar-collapse {
            background: var(--color-dark-start);
            position: absolute;
            top: 100%;
            left: 0;
            width: 100%;
            padding: 1.5rem;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            z-index: 1000;
          }

          .navbar-nav {
            margin-top: 1rem;
          }

          .navbar-nav .nav-item {
            margin-bottom: 0.5rem;
          }

          .navbar-nav .nav-link {
            padding: 0.8rem 0.5rem;
            margin-left: 0;
            color: var(--text-light) !important;
            border-radius: 0.3rem;
            transition: background-color 0.3s ease, color 0.3s ease;
          }

          .navbar-nav .nav-link:hover {
            background-color: rgba(255, 255, 255, 0.1);
            color: var(--accent-blue) !important;
          }

          .navbar-nav .nav-item.ms-lg-3,
          .navbar-nav .nav-item.ms-lg-2 {
            margin-left: 0 !important;
            margin-top: 1.5rem;
          }

          .navbar-nav .btn {
            display: block;
            width: 100%;
            text-align: center;
            padding: 0.8rem 1.5rem;
            font-size: 1.1rem;
          }

          .navbar-nav .btn-outline-light-custom {
            border-color: rgba(255, 255, 255, 0.5);
            color: var(--text-light);
          }

          .navbar-nav .btn-outline-light-custom:hover {
            background-color: var(--accent-blue);
            border-color: var(--accent-blue);
            color: var(--color-dark-start);
          }
        }

        @media (max-width: 767.98px) {

          /* Extra small and small devices */
          .hero-section {
            padding: 5rem 0;
          }

          .hero-section h1 {
            font-size: 2.5rem;
          }

          .hero-section p.lead {
            font-size: 1rem;
          }

          .hero-buttons .btn {
            font-size: 1rem;
            padding: 0.7rem 1.8rem;
            margin: 0.5rem 0;
            display: block;
            width: 100%;
          }

          .features-section,
          .pricing-section,
          .how-it-works-section,
          .testimonials-section,
          .cta-section,
          .faq-section {
            padding: 4rem 0;
          }

          h2 {
            font-size: 2rem !important;
          }

          .feature-icon {
            font-size: 3rem;
          }

          .feature-card h5 {
            font-size: 1.3rem;
          }

          .pricing-card h5 {
            font-size: 1.6rem;
          }

          .pricing-card p.fw-bold {
            font-size: 2rem;
          }

          .carousel-item p.lead {
            font-size: 1.1rem;
          }

          .cta-section .btn {
            font-size: 1.1rem;
            padding: 0.8rem 2.5rem;
          }

          .footer-links a {
            margin: 0 0.5rem;
          }

          .accordion-button {
            font-size: 1.1rem;
            padding: 1.2rem;
          }

          .accordion-body {
            font-size: 0.95rem;
            padding: 1.2rem;
          }
        }