:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --text: #f7fbff;
  --muted: #c8d7e4;
  --line: rgba(255, 255, 255, 0.28);
  --accent: #7de3ff;
}
* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body { background: #111820; color: var(--text); }
.hero { position: relative; min-height: 100svh; overflow: hidden; isolation: isolate; display: grid; align-items: center; padding: clamp(28px, 5vw, 72px); }
.hero__image { position: absolute; inset: 0; z-index: -3; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero__shade { position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg, rgba(8, 17, 26, 0.86), rgba(8, 17, 26, 0.42) 46%, rgba(8, 17, 26, 0.08)), linear-gradient(180deg, rgba(8, 17, 26, 0.24), rgba(8, 17, 26, 0.72)); }
.hero__content { width: min(720px, 100%); padding-bottom: 96px; }
.eyebrow { margin: 0 0 18px; color: var(--accent); font-size: 0.8rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
h1 { margin: 0; font-size: clamp(4rem, 12vw, 10rem); line-height: 0.86; letter-spacing: 0; }
.lead { max-width: 560px; margin: 26px 0 0; color: var(--muted); font-size: clamp(1.08rem, 2.2vw, 1.45rem); line-height: 1.55; }
.status { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; margin-top: 34px; padding: 0 18px; border: 1px solid var(--line); background: rgba(7, 18, 28, 0.34); backdrop-filter: blur(14px); font-weight: 750; }
.status__dot { width: 10px; height: 10px; border-radius: 999px; background: #8df7a8; box-shadow: 0 0 22px rgba(141, 247, 168, 0.95); }
.footer { position: absolute; left: clamp(28px, 5vw, 72px); right: clamp(28px, 5vw, 72px); bottom: clamp(24px, 4vw, 44px); display: flex; flex-wrap: wrap; gap: 14px 28px; padding-top: 18px; border-top: 1px solid var(--line); color: rgba(247, 251, 255, 0.78); font-size: 0.92rem; font-weight: 700; }
@media (max-width: 720px) { .hero { align-items: end; } .hero__shade { background: linear-gradient(180deg, rgba(8, 17, 26, 0.08), rgba(8, 17, 26, 0.92) 55%), linear-gradient(90deg, rgba(8, 17, 26, 0.7), rgba(8, 17, 26, 0.2)); } .hero__image { object-position: 58% center; } .hero__content { padding-bottom: 112px; } h1 { font-size: clamp(3.4rem, 19vw, 5.4rem); } .lead { font-size: 1rem; } }