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

  /* ── Nav scroll state ── */
  nav.scrolled {
    background: rgba(15, 23, 42, 0.92);
    backdrop-filter: blur(12px);
    box-shadow: 0 1px 20px rgba(0,0,0,0.15);
  }
  nav.scrolled .nav-link { color: rgba(255,255,255,0.85); }

  /* ── Mobile menu ── */
  #mobileMenu.open { opacity: 1; pointer-events: all; }

  /* ── Reveal animations ── */
  .reveal {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }
  .reveal.revealed {
    opacity: 1;
    transform: translateY(0);
  }

  /* ── Floating cards ── */
  @keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
  }
  @keyframes float-delayed {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-8px); }
  }
  .animate-float { animation: float 4s ease-in-out infinite; }
  .animate-float-delayed { animation: float-delayed 4s ease-in-out 1s infinite; }

  /* ── Service card hover ── */
  .service-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  .service-card:hover {
    transform: translateY(-4px);
  }

  /* ── Scroll reveal (progressive enhancement) ── */
  @media (prefers-reduced-motion: no-preference) {
    .reveal {
      opacity: 0;
      transform: translateY(24px);
    }
    .reveal.revealed {
      opacity: 1;
      transform: translateY(0);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .reveal {
      opacity: 1;
      transform: none;
    }
    .animate-float, .animate-float-delayed {
      animation: none;
    }
    html { scroll-behavior: auto; }
  }

  /* ── Smooth focus ── */
  a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid #0d9488;
    outline-offset: 2px;
  }

  /* ── Selection ── */
  ::selection { background: rgba(13, 148, 136, 0.2); color: #1e293b; }
</style>