:root {
  color-scheme: dark;
  --background: #061a2b;
  --surface: #0a2540;
  --surface-light: #0e3152;
  --text: #f5f8fb;
  --muted: #a9bfd2;
  --subtle: #7093b2;
  --line: rgb(151 179 205 / 18%);
  --accent: #f3cc00;
  --accent-hover: #ffde29;
  --accent-text: #061a2b;
}

* { box-sizing: border-box; }

html { min-width: 320px; scroll-behavior: smooth; }

body {
  min-height: 100vh;
  margin: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 82% 44%, rgb(18 68 108 / 58%), transparent 34rem),
    radial-gradient(circle at 18% 88%, rgb(243 204 0 / 7%), transparent 28rem),
    var(--background);
  color: var(--text);
  font-family: Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

button, a { font: inherit; }

.site-header,
main,
footer {
  width: min(1180px, calc(100% - 40px));
  margin-inline: auto;
}

.site-header {
  min-height: 88px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--text);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.02em;
  text-decoration: none;
}

.brand-mark {
  width: 38px;
  height: 38px;
  border: 1px solid rgb(255 255 255 / 8%);
  border-radius: 9px;
  box-shadow: 0 8px 24px rgb(0 0 0 / 22%);
}

.language {
  display: flex;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgb(255 255 255 / 3%);
}

.language button {
  min-width: 42px;
  padding: 7px 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--subtle);
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
}

.language button:hover { color: var(--text); }
.language button[aria-pressed="true"] { background: var(--surface-light); color: var(--text); }

main { display: grid; align-items: center; }

.hero {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(440px, 1.1fr);
  align-items: center;
  gap: clamp(44px, 8vw, 110px);
  padding: 58px 0 76px;
}

.hero-copy { position: relative; z-index: 1; }

.status {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 24px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.status > span:first-child {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 6px rgb(243 204 0 / 10%);
}

h1 {
  max-width: 12ch;
  margin: 0;
  font-size: clamp(42px, 6vw, 72px);
  line-height: 1.02;
  letter-spacing: -.048em;
}

.lead {
  max-width: 36rem;
  margin: 26px 0 34px;
  color: var(--muted);
  font-size: clamp(17px, 1.7vw, 20px);
  line-height: 1.65;
}

.contact {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 19px;
  border-radius: 10px;
  background: var(--accent);
  color: var(--accent-text);
  font-size: 15px;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 10px 30px rgb(243 204 0 / 12%);
  transition: transform 160ms ease, background 160ms ease;
}

.contact:hover { transform: translateY(-2px); background: var(--accent-hover); }
.contact:focus-visible, .language button:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.contact svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }

.contact-note { margin: 14px 0 0; color: var(--subtle); font-size: 13px; }

.route-card {
  position: relative;
  transform: rotate(1.5deg);
  filter: drop-shadow(0 40px 60px rgb(0 0 0 / 30%));
}

.route-card::before {
  content: "";
  position: absolute;
  inset: 12% 4% -3% 18%;
  z-index: -1;
  border-radius: 40%;
  background: rgb(243 204 0 / 9%);
  filter: blur(55px);
}

.route-card svg { display: block; width: 100%; height: auto; }
.route-card__surface { fill: rgb(10 37 64 / 92%); stroke: rgb(151 179 205 / 20%); stroke-width: 2; }
.route-card__grid { color: rgb(151 179 205 / 8%); }
.route-card__plan { fill: none; stroke: rgb(151 179 205 / 34%); stroke-linecap: round; stroke-linejoin: round; stroke-width: 5; }
.route-card__route { fill: none; stroke: var(--accent); stroke-linecap: round; stroke-linejoin: round; stroke-width: 5; }
.route-card__route--shadow { stroke: rgb(243 204 0 / 28%); stroke-width: 17; filter: url(#glow); }
.route-card__nodes circle { fill: var(--surface); stroke: var(--accent); stroke-width: 5; }
.route-card__bolt { fill: var(--accent); }
.route-card__labels rect { fill: var(--surface-light); stroke: rgb(151 179 205 / 22%); }

footer {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-top: 1px solid var(--line);
  color: var(--subtle);
  font-size: 13px;
}

noscript {
  position: fixed;
  right: 16px;
  bottom: 16px;
  left: 16px;
  padding: 12px;
  background: var(--surface);
  text-align: center;
}

@media (max-width: 860px) {
  .hero {
    grid-template-columns: 1fr;
    gap: 46px;
    padding-top: 42px;
  }

  h1 { max-width: 14ch; }
  .route-card { width: min(620px, 100%); margin-inline: auto; transform: none; }
}

@media (max-width: 520px) {
  .site-header, main, footer { width: min(100% - 28px, 1180px); }
  .site-header { min-height: 76px; }
  .brand-mark { width: 34px; height: 34px; }
  .hero { padding: 38px 0 56px; }
  h1 { font-size: clamp(38px, 12vw, 54px); }
  footer { align-items: flex-start; flex-direction: column; justify-content: center; padding-block: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .contact { transition: none; }
}