:root { --blue: #4682b4; --mint: #50c878; --sky: #88d4e2; --ink: #132235; }
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); font-family: Roboto, Arial, sans-serif; }
.container { width: min(1160px, calc(100% - 40px)); margin-inline: auto; }
.site-header { padding: 14px 0; background: #fff; }.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; }.site-header ul, .site-footer ul { display: flex; flex-wrap: wrap; gap: 18px; padding: 0; margin: 0; list-style: none; }.site-header a, .site-footer a { color: inherit; text-decoration: none; }.site-footer { padding: 48px 0; background: var(--sky); text-align: center; }
.hero { padding: clamp(72px, 10vw, 150px) 0; background: linear-gradient(#ffffffcc, #ffffffcc), var(--hero-image) center / cover, var(--sky); }
.hero__content { max-width: 760px; text-align: center; }
.hero h1, .consultation h2 { font-size: clamp(2.25rem, 5vw, 4.5rem); margin: 0 0 24px; }
.hero__text { font-size: 1.25rem; line-height: 1.6; }
.button { display: inline-block; margin-top: 24px; padding: 16px 36px; border: 2px solid #fff; border-radius: 999px; background: var(--sky); color: #fff; font-weight: 700; text-decoration: none; box-shadow: 0 0 16px #0004; }
.programs { padding-block: 72px; }
.program { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center; padding: clamp(32px, 6vw, 72px); }
.program--green { background: var(--mint); color: #fff; } .program--blue { background: var(--blue); color: #fff; } .program--yellow { background: #fff5a1; }
.program__image { width: 100%; height: auto; }
.program__benefits { padding-left: 20px; line-height: 1.7; }
.consultation { padding-block: 90px; background: var(--blue); color: #fff; text-align: center; }
@media (max-width: 720px) { .program { grid-template-columns: 1fr; gap: 24px; } .program__image { order: -1; } }