:root { --orange:#ff6a00; --orange-soft:#ff8a2a; --silver:#c5c7c9; --ink:#070707; }
* { box-sizing:border-box; }
html { background:var(--ink); }
body { margin:0; background:var(--ink); color:#f5f5f2; font-family:"Arial Narrow","Roboto Condensed",Impact,Arial,sans-serif; }
.landing { min-height:100svh; position:relative; overflow:hidden; display:flex; flex-direction:column; background:radial-gradient(circle at 26% 38%,rgba(255,106,0,.10),transparent 31rem),repeating-linear-gradient(118deg,transparent 0 42px,rgba(255,255,255,.018) 43px 44px),linear-gradient(145deg,#050505 0%,#111 56%,#060606 100%); }
.road-lines { position:absolute; right:-13vw; bottom:-23vh; width:48vw; height:82vh; transform:rotate(18deg); border-left:2px solid rgba(255,106,0,.35); border-right:2px solid rgba(197,199,201,.16); box-shadow:inset 32px 0 0 rgba(255,106,0,.035),inset -22px 0 0 rgba(255,255,255,.02); }
.hero { width:min(1180px,calc(100% - 56px)); margin:auto; padding:56px 0 38px; display:grid; grid-template-columns:minmax(310px,.9fr) minmax(430px,1.1fr); gap:clamp(44px,7vw,104px); align-items:center; position:relative; z-index:1; }
.brand-mark { position:relative; display:grid; place-items:center; }
.brand-mark::before { content:""; position:absolute; width:88%; aspect-ratio:1; border:1px solid rgba(255,106,0,.22); border-radius:50%; box-shadow:0 0 80px rgba(255,106,0,.12); }
.logo { width:min(100%,480px); height:auto; position:relative; filter:drop-shadow(0 24px 34px rgba(0,0,0,.72)); }
.copy { max-width:650px; }
.eyebrow { margin:0 0 22px; color:var(--silver); font-size:13px; font-weight:800; letter-spacing:.22em; text-transform:uppercase; display:flex; align-items:center; gap:12px; }
.eyebrow span { width:38px; height:3px; background:var(--orange); transform:skew(-24deg); }
h1 { margin:0; max-width:720px; font-size:clamp(48px,6.1vw,88px); line-height:.94; letter-spacing:-.045em; text-transform:uppercase; font-weight:950; text-wrap:balance; }
h1 em { color:var(--orange); font-style:italic; }
.intro { margin:30px 0 28px; max-width:620px; color:#b9b9b6; font-family:Arial,sans-serif; font-size:clamp(16px,1.4vw,19px); line-height:1.65; }
.coming-soon { display:flex; gap:17px; align-items:flex-start; margin:0 0 28px; padding:18px 20px; border:1px solid rgba(255,106,0,.38); border-left:4px solid var(--orange); background:rgba(255,255,255,.035); }
.coming-soon strong { display:block; font-size:17px; letter-spacing:.02em; text-transform:uppercase; }
.coming-soon p { margin:5px 0 0; color:#999; font:14px/1.45 Arial,sans-serif; }
.signal { flex:0 0 auto; width:10px; height:10px; margin-top:5px; border-radius:50%; background:var(--orange); box-shadow:0 0 0 6px rgba(255,106,0,.12),0 0 18px rgba(255,106,0,.8); }
.contact { color:#f5f5f2; text-decoration:none; font-size:15px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; transition:color .2s ease; }
.contact span { color:var(--orange); margin-left:8px; }
.contact:hover,.contact:focus-visible { color:var(--orange-soft); }
.contact:focus-visible { outline:2px solid var(--orange); outline-offset:6px; }
footer { width:min(1180px,calc(100% - 56px)); margin:0 auto; padding:22px 0 28px; position:relative; z-index:1; display:flex; align-items:center; gap:14px; color:#686866; font-size:11px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; }
.footer-rule { width:32px; height:1px; background:#3e3e3e; }
@media (max-width:780px) { .hero { width:min(100% - 34px,620px); grid-template-columns:1fr; gap:22px; padding:28px 0 22px; text-align:center; } .brand-mark::before { width:64%; } .logo { width:min(72vw,310px); } .copy { margin:0 auto; } .eyebrow { justify-content:center; margin-bottom:16px; } h1 { font-size:clamp(41px,12vw,66px); } .intro { margin:22px auto; font-size:16px; line-height:1.55; } .coming-soon { text-align:left; } footer { width:calc(100% - 34px); justify-content:center; padding-bottom:20px; } .road-lines { right:-25vw; opacity:.6; } }
@media (max-width:430px) { .hero { padding-top:18px; } .logo { width:250px; } .eyebrow { font-size:11px; letter-spacing:.16em; } .coming-soon { padding:15px; } footer { font-size:9px; letter-spacing:.12em; } }
@media (prefers-reduced-motion:no-preference) { .logo { animation:settle .9s cubic-bezier(.22,.8,.24,1) both; } .copy { animation:settle .9s .12s cubic-bezier(.22,.8,.24,1) both; } @keyframes settle { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:translateY(0); } } }