/* ===== BASE & RESET ===== */
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; scroll-padding-top: 80px; }
  body { overflow-x: hidden; }

  /* ===== SCROLLBAR ===== */
  ::-webkit-scrollbar { width: 8px; }
  ::-webkit-scrollbar-track { background: #060d1a; }
  ::-webkit-scrollbar-thumb { background: #1e3a5f; border-radius: 4px; }
  ::-webkit-scrollbar-thumb:hover { background: #2dd4bf; }

  /* ===== SELECTION ===== */
  ::selection { background: rgba(45, 212, 191, 0.3); color: #f1f5f9; }

  /* ===== SCROLL REVEAL ===== */
  .scroll-reveal {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  }

  @media (prefers-reduced-motion: no-preference) {
    .scroll-reveal {
      opacity: 0;
      transform: translateY(30px);
    }
    .scroll-reveal.revealed {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* ===== NAVBAR SCROLLED STATE ===== */
  #navbar.scrolled {
    background: rgba(6, 13, 26, 0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(45, 212, 191, 0.08);
    box-shadow: 0 4px 40px rgba(0, 0, 0, 0.4);
  }

  /* ===== MOBILE MENU ===== */
  #mobileMenu.open {
    opacity: 1;
    pointer-events: all;
  }

  /* ===== MOBILE MENU BUTTON ANIMATION ===== */
  #menuBtn.active .menu-line:nth-child(1) {
    transform: rotate(45deg) translate(4px, 4px);
  }
  #menuBtn.active .menu-line:nth-child(2) {
    opacity: 0;
    transform: translateX(10px);
  }
  #menuBtn.active .menu-line:nth-child(3) {
    width: 20px;
    transform: rotate(-45deg) translate(4px, -4px);
  }

  /* ===== GOLD GRADIENT TEXT ===== */
  .gold-gradient {
    background: linear-gradient(135deg, #fcd34d 0%, #f59e0b 50%, #d97706 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  /* ===== IMAGE HOVER ===== */
  .scroll-reveal img {
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .scroll-reveal:hover img {
    transform: scale(1.02);
  }

  /* ===== FORM INPUTS FOCUS GLOW ===== */
  input:focus, textarea:focus {
    box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.1);
  }

  /* ===== LINK UNDERLINE ANIMATION ===== */
  a:not(.mobile-link):not([class*="bg-"]):not([class*="px-"]):not([class*="inline-flex"]) {
    position: relative;
  }
  a:not(.mobile-link):not([class*="bg-"]):not([class*="px-"]):not([class*="inline-flex"])::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background: #2dd4bf;
    transition: width 0.3s ease;
  }
  a:not(.mobile-link):not([class*="bg-"]):not([class*="px-"]):not([class*="inline-flex"]):hover::after {
    width: 100%;
  }

  /* ===== PAGE LOADER ===== */
  #loader {
    animation: fadeOut 0.5s ease forwards;
  }
  @keyframes fadeOut {
    to { opacity: 0; pointer-events: none; }
  }
  @keyframes spin {
    to { transform: rotate(360deg); }
  }
  @keyframes pulse-dot {
    0%, 80%, 100% { transform: scale(0.8); opacity: 0.5; }
    40% { transform: scale(1.2); opacity: 1; }
  }
  .loader-dot { animation: pulse-dot 1.4s infinite ease-in-out; }
  .loader-dot:nth-child(2) { animation-delay: 0.2s; }
  .loader-dot:nth-child(3) { animation-delay: 0.4s; }
</style>