:root {
  --midnight-navy: #101B35;
  --xqivo-teal: #20C7B5;
  --electric-lavender: #B7A3FF;
  --platinum-white: #F4F6FA;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--midnight-navy); color: var(--platinum-white); font-family: Inter, "Segoe UI", Arial, sans-serif; }
.hero { position: relative; min-height: 100vh; overflow: hidden; background: var(--midnight-navy); }
.hero-art { display: block; width: 100%; height: 100vh; min-height: 560px; object-fit: cover; object-position: center; }
.hero-note { position: absolute; left: clamp(24px, 5vw, 88px); bottom: clamp(24px, 5vw, 72px); max-width: 510px; padding: 22px 24px; border: 1px solid rgba(32,199,181,.4); border-radius: 14px; background: rgba(16,27,53,.88); box-shadow: 0 18px 60px rgba(0,0,0,.28); }
.eyebrow { color: var(--xqivo-teal); letter-spacing: .16em; font-size: .72rem; font-weight: 700; }
h1 { margin: 12px 0; font-size: clamp(1.5rem, 3vw, 2.4rem); line-height: 1.08; }
p { margin: 0; line-height: 1.6; color: var(--platinum-white); }
@media (max-width: 700px) { .hero-art { height: 100svh; min-height: 600px; object-position: 45% center; } .hero-note { right: 16px; left: 16px; bottom: 16px; padding: 18px; } }