/* ============================================================
   ABOUT PAGE
   ============================================================ */

.about-page {
    background: #f7f7f7;
}

.about-page__main {
    overflow: hidden;
}

/* Shared section title */
.about-section-title {
    margin: 0;
    color: #151515;
    font-family: var(--second-family);
    font-size: 44px;
    font-weight: 375;
    line-height: 1.1;
}

/* Small uppercase label  "/ наша команда" */
.about-label {
    display: block;
    color: #7a7a82;
    font-family: var(--font-family);
    font-size: 15px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1.3px;
    line-height: 1.4;
    margin-bottom: 12px;
}

/* ============================================================
   FIXED SUB-NAV
   ============================================================ */

:root {
    --subnav-height: 54px;
}

/* Placeholder — keeps page flow so content doesn't jump under fixed bar */
.about-subnav-placeholder {
    height: var(--subnav-height);
    display: block;
}

.about-subnav {
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    z-index: 99;
    background: #fff;
    height: var(--subnav-height);
    display: flex;
    align-items: stretch;
}

/* Full-width bottom border that spans the whole viewport */
.about-subnav::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(0, 0, 0, 0.10);
}

.about-subnav .container {
    display: flex;
    align-items: stretch;
}

.about-subnav__inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0;
    width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
}

.about-subnav__inner::-webkit-scrollbar {
    display: none;
}

/* Thin vertical divider centred between links */
.about-subnav__sep {
    display: flex;
    width: 1px;
    height: 18px;
    background: rgba(0, 0, 0, 0.15);
    flex-shrink: 0;
    align-self: center;
}

.about-subnav__link {
    color: #777;
    font-family: var(--font-family);
    font-size: 21px;
    font-weight: 400;
    line-height: 28px;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    height: 100%;
    display: flex;
    align-items: center;
    transition: color 0.2s;
}

.about-subnav__link.is-active {
    color: #151515;
}

.about-subnav__link:hover {
    color: #151515;
}

/* Sliding yellow indicator — sits above the divider line */
.about-subnav__indicator {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 6px;
    background: #fecb13;
    border-radius: 3px 3px 0 0;
    transition: left 0.3s ease, width 0.3s ease;
    pointer-events: none;
    width: 0;
    z-index: 1;
}

/* ============================================================
   PROFILE
   ============================================================ */

.about-profile {
    background: #f7f7f7;
    padding: 60px 0 80px;
}

.about-profile__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 40px;
    align-items: start;
}

/* --- Diagram (left 50%) --- */
.about-profile__diagram {
    min-width: 0;
}

.about-profile__diagram-image {
    display: block;
    width: 100%;
    height: auto;
}

.about-profile__divider {
    width: 1px;
    align-self: stretch;
    background: rgba(21, 21, 21, 0.12);
}

.about-profile__diagram-wrap {
    position: relative;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 519 / 478;
    container-type: inline-size;
}

/* Connector SVG images — transform-origin: top left (как в макете) */
.about-profile__line,
.about-profile__arrow {
    position: absolute;
    pointer-events: none;
    z-index: 0;
    transform-origin: top left;
    height: auto;
}

/* about-profile-line.svg — партнерлар арасында */
.about-profile__line {
    width: 10.85%;
}

.about-profile__line--v-left {
    left: 17.6%;
    top: 50.1%;
    width: 3.86%;
    transform: rotate(0deg);
}

.about-profile__line--v-right {
    left: 80.6%;
    top: 63.8%;
    width: 3.86%;
    transform: rotate(180deg);
}

.about-profile__line--d-top-left {
    left: 24.4%;
    top: 21.7%;
    transform: rotate(0deg);
}

.about-profile__line--d-top-right {
    left: 74.8%;
    top: 30.8%;
    transform: rotate(180deg);
}

/* about-profile-arrow.svg — центрге бағытталған стрелка */
.about-profile__arrow {
    width: 4.4%;
}

.about-profile__arrow--ktz {
    left: 47.4%;
    top: 30.9%;
    transform: rotate(90deg);
}

.about-profile__arrow--msh {
    left: 28.2%;
    top: 46.9%;
    transform: rotate(-73deg);
}

.about-profile__arrow--mti {
    left: 67.5%;
    top: 47.8%;
    transform: rotate(-107deg);
}

.about-profile__arrow--fin {
    left: 33.8%;
    top: 58.5%;
    transform: rotate(34deg);
}

.about-profile__arrow--sci {
    left: 64.3%;
    top: 60.9%;
    transform: rotate(146deg);
}

.about-profile__node {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    z-index: 1;
    transform: translate(-50%, -50%);
}

.about-profile__node--label-above {
    flex-direction: column;
}

/* Node positions from Figma (519×478), circle centres */
.about-profile__node--top-left   { left: 13.9%; top: 37.4%; }
.about-profile__node--top-center { left: 49.5%; top: 15.9%; }
.about-profile__node--top-right  { left: 84.6%; top: 37.4%; }
.about-profile__node--center     { left: 49.5%; top: 47.3%; }
.about-profile__node--bot-left   { left: 26.4%; top: 75.9%; }
.about-profile__node--bot-right  { left: 73.0%; top: 75.9%; }

