/* The holding page on muntial.com until the full site goes live, in the "blue and copper" brand:
   a lit blue room, the chrome M, copper only on the one button. */
@font-face { font-family: Manrope; src: url("/fonts/manrope.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Manrope Fallback"; src: local("Arial"), local("ArialMT"), local("Helvetica");
  font-weight: 200 599; size-adjust: 99.77%; ascent-override: 106.85%; descent-override: 30.07%; line-gap-override: 0%; }
@font-face { font-family: "Manrope Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold");
  font-weight: 600 900; size-adjust: 100.57%; ascent-override: 106%; descent-override: 29.83%; line-gap-override: 0%; }

:root {
  --font: Manrope, "Manrope Fallback", system-ui, sans-serif;
  --night: #0A142F; --night-2: #050B1D; --blue: #245FD4; --blue-deep: #0B3382; --light: #91B7FE;
  --text: #F0F6FC; --text-soft: #DCE6FA; --text-muted: #B5BED2;
  --copper: #F67F2F; --copper-hi: #FFAA79; --copper-ink: #0A1022;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; margin: 0; }
html { color-scheme: dark; }
body {
  min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column;
  background: radial-gradient(70% 60% at 50% 34%, #1B4FB8 0%, var(--blue-deep) 34%, var(--night) 68%, var(--night-2) 100%);
  color: var(--text); font-family: var(--font); line-height: 1.5; overflow-x: hidden;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}

/* the light behind the logo, and one copper ribbon of light across the room */
.glow {
  position: fixed; inset: 0; pointer-events: none;
  background: radial-gradient(34% 26% at 50% 30%, rgb(145 183 254 / .32), transparent 70%);
}
.ribbon {
  position: fixed; left: -10%; right: -10%; top: 62%; height: 180px; pointer-events: none; transform: rotate(-9deg);
  background: radial-gradient(50% 50% at 50% 50%, rgb(246 127 47 / .30), transparent 70%);
  filter: blur(28px); opacity: .9;
}
.ribbon::after {
  content: ""; position: absolute; left: 8%; right: 8%; top: 50%; height: 2px;
  background: linear-gradient(90deg, transparent, rgb(255 216 190 / .9) 50%, transparent);
}

main {
  position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 56px 24px 32px; gap: 14px;
}
.mark {
  width: clamp(150px, 26vw, 250px); height: auto; margin-bottom: 10px;
  filter: drop-shadow(0 18px 34px rgb(5 11 29 / .65)) drop-shadow(0 0 40px rgb(53 112 226 / .35));
  animation: rise 1s var(--ease) both;
}
.kicker {
  font-weight: 700; font-size: 13px; letter-spacing: .32em; text-transform: uppercase; color: var(--light);
  padding-left: .32em; animation: rise 1s .08s var(--ease) both;
}
h1 {
  font-weight: 800; font-size: clamp(48px, 10vw, 104px); line-height: 1; letter-spacing: .08em; padding-left: .08em;
  background: linear-gradient(180deg, #FFFFFF 0%, #EEF3FB 38%, #A9B5CA 50%, #8592AA 53%, #E8EDF5 68%, #C9D2E0 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 6px 18px rgb(5 11 29 / .55)); animation: rise 1s .14s var(--ease) both;
}
.lead {
  max-width: 34em; font-size: clamp(16px, 2.2vw, 19px); color: var(--text-soft); margin-top: 8px;
  animation: rise 1s .2s var(--ease) both;
}
.lead strong { color: var(--text); font-weight: 800; }
.soon { font-size: 14px; font-weight: 600; color: var(--text-muted); animation: rise 1s .26s var(--ease) both; }
.links { margin-top: 14px; animation: rise 1s .32s var(--ease) both; }
.button {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 26px;
  border-radius: 12px; background: var(--copper); color: var(--copper-ink); font-weight: 800; font-size: 16px;
  text-decoration: none; box-shadow: 0 10px 28px rgb(246 127 47 / .32), inset 0 1px 0 rgb(255 255 255 / .35);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease);
}
.button:hover { background: var(--copper-hi); transform: translateY(-1px); box-shadow: 0 14px 34px rgb(246 127 47 / .42), inset 0 1px 0 rgb(255 255 255 / .4); }
.button:active { transform: translateY(0) scale(.98); }
.button:focus-visible { outline: 3px solid var(--text); outline-offset: 3px; }

footer {
  position: relative; text-align: center; font-size: 12px; color: var(--text-muted); padding: 18px 24px 24px;
}

@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }