.home-modern {
    --home-ink: #102f3b;
    --home-muted: #60757c;
    --home-line: #dce7e8;
    --home-surface: #f3f7f7;
    --home-teal-dark: #0b3541;
    --home-teal: #0d7378;
    --home-mint: #13a08c;
    --home-soft: #e7f5f1;
    overflow: hidden;
    color: var(--home-ink);
    background: var(--home-surface);
}

.home-modern,
.home-modern * {
    box-sizing: border-box;
}

.home-modern a {
    transition: color .2s ease, background-color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.home-modern__container {
    width: min(calc(100% - 40px), 1180px);
    margin: 0 auto;
}

.home-modern__eyebrow {
    color: #b7eee3;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.home-modern__eyebrow--teal {
    color: var(--home-teal);
}

.home-modern__hero {
    position: relative;
    color: #fff;
    background:
        radial-gradient(circle at 82% 15%, rgba(19, 160, 140, .32), transparent 30%),
        linear-gradient(125deg, #0b3541 0%, #0c5360 58%, #0d7378 100%);
}

.home-modern__hero::before,
.home-modern__hero::after {
    position: absolute;
    content: "";
    pointer-events: none;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 50%;
}

.home-modern__hero::before {
    top: -320px;
    right: -220px;
    width: 720px;
    height: 720px;
}

.home-modern__hero::after {
    right: 120px;
    bottom: -470px;
    width: 670px;
    height: 670px;
}

.home-modern__hero-inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    align-items: center;
    gap: 76px;
    min-height: 585px;
    padding: 76px 0 118px;
}

.home-modern__hero h1 {
    max-width: 690px;
    margin: 22px 0 18px;
    color: #fff;
    font-size: clamp(44px, 5vw, 68px);
    font-weight: 800;
    line-height: 1.03;
    letter-spacing: -.045em;
}

.home-modern__lead {
    max-width: 650px;
    margin: 0;
    color: #d7e6e8;
    font-size: 17px;
    line-height: 1.75;
}

.home-modern__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
}

.home-modern__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 47px;
    padding: 0 22px;
    border: 1px solid transparent;
    border-radius: 8px;
    color: #fff;
    text-decoration: none;
    background: var(--home-teal);
    font-size: 13px;
    font-weight: 800;
}

.home-modern__button:hover {
    color: #fff;
    background: #095a60;
    transform: translateY(-2px);
}

.home-modern__button--light {
    color: var(--home-ink);
    background: #fff;
    box-shadow: 0 14px 30px rgba(3, 29, 37, .18);
}

.home-modern__button--light:hover {
    color: var(--home-ink);
    background: #f0fbf8;
}

.home-modern__button--ghost {
    border-color: rgba(255, 255, 255, .34);
    background: rgba(255, 255, 255, .05);
}

.home-modern__map-card {
    position: relative;
    height: 390px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 22px;
    background:
        linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px),
        linear-gradient(145deg, rgba(6, 43, 54, .96), rgba(8, 73, 82, .9));
    background-size: 42px 42px, 42px 42px, auto;
    box-shadow: 0 28px 65px rgba(0, 23, 31, .34);
    transform: rotate(1.5deg);
}

.home-modern__map-road {
    position: absolute;
    left: -10%;
    width: 120%;
    height: 3px;
    border-radius: 100%;
    background: rgba(180, 226, 223, .17);
}

.home-modern__map-road--one { top: 34%; transform: rotate(-15deg); }
.home-modern__map-road--two { top: 58%; transform: rotate(17deg); }
.home-modern__map-road--three { top: 70%; transform: rotate(-5deg); }

.home-modern__map-label {
    position: absolute;
    top: 24px;
    left: 25px;
    display: flex;
    flex-direction: column;
}