.about-profile__circle {
    width: 19.5cqw;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 1px solid #d2d2d2;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14%;
    box-sizing: border-box;
    flex-shrink: 0;
}

.about-profile__circle img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    mix-blend-mode: darken;
}

.about-profile__circle--napmk {
    width: 22.9cqw;
    border: 2px solid #fecb13;
    padding: 16%;
}

.about-profile__node-label {
    font-family: var(--second-family);
    font-size: clamp(11px, 1.05vw, 14px);
    font-weight: 375;
    line-height: 1.15;
    color: #151515;
    text-align: center;
    max-width: 145px;
}

/* --- Text (right 50%) --- */
.about-profile__content {
    min-width: 0;
}

.about-profile__title {
    margin: 0 0 28px;
    color: #151515;
    font-family: var(--second-family);
    font-size: 44px;
    font-weight: 375;
    line-height: 1.1;
}

.about-profile__text {
    margin: 0;
    color: #222;
    font-family: var(--font-family);
    font-size: 21px;
    font-weight: 300;
    line-height: 24px;
}

.about-profile__text p {
    margin: 0 0 24px;
}

.about-profile__text > *:last-child {
    margin-bottom: 0;
}

/* ============================================================
   HISTORY  (timeline)
   ============================================================ */

.about-history {
    background: #fff;
    padding: 64px 0 80px;
    border-top: 1px solid #f0f0f0;
}

.about-history__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 56px;
}

.about-history__nav {
    display: flex;
    gap: 8px;
}

.about-history__nav-btn {
    width: 36px;
    height: 36px;
    border: 1px solid #bfbfbf;
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, opacity 0.2s;
}

.about-history__nav-btn:hover:not(:disabled):not(.swiper-button-disabled):not(.swiper-button-lock) {
    background: #fecb13;
    border-color: #fecb13;
}

.about-history__nav-btn:disabled,
.about-history__nav-btn.swiper-button-disabled,
.about-history__nav-btn.swiper-button-lock {
    display: flex;
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
}

.about-history__nav-btn img {
    width: 10px;
    height: 14px;
    object-fit: contain;
}

.about-history__nav-btn--prev img {
    transform: rotate(90deg);
}

.about-history__nav-btn--next img {
    transform: rotate(-90deg);
}

/* Timeline */
.about-timeline {
    position: relative;
    overflow: hidden;
}

.about-timeline::before {
    content: "";
    position: absolute;
    top: 16px;
    left: 0;
    right: 0;
    z-index: 1;
    pointer-events: none;
    width: 100%;
    max-width: var(--content-max-width);
    height: 1px;
    margin-inline: auto;
    background: linear-gradient(
        90deg,
        rgba(132, 106, 9, 0) 0%,
        #fecb13 10%,
        #fecb13 90%,
        rgba(132, 106, 9, 0) 100%
    );
}

.about-timeline__items {
    position: relative;
    z-index: 2;
}

.about-timeline__item {
    height: auto;
    box-sizing: border-box;
    padding-top: 48px;
    position: relative;
}

.about-timeline__dot {
    position: absolute;
    top: 0;
    left: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #fff;
    border: 5px solid #fecb13;
    transform: translateY(-50%);
    top: 16px;
}

.about-timeline__year {
    margin: 0 0 18px;
    color: #151515;
    font-family: var(--second-family);
    font-size: 34px;
    font-weight: 375;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    line-height: 1.1;
}

.about-timeline__text {
    margin: 0;
    color: #151515;
    font-family: var(--font-family);
    font-size: 16px;
    font-weight: 300;
    line-height: 1.6;
}

.about-timeline__text strong {
    font-weight: 600;
}

.about-timeline__text p {
    margin: 0 0 8px;
}

.about-timeline__text > *:last-child {
    margin-bottom: 0;
}

/* ============================================================
   MISSION & VISION
   ============================================================ */

.about-mission {
    position: relative;
    padding: 80px 0;
    background: #fff;
}


.about-mission::before {
    width: 100%;
    max-width: var(--content-max-width);
    height: 1px;
    margin-inline: auto;
    background: linear-gradient(
        90deg,
        rgba(132, 106, 9, 0) 0%,
        #fecb13 10%,
        #fecb13 90%,
        rgba(132, 106, 9, 0) 100%
    );
}

.about-mission::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
}

.about-mission__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.about-mission__card {
    border-radius: 20px;
    padding: 60px 50px;
}

.about-mission__card--yellow {
    background: #fecb13;
}

.about-mission__card--white {
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid #000;
}

.about-mission__card-title {
    margin: 0 0 28px;
    color: #000;
    font-family: var(--second-family);
    font-size: 44px;
    font-weight: 375;
    line-height: 1.05;
}

.about-mission__card-text {
    margin: 0;
    color: #444;
    font-family: var(--font-family);
    font-size: 21px;
    font-weight: 400;
    line-height: 1.55;
}

/* ============================================================
   VALUES
   ============================================================ */

.about-values {
    padding: 80px 0 96px;
    background: #f7f7f7;
}

