.page-about .about-intro,
.page-about .about-values,
.page-about .about-method,
.page-about .about-ecosystem,
.page-about .about-cta-section {
    background: #f4f6fb;
}

.page-about .about-intro { padding: 72px 0 82px; }

.page-about .about-intro-grid {
    display: grid;
    grid-template-columns: minmax(350px, .85fr) minmax(0, 1.15fr);
    gap: 60px;
    align-items: center;
}

.page-about .about-brand-card {
    position: relative;
    display: grid;
    min-height: 450px;
    overflow: hidden;
    place-items: center;
    border-radius: 28px;
    background: linear-gradient(145deg, #24205d 0%, #53307e 55%, #24368a 100%);
    box-shadow: 0 24px 58px rgba(36, 32, 93, .2);
}

.page-about .about-brand-card::before {
    position: absolute;
    inset: 24px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 22px;
    content: '';
}

.page-about .about-brand-card > img {
    position: relative;
    z-index: 2;
    width: min(72%, 330px);
    filter: drop-shadow(0 18px 25px rgba(0, 0, 0, .2));
}

.page-about .about-brand-orbit {
    position: absolute;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 50%;
}

.page-about .about-brand-orbit--one { width: 310px; height: 310px; }
.page-about .about-brand-orbit--two { right: -80px; bottom: -90px; width: 260px; height: 260px; }

.page-about .about-brand-note {
    position: absolute;
    z-index: 3;
    right: 22px;
    bottom: 22px;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 13px 15px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 14px;
    background: rgba(20, 19, 59, .72);
    color: #ffffff;
    backdrop-filter: blur(10px);
}

.page-about .about-brand-note > i { color: #ffca4b; font-size: 20px; }
.page-about .about-brand-note span { display: flex; flex-direction: column; font-size: 13px; font-weight: 800; }
.page-about .about-brand-note small { color: #bfc1dd; font-size: 9px; letter-spacing: .05em; text-transform: uppercase; }

.page-about .about-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 11px;
    color: #5946d2;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.page-about .about-intro-copy > h2,
.page-about .about-section-heading h2,
.page-about .about-method-copy h2,
.page-about .about-cta-card h2 {
    margin: 0;
    color: #202a3b;
    font-size: clamp(32px, 3.7vw, 48px);
    line-height: 1.14;
}

.page-about .about-intro-copy > p {
    margin: 16px 0 0;
    color: #68758b;
    font-size: 15px;
    line-height: 1.8;
}

.page-about .about-purpose-cards { display: grid; gap: 12px; margin-top: 25px; }

.page-about .about-purpose-cards article {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 17px;
    border: 1px solid #e0e5ef;
    border-radius: 15px;
    background: #ffffff;
}

.page-about .about-purpose-cards article > span {
    display: grid;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    place-items: center;
    border-radius: 12px;
    background: #ece8ff;
    color: #5946d2;
}

.page-about .about-purpose-cards article + article > span { background: #fff0df; color: #d77720; }
.page-about .about-purpose-cards h3 { margin: 0 0 4px; color: #273142; font-size: 16px; }
.page-about .about-purpose-cards p { margin: 0; color: #707b8e; font-size: 13px; line-height: 1.55; }

.page-about .about-values { padding: 82px 0; background: #ffffff; }

.page-about .about-section-heading { max-width: 760px; margin: 0 auto 38px; text-align: center; }
.page-about .about-section-heading h2 { font-size: clamp(30px, 3vw, 40px); }
.page-about .about-section-heading > p { margin: 12px 0 0; color: #68758b; font-size: 15px; line-height: 1.7; }

.page-about .about-value-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }

.page-about .about-value-card {
    position: relative;
    min-height: 265px;
    padding: 25px;
    overflow: hidden;
    border: 1px solid #e0e5ef;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 14px 35px rgba(39, 49, 66, .06);
    transition: transform .2s ease, box-shadow .2s ease;
}

.page-about .about-value-card:hover { transform: translateY(-4px); box-shadow: 0 19px 42px rgba(39, 49, 66, .11); }
.page-about .about-value-card--purple { --about-accent: #5946d2; --about-soft: #ece9ff; }
.page-about .about-value-card--orange { --about-accent: #e47723; --about-soft: #fff0e2; }
.page-about .about-value-card--blue { --about-accent: #2583e9; --about-soft: #e8f3ff; }
.page-about .about-value-card--green { --about-accent: #16a875; --about-soft: #e4f8f1; }

.page-about .about-value-icon {
    display: grid;
    width: 56px;
    height: 56px;
    margin-bottom: 22px;
    place-items: center;
    border-radius: 16px;
    background: var(--about-soft);
    color: var(--about-accent);
    font-size: 23px;
}

.page-about .about-value-number { position: absolute; top: 24px; right: 24px; color: #d6dae3; font-size: 13px; font-weight: 900; }
.page-about .about-value-card h3 { margin: 0 0 10px; color: #273142; font-size: 20px; }
.page-about .about-value-card p { margin: 0; color: #68758b; font-size: 14px; line-height: 1.7; }

.page-about .about-method { padding: 82px 0; }

.page-about .about-method-panel {
    display: grid;
    grid-template-columns: minmax(280px, .75fr) minmax(0, 1.25fr);
    gap: 52px;
    align-items: center;
    padding: 48px;
    border: 1px solid #ded9ff;
    border-radius: 26px;
    background: linear-gradient(145deg, #ffffff 0%, #f0edff 100%);
    box-shadow: 0 18px 46px rgba(50, 42, 105, .08);
}

.page-about .about-method-copy h2 { font-size: clamp(30px, 3vw, 41px); }
.page-about .about-method-copy > p { margin: 15px 0 24px; color: #68758b; font-size: 15px; line-height: 1.75; }

.page-about .about-method-steps { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.page-about .about-method-steps li { display: flex; align-items: center; gap: 14px; padding: 14px 17px; border: 1px solid #e3e5ed; border-radius: 14px; background: rgba(255, 255, 255, .84); }
.page-about .about-method-steps li > span { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border-radius: 10px; background: #5946d2; color: #ffffff; font-size: 12px; font-weight: 900; }
.page-about .about-method-steps li > div { display: flex; align-items: baseline; gap: 10px; }
.page-about .about-method-steps strong { color: #273142; font-size: 15px; }
.page-about .about-method-steps small { color: #727d8f; font-size: 12px; }

.page-about .about-ecosystem { padding: 82px 0; background: #ffffff; }
.page-about .about-ecosystem-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }

.page-about .about-ecosystem-card {
    padding: 28px;
    border: 1px solid #e0e5ef;
    border-radius: 21px;
    background: #ffffff;
    box-shadow: 0 14px 36px rgba(39, 49, 66, .06);
}

.page-about .about-ecosystem-card--games { --ecosystem-accent: #f2295b; --ecosystem-soft: #ffe8ee; }
.page-about .about-ecosystem-card--education { --ecosystem-accent: #5946d2; --ecosystem-soft: #ece9ff; }
.page-about .about-ecosystem-card--articles { --ecosystem-accent: #2583e9; --ecosystem-soft: #e8f3ff; }
.page-about .about-ecosystem-icon { display: grid; width: 58px; height: 58px; margin-bottom: 21px; place-items: center; border-radius: 16px; background: var(--ecosystem-soft); color: var(--ecosystem-accent); font-size: 24px; }
.page-about .about-ecosystem-card h3 { margin: 0 0 10px; color: #273142; font-size: 21px; }
.page-about .about-ecosystem-card p { min-height: 72px; margin: 0 0 21px; color: #68758b; font-size: 14px; line-height: 1.7; }
.page-about .about-ecosystem-card a { display: inline-flex; align-items: center; gap: 8px; color: var(--ecosystem-accent); font-size: 14px; font-weight: 900; }
.page-about .about-ecosystem-card a i { transition: transform .2s ease; }
.page-about .about-ecosystem-card a:hover i { transform: translateX(4px); }

.page-about .about-cta-section { padding: 0 0 82px; background: #ffffff; }

.page-about .about-cta-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 35px;
    padding: 42px 46px;
    border-radius: 24px;
    background: linear-gradient(130deg, #f2efff 0%, #fff0f4 100%);
}

.page-about .about-cta-card h2 { font-size: clamp(29px, 3vw, 39px); }
.page-about .about-cta-card p { margin: 10px 0 0; color: #68758b; font-size: 14px; }
.page-about .about-cta-actions { display: flex; flex: 0 0 auto; gap: 11px; }
.page-about .about-operator { margin: 18px 0 0; color: #9098a7; font-size: 11px; text-align: center; }

@media (max-width: 991px) {
    .page-about .about-intro-grid,
    .page-about .about-method-panel { grid-template-columns: 1fr; }
    .page-about .about-brand-card { min-height: 390px; }
    .page-about .about-value-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .page-about .about-cta-card { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 767px) {
    .page-about .about-intro,
    .page-about .about-values,
    .page-about .about-method,
    .page-about .about-ecosystem { padding: 58px 0; }
    .page-about .about-intro-grid { gap: 38px; }
    .page-about .about-brand-card { min-height: 310px; }
    .page-about .about-value-grid,
    .page-about .about-ecosystem-grid { grid-template-columns: 1fr; }
    .page-about .about-value-card { min-height: 0; }
    .page-about .about-method-panel { gap: 30px; padding: 30px 22px; }
    .page-about .about-method-steps li > div { align-items: flex-start; flex-direction: column; gap: 2px; }
    .page-about .about-ecosystem-card p { min-height: 0; }
    .page-about .about-cta-card { padding: 30px 22px; }
    .page-about .about-cta-actions { width: 100%; flex-direction: column; }
    .page-about .about-cta-actions .btn-main { width: 100%; }
}