:root{
  /* Brand-ish colors */
  --navy: #0e2b3b;
  --navy2:#0a2230;
  --white:#ffffff;
  --muted: rgba(255,255,255,.74);
  --muted2: rgba(255,255,255,.5);
  --orange:#f4a21a;

  --glass: rgba(255,255,255,.07);
  --stroke: rgba(255,255,255,.12);

  --shadow: 0 30px 90px rgba(0,0,0,.45);
  --radius: 24px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html,body{
  height:100vh;
  min-height:100vh;
  background-color: var(--navy2);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
  overflow:hidden;
}

body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
  color: var(--white);
  background:
    radial-gradient(900px 600px at 15% 10%, rgba(244,162,26,.20), transparent 65%),
    radial-gradient(900px 700px at 85% 20%, rgba(255,255,255,.08), transparent 60%),
    radial-gradient(900px 700px at 60% 90%, rgba(244,162,26,.10), transparent 55%),
    linear-gradient(180deg, var(--navy) 0%, var(--navy2) 100%);
  overscroll-behavior: none;
}

/* ===== ambient blobs ===== */
.blob{
  position: absolute;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  filter: blur(45px);
  opacity: .55;
  mix-blend-mode: screen;
  animation: blobFloat 10s ease-in-out infinite;
  pointer-events: none;
}

.blob--1{
  top:-140px; left:-160px;
  background: radial-gradient(circle at 30% 30%, rgba(244,162,26,.9), rgba(244,162,26,0) 60%);
}
.blob--2{
  bottom:-220px; right:-200px;
  background: radial-gradient(circle at 45% 45%, rgba(255,255,255,.22), rgba(255,255,255,0) 60%);
  animation-delay: -2.5s;
}
.blob--3{
  top: 35%; right:-260px;
  background: radial-gradient(circle at 40% 40%, rgba(244,162,26,.45), rgba(244,162,26,0) 65%);
  animation-delay: -5s;
}

@keyframes blobFloat{
  0%,100%{ transform: translate3d(0,0,0) scale(1); }
  50%{ transform: translate3d(30px, -22px, 0) scale(1.06); }
}

/* ===== particles ===== */
.particles{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.45;
}
.particles span{
  position:absolute;
  width: 2px; height: 2px;
  border-radius: 50%;
  background: rgba(255,255,255,.85);
  box-shadow: 0 0 14px rgba(255,255,255,.35);
  animation: drift 9s linear infinite;
}

/* Hand-placed positions (looks random, no JS) */
.particles span:nth-child(1) { left:10%; top:20%; animation-duration: 10s; }
.particles span:nth-child(2) { left:22%; top:70%; animation-duration: 12s; opacity:.6; }
.particles span:nth-child(3) { left:35%; top:30%; animation-duration: 9s; opacity:.8; }
.particles span:nth-child(4) { left:48%; top:78%; animation-duration: 13s; opacity:.5; }
.particles span:nth-child(5) { left:62%; top:22%; animation-duration: 11s; opacity:.7; }
.particles span:nth-child(6) { left:74%; top:64%; animation-duration: 14s; opacity:.6; }
.particles span:nth-child(7) { left:86%; top:40%; animation-duration: 10s; opacity:.8; }
.particles span:nth-child(8) { left:15%; top:45%; animation-duration: 15s; opacity:.5; }
.particles span:nth-child(9) { left:28%; top:10%; animation-duration: 12s; opacity:.7; }
.particles span:nth-child(10){ left:55%; top:12%; animation-duration: 13s; opacity:.6; }
.particles span:nth-child(11){ left:67%; top:85%; animation-duration: 11s; opacity:.7; }
.particles span:nth-child(12){ left:80%; top:15%; animation-duration: 14s; opacity:.5; }
.particles span:nth-child(13){ left:92%; top:72%; animation-duration: 16s; opacity:.5; }
.particles span:nth-child(14){ left:40%; top:55%; animation-duration: 12s; opacity:.65; }
.particles span:nth-child(15){ left:6%;  top:82%; animation-duration: 17s; opacity:.45; }

@keyframes drift{
  0%   { transform: translateY(0) scale(1); opacity: .15; }
  10%  { opacity: .8; }
  100% { transform: translateY(-140px) scale(1.8); opacity: 0; }
}

/* ===== layout ===== */
.wrap{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding: clamp(12px, 4vw, 24px);
  max-width: 100vw;
  overflow:hidden;
}

/* ===== glass card ===== */
.card{
  width: min(720px, 92vw);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,.05) 100%);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: clamp(18px, 4vw, 30px) clamp(16px, 4vw, 30px) clamp(16px, 3vw, 24px);
  position: relative;
  overflow:hidden;
  animation: cardIn .9s ease both;
  max-height: 92vh;
}

@keyframes cardIn{
  from{ transform: translateY(12px); opacity:0; }
  to{ transform: translateY(0); opacity:1; }
}

