html {
  scroll-behavior: smooth;
}

body {
  font-family: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  background-color: oklch(0.995 0.003 250);
  color: oklch(0.24 0.045 255);
}

h1, h2, h3, .font-display {
  font-family: 'Outfit', ui-sans-serif, system-ui, sans-serif;
  letter-spacing: -0.025em;
  font-weight: 600;
}

/* Spectrum gradient bar / text */
.spectrum-bar {
  background: linear-gradient(90deg, oklch(0.28 0.09 262), oklch(0.45 0.13 256), oklch(0.68 0.13 235), oklch(0.45 0.13 256), oklch(0.28 0.09 262));
  background-size: 200% 100%;
  animation: spectrum-shift 8s linear infinite;
}

.spectrum-text {
  background: linear-gradient(90deg, oklch(0.24 0.05 255), oklch(0.55 0.14 250));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

@keyframes spectrum-shift {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

@keyframes kenburns-slow {
  0%   { transform: scale(1.05) translate3d(0%, 0%, 0); }
  25%  { transform: scale(1.12) translate3d(-1.5%, -1%, 0); }
  50%  { transform: scale(1.18) translate3d(1%, -1.5%, 0); }
  75%  { transform: scale(1.12) translate3d(1.5%, 1%, 0); }
  100% { transform: scale(1.05) translate3d(0%, 0%, 0); }
}
.animate-kenburns-slow {
  animation: kenburns-slow 18s ease-in-out infinite;
}

@keyframes drift {
  0%, 100% { transform: translate3d(0,0,0) scale(1); }
  50%      { transform: translate3d(2%, -2%, 0) scale(1.08); }
}
.animate-drift {
  animation: drift 14s ease-in-out infinite;
}

@keyframes ping-soft {
  75%, 100% { transform: scale(2); opacity: 0; }
}
.animate-ping-soft {
  animation: ping-soft 1.6s cubic-bezier(0, 0, 0.2, 1) infinite;
}

/* Scroll reveal / lazy-load-in-view effect */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
  will-change: opacity, transform;
}
.reveal.reveal-visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.08s; }
.reveal-delay-2 { transition-delay: 0.16s; }
.reveal-delay-3 { transition-delay: 0.24s; }
.reveal-delay-4 { transition-delay: 0.32s; }
.reveal-delay-5 { transition-delay: 0.4s; }
.reveal-delay-6 { transition-delay: 0.48s; }

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .animate-kenburns-slow, .animate-drift, .spectrum-bar, .animate-ping-soft {
    animation: none;
  }
}

/* Mobile nav */
.mobile-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.mobile-menu.open {
  max-height: 48rem;
}

/* ──────────────────────────────────────────────
   Global responsive: down to 320px
   ────────────────────────────────────────────── */

/* Ensure nothing overflows the viewport */
*, *::before, *::after {
  min-width: 0;
  box-sizing: border-box;
}

/* Fluid type scale floor for very small screens */
@media (max-width: 480px) {
  h1 { font-size: clamp(1.75rem, 7vw, 3rem); }
  h2 { font-size: clamp(1.4rem,  6vw, 2.25rem); }
  h3 { font-size: clamp(1.1rem,  5vw, 1.5rem); }

  /* Reduce hero padding on tiny screens */
  .px-6 { padding-left: 1rem; padding-right: 1rem; }
  .py-20 { padding-top: 3rem; padding-bottom: 3rem; }
  .py-24 { padding-top: 3rem; padding-bottom: 3rem; }

  /* Hero text sizes */
  .text-5xl { font-size: clamp(1.75rem, 8vw, 3rem); }
  .text-6xl { font-size: clamp(2rem, 9vw, 3.75rem); }
  .text-4xl { font-size: clamp(1.5rem, 7vw, 2.25rem); }
  .text-3xl { font-size: clamp(1.3rem, 6vw, 1.875rem); }

  /* Tables scroll horizontally if needed */
  table { display: block; overflow-x: auto; }

  /* Product hero breadcrumb */
  .tracking-widest { letter-spacing: 0.1em; }

  /* Footer grid stacks */
  .md\:grid-cols-4 { grid-template-columns: 1fr; }
}

@media (max-width: 360px) {
  h1 { font-size: clamp(1.5rem, 8.5vw, 2.5rem); }
  .text-5xl { font-size: clamp(1.5rem, 9vw, 2.5rem); }
  .text-6xl { font-size: clamp(1.6rem, 9.5vw, 3rem); }
}