/* Shared homepage/city hero. Existing copy, images and contact targets are retained. */
.hero-modern {
    position: relative;
    isolation: isolate;
    color: #f7fbf8;
    background: radial-gradient(ellipse at 88% 12%, #74d6a225, transparent 52%), linear-gradient(115deg, #0d241b, #173a2b);
    border-bottom: 1px solid #ffffff12;
}
.hero-modern::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: linear-gradient(#c4f7dc07 1px, transparent 1px), linear-gradient(90deg, #c4f7dc07 1px, transparent 1px);
    background-size: 76px 76px;
    mask-image: linear-gradient(90deg, transparent 20%, #000);
    pointer-events: none;
}
.hero-modern .hero-layout {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
    gap: clamp(36px, 5vw, 72px);
    padding-block: 58px 70px;
}
.hero-modern .hero-copy { position: relative; z-index: 1; }
.hero-modern .eyebrow {
    display: inline-flex;
    max-width: 100%;
    gap: 9px;
    margin-bottom: 25px;
    padding: 8px 12px;
    border: 1px solid #a9edc731;
    border-radius: 7px;
    background: #e1ffed08;
    color: #d9eee1;
    font-size: 12px;
    line-height: 1.5;
    letter-spacing: .075em;
}
.hero-modern .status-dot { width: 6px; height: 6px; background: #88e6b7; box-shadow: 0 0 0 4px #88e6b712; }
.hero-modern h1 {
    max-width: 100%;
    color: #f5faf7;
    font-size: clamp(3rem, 4.85vw, 4.6rem);
    font-weight: 650;
    line-height: 1.045;
    letter-spacing: -.052em;
    text-wrap: balance;
}
.hero-modern.hero--city h1 { font-size: clamp(2.65rem, 4.05vw, 3.8rem); }
.hero-modern h1 span { color: #8ce4b3; }
.hero-modern .hero-description { max-width: 490px; margin-top: 24px; font-size: 19px; line-height: 1.7; color: #c7d9ce; }
.hero-modern .cta-group { align-items: center; flex-direction: row; gap: 12px; margin-top: 29px; }
.hero-modern .cta-group .btn { min-height: 58px; padding: 13px 19px; gap: 10px; border-radius: 10px; font-size: 16px; font-weight: 650; }
.hero-modern .cta-glass-icon { width: 29px; height: 29px; flex-basis: 29px; }
.hero-modern .cta-group .btn-primary {
    background: linear-gradient(135deg, #b4f4d2, #7ce0ac 65%, #67ce99);
    border-color: #c8ffe0a1;
    color: #102f20;
    box-shadow: inset 0 1px 0 #ffffffa0, 0 8px 24px #031e152e;
}
.hero-modern .cta-group .btn-primary:hover { background: linear-gradient(135deg, #cefbe2, #96edbe); transform: translateY(-2px); }
.hero-modern .cta-group .btn-secondary { background: #ffffff07; border-color: #d7f6e23d; color: #f2faf5; box-shadow: none; }
.hero-modern .cta-group .btn-secondary:hover { background: #ffffff12; border-color: #c9f2db75; }
.hero-modern .btn:focus-visible { outline: 3px solid #e3ffef; outline-offset: 5px; }
.hero-modern .hero-assurances { margin-top: 22px; gap: 13px 20px; color: #c5dacf; font-size: 14px; }
.hero-modern .hero-assurances span { white-space: nowrap; }
.hero-modern .hero-assurances span::before { color: #8ce4b3; }
.hero-modern .hero-scene { position: relative; min-width: 0; align-self: stretch; padding: 9px 0 29px; }
.hero-modern .hero-scene::before {
    content: "";
    position: absolute;
    inset: 25px -9px 40px 18px;
    border: 1px solid #a4eacb25;
    border-radius: 26px;
    background: linear-gradient(135deg, #8ce4b309, #8ce4b316);
    transform: rotate(3deg);
    pointer-events: none;
}
.hero-modern .hero-visual { min-height: 475px; height: 100%; border-radius: 24px; border: 1px solid #d6ffe12b; background: #214333; box-shadow: 0 24px 60px #00130e4d; }
.hero-modern .hero-visual img { opacity: 1; object-position: 50% 48%; }
.hero-modern .hero-visual::after { inset: 0; background: linear-gradient(180deg, #0624190c 30%, #08291d66); }
.hero-modern .visual-index { top: 20px; left: 20px; padding: 6px 10px; border: 1px solid #ffffff35; border-radius: 5px; background: #0e281bc9; color: #e0f3e7; font-size: 11px; letter-spacing: .15em; }
.hero-modern .visual-caption {
    left: -24px;
    right: 30px;
    bottom: 0;
    gap: 14px;
    padding: 18px 20px;
    border: 1px solid #fff;
    border-radius: 15px;
    background: linear-gradient(120deg, #fff, #e8f4ec);
    box-shadow: 0 16px 38px #03180e30;
    color: #163b29;
}
.hero-modern .visual-caption-mark { display: grid; width: 43px; height: 43px; border-radius: 10px; border: 1px solid #bddac8; color: #23714e; background: #dcefe3; }
.hero-modern .visual-caption strong { color: #173d29; font-size: 16px; font-weight: 650; line-height: 1.4; }
.hero-modern .visual-caption div > span { margin-top: 3px; color: #50695a; font-size: 14px; line-height: 1.5; }
@media (max-width: 1100px) and (min-width: 901px) {
    .hero-modern .hero-layout { gap: 32px; padding-block: 50px 62px; }
    .hero-modern h1 { font-size: 3.15rem; }
    .hero-modern.hero--city h1 { font-size: 2.8rem; }
    .hero-modern .cta-group { gap: 9px; }
    .hero-modern .cta-group .btn { padding-inline: 14px; font-size: 15px; }
    .hero-modern .hero-visual { min-height: 455px; }
}
@media (max-width: 900px) {
    .hero-modern .hero-layout { grid-template-columns: minmax(0, 1fr); gap: 34px; padding-block: 44px 54px; }
    .hero-modern .hero-copy { max-width: 690px; }
    .hero-modern h1, .hero-modern.hero--city h1 { font-size: clamp(2.65rem, 6.2vw, 3.5rem); line-height: 1.08; }
    .hero-modern .hero-description { max-width: 600px; font-size: 18px; }
    .hero-modern .hero-scene { padding: 0 0 27px; }
    .hero-modern .hero-visual { height: 350px; min-height: 350px; }
    .hero-modern .hero-scene::before { inset: 14px -5px 36px 14px; transform: rotate(1.5deg); }
    .hero-modern .visual-caption { left: 18px; right: 18px; }
}
@media (max-width: 600px) {
    .hero-modern .hero-layout { gap: 27px; padding-block: 31px 38px; }
    .hero-modern .eyebrow { padding: 6px 9px; margin-bottom: 21px; font-size: 10px; letter-spacing: .065em; }
    .hero-modern h1, .hero-modern.hero--city h1 { font-size: clamp(2.15rem, 9vw, 2.7rem); line-height: 1.08; letter-spacing: -.048em; }
    .hero-modern .hero-description { margin-top: 20px; font-size: 17px; line-height: 1.7; }
    .hero-modern .cta-group { display: flex; flex-direction: column; gap: 4px; margin-top: 24px; }
    .hero-modern .cta-group .btn-primary { width: 100%; min-height: 55px; }
    .hero-modern .cta-group .btn-secondary { width: auto; min-height: 44px; padding: 7px 12px; border-color: transparent; background: transparent; }
    .hero-modern .cta-group .btn { font-size: 16px; }
    .hero-modern .hero-assurances { margin-top: 13px; gap: 9px 15px; font-size: 12px; }
    .hero-modern .hero-assurances span::before { font-size: 12px; margin-right: 5px; }
    .hero-modern .hero-visual { min-height: 255px; height: 255px; border-radius: 18px; }
    .hero-modern .hero-scene { padding-bottom: 34px; }
    .hero-modern .hero-visual img { object-position: 50% 54%; }
    .hero-modern .hero-scene::before { border-radius: 18px; inset: 12px -3px 43px 11px; }
    .hero-modern .visual-index { top: 14px; left: 14px; font-size: 10px; }
    .hero-modern .visual-caption { left: 12px; right: 12px; gap: 10px; padding: 13px 12px; border-radius: 12px; }
    .hero-modern .visual-caption-mark { width: 34px; height: 34px; border-radius: 8px; }
    .hero-modern .visual-caption strong { font-size: 14px; }
    .hero-modern .visual-caption div > span { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
    .hero-modern .btn, .hero-modern .cta-glass-icon { transition: none; }
    .hero-modern .btn:hover, .hero-modern .cta-glass-icon:hover { transform: none; }
}