:root {
    --sha-ink: #18253b;
    --sha-muted: #6d7a8f;
    --sha-line: #e4e8f0;
    --sha-soft: #f5f7fb;
    --sha-violet: #6656da;
    --sha-violet-dark: #4f40c4;
    --sha-coral: #f2556b;
}

.skillhub-about {
    overflow: hidden;
    color: var(--sha-ink);
    background: var(--sha-soft);
}

.skillhub-about * { box-sizing: border-box; }
.skillhub-about svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.skillhub-about-hero {
    position: relative;
    overflow: hidden;
    padding: 30px 0 72px;
    border-bottom: 1px solid rgba(101, 83, 216, .12);
    background:
        radial-gradient(circle at 84% 15%, rgba(109, 87, 226, .2), transparent 28%),
        radial-gradient(circle at 7% 90%, rgba(52, 183, 223, .13), transparent 25%),
        linear-gradient(145deg, #fff 0%, #f8f6ff 56%, #eef8ff 100%);
}

.skillhub-about-hero::before {
    position: absolute;
    top: -330px;
    right: -190px;
    width: 700px;
    height: 700px;
    border: 1px solid rgba(101, 82, 214, .08);
    border-radius: 50%;
    box-shadow: 0 0 0 82px rgba(98, 79, 220, .018), 0 0 0 164px rgba(98, 79, 220, .012);
    content: "";
    pointer-events: none;
}

.skillhub-about-breadcrumb {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 54px;
    color: #8a95a6;
    font-size: 13px;
}

.skillhub-about-breadcrumb a { color: #748096; text-decoration: none !important; }
.skillhub-about-breadcrumb a:hover { color: var(--sha-violet); }

.skillhub-about-hero__grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(480px, .98fr);
    align-items: center;
    gap: 75px;
}

.skillhub-about-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 17px;
    color: #6557d6;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .12em;
}

.skillhub-about-kicker i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #6e5be5;
    box-shadow: 0 0 0 5px rgba(109, 90, 227, .11);
}

.skillhub-about-hero__copy h1 {
    max-width: 750px;
    margin: 0;
    color: #17233a;
    font-size: clamp(42px, 3.65vw, 58px);
    font-weight: 800;
    line-height: 1.17;
    letter-spacing: -.035em;
}