.home-modern__map-label strong { color: #fff; font-size: 16px; }
.home-modern__map-label span { margin-top: 4px; color: #9cc4c7; font-size: 10px; }

.home-modern__map-city {
    position: absolute;
    top: 45%;
    left: 50%;
    color: rgba(255, 255, 255, .78);
    font-size: 29px;
    font-weight: 900;
    letter-spacing: .18em;
    transform: translate(-50%, -50%);
}

.home-modern__map-dot {
    position: absolute;
    width: 13px;
    height: 13px;
    border: 3px solid #fff;
    border-radius: 50%;
    background: var(--home-mint);
    box-shadow: 0 0 0 8px rgba(19, 160, 140, .14);
}

.home-modern__map-dot--one { top: 33%; left: 32%; }
.home-modern__map-dot--two { top: 25%; right: 26%; background: #e2a94f; }
.home-modern__map-dot--three { bottom: 26%; left: 44%; background: #76b9d4; }

.home-modern__map-popup {
    position: absolute;
    right: 22px;
    bottom: 20px;
    width: 210px;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 13px;
    color: #fff;
    background: rgba(7, 43, 52, .9);
    box-shadow: 0 16px 30px rgba(0, 0, 0, .22);
}

.home-modern__map-popup small,
.home-modern__map-popup strong {
    display: block;
}

.home-modern__map-popup small { color: #a9c7c9; font-size: 10px; }
.home-modern__map-popup strong { margin: 5px 0 12px; font-size: 15px; }
.home-modern__map-popup-row { display: flex; justify-content: space-between; color: #d1e3e4; font-size: 10px; }

.home-modern__stats {
    position: absolute;
    z-index: 2;
    bottom: -52px;
    left: 50%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    width: min(calc(100% - 40px), 1040px);
    overflow: hidden;
    border: 1px solid var(--home-line);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 18px 45px rgba(13, 60, 68, .13);
    transform: translateX(-50%);
}

.home-modern__stat {
    display: flex;
    align-items: center;
    gap: 13px;
    min-height: 104px;
    padding: 20px;
    border-right: 1px solid var(--home-line);
}

.home-modern__stat:last-child { border-right: 0; }
.home-modern__stat-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; color: var(--home-teal); background: var(--home-soft); font-size: 11px; font-weight: 900; }
.home-modern__stat strong { display: block; color: var(--home-ink); font-size: 22px; }
.home-modern__stat span { display: block; margin-top: 3px; color: var(--home-muted); font-size: 11px; line-height: 1.4; }

.home-modern__section {
    padding: 90px 0;
}

.home-modern__section--projects {
    padding-top: 145px;
    background: #fff;
}

.home-modern__section--white {
    background: #fff;
}

.home-modern__section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 34px;
}

.home-modern__section-head h2,
.home-modern__map-copy h2,
.home-modern__media-copy h2 {
    margin: 12px 0 0;
    color: var(--home-ink);
    font-size: clamp(32px, 3.4vw, 46px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -.035em;
}

.home-modern__text-link {
    flex: 0 0 auto;
    color: var(--home-teal);
    text-decoration: none;
    font-size: 13px;
    font-weight: 800;
}

.home-modern__text-link:hover { color: var(--home-mint); }

.home-modern__projects {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 15px;
}

.home-modern__project-card {
    min-height: 245px;
    display: flex;
    flex-direction: column;
    padding: 23px;
    border: 1px solid var(--home-line);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 7px 24px rgba(15, 62, 70, .05);
}

.home-modern__project-card:hover {
    border-color: #b9d7d5;
    box-shadow: 0 16px 34px rgba(15, 62, 70, .11);
    transform: translateY(-3px);
}

.home-modern__project-card--wide {
    grid-column: span 2;
    color: #fff;
    border-color: transparent;
    background: linear-gradient(130deg, #0c5260, #0d7378);
}

.home-modern__project-card--wide h3,
.home-modern__project-card--wide a { color: #fff; }
.home-modern__project-card--wide p { color: #cfe3e4; }

.home-modern__project-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.home-modern__project-number {
    display: grid;
    place-items: center;
    width: 31px;
    height: 31px;
    border-radius: 8px;
    color: var(--home-teal);
    background: var(--home-soft);
    font-size: 10px;
    font-weight: 900;
}

.home-modern__status {
    padding: 5px 9px;
    border-radius: 999px;
    color: #16715f;
    background: #e7f4ef;
    font-size: 9px;
    font-weight: 800;
}

.home-modern__status--amber { color: #946b16; background: #fff3d7; }
.home-modern__status--grey { color: #68777b; background: #eef2f2; }
.home-modern__project-card h3 { margin: 25px 0 10px; font-size: 20px; line-height: 1.25; }
.home-modern__project-card p { margin: 0; color: var(--home-muted); font-size: 12px; line-height: 1.7; }
.home-modern__project-card a { margin-top: auto; padding-top: 24px; color: var(--home-teal); text-decoration: none; font-size: 12px; font-weight: 800; }

.home-modern__map-showcase {
    overflow: hidden;
    border-radius: 22px;
    color: #fff;
    background: var(--home-teal-dark);
    box-shadow: 0 24px 54px rgba(10, 50, 60, .16);
}

.home-modern__map-grid {
    display: grid;
    grid-template-columns: 1.25fr .75fr;
}

.home-modern__data-map {
    position: relative;
    min-height: 455px;
    overflow: hidden;
    border-right: 1px solid rgba(255, 255, 255, .12);
    background:
        linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px),
        #0c3541;
    background-size: 40px 40px;
}

.home-modern__data-area {
    position: absolute;
    width: 205px;
    height: 175px;
    border: 1px solid rgba(255, 255, 255, .18);
}

.home-modern__data-area--good { top: 95px; left: 130px; background: rgba(19, 160, 140, .33); }
.home-modern__data-area--mid { top: 155px; left: 285px; background: rgba(221, 169, 65, .3); }
.home-modern__data-area--bad { top: 230px; left: 70px; background: rgba(177, 65, 74, .28); }
.home-modern__data-caption { position: absolute; top: 22px; left: 22px; padding: 7px 10px; border-radius: 7px; color: #dbe9ea; background: rgba(3, 28, 35, .66); font-size: 10px; }
.home-modern__layers { position: absolute; right: 18px; bottom: 18px; left: 18px; display: flex; flex-wrap: wrap; gap: 8px; }
.home-modern__layer { padding: 7px 9px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 7px; color: #dce9ea; background: rgba(5, 38, 46, .75); font-size: 9px; }

.home-modern__map-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 48px;
}

.home-modern__map-copy h2 { color: #fff; }
.home-modern__map-copy p { margin: 20px 0 0; color: #c5dadd; font-size: 13px; line-height: 1.75; }
.home-modern__data-list { margin: 22px 0 28px; padding: 0; list-style: none; }
.home-modern__data-list li { position: relative; margin: 10px 0; padding-left: 27px; color: #e0ecee; font-size: 12px; }
.home-modern__data-list li::before { position: absolute; top: -2px; left: 0; display: grid; place-items: center; width: 18px; height: 18px; content: "✓"; border-radius: 50%; color: #fff; background: var(--home-mint); font-size: 10px; }

.home-modern__media {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    overflow: hidden;
    border: 1px solid var(--home-line);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 18px 45px rgba(13, 60, 68, .1);
}

.home-modern__video {
    position: relative;
    min-height: 405px;
    overflow: hidden;
    background: #0e303b;
}

.home-modern__video::after {
    position: absolute;
    inset: 0;
    content: "";
    pointer-events: none;
    background: linear-gradient(90deg, rgba(4, 25, 32, .15), rgba(4, 25, 32, .42));
}

.home-modern__video img { width: 100%; height: 100%; object-fit: cover; }
.home-modern__play { position: absolute; z-index: 1; top: 50%; left: 50%; display: grid; place-items: center; width: 70px; height: 70px; border-radius: 50%; color: var(--home-teal-dark); text-decoration: none; background: #fff; box-shadow: 0 13px 30px rgba(0, 0, 0, .28); transform: translate(-50%, -50%); }
.home-modern__play:hover { color: var(--home-teal); transform: translate(-50%, -50%) scale(1.05); }
.home-modern__media-copy { display: flex; flex-direction: column; justify-content: center; padding: 44px; }
.home-modern__media-copy p { margin: 20px 0 0; color: var(--home-muted); font-size: 13px; line-height: 1.75; }
.home-modern__media-meta { margin-top: 24px; padding-top: 17px; border-top: 1px solid var(--home-line); color: #71868d; font-size: 11px; }

.home-modern__section--social { padding-top: 68px; }
.home-modern__social-note { padding: 8px 12px; border: 1px solid var(--home-line); border-radius: 100px; color: var(--home-muted); background: #fff; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.home-modern__social-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.home-modern__social-card { display: grid; grid-template-columns: 180px 1fr; min-width: 0; overflow: hidden; border: 1px solid var(--home-line); border-radius: 17px; color: inherit; text-decoration: none; background: #fff; box-shadow: 0 8px 24px rgba(15,62,70,.05); }
.home-modern__social-card:hover { color: inherit; border-color: #abd1d2; box-shadow: 0 17px 35px rgba(15,62,70,.11); transform: translateY(-3px); }
.home-modern__social-visual { position: relative; display: grid; min-height: 220px; place-items: center; overflow: hidden; color: #fff; background: linear-gradient(145deg, #5734b8, #d84388 58%, #f1a143); }
.home-modern__social-visual::before, .home-modern__social-visual::after { position: absolute; content: ""; border: 1px solid rgba(255,255,255,.24); border-radius: 50%; }
.home-modern__social-visual::before { top: -58px; left: -62px; width: 165px; height: 165px; }
.home-modern__social-visual::after { right: -72px; bottom: -72px; width: 190px; height: 190px; }
.home-modern__social-visual--two { background: linear-gradient(145deg, #174f5d, #0d7378 55%, #13a08c); }
.home-modern__social-platform { position: absolute; z-index: 1; top: 16px; left: 16px; padding: 6px 8px; border: 1px solid rgba(255,255,255,.25); border-radius: 7px; background: rgba(18,24,42,.18); font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.home-modern__social-play { position: relative; z-index: 1; display: grid; width: 58px; height: 58px; place-items: center; padding-left: 4px; border-radius: 50%; color: #243947; background: #fff; box-shadow: 0 12px 28px rgba(0,0,0,.22); font-size: 18px; }
.home-modern__social-copy { display: flex; min-width: 0; flex-direction: column; justify-content: center; padding: 27px; }
.home-modern__social-copy small { color: var(--home-teal); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.home-modern__social-copy strong { margin: 10px 0 20px; color: var(--home-ink); font-size: 20px; line-height: 1.35; }
.home-modern__social-copy > span { color: var(--home-teal); font-size: 12px; font-weight: 800; }

.home-modern__news-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.home-modern__news-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--home-line);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 7px 22px rgba(15, 62, 70, .04);
}

.home-modern__news-card:hover { box-shadow: 0 16px 34px rgba(15, 62, 70, .11); transform: translateY(-3px); }
.home-modern__news-image { display: block; height: 165px; overflow: hidden; background: linear-gradient(145deg, #174f5d, #0d7378); }
.home-modern__news-image img { width: 100%; height: 100%; object-fit: cover; }
.home-modern__news-body { padding: 20px; }
.home-modern__news-date { color: var(--home-teal); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.home-modern__news-card h3 { margin: 11px 0 9px; color: var(--home-ink); font-size: 17px; line-height: 1.35; }
.home-modern__news-card p { min-height: 58px; margin: 0; color: var(--home-muted); font-size: 12px; line-height: 1.6; }
.home-modern__news-more { display: inline-block; margin-top: 16px; color: var(--home-teal); text-decoration: none; font-size: 12px; font-weight: 800; }
.home-modern__news-empty { grid-column: 1 / -1; padding: 35px; border: 1px dashed #bfd2d3; border-radius: 14px; color: var(--home-muted); text-align: center; background: #fff; }

.home-modern__participate {
    padding: 76px 0;
    color: #fff;
    background: linear-gradient(120deg, #0d7378, #13a08c);
}

.home-modern__participate-inner {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    align-items: center;
    gap: 60px;
}

.home-modern__participate h2 { margin: 12px 0 0; color: #fff; font-size: clamp(34px, 3.5vw, 45px); line-height: 1.08; letter-spacing: -.035em; }
.home-modern__participate-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.home-modern__participate-card { min-height: 155px; display: flex; flex-direction: column; padding: 20px; border: 1px solid rgba(255, 255, 255, .25); border-radius: 13px; color: #fff; text-decoration: none; background: rgba(255, 255, 255, .09); }
.home-modern__participate-card:hover { color: #fff; border-color: rgba(255, 255, 255, .48); background: rgba(255, 255, 255, .15); transform: translateY(-3px); }
.home-modern__participate-card strong { font-size: 15px; line-height: 1.35; }
.home-modern__participate-card span { margin-top: 8px; color: #d9f3ee; font-size: 11px; line-height: 1.5; }
.home-modern__participate-card b { margin-top: auto; font-size: 20px; }

@media (max-width: 1040px) {
    .home-modern__hero-inner { grid-template-columns: 1fr; gap: 38px; padding-bottom: 130px; }
    .home-modern__map-card { width: 100%; max-width: 700px; transform: none; }
    .home-modern__projects { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .home-modern__map-grid,
    .home-modern__media { grid-template-columns: 1fr; }
    .home-modern__data-map { min-height: 420px; border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .12); }
    .home-modern__social-grid { grid-template-columns: 1fr; }
    .home-modern__news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .home-modern__participate-inner { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
    .home-modern__container { width: min(calc(100% - 28px), 1180px); }
    .home-modern__hero-inner { min-height: 0; padding-top: 54px; }
    .home-modern__hero h1 { font-size: 42px; }
    .home-modern__lead { font-size: 15px; }
    .home-modern__map-card { height: 330px; }
    .home-modern__map-popup { width: 185px; }
    .home-modern__stats { position: static; width: auto; margin: -70px 14px 0; grid-template-columns: repeat(2, 1fr); transform: none; }
    .home-modern__stat { min-height: 88px; padding: 15px; border-bottom: 1px solid var(--home-line); }
    .home-modern__stat:nth-child(2) { border-right: 0; }
    .home-modern__section,
    .home-modern__section--projects { padding: 68px 0; }
    .home-modern__section-head { display: block; }
    .home-modern__text-link { display: inline-block; margin-top: 16px; }
    .home-modern__projects,
    .home-modern__news-grid { grid-template-columns: 1fr; }
    .home-modern__project-card--wide { grid-column: auto; }
    .home-modern__data-map { min-height: 350px; }
    .home-modern__data-area { width: 150px; height: 130px; }
    .home-modern__data-area--good { left: 45px; }
    .home-modern__data-area--mid { left: 160px; }
    .home-modern__map-copy,
    .home-modern__media-copy { padding: 30px 24px; }
    .home-modern__video { min-height: 270px; }
    .home-modern__social-card { grid-template-columns: 1fr; }
    .home-modern__social-visual { min-height: 175px; }
    .home-modern__participate { padding: 60px 0; }
    .home-modern__participate-actions { grid-template-columns: 1fr; }
    .home-modern__participate-card { min-height: 120px; }
}