/* Root + typography + page utilities */
html { scroll-behavior: smooth; }
body { font-family: 'Manrope', system-ui, sans-serif; background: #f8fafc; color: #0f172a; -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-family: 'Fraunces', Georgia, serif; letter-spacing: -0.015em; line-height: 1.1; }
.display { font-family: 'Fraunces', Georgia, serif; }
::selection { background: #99f6e4; color: #0f172a; }

.grid-bg {
  background-image:
    radial-gradient(circle at 20% 10%, rgba(20,184,166,0.10), transparent 40%),
    radial-gradient(circle at 80% 0%, rgba(15,23,42,0.06), transparent 45%),
    linear-gradient(rgba(15,23,42,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,23,42,0.04) 1px, transparent 1px);
  background-size: auto, auto, 32px 32px, 32px 32px;
}

.floor-svg { filter: drop-shadow(0 12px 24px rgba(15,23,42,0.18)); }

/* Scroll reveal */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); }
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal[data-delay="1"] { transition-delay: 80ms; }
.reveal[data-delay="2"] { transition-delay: 160ms; }
.reveal[data-delay="3"] { transition-delay: 240ms; }

/* Hero illustration: float / pulse / NFC waves */
@keyframes float-y    { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes float-y-sm { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes pulse-op   { 0%,100% { opacity: .4; } 50% { opacity: 1; } }
@keyframes wave       { 0% { stroke-dashoffset: 60; opacity: 0; } 30% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
.float    { animation: float-y    4s ease-in-out infinite; transform-origin: center; }
.float-sm { animation: float-y-sm 3s ease-in-out infinite .5s; transform-origin: center; }
.pulse-op { animation: pulse-op   1.6s ease-in-out infinite; }
.wave     { stroke-dasharray: 30 30; animation: wave 2.2s ease-out infinite; }
.wave-2   { animation-delay: .5s; }
.wave-3   { animation-delay: 1s; }