:root {
  --navy: #0b1f3a;
  --navy-800: #122c52;
  --navy-700: #1a3a6b;
  --blue: #1d4ed8;
  --mist: #f5f8fc;
  --ink: #0f172a;
  --muted: #475569;
  --line: #e2e8f0;
  --success: #0f766e;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--mist);
  color: var(--ink);
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
}

::selection {
  background: #dbeafe;
  color: var(--navy);
}

.container-site {
  width: min(1120px, calc(100% - 2rem));
  margin-inline: auto;
}

.prose-site h2 {
  font-size: clamp(1.4rem, 2vw, 1.75rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--navy);
  margin-top: 2.5rem;
  margin-bottom: 0.85rem;
}

.prose-site h3 {
  font-size: 1.125rem;
  font-weight: 650;
  color: var(--navy-800);
  margin-top: 1.6rem;
  margin-bottom: 0.55rem;
}

.prose-site p,
.prose-site li {
  color: var(--muted);
  line-height: 1.75;
}

.prose-site p + p {
  margin-top: 1rem;
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

.reveal {
  animation: fade-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes float-y {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}

@keyframes orb-pulse {
  0%, 100% { transform: scale(1); opacity: 0.7; }
  50% { transform: scale(1.12); opacity: 1; }
}

@keyframes ticker {
  from { transform: translateY(0); }
  to { transform: translateY(-50%); }
}

.hero-orb {
  position: absolute;
  height: 150px;
  width: 150px;
  border-radius: 999px;
  filter: blur(18px);
  animation: orb-pulse 6s ease-in-out infinite;
  pointer-events: none;
}

.hero-float {
  animation: float-y 5s ease-in-out infinite;
}

.hero-ticker {
  height: 248px;
  overflow: hidden;
  mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
}

.hero-ticker-track {
  display: grid;
  gap: 10px;
  animation: ticker 16s linear infinite;
}

.hero-ticker-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border: 1px solid var(--line);
  background: var(--mist);
  border-radius: 1.1rem;
  padding: 12px 14px;
}

@keyframes slide-in-left {
  from { opacity: 0; transform: translateX(-56px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes slide-out-right {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(48px); }
}

.hero-slide-line {
  max-width: 36rem;
  min-height: 2.4rem;
  overflow: hidden;
}

.hero-slide-title {
  margin: 0;
  font-size: clamp(1.35rem, 2.4vw, 1.85rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--blue);
  white-space: nowrap;
}

@media (max-width: 640px) {
  .hero-slide-title { white-space: normal; }
}

.hero-slide-title.is-in { animation: slide-in-left 0.55s cubic-bezier(0.22, 1, 0.36, 1) both; }
.hero-slide-title.is-out { animation: slide-out-right 0.4s ease both; }

@keyframes howto-id-float {
  0%, 100% { transform: translate(0, 0) rotate(-12deg); }
  50% { transform: translate(12px, -14px) rotate(-6deg); }
}

@keyframes howto-nfc {
  0% { transform: scale(0.45); opacity: 0.55; }
  100% { transform: scale(1.7); opacity: 0; }
}

@keyframes howto-approve {
  0%, 35% { opacity: 0.35; transform: translateY(4px); }
  50%, 85% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0.35; transform: translateY(4px); }
}

@keyframes howto-step {
  0%, 12% { border-color: var(--line); background: var(--mist); transform: translateY(0); }
  16%, 28% { border-color: #93c5fd; background: #eff6ff; transform: translateY(-2px); }
  32%, 100% { border-color: var(--line); background: var(--mist); transform: translateY(0); }
}

@keyframes howto-dot {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

.howto-id { animation: howto-id-float 4.4s ease-in-out infinite; }

.howto-nfc-ring {
  position: absolute;
  height: 42px;
  width: 42px;
  border-radius: 999px;
  border: 2px solid #3b82f6;
  animation: howto-nfc 2.2s ease-out infinite;
}

.howto-nfc-ring-2 { animation-delay: 1.1s; }
.howto-approve { animation: howto-approve 6.4s ease-in-out infinite; }
.howto-step { animation: howto-step 6.4s ease-in-out infinite; }
.howto-pulse-dot { animation: howto-dot 1.4s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .hero-orb, .hero-float, .hero-ticker-track, .hero-slide-title.is-in, .hero-slide-title.is-out, .howto-id, .howto-nfc-ring, .howto-approve, .howto-step, .howto-pulse-dot {
    animation: none;
  }
}