.about-values__title {
    margin-bottom: 40px;
}

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

.about-values__card {
    background: rgba(255, 255, 255, 0.6);
    border-radius: 20px;
    padding: 40px 36px 36px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0;
    min-width: 0;
    max-width: 100%;
    min-height: 325px;
    justify-content: center;
    box-sizing: border-box;
    overflow: hidden;
    transition: background 0.3s ease;
}

.about-values__card:hover {
    background: #fecb13;
}

.about-values__num {
    color: #151515;
    font-family: var(--second-family);
    font-size: 14px;
    font-weight: 300;
    width: 52px;
    height: 52px;
    margin-bottom: 37px;
    border-radius: 50%;
    border: 1px solid #b7b7b7;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: margin-bottom 0.3s ease, border-color 0.3s ease;
}

.about-values__card:hover .about-values__num {
    margin-bottom: 25px;
    border-color: #151515;
}

.about-values__icon-wrap {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.about-values__icon-wrap img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.about-values__name {
    margin: 0;
    max-width: 100%;
    color: #151515;
    font-family: var(--fourth-family);
    font-size: 43px;
    font-weight: 400;
    line-height: 1;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.about-values__name--book {
    font-weight: 350;
}

.about-values__desc {
    margin: 0;
    max-width: 100%;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    color: #151515;
    font-family: var(--font-family);
    font-size: 20px;
    font-weight: 300;
    line-height: 1.5;
    overflow-wrap: anywhere;
    word-break: break-word;
    transition: max-height 0.35s ease, opacity 0.25s ease, margin-top 0.3s ease;
}

.about-values__card:hover .about-values__desc {
    margin-top: 16px;
    max-height: 180px;
    opacity: 1;
}

/* ============================================================
   TEAM
   ============================================================ */

.about-team {
    background: #fff;
    padding: 80px 0 96px;
}

.about-team__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 48px;
    align-items: start;
}

.about-team__left {
    display: flex;
    flex-direction: column;
}

.about-team__title {
    margin: 0;
    color: #000;
    font-family: var(--second-family);
    font-size: 84px;
    font-weight: 375;
    line-height: 0.95;
}

.about-team__facts {
    margin: 32px 0 0;
    padding: 0;
    list-style: none;
    color: #151515;
    font-family: var(--font-family);
    font-size: 17px;
    font-weight: 300;
    line-height: 1.55;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.about-team__photo-wrap {
    display: flex;
    justify-content: center;
}

.about-team__photo {
    width: 322px;
    height: 388px;
    object-fit: cover;
    border-radius: 20px;
    display: block;
}

.about-team__right {
    padding-top: 16px;
}

.about-team__name {
    margin: 0 0 16px;
    color: #000;
    font-family: var(--font-family);
    font-size: 48px;
    font-weight: 400;
    line-height: 38px;
}

.about-team__role {
    margin: 0;
    color: #666;
    font-family: var(--font-family);
    font-size: 19px;
    font-weight: 400;
    line-height: 1.3;
}

/* ============================================================
   JOIN
   ============================================================ */

.about-join {
    padding: 80px 0 96px;
    background: #f7f7f7;
}

.about-join__inner {
    display: grid;
    grid-template-columns: minmax(0, 571fr) minmax(0, 528fr);
    column-gap: 144px;
    align-items: stretch;
}

.about-join__left .about-label {
    margin-bottom: 20px;
}

.about-join__title {
    margin: 0 0 22px;
    color: #000;
    font-family: var(--second-family);
    font-size: 84px;
    font-weight: 375;
    line-height: 64px;
}

.about-join__lead {
    margin: 0 0 41px;
    color: #151515;
    font-family: var(--font-family);
    font-size: 24px;
    font-weight: 300;
    line-height: 32px;
}

.about-join__photo {
    width: 100%;
    border-radius: 20px;
    display: block;
    object-fit: cover;
    aspect-ratio: 571 / 313;
}

.about-join__right {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.about-join__desc {
    padding-top: 32px;
    max-width: 502px;
    color: #151515;
    font-family: var(--font-family);
    font-size: 18px;
    font-weight: 300;
    line-height: 23px;
}

/* Steps */
.about-join__steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 48px;
}

.about-join__step {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.about-join__step--rule-both {
    padding-block: 24px;
    border-top: 1px solid rgba(21, 21, 21, 0.12);
    border-bottom: 1px solid rgba(21, 21, 21, 0.12);
}

.about-join__step--rule-bottom {
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(21, 21, 21, 0.12);
}

.about-join__step-num {
    color: #fecb13;
    font-family: var(--font-family);
    font-size: 25px;
    font-weight: 400;
    line-height: 28.8px;
    flex-shrink: 0;
    min-width: 36px;
}

.about-join__step p {
    margin: 0;
    max-width: 473px;
    color: #000;
    font-family: var(--font-family);
    font-size: 25px;
    font-weight: 400;
    line-height: 28.8px;
}

.about-join__link,
.about-join__step a {
    color: #4683c5;
    text-decoration: underline;
    transition: opacity 0.2s;
}

.about-join__link:hover,
.about-join__step a:hover {
    opacity: 0.75;
}