:root {
  --red: #e21c2a;
  --white: #f7f7f8;
  --muted: #aaaab1;
  --line: rgba(255,255,255,.12);
}

* { box-sizing: border-box; }

html, body { min-height: 100%; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  background: #070708;
  color: var(--white);
  font-family: "Montserrat", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .12;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 150 150' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

.maintenance {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  display: block;
  background:
    radial-gradient(circle at 78% 49%, rgba(178,6,21,.21), transparent 28%),
    radial-gradient(circle at 16% 45%, rgba(255,255,255,.045), transparent 28%),
    linear-gradient(140deg, #111114, #080809 50%, #050505);
}

.hex-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .24;
  background-image: url("data:image/svg+xml,%3Csvg width='104' height='90' viewBox='0 0 104 90' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none'%3E%3Cpath d='M26 2h52l25 43-25 43H26L1 45 26 2Z' stroke='%23ffffff' stroke-opacity='.18' stroke-width='1.2'/%3E%3Cpath d='M31 10h42l20 35-20 35H31L11 45 31 10Z' stroke='%23ffffff' stroke-opacity='.08' stroke-width='.8'/%3E%3Cpath d='M52 2v8M52 80v8M1 45h10M93 45h10' stroke='%23e21c2a' stroke-opacity='.34'/%3E%3Ccircle cx='52' cy='2' r='1.8' fill='%23e21c2a' fill-opacity='.55'/%3E%3Ccircle cx='1' cy='45' r='1.4' fill='%23ffffff' fill-opacity='.3'/%3E%3Ccircle cx='103' cy='45' r='1.4' fill='%23ffffff' fill-opacity='.3'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 104px 90px;
  -webkit-mask-image: radial-gradient(circle at 68% 50%, #000 0, rgba(0,0,0,.88) 35%, transparent 78%);
  mask-image: radial-gradient(circle at 68% 50%, #000 0, rgba(0,0,0,.88) 35%, transparent 78%);
}

.red-orbit {
  position: absolute;
  width: min(760px, 65vw);
  aspect-ratio: 1;
  right: -13vw;
  top: 15vh;
  border: 1px solid rgba(226,28,42,.24);
  border-radius: 50%;
  box-shadow: 0 0 110px rgba(226,28,42,.08), inset 0 0 90px rgba(226,28,42,.05);
  pointer-events: none;
}

.red-orbit::before, .red-orbit::after {
  content: "";
  position: absolute;
  inset: 9%;
  border: 1px dashed rgba(255,255,255,.1);
  border-radius: 50%;
}

.red-orbit::after { inset: 24%; border-color: rgba(226,28,42,.27); }

.maintenance-notice {
  position: relative;
  z-index: 4;
  border-bottom: 1px solid rgba(226,28,42,.38);
  background: linear-gradient(90deg, rgba(91,3,12,.96), rgba(170,7,22,.96) 50%, rgba(91,3,12,.96));
  box-shadow: 0 8px 28px rgba(0,0,0,.34), 0 0 24px rgba(226,28,42,.13);
}

.maintenance-notice-inner {
  width: min(calc(100% - 48px), 1380px);
  min-height: 44px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px 28px;
  color: #fff;
  text-align: center;
}

.maintenance-notice span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .67rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.maintenance-notice span i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 12px rgba(255,255,255,.85);
  animation: pulse 1.8s ease-in-out infinite;
}

.maintenance-notice strong {
  font-size: .76rem;
  letter-spacing: .025em;
}

.topbar, .content, .initiator, footer {
  position: relative;
  z-index: 2;
  width: min(calc(100% - 48px), 1380px);
  margin-inline: auto;
}

.topbar {
  min-height: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "brand meta"
    "nav nav";
  align-items: center;
  gap: 16px 28px;
  padding: 18px 0 22px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  z-index: 6;
}

.brand {
  grid-area: brand;
  color: #fff;
  font-size: clamp(1rem, 2vw, 1.3rem);
  font-weight: 800;
  letter-spacing: .1em;
  text-decoration: none;
}

.topbar .project-logo img {
  width: clamp(158px, 14vw, 190px);
}

.topbar .project-logo {
  min-width: 0;
  align-self: center;
}

.brand strong { color: var(--red); }

.primary-nav {
  grid-area: nav;
  position: relative;
  z-index: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.primary-nav a {
  position: relative;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 14px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(16,17,20,.84), rgba(5,6,8,.78));
  box-shadow: inset 0 0 0 1px rgba(226,28,42,.025), 0 8px 22px rgba(0,0,0,.2);
  color: #d8d8dd;
  font-size: .64rem;
  font-weight: 900;
  letter-spacing: .08em;
  line-height: 1.2;
  text-decoration: none;
  text-transform: uppercase;
  text-align: center;
  white-space: normal;
  cursor: pointer;
  pointer-events: auto;
  transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease;
}

.primary-nav a span { min-width: 0; }

.primary-nav a::before {
  content: "";
  flex: 0 0 auto;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #ff3040;
  box-shadow: 0 0 10px rgba(255,48,64,.9);
  animation: navSignal 3.2s ease-in-out infinite;
}

.primary-nav a:nth-child(2)::before { animation-delay: .45s; }
.primary-nav a:nth-child(3)::before { animation-delay: .9s; }
.primary-nav a:nth-child(4)::before { animation-delay: 1.35s; }

.primary-nav a::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 0;
  height: 1px;
  opacity: 0;
  background: linear-gradient(90deg, transparent, #ff3040, transparent);
  transition: opacity .2s ease;
}

.primary-nav a:hover,
.primary-nav a:focus-visible {
  color: #fff;
  border-color: rgba(226,28,42,.58);
  background: rgba(226,28,42,.11);
  outline: none;
  transform: translateY(-1px);
}

.primary-nav a:hover::after,
.primary-nav a:focus-visible::after { opacity: 1; }

.topbar-meta {
  grid-area: meta;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  justify-self: end;
  gap: 11px;
  min-width: 0;
  max-width: 100%;
}

.language-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #85858d;
  font-size: .56rem;
  font-weight: 900;
  letter-spacing: .13em;
  text-transform: uppercase;
  white-space: nowrap;
}

.language-label i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #ff3040;
  box-shadow: 0 0 10px rgba(255,48,64,.8);
}

.maintenance .locale-switcher {
  position: static;
  inset: auto;
  z-index: auto;
  flex: 0 0 auto;
  gap: 0;
  padding: 3px;
  border-color: rgba(255,255,255,.14);
  border-radius: 4px;
  background: rgba(5,7,10,.66);
  box-shadow: inset 0 0 0 1px rgba(226,28,42,.045), 0 8px 22px rgba(0,0,0,.22);
  backdrop-filter: blur(12px);
}

.maintenance .locale-switcher a {
  min-width: 31px;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .42rem .38rem;
  border-left: 1px solid rgba(255,255,255,.09);
  border-radius: 2px;
  font-family: "Montserrat", Arial, sans-serif;
  font-size: .58rem;
  color: #cbd0d6;
  text-decoration: none;
}

.maintenance .locale-switcher a:link,
.maintenance .locale-switcher a:visited {
  color: #cbd0d6;
  text-decoration: none;
}

.maintenance .locale-switcher a:hover,
.maintenance .locale-switcher a:focus-visible {
  color: #fff;
  text-decoration: none;
}

.maintenance .locale-switcher a:first-child { border-left: 0; }

.maintenance .locale-switcher a[aria-current="page"] {
  color: #fff;
  background: linear-gradient(180deg, #ef2636, #b50716);
  box-shadow: 0 0 12px rgba(226,28,42,.32);
}

.system-state {
  display: none;
  align-items: center;
  gap: 10px;
  color: #929299;
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.system-state i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 15px #ff1a2d;
  animation: pulse 1.8s ease-in-out infinite;
}

.scanner {
  position: relative;
  z-index: 3;
  height: 4px;
  overflow: hidden;
  background: #1b1b1d;
}

.scanner span {
  position: absolute;
  inset: 0 auto;
  width: 22%;
  background: linear-gradient(90deg, transparent, #ff3542 38%, #ff0b1e 50%, #ff3542 62%, transparent);
  box-shadow: 0 0 16px 6px rgba(226,28,42,.72);
  animation: scan 3.1s ease-in-out infinite alternate;
}

@keyframes scan { from { left: -22%; } to { left: 100%; } }
@keyframes pulse { 50% { opacity: .45; transform: scale(.7); } }
@keyframes navSignal { 0%, 66%, 100% { opacity: .42; } 72%, 82% { opacity: 1; } }

.content {
  min-height: 710px;
  display: grid;
  grid-template-columns: minmax(0, .94fr) minmax(520px, 1.06fr);
  align-items: start;
  gap: clamp(30px, 5vw, 80px);
  padding: 64px 0 44px;
}

.copy { position: relative; z-index: 4; scroll-margin-top: 24px; }

.eyebrow {
  display: inline-block;
  margin-bottom: 20px;
  color: #ff5964;
  font-size: .73rem;
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
}

h1 {
  max-width: 760px;
  margin: 0 0 25px;
  font-size: clamp(2.8rem, 5.3vw, 5.55rem);
  line-height: .98;
  letter-spacing: -.055em;
  text-wrap: balance;
}

h1 em { color: var(--red); font-style: normal; text-shadow: 0 0 28px rgba(226,28,42,.27); }

.copy > p {
  max-width: 680px;
  margin: 0 0 28px;
  color: var(--muted);
  font-size: clamp(.96rem, 1.5vw, 1.08rem);
  line-height: 1.78;
}

.status-card {
  width: min(100%, 570px);
  padding: 17px 19px 15px;
  border: 1px solid rgba(226,28,42,.32);
  border-left: 3px solid var(--red);
  background: linear-gradient(90deg, rgba(226,28,42,.11), rgba(255,255,255,.025));
}

.status-card > span { display: block; margin-bottom: 5px; color: #777780; font-size: .61rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.status-card > strong { font-size: .9rem; letter-spacing: .035em; }
.status-card > div { height: 3px; margin-top: 14px; overflow: hidden; background: #232326; }
.status-card > div i { display: block; width: 25%; height: 100%; background: linear-gradient(90deg, #9c0714, #ff3643); box-shadow: 0 0 12px rgba(226,28,42,.55); }

.available { margin-top: 34px; }
.available > span { display: block; margin-bottom: 12px; color: #66666e; font-size: .61rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.links { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.links a { display: flex; min-height: 91px; flex-direction: column; justify-content: center; padding: 15px; border: 1px solid var(--line); border-radius: 5px; background: rgba(255,255,255,.035); text-decoration: none; transition: border-color .2s ease, background .2s ease, transform .2s ease; }
.links a:hover, .links a:focus-visible { transform: translateY(-2px); border-color: rgba(226,28,42,.5); background: rgba(226,28,42,.08); }
.links strong { margin-bottom: 6px; font-size: .77rem; }
.links small { color: #777780; font-size: .61rem; line-height: 1.45; }

.visual { position: relative; min-height: 620px; display: flex; align-items: center; justify-content: center; }
.tech-ring { position: absolute; width: min(560px, 90%); aspect-ratio: 1; border: 1px solid rgba(255,255,255,.1); border-radius: 50%; background: radial-gradient(circle, rgba(226,28,42,.18), transparent 66%); }
.tech-ring::after { content: ""; position: absolute; inset: 12%; border: 1px dashed rgba(255,255,255,.11); border-radius: 50%; }
.visual img { position: relative; z-index: 2; width: 117%; max-width: none; filter: drop-shadow(0 38px 27px rgba(0,0,0,.86)) drop-shadow(0 0 20px rgba(226,28,42,.1)); }
.vehicle-id { position: absolute; z-index: 3; right: 2%; bottom: 6%; color: #6e6e76; font-size: .62rem; font-weight: 800; letter-spacing: .15em; }

.initiator {
  display: grid;
  grid-template-columns: minmax(280px, .72fr) minmax(0, 1.28fr);
  gap: clamp(28px, 5vw, 68px);
  align-items: stretch;
  margin-block: 28px 76px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.13);
  border-left: 3px solid var(--red);
  border-radius: 7px;
  background:
    linear-gradient(120deg, rgba(226,28,42,.1), transparent 34%),
    rgba(12,12,14,.9);
  box-shadow: 0 26px 65px rgba(0,0,0,.34);
  scroll-margin-top: 24px;
}

.initiator-media { min-height: 450px; overflow: hidden; background: #09090a; }
.initiator-media img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; filter: grayscale(.32) contrast(1.04); }
.initiator-copy { align-self: center; padding: clamp(32px, 5vw, 64px) clamp(28px, 5vw, 66px) clamp(32px, 5vw, 64px) 0; }
.initiator-kicker { display: block; margin-bottom: 15px; color: #ff5964; font-size: .68rem; font-weight: 900; letter-spacing: .15em; text-transform: uppercase; }
.initiator h2 { max-width: 760px; margin: 0 0 22px; font-size: clamp(2rem, 3.7vw, 3.75rem); line-height: 1.03; letter-spacing: -.045em; text-wrap: balance; }
.initiator p { max-width: 760px; margin: 0 0 15px; color: var(--muted); font-size: clamp(.94rem, 1.35vw, 1.04rem); line-height: 1.75; }
.initiator-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin: 28px 0; padding: 0; list-style: none; }
.initiator-facts li { padding: 13px 14px; border: 1px solid var(--line); background: rgba(255,255,255,.035); color: #d8d8dc; font-size: .7rem; font-weight: 800; line-height: 1.45; }
.initiator-link { display: inline-flex; align-items: center; gap: 10px; padding: 13px 17px; border: 1px solid rgba(226,28,42,.5); border-radius: 4px; background: rgba(226,28,42,.12); color: #fff; font-size: .74rem; font-weight: 900; text-decoration: none; transition: transform .2s ease, background .2s ease; }
.initiator-link:hover, .initiator-link:focus-visible { transform: translateY(-2px); background: rgba(226,28,42,.24); }

footer {
  min-height: 66px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-top: 1px solid var(--line);
  color: #5f5f66;
  font-size: .68rem;
}

footer a { color: #8d8d94; font-weight: 700; text-decoration: none; }
footer a:hover { color: #fff; }
.footer-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px 18px; }

@media (max-width: 900px) {
  .primary-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1050px) {
  .content { grid-template-columns: 1fr; padding-top: 80px; text-align: center; }
  .copy > p, .status-card { margin-inline: auto; }
  .links { max-width: 760px; margin-inline: auto; }
  .visual { min-height: 520px; width: min(100%, 760px); margin-inline: auto; }
  .initiator { grid-template-columns: minmax(250px, .8fr) minmax(0, 1.2fr); }
  .initiator-copy { padding-left: 0; }
  .initiator-facts { grid-template-columns: 1fr; }
}

@media (max-width: 650px) {
  .maintenance-notice-inner { width: min(calc(100% - 28px), 1380px); min-height: 62px; flex-direction: column; gap: 4px; padding: 9px 0; }
  .maintenance-notice strong { font-size: .69rem; line-height: 1.4; }
  .topbar, .content, .initiator, footer { width: min(calc(100% - 28px), 1380px); }
  .topbar { min-height: 0; gap: 10px 8px; padding: 11px 0 13px; }
  .topbar .project-logo img { width: clamp(120px, 40vw, 150px); }
  .topbar-meta { gap: 5px; }
  .system-state { display: none; }
  .language-label { display: none; }
  .primary-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
  .primary-nav a { min-height: 44px; justify-content: flex-start; padding: 7px 9px; border: 1px solid rgba(255,255,255,.08); font-size: .55rem; letter-spacing: .045em; white-space: normal; }
  .maintenance .locale-switcher { position: static; inset: auto; gap: 1px; padding: 2px; }
  .maintenance .locale-switcher a { min-width: 25px; min-height: 30px; padding: .36rem .24rem; font-size: .55rem; }
  .content { min-height: auto; padding: 58px 0 30px; }
  h1 { font-size: clamp(2.45rem, 13vw, 3.6rem); }
  .links { grid-template-columns: 1fr; }
  .links a { min-height: 74px; }
  .visual { min-height: 340px; }
  .visual img { width: 122%; }
  .vehicle-id { display: none; }
  .initiator { grid-template-columns: 1fr; margin-block: 18px 50px; }
  .initiator-media { min-height: 330px; }
  .initiator-copy { padding: 28px 22px 32px; }
  .initiator h2 { font-size: clamp(2rem, 9vw, 2.8rem); }
  footer { min-height: 112px; flex-direction: column; justify-content: center; text-align: center; }
  .footer-links { justify-content: center; }
}

@media (max-width: 420px) {
  .topbar {
    grid-template-columns: 1fr;
    grid-template-areas:
      "brand"
      "meta"
      "nav";
  }
  .topbar-meta { justify-self: stretch; justify-content: flex-start; }
  .maintenance .locale-switcher { width: 100%; justify-content: space-between; }
  .maintenance .locale-switcher a { flex: 1 1 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}