:root {
    --meyo-violet: #6759e8;
    --meyo-mint: #32c6ae;
}

.meyo-page .about-desktop-nav a::after { background: var(--meyo-violet); }

.meyo-hero .cogyok-hero__image {
    left: 31%;
    background-image: url("../images/MEYO/meyo-all.jpeg");
    background-position: center;
}

.meyo-hero .cogyok-hero__wash {
    background:
        linear-gradient(90deg, #061a40 0%, rgba(6, 26, 64, .98) 32%, rgba(6, 26, 64, .8) 55%, rgba(6, 26, 64, .12) 82%),
        linear-gradient(0deg, rgba(2, 14, 37, .74), transparent 60%);
}

.meyo-page .cogyok-button--primary,
.meyo-page .cogyok-values__grid {
    background: linear-gradient(115deg, #0879e7, #6159dc);
}

.meyo-page .cogyok-photo-card img { object-position: center 35%; }
.meyo-page .cogyok-photo-card figcaption { border-left-color: var(--meyo-mint); }
.meyo-page .cogyok-heading-rule b { color: var(--meyo-violet); }

.meyo-passage {
    padding: 86px 0 94px;
    background:
        radial-gradient(circle at 88% 16%, rgba(103, 89, 232, .09), transparent 23%),
        #f4f8ff;
}

.meyo-passage__layout {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: 54px;
    align-items: center;
}

.meyo-passage__layout > img {
    width: 100%;
    min-height: 440px;
    display: block;
    object-fit: cover;
    border-radius: 18px;
    box-shadow: 0 22px 54px rgba(7, 36, 79, .17);
}

.meyo-passage__steps {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}

.meyo-passage__steps li {
    position: relative;
    min-height: 112px;
    padding: 0 0 28px 76px;
    display: flex;
}

.meyo-passage__steps li:not(:last-child)::after {
    position: absolute;
    top: 54px;
    bottom: 0;
    left: 27px;
    width: 2px;
    background: #cddcf0;
    content: "";
}

.meyo-passage__steps li > span {
    position: absolute;
    top: 0;
    left: 0;
    width: 55px;
    height: 55px;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(145deg, #108ced, #6557dc);
    border: 5px solid #e8f1ff;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 900;
    box-shadow: 0 8px 20px rgba(63, 89, 195, .23);
}

.meyo-passage__steps h3 { margin: 3px 0 7px; color: var(--youth-ink); font-size: 22px; }
.meyo-passage__steps p { margin: 0; color: var(--youth-muted); font-size: 15px; line-height: 1.65; }

.meyo-pillars { background: #fff; }
.meyo-pillars .cogyok-pillars__grid { grid-template-columns: repeat(4, 1fr); }
.meyo-pillars .cogyok-pillars__grid article { background: #f8fbff; }
.meyo-pillars .cogyok-pillars__grid article:nth-child(5) > i { background: linear-gradient(145deg, #6759e8, #493bb8); }
.meyo-pillars .cogyok-pillars__grid article:nth-child(6) > i { background: linear-gradient(145deg, #32c6ae, #15967f); }
.meyo-pillars .cogyok-pillars__grid article:nth-child(7) > i { background: linear-gradient(145deg, #ef8d3c, #d8642d); }

.meyo-learning { background: #f4f8ff; }
.meyo-learning .cogyok-life__photos img { object-position: center; }
.meyo-cta .cogyok-cta__image { background-image: url("../images/MEYO/meyo4.jpeg"); background-position: center; }

@media (max-width: 1100px) {
    .meyo-pillars .cogyok-pillars__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
    .meyo-hero .cogyok-hero__image { left: 0; background-position: center; }
    .meyo-hero .cogyok-hero__wash { background: linear-gradient(90deg, rgba(4, 21, 53, .96), rgba(5, 26, 66, .68)), linear-gradient(0deg, rgba(3, 16, 42, .86), transparent 65%); }
    .meyo-passage__layout { grid-template-columns: 1fr; gap: 40px; }
    .meyo-passage__layout > img { min-height: 0; aspect-ratio: 3 / 2; }
}

@media (max-width: 620px) {
    .meyo-hero .cogyok-hero__image { background-image: url("../images/MEYO/meyo-all.jpeg"); background-position: center; }
    .meyo-hero .cogyok-hero__wash { background: linear-gradient(0deg, rgba(3, 16, 43, .98) 0%, rgba(4, 24, 61, .82) 72%, rgba(4, 24, 61, .63) 100%); }
    .meyo-hero .cogyok-hero__lead { max-width: 320px; }
    .meyo-passage { padding: 65px 0 72px; }
    .meyo-passage__layout { gap: 34px; }
    .meyo-passage__steps li { padding-left: 68px; }
    .meyo-passage__steps h3 { font-size: 20px; }
    .meyo-pillars .cogyok-pillars__grid { grid-template-columns: 1fr; }
}