:root {
  --ink: #11120e;
  --paper: #f6f5ef;
  --lime: #dfff3f;
  --blue: #86caff;
  --orange: #ff805d;
  --line: rgba(17, 18, 14, .16);
  --muted: #686a62;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: Inter, Arial, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; }

.site-header { display: flex; align-items: center; justify-content: space-between; min-height: 80px; padding: 16px max(28px, calc((100vw - 1320px) / 2)); border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.brand-mark { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--ink); color: var(--lime); font-size: 14px; font-weight: 900; letter-spacing: -.04em; }
.brand-name { font-size: 18px; font-weight: 800; letter-spacing: -.04em; }
.header-status { display: inline-flex; align-items: center; gap: 9px; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.header-status i { width: 9px; height: 9px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 5px rgba(255,128,93,.16); }

.hero { display: grid; grid-template-columns: minmax(0, .88fr) minmax(560px, 1.12fr); gap: 72px; width: min(1320px, calc(100% - 56px)); min-height: calc(100vh - 170px); margin: 0 auto; padding: clamp(72px, 9vh, 120px) 0 90px; }
.hero-copy { align-self: center; }
.eyebrow { margin: 0 0 24px; font-size: 12px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.eyebrow::before { content: ''; display: inline-block; width: 42px; height: 3px; margin: 0 12px 3px 0; background: var(--orange); }
h1 { max-width: 760px; margin: 0; font-size: clamp(64px, 7.6vw, 124px); line-height: .86; letter-spacing: -.075em; }
h1 em { color: #654bff; font-style: normal; }
.lead { max-width: 630px; margin: 38px 0 0; color: var(--muted); font-size: clamp(18px, 1.6vw, 23px); line-height: 1.55; }
.coming-soon { display: inline-flex; align-items: center; gap: 28px; margin-top: 42px; padding: 10px 10px 10px 20px; border: 2px solid var(--ink); border-radius: 999px; background: var(--lime); box-shadow: 6px 6px 0 var(--ink); font-size: 13px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.coming-soon b { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--ink); color: white; font-size: 20px; }

.transport-map { position: relative; align-self: center; min-height: 610px; overflow: hidden; border: 1px solid var(--line); border-radius: 42px; background: #e6e4dc; box-shadow: 0 28px 80px rgba(17,18,14,.09); }
.transport-map::before { content: ''; position: absolute; inset: 0; opacity: .38; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 48px 48px; }
.route { position: absolute; border: 3px solid var(--ink); border-radius: 50%; }
.route-a { inset: 10% 16%; transform: rotate(15deg); }
.route-b { inset: 22% 4% 18% 28%; border-style: dashed; transform: rotate(-23deg); }
.route-c { inset: 7% 34% 11% 8%; border-color: #654bff; transform: rotate(42deg); }
.route-dot { position: absolute; z-index: 2; width: 15px; height: 15px; border: 3px solid white; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 2px var(--ink); }
.dot-a { top: 18%; left: 34%; }.dot-b { right: 12%; top: 52%; background: var(--orange); }.dot-c { bottom: 14%; left: 38%; background: #654bff; }
.map-card { position: absolute; z-index: 3; display: grid; min-width: 150px; padding: 17px; border: 2px solid var(--ink); border-radius: 19px; box-shadow: 5px 5px 0 var(--ink); }
.map-card span { font-size: 10px; font-weight: 900; }.map-card b { margin-top: 20px; font-size: 18px; letter-spacing: -.03em; }.map-card small { margin-top: 4px; color: rgba(17,18,14,.64); font-size: 11px; }
.card-city { top: 8%; left: 7%; background: var(--lime); transform: rotate(-4deg); }
.card-work { top: 12%; right: 5%; background: white; transform: rotate(3deg); }
.card-travel { bottom: 8%; left: 5%; background: var(--blue); transform: rotate(3deg); }
.card-speed { right: 7%; bottom: 9%; background: var(--orange); transform: rotate(-3deg); }
.map-center { position: absolute; z-index: 4; top: 50%; left: 50%; display: grid; place-items: center; width: 178px; height: 178px; border: 3px solid var(--ink); border-radius: 50%; background: var(--ink); color: white; transform: translate(-50%, -50%); box-shadow: 0 0 0 12px var(--paper), 0 0 0 14px var(--ink); }
.map-center strong { color: var(--lime); font-size: 60px; line-height: 1; letter-spacing: -.08em; }.map-center span { margin-top: -27px; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }

.project-strip { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--line); }
.project-strip span { padding: 26px 20px; border-right: 1px solid var(--line); font-size: 12px; font-weight: 800; text-align: center; text-transform: uppercase; }
.project-strip span:last-child { border-right: 0; }

.site-footer { padding: 72px max(28px, calc((100vw - 1320px) / 2)) 28px; background: var(--ink); color: white; }
.footer-top { display: grid; grid-template-columns: 1.3fr .8fr .8fr; gap: 72px; padding-bottom: 64px; }
.brand-inverse { color: white; }.brand-inverse .brand-mark { background: var(--lime); color: var(--ink); }
.footer-about p { max-width: 390px; margin: 24px 0 0; color: rgba(255,255,255,.58); font-size: 15px; line-height: 1.6; }
.footer-projects, .footer-contact { display: grid; align-content: start; gap: 12px; }
.footer-projects p, .footer-contact p { margin: 0 0 12px; color: rgba(255,255,255,.42); font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.footer-projects a, .footer-contact a { display: flex; justify-content: space-between; gap: 18px; padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,.13); color: white; font-size: 14px; font-weight: 700; text-decoration: none; transition: color .15s ease; }
.footer-projects a:hover, .footer-contact a:hover { color: var(--lime); }
.footer-contact small { max-width: 260px; margin-top: 10px; color: rgba(255,255,255,.48); line-height: 1.5; }
.footer-bottom { display: flex; justify-content: space-between; gap: 24px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.15); color: rgba(255,255,255,.38); font-size: 11px; }

@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; min-height: 0; }
  .hero-copy { max-width: 760px; }
  .transport-map { min-height: 560px; }
  .footer-top { grid-template-columns: 1fr 1fr; }.footer-about { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
  .site-header { min-height: 68px; padding: 12px 16px; }.header-status { font-size: 10px; }
  .hero { width: calc(100% - 32px); gap: 55px; padding: 64px 0 58px; }
  h1 { font-size: clamp(56px, 19vw, 88px); }.lead { margin-top: 30px; font-size: 17px; }.coming-soon { margin-top: 32px; }
  .transport-map { min-height: 490px; border-radius: 28px; }
  .map-card { min-width: 126px; padding: 13px; }.map-card b { margin-top: 14px; font-size: 15px; }.map-center { width: 134px; height: 134px; }.map-center strong { font-size: 45px; }.map-center span { margin-top: -20px; font-size: 9px; }
  .card-city { top: 6%; left: 4%; }.card-work { top: 10%; right: 3%; }.card-travel { bottom: 5%; left: 3%; }.card-speed { right: 4%; bottom: 7%; }
  .project-strip { grid-template-columns: 1fr 1fr; }.project-strip span { border-bottom: 1px solid var(--line); }.project-strip span:nth-child(even) { border-right: 0; }
  .site-footer { padding: 54px 20px 24px; }.footer-top { grid-template-columns: 1fr; gap: 44px; }.footer-about { grid-column: auto; }.footer-bottom { display: grid; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; } }