:root { --navy:#14285c; --ink:#0b1125; --gold:#d7a64b; --font-body:'Manrope'; --font-display:'Space Grotesk'; }
* { box-sizing:border-box; }
html { background:var(--ink); }
body { margin:0; color:white; font-family:var(--font-body),sans-serif; }
main { min-height:100svh; overflow:hidden; position:relative; display:flex; flex-direction:column; background:radial-gradient(circle at 68% 45%,#21366f 0,#101b3a 34%,#090f22 68%); padding:0 clamp(24px,6vw,92px); }
main::before { content:''; position:absolute; inset:0; opacity:.24; pointer-events:none; background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px); background-size:44px 44px; mask-image:linear-gradient(to bottom,transparent,black 30%,transparent); }
.ambient { position:absolute; border-radius:999px; filter:blur(3px); pointer-events:none; }
.ambient-one { width:380px; height:380px; background:#2d4a99; opacity:.18; right:-110px; top:-120px; }
.ambient-two { width:280px; height:280px; background:var(--gold); opacity:.07; left:-140px; bottom:-120px; }
.site-header { height:110px; display:flex; align-items:center; justify-content:space-between; position:relative; z-index:2; border-bottom:1px solid rgba(255,255,255,.1); }
.wordmark { display:flex; gap:13px; align-items:center; }
.wordmark>span { font-family:var(--font-display); font-weight:700; font-size:25px; letter-spacing:-.05em; border-right:1px solid rgba(255,255,255,.22); padding-right:13px; }
.wordmark small { color:rgba(255,255,255,.62); font-size:10px; text-transform:uppercase; line-height:1.25; max-width:90px; letter-spacing:.08em; }
.status-pill { display:flex; align-items:center; gap:9px; color:rgba(255,255,255,.7); font-size:11px; letter-spacing:.13em; text-transform:uppercase; }
.status-pill i { width:7px; height:7px; display:block; border-radius:50%; background:var(--gold); box-shadow:0 0 0 5px rgba(215,166,75,.12); animation:pulse 2s infinite; }
.hero { flex:1; min-height:610px; display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:clamp(40px,7vw,120px); position:relative; z-index:1; padding:72px 0; }
.hero-copy { max-width:660px; }
.eyebrow { color:#d7b46d; font-size:12px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; margin:0 0 24px; }
h1 { font-family:var(--font-display); font-size:clamp(56px,6.6vw,104px); line-height:.91; letter-spacing:-.065em; margin:0; font-weight:600; }
h1 em { color:transparent; font-style:normal; -webkit-text-stroke:1px rgba(255,255,255,.72); }
.lead { color:rgba(255,255,255,.62); line-height:1.75; max-width:580px; font-size:clamp(15px,1.3vw,18px); margin:34px 0 44px; }
.progress { max-width:490px; }
.progress-label { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:12px; font-size:9px; letter-spacing:.15em; color:rgba(255,255,255,.4); }
.progress-label strong { color:rgba(255,255,255,.72); font-size:9px; }
.track { height:1px; background:rgba(255,255,255,.16); position:relative; }
.track>span { position:absolute; left:0; top:0; width:72%; height:1px; background:linear-gradient(90deg,var(--gold),#f4d697); }
.truck-marker { position:absolute; left:71%; top:50%; transform:translate(-50%,-50%); font-style:normal; display:grid; place-items:center; width:28px; height:28px; border-radius:50%; color:var(--ink); background:var(--gold); font-weight:800; box-shadow:0 0 0 7px rgba(215,166,75,.12); }
.brand-card { position:relative; min-height:470px; display:flex; flex-direction:column; justify-content:center; padding:clamp(24px,4vw,58px); border:1px solid rgba(255,255,255,.13); border-radius:4px 80px 4px 4px; background:linear-gradient(145deg,rgba(255,255,255,.085),rgba(255,255,255,.025)); box-shadow:0 40px 80px rgba(0,0,0,.24); backdrop-filter:blur(15px); }
.brand-card::before { content:'CVP'; position:absolute; right:18px; top:-52px; color:rgba(255,255,255,.035); font:700 180px/1 var(--font-display); letter-spacing:-.08em; }
.brand-glow { position:absolute; inset:20% 15%; background:#4765b8; filter:blur(80px); opacity:.22; }
.logo-crop { overflow:hidden; position:relative; aspect-ratio:1.42; width:100%; }
.logo-crop img { width:100%; display:block; transform:translateY(-23.3%) scale(1.01); transform-origin:center top; }
.brand-card p { position:relative; margin:18px 0 0; text-align:center; color:rgba(255,255,255,.5); font-size:12px; line-height:1.55; font-style:italic; }
footer { height:82px; display:flex; align-items:center; justify-content:space-between; border-top:1px solid rgba(255,255,255,.1); color:rgba(255,255,255,.35); position:relative; z-index:2; font-size:10px; letter-spacing:.12em; text-transform:uppercase; }
footer p { margin:0; }
@keyframes pulse { 50% { box-shadow:0 0 0 9px rgba(215,166,75,0); } }
@media (max-width:850px) { main{padding:0 24px}.site-header{height:88px}.status-pill{font-size:9px}.hero{grid-template-columns:1fr;gap:52px;padding:64px 0}h1{font-size:clamp(54px,16vw,82px)}.brand-card{min-height:380px;max-width:580px;width:100%;margin:0 auto;border-radius:4px 55px 4px 4px}footer p{display:none} }
@media (max-width:440px) { .wordmark small{display:none}.wordmark>span{border:0}.status-pill{letter-spacing:.08em}.brand-card{min-height:300px;padding:18px}.brand-card::before{font-size:110px;top:-30px} }
@media (prefers-reduced-motion:reduce) { .status-pill i{animation:none} }