/* Публічна сторінка-заглушка сайту ЖК. Окрема візуальна система від адмінки
 * й кабінетів: своя палітра (зелений/кремовий) і свої шрифти — так у макеті
 * «OkLand Сайт-заглушка», і змішувати її з інтерфейсною темою не треба.
 *
 * Шрифти self-hosted: макет вантажив їх із Google, а CSP забороняє зовнішні
 * ресурси. Узято лише кирилицю й латиницю потрібних накреслень — грецька та
 * вʼєтнамська підмножини не завантажуються.
 */

/* cyrillic */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/IBMPlexMono-500-cyrillic.42375444a220.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/IBMPlexMono-500-latin.b1c8a895f5fd.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;
}
/* cyrillic */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/IBMPlexSans-400-cyrillic.70800b98b5e7.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/IBMPlexSans-400-latin.b2c9031d9fd6.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;
}
/* cyrillic */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/IBMPlexSans-500-cyrillic.70800b98b5e7.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/IBMPlexSans-500-latin.b2c9031d9fd6.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;
}
/* cyrillic */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/IBMPlexSans-600-cyrillic.70800b98b5e7.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/IBMPlexSans-600-latin.b2c9031d9fd6.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;
}
/* cyrillic */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/IBMPlexSans-700-cyrillic.70800b98b5e7.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/IBMPlexSans-700-latin.b2c9031d9fd6.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;
}

html, body { margin: 0; padding: 0; background: #F5F4F0; }
* { box-sizing: border-box; }
body { font-family: "IBM Plex Sans", system-ui, sans-serif; }
a { color: #1F5D4C; text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: #174A3C; }

@keyframes drift {
    0% { transform: translate(0, 0); }
    50% { transform: translate(-14px, 10px); }
    100% { transform: translate(0, 0); }
}
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
}

/* ── Сторінка ──────────────────────────────────────────────────────────────*/
.page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    color: #1D211F;
    overflow: hidden;
    position: relative;
}

/* Тонована сітка й два розмиті кола, що повільно дрейфують. */
.deco { position: absolute; }
.deco--grid {
    inset: 0;
    background-image: repeating-linear-gradient(135deg, #EDEBE4 0 2px, transparent 2px 26px);
    opacity: .6;
}
.deco--blob-green {
    width: 640px;
    height: 640px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(31, 93, 76, .10), transparent 70%);
    top: -220px;
    right: -160px;
    animation: drift 16s ease-in-out infinite;
}
.deco--blob-clay {
    width: 520px;
    height: 520px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(138, 90, 43, .09), transparent 70%);
    bottom: -200px;
    left: -140px;
    animation: drift 20s ease-in-out infinite reverse;
}

.head {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: clamp(20px, 5vw, 32px) clamp(16px, 6vw, 64px);
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand svg { flex: none; }
.brand__name { font-size: clamp(17px, 4.4vw, 19px); font-weight: 600; letter-spacing: -0.01em; }
.head__phone {
    font-size: clamp(13px, 3.4vw, 14px);
    font-weight: 500;
    color: #3B4340;
    white-space: nowrap;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
}
.head__dot { width: 8px; height: 8px; flex: none; border-radius: 999px; background: #1F5D4C; }

.main {
    position: relative;
    z-index: 1;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: clamp(28px, 8vw, 40px) clamp(18px, 6vw, 24px);
    gap: clamp(20px, 5vw, 26px);
}
.badge {
    animation: fadeUp .5s ease-out both;
    font-family: "IBM Plex Mono", monospace;
    font-size: clamp(9.5px, 2.8vw, 13px);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #8A5A2B;
    background: #F4E8E2;
    border: 1px solid #E6DCD2;
    border-radius: 999px;
    padding: 6px clamp(10px, 3vw, 16px);
    text-align: center;
    white-space: nowrap;
}
/* Вірш — головний блок сторінки, тож він і є `h1`; вирівняний ліворуч
 * усередині центрованої колонки, як у макеті. */
.verse {
    animation: fadeUp .6s .05s ease-out both;
    margin: 0;
    font-size: clamp(9px, 2.7vw, 17px);
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.85;
    max-width: 480px;
    width: 100%;
    /* Рядок вірша не переноситься: розмір підбирає `clamp` під ширину екрана,
     * бо перенесення посеред рядка зламало б саму віршовану форму. */
    white-space: nowrap;
    font-family: "IBM Plex Mono", monospace;
    color: #3B4340;
    text-align: center;
}
.lead {
    animation: fadeUp .6s .1s ease-out both;
    margin: 0;
    font-size: clamp(13.5px, 3.6vw, 15px);
    line-height: 1.6;
    color: #5B625F;
    max-width: 480px;
}
.actions {
    animation: fadeUp .6s .15s ease-out both;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 6px;
    width: 100%;
}
.btn {
    text-decoration: none;
    height: 50px;
    padding: 0 26px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 600;
}
.btn--solid { background: #1F5D4C; color: #fff; }
.btn--ghost { background: #fff; color: #1D211F; border: 1px solid #CBC5B9; }
.btn:hover { text-decoration: none; }

.foot {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: center;
    padding: 26px clamp(16px, 6vw, 24px) 34px;
    font-size: clamp(11.5px, 3vw, 13px);
    color: #5B625F;
    text-align: center;
}

/* Рух — окраса, не сенс: у кого ввімкнено «менше руху», анімації стоять. */
@media (prefers-reduced-motion: reduce) {
    .deco--blob-green,
    .deco--blob-clay,
    .badge,
    .verse,
    .lead,
    .actions { animation: none; }
}

/* ── Сторінка 404 ──────────────────────────────────────────────────────────
 * Те саме оформлення, що й головна сайту: одне коло замість двох, монокод
 * «404» над заголовком, дві однакові за вагою кнопки.
 */
.deco--blob-404 {
    width: 560px;
    height: 560px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(31, 93, 76, .10), transparent 70%);
    top: -200px;
    right: -140px;
    animation: drift 16s ease-in-out infinite;
}
.head--404 { justify-content: flex-start; }
.brand--link { text-decoration: none; color: #1D211F; }
.brand--link:hover { text-decoration: none; color: #1D211F; }
.main--404 { gap: 16px; }
.code404 {
    font-family: "IBM Plex Mono", monospace;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .08em;
    color: #8A5A2B;
}
.title404 {
    margin: 0;
    font-size: clamp(22px, 5.5vw, 28px);
    font-weight: 600;
    letter-spacing: -0.01em;
}
.lead404 {
    margin: 0;
    font-size: clamp(13.5px, 3.6vw, 15px);
    color: #5B625F;
    max-width: 420px;
    line-height: 1.55;
}
.actions--404 { margin-top: 8px; }
/* Обидві кнопки однакової ваги — жодна не «правильніша» за іншу. */
.btn--wide { justify-content: center; flex: 1 1 200px; }

@media (prefers-reduced-motion: reduce) {
    .deco--blob-404 { animation: none; }
}