/* subtle inner highlight */
.card::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(600px 220px at 25% 0%, rgba(244,162,26,.18), transparent 70%),
    radial-gradient(500px 240px at 90% 10%, rgba(255,255,255,.10), transparent 60%);
  pointer-events:none;
}

/* ===== top row ===== */
.topline{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 18px;
  margin-bottom: 18px;
  position: relative;
  z-index: 1;
}

.status-pill{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.12);
  color: var(--muted);
  letter-spacing: .02em;
  font-size: .95rem;
}

.status-pill .dot{
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 6px rgba(244,162,26,.18);
  animation: pulse 1.6s ease-in-out infinite;
}

@keyframes pulse{
  0%,100%{ transform: scale(1); box-shadow: 0 0 0 6px rgba(244,162,26,.16); }
  50%{ transform: scale(1.1); box-shadow: 0 0 0 10px rgba(244,162,26,.08); }
}

.logo-circle{
  width: 108px;
  height: auto;
  border-radius: 50%;
  filter:
    drop-shadow(0 0 16px rgba(244,162,26,.18))
    drop-shadow(0 10px 22px rgba(0,0,0,.28));
  background: none;
  border: none;
  padding: 0;
  transform-origin: 50% 50%;
  animation: logoFloat 10s ease-in-out infinite;
}

@keyframes logoFloat{
  0%,100%{ transform: rotate(0deg); }
  50%{ transform: rotate(20deg); }
}

/* ===== headings ===== */
.logo-wordmark{
  display:block;
  width: min(280px, 78vw);
  height:auto;
  margin: 8px auto 0;
  filter: drop-shadow(0 10px 28px rgba(0,0,0,.32));
}

.accent{ color: var(--orange); }

.text{
  position: relative;
  z-index: 1;
  margin-top: 14px;
  color: var(--muted);
  line-height: 1.7;
  font-size: 1rem;
}

.text .muted{ color: var(--muted2); }

/* ===== shimmer line ===== */
.shimmer{
  height: 1px;
  width: 100%;
  margin: 26px 0 18px;
  background: linear-gradient(90deg,
    transparent,
    rgba(244,162,26,.55),
    rgba(255,255,255,.25),
    rgba(244,162,26,.55),
    transparent);
  opacity: .75;
  position: relative;
  overflow:hidden;
  z-index: 1;
}
.shimmer::after{
  content:"";
  position:absolute;
  inset:0;
  transform: translateX(-60%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  animation: sweep 2.8s ease-in-out infinite;
  opacity: .6;
}
@keyframes sweep{
  0%{ transform: translateX(-70%); }
  100%{ transform: translateX(70%); }
}

/* ===== footer ===== */
.footer{
  position: relative;
  z-index: 1;
  margin-top: 18px;
  padding-top: 10px;
  color: rgba(255,255,255,.48);
  font-size: .9rem;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
}

.mini-dot{
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(244,162,26,.9);
  box-shadow: 0 0 0 5px rgba(244,162,26,.12);
}

/* ===== responsive ===== */
@media (max-width: 768px){
  .card{
    width: 88vw;
    padding: 20px 18px 18px;
    border-radius: 20px;
    max-height: 92vh;
  }
  .logo-circle{ width: 102px; }
  .logo-wordmark{ width: 80vw; }
  .text{ font-size: .98rem; line-height: 1.6; text-align:center; }
  .status-pill{ justify-content: center; }
  .wrap{ padding: 16px; }
}

@media (max-width: 540px){
  .topline{ flex-direction: column-reverse; }
  .logo-circle{ width: 96px; }
  .card{
    width: 92vw;
    border-radius: 18px;
    padding: 18px 16px 16px;
    max-height: 90vh;
  }
  .status-pill{ width: 100%; justify-content: center; font-size: .9rem; }
  .logo-wordmark{ width: 82vw; }
  .text{ text-align:center; font-size: .96rem; line-height: 1.5; }
  .shimmer{ margin: 22px 0 16px; }
  .footer{ flex-wrap:wrap; gap: 6px; font-size:.85rem; }
  html,body{ height:100vh; overflow:hidden; }
  .blob{ width: 360px; height: 360px; filter: blur(38px); }
  .blob--1{ top:-120px; left:-140px; }
  .blob--2{ bottom:-180px; right:-160px; }
  .blob--3{ top: 38%; right:-200px; }
}

@media (max-width: 400px){
  .logo-circle{ width: 88px; }
  .status-pill{ font-size: .85rem; padding: 9px 12px; }
  .text{ font-size: .92rem; }
  .card{
    width: 90vw;
    padding: 16px 14px 14px;
    max-height: 88vh;
  }
  .logo-wordmark{ width: 80vw; }
}

/* Accessibility: reduce motion */
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
  body{ background: linear-gradient(180deg, var(--navy) 0%, var(--navy2) 100%); }
}