/* Minimal maintenance page styles */
:root {
  /* Dark navy base + warm orange (from image) */
  --bg: #0b1220;
  --bg-accent: #0f1b2d;
  --text: #e9edf6;
  --muted: #a6b0c0;
  --brand: #f59d52; /* warm orange */
  --btn-bg: #f59d52;
  --btn-text: #0b1220;
}

@media (prefers-color-scheme: light) {
  :root {
    /* Light mode with warm neutrals */
    --bg: #fff7f0;
    --bg-accent: #ffffff;
    --text: #0b1220;
    --muted: #5b6677;
    --brand: #f59d52;
    --btn-bg: #f59d52;
    --btn-text: #0b1220;
  }
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background: radial-gradient(1200px 800px at 75% 10%, rgba(245, 157, 82, 0.14), transparent 60%),
              linear-gradient(180deg, var(--bg) 0%, var(--bg-accent) 100%);
}

.page {
  min-height: 100%;
  display: grid;
  grid-template-rows: 1fr auto;
}

.card {
  align-self: center;
  justify-self: center;
  text-align: center;
  width: min(680px, 92vw);
  background: color-mix(in oklab, var(--bg-accent), transparent 10%);
  border: 1px solid color-mix(in oklab, var(--brand), transparent 80%);
  border-radius: 20px;
  padding: 40px 28px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
  backdrop-filter: blur(6px);
}

.hero {
  width: min(420px, 70vw);
  height: auto;
  display: block;
  margin: 0 auto 18px;
  filter: drop-shadow(0 12px 18px rgba(0,0,0,0.25));
  animation: float 6s ease-in-out infinite;
}

h1 {
  margin: 6px 0 8px;
  font-size: clamp(26px, 4vw, 34px);
  line-height: 1.2;
}

p { margin: 8px 0; }
.muted { color: var(--muted); }

.contacts { margin-top: 18px; }
.btn {
  display: inline-block;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-text);
  text-decoration: none;
  font-weight: 600;
  transition: transform .1s ease, filter .2s ease, box-shadow .2s ease;
}
.btn:hover { transform: translateY(-1px); filter: saturate(1.06); box-shadow: 0 8px 18px rgba(245, 157, 82, 0.28); }
.btn:active { transform: translateY(0); }

.footer {
  text-align: center;
  padding: 20px 16px 28px;
  color: var(--muted);
}

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