:root{--bg: #0f1320; --bg2: #171b2e; --fg: #eaf0ff; --muted: #b6c0dd; --primary: #6aa3ff; --primary-2: #4e8dff; --accent: #8cffcd; --danger: #ff6a95; --shadow: 0 10px 30px rgba(0,0,0,.35)}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; color:var(--fg); background: radial-gradient(1200px 600px at 10% -10%, #182043 0%, #0f1320 40%), linear-gradient(160deg, var(--bg2), var(--bg)); font: 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; display:flex; flex-direction:column; min-height:100dvh}

.container{max-width:980px; margin:0 auto; padding:0 20px}
.skip-link{position:absolute; left:-9999px; top:-9999px}
.skip-link:focus{left:16px; top:16px; background:#000; color:#fff; padding:8px 12px; border-radius:8px}

.site-header{position:sticky; top:0; backdrop-filter: blur(6px); background: color-mix(in srgb, var(--bg2) 60%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--muted) 25%, transparent); z-index:10}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
.brand{display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:.3px}
.brand .logo{font-size:22px}
.brand .name{font-size:18px}
.header-actions{display:flex; gap:10px}

.btn{appearance:none; border:1px solid transparent; background:var(--primary); color:#0b1020; font-weight:600; padding:10px 14px; border-radius:10px; box-shadow: var(--shadow); text-decoration:none; transition:transform .12s ease, box-shadow .12s ease, background .2s ease}
.btn:hover{transform:translateY(-1px); box-shadow: 0 12px 36px rgba(0,0,0,.45); background:var(--primary-2)}
.btn:active{transform:translateY(0); box-shadow: var(--shadow)}
.btn-outline{background:transparent; color:var(--fg); border-color: color-mix(in srgb, var(--muted) 45%, transparent)}
.btn-outline:hover{background: color-mix(in srgb, var(--fg) 10%, transparent)}

.hero{padding:48px 0; flex:1 0 auto}
.hero-inner{display:grid; grid-template-columns: 1.2fr .8fr; gap:24px; align-items:center}
.hero-text h1{font-size: clamp(28px, 4vw, 42px); margin:0 0 8px}
.hero-text .lead{font-size: clamp(16px, 2.4vw, 18px); color:var(--muted); margin:0 0 16px}
.bullets{margin:0 0 24px; padding-left:18px}
.bullets li{margin:6px 0}

.status{display:grid; gap:12px; max-width:520px}
.spinner{width:54px; height:54px; border-radius:50%; background:
 conic-gradient(from 0deg, var(--primary) 0 25%, transparent 25% 50%, var(--accent) 50% 75%, transparent 75% 100%);
 mask: radial-gradient(circle, transparent 42%, #000 43%);
 animation: spin 1.2s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.progress{height:12px; border-radius:999px; background: color-mix(in srgb, var(--fg) 8%, transparent); border:1px solid color-mix(in srgb, var(--muted) 35%, transparent); overflow:hidden}
.bar{height:100%; width:40%; border-radius:999px; background-image: linear-gradient(90deg, color-mix(in srgb, var(--primary) 60%, transparent), color-mix(in srgb, var(--primary-2) 60%, transparent));
 background-size: 200% 100%; animation: slide 1.4s ease-in-out infinite}
@keyframes slide{0%{transform:translateX(-60%)}50%{transform:translateX(10%)}100%{transform:translateX(160%)}}

.eta{color:var(--muted); font-size:14px; margin:0}
.note{color:var(--muted)}

.hero-media{display:flex; align-items:center; justify-content:center}
.gear{position:relative; width:220px; height:220px; border-radius:50%; background: radial-gradient(100px 100px at 50% 50%, color-mix(in srgb, var(--fg) 5%, transparent) 0, transparent 60%);
 border: 6px dashed color-mix(in srgb, var(--primary) 60%, transparent); animation: rotate 8s linear infinite}
@keyframes rotate{to{transform:rotate(-360deg)}}
.gear .hub{position:absolute; left:50%; top:50%; width:26px; height:26px; border-radius:50%; transform: translate(-50%, -50%);
 background: color-mix(in srgb, var(--primary) 35%, var(--bg2)); box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--muted) 40%, transparent)}
.gear .tooth{position:absolute; width:26px; height:26px; border-radius:6px; background: color-mix(in srgb, var(--primary) 40%, var(--bg2)); box-shadow: var(--shadow)}
.gear .t1{left:calc(50% - 13px); top:-6px}
.gear .t2{right:-6px; top:calc(50% - 13px)}
.gear .t3{left:calc(50% - 13px); bottom:-6px}
.gear .t4{left:-6px; top:calc(50% - 13px)}

.site-footer{border-top:1px solid color-mix(in srgb, var(--muted) 25%, transparent); margin-top:auto}
.footer-inner{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 0}
.footer-inner p{margin:0; color:var(--muted)}
.social{display:flex; gap:12px; list-style:none; margin:0; padding:0}
.social a{color:var(--muted); display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:10px; border:1px solid color-mix(in srgb, var(--muted) 35%, transparent)}
.social a:hover{color:var(--fg); border-color: color-mix(in srgb, var(--fg) 20%, transparent); background: color-mix(in srgb, var(--fg) 6%, transparent)}
.social a:focus-visible{outline:2px solid color-mix(in srgb, var(--primary) 60%, transparent); outline-offset:3px}

/* Responsiveness */
@media (max-width: 900px){
  .hero-inner{grid-template-columns: 1fr; gap:28px}
  .header-inner{padding:12px 0}
}
@media (max-width: 560px){
  .header-inner{flex-direction:column; align-items:flex-start; gap:10px}
  .header-actions{width:100%}
  .header-actions .btn{flex:1; text-align:center}
  .footer-inner{flex-direction:column; align-items:center; text-align:center}
}

/* Dark mode tweak */
@media (prefers-color-scheme: light){
  :root{--bg:#f4f7ff; --bg2:#e9efff; --fg:#0b1020; --muted:#4b556b; --primary:#2b6fff; --primary-2:#1959ff; --accent:#19c786}
  body{background: radial-gradient(1200px 600px at 10% -10%, #e6edff 0%, #f4f7ff 40%), linear-gradient(160deg, var(--bg2), var(--bg))}
  .btn{color:#fff}
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce){
  .spinner, .gear, .bar{animation:none}
}