* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #070c18; color: #f4f6fb; font-family: "Avenir Next", Montserrat, "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; }
a { color: #f4f6fb; }
/* Scene */
.sky { position: relative; height: 100vh; height: 100svh; min-height: 340px; overflow: hidden; background: #03060f; }
.backdrop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; display: block; }
.veil { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(100deg, rgba(3,6,15,.5) 0%, rgba(3,6,15,.18) 34%, rgba(3,6,15,0) 58%), linear-gradient(180deg, rgba(3,6,15,.25) 0%, rgba(3,6,15,0) 30%, rgba(3,6,15,0) 78%, rgba(3,6,15,.55) 100%); }
/* Wordmark */
.mark { position: absolute; z-index: 2; left: clamp(20px, 6.5vw, 120px); top: clamp(28px, 11vh, 120px); max-width: min(34rem, 88vw); }
.wordmark { margin: 0; font-weight: 600; font-size: clamp(2rem, 4.6vw, 3.8rem); line-height: 1; letter-spacing: .2em; color: #fff; text-shadow: 0 2px 28px rgba(3,6,15,.75); animation: rise 1.8s .2s ease-out both; }
.wordmark span { font-weight: 300; font-size: .68em; letter-spacing: .22em; color: rgba(255,255,255,.6); }
.rule { width: clamp(44px, 5vw, 72px); height: 1px; margin: clamp(14px, 2.2vh, 22px) 0; background: linear-gradient(90deg, rgba(255,255,255,.85), rgba(255,255,255,0)); transform-origin: left; animation: draw 1.4s .9s ease-out both; }
.tagline { margin: 0; font-weight: 400; font-size: clamp(.98rem, 1.45vw, 1.3rem); line-height: 1.45; letter-spacing: .12em; text-transform: uppercase; color: #eef2fb; text-shadow: 0 1px 16px rgba(3,6,15,.95), 0 0 3px rgba(3,6,15,.6); animation: rise 1.8s 1.1s ease-out both; }
/* Footer */
.foot { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: 0 clamp(20px, 6.5vw, 120px) clamp(12px, 2.2vh, 20px); font-size: .82rem; line-height: 1.5; color: rgba(220,228,244,.72); text-shadow: 0 1px 10px rgba(3,6,15,.9); }
.foot a { color: rgba(232,238,250,.9); }
/* Entrance */
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes draw { from { opacity: 0; transform: scaleX(0); } to { opacity: 1; transform: scaleX(1); } }
/* Phone layout */
@media (max-width: 700px) {
.backdrop { object-position: 27% 45%; }
.mark { left: 0; right: 0; max-width: none; text-align: center; padding: 0 18px; top: clamp(28px, 8vh, 80px); }
.rule { margin-left: auto; margin-right: auto; background: rgba(255,255,255,.7); transform-origin: center; }
.wordmark { letter-spacing: .14em; }
.foot { text-align: center; }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) { .wordmark, .rule, .tagline { animation: none; } }
/* Text page */
.page { max-width: 44rem; margin: 0 auto; padding: 3rem 16px 4rem; font-size: 1.05rem; line-height: 1.7; color: #d7deec; }
.page h1 { font-weight: 400; font-size: 2.2rem; color: #f4f6fb; }
.page .small { opacity: .6; font-size: .85rem; }