/* ---- design tokens ---- */
    :root {
      --clr-brand: #ff6e50;
      --clr-brand-dark: #e85530;
      --clr-blue: #2563eb;
      --clr-text: #1f2937;
      --clr-muted: #6b7280;
      --clr-bg: #f9fafb;
      --clr-white: #ffffff;
      --clr-wa: #25d366;
      --clr-wa-dark: #1ebe5d;
      --shadow-card: 0 4px 24px rgba(0,0,0,.08);
      --shadow-hover: 0 16px 40px rgba(0,0,0,.14);
      --radius-card: 16px;
      --transition: 0.28s cubic-bezier(0.4,0,0.2,1);
    }

    /* ---- global reset smoothness ---- */
    *, *::before, *::after {
      box-sizing: border-box !important;
    }

    html {
      scroll-behavior: smooth !important;
    }

    body {
      font-family: 'Plus Jakarta Sans', sans-serif !important;
      background: var(--clr-bg) !important;
      color: var(--clr-text) !important;
      -webkit-font-smoothing: antialiased !important;
      overflow-x: hidden !important;
    }

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

    /* ---- animations ---- */
    @keyframes pulse {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: .85; transform: scale(1.06); }
    }

    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(24px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    .pulse-animation {
      animation: pulse 2.2s ease-in-out infinite !important;
    }

    /* ---- navbar ---- */
    #navbar {
      position: fixed !important;
      top: 0 !important;
      left: 0 !important;
      width: 100% !important;
      background: rgba(255,255,255,0.96) !important;
      backdrop-filter: blur(12px) !important;
      -webkit-backdrop-filter: blur(12px) !important;
      box-shadow: 0 1px 20px rgba(0,0,0,.08) !important;
      z-index: 40 !important;
      transition: box-shadow var(--transition) !important;
    }

    #navbar .container {
      max-width: 1200px !important;
      margin: 0 auto !important;
      padding: 0 24px !important;
    }

    /* brand text: override the chaotic inline style */
    #navbar h1 {
      font-size: 1rem !important;
      font-weight: 800 !important;
      letter-spacing: .02em !important;
      background: linear-gradient(135deg, var(--clr-brand), #ff9a6c) !important;
      -webkit-background-clip: text !important;
      -webkit-text-fill-color: transparent !important;
      background-clip: text !important;
      transform: none !important;
    }

    #navbar a {
      font-size: .9rem !important;
      font-weight: 500 !important;
      color: var(--clr-text) !important;
      text-decoration: none !important;
      transition: color var(--transition) !important;
      position: relative !important;
    }

    #navbar a::after {
      content: '' !important;
      position: absolute !important;
      bottom: -2px !important;
      left: 0 !important;
      width: 0 !important;
      height: 2px !important;
      background: var(--clr-brand) !important;
      transition: width var(--transition) !important;
    }

    #navbar a:hover { color: var(--clr-brand) !important; }
    #navbar a:hover::after { width: 100% !important; }

    /* ---- mobile menu ---- */
    #mobileMenu {
      display: none !important;
      flex-direction: column !important;
      padding-bottom: 16px !important;
      border-top: 1px solid #f0f0f0 !important;
      margin-top: 4px !important;
    }

    #mobileMenu.open {
      display: flex !important;
    }

    #mobileMenu a {
      padding: 10px 0 !important;
      font-size: .95rem !important;
      font-weight: 500 !important;
      border-bottom: 1px solid #f5f5f5 !important;
    }

    /* ---- hero ---- */
    #home {
      min-height: 100svh !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      overflow: hidden !important;
      position: relative !important;
    }

    #home .absolute.inset-0 img {
      width: 100% !important;
      height: 100% !important;
      object-fit: cover !important;
    }

    /* override chaotic inline transform on hero text */
    #home .relative.text-center {
      transform: none !important;
      animation: fadeUp .9s ease both !important;
      padding: 0 20px !important;
      max-width: 860px !important;
    }

    #home h1 {
      font-size: clamp(2rem, 5vw, 3.5rem) !important;
      font-weight: 800 !important;
      line-height: 1.15 !important;
      text-shadow: 0 2px 20px rgba(0,0,0,.4) !important;
      transform: none !important;
      margin-bottom: 1.25rem !important;
    }

    #home p {
      font-size: clamp(1rem, 2vw, 1.25rem) !important;
      opacity: .92 !important;
    }

    /* ---- sections common ---- */
    section { padding: 80px 0 !important; }
    section .container { max-width: 1200px !important; margin: 0 auto !important; padding: 0 24px !important; }

    section h2 {
      font-size: clamp(1.75rem, 3vw, 2.25rem) !important;
      font-weight: 800 !important;
      color: var(--clr-text) !important;
      text-align: center !important;
      margin-bottom: 8px !important;
    }

    section > .container > p.text-center {
      color: var(--clr-muted) !important;
      text-align: center !important;
      margin-bottom: 48px !important;
      font-size: 1rem !important;
    }

    /* ---- car cards ---- */
    .car-card {
      background: var(--clr-white) !important;
      border-radius: var(--radius-card) !important;
      box-shadow: var(--shadow-card) !important;
      overflow: hidden !important;
      transition: transform var(--transition), box-shadow var(--transition) !important;
    }

    .car-card.card-hover:hover {
      transform: translateY(-8px) !important;
      box-shadow: var(--shadow-hover) !important;
    }

    .car-card img {
      border-radius: 10px !important;
      object-fit: cover !important;
      width: 100% !important;
      height: 192px !important;
    }

    .car-card h3 {
      font-size: 1.1rem !important;
      font-weight: 700 !important;
      margin-bottom: 4px !important;
    }

    .car-card p {
      color: var(--clr-muted) !important;
      font-size: .875rem !important;
    }

    /* ---- buttons: unify all the inconsistent inline colors ---- */
    button[onclick^="openWhatsApp"] {
      background: var(--clr-brand) !important;
      color: #fff !important;
      border: none !important;
      border-radius: 10px !important;
      padding: 10px 16px !important;
      font-size: .9rem !important;
      font-weight: 600 !important;
      cursor: pointer !important;
      transition: background var(--transition), transform var(--transition) !important;
      width: 100% !important;
      margin-top: 16px !important;
    }

    button[onclick^="openWhatsApp"]:hover {
      background: var(--clr-brand-dark) !important;
      transform: translateY(-1px) !important;
    }

    /* tour paket - Work Visit & Gathering btn tetap biru krn konsisten branding beda */
    button[onclick="openWhatsApp('Work Visit')"],
    button[onclick="openWhatsApp('Gathering')"] {
      background: var(--clr-blue) !important;
    }

    button[onclick="openWhatsApp('Work Visit')"]:hover,
    button[onclick="openWhatsApp('Gathering')"]:hover {
      background: #1d4ed8 !important;
    }

    /* bus section buttons */
    .bus-section button,
    #bus button {
      background: var(--clr-brand) !important;
    }

    /* "Info Luar Provinsi" CTA */
    button[onclick="openWhatsApp('Info Luar Provinsi')"] {
      background: var(--clr-brand) !important;
      border-radius: 40px !important;
      padding: 12px 32px !important;
      width: auto !important;
    }

    /* ---- destination cards ---- */
    .destination-card {
      height: 400px !important;
      border-radius: var(--radius-card) !important;
      overflow: hidden !important;
      position: relative !important;
      transition: transform var(--transition), box-shadow var(--transition) !important;
    }

    .destination-card.card-hover:hover {
      transform: translateY(-6px) !important;
      box-shadow: var(--shadow-hover) !important;
    }

    .destination-card img {
      position: absolute !important;
      inset: 0 !important;
      width: 100% !important;
      height: 100% !important;
      object-fit: cover !important;
      transition: transform 0.6s ease !important;
      border-radius: 0 !important;
    }

    .destination-card:hover img {
      transform: scale(1.04) !important;
    }

    .destination-overlay {
      position: absolute !important;
      inset: 0 !important;
      background: linear-gradient(to top, rgba(0,0,0,.82) 0%, rgba(0,0,0,.28) 55%, transparent 100%) !important;
      display: flex !important;
      flex-direction: column !important;
      justify-content: flex-end !important;
      padding: 24px !important;
      color: #fff !important;
    }

    .destination-overlay h3 {
      font-size: 1.3rem !important;
      font-weight: 700 !important;
      margin-bottom: 6px !important;
      color: #fff !important;
    }

    .destination-overlay p {
      font-size: .8rem !important;
      opacity: .88 !important;
      margin-bottom: 12px !important;
      color: #fff !important;
      line-height: 1.5 !important;
    }

    /* fix tag badge colors - override random inline styles */
    .destination-overlay span {
      padding: 3px 10px !important;
      border-radius: 20px !important;
      font-size: .72rem !important;
      font-weight: 600 !important;
      background: rgba(255,255,255,0.2) !important;
      color: #fff !important;
      backdrop-filter: blur(4px) !important;
      border: 1px solid rgba(255,255,255,.3) !important;
    }

    /* ---- tour section ---- */
    #tour .max-w-4xl {
      border-radius: var(--radius-card) !important;
      overflow: hidden !important;
      box-shadow: var(--shadow-card) !important;
    }

    #tour .max-w-4xl img {
      height: 224px !important;
      object-fit: cover !important;
      width: 100% !important;
      border-radius: 0 !important;
    }

    #tour .grid .bg-white {
      border-radius: var(--radius-card) !important;
      box-shadow: var(--shadow-card) !important;
      transition: transform var(--transition), box-shadow var(--transition) !important;
    }

    #tour .grid .bg-white.card-hover:hover {
      transform: translateY(-8px) !important;
      box-shadow: var(--shadow-hover) !important;
    }

    /* tag pills in tour section */
    #tour .flex-wrap span {
      font-size: .8rem !important;
      font-weight: 600 !important;
      border-radius: 20px !important;
      padding: 4px 12px !important;
    }

    /* ---- bus section ---- */
    #bus .bg-gradient-to-br {
      border-radius: var(--radius-card) !important;
      box-shadow: var(--shadow-card) !important;
      transition: transform var(--transition), box-shadow var(--transition) !important;
    }

    #bus .bg-gradient-to-br.card-hover:hover {
      transform: translateY(-6px) !important;
      box-shadow: var(--shadow-hover) !important;
    }

    /* ---- testimonial cards ---- */
    #testimonial .bg-white {
      border-radius: var(--radius-card) !important;
      box-shadow: var(--shadow-card) !important;
      transition: transform var(--transition), box-shadow var(--transition) !important;
    }

    #testimonial .bg-white.card-hover:hover {
      transform: translateY(-6px) !important;
      box-shadow: var(--shadow-hover) !important;
    }

    #testimonial img.rounded-full {
      width: 56px !important;
      height: 56px !important;
      object-fit: cover !important;
      border-radius: 50% !important;
    }

    #testimonial p.italic {
      font-size: .9rem !important;
      line-height: 1.65 !important;
      color: var(--clr-muted) !important;
    }

    /* ---- FAQ accordion ---- */
    #faq .space-y-4 > div {
      border-radius: 12px !important;
      box-shadow: var(--shadow-card) !important;
      overflow: hidden !important;
      background: var(--clr-white) !important;
      transition: box-shadow var(--transition) !important;
    }

    #faq .space-y-4 > div:hover {
      box-shadow: var(--shadow-hover) !important;
    }

    /* target accordion trigger button specifically */
    #faq .space-y-4 > div > button {
      width: 100% !important;
      text-align: left !important;
      display: flex !important;
      justify-content: space-between !important;
      align-items: center !important;
      padding: 20px 24px !important;
      background: transparent !important;
      border: none !important;
      border-bottom: 1px solid transparent !important;
      cursor: pointer !important;
      color: var(--clr-text) !important;
      font-size: 1rem !important;
      font-weight: 600 !important;
      font-family: 'Plus Jakarta Sans', sans-serif !important;
      transition: background var(--transition), border-color var(--transition) !important;
      gap: 16px !important;
    }

    #faq .space-y-4 > div > button:hover {
      background: #fdf7f5 !important;
    }

    /* kalau accordion lagi open, kasih divider biar konten kepisah visual */
    #faq .space-y-4 > div > button + .accordion-content.active {
      border-top: 1px solid #f0ece9 !important;
    }

    .accordion-content {
      max-height: 0 !important;
      overflow: hidden !important;
      transition: max-height .4s cubic-bezier(0.4, 0, 0.2, 1) !important;
      padding: 0 !important;
    }

    .accordion-content.active {
      max-height: 400px !important;
    }

    /* reset padding dari class px-6 pb-4 yang ada di HTML, ganti ke yang rapi */
    .accordion-content.px-6 {
      padding-left: 0 !important;
      padding-right: 0 !important;
      padding-bottom: 0 !important;
    }

    .accordion-content p {
      color: var(--clr-muted) !important;
      font-size: .9rem !important;
      line-height: 1.75 !important;
      padding: 16px 24px 20px !important;
      margin: 0 !important;
    }

    /* chevron icon */
    #faq i.fa-chevron-down {
      transition: transform .35s cubic-bezier(0.4, 0, 0.2, 1) !important;
      color: var(--clr-brand) !important;
      font-size: .8rem !important;
      flex-shrink: 0 !important;
      min-width: 16px !important;
    }

    #faq i.fa-chevron-down.rotate-180 {
      transform: rotate(180deg) !important;
    }

    /* ---- footer ---- */
    footer {
      background: #111827 !important;
      color: #fff !important;
    }

    footer .container { max-width: 1200px !important; margin: 0 auto !important; padding: 0 24px !important; }

    footer h3 {
      font-size: 1.05rem !important;
      font-weight: 700 !important;
      color:  #ff9a6c;
    }

    footer h4 {
      font-size: .9rem !important;
      font-weight: 700 !important;
      text-transform: uppercase !important;
      letter-spacing: .06em !important;
      color: var(--clr-brand) !important;
      margin-bottom: 16px !important;
    }

    footer p, footer li {
      color: #9ca3af !important;
      font-size: .875rem !important;
      line-height: 1.7 !important;
    }

    footer img.rounded-full {
      width: 48px !important;
      height: 48px !important;
      object-fit: cover !important;
      border-radius: 50% !important;
    }

    footer .border-t {
      border-top: 1px solid #374151 !important;
      margin-top: 40px !important;
      padding-top: 24px !important;
    }

    /* ---- WhatsApp FAB ---- */
    .whatsapp-btn {
      position: fixed !important;
      bottom: 28px !important;
      right: 28px !important;
      z-index: 50 !important;
    }

    .whatsapp-btn a {
      width: 60px !important;
      height: 60px !important;
      border-radius: 50% !important;
      background: var(--clr-wa) !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      box-shadow: 0 8px 24px rgba(37,211,102,.45) !important;
      color: #fff !important;
      text-decoration: none !important;
      transition: background var(--transition), transform var(--transition), box-shadow var(--transition) !important;
    }

    .whatsapp-btn a:hover {
      background: var(--clr-wa-dark) !important;
      transform: scale(1.12) !important;
      box-shadow: 0 12px 32px rgba(37,211,102,.6) !important;
    }

    .whatsapp-btn i { font-size: 1.75rem !important; }

    /* ---- grid layouts ---- */
    .grid { display: grid !important; }
    .grid-cols-1 { grid-template-columns: 1fr !important; }
    .gap-8 { gap: 32px !important; }
    .gap-6 { gap: 24px !important; }

    @media (min-width: 768px) {
      .md\:grid-cols-2 { grid-template-columns: repeat(2, 1fr) !important; }
      .md\:grid-cols-3 { grid-template-columns: repeat(3, 1fr) !important; }
      .md\:flex { display: flex !important; }
      .md\:hidden { display: none !important; }
      #mobileMenu { display: none !important; }
      #mobileMenu.open { display: none !important; }
    }

    @media (min-width: 1024px) {
      .lg\:grid-cols-3 { grid-template-columns: repeat(3, 1fr) !important; }
      .lg\:grid-cols-4 { grid-template-columns: repeat(4, 1fr) !important; }
    }

    /* ---- nav flex layout ---- */
    nav .flex { display: flex !important; }
    nav .items-center { align-items: center !important; }
    nav .justify-between { justify-content: space-between !important; }
    nav .py-4 { padding-top: 16px !important; padding-bottom: 16px !important; }
    nav .space-x-6 > * + * { margin-left: 24px !important; }

    /* ---- section backgrounds ---- */
    #rental { background: var(--clr-white) !important; }
    #destinations { background: linear-gradient(135deg, #eff6ff 0%, #fff7ed 100%) !important; }
    #tour { background: var(--clr-white) !important; }
    #bus { background: linear-gradient(135deg, #eff6ff 0%, #fff7ed 100%) !important; }
    #testimonial { background: var(--clr-white) !important; }
    #faq { background: linear-gradient(135deg, #eff6ff 0%, #fff7ed 100%) !important; }

    /* ---- spacing utils Tailwind override ---- */
    .py-20 { padding-top: 80px !important; padding-bottom: 80px !important; }
    .mb-4 { margin-bottom: 16px !important; }
    .mb-12 { margin-bottom: 48px !important; }
    .mt-4 { margin-top: 16px !important; }
    .mt-8 { margin-top: 32px !important; }
    .mt-12 { margin-top: 48px !important; }
    .p-6 { padding: 24px !important; }
    .p-8 { padding: 32px !important; }
    .px-4 { padding-left: 16px !important; padding-right: 16px !important; }

    /* ---- text utils ---- */
    .text-center { text-align: center !important; }
    .font-bold { font-weight: 700 !important; }
    .font-semibold { font-weight: 600 !important; }
    .text-white { color: #fff !important; }
    .text-gray-600 { color: var(--clr-muted) !important; }
    .text-gray-700 { color: #374151 !important; }
    .text-gray-800 { color: var(--clr-text) !important; }
    .text-orange-500 { color: var(--clr-brand) !important; }
    .text-orange-400 { color: #fb923c !important; }
    .text-blue-500 { color: var(--clr-blue) !important; }

    /* ---- misc ---- */
    .rounded-full { border-radius: 9999px !important; }
    .rounded-lg { border-radius: 10px !important; }
    .rounded-xl { border-radius: var(--radius-card) !important; }
    .overflow-hidden { overflow: hidden !important; }
    .object-cover { object-fit: cover !important; }
    .w-full { width: 100% !important; }
    .h-48 { height: 192px !important; }
    .h-56 { height: 224px !important; }
    .shadow-lg { box-shadow: var(--shadow-card) !important; }
    .shadow-md { box-shadow: 0 2px 12px rgba(0,0,0,.07) !important; }
    .italic { font-style: italic !important; }
    .space-y-4 > * + * { margin-top: 16px !important; }
    .space-y-2 > * + * { margin-top: 8px !important; }
    .max-w-4xl { max-width: 56rem !important; margin-left: auto !important; margin-right: auto !important; }
    .max-w-3xl { max-width: 48rem !important; margin-left: auto !important; margin-right: auto !important; }
    .max-w-5xl { max-width: 64rem !important; margin-left: auto !important; margin-right: auto !important; }
    .mx-auto { margin-left: auto !important; margin-right: auto !important; }
    .leading-relaxed { line-height: 1.7 !important; }
    .flex-wrap { flex-wrap: wrap !important; }
    .gap-2 { gap: 8px !important; }
    .items-center { align-items: center !important; }
    .ml-4 { margin-left: 16px !important; }
    .mr-2 { margin-right: 8px !important; }
    .mr-3 { margin-right: 12px !important; }
    .text-sm { font-size: .875rem !important; }
    .text-xs { font-size: .75rem !important; }
    .text-lg { font-size: 1.1rem !important; }
    .text-xl { font-size: 1.25rem !important; }
    .text-2xl { font-size: 1.5rem !important; }
    .text-3xl { font-size: 1.875rem !important; }
    .text-4xl { font-size: 2.25rem !important; }
    .text-5xl { font-size: 3rem !important; }
    .border-t { border-top: 1px solid #374151 !important; }
    .pt-8 { padding-top: 32px !important; }
    .py-12 { padding-top: 48px !important; padding-bottom: 48px !important; }
    .py-2 { padding-top: 8px !important; padding-bottom: 8px !important; }
    .py-3 { padding-top: 12px !important; padding-bottom: 12px !important; }
    .py-4 { padding-top: 16px !important; padding-bottom: 16px !important; }
    .px-6 { padding-left: 24px !important; padding-right: 24px !important; }
    .px-8 { padding-left: 32px !important; padding-right: 32px !important; }
    .pb-4 { padding-bottom: 16px !important; }
    .list-none, ul { list-style: none !important; padding-left: 0 !important; }

    /* min-h screen */
    .min-h-screen { min-height: 100dvh !important; }

    /* hero overlay */
    .bg-black.bg-opacity-40 { background: rgba(0,0,0,.42) !important; }
    .absolute.inset-0 { position: absolute !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; }
    .relative { position: relative !important; }
    .inset-0 { top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; }

    /* flex helpers */
    .flex { display: flex !important; }
    .flex-col { flex-direction: column !important; }
    .justify-end { justify-content: flex-end !important; }
    .justify-between { justify-content: space-between !important; }
    .justify-center { justify-content: center !important; }
    .hidden { display: none !important; }

    /* tour section icon */
    .text-5xl.mb-4 {
      font-size: 2.5rem !important;
      display: block !important;
      margin-bottom: 16px !important;
    }

    /* note row at bottom of rental section */
    .text-gray-500 { color: #9ca3af !important; }

    /* w-12 h-12 for nav logo */
    nav img.w-12 { width: 48px !important; height: 48px !important; border-radius: 50% !important; }

    /* hamburger button */
    nav button.md\:hidden {
      background: transparent !important;
      border: none !important;
      cursor: pointer !important;
      color: var(--clr-text) !important;
      padding: 4px !important;
    }

    @media (min-width: 768px) {
      nav button.md\:hidden { display: none !important; }
    }

    /* ---- scroll padding for fixed nav ---- */
    section[id] { scroll-margin-top: 72px !important; }

    /* ---- page load section fade ---- */
    section:not(#home) {
      animation: fadeUp .6s ease both !important;
      animation-timeline: view() !important;
      animation-range: entry 0% entry 20% !important;
    }