.skillhub-about-hero__copy h1 em {
    display: block;
    color: transparent;
    font-style: normal;
    background: linear-gradient(92deg, #563fca, #6f5fe5 56%, #cb6f96);
    -webkit-background-clip: text;
    background-clip: text;
}

.skillhub-about-hero__copy > p {
    max-width: 680px;
    margin: 26px 0 30px;
    color: #647188;
    font-size: 16px;
    line-height: 1.95;
}

.skillhub-about-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.skillhub-about-button {
    display: inline-flex;
    min-height: 50px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 25px;
    border: 1px solid #dfe3ed;
    border-radius: 12px;
    color: #2a3850 !important;
    background: rgba(255, 255, 255, .86);
    font-size: 13px;
    font-weight: 800;
    text-decoration: none !important;
    box-shadow: 0 9px 24px rgba(40, 50, 80, .055);
    transition: .22s ease;
}
.skillhub-about-button:hover { transform: translateY(-2px); border-color: #cfc7ff; color: var(--sha-violet) !important; }
.skillhub-about-button.is-primary {
    border-color: transparent;
    color: #fff !important;
    background: linear-gradient(115deg, #5847d1, #7562e8);
    box-shadow: 0 14px 27px rgba(88, 69, 204, .22);
}

.skillhub-about-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    margin-top: 25px;
    color: #7b8798;
    font-size: 12px;
}
.skillhub-about-trust span { display: inline-flex; align-items: center; gap: 7px; }
.skillhub-about-trust svg { width: 16px; height: 16px; color: #7160e5; }

.skillhub-about-hero__visual {
    position: relative;
    min-height: 435px;
    overflow: hidden;
    border: 1px solid rgba(106, 91, 219, .14);
    border-radius: 31px;
    background: rgba(255, 255, 255, .74);
    box-shadow: 0 30px 70px rgba(52, 48, 111, .12);
    backdrop-filter: blur(9px);
}
.skillhub-about-hero__visual::before,
.skillhub-about-hero__visual::after {
    position: absolute;
    top: 50%;
    left: 50%;
    border: 1px solid rgba(103, 84, 216, .1);
    border-radius: 50%;
    content: "";
    transform: translate(-50%, -50%);
}
.skillhub-about-hero__visual::before { width: 330px; height: 330px; }
.skillhub-about-hero__visual::after { width: 245px; height: 245px; }

.skillhub-about-visual__brand {
    position: absolute;
    z-index: 3;
    top: 50%;
    left: 50%;
    display: flex;
    width: 205px;
    min-height: 205px;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    padding: 24px;
    border: 1px solid #d9d3ff;
    border-radius: 50%;
    background: linear-gradient(145deg, #fff, #f0edff);
    box-shadow: 0 22px 50px rgba(79, 62, 180, .16);
    text-align: center;
    transform: translate(-50%, -50%);
}
.skillhub-about-visual__brand > span {
    display: grid;
    width: 50px;
    height: 50px;
    margin-bottom: 10px;
    place-items: center;
    border-radius: 16px;
    color: #fff;
    background: linear-gradient(145deg, #5b48d6, #7764ea);
    box-shadow: 0 11px 24px rgba(91, 71, 205, .25);
    font-size: 15px;
    font-weight: 900;
}
.skillhub-about-visual__brand small { color: #8a7fd0; font-size: 8px; font-weight: 800; letter-spacing: .09em; }
.skillhub-about-visual__brand strong { margin: 4px 0 7px; color: #27344c; font-size: 24px; }
.skillhub-about-visual__brand p { margin: 0; color: #788397; font-size: 9px; line-height: 1.55; }

.skillhub-about-visual__orbit { position: absolute; z-index: 4; }
.skillhub-about-visual__orbit span {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    padding: 8px 14px;
    border: 1px solid #e2e5ed;
    border-radius: 11px;
    color: #526076;
    background: rgba(255, 255, 255, .92);
    font-size: 10px;
    font-weight: 800;
    box-shadow: 0 9px 22px rgba(42, 52, 84, .08);
}
.skillhub-about-visual__orbit span::before {
    width: 7px;
    height: 7px;
    margin-right: 7px;
    border-radius: 50%;
    background: #6d5de1;
    box-shadow: 0 0 0 4px rgba(109, 93, 225, .1);
    content: "";
}
.skillhub-about-visual__orbit.is-one { top: 46px; left: 40px; }
.skillhub-about-visual__orbit.is-two { top: 68px; right: 34px; }
.skillhub-about-visual__orbit.is-three { bottom: 62px; left: 32px; }
.skillhub-about-visual__orbit.is-four { right: 38px; bottom: 43px; }
.skillhub-about-visual__orbit.is-one span::before { background: #4a92e8; }
.skillhub-about-visual__orbit.is-two span::before { background: #6e5be2; }
.skillhub-about-visual__orbit.is-three span::before { background: #b86fdb; }
.skillhub-about-visual__orbit.is-four span::before { background: #36a17d; }

.skillhub-about-stats {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 58px;
    overflow: hidden;
    border: 1px solid rgba(106, 91, 219, .13);
    border-radius: 20px;
    background: rgba(255, 255, 255, .83);
    box-shadow: 0 16px 40px rgba(49, 56, 86, .075);
    backdrop-filter: blur(8px);
}
.skillhub-about-stats > div { position: relative; padding: 24px 27px; }
.skillhub-about-stats > div + div::before { position: absolute; top: 22%; bottom: 22%; left: 0; width: 1px; background: #e6e8ef; content: ""; }
.skillhub-about-stats strong { display: block; margin-bottom: 4px; color: #4f42c3; font-size: 26px; line-height: 1; }
.skillhub-about-stats span { color: #7c8798; font-size: 10px; font-weight: 700; }

.skillhub-about-section { padding: 88px 0; }
.skillhub-about-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 55px; margin-bottom: 36px; }
.skillhub-about-heading > div > span,
.skillhub-about-principles__intro > span,
.skillhub-about-faq__intro > span {
    display: block;
    margin-bottom: 9px;
    color: #6758d9;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .11em;
}
.skillhub-about-heading h2,
.skillhub-about-principles__intro h2,
.skillhub-about-faq__intro h2 {
    max-width: 880px;
    margin: 0;
    color: #18253b;
    font-size: clamp(29px, 3vw, 41px);
    font-weight: 800;
    line-height: 1.28;
    letter-spacing: -.025em;
}
.skillhub-about-heading > p { max-width: 520px; margin: 0; color: #7a8799; font-size: 14px; line-height: 1.85; }
.skillhub-about-heading.is-centered { align-items: center; flex-direction: column; gap: 14px; text-align: center; }
.skillhub-about-heading.is-centered p { max-width: 670px; }

.skillhub-about-system { background: #fff; }
.skillhub-about-layer-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.skillhub-about-layer {
    position: relative;
    display: flex;
    min-height: 340px;
    overflow: hidden;
    flex-direction: column;
    padding: 26px;
    border: 1px solid #e2e6ef;
    border-radius: 22px;
    color: #26344c !important;
    background: linear-gradient(150deg, #fff 0%, #fff 69%, #f6f4ff 100%);
    text-decoration: none !important;
    box-shadow: 0 13px 38px rgba(38, 48, 78, .045);
    transition: .24s ease;
}
.skillhub-about-layer::after { position: absolute; right: -76px; bottom: -97px; width: 210px; height: 210px; border: 1px solid rgba(103, 85, 215, .08); border-radius: 50%; box-shadow: 0 0 0 30px rgba(103, 85, 215, .022); content: ""; }
.skillhub-about-layer:hover { transform: translateY(-5px); border-color: #cbc4fa; box-shadow: 0 20px 48px rgba(61, 49, 133, .1); }
.skillhub-about-layer__top { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; }
.skillhub-about-layer__top > span { display: grid; width: 49px; height: 49px; place-items: center; border-radius: 15px; color: #5e70cc; background: #edf2ff; }
.skillhub-about-layer__top svg { width: 24px; height: 24px; }
.skillhub-about-layer__top small { color: #d7dbe5; font-size: 27px; font-weight: 800; }
.skillhub-about-layer > em { position: relative; z-index: 1; margin-top: 38px; color: #7c70cc; font-size: 9px; font-style: normal; font-weight: 800; letter-spacing: .09em; }
.skillhub-about-layer h3 { position: relative; z-index: 1; margin: 7px 0 12px; color: #1f2d44; font-size: 23px; }
.skillhub-about-layer p { position: relative; z-index: 1; margin: 0; color: #6e7b8f; font-size: 12px; line-height: 1.8; }
.skillhub-about-layer > strong { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; margin-top: auto; color: #5d4fd0; font-size: 10px; }
.skillhub-about-layer > strong i { font-style: normal; }
.skillhub-about-layer.is-violet .skillhub-about-layer__top > span { color: #6c56d7; background: #f0ecff; }
.skillhub-about-layer.is-cyan .skillhub-about-layer__top > span { color: #278ba1; background: #e5f8fb; }
.skillhub-about-layer.is-rose .skillhub-about-layer__top > span { color: #d35b79; background: #fdebf0; }

.skillhub-about-journey { background: var(--sha-soft); }
.skillhub-about-journey-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; }
.skillhub-about-journey-item {
    position: relative;
    display: flex;
    min-height: 190px;
    flex-direction: column;
    padding: 20px 17px;
    border: 1px solid #e2e6ee;
    border-radius: 18px;
    color: #344158 !important;
    background: #fff;
    text-decoration: none !important;
    transition: .22s ease;
}
.skillhub-about-journey-item:hover { transform: translateY(-4px); border-color: #cfc8f8; box-shadow: 0 15px 32px rgba(48, 54, 84, .08); }
.skillhub-about-journey-item > span { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 13px; color: #5573d1; background: #edf2ff; }
.skillhub-about-journey-item svg { width: 22px; height: 22px; }
.skillhub-about-journey-item strong { margin: 25px 0 7px; color: #2b3850; font-size: 14px; }
.skillhub-about-journey-item small { color: #7d899a; font-size: 9px; line-height: 1.55; }
.skillhub-about-journey-item > i { position: absolute; right: 16px; bottom: 15px; color: #bcc2cc; font-size: 13px; font-style: normal; }
.skillhub-about-journey-item.is-indigo > span { color: #6457d8; background: #efedff; }
.skillhub-about-journey-item.is-amber > span { color: #b97a29; background: #fff1d8; }
.skillhub-about-journey-item.is-cyan > span { color: #258b9e; background: #e4f8fb; }
.skillhub-about-journey-item.is-green > span { color: #2b9273; background: #e5f8f1; }
.skillhub-about-journey-item.is-violet > span { color: #7356d3; background: #f1eafe; }
.skillhub-about-journey-item.is-rose > span { color: #d35c7a; background: #fdeaf0; }

.skillhub-about-principles { position: relative; overflow: hidden; color: #fff; background: linear-gradient(132deg, #171f35, #24244a 58%, #342467); }
.skillhub-about-principles::before { position: absolute; top: -220px; right: -140px; width: 520px; height: 520px; border: 1px solid rgba(255, 255, 255, .07); border-radius: 50%; box-shadow: 0 0 0 60px rgba(255, 255, 255, .018), 0 0 0 120px rgba(255, 255, 255, .012); content: ""; }
.skillhub-about-principles__layout { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(280px, .7fr) minmax(0, 1.3fr); gap: 76px; align-items: start; }
.skillhub-about-principles__intro { position: sticky; top: 105px; }
.skillhub-about-principles__intro > span { color: #aaa0ff; }
.skillhub-about-principles__intro h2 { color: #fff; }
.skillhub-about-principles__intro p { margin: 21px 0 25px; color: #b9c1d2; font-size: 13px; line-height: 1.9; }
.skillhub-about-principles__intro a { display: inline-flex; align-items: center; gap: 8px; color: #d5d0ff !important; font-size: 11px; font-weight: 800; text-decoration: none !important; }
.skillhub-about-principle-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.skillhub-about-principle-grid article { position: relative; min-height: 230px; padding: 24px; border: 1px solid rgba(255, 255, 255, .09); border-radius: 19px; background: rgba(255, 255, 255, .055); }
.skillhub-about-principle-grid article > span { display: grid; width: 43px; height: 43px; place-items: center; border-radius: 13px; color: #d4ceff; background: rgba(160, 146, 255, .13); }
.skillhub-about-principle-grid svg { width: 22px; height: 22px; }
.skillhub-about-principle-grid small { position: absolute; top: 22px; right: 24px; color: rgba(255, 255, 255, .18); font-size: 24px; font-weight: 800; }
.skillhub-about-principle-grid h3 { margin: 29px 0 9px; color: #fff; font-size: 16px; }
.skillhub-about-principle-grid p { margin: 0; color: #afb8ca; font-size: 11px; line-height: 1.78; }

.skillhub-about-boundary { background: #fff; }
.skillhub-about-boundary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.skillhub-about-boundary-grid article { display: grid; min-height: 190px; grid-template-columns: 44px 1fr; gap: 15px; padding: 24px 20px; border: 1px solid #e3e7ef; border-radius: 19px; background: #fff; }
.skillhub-about-boundary-grid article > span { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 13px; color: #cf526d; background: #ffedf1; font-size: 10px; font-weight: 800; }
.skillhub-about-boundary-grid h3 { margin: 4px 0 9px; color: #27354d; font-size: 15px; }
.skillhub-about-boundary-grid p { margin: 0; color: #758195; font-size: 11px; line-height: 1.75; }

.skillhub-about-declaration { padding: 0 0 88px; background: #fff; }
.skillhub-about-declaration__inner {
    position: relative;
    display: grid;
    overflow: hidden;
    grid-template-columns: 76px 1fr;
    gap: 25px;
    align-items: center;
    padding: 35px 40px;
    border: 1px solid #dcd6ff;
    border-radius: 23px;
    background: linear-gradient(125deg, #f5f2ff, #f8fbff 62%, #eef9f8);
    box-shadow: 0 18px 48px rgba(58, 50, 119, .08);
}
.skillhub-about-declaration__inner::after { position: absolute; right: -88px; bottom: -123px; width: 270px; height: 270px; border: 1px solid rgba(100, 82, 211, .1); border-radius: 50%; box-shadow: 0 0 0 40px rgba(105, 85, 218, .025); content: ""; }
.skillhub-about-declaration__icon { position: relative; z-index: 1; display: grid; width: 76px; height: 76px; place-items: center; border-radius: 22px; color: #fff; background: linear-gradient(145deg, #5a48d1, #7864e9); box-shadow: 0 13px 28px rgba(83, 65, 188, .22); }
.skillhub-about-declaration__icon svg { width: 34px; height: 34px; }
.skillhub-about-declaration__inner > div:last-child { position: relative; z-index: 1; }
.skillhub-about-declaration__inner > div > span { color: #7e70cf; font-size: 9px; font-weight: 800; letter-spacing: .13em; }
.skillhub-about-declaration h2 { margin: 5px 0 9px; color: #26344d; font-size: 24px; }
.skillhub-about-declaration p { max-width: 1030px; margin: 0; color: #5e6b80; font-size: 13px; font-weight: 650; line-height: 1.85; }

.skillhub-about-faq { background: var(--sha-soft); }
.skillhub-about-faq__layout { display: grid; grid-template-columns: minmax(280px, .68fr) minmax(0, 1.32fr); gap: 70px; align-items: start; }
.skillhub-about-faq__intro { position: sticky; top: 105px; }
.skillhub-about-faq__intro p { margin: 17px 0 22px; color: #748196; font-size: 13px; line-height: 1.8; }
.skillhub-about-faq__intro a { display: inline-flex; align-items: center; gap: 8px; color: #5d50d3 !important; font-size: 11px; font-weight: 800; text-decoration: none !important; }
.skillhub-about-faq__list { border-top: 1px solid #dfe4ec; }
.skillhub-about-faq__list details { border-bottom: 1px solid #dfe4ec; }
.skillhub-about-faq__list summary { display: flex; min-height: 72px; align-items: center; justify-content: space-between; gap: 20px; color: #2d3a51; font-size: 14px; font-weight: 750; cursor: pointer; list-style: none; }
.skillhub-about-faq__list summary::-webkit-details-marker { display: none; }
.skillhub-about-faq__list summary i { position: relative; width: 23px; height: 23px; flex: 0 0 23px; border-radius: 50%; background: #ebe8ff; }
.skillhub-about-faq__list summary i::before,
.skillhub-about-faq__list summary i::after { position: absolute; top: 11px; right: 6px; left: 6px; height: 1.5px; border-radius: 2px; background: #6657d8; content: ""; transition: .2s ease; }
.skillhub-about-faq__list summary i::after { transform: rotate(90deg); }
.skillhub-about-faq__list details[open] summary { color: #5d4fd0; }
.skillhub-about-faq__list details[open] summary i::after { transform: rotate(0); }
.skillhub-about-faq__list details > p { max-width: 760px; margin: -4px 42px 0 0; padding-bottom: 23px; color: #6d7a8e; font-size: 12px; line-height: 1.9; }

.skillhub-about-final { padding: 0 0 86px; background: var(--sha-soft); }
.skillhub-about-final__inner { position: relative; display: flex; overflow: hidden; align-items: center; justify-content: space-between; gap: 45px; padding: 43px 48px; border-radius: 25px; color: #fff; background: linear-gradient(118deg, #5646c9 0%, #705be2 55%, #5045b6 100%); box-shadow: 0 24px 55px rgba(76, 60, 174, .21); }
.skillhub-about-final__inner::after { position: absolute; top: -125px; right: -65px; width: 300px; height: 300px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 50%; box-shadow: 0 0 0 45px rgba(255, 255, 255, .035), 0 0 0 90px rgba(255, 255, 255, .022); content: ""; }
.skillhub-about-final__inner > div { position: relative; z-index: 1; }
.skillhub-about-final__inner > div:first-child > span { color: #d5d0ff; font-size: 10px; font-weight: 800; letter-spacing: .09em; }
.skillhub-about-final h2 { max-width: 780px; margin: 8px 0; color: #fff; font-size: clamp(27px, 3vw, 37px); line-height: 1.3; }
.skillhub-about-final p { margin: 0; color: #d9d7ee; font-size: 13px; }
.skillhub-about-final__inner > div:last-child { display: grid; min-width: 210px; gap: 9px; }
.skillhub-about-final__inner > div:last-child a { display: flex; min-height: 48px; align-items: center; justify-content: center; gap: 9px; padding: 12px 18px; border-radius: 12px; color: #5547c6 !important; background: #fff; font-size: 12px; font-weight: 800; text-decoration: none !important; box-shadow: 0 10px 22px rgba(30, 22, 91, .16); }
.skillhub-about-final__inner > div:last-child a.is-secondary { border: 1px solid rgba(255, 255, 255, .25); color: #fff !important; background: transparent; box-shadow: none; }

.io-black-mode .skillhub-about { color: #d5d9e1; background: #1b1d1f; }
.io-black-mode .skillhub-about-hero { border-color: rgba(143, 128, 240, .15); background: radial-gradient(circle at 84% 17%, rgba(105, 84, 220, .17), transparent 29%), linear-gradient(145deg, #24262a, #262530 58%, #202930); }
.io-black-mode .skillhub-about-hero__copy h1,
.io-black-mode .skillhub-about-heading h2,
.io-black-mode .skillhub-about-faq__intro h2,
.io-black-mode .skillhub-about-layer h3,
.io-black-mode .skillhub-about-journey-item strong,
.io-black-mode .skillhub-about-boundary-grid h3,
.io-black-mode .skillhub-about-declaration h2 { color: #e6e9ef; }
.io-black-mode .skillhub-about-hero__copy > p,
.io-black-mode .skillhub-about-heading > p,
.io-black-mode .skillhub-about-faq__intro p { color: #a5acb9; }
.io-black-mode .skillhub-about-system,
.io-black-mode .skillhub-about-boundary,
.io-black-mode .skillhub-about-declaration { background: #202224; }
.io-black-mode .skillhub-about-journey,
.io-black-mode .skillhub-about-faq,
.io-black-mode .skillhub-about-final { background: #1b1d1f; }
.io-black-mode .skillhub-about-layer,
.io-black-mode .skillhub-about-journey-item,
.io-black-mode .skillhub-about-boundary-grid article { border-color: rgba(255, 255, 255, .08); background: #2d2e2f; }
.io-black-mode .skillhub-about-hero__visual,
.io-black-mode .skillhub-about-stats { border-color: rgba(255, 255, 255, .08); background: rgba(44, 45, 51, .8); }
.io-black-mode .skillhub-about-visual__brand { border-color: rgba(140, 124, 236, .2); background: linear-gradient(145deg, #34313f, #302b49); }
.io-black-mode .skillhub-about-visual__brand strong { color: #eceef4; }
.io-black-mode .skillhub-about-visual__orbit span { border-color: rgba(255, 255, 255, .08); color: #c9ced8; background: rgba(48, 49, 55, .94); }
.io-black-mode .skillhub-about-stats > div + div::before { background: rgba(255, 255, 255, .08); }
.io-black-mode .skillhub-about-declaration__inner { border-color: rgba(142, 126, 239, .18); background: linear-gradient(125deg, #302d42, #26313b); }
.io-black-mode .skillhub-about-declaration p { color: #bdc4d0; }
.io-black-mode .skillhub-about-faq__list,
.io-black-mode .skillhub-about-faq__list details { border-color: rgba(255, 255, 255, .09); }
.io-black-mode .skillhub-about-faq__list summary { color: #d7dbe3; }

@media (max-width: 1199px) {
    .skillhub-about-hero__grid { grid-template-columns: 1fr; gap: 48px; }
    .skillhub-about-hero__visual { max-width: 760px; width: 100%; }
    .skillhub-about-layer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .skillhub-about-journey-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .skillhub-about-boundary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 991px) {
    .skillhub-about-hero { padding-bottom: 62px; }
    .skillhub-about-breadcrumb { margin-bottom: 36px; }
    .skillhub-about-section { padding: 68px 0; }
    .skillhub-about-principles__layout,
    .skillhub-about-faq__layout { grid-template-columns: 1fr; gap: 38px; }
    .skillhub-about-principles__intro,
    .skillhub-about-faq__intro { position: relative; top: auto; max-width: 760px; }
}

@media (max-width: 767px) {
    .skillhub-about-hero { padding: 23px 0 52px; }
    .skillhub-about-breadcrumb { margin-bottom: 27px; font-size: 11px; }
    .skillhub-about-hero__copy h1 { font-size: 35px; line-height: 1.22; }
    .skillhub-about-hero__copy h1 em { display: inline; }
    .skillhub-about-hero__copy > p { margin: 20px 0 25px; font-size: 14px; line-height: 1.82; }
    .skillhub-about-actions { display: grid; grid-template-columns: 1fr; }
    .skillhub-about-button { width: 100%; }
    .skillhub-about-trust { display: grid; gap: 10px; }
    .skillhub-about-hero__visual { min-height: 370px; border-radius: 23px; }
    .skillhub-about-hero__visual::before { width: 280px; height: 280px; }
    .skillhub-about-hero__visual::after { width: 215px; height: 215px; }
    .skillhub-about-visual__brand { width: 178px; min-height: 178px; padding: 20px; }
    .skillhub-about-visual__brand > span { width: 44px; height: 44px; margin-bottom: 8px; }
    .skillhub-about-visual__brand strong { font-size: 21px; }
    .skillhub-about-visual__orbit span { min-height: 34px; padding: 7px 10px; font-size: 8px; }
    .skillhub-about-visual__orbit.is-one { top: 25px; left: 16px; }
    .skillhub-about-visual__orbit.is-two { top: 45px; right: 13px; }
    .skillhub-about-visual__orbit.is-three { bottom: 42px; left: 13px; }
    .skillhub-about-visual__orbit.is-four { right: 15px; bottom: 22px; }
    .skillhub-about-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 35px; }
    .skillhub-about-stats > div { padding: 20px 18px; }
    .skillhub-about-stats > div + div::before { display: none; }
    .skillhub-about-stats > div:nth-child(even) { border-left: 1px solid #e6e8ef; }
    .skillhub-about-stats > div:nth-child(n+3) { border-top: 1px solid #e6e8ef; }
    .skillhub-about-section { padding: 56px 0; }
    .skillhub-about-heading { align-items: flex-start; flex-direction: column; gap: 14px; margin-bottom: 27px; }
    .skillhub-about-heading.is-centered { align-items: flex-start; text-align: left; }
    .skillhub-about-heading h2,
    .skillhub-about-principles__intro h2,
    .skillhub-about-faq__intro h2 { font-size: 29px; }
    .skillhub-about-layer-grid { grid-template-columns: 1fr; }
    .skillhub-about-layer { min-height: 300px; padding: 23px; border-radius: 19px; }
    .skillhub-about-layer > em { margin-top: 28px; }
    .skillhub-about-journey-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
    .skillhub-about-journey-item { min-height: 175px; padding: 17px 14px; }
    .skillhub-about-principle-grid { grid-template-columns: 1fr; }
    .skillhub-about-principle-grid article { min-height: 205px; }
    .skillhub-about-boundary-grid { grid-template-columns: 1fr; }
    .skillhub-about-boundary-grid article { min-height: 150px; }
    .skillhub-about-declaration { padding-bottom: 56px; }
    .skillhub-about-declaration__inner { grid-template-columns: 1fr; padding: 27px 23px; border-radius: 20px; }
    .skillhub-about-declaration__icon { width: 58px; height: 58px; border-radius: 17px; }
    .skillhub-about-declaration__icon svg { width: 28px; height: 28px; }
    .skillhub-about-declaration h2 { font-size: 21px; }
    .skillhub-about-declaration p { font-size: 12px; }
    .skillhub-about-faq__list summary { min-height: 68px; font-size: 13px; }
    .skillhub-about-faq__list details > p { margin-right: 28px; }
    .skillhub-about-final { padding-bottom: 56px; }
    .skillhub-about-final__inner { align-items: flex-start; flex-direction: column; padding: 30px 23px; border-radius: 21px; }
    .skillhub-about-final h2 { font-size: 28px; }
    .skillhub-about-final__inner > div:last-child { width: 100%; min-width: 0; }
}

@media (max-width: 420px) {
    .skillhub-about-hero__copy h1 { font-size: 31px; }
    .skillhub-about-journey-grid { grid-template-columns: 1fr 1fr; }
    .skillhub-about-journey-item { min-height: 168px; }
}