/* ============================================================
   derm4hair.dudoxx.com — Dudoxx HMS · Dermatology & Hair
   Color: Terracotta/Warm accent on dark Navy
   ============================================================ */

:root {
  --navy-900: hsl(220, 36%, 10%);
  --navy-800: hsl(220, 36%, 14%);
  --navy-700: hsl(220, 36%, 18%);
  --navy-600: hsl(220, 36%, 24%);
  --ivory-50:  hsl(48, 33%, 99%);
  --ivory-100: hsl(48, 33%, 97%);
  --ivory-300: hsl(48, 20%, 91%);
  --ivory-500: hsl(48, 12%, 78%);
  --slate-100: hsl(48, 4%, 45%);
  --slate-200: hsl(48, 4%, 35%);
  /* Service accent: Terracotta/Warm */
  --accent:        hsl(15, 70%, 55%);
  --accent-dim:    hsl(15, 70%, 44%);
  --accent-glow:   hsl(15, 70%, 55%, 0.16);
  --accent-soft:   hsl(15, 40%, 16%);
  /* Status */
  --sage:   hsl(145, 30%, 45%);
  --coral:  hsl(0,   70%, 55%);
  --amber:  hsl(40,  80%, 55%);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  background: var(--navy-900);
  color: var(--ivory-100);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow-x: hidden;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(var(--accent-glow) 1px, transparent 1px),
    linear-gradient(90deg, var(--accent-glow) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
  z-index: 0;
}

body::after {
  content: '';
  position: fixed;
  top: -20%;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 600px;
  background: radial-gradient(ellipse, var(--accent-glow) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.card {
  position: relative;
  z-index: 1;
  background: linear-gradient(135deg,
    hsl(220, 36%, 14%, 0.85) 0%,
    hsl(220, 36%, 10%, 0.92) 100%);
  border: 1px solid hsl(15, 70%, 55%, 0.25);
  border-radius: 1.25rem;
  padding: 3rem 2.5rem 2.5rem;
  max-width: 560px;
  width: 90%;
  text-align: center;
  backdrop-filter: blur(24px);
  box-shadow:
    0 0 0 1px hsl(15, 70%, 55%, 0.08),
    0 20px 60px hsl(220, 36%, 6%, 0.6),
    0 0 80px var(--accent-glow);
}

.logo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 1.75rem;
}

.logo-img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  filter: drop-shadow(0 0 12px var(--accent));
  animation: float 4s ease-in-out infinite;
}

.logo-text {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, var(--accent) 0%, var(--ivory-100) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.service-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--accent-soft);
  border: 1px solid hsl(15, 70%, 55%, 0.3);
  color: var(--accent);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.3rem 0.75rem;
  border-radius: 9999px;
  margin-bottom: 1.5rem;
}

.service-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  animation: pulse 2s ease-in-out infinite;
}

h1 {
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.2;
  margin-bottom: 1rem;
  color: var(--ivory-50);
}

h1 span {
  background: linear-gradient(135deg, var(--accent) 0%, hsl(15, 70%, 78%) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.desc {
  color: var(--ivory-500);
  font-size: 0.95rem;
  line-height: 1.65;
  margin-bottom: 2rem;
}

.status-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 2rem;
  text-align: left;
}

.status-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.82rem;
  color: var(--slate-100);
}

.dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.dot-active  { background: var(--sage);  box-shadow: 0 0 6px var(--sage);  animation: pulse 2s infinite; }
.dot-pending { background: var(--amber); box-shadow: 0 0 6px var(--amber); }
.dot-planned { background: var(--slate-200); }

.divider { border: none; border-top: 1px solid hsl(220, 36%, 24%); margin: 1.5rem 0; }

.footer-note { font-size: 0.75rem; color: var(--slate-100); opacity: 0.6; }
.footer-note a { color: var(--accent); text-decoration: none; opacity: 0.9; }
.footer-note a:hover { text-decoration: underline; }

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

@keyframes pulse {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%       { opacity: 0.6; transform: scale(1.3); }
}

.error-code {
  font-size: 5rem;
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1;
  background: linear-gradient(135deg, var(--accent) 0%, hsl(15, 70%, 78%) 60%, var(--ivory-300) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 0.25rem;
  animation: gradient-shift 5s ease-in-out infinite;
  background-size: 200% 200%;
}

@keyframes gradient-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@media (max-width: 480px) {
  .card { padding: 2rem 1.5rem; }
  h1    { font-size: 1.4rem; }
}