:root {
  color-scheme: dark;
  --text: #fff2e8;
  --soft: #ded0e7;
  --line: #71416d;
  --pink: #ff9cde;
  --peach: #ffbb86;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: radial-gradient(ellipse at 75% 0%, #47214c, transparent 46rem), #140c20;
  color: var(--text);
  font: 1rem/1.55 system-ui, sans-serif;
}
a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 3px solid #91fff2; outline-offset: 4px; }
.wrap { width: min(1140px, calc(100% - 36px)); margin-inline: auto; }
.mast, .ca, nav, .brand, .action { display: flex; align-items: center; gap: 14px; }
.mast, .ca { justify-content: space-between; }
.mast { padding: 16px 0; flex-wrap: wrap; }
.brand, nav a, .btn { text-decoration: none; font-weight: 800; }
nav { flex-wrap: wrap; }
nav a { color: var(--soft); font-size: .87rem; }
nav a:hover { color: var(--pink); }
.brand img { border-radius: 50%; }
.brand small, .tag { color: var(--pink); font-size: .73rem; font-weight: 850; letter-spacing: .13em; }
.ca { border: 1px solid var(--line); background: #25152e; padding: 12px 16px; border-radius: 14px; }
.ca div { min-width: 0; }
code { display: block; overflow-wrap: anywhere; color: var(--soft); }
button, .btn { background: var(--peach); color: #211025; border: 0; border-radius: 9px; padding: 11px 16px; font: inherit; font-weight: 850; white-space: nowrap; }
button { cursor: pointer; }
button:disabled { cursor: default; background: #634961; color: #fff; }
.hero { margin-top: 14px; border: 3px solid #09050c; border-radius: 16px; overflow: hidden; box-shadow: 0 16px 45px #08040c88; }
.hero img, .map { display: block; width: 100%; height: auto; }
.intro { padding: clamp(32px, 6vw, 70px) 0 32px; max-width: 790px; }
h1, h2, h3 { margin: .14em 0 .28em; line-height: 1.02; }
h1, h2 { font-weight: 950; letter-spacing: -.055em; }
h1 { font-size: clamp(2.65rem, 8vw, 6.3rem); }
h1 em { color: var(--peach); font-style: normal; }
h2 { font-size: clamp(2rem, 5vw, 3.65rem); }
h3 { font-size: 1.45rem; }
p { color: var(--soft); margin: .65em 0; }
.lead { font-weight: 850; color: var(--text); font-size: clamp(1.12rem, 3vw, 1.55rem); }
.action { flex-wrap: wrap; margin-block: 20px; }
.btn.secondary { background: #392441; color: var(--text); }
.btn:hover { filter: brightness(1.15); }
.mission { border-left: 3px solid var(--pink); padding-left: 12px; font-size: .8rem; font-weight: 900; }
.mission span { margin-inline: 5px; color: var(--text); }
.mission b { color: #ffd06c; letter-spacing: .08em; }
.panel { margin-bottom: 20px; padding: clamp(17px, 4vw, 38px); background: #24162d; border: 1px solid var(--line); border-radius: 18px; }
.exchange { background: linear-gradient(125deg, #3a1d43, #25162f); }
.map { border-radius: 12px; margin: 18px 0; background: #110c1c; }
.cards { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.cards > * { background: #321f3c; border: 1px solid #70456c; padding: 16px; border-radius: 12px; }
.cards p { margin-bottom: 0; }
.fine, .footer { font-size: .84rem; }
.footer { padding: 24px 0 32px; }
.footer span { color: var(--pink); font-weight: 900; letter-spacing: .1em; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
@media (max-width: 650px) {
  .cards { grid-template-columns: 1fr; }
  .wrap { width: calc(100% - 24px); }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }