/* Ortanox — minimalist holding splash */
:root {
  --bg0: #0f1115;
  --bg1: #1a1f27;
  --fg:  #f0b158;
  --muted: #aab3bf;
  --accent: #6ecbff;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
}

body {
  margin: 0;
  background: radial-gradient(120% 140% at 50% 30%, #262c35 0%, var(--bg0) 55%, #0a0c10 100%);
  color: var(--fg);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  display: flex;
  align-items: center;
  justify-content: center;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.wrap {
  width: min(96vw, 1200px);
  padding: clamp(12px, 3vw, 32px);
  text-align: center;
}

.logo-box {
  display: grid;
  place-items: center;
  margin: clamp(12px, 3vw, 24px) auto;
}

.logo {
  width: min(80vw, 900px);
  height: min(70vh, 600px);
  object-fit: contain;
  image-rendering: auto;
}

.title {
  font-size: clamp(28px, 4.5vw, 56px);
  letter-spacing: 0.06em;
  margin: 10px 0 0 0;
  font-weight: 700;
}

.subtitle {
  font-size: clamp(12px, 1.8vw, 18px);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 6px;
}

.msg {
  margin: clamp(14px, 3.5vw, 36px) auto 0;
  font-size: clamp(16px, 2.2vw, 22px);
  line-height: 1.5;
  max-width: 70ch;
  color: #d6dbe3;
}

.footer {
  margin-top: clamp(18px, 4vw, 42px);
  font-size: 12px;
  color: #9aa5b1;
  opacity: .9;
}

@media (orientation: landscape) {
  .logo { height: min(70vh, 680px); }
}

@media (prefers-reduced-motion: no-preference) {
  .logo { filter: drop-shadow(0 10px 30px rgba(0,0,0,.5)); }
}

/* Safe area on iOS */
.wrap { padding-bottom: max(24px, env(safe-area-inset-bottom)); }
.cta {
  margin-top: clamp(12px, 3vw, 28px);
}
.btn {
  display: inline-block;
  padding: 0.9em 1.4em;
  font-size: clamp(14px, 2.2vw, 18px);
  font-weight: 600;
  text-decoration: none;
  color: #0b0f14;
  background: #e8ea6e;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
  transition: transform .15s ease, box-shadow .15s ease, background .2s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(0,0,0,.3); }
.btn:active { transform: translateY(0); box-shadow: 0 4px 12px rgba(0,0,0,.25); }
@media (prefers-color-scheme: dark) {
  .btn { background: #cfd6df; }
}