:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #f5f9ff; background: #0b1f3a; }
* { box-sizing: border-box; }
body { margin: 0; background: radial-gradient(ellipse at 95% 45%, #103d59 0%, transparent 55%), #0b1f3a; }
.page { min-height: 100svh; max-width: 1440px; margin: auto; padding: 40px 6vw 24px; display: flex; flex-direction: column; }
.brand { display: flex; align-items: center; gap: 14px; font-size: 15px; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
.brand img { border-radius: 12px; }
.hero { flex: 1; display: grid; grid-template-columns: 1.15fr 1fr; gap: 40px; align-items: center; padding: 64px 0; }
.eyebrow { font-size: 12px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; color: #bcd5e8; display: flex; align-items: center; gap: 10px; }
.eyebrow span { width: 8px; height: 8px; background: #00b4ff; border-radius: 50%; flex: 0 0 auto; }
h1 { font-size: clamp(42px, 5.6vw, 80px); line-height: 1.08; letter-spacing: -.045em; margin: 24px 0; font-weight: 800; }
h1 span { color: #00b4ff; }
.intro { max-width: 440px; font-size: 18px; line-height: 1.7; color: #bcd0e1; margin: 0 0 32px; }
.contact { display: inline-flex; align-items: center; gap: 28px; background: #00b4ff; color: #0b1f3a; padding: 16px 24px; border-radius: 10px; text-decoration: none; font-size: 15px; font-weight: 750; transition: background .15s; }
.contact:hover { background: #70d9ff; }
.contact:focus-visible { outline: 3px solid #fff; outline-offset: 5px; }
.contact span { font-size: 22px; line-height: 1; }
.email { color: #bcd0e1; font-size: 13px; overflow-wrap: anywhere; margin-top: 18px; }
.art { position: relative; width: 100%; aspect-ratio: 1; max-width: 520px; justify-self: center; display: grid; place-items: center; }
.wheel { width: 92%; color: #00b4ff; transform: rotate(-12deg); }
.orbit { position: absolute; border: 1px solid #29617c; border-radius: 50%; }
.orbit-one { inset: 0; }
.orbit-two { inset: 12%; }
.art-label { position: absolute; bottom: 9%; right: 0; background: #f5f9ff; color: #0b1f3a; padding: 14px 20px; border-radius: 8px; font-size: 13px; font-weight: 750; transform: rotate(-6deg); box-shadow: 0 12px 32px #04132260; }
footer { border-top: 1px solid #294057; padding-top: 20px; color: #a2b9cc; font-size: 12px; display: flex; justify-content: space-between; gap: 16px; }
@media (max-width: 700px) { .page { padding: 24px 24px 20px; } .brand { font-size: 12px; gap: 12px; } .brand img { width: 40px; height: 40px; } .hero { grid-template-columns: 1fr; padding: 48px 0 36px; gap: 24px; } .intro { font-size: 16px; } .art { width: min(100%, 300px); } .eyebrow { font-size: 10px; letter-spacing: .06em; } footer { font-size: 10px; } }
@media (prefers-reduced-motion: reduce) { .contact { transition: none; } }