@font-face {
  font-family: "Geist";
  src: url("/fonts/geist.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Geist Mono";
  src: url("/fonts/geist-mono.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #04070d;
  --brand: #205696;
  --electric: #4f9dff;
  --text: #e9eef5;
  --muted: #8c9aad;
  --line: rgba(160, 190, 230, 0.12);
  --sans: "Geist", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; overflow-x: hidden; overflow-x: clip; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-x: clip;
}

::selection { background: var(--brand); color: #fff; }

.wrap {
  position: relative;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 56px);
}

.mono {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---------- Backdrop ---------- */

.backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

.backdrop__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 72px 72px;
  background-position: center center;
  opacity: 0.55;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 68% 42%, #000 0%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 60% at 68% 42%, #000 0%, transparent 75%);
}

.backdrop__glow {
  position: absolute;
  width: 90vmax;
  height: 90vmax;
  left: 68%;
  top: 42%;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(circle, rgba(32, 86, 150, 0.55) 0%, rgba(32, 86, 150, 0.18) 28%, rgba(4, 7, 13, 0) 55%);
}

/* ---------- Top bar ---------- */

.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 28px;
  padding-bottom: 28px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text);
  text-decoration: none;
}

.brand__mark {
  width: 32px;
  height: 32px;
  flex: none;
  filter: drop-shadow(0 0 6px rgba(79, 157, 255, 0.45));
}

.coords { color: var(--muted); }

/* ---------- Hero ---------- */

.hero {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  align-items: center;
  gap: 32px;
  padding-top: clamp(16px, 4vh, 48px);
  padding-bottom: clamp(32px, 6vh, 72px);
}

.hero__title {
  margin: 0;
  font-size: clamp(2.5rem, 5.6vw, 5.25rem);
  font-weight: 500;
  line-height: 1.0;
  letter-spacing: -0.045em;
  text-wrap: balance;
}

.chrome {
  background: linear-gradient(100deg,
    #6d86a8 0%, #e3ebf5 18%, #8fb6e8 34%, #ffffff 48%, #7fa3d1 62%, #dbe5f1 80%, #6d86a8 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: sheen 9s linear infinite;
}

@keyframes sheen {
  from { background-position: 100% 0; }
  to { background-position: -150% 0; }
}

/* ---------- QD emblem with the mercury orb inside its ring ---------- */

/* The emblem artwork is traced from the QD logo. Its viewBox is
   "31 300 1088 551"; the inner circle is centred at (575.5, 575.5). */
.emblem {
  position: relative;
  justify-self: center;
  width: min(100%, 700px);
  aspect-ratio: 1088 / 551;
}

.emblem > * { position: absolute; }

/* Blue halo behind the ring */
.emblem__glow {
  left: 50%;
  top: 50%;
  width: 62%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(47, 111, 190, 0.55) 0%, rgba(32, 86, 150, 0.22) 38%, rgba(32, 86, 150, 0) 68%);
  animation: glow 8s ease-in-out infinite;
}

@keyframes glow {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 1; }
}

/* Orb sits just inside the inner ring (radius 190 of the 199 opening) */
.emblem__orb {
  left: 50.05%;
  top: 50%;
  width: 34.9%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
}

/* Silver circuit lines: the traced frame is used as a mask over a moving
   chrome gradient, so a highlight sweeps across the lines. */
.emblem__lines,
.emblem__ink { inset: 0; }

.emblem__lines { filter: drop-shadow(0 0 5px rgba(79, 157, 255, 0.45)); }

