@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/manrope-cyrillic-v20.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/manrope-latin-v20.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Swimlike contact card */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: #1b1b1b; color: #fff; }
body { margin: 0; font: 15px/1.5 Manrope, Arial, Helvetica, sans-serif; -webkit-font-smoothing: antialiased; }
main { max-width: 500px; margin: 0 auto; text-align: center; }
header { padding: 40px 15px; }
.avatar { display: block; width: 138px; height: 138px; margin: 0 auto; border-radius: 50%; object-fit: cover; }
h1 { margin: 15px 0 11px; font-size: 22px; line-height: 1.35; overflow-wrap: break-word; }
p { margin: 0; }
p + p { margin-top: 22px; }
.buttons { list-style: none; padding: 0 15px 24px; margin: 0; }
.buttons li + li { margin-top: 15px; }
.button { display: flex; align-items: center; gap: 6px; min-height: 58px; padding: 14px 18px; border-radius: 15px; color: #fff; font-weight: 700; text-decoration: none; background: linear-gradient(hsl(var(--bg-hue), var(--bg-saturation), var(--bg-lightness)), var(--bg-to)); box-shadow: 0 4px 0 var(--bg-shadow), inset 0 -1px 1px rgb(255 255 255 / 15%); }
.button svg { display: block; flex: 0 0 28px; width: 28px; height: 28px; fill: currentColor; }
.button span { flex: 1; min-width: 0; overflow-wrap: break-word; }
.button:focus-visible { outline: 3px solid #fff; outline-offset: 5px; }
@media (hover: hover) { .button:hover { filter: brightness(1.12); } }
.button:active { transform: translateY(2px); }

/* Local open-water background; decorative, with a readable dark overlay. */
body { position: relative; isolation: isolate; min-height: 100vh; min-height: 100svh; }
body::before, body::after { content: ""; position: fixed; pointer-events: none; }
body::before { z-index: -2; inset: -10px; background: #153846 url("../img/open-water-desktop-20260917.webp") center / cover no-repeat; filter: blur(4px); }
body::after { z-index: -1; inset: 0; background: linear-gradient(180deg, rgb(3 17 26 / 68%), rgb(3 17 26 / 42%) 50%, rgb(3 17 26 / 74%)), radial-gradient(ellipse at center, rgb(3 17 26 / 42%), transparent 75%); }
header { text-shadow: 0 1px 8px rgb(0 0 0 / 65%); }
@media (max-width: 600px) { body::before { background-image: url("../img/open-water-mobile-20260917.webp"); background-position: 64% center; } }