@font-face {
  font-family: Satoshi;
  src: url('../assets/fonts/Satoshi-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: Satoshi;
  src: url('../assets/fonts/Satoshi-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}
:root {
  color-scheme: dark;
  --text: #e5e7eb;
  --muted: #94a3b8;
  --blue: #2563eb;
  --cyan: #38bdf8;
}
* { box-sizing: border-box; }
html { min-height: 100%; }
body {
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  display: grid;
  place-items: center;
  padding: 40px 24px;
  color: var(--text);
  font-family: Satoshi, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 50% 42%, rgba(37,99,235,.16), transparent 34%),
    radial-gradient(circle at 12% 0%, rgba(56,189,248,.08), transparent 30%),
    linear-gradient(rgba(56,189,248,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56,189,248,.025) 1px, transparent 1px),
    linear-gradient(145deg, #0b1220 0%, #070b14 58%, #05070d 100%);
  background-size: auto, auto, 56px 56px, 56px 56px, auto;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at center, transparent 28%, rgba(2,6,23,.5) 100%);
}
.maintenance {
  position: relative;
  width: min(100%, 400px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.brand-symbol {
  display: block;
  width: 160px;
  height: 126px;
  object-fit: contain;
  margin-bottom: 34px;
  filter: drop-shadow(0 18px 34px rgba(37,99,235,.18));
}
h1 {
  margin: 0 0 12px;
  font-size: clamp(1.35rem, 5vw, 1.6rem);
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.25;
}
p {
  margin: 0;
  color: var(--muted);
  font-size: .94rem;
  line-height: 1.7;
}
.contact {
  display: inline-block;
  margin-top: 26px;
  padding: 10px 0;
  color: #a7c5df;
  font-size: .82rem;
  text-decoration: none;
  transition: color .2s ease;
  overflow-wrap: anywhere;
}
.contact:hover { color: var(--cyan); }
.cloudsyst-access {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  margin-top: 26px;
  padding: 8px 12px;
  color: var(--muted);
  font-size: .75rem;
  text-decoration: none;
  border-radius: 6px;
  transition: color .2s, background .2s;
}
.cloudsyst-access img { display: block; object-fit: contain; }
.cloudsyst-access:hover { color: var(--text); background: rgba(56,189,248,.05); }
.cloudsyst-access:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.brand-nodes { animation: nodes-build 6s ease-out infinite; transform-origin: center; transform-box: fill-box; }
.brand-connection { stroke-dasharray: 1; animation: connections-build 6s linear infinite; }
.connection-1 { --start: 0.25s; animation-delay: var(--start); }
.connection-2 { animation-delay: .55s; }
.connection-3 { animation-delay: .85s; }
.connection-4 { animation-delay: 1.15s; }
.connection-5 { animation-delay: 1.45s; }
.connection-6 { animation-delay: 1.75s; }
.brand-connection { stroke-dashoffset: 1; animation-fill-mode: both; }
@keyframes connections-build {
  0% { stroke-dashoffset: 1; opacity: 1; }
  5%, 65% { stroke-dashoffset: 0; opacity: 1; }
  70%, 100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes nodes-build {
  0% { opacity: 0; transform: scale(.9); }
  7%, 92% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1); }
}
.contact:focus-visible { outline: 2px solid var(--cyan); outline-offset: 5px; border-radius: 2px; }
@media (max-width: 480px) {
  .brand-symbol { width: 124px; height: 98px; margin-bottom: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .contact, .cloudsyst-access { transition: none; }
  .brand-nodes { animation: none; }
  .brand-connection {
    animation-name: connections-draw-once;
    animation-duration: .3s;
    animation-iteration-count: 1;
  }
}
@keyframes connections-draw-once {
  from { stroke-dashoffset: 1; opacity: 1; }
  to { stroke-dashoffset: 0; opacity: 1; }
}