:root {
  --marine: #0e1c31;
  --marine-mid: #152540;
  --teal: #2aada0;
  --teal-dark: #1e8a7f;
  --foam: #7ed4c8;
  --abyss: #061018;
  --tide: #0a2436;
  --coral: #e05a3a;
  --mist: #f4f6f9;
  --mist2: #eef1f5;
  --mute: #a3afc0;
}

html { scroll-behavior: smooth; }

body {
  background: #000;
  color: #fff;
  -webkit-font-smoothing: antialiased;
}

.container-tp {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 72rem;
  padding-left: 1rem;
  padding-right: 1rem;
}
@media (min-width: 640px) {
  .container-tp { padding-left: 1.5rem; padding-right: 1.5rem; }
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: #fff;
  padding: 0.75rem 1.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #000;
  transition: background 0.2s;
  border: none;
  cursor: pointer;
}
.btn-primary:hover { background: rgba(255, 255, 255, 0.9); }
.btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.375rem;
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 0.75rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #fff;
  transition: background 0.2s;
}
.btn-ghost:hover { background: rgba(255, 255, 255, 0.1); }

.badge {
  display: inline-flex;
  border-radius: 9999px;
  background: rgba(42, 173, 160, 0.1);
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--teal);
}

.card-tp {
  border-radius: 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  padding: 1.5rem;
}

.input-tp {
  margin-top: 0.25rem;
  width: 100%;
  border-radius: 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: #fff;
  padding: 0.625rem 0.75rem;
  font-size: 0.875rem;
  color: var(--marine);
}
.input-tp::placeholder { color: var(--mute); }

.eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: rgba(255, 255, 255, 0.4);
}

.logo-live { animation: logo-breathe 3.2s ease-in-out infinite; }
.logo-live::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 9999px;
  border: 2px solid rgba(42, 173, 160, 0.45);
  animation: logo-ring 3.2s ease-out infinite;
  pointer-events: none;
}
@keyframes logo-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}
@keyframes logo-ring {
  0% { opacity: 0.7; transform: scale(0.92); }
  100% { opacity: 0; transform: scale(1.18); }
}

/* utility not covered by Tailwind CDN defaults */
.text-coral { color: var(--coral); }