:root {
  color-scheme: dark;
  --bg: #090b12;
  --panel: rgba(20, 24, 37, .76);
  --line: rgba(255, 255, 255, .1);
  --text: #f4f6fb;
  --muted: #9da6bc;
  --accent: #88f0c1;
  --accent-2: #9da0ff;
}
* { box-sizing: border-box; }
html { min-height: 100%; }
body {
  min-height: 100vh; margin: 0; overflow-x: hidden;
  background: radial-gradient(circle at 50% -10%, #20264a 0, var(--bg) 48%);
  color: var(--text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.ambient { position: fixed; width: 24rem; height: 24rem; border-radius: 50%; filter: blur(80px); opacity: .16; pointer-events: none; }
.ambient-one { top: 10%; left: -12rem; background: var(--accent-2); }
.ambient-two { right: -12rem; bottom: 4%; background: var(--accent); }
.shell { width: min(100% - 2rem, 980px); margin: 0 auto; padding: 7rem 0 2rem; position: relative; }
.hero { padding: 2rem 0 4rem; }
.eyebrow { color: var(--accent); font-size: .75rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.pulse, .dot { display: inline-block; width: .55rem; height: .55rem; margin-right: .45rem; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 .25rem rgba(136, 240, 193, .12); vertical-align: 1px; }
.pulse { animation: breathe 2s ease-in-out infinite; }
h1 { max-width: 780px; margin: 1.2rem 0 .4rem; font-size: clamp(3.2rem, 10vw, 7.8rem); line-height: .9; letter-spacing: -.08em; }
.subtitle { margin: 0; color: #d8dcf0; font-size: clamp(1.2rem, 3vw, 1.8rem); }
.intro { max-width: 520px; margin: 1.5rem 0 2rem; color: var(--muted); font-size: 1.05rem; line-height: 1.7; }
.status-row { display: flex; flex-wrap: wrap; gap: .75rem; }
.status { padding: .7rem 1rem; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.045); color: #e8ebf5; font-size: .92rem; }
.clock-card { width: min(100%, 300px); margin-top: 2.5rem; padding: 1.1rem 1.25rem; border: 1px solid var(--line); border-radius: 1rem; background: var(--panel); box-shadow: 0 1rem 3rem rgba(0,0,0,.18); }
.clock-label { display: block; margin-bottom: .45rem; color: var(--muted); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; }
#clock { font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.info-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.info-card { min-height: 190px; padding: 1.5rem; border: 1px solid var(--line); border-radius: 1.25rem; background: var(--panel); }
.accent-card { background: linear-gradient(145deg, rgba(136,240,193,.14), rgba(157,160,255,.08)); }
.card-index { color: var(--accent); font-size: .75rem; font-weight: 700; letter-spacing: .12em; }
h2 { margin: 2rem 0 .7rem; font-size: 1.35rem; }
.info-card p { margin: 0; color: var(--muted); line-height: 1.65; }
footer { padding-top: 3rem; color: #6f7890; font-size: .82rem; }
footer span { padding: 0 .35rem; color: var(--accent); }
@keyframes breathe { 0%, 100% { opacity: .65; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.15); } }
@media (max-width: 650px) { .shell { padding-top: 4rem; } .hero { padding-bottom: 3rem; } .info-grid { grid-template-columns: 1fr; } h1 { font-size: clamp(3rem, 17vw, 5.4rem); } }