/* Главная doberman.ru по брендбуку (brand/book) и макету brand/mock/home-v2.png (1672x941).
   Размеры в точках макета: --u = одна точка, композиция вписывается в экран и по ширине, и по высоте. */

/* заголовки: узкий и очень жирный, ближайший свободный к шрифту брендбука */
@font-face { font-family: 'Fira XC'; src: url('/fonts/firaxc-900-cyr.woff2') format('woff2'); font-weight: 900; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Fira XC'; src: url('/fonts/firaxc-900-lat.woff2') format('woff2'); font-weight: 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Manrope'; src: url('/fonts/manrope-cyr.woff2') format('woff2'); font-weight: 200 800; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Manrope'; src: url('/fonts/manrope-lat.woff2') format('woff2'); font-weight: 200 800; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Clear Sans Logo'; src: url('/fonts/clearsans-logo.woff2') format('woff2'); font-weight: 700; font-display: block; }

/* палитра брендбука */
:root {
    --u: min(calc(100vw / 1672), calc(100vh / 941));
    --black: #080808;
    --graphite: #141414;
    --steel: #2a2a2a;
    --white: #f4f4f4;
    --red: #ff2b2b;
    --muted: #9a9a9a;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--black); color: var(--white); }
body { font-family: 'Manrope', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; -webkit-font-smoothing: antialiased; touch-action: manipulation; }
html.modal-open { overflow: hidden; }

.hero {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    background-color: var(--black);
    background-image:
        linear-gradient(90deg, rgba(8,8,8,.7) 0%, rgba(8,8,8,.42) 36%, rgba(8,8,8,0) 58%),
        linear-gradient(0deg, rgba(8,8,8,.55) 0%, rgba(8,8,8,0) 30%),
        url('/img/hero-dogs.jpg');
    background-image:
        linear-gradient(90deg, rgba(8,8,8,.7) 0%, rgba(8,8,8,.42) 36%, rgba(8,8,8,0) 58%),
        linear-gradient(0deg, rgba(8,8,8,.55) 0%, rgba(8,8,8,0) 30%),
        image-set(url('/img/hero-dogs.webp') type('image/webp'), url('/img/hero-dogs.jpg') type('image/jpeg'));
    background-repeat: no-repeat;
    background-size: cover;
    background-position: right top;
}
/* красная полоса света между колоннами, как на макете; чистого кадра с подсветкой пока нет */
.hero__glow {
    position: absolute; top: 0; right: calc(var(--u) * 268); width: calc(var(--u) * 26); height: 72%;
    background: linear-gradient(180deg, rgba(255,43,43,.0) 0%, rgba(255,43,43,.85) 18%, rgba(255,43,43,.55) 70%, rgba(255,43,43,0) 100%);
    filter: blur(calc(var(--u) * 6)); mix-blend-mode: screen; pointer-events: none;
}

/* шапка */
.top { position: relative; z-index: 2; display: flex; align-items: center; height: calc(var(--u) * 120); padding: 0 calc(var(--u) * 92) 0 calc(var(--u) * 92); }
.logo { display: flex; align-items: center; gap: calc(var(--u) * 20); color: var(--white); text-decoration: none; }
.logo__mark { width: calc(var(--u) * 64); height: calc(var(--u) * 64); display: block; }
.logo__word { font-family: 'Clear Sans Logo', 'Manrope', sans-serif; font-weight: 700; font-size: calc(var(--u) * 36); line-height: 1; letter-spacing: -0.005em; }
.logo__dot { color: var(--red); }
.top__sep { width: 1px; height: calc(var(--u) * 34); margin: 0 calc(var(--u) * 36); background: rgba(255,43,43,.7); }
.top__tag { font-size: calc(var(--u) * 11.5); letter-spacing: .32em; text-transform: uppercase; color: var(--white); opacity: .85; font-weight: 500; }
.top__login {
    margin-left: auto; display: flex; align-items: center; gap: calc(var(--u) * 12);
    background: none; border: 0; padding: calc(var(--u) * 10) 0; cursor: pointer;
    color: var(--white); font: inherit; font-size: calc(var(--u) * 17); font-weight: 500;
}
.top__login svg { width: calc(var(--u) * 20); height: calc(var(--u) * 20); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.top__login:hover { color: var(--red); }

/* первый экран */
.hero__body { position: relative; z-index: 1; padding: calc(var(--u) * 26) calc(var(--u) * 106) 0 calc(var(--u) * 104); }
.eyebrow {
    position: relative; display: flex; align-items: center; gap: calc(var(--u) * 32);
    margin: 0; font-size: calc(var(--u) * 13.5); line-height: 1; letter-spacing: .32em; text-transform: uppercase; color: var(--white); font-weight: 500;
}
.eyebrow::before { content: ''; position: absolute; left: calc(var(--u) * -29); top: 50%; width: 2px; height: calc(var(--u) * 26); margin-top: calc(var(--u) * -13); background: var(--red); }
.eyebrow::after { content: ''; width: calc(var(--u) * 70); height: 1px; background: var(--red); }

/* у «Й» высокий надстрочник: без запаса он наезжает на надпись сверху */
.title { margin: calc(var(--u) * 44) 0 0; font-family: 'Fira XC', 'Arial Narrow', sans-serif; font-weight: 900; text-transform: uppercase; line-height: 1; }
.title__white, .title__red { display: block; font-size: calc(var(--u) * 158); line-height: calc(var(--u) * 140); letter-spacing: -0.005em; }
.title__white { color: var(--white); }
.title__red {
    background: linear-gradient(180deg, #ff3030 0%, #ff2222 45%, #c20d10 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--red);
}

.lead { margin: calc(var(--u) * 10) 0 0; font-size: calc(var(--u) * 27); line-height: calc(var(--u) * 35); color: var(--white); font-weight: 400; max-width: calc(var(--u) * 640); }

.check { display: flex; width: calc(var(--u) * 718); height: calc(var(--u) * 73); margin-top: calc(var(--u) * 36); border: 1px solid var(--steel); border-radius: calc(var(--u) * 6); overflow: hidden; background: rgba(8,8,8,.82); }
.check:focus-within { border-color: rgba(255,43,43,.6); box-shadow: 0 0 0 3px rgba(255,43,43,.12); }
.check__field { flex: 1; min-width: 0; display: flex; align-items: center; gap: calc(var(--u) * 26); padding-left: calc(var(--u) * 26); cursor: text; }
.check__ico { flex: none; width: calc(var(--u) * 30); height: calc(var(--u) * 30); fill: none; stroke: var(--white); stroke-width: 1.4; }
.check__input { flex: 1; min-width: 0; height: 100%; border: 0; outline: none; box-shadow: none; background: transparent; color: var(--white); font: inherit; font-size: max(16px, calc(var(--u) * 21)); }
.check__input::placeholder { color: #8b8b8b; opacity: 1; }
.check__go {
    flex: none; width: calc(var(--u) * 280); display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 14);
    border: 0; cursor: pointer; color: #fff; font: inherit; font-size: calc(var(--u) * 19); font-weight: 600; letter-spacing: .02em; text-transform: uppercase;
    background: linear-gradient(180deg, #ef1d1f 0%, #d9161a 55%, #c10f11 100%);
}
.check__go:hover { filter: brightness(1.08); }
.check__go svg { width: calc(var(--u) * 24); height: calc(var(--u) * 24); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.check__note { margin: calc(var(--u) * 12) 0 0; color: var(--muted); font-size: max(14px, calc(var(--u) * 16)); }
.check__note[hidden] { display: none; }

/* пример отчёта */
.demo {
    display: grid; grid-template-columns: auto auto 1fr 1fr 1fr; align-items: center;
    margin-top: calc(var(--u) * 34); padding: calc(var(--u) * 24) calc(var(--u) * 30);
    width: calc(var(--u) * 1460); border: 1px solid var(--steel); border-radius: calc(var(--u) * 8);
    background: rgba(8,8,8,.72); backdrop-filter: blur(6px);
}
.demo__score { position: relative; width: calc(var(--u) * 126); height: calc(var(--u) * 126); }
.demo__ring { width: 100%; height: 100%; transform: rotate(-90deg); }
.demo__track, .demo__arc { fill: none; stroke-width: 7; }
.demo__track { stroke: var(--steel); }
.demo__arc { stroke: var(--red); stroke-linecap: round; stroke-dasharray: 235 327; }
.demo__num { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: calc(var(--u) * 38); font-weight: 700; line-height: 1; }
.demo__num small { margin-top: calc(var(--u) * 6); font-size: calc(var(--u) * 13); font-weight: 400; color: var(--muted); }
.demo__sum { display: flex; flex-direction: column; gap: calc(var(--u) * 10); padding: 0 calc(var(--u) * 50) 0 calc(var(--u) * 30); margin-left: calc(var(--u) * 28); border-left: 1px solid var(--steel); }
.demo__head { font-size: calc(var(--u) * 19); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.demo__sub { font-size: calc(var(--u) * 16); line-height: 1.35; color: var(--muted); }
.demo__item { display: grid; grid-template-columns: auto 1fr; column-gap: calc(var(--u) * 22); row-gap: calc(var(--u) * 14); align-items: center; padding: 0 calc(var(--u) * 26); border-left: 1px solid var(--steel); }
.demo__item svg { grid-row: span 1; width: calc(var(--u) * 42); height: calc(var(--u) * 42); fill: none; stroke: var(--white); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.demo__item svg .fill { fill: var(--white); stroke: none; }
.demo__txt { font-size: calc(var(--u) * 18); line-height: 1.35; }
.demo__tag {
    grid-column: 2; justify-self: start; padding: calc(var(--u) * 5) calc(var(--u) * 14);
    border: 1px solid var(--red); border-radius: calc(var(--u) * 3); color: var(--red);
    font-size: calc(var(--u) * 13); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
}
.demo__tag--risk { border-color: #f0b429; color: #f0b429; }

/* окно входа */
.modal { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 16px; }
.modal[hidden] { display: none; }
.modal__shade { position: absolute; inset: 0; background: rgba(0,0,0,.72); opacity: 0; transition: opacity .18s; }
.modal__box {
    position: relative; width: 100%; max-width: 380px; padding: 32px 28px 28px;
    background: var(--graphite); border: 1px solid var(--steel); border-top: 2px solid var(--red); border-radius: 8px;
    opacity: 0; transform: translateY(8px); transition: opacity .18s, transform .18s;
}
.modal.is-in .modal__shade { opacity: 1; }
.modal.is-in .modal__box { opacity: 1; transform: none; }
.modal__x { position: absolute; top: 8px; right: 10px; width: 36px; height: 36px; border: 0; background: none; color: var(--muted); font-size: 26px; line-height: 1; cursor: pointer; }
.modal__x:hover { color: var(--white); }
.modal__mark { display: block; width: 40px; height: 40px; margin-bottom: 14px; }
.modal__title { margin: 0 0 22px; font-family: 'Fira XC', 'Arial Narrow', sans-serif; font-weight: 900; font-size: 30px; letter-spacing: .02em; text-transform: uppercase; }
.fld { display: block; margin-bottom: 16px; }
.fld__label { display: block; margin-bottom: 6px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.fld__input { width: 100%; height: 48px; padding: 0 14px; border: 1px solid var(--steel); border-radius: 6px; background: var(--black); color: var(--white); font: inherit; font-size: 16px; outline: none; box-shadow: none; }
.fld__input:focus { border-color: rgba(255,43,43,.7); box-shadow: 0 0 0 3px rgba(255,43,43,.15); }
.modal__err { margin: 2px 0 12px; color: var(--red); font-size: 14px; }
.modal__err[hidden] { display: none; }
.modal__go { width: 100%; height: 50px; margin-top: 6px; border: 0; border-radius: 6px; cursor: pointer; color: #fff; font: inherit; font-size: 15px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; background: var(--red); }
.modal__go:hover { filter: brightness(1.08); }
.modal__go[disabled] { opacity: .6; cursor: wait; }

/* телефон: макета нет, столбик, фото сверху за текстом */
@media (max-width: 760px) {
    :root { --u: calc(100vw / 640); }
    .hero {
        background-size: auto 60vh; background-position: 72% top;
        background-image: linear-gradient(180deg, rgba(8,8,8,.25) 0%, rgba(8,8,8,.15) 30%, rgba(8,8,8,.9) 50vh, var(--black) 60vh), url('/img/hero-dogs.jpg');
    }
    .hero__glow { display: none; }
    .top { height: 64px; padding: 0 16px; }
    .logo { gap: 10px; }
    .logo__mark { width: 32px; height: 32px; }
    .logo__word { font-size: 22px; }
    .top__sep, .top__tag { display: none; }
    .top__login { font-size: 16px; gap: 8px; }
    .top__login svg { width: 18px; height: 18px; }
    .hero__body { padding: 34vh 16px 40px 28px; }
    .eyebrow { font-size: 11px; gap: 14px; }
    .eyebrow::before { left: -14px; height: 18px; margin-top: -9px; }
    .eyebrow::after { width: 40px; }
    .title { margin-top: 22px; }
    .title__white, .title__red { font-size: 70px; line-height: 62px; }
    .lead { font-size: 17px; line-height: 24px; margin-top: 14px; }
    .br-wide { display: none; }
    .check { flex-direction: column; width: 100%; height: auto; margin-top: 22px; border-radius: 6px; }
    /* в столбце flex: 1 означает высоту ноль - поле сплющивалось */
    .check__field { flex: 0 0 auto; height: 56px; padding-left: 16px; gap: 12px; }
    .check__ico { width: 22px; height: 22px; }
    .check__go { width: 100%; height: 54px; font-size: 16px; }
    .check__go svg { width: 20px; height: 20px; }
    .demo { grid-template-columns: auto 1fr; width: 100%; padding: 18px 16px; margin-top: 26px; row-gap: 16px; }
    .demo__score { width: 84px; height: 84px; }
    .demo__num { font-size: 26px; }
    .demo__num small { font-size: 11px; }
    .demo__sum { border-left: 0; margin-left: 0; padding: 0 0 0 16px; }
    .demo__head { font-size: 15px; }
    .demo__sub { font-size: 13px; }
    .demo__item { grid-column: 1 / -1; padding: 14px 0 0; border-left: 0; border-top: 1px solid var(--steel); column-gap: 14px; row-gap: 8px; }
    .demo__item svg { width: 30px; height: 30px; }
    .demo__txt { font-size: 15px; }
    .demo__txt br { display: none; }
    .demo__tag { font-size: 11px; padding: 3px 10px; }
}