/* ============================================================================
   SmartTap NFC — Brand Design System (css/styles.css)
   Palette: Deep Obsidian Black (#07090E), Pure Crisp White (#FFFFFF),
            Electric Blue Accents (#0066FF / #00D4FF)
   ============================================================================ */

:root {
  --st-black: #07090e;
  --st-surface: #0f131d;
  --st-surface-elevated: #161c2a;
  --st-border: rgba(255, 255, 255, 0.09);
  --st-blue: #0066ff;
  --st-blue-bright: #00d4ff;
  --st-blue-glow: rgba(0, 102, 255, 0.35);
  --st-white: #ffffff;
  --st-muted: #94a3b8;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  margin: 0;
  padding: 0;
  background-color: var(--st-black);
  color: var(--st-white);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  overflow-x: hidden;
}

.font-mono-code {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

/* Subtle Electric Blue Ambient Grid Background */
.st-bg-grid {
  background-color: #07090e;
  background-image:
    radial-gradient(circle at 50% 0%, rgba(0, 102, 255, 0.16), transparent 55%),
    linear-gradient(to right, rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 100% 100%, 32px 32px, 32px 32px;
}

/* Glassmorphic Dark Panels */
.st-glass {
  background: rgba(15, 19, 29, 0.82);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.09);
}

.st-glass-card {
  background: linear-gradient(180deg, rgba(22, 28, 42, 0.9) 0%, rgba(12, 16, 24, 0.95) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 102, 255, 0.08);
}

/* Electric Blue Glow Accent */
.st-electric-btn {
  background: linear-gradient(135deg, #0066ff 0%, #0052cc 100%);
  box-shadow: 0 4px 20px rgba(0, 102, 255, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.st-electric-btn:hover {
  background: linear-gradient(135deg, #1a75ff 0%, #0066ff 100%);
  box-shadow: 0 6px 26px rgba(0, 102, 255, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transform: translateY(-1px);
}

.st-electric-btn:active {
  transform: translateY(0) scale(0.985);
}

/* Public NFC Landing Page Action Buttons */
.st-nfc-cta {
  position: relative;
  overflow: hidden;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.22s ease;
}

.st-nfc-cta:hover {
  transform: translateY(-2px);
}

.st-nfc-cta:active {
  transform: translateY(0) scale(0.98);
}

/* Physical SmartTap NFC Card 3D Visual */
.st-physical-card {
  aspect-ratio: 1.586 / 1;
  background:
    radial-gradient(circle at 85% 20%, rgba(0, 212, 255, 0.18), transparent 45%),
    radial-gradient(circle at 15% 85%, rgba(0, 102, 255, 0.22), transparent 50%),
    linear-gradient(135deg, #141821 0%, #07090d 55%, #0d111a 100%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow:
    0 24px 48px rgba(0, 0, 0, 0.65),
    0 0 30px rgba(0, 102, 255, 0.15),
    inset 0 1px 1px rgba(255, 255, 255, 0.18);
  position: relative;
  overflow: hidden;
}

.st-physical-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 12px 12px;
  pointer-events: none;
}

/* Pulse animation for NFC signal */
@keyframes stPulseRing {
  0% {
    transform: scale(0.92);
    opacity: 0.75;
  }
  70% {
    transform: scale(1.25);
    opacity: 0;
  }
  100% {
    transform: scale(1.25);
    opacity: 0;
  }
}

.st-pulse-ring {
  animation: stPulseRing 2.4s infinite cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #07090e;
}
::-webkit-scrollbar-thumb {
  background: #1e293b;
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: #334155;
}