*, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body { overflow-x: hidden; }

  /* Custom scrollbar */
  ::-webkit-scrollbar { width: 8px; }
  ::-webkit-scrollbar-track { background: #09114a; }
  ::-webkit-scrollbar-thumb { background: #1e35b8; border-radius: 4px; }
  ::-webkit-scrollbar-thumb:hover { background: #2a47e0; }

  /* Navbar scroll state */
  #navbar.scrolled {
    background: rgba(9, 17, 74, 0.92);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255,255,255,0.05);
  }

  /* Floating cards animation */
  @keyframes float-1 {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-16px) rotate(1deg); }
  }
  @keyframes float-2 {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-12px) rotate(-1deg); }
  }
  @keyframes float-3 {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(0.5deg); }
  }
  @keyframes float-4 {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-10px) rotate(-0.5deg); }
  }

  .floating-card { animation-duration: 5s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
  .card-1 { animation-name: float-1; }
  .card-2 { animation-name: float-2; animation-delay: 1s; }
  .card-3 { animation-name: float-3; animation-delay: 2s; }
  .card-4 { animation-name: float-4; animation-delay: 0.5s; }

  /* Scroll reveal — progressive enhancement */
  @media (prefers-reduced-motion: no-preference) {
    .reveal { opacity: 1; transform: none; transition: opacity 0.7s ease, transform 0.7s ease; }
    .reveal.revealed { opacity: 1; transform: none; }
  }

  /* Default state for reveal elements (visible when JS disabled) */
  .reveal { opacity: 1; transform: translateY(0); }

  /* Selection color */
  ::selection { background: rgba(20, 184, 166, 0.3); color: #f0f4ff; }

  /* Focus styles */
  :focus-visible { outline: 2px solid #14b8a6; outline-offset: 2px; }

  /* Mobile menu transition */
  #mobileMenu { transition: max-height 0.4s ease, opacity 0.3s ease; }
  #mobileMenu.open { max-height: 500px; opacity: 1; }
  #mobileMenu.closed { max-height: 0; opacity: 0; overflow: hidden; }