.emblem__frame,
.emblem__letters {
  position: absolute;
  inset: 0;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.emblem__frame {
  -webkit-mask-image: url("/brand/emblem-frame.svg");
  mask-image: url("/brand/emblem-frame.svg");
  background: linear-gradient(100deg,
    #7d8ea4 0%, #dfe7f0 16%, #93a5ba 30%, #ffffff 42%, #9fb6d2 52%, #e2eaf3 68%, #7d8ea4 100%);
  background-size: 260% 100%;
  animation: sheen 10s linear infinite;
}

/* QD letters over the orb: bright silver with a dark halo so they read on
   both the light and dark parts of the metal. */
.emblem__ink {
  filter: drop-shadow(0 0 1.5px rgba(2, 6, 14, 0.95)) drop-shadow(0 0 7px rgba(2, 6, 14, 0.7));
}

.emblem__letters {
  -webkit-mask-image: url("/brand/emblem-letters.svg");
  mask-image: url("/brand/emblem-letters.svg");
  background: linear-gradient(180deg, #ffffff 0%, #eef3f8 45%, #c6d3e1 100%);
}

/* Circuit terminals pulse outward from the ring like a signal */
.emblem__vias {
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 0 4px rgba(79, 157, 255, 0.95));
}

.emblem__vias circle {
  fill: #cfe6ff;
  opacity: 0.12;
  animation: via 4.5s ease-out infinite;
}

.emblem__vias .w1 { animation-delay: 0.22s; }
.emblem__vias .w2 { animation-delay: 0.44s; }
.emblem__vias .w3 { animation-delay: 0.66s; }
.emblem__vias .w4 { animation-delay: 0.88s; }
.emblem__vias .w5 { animation-delay: 1.1s; }

@keyframes via {
  0% { opacity: 0.12; }
  7% { opacity: 1; }
  30%, 100% { opacity: 0.12; }
}

/* ---------- Mercury orb ---------- */

.orb {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(174deg,
      #f6f9fc 0%, #d4dce6 18%, #8996a8 38%, #2a3445 47%, #070b12 51%,
      #0e1724 56%, #2a4566 70%, #5f86b8 86%, #b9d3f2 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.18),
    inset -30px -46px 90px rgba(0, 0, 0, 0.55),
    inset 0 0 50px rgba(120, 175, 255, 0.35);
  animation: morph 16s ease-in-out infinite;
}

/* Slow-moving reflections inside the metal */
.orb__flow {
  position: absolute;
  inset: -30%;
  background:
    radial-gradient(38% 22% at 30% 62%, rgba(140, 190, 255, 0.55) 0%, rgba(140, 190, 255, 0) 70%),
    radial-gradient(30% 16% at 72% 30%, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0) 70%),
    radial-gradient(26% 14% at 60% 78%, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0) 70%);
  filter: blur(4px);
  animation: spin 28s linear infinite;
}

/* Crisp specular highlights (fixed light source) */
.orb::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(7% 5% at 31% 24%, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%),
    radial-gradient(22% 9% at 38% 17%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 100%),
    radial-gradient(60% 30% at 50% 100%, rgba(79, 157, 255, 0.45) 0%, rgba(79, 157, 255, 0) 100%),
    radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0) 62%, rgba(0, 0, 0, 0.35) 100%);
}

@keyframes morph {
  0%, 100% { border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%; }
  25% { border-radius: 53% 47% 51% 49% / 48% 53% 47% 52%; }
  50% { border-radius: 48% 52% 47% 53% / 52% 47% 53% 48%; }
  75% { border-radius: 51% 49% 53% 47% / 47% 51% 49% 53%; }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ---------- Footer panel ---------- */

footer { padding-bottom: clamp(20px, 4vh, 40px); }

.panel {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px 48px;
  padding: 24px 28px;
  border: 1px solid rgba(170, 200, 240, 0.12);
  border-radius: 14px;
  background: rgba(10, 18, 32, 0.55);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 35%;
  height: 1px;
  background: linear-gradient(90deg, rgba(79, 157, 255, 0), var(--electric), rgba(79, 157, 255, 0));
  animation: scan 7s ease-in-out infinite;
}

@keyframes scan {
  from { transform: translateX(-100%); }
  to { transform: translateX(300%); }
}

.label {
  margin: 0 0 8px;
  color: var(--electric);
}

address {
  font-style: normal;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: #c6d0dc;
}

.copyright {
  margin: 0;
  color: var(--muted);
  white-space: nowrap;
}

/* ---------- 404 ---------- */

.notfound .hero { grid-template-columns: 1fr; justify-items: start; align-content: center; }
.notfound .hero__title { max-width: 14ch; }
.notfound .mono a { color: var(--electric); text-underline-offset: 4px; }
.notfound .mono a:hover { color: #fff; }

/* ---------- Small screens ---------- */

@media (max-width: 820px) {
  .hero { grid-template-columns: 1fr; gap: 40px; }
  .hero { align-content: center; }
  .emblem { order: -1; margin-top: 8px; }
  .hero__title { font-size: clamp(2.4rem, 11vw, 3.5rem); }
  .panel { flex-direction: column; align-items: flex-start; padding: 22px 20px; }
  .backdrop__glow { left: 50%; top: 30%; }
  .backdrop__grid {
    -webkit-mask-image: radial-gradient(ellipse 90% 50% at 50% 30%, #000 0%, transparent 75%);
    mask-image: radial-gradient(ellipse 90% 50% at 50% 30%, #000 0%, transparent 75%);
  }
}

@media (max-width: 420px) {
  .coords { display: none; }
}

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