/* Reset & base */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  color: var(--fg);
  background: linear-gradient(135deg,#0d0f1a,#101b33 35%,#0d3042 65%,#112227);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem,2vw,2rem);
  overflow: hidden;
}
:root {
  --fg: #f5f7fa;
  --fg-soft: #c8d0dc;
  --accent: #ffcd1a;
  --accent-glow: 255 205 26;
  --card-bg: rgba(255,255,255,0.04);
  --card-border: rgba(255,255,255,0.1);
  --radius: 22px;
  --shadow: 0 10px 25px -10px rgba(0,0,0,0.6), 0 2px 6px -2px rgba(0,0,0,0.4);
}
@media (prefers-color-scheme: light) {
  body { background: linear-gradient(135deg,#f3f6fa,#dde6f0 40%,#cfdbe4); }
  :root {
    --fg: #1d2735;
    --fg-soft: #5a6a7c;
    --card-bg: rgba(255,255,255,0.6);
    --card-border: rgba(255,255,255,0.8);
    --shadow: 0 10px 25px -10px rgba(0,0,0,0.25), 0 2px 6px -2px rgba(0,0,0,0.15);
  }
}
.wrapper { width: 100%; max-width: 860px; }
.card {
  position: relative;
  margin-inline: auto;
  padding: clamp(1.8rem,4vw,3.2rem);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-radius: var(--radius);
  text-align: center;
  box-shadow: var(--shadow);
  animation: floatIn .9s cubic-bezier(.4,.14,.25,1);
}
@keyframes floatIn { from { opacity:0; transform: translate3d(0,30px,0) scale(.98); } to { opacity:1; transform: translate3d(0,0,0) scale(1);} }
.logo { width: clamp(160px,40%,300px); height: auto; filter: drop-shadow(0 4px 8px rgba(0,0,0,.4)); margin-bottom: 1.5rem; }
.card h1 { font-size: clamp(1.9rem,4.2vw,3.4rem); line-height: 1.1; margin: 0 0 1rem; letter-spacing: .5px; }
.lead { font-size: clamp(1.1rem,1.6vw,1.35rem); margin: 0 0 1.75rem; color: var(--fg-soft); }
.small { margin-top: 2rem; font-size: .85rem; letter-spacing: .5px; color: var(--fg-soft); }
.progress { position: relative; height: 8px; width: min(360px,80%); margin: 0 auto; background: linear-gradient(90deg,rgba(var(--accent-glow)/.15),rgba(var(--accent-glow)/.05)); border-radius: 6px; overflow: hidden; border:1px solid rgba(var(--accent-glow)/.3); }
.progress .bar { position: absolute; inset:0; background: linear-gradient(90deg,rgba(var(--accent-glow)/0) 0%,rgba(var(--accent-glow)/.7) 50%,rgba(var(--accent-glow)/0) 100%); animation: move 2.6s linear infinite; }
@keyframes move { from { transform: translateX(-60%);} to { transform: translateX(60%);} }
.footer { margin-top: 2.5rem; text-align: center; font-size: .75rem; color: var(--fg-soft); }
/* Subtle animated orbs */
body::before, body::after {
  content:""; position: absolute; width: 40vmax; height: 40vmax; border-radius: 50%; filter: blur(90px); opacity:.18; animation: spin 40s linear infinite;
  background: radial-gradient(circle at 30% 30%,rgba(var(--accent-glow)/.7),rgba(var(--accent-glow)/0) 70%);
  mix-blend-mode: overlay; pointer-events:none; z-index:-1;
}
body::after { animation-direction: reverse; animation-duration: 55s; background: radial-gradient(circle at 70% 60%,rgba(0,140,255,.6),rgba(0,140,255,0) 70%); }
@keyframes spin { from { transform: rotate(0deg) translate3d(0,0,0);} to { transform: rotate(360deg) translate3d(0,0,0);} }
/* Accessibility focus */
.card:focus-within, .card:focus { outline: 2px solid var(--accent); outline-offset: 4px; }
@media (max-width:600px){ .card { padding: 2rem 1.35rem 2.4rem; } .lead { margin-bottom: 1.25rem; } }