@font-face { font-family: "HZ Inter Tight"; src: url("fx/fonts/inter-tight-es-400-800.woff2") format("woff2"); font-style: normal; font-weight: 400 800; font-display: swap; }
@font-face { font-family: "HZ Mono"; src: url("fx/fonts/jetbrains-mono-es-400.woff2") format("woff2"); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: "HZ Fraunces"; src: url("fx/fonts/fraunces-italic-voz.woff2") format("woff2"); font-style: italic; font-weight: 300 500; font-display: swap; }
:root { color-scheme: dark; --bg: #06080c; --panel: #10151e; --line: #2c3b50; --ink: #eef3f9; --muted: #98a7bc; --soft: #6d7d93; --teal: #4fd1c5; --lime: #c5f25c; }
* { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; }
body { margin: 0; color: var(--ink); background: radial-gradient(ellipse 70% 25% at 50% -4%, rgba(79,209,197,.1), transparent), var(--bg); font-family: "HZ Inter Tight", system-ui, sans-serif; line-height: 1.5; }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 2px solid var(--lime); outline-offset: 4px; border-radius: 4px; }
.wrap { width: min(1160px, calc(100% - 40px)); margin-inline: auto; }
.skip { position: absolute; left: -9999px; top: 0; z-index: 10; padding: 10px 16px; color: var(--bg); background: var(--lime); }
.skip:focus { left: 0; }
.topbar { border-bottom: 1px solid #1e2938; background: rgba(6,8,12,.9); }
.topbar-inner { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand { display: inline-flex; align-items: center; min-height: 44px; }
.brand-signature-light, .brand-signature-print { display: block; width: 220px; height: auto; }
.brand-signature-print, .brand-symbol { display: none; }
.brand-symbol { width: 44px; height: 44px; }
.back-link { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-family: "HZ Mono", ui-monospace, monospace; font-size: .8rem; min-height: 44px; }
.back-link:hover, .page-footer a:hover { color: var(--lime); }
.intro { padding: clamp(48px, 8vw, 96px) 0 clamp(42px, 6vw, 76px); max-width: 810px; }
.eyebrow, .group-number, .card-type { margin: 0; color: var(--teal); font-family: "HZ Mono", ui-monospace, monospace; font-size: .72rem; letter-spacing: .11em; text-transform: uppercase; }
.intro h1 { margin: 15px 0 21px; font-size: clamp(3.2rem, 8vw, 6rem); line-height: .94; letter-spacing: -.065em; font-weight: 780; text-wrap: balance; }
.intro h1 em { color: var(--lime); font-family: "HZ Fraunces", Georgia, serif; font-weight: 400; }
.intro > p:last-child { max-width: 640px; margin: 0; color: var(--muted); font-size: clamp(1rem, 1.6vw, 1.2rem); }
.group { margin-bottom: clamp(54px, 8vw, 94px); }
.group-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 23px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.group-heading h2 { margin: 8px 0 0; font-size: clamp(2rem, 4vw, 3.1rem); line-height: 1; letter-spacing: -.04em; }
.group-heading > p { max-width: 220px; margin: 0 0 3px; color: var(--soft); font-size: .85rem; text-align: right; }
.qr-grid { display: grid; gap: 16px; }
.qr-grid-sites { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.qr-grid-contacts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.qr-card { display: flex; flex-direction: column; min-width: 0; padding: clamp(20px, 2.7vw, 30px); background: linear-gradient(140deg, #111923, #0b0f16 80%); border: 1px solid #273547; border-radius: 18px; box-shadow: 0 18px 38px -30px rgba(0,0,0,.9); }
.qr-card-web { background: linear-gradient(145deg, rgba(79,209,197,.13), #0b0f16 55%); border-color: rgba(79,209,197,.36); }
.qr-preview { align-self: flex-start; display: block; width: min(100%, 248px); }
.qr-frame { display: grid; place-items: center; width: 100%; aspect-ratio: 1; padding: 11px; background: white; border-radius: 12px; }
.qr-frame img { display: block; width: 100%; height: auto; aspect-ratio: 1; image-rendering: pixelated; }
.qr-expand { display: inline-flex; align-items: center; min-height: 44px; color: var(--teal); font-family: "HZ Mono", ui-monospace, monospace; font-size: .78rem; }
.qr-preview:hover .qr-expand, .qr-preview:focus-visible .qr-expand { color: var(--lime); text-decoration: underline; text-underline-offset: 3px; }
.card-copy { display: flex; flex-direction: column; align-items: flex-start; flex: 1; min-width: 0; padding-top: 13px; }
.card-type { color: var(--lime); }
.card-copy h3 { margin: 5px 0 8px; font-size: clamp(1.8rem, 2.7vw, 2.3rem); line-height: 1.08; letter-spacing: -.04em; }
.card-description { margin: 0 0 21px; color: var(--muted); font-size: .93rem; }
.card-destination { display: flex; flex-direction: column; gap: 3px; margin: auto 0 22px; font-family: "HZ Mono", ui-monospace, monospace; overflow-wrap: anywhere; }
.card-destination a { color: var(--ink); font-size: 1rem; }
.card-destination a:hover { color: var(--teal); }
.card-destination span { color: var(--soft); font-size: .72rem; }
.card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 17px; width: 100%; }
.action { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; padding: 10px 16px; border-radius: 999px; background: var(--teal); color: #04141a; font-weight: 750; font-size: .87rem; }
.action:hover { background: var(--lime); }
.download { display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); font-family: "HZ Mono", ui-monospace, monospace; font-size: .75rem; }
.download:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.qr-dialog { position: fixed; inset: 0; width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh; margin: 0; padding: clamp(16px, 3vw, 32px); border: 0; color: var(--ink); background: var(--bg); overflow: auto; }
.qr-dialog::backdrop { background: rgba(0, 0, 0, .85); }
.qr-dialog-panel { display: flex; flex-direction: column; min-height: 100%; }
.qr-dialog-close { align-self: flex-end; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 7px 14px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); background: var(--panel); font: inherit; font-weight: 700; cursor: pointer; }
.qr-dialog-close:hover { border-color: var(--teal); color: var(--teal); }
.qr-dialog-close:focus-visible { outline: 2px solid var(--lime); outline-offset: 4px; }
.qr-dialog-close span { font-size: 1.5rem; line-height: .8; }
.qr-dialog-content { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 16px 0 32px; text-align: center; }
.qr-dialog-image { display: block; width: min(90vw, 75vh, 850px); height: auto; aspect-ratio: 1; margin-bottom: 8px; padding: clamp(10px, 2vw, 20px); border-radius: 18px; background: white; image-rendering: pixelated; }
.qr-dialog-content h2 { margin: 0; font-size: clamp(1.5rem, 3vw, 2.2rem); line-height: 1.1; }
.qr-dialog-destination { max-width: 100%; color: var(--teal); font-family: "HZ Mono", ui-monospace, monospace; font-size: clamp(.76rem, 1.7vw, .95rem); overflow-wrap: anywhere; }
.qr-dialog-destination:hover { color: var(--lime); text-decoration: underline; text-underline-offset: 3px; }
.page-footer { margin-top: 50px; padding: 28px 0 42px; border-top: 1px solid #1e2938; color: var(--soft); font-size: .82rem; }
.page-footer .wrap { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.page-footer span:first-child { color: var(--ink); font-weight: 750; }
.page-footer a { margin-left: auto; }
@media (max-width: 900px) { .qr-grid-sites { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 650px) { .wrap { width: min(100% - 32px, 480px); } .intro { padding-top: 58px; } .group-heading { display: block; } .group-heading > p { max-width: none; margin-top: 9px; text-align: left; } .qr-grid-sites, .qr-grid-contacts { grid-template-columns: 1fr; } .qr-preview { width: min(100%, 236px); } .card-copy { padding-top: 12px; } .page-footer a { margin-left: 0; } }
@media (max-width: 480px) { .brand-signature-light { display: none; } .brand-symbol { display: block; } }
@media print {
  @page { size: A4 portrait; margin: 10mm; }
  :root { color-scheme: light; --bg: #fff; --ink: #111; --muted: #333; --soft: #444; --line: #bbb; --teal: #111; --lime: #111; }
  body { color: #111; background: #fff; font-size: 9pt; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .wrap { width: 100%; max-width: none; }
  .topbar { background: none; border: 0; }
  .topbar-inner { min-height: 0; padding-bottom: 5mm; }
  .brand-signature-light, .brand-symbol, .back-link, .skip, .card-actions, .page-footer, .qr-dialog, .qr-expand { display: none !important; }
  .brand-signature-print { display: block !important; }
  .intro { padding: 0 0 5mm; }
  .intro h1 { margin: 2mm 0; font-size: 24pt; line-height: 1; }
  .intro h1 em { color: #111; }
  .intro > p:last-child { font-size: 8pt; }
  .group { margin: 0 0 5mm; }
  .group-heading { margin: 0 0 3mm; padding: 0 0 2mm; }
  .group-heading h2 { margin: 1mm 0 0; font-size: 15pt; }
  .group-heading > p { display: none; }
  .qr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3mm; }
  .qr-card, .qr-card-web { display: flex; flex-direction: row; align-items: center; gap: 4mm; min-height: 52mm; padding: 3mm; border: 1px solid #bbb; border-radius: 2mm; background: #fff; box-shadow: none; break-inside: avoid; }
  .qr-preview { flex: 0 0 42mm; width: 42mm; }
  .qr-frame { width: 42mm; padding: 1mm; border: 0; }
  .card-copy { padding: 0; }
  .card-type { font-size: 7pt; }
  .card-copy h3 { margin: 1mm 0; font-size: 13pt; }
  .card-description { margin: 0 0 2mm; font-size: 8pt; }
  .card-destination { margin: 0; }
  .card-destination a { color: #111; font-size: 8pt; }
  .card-destination span { color: #333; font-size: 6pt; }
}