:root { --navy:#0f2d3d; --blue:#0ea5e9; --teal:#00a9bd; --soft:#e6f8fb; --muted:#587587; }
* { box-sizing:border-box; }
html { min-height:100%; background:#f5fbff; }
body { min-height:100vh; margin:0; color:var(--navy); font-family:Inter,Avenir,"Segoe UI",system-ui,sans-serif; background:radial-gradient(circle at 5% 12%,#dff8fc 0,transparent 28%),radial-gradient(circle at 92% 88%,#e0f3ff 0,transparent 26%),#f8fcff; }
.shell { width:min(1240px,calc(100% - 48px)); min-height:100vh; margin:auto; display:flex; flex-direction:column; }
nav { height:104px; display:flex; align-items:center; justify-content:space-between; }
.brand { display:flex; align-items:center; gap:12px; color:inherit; text-decoration:none; }
.route-mark { display:grid; place-items:center; width:52px; height:52px; border:1px solid #ccebf2; border-radius:14px; color:#fff; background:linear-gradient(145deg,var(--blue),var(--teal)); box-shadow:0 6px 18px #0c8ea326; font-size:27px; font-weight:700; font-style:italic; }
.brand strong { display:block; font-size:27px; line-height:1; letter-spacing:-1px; }
.brand small { display:block; margin-top:5px; color:#517189; font-size:10px; font-weight:600; letter-spacing:1.2px; }
.status { display:flex; align-items:center; gap:8px; padding:9px 13px; border:1px solid #cae9f1; border-radius:999px; background:#ffffffb8; color:#41697c; font-size:12px; font-weight:600; }
.status i { width:8px; height:8px; border-radius:50%; background:#00bca4; box-shadow:0 0 0 4px #00bca41b; }
.hero { flex:1; display:grid; grid-template-columns:minmax(360px,.92fr) minmax(480px,1.25fr); gap:54px; align-items:center; padding:48px 0 78px; }
.eyebrow { margin:0 0 20px; color:#008fa7; font-size:12px; font-weight:700; letter-spacing:2px; }
h1 { max-width:650px; margin:0; font-size:clamp(50px,6.2vw,82px); line-height:.99; letter-spacing:-4px; }
h1 span { color:var(--teal); }
.intro { max-width:570px; margin:28px 0 0; color:var(--muted); font-size:18px; line-height:1.65; }
.route { display:flex; align-items:center; gap:12px; width:max-content; max-width:100%; margin-top:32px; padding:13px 16px; border:1px solid #d2eaf1; border-radius:12px; background:#fff; box-shadow:0 8px 28px #155c7110; }
.route span { display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; white-space:nowrap; }
.route i { width:9px; height:9px; border:3px solid var(--teal); border-radius:50%; }
.route b { width:56px; height:2px; background:linear-gradient(90deg,var(--teal),var(--blue)); position:relative; }
.route b::after { content:""; position:absolute; right:-1px; top:-3px; width:7px; height:7px; border-top:2px solid var(--blue); border-right:2px solid var(--blue); transform:rotate(45deg); }
.note { max-width:530px; margin:22px 0 0; color:#78909e; font-size:13px; line-height:1.6; }
.visual { position:relative; min-width:0; height:460px; overflow:hidden; border-radius:34px; background:linear-gradient(#cdecff 0 58%,#b7e3d8 58% 66%,#dce8ec 66%); box-shadow:0 28px 70px #164e6a22; }
.visual::before { content:""; position:absolute; inset:-22px; z-index:-1; border-radius:42% 58% 44% 56%; background:linear-gradient(145deg,#d6f6fb,#e9f6ff); transform:rotate(-3deg); }
.sun { position:absolute; right:10%; top:10%; width:80px; height:80px; border-radius:50%; background:#fff9d4; box-shadow:0 0 55px #fff6b7; }
.skyline { position:absolute; left:5%; right:5%; bottom:34%; height:42%; display:flex; align-items:flex-end; justify-content:center; gap:7px; opacity:.72; }
.skyline i { width:8%; height:42%; background:#5a9bb8; border-radius:3px 3px 0 0; box-shadow:inset 0 8px #9bd2e5; }.skyline i:nth-child(2){height:64%}.skyline i:nth-child(3){height:88%;width:10%}.skyline i:nth-child(4){height:72%}.skyline i:nth-child(5){height:96%;width:10%}.skyline i:nth-child(6){height:58%}.skyline i:nth-child(7){height:38%}
.road { position:absolute; left:-10%; right:-10%; bottom:-12%; height:48%; border-radius:50% 50% 0 0; background:#536978; transform:perspective(220px) rotateX(22deg); box-shadow:inset 0 9px #81939d; }.road i { position:absolute; left:50%; top:10%; width:8px; height:80%; background:repeating-linear-gradient(#fff 0 24px,transparent 24px 46px); transform:translateX(-50%); }
.car { position:absolute; right:16%; bottom:18%; width:116px; height:46px; border-radius:30px 40px 13px 13px; background:#fff; box-shadow:0 10px 16px #172d3b40; }.car::before { content:""; position:absolute; left:28px; top:-22px; width:60px; height:30px; border-radius:24px 30px 0 0; background:#d8f2f8; border:7px solid #fff; }.car::after,.car span::after { content:""; position:absolute; bottom:-9px; width:22px; height:22px; border:6px solid #233946; border-radius:50%; background:#9bb1bb; }.car::after{left:16px}.car span::after{right:13px}
.float-card { position:absolute; left:-34px; bottom:34px; display:flex; align-items:center; gap:13px; min-width:190px; padding:14px; border:1px solid #fff; border-radius:16px; background:#fffffff2; box-shadow:0 18px 40px #173e5625; backdrop-filter:blur(10px); }
.float-card .icon { display:grid; place-items:center; width:44px; height:44px; border-radius:13px; color:#fff; background:linear-gradient(145deg,var(--blue),var(--teal)); font-size:20px; font-weight:700; font-style:italic; }
.float-card p { margin:0; }.float-card small { display:block; color:#78909e; font-size:9px; font-weight:700; letter-spacing:1px; }.float-card strong { display:block; margin-top:4px; font-size:15px; }
footer { min-height:74px; display:flex; align-items:center; justify-content:space-between; border-top:1px solid #dcecf2; color:#78909e; font-size:11px; }
@media (max-width:900px) { .shell{width:min(100% - 36px,680px)} nav{height:88px}.hero{grid-template-columns:1fr;gap:64px;padding:54px 0 72px}.copy{text-align:center}.intro,.note{margin-left:auto;margin-right:auto}.route{margin-left:auto;margin-right:auto}.visual{height:360px}.float-card{left:20px}h1{letter-spacing:-3px} }
@media (max-width:520px) { .shell{width:calc(100% - 28px)}.route-mark{width:44px;height:44px;font-size:23px}.brand strong{font-size:22px}.brand small{font-size:8px}.status{padding:8px 10px;font-size:10px}.hero{padding-top:38px;gap:48px}h1{font-size:47px;letter-spacing:-2.5px}.intro{font-size:16px}.route{gap:8px;padding:12px}.route span{font-size:11px}.route b{width:30px}.visual{height:300px;border-radius:24px}.visual::before{inset:-10px}.car{transform:scale(.82);transform-origin:right bottom}.float-card{left:12px;bottom:18px}footer{flex-direction:column;justify-content:center;gap:5px;padding:18px 0}footer p{margin:0} }