html { scroll-behavior: smooth; }
body { font-family: 'Outfit', sans-serif; }
.font-display { font-family: 'Fraunces', Georgia, serif; }
h1, h2, h3 { font-family: 'Fraunces', Georgia, serif; }
.story-quote { font-family: 'Fraunces', Georgia, serif; }

.rule { height: 2px; background: linear-gradient(90deg, #C85A3A 0%, #D4A853 50%, #7A8B6F 100%); border-radius: 99px; }
.accent-line { height: 3px; background: linear-gradient(90deg, #C85A3A, #D4A853); border-radius: 99px; }

@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: 0; } }
.cursor { display: inline-block; width: 3px; height: 0.85em; background: #C85A3A; margin-left: 6px; animation: blink 1s step-end infinite; vertical-align: text-bottom; }

@keyframes wave { 0%, 100% { height: 8px; } 50% { height: var(--peak); } }
.waveform-bar { animation: wave var(--speed) ease-in-out infinite; animation-delay: var(--delay); }

.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.visible { opacity: 1; transform: none; }

.tab-panel { display: none; }
.tab-panel.active { display: flex; }
.tab-btn.active {
  background-color: #2A2A2A !important;
  color: #FDFBF8 !important;
  border-color: #2A2A2A !important;
}

.perspective-card { transition: transform 0.25s ease, box-shadow 0.25s ease; }
.perspective-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(0,0,0,0.12); }

#nav { transition: box-shadow 0.3s, background-color 0.3s; }
#nav.scrolled { box-shadow: 0 2px 20px rgba(0,0,0,0.06); backdrop-filter: blur(12px); background: rgba(253,251,248,0.92); }

#mobile-menu { display: none; }
#mobile-menu.open { display: block; }

.chip { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 10px; border-radius: 99px; }

@keyframes pulse-ring {
  0%   { box-shadow: 0 0 0 0 rgba(200,90,58,0.3); }
  70%  { box-shadow: 0 0 0 12px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.node-pulse { animation: pulse-ring 2.2s ease-out infinite; }

.voice-bubble {
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  border: 1px solid rgba(0, 0, 0, 0.06);
}
.voice-bubble:hover {
  transform: scale(1.08);
  background-color: #2A2A2A !important;
  color: #FDFBF8 !important;
  border-color: #2A2A2A !important;
}

.lift { transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease; }
.lift:hover { transform: translateY(-4px); box-shadow: 0 20px 50px rgba(0,0,0,0.08); }

.grain {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 50; opacity: 0.03;
  background-image: url('https://upload.wikimedia.org/wikipedia/commons/7/76/1k_Noise_Condition.png');
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.hero-fade { animation: fadeIn 1.5s ease-out forwards; }
.hero-fade-delay-1 { animation: fadeIn 1.5s ease-out 0.4s forwards; opacity: 0; }
.hero-fade-delay-2 { animation: fadeIn 1.5s ease-out 0.8s forwards; opacity: 0; }
.hero-fade-delay-3 { animation: fadeIn 1.5s ease-out 1.4s forwards; opacity: 0; }

.sepia-filter { filter: sepia(0.3) contrast(1.1) brightness(0.9); }

.coming-soon-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: #B8923E; background: rgba(212,168,83,0.12);
  padding: 4px 10px; border-radius: 99px; border: 1px solid rgba(212,168,83,0.3);
}