/* Обкладинка головної сторінки. */
body.home-page #hero-section {
    box-sizing: border-box;
    isolation: isolate;
    width: 100%;
    min-height: clamp(650px, calc(100svh - 68px), 880px);
    margin: 0;
    padding: 100px 24px 130px !important;
    display: flex;
    align-items: center;
    justify-content: center !important;
    overflow: hidden;
    border-bottom: 1px solid #71303a;
    background: linear-gradient(180deg, #06060815, #06060830 40%, #060608 100%), linear-gradient(90deg, #060608d9, #0606083d 35%, #16090c55 65%, #060608d9), url('images/characters-bg.png') center 38% / cover no-repeat !important;
}
body.home-page #hero-section::before {
    content: '';
    position: absolute;
    inset: 28px 32px;
    z-index: 4;
    border: 1px solid #d0a16b24;
    border-block-color: #d0a16b40;
    pointer-events: none;
}
body.home-page #hero-section::after {
    z-index: 0;
    background: radial-gradient(ellipse at 50% 45%, #960d2220, transparent 55%);
}
body.home-page #hero-section .hero-content {
    position: relative;
    z-index: 5;
    width: min(680px, 49%);
    max-width: 680px;
    margin: 0 auto !important;
    text-align: center !important;
    padding: 24px 0;
}
body.home-page #hero-section .hero-content::before {
    content: '';
    position: absolute;
    inset: -60px -65px;
    z-index: -1;
    background: radial-gradient(ellipse, #080609e8 18%, #0a060b9c 45%, transparent 72%);
    pointer-events: none;
}
body.home-page #hero-section .hero-eyebrow {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 18px;
    margin-bottom: 28px;
    color: #dfbd8d;
    font: 600 .75rem/1.5 Arial, sans-serif;
    letter-spacing: .2em;
    text-transform: uppercase;
}
body.home-page #hero-section .hero-eyebrow::before,
body.home-page #hero-section .hero-eyebrow::after { content: ''; width: 32px; height: 1px; background: #b58b5c80; }
body.home-page #hero-section h1 {
    display: block;
    max-width: none;
    margin: 0;
    font-family: Georgia, 'Spectral', serif !important;
    font-size: clamp(3.6rem, 6.6vw, 7.1rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.035em !important;
    color: #f3ede4;
    text-shadow: 0 8px 35px #000b;
    animation: none !important;
    transform: none !important;
}
body.home-page #hero-section h1 span { color: #cc3547; text-shadow: 0 0 36px #a50d244a; animation: none !important; }
body.home-page #hero-section h1:hover span { color: #ec5969; }
body.home-page #hero-section .blood-drip { display: none; }
body.home-page #hero-section p {
    max-width: 480px;
    margin: 24px auto 0 !important;
    color: #beb7b4;
    font-size: clamp(1rem, 1.1vw, 1.2rem);
    line-height: 1.8;
    font-style: normal;
    text-wrap: balance;
}
body.home-page #hero-section .hero-tags { justify-content: center !important; gap: 14px; margin-top: 24px; }
body.home-page #hero-section .hero-tags span { padding: 0; border: 0; background: none; border-radius: 0; color: #a7907b; font: 500 .75rem/1.5 Arial, sans-serif; letter-spacing: .06em; text-transform: none; }
body.home-page #hero-section .hero-tags span + span { padding-left: 14px; border-left: 1px solid #76614c70; }
body.home-page #hero-section .hero-actions { justify-content: center !important; gap: 12px; margin-top: 34px; }
body.home-page #hero-section .hero-actions .btn {
    box-sizing: border-box;
    min-height: 50px;
    padding: 15px 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 7px !important;
    font-size: .875rem;
    line-height: 1.4;
    letter-spacing: .015em;
    text-decoration: none;
    transition: background .25s, border-color .25s, box-shadow .25s;
}
body.home-page #hero-section .btn-primary { border: 1px solid #e7576680; background: linear-gradient(135deg, #bd2037, #800c21); color: #fff4eb; box-shadow: 0 8px 32px #930e2740; }
body.home-page #hero-section .btn-primary:hover { background: linear-gradient(135deg, #d63148, #a0122a); box-shadow: 0 8px 36px #bb15365c; }
body.home-page #hero-section .btn-secondary { border: 1px solid #b7986a65; background: #171113aa; color: #e0ccb0; box-shadow: none; }
body.home-page #hero-section .btn-secondary:hover { background: #352021; border-color: #ddbc83; }
body.home-page #hero-section .hero-character-container {
    position: absolute;
    z-index: 2;
    top: auto;
    bottom: 0;
    width: 29%;
    height: 86%;
    max-height: 770px;
    opacity: 1;
    transform: none !important;
    transition: filter .4s;
}
body.home-page #hero-section .hero-character-container.left { left: 2%; }
body.home-page #hero-section .hero-character-container.right { right: 0; width: 34%; height: 94%; max-height: 825px; }
body.home-page #hero-section .hero-character-container img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: contain;
    object-position: center bottom;
    filter: saturate(.72) brightness(.82) drop-shadow(0 0 30px #0009);
    mask-image: linear-gradient(#000 65%, #000b 82%, transparent 100%);
}
body.home-page #hero-section .hero-character-container:hover .hover-img { filter: saturate(.8) brightness(.85) drop-shadow(0 0 24px #b1243650); }
body.home-page #hero-section .hero-character-caption {
    position: absolute;
    bottom: 64px;
    left: 50%;
    transform: translateX(-50%);
    color: #d7cabc;
    text-align: center;
    font-size: 1.1rem;
    letter-spacing: .1em;
    pointer-events: none;
}
body.home-page #hero-section .hero-character-caption small { display: block; margin-bottom: 8px; color: #b89a76; font: 500 .75rem/1.4 Arial, sans-serif; letter-spacing: .16em; text-transform: uppercase; }
body.home-page #hero-section .fog-container { height: 180px; opacity: .18; z-index: 3; }
body.home-page #hero-section .lightning-flash,
body.home-page #hero-section .lightning-bolt { display: none; }
@media (max-width: 1100px) {
    body.home-page #hero-section { min-height: 690px; padding-inline: 20px !important; }
    body.home-page #hero-section .hero-content { width: min(600px, 70%); }
    body.home-page #hero-section .hero-character-container.left { left: -6%; width: 35%; }
    body.home-page #hero-section .hero-character-container.right { right: -9%; width: 43%; }
    body.home-page #hero-section .hero-character-container { opacity: .68; }
}
@media (max-width: 700px) {
    body.home-page #hero-section { min-height: 810px; padding: 70px 24px 330px !important; align-items: flex-start; }
    body.home-page #hero-section::before { inset: 16px; }
    body.home-page #hero-section .hero-content { width: 100%; padding: 0; }
    body.home-page #hero-section .hero-content::before { inset: -30px -20px; }
    body.home-page #hero-section h1 { font-size: clamp(3rem, 12vw, 5rem); }
    body.home-page #hero-section .hero-eyebrow { margin-bottom: 20px; gap: 10px; font-size: .75rem; letter-spacing: .12em; }
    body.home-page #hero-section p { font-size: 1rem; margin-top: 20px !important; }
    body.home-page #hero-section .hero-actions { margin-top: 26px; gap: 10px; }
    body.home-page #hero-section .hero-actions .btn { padding: 13px 15px; font-size: .8125rem; }
    body.home-page #hero-section .hero-character-container { height: 350px; width: 55%; opacity: .84; }
    body.home-page #hero-section .hero-character-container.left { left: 0; width: 55%; }
    body.home-page #hero-section .hero-character-container.right { right: -7%; height: 375px; width: 67%; }
    body.home-page #hero-section .hero-character-caption { bottom: 40px; font-size: 1rem; }
    body.home-page #hero-section .hero-character-caption small { font-size: .75rem; }
    body.home-page #hero-section .fog-container { height: 90px; }
}
@media (prefers-reduced-motion: reduce) {
    body.home-page #hero-section *, body.home-page #hero-section *::before { animation: none !important; transition: none !important; }
}