/* ========== BASE ========== */
  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; scroll-padding-top: 80px; }
  body { overflow-x: hidden; }
  img { max-width: 100%; height: auto; }

  /* ========== SCROLL REVEAL ========== */
  .reveal {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }
  .reveal[data-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }
  @media (prefers-reduced-motion: no-preference) {
    .reveal[data-reveal] {
      opacity: 0;
      transform: translateY(24px);
      transition: opacity 0.6s ease, transform 0.6s ease;
    }
    .reveal.visible[data-reveal] {
      opacity: 1;
      transform: translateY(0);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .reveal[data-reveal] {
      opacity: 1;
      transform: none;
      transition: none;
    }
  }

  /* ========== NAVBAR ========== */
  #navbar {
    background: transparent;
    transition: background 0.3s ease, box-shadow 0.3s ease, padding 0.3s ease;
  }
  #navbar.scrolled {
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(12px);
    box-shadow: 0 1px 20px rgba(30, 58, 95, 0.08);
  }
  #navbar.scrolled .nav-link { color: #1e3a5f; }
  #navbar.scrolled .menu-line { background: #1e3a5f; }
  #navbar.scrolled .font-bold.text-navy-900 span:first-child { color: #1e3a5f; }

  /* ========== MOBILE MENU ========== */
  #mobile-menu {
    animation: slideDown 0.25s ease;
  }
  @keyframes slideDown {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .mobile-link { display: block; }
  .mobile-link:hover { color: #d4a017; }

  /* Mobile menu open state */
  #mobile-menu.open { display: block; }
  #mobile-menu:not(.open) { display: none; }

  /* Menu button active state */
  #menu-btn.active .menu-line:nth-child(1) {
    transform: rotate(45deg) translate(4px, 4px);
  }
  #menu-btn.active .menu-line:nth-child(2) {
    opacity: 0;
  }
  #menu-btn.active .menu-line:nth-child(3) {
    width: 6px;
    transform: rotate(-45deg) translate(4px, -4px);
  }

  /* ========== HERO ========== */
  .hero-deco {
    animation: float 8s ease-in-out infinite;
  }
  .hero-deco:nth-child(2) { animation-delay: -2s; animation-duration: 10s; }
  .hero-deco:nth-child(3) { animation-delay: -4s; animation-duration: 7s; }
  .hero-deco:nth-child(4) { animation-delay: -1s; animation-duration: 9s; }
  @keyframes float {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(8px, -12px) scale(1.02); }
    66% { transform: translate(-6px, 8px) scale(0.98); }
  }
  .hero-badge {
    animation: fadeInDown 0.8s ease both;
  }
  #hero h1 {
    animation: fadeInUp 0.8s ease 0.15s both;
  }
  #hero p {
    animation: fadeInUp 0.8s ease 0.3s both;
  }
  #hero .flex.flex-col {
    animation: fadeInUp 0.8s ease 0.45s both;
  }
  #hero .grid.grid-cols-3 {
    animation: fadeInUp 0.8s ease 0.6s both;
  }
  @keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-16px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
  }

  /* ========== SERVICE CARDS ========== */
  .service-card {
    transform: translateY(0);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  }
  .service-card:hover {
    transform: translateY(-4px);
  }

  /* ========== SCROLLBAR ========== */
  ::-webkit-scrollbar { width: 8px; }
  ::-webkit-scrollbar-track { background: #eef5fb; }
  ::-webkit-scrollbar-thumb { background: #d4a017; border-radius: 9999px; }
  ::-webkit-scrollbar-thumb:hover { background: #b07f0e; }

  /* ========== SELECTION ========== */
  ::selection { background: #d4a017; color: #132744; }