/* =========================================================
   ABOUT PAGE
   TMB-URIST.RU
   Premium responsive design
   ========================================================= */


/* =========================================================
   01. PAGE ROOT
========================================================= */

.page_about {

    --about-blue: #2563eb;
    --about-blue-dark: #1d4ed8;
    --about-blue-light: #eff6ff;

    --about-text: #0f172a;
    --about-text-soft: #475569;
    --about-text-muted: #64748b;

    --about-border: #dce5f0;
    --about-border-light: #e8eef5;

    --about-bg: #f8fafc;
    --about-white: #ffffff;

    --about-radius: 22px;

    position: relative;

    display: block;

    width: 100%;

    height: auto;
    min-height: 0;

    margin: 0;
    padding: 0;

    overflow: visible;

    color: var(--about-text);

    background: #ffffff;

    box-sizing: border-box;
}


/* =========================================================
   BOX SIZING
========================================================= */

.page_about *,
.page_about *::before,
.page_about *::after {

    box-sizing: border-box;
}


/* =========================================================
   CONTAINERS
========================================================= */

.page_about .hero-container,
.page_about .about-container {

    width: min(1680px, calc(100% - 80px));

    margin-left: auto;
    margin-right: auto;
}


/* =========================================================
   HERO
========================================================= */

.page_about .hero-about {

    position: relative;

    width: 100%;

    padding:
        clamp(80px, 8vw, 145px)
        0
        clamp(75px, 7vw, 125px);

    background:
        radial-gradient(
            circle at 88% 12%,
            rgba(37, 99, 235, 0.10),
            transparent 27%
        ),
        radial-gradient(
            circle at 8% 85%,
            rgba(37, 99, 235, 0.06),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            #f8fafc 0%,
            #ffffff 100%
        );

    overflow: hidden;
}


/* =========================================================
   HERO DECORATION
========================================================= */

.page_about .hero-about::before {

    content: "";

    position: absolute;

    width: 520px;
    height: 520px;

    right: -230px;
    top: -280px;

    border-radius: 50%;

    border:
        1px solid
        rgba(37, 99, 235, 0.08);

    pointer-events: none;
}


.page_about .hero-about::after {

    content: "";

    position: absolute;

    width: 320px;
    height: 320px;

    left: -180px;
    bottom: -190px;

    border-radius: 50%;

    background:
        rgba(37, 99, 235, 0.035);

    pointer-events: none;
}


/* =========================================================
   HERO GRID
========================================================= */

.page_about .hero-grid {

    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(220px, 280px)
        minmax(0, 1fr)
        minmax(280px, 360px);

    gap:
        clamp(45px, 5vw, 90px);

    align-items: center;
}


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

.page_about .hero-profile {

    min-width: 0;

    text-align: center;
}


.page_about .hero-photo-wrap {

    position: relative;

    width:
        clamp(150px, 12vw, 205px);

    height:
        clamp(150px, 12vw, 205px);

    margin:
        0 auto
        clamp(18px, 1.5vw, 25px);
}


.page_about .hero-photo {

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    border-radius: 26px;

    background: #e9eef5;

    border:
        1px solid
        rgba(15, 23, 42, 0.08);

    box-shadow:
        0 18px 45px
        rgba(15, 23, 42, 0.13);

    transition:
        transform .4s cubic-bezier(.22,1,.36,1),
        box-shadow .4s ease;
}


.page_about .hero-profile:hover .hero-photo {

    transform: translateY(-5px);

    box-shadow:
        0 25px 55px
        rgba(15, 23, 42, 0.17);
}


/* =========================================================
   PHOTO STATUS
========================================================= */

.page_about .hero-photo-status {

    position: absolute;

    right: 7px;
    bottom: 7px;

    width: 17px;
    height: 17px;

    border-radius: 50%;

    background: #16a34a;

    border:
        4px solid
        #ffffff;

    box-shadow:
        0 3px 10px
        rgba(22, 163, 74, .3);
}


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

.page_about .hero-profile h3 {

    margin:
        0 0 7px;

    color:
        var(--about-text);

    font-size:
        clamp(18px, 1.35vw, 23px);

    line-height: 1.25;

    font-weight: 750;

    letter-spacing: -.4px;
}


.page_about .hero-position {

    margin: 0;

    color:
        var(--about-blue);

    font-size:
        clamp(14px, 1vw, 16px);

    line-height: 1.5;

    font-weight: 600;
}


/* =========================================================
   HERO INFORMATION
========================================================= */

.page_about .hero-info {

    min-width: 0;

    padding-left:
        clamp(0px, 1vw, 18px);
}


.page_about .hero-overline {

    display: inline-block;

    margin-bottom: 13px;

    color:
        var(--about-blue);

    font-size: 12px;

    line-height: 1.3;

    font-weight: 800;

    letter-spacing: 1.5px;
}


.page_about .hero-title {

    position: relative;

    margin:
        0 0 25px;

    padding-bottom: 20px;

    color:
        var(--about-text);

    font-size:
        clamp(42px, 4.2vw, 72px);

    line-height: .98;

    font-weight: 800;

    letter-spacing: -2.8px;
}


.page_about .hero-title::after {

    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 65px;
    height: 4px;

    border-radius: 100px;

    background:
        var(--about-blue);
}


.page_about .hero-text {

    max-width: 720px;

    margin:
        0 0 27px;

    color:
        var(--about-text-soft);

    font-size:
        clamp(16px, 1.2vw, 20px);

    line-height: 1.75;

    font-weight: 450;
}


/* =========================================================
   SPECIALIZATION
========================================================= */

.page_about .hero-specialization {

    display: flex;

    flex-wrap: wrap;

    gap: 9px;
}


.page_about .hero-specialization span {

    display: inline-flex;

    align-items: center;

    min-height: 34px;

    padding:
        7px 12px;

    border:
        1px solid
        #dbe5f2;

    border-radius: 999px;

    background:
        rgba(255,255,255,.82);

    color:
        #334155;

    font-size:
        clamp(11px, .8vw, 13px);

    line-height: 1.2;

    font-weight: 600;

    box-shadow:
        0 3px 10px
        rgba(15,23,42,.025);

    transition:
        color .25s ease,
        border-color .25s ease,
        background .25s ease,
        transform .25s ease;
}


.page_about .hero-specialization span:hover {

    color:
        var(--about-blue);

    border-color:
        rgba(37,99,235,.25);

    background:
        #f8fbff;

    transform:
        translateY(-2px);
}


/* =========================================================
   HERO BENEFITS
========================================================= */

.page_about .hero-benefits {

    min-width: 0;

    padding:
        27px 27px 25px;

    border:
        1px solid
        rgba(220,229,240,.9);

    border-radius: 20px;

    background:
        rgba(255,255,255,.72);

    box-shadow:
        0 15px 40px
        rgba(15,23,42,.045);

    backdrop-filter:
        blur(10px);
}


.page_about .hero-benefits-label {

    margin-bottom: 18px;

    color:
        var(--about-blue);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1.25px;
}


.page_about .hero-benefits ul {

    list-style: none;

    margin: 0;
    padding: 0;
}


.page_about .hero-benefits li {

    position: relative;

    margin: 0;

    padding:
        0 0 13px 26px;

    color:
        #1e293b;

    font-size:
        clamp(13px, .95vw, 15px);

    line-height: 1.5;

    font-weight: 650;
}


.page_about .hero-benefits li:last-child {

    padding-bottom: 0;
}


.page_about .hero-benefits li::before {

    content: "✓";

    position: absolute;

    left: 0;
    top: 0;

    color:
        #16a34a;

    font-weight: 800;
}


/* =========================================================
   ABOUT SECTION
========================================================= */

.page_about .about-section {

    position: relative;

    width: 100%;

    padding:
        clamp(65px, 7vw, 120px)
        0;

    background:
        #ffffff;

    overflow: visible;
}


.page_about .about-grid {

    display: grid;

    grid-template-columns:
        minmax(0, 1.12fr)
        minmax(500px, .88fr);

    gap:
        clamp(25px, 3vw, 55px);

    align-items: start;
}


/* =========================================================
   COMMON CARDS
========================================================= */

.page_about .about-card {

    position: relative;

    min-width: 0;

    background:
        #ffffff;

    border:
        1px solid
        var(--about-border);

    border-radius:
        var(--about-radius);

    box-shadow:
        0 14px 45px
        rgba(15,23,42,.045);

    transition:
        transform .35s cubic-bezier(.22,1,.36,1),
        box-shadow .35s ease,
        border-color .35s ease;
}


.page_about .about-card:hover {

    border-color:
        rgba(37,99,235,.16);

    box-shadow:
        0 22px 60px
        rgba(15,23,42,.07);
}


/* =========================================================
   MAIN ABOUT CARD
========================================================= */

.page_about .about-main-card {

    padding:
        clamp(30px, 3vw, 50px);
}


.page_about .card-overline {

    margin-bottom: 10px;

    color:
        var(--about-blue);

    font-size: 11px;

    line-height: 1.3;

    font-weight: 800;

    letter-spacing: 1.45px;
}


.page_about .about-card h2 {

    position: relative;

    margin:
        0 0 30px;

    padding-bottom: 17px;

    color:
        var(--about-text);

    font-size:
        clamp(28px, 2.3vw, 40px);

    line-height: 1.1;

    font-weight: 800;

    letter-spacing: -1.2px;
}


.page_about .about-card h2::after {

    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 44px;
    height: 3px;

    border-radius: 100px;

    background:
        var(--about-blue);
}


/* =========================================================
   ABOUT TEXT
========================================================= */

.page_about .about-text p {

    margin:
        0 0 18px;

    color:
        #526b88;

    font-size:
        clamp(14px, 1vw, 17px);

    line-height: 1.75;

    font-weight: 450;
}


.page_about .about-text p:last-child {

    margin-bottom: 0;
}


.page_about .about-text strong {

    color:
        #152238;

    font-weight: 750;
}


/* =========================================================
   PRINCIPLES
========================================================= */

.page_about .about-principles {

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 22px;

    margin-top: 38px;

    padding-top: 27px;

    border-top:
        1px solid
        var(--about-border-light);
}


.page_about .principle {

    display: flex;

    gap: 11px;

    min-width: 0;
}


.page_about .principle-number {

    flex: 0 0 auto;

    color:
        var(--about-blue);

    font-size: 11px;

    line-height: 1.4;

    font-weight: 800;

    letter-spacing: .5px;
}


.page_about .principle strong {

    display: block;

    margin-bottom: 6px;

    color:
        #172238;

    font-size:
        clamp(12px, .85vw, 14px);

    font-weight: 750;
}


.page_about .principle p {

    margin: 0;

    color:
        #6b7e95;

    font-size:
        clamp(11px, .75vw, 12px);

    line-height: 1.55;
}


/* =========================================================
   DOCUMENTS CARD
========================================================= */

.page_about .documents-card {

    padding:
        clamp(30px, 3vw, 48px);
}


.page_about .documents-card .card-description {

    margin:
        -8px 0 25px;

    color:
        #64748b;

    font-size:
        clamp(14px, 1vw, 17px);

    line-height: 1.65;
}


/* =========================================================
   DOCUMENT GRID
========================================================= */

.page_about .documents-grid {

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap:
        clamp(12px, 1.1vw, 20px);

    margin-top: 25px;
}


/* =========================================================
   DOCUMENT CARD
========================================================= */

.page_about .doc-card {

    position: relative;

    min-width: 0;

    overflow: hidden;

    background:
        #ffffff;

    border:
        1px solid
        #dce5f0;

    border-radius: 17px;

    box-shadow:
        0 5px 18px
        rgba(15,23,42,.04);

    transition:
        transform .35s cubic-bezier(.22,1,.36,1),
        box-shadow .35s ease,
        border-color .35s ease;
}


.page_about .doc-card:hover {

    transform:
        translateY(-6px);

    border-color:
        rgba(37,99,235,.32);

    box-shadow:
        0 20px 45px
        rgba(15,23,42,.10),
        0 5px 18px
        rgba(37,99,235,.05);
}


/* =========================================================
   DOCUMENT LINK
========================================================= */

.page_about .doc-link {

    display: block;

    width: 100%;

    color: inherit;

    text-decoration: none;
}


/* =========================================================
   DOCUMENT IMAGE
========================================================= */

.page_about .doc-image-wrap {

    position: relative;

    width: 100%;

    height:
        clamp(220px, 17vw, 340px);

    display: flex;

    align-items: center;
    justify-content: center;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            #f8fafc,
            #edf3f9
        );
}


.page_about .doc-image-wrap img {

    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

    padding: 7px;

    transition:
        transform .55s cubic-bezier(.22,1,.36,1),
        filter .35s ease;
}


.page_about .doc-card:hover
.doc-image-wrap img {

    transform:
        scale(1.035);

    filter:
        brightness(1.015);
}


.page_about .doc-image-wrap::after {

    content: "";

    position: absolute;

    inset: 7px;

    border:
        1px solid
        rgba(15,23,42,.065);

    border-radius: 11px;

    pointer-events: none;
}


/* =========================================================
   DOCUMENT CONTENT
========================================================= */

.page_about .doc-content {

    padding:
        14px 14px 16px;

    background:
        #ffffff;

    border-top:
        1px solid
        #edf1f6;
}


.page_about .doc-content h3 {

    display: flex;

    align-items: center;

    min-height: 40px;

    margin:
        0 0 11px;

    color:
        #172238;

    font-size:
        clamp(11px, .82vw, 14px);

    line-height: 1.35;

    font-weight: 750;
}


.page_about .doc-open {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    color:
        var(--about-blue);

    font-size:
        clamp(10px, .75vw, 13px);

    line-height: 1.2;

    font-weight: 750;

    transition:
        color .25s ease,
        gap .25s ease;
}


.page_about .doc-open span {

    font-size: 16px;

    line-height: 1;

    transition:
        transform .25s ease;
}


.page_about .doc-card:hover .doc-open {

    color:
        var(--about-blue-dark);

    gap: 9px;
}


.page_about .doc-card:hover
.doc-open span {

    transform:
        translate(2px, -2px);
}


/* =========================================================
   CHESS CARD
========================================================= */

.page_about .chess-card-pro {

    grid-column:
        1 / -1;

    position: relative;

    overflow: hidden;

    padding:
        clamp(28px, 3vw, 46px);

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f8fafc 65%,
            #f1f5f9 100%
        );

    border:
        1px solid
        var(--about-border);

    box-shadow:
        0 15px 45px
        rgba(15,23,42,.055);
}


.page_about .chess-card-pro::before {

    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    right: -180px;
    top: -240px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(37,99,235,.10),
            transparent 65%
        );

    pointer-events: none;
}


.page_about .chess-top {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    gap: 17px;

    margin-bottom: 22px;
}


.page_about .chess-icon {

    flex: 0 0 auto;

    width: 58px;
    height: 58px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 16px;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #4f46e5
        );

    color:
        #ffffff;

    font-size: 25px;

    box-shadow:
        0 12px 28px
        rgba(37,99,235,.25);
}


.page_about .chess-overline {

    display: block;

    margin-bottom: 5px;

    color:
        var(--about-blue);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.25px;
}


.page_about .chess-top h2 {

    margin:
        0 0 8px;

    padding: 0;

    color:
        var(--about-text);

    font-size:
        clamp(21px, 1.8vw, 31px);

    line-height: 1.15;

    letter-spacing: -.8px;
}


.page_about .chess-top h2::after {

    display: none;
}


/* =========================================================
   CHESS CONTENT
========================================================= */

.page_about .chess-content {

    position: relative;

    z-index: 2;

    max-width: 900px;
}


.page_about .chess-text {

    max-width: 950px;

    margin:
        0 0 25px;

    color:
        #52657c;

    font-size:
        clamp(14px, 1vw, 17px);

    line-height: 1.7;
}


/* =========================================================
   CHESS STATS
========================================================= */

.page_about .chess-stats {

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 190px));

    gap: 12px;

    margin-bottom: 22px;
}


.page_about .stat {

    padding:
        15px 17px;

    border:
        1px solid
        rgba(15,23,42,.06);

    border-radius: 14px;

    background:
        rgba(255,255,255,.78);

    box-shadow:
        0 5px 18px
        rgba(15,23,42,.035);
}


.page_about .stat-value {

    display: block;

    margin-bottom: 3px;

    color:
        #172238;

    font-size:
        clamp(16px, 1.2vw, 20px);

    font-weight: 800;
}


.page_about .stat-label {

    color:
        #718096;

    font-size:
        clamp(10px, .75vw, 12px);

    line-height: 1.3;
}


/* =========================================================
   CHESS BUTTON
========================================================= */

.page_about .chess-btn-pro {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    padding:
        12px 17px;

    border-radius: 11px;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #4f46e5
        );

    color:
        #ffffff;

    text-decoration: none;

    font-size: 13px;

    font-weight: 700;

    box-shadow:
        0 9px 24px
        rgba(37,99,235,.22);

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}


.page_about .chess-btn-pro:hover {

    transform:
        translateY(-3px);

    box-shadow:
        0 15px 32px
        rgba(37,99,235,.28);
}


.page_about .chess-btn-pro > span {

    font-size: 17px;

    transition:
        transform .25s ease;
}


.page_about .chess-btn-pro:hover > span {

    transform:
        translateX(3px);
}


/* =========================================================
   CHESS GRAPH
========================================================= */

.page_about .chess-graph {

    position: absolute;

    right: 45px;
    bottom: 30px;

    width:
        min(32vw, 480px);

    height: 150px;

    opacity: .55;

    pointer-events: none;
}


.page_about .graph-grid {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            rgba(37,99,235,.07) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(37,99,235,.07) 1px,
            transparent 1px
        );

    background-size: 42px 42px;

    mask-image:
        linear-gradient(
            to right,
            transparent,
            black
        );
}


.page_about .graph-line {

    position: absolute;

    left: 15%;
    right: 2%;

    top: 52%;

    height: 3px;

    border-radius: 100px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #2563eb 25%,
            #4f46e5 65%,
            #16a34a
        );

    transform:
        rotate(-8deg);

    transform-origin:
        left center;

    box-shadow:
        0 0 14px
        rgba(37,99,235,.18);
}


.page_about .graph-point {

    position: absolute;

    width: 9px;
    height: 9px;

    border-radius: 50%;

    background:
        #2563eb;

    border:
        2px solid
        #ffffff;

    box-shadow:
        0 3px 10px
        rgba(37,99,235,.25);
}


.page_about .point-1 {

    left: 34%;
    top: 57%;
}


.page_about .point-2 {

    left: 61%;
    top: 43%;
}


.page_about .point-3 {

    right: 8%;
    top: 27%;

    background:
        #16a34a;
}


/* =========================================================
   FINAL CTA
========================================================= */

.page_about .about-cta {

    width: 100%;

    padding:
        0 0
        clamp(60px, 7vw, 110px);

    background:
        #ffffff;

    overflow: visible;
}


.page_about .about-cta-box {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 40px;

    padding:
        clamp(32px, 4vw, 55px);

    overflow: hidden;

    border-radius: 24px;

    background:
        linear-gradient(
            135deg,
            #0f172a,
            #172554
        );

    box-shadow:
        0 25px 65px
        rgba(15,23,42,.16);
}


.page_about .about-cta-box::before {

    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    right: -160px;
    top: -260px;

    border-radius: 50%;

    background:
        rgba(37,99,235,.25);

    pointer-events: none;
}


.page_about .about-cta-content {

    position: relative;

    z-index: 2;

    max-width: 760px;
}


.page_about .cta-overline {

    display: block;

    margin-bottom: 10px;

    color:
        #60a5fa;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1.4px;
}


.page_about .about-cta-content h2 {

    margin:
        0 0 12px;

    color:
        #ffffff;

    font-size:
        clamp(27px, 2.5vw, 42px);

    line-height: 1.1;

    letter-spacing: -1.2px;
}


.page_about .about-cta-content p {

    max-width: 680px;

    margin: 0;

    color:
        #cbd5e1;

    font-size:
        clamp(14px, 1vw, 17px);

    line-height: 1.65;
}


/* =========================================================
   CTA BUTTONS
========================================================= */

.page_about .about-cta-actions {

    position: relative;

    z-index: 2;

    display: flex;

    flex-shrink: 0;

    gap: 11px;
}


.page_about .about-cta-primary,
.page_about .about-cta-secondary {

    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 48px;

    padding:
        0 20px;

    border-radius: 11px;

    text-decoration: none;

    font-size: 13px;

    font-weight: 750;

    transition:
        transform .25s ease,
        background .25s ease,
        color .25s ease,
        border-color .25s ease;
}


.page_about .about-cta-primary {

    background:
        #ffffff;

    color:
        #0f172a;
}


.page_about .about-cta-primary:hover {

    transform:
        translateY(-3px);

    background:
        #eff6ff;

    color:
        var(--about-blue);
}


.page_about .about-cta-secondary {

    border:
        1px solid
        rgba(255,255,255,.25);

    color:
        #ffffff;

    background:
        rgba(255,255,255,.06);
}


.page_about .about-cta-secondary:hover {

    transform:
        translateY(-3px);

    border-color:
        rgba(255,255,255,.5);

    background:
        rgba(255,255,255,.12);
}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1600px) {

    .page_about .hero-container,
    .page_about .about-container {

        width:
            min(
                1760px,
                calc(100% - 120px)
            );
    }

    .page_about .hero-grid {

        grid-template-columns:
            280px
            minmax(600px, 1fr)
            370px;

        gap: 75px;
    }

    .page_about .about-grid {

        grid-template-columns:
            minmax(0, 1.15fr)
            minmax(560px, .85fr);

        gap: 55px;
    }

    .page_about .about-text p {

        max-width: 900px;
    }
}


/* =========================================================
   2K
========================================================= */

@media (min-width: 2200px) {

    .page_about .hero-container,
    .page_about .about-container {

        width:
            min(
                1900px,
                calc(100% - 160px)
            );
    }

    .page_about .hero-grid {

        grid-template-columns:
            320px
            minmax(700px, 1fr)
            410px;

        gap: 95px;
    }

    .page_about .hero-text {

        max-width: 850px;

        font-size: 21px;
    }

    .page_about .about-grid {

        grid-template-columns:
            minmax(0, 1.15fr)
            minmax(650px, .85fr);

        gap: 65px;
    }

    .page_about .about-main-card,
    .page_about .documents-card {

        padding: 55px;
    }

    .page_about .doc-image-wrap {

        height: 390px;
    }

    .page_about .about-text p {

        font-size: 18px;

        line-height: 1.8;
    }

    .page_about .documents-card
    .card-description {

        font-size: 18px;
    }
}


/* =========================================================
   4K
========================================================= */

@media (min-width: 3000px) {

    .page_about .hero-container,
    .page_about .about-container {

        width:
            min(
                2200px,
                calc(100% - 220px)
            );
    }

    .page_about .hero-grid {

        grid-template-columns:
            360px
            minmax(800px, 1fr)
            460px;

        gap: 110px;
    }

    .page_about .hero-title {

        font-size: 88px;
    }

    .page_about .hero-text {

        font-size: 23px;
    }

    .page_about .about-grid {

        gap: 80px;
    }

    .page_about .doc-image-wrap {

        height: 450px;
    }
}


/* =========================================================
   LAPTOP
========================================================= */

@media (max-width: 1280px) {

    .page_about .hero-container,
    .page_about .about-container {

        width:
            calc(100% - 60px);
    }

    .page_about .hero-grid {

        grid-template-columns:
            220px
            minmax(0, 1fr)
            290px;

        gap: 38px;
    }

    .page_about .about-grid {

        grid-template-columns:
            minmax(0, 1.05fr)
            minmax(430px, .95fr);

        gap: 28px;
    }

    .page_about .documents-grid {

        gap: 12px;
    }

    .page_about .doc-image-wrap {

        height: 245px;
    }
}


/* =========================================================
   TABLET LANDSCAPE
========================================================= */

@media (max-width: 1100px) {

    .page_about .hero-grid {

        grid-template-columns:
            220px
            minmax(0, 1fr);

        gap: 40px;
    }

    .page_about .hero-benefits {

        grid-column:
            1 / -1;

        display: grid;

        grid-template-columns:
            180px
            1fr;

        gap: 25px;

        align-items: start;
    }

    .page_about .hero-benefits-label {

        margin: 0;
    }

    .page_about .hero-benefits ul {

        display: grid;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 10px 20px;
    }

    .page_about .hero-benefits li {

        padding-bottom: 0;
    }

    .page_about .about-grid {

        grid-template-columns:
            1fr;
    }

    .page_about .documents-grid {

        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

    .page_about .doc-image-wrap {

        height: 300px;
    }

    .page_about .chess-graph {

        width: 380px;
    }
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .page_about .hero-container,
    .page_about .about-container {

        width:
            calc(100% - 40px);
    }

    .page_about .hero-grid {

        grid-template-columns:
            1fr;

        text-align:
            center;

        gap: 35px;
    }

    .page_about .hero-info {

        padding-left: 0;
    }

    .page_about .hero-title::after {

        left: 50%;

        transform:
            translateX(-50%);
    }

    .page_about .hero-text {

        margin-left: auto;
        margin-right: auto;
    }

    .page_about .hero-specialization {

        justify-content:
            center;
    }

    .page_about .hero-benefits {

        display:
            block;

        text-align:
            left;
    }

    .page_about .hero-benefits-label {

        margin-bottom: 15px;

        text-align:
            center;
    }

    .page_about .hero-benefits ul {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .page_about .documents-grid {

        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

    .page_about .doc-image-wrap {

        height: 260px;
    }

    .page_about .about-principles {

        grid-template-columns:
            1fr;

        gap: 18px;
    }

    .page_about .chess-graph {

        opacity: .3;
    }
}


/* =========================================================
   MOBILE 768
========================================================= */

@media (max-width: 768px) {

    .page_about .hero-about {

        padding:
            75px 0 70px;
    }

    .page_about .hero-container,
    .page_about .about-container {

        width:
            calc(100% - 30px);
    }

    .page_about .hero-grid {

        gap: 30px;
    }

    .page_about .hero-photo-wrap {

        width: 155px;
        height: 155px;
    }

    .page_about .hero-title {

        font-size: 46px;

        letter-spacing:
            -1.8px;
    }

    .page_about .hero-text {

        font-size: 16px;

        line-height: 1.65;
    }

    .page_about .hero-benefits ul {

        grid-template-columns:
            1fr;
    }

    .page_about .about-section {

        padding:
            60px 0;
    }

    .page_about .about-main-card,
    .page_about .documents-card {

        padding: 28px;
    }

    .page_about .documents-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 14px;
    }

    .page_about .doc-image-wrap {

        height: 280px;
    }

    .page_about .chess-card-pro {

        padding: 28px;
    }

    .page_about .chess-graph {

        display: none;
    }

    .page_about .about-cta-box {

        flex-direction:
            column;

        align-items:
            flex-start;
    }

    .page_about .about-cta-actions {

        width:
            100%;
    }

    .page_about .about-cta-primary,
    .page_about .about-cta-secondary {

        flex: 1;
    }
}


/* =========================================================
   MOBILE 600
========================================================= */

@media (max-width: 600px) {

    .page_about .hero-about {

        padding:
            60px 0 55px;
    }

    .page_about .hero-container,
    .page_about .about-container {

        width:
            calc(100% - 24px);
    }

    .page_about .hero-photo-wrap {

        width: 135px;
        height: 135px;
    }

    .page_about .hero-profile h3 {

        font-size: 18px;
    }

    .page_about .hero-title {

        font-size: 39px;

        letter-spacing:
            -1.5px;
    }

    .page_about .hero-overline {

        font-size: 10px;
    }

    .page_about .hero-specialization {

        gap: 7px;
    }

    .page_about .hero-specialization span {

        font-size: 10px;

        padding:
            6px 9px;
    }

    .page_about .hero-benefits {

        padding: 22px;
    }

    .page_about .about-section {

        padding:
            45px 0;
    }

    .page_about .about-main-card,
    .page_about .documents-card {

        padding: 22px;

        border-radius: 18px;
    }

    .page_about .about-card h2 {

        font-size: 27px;

        margin-bottom: 24px;
    }

    .page_about .about-text p {

        font-size: 14px;

        line-height: 1.7;
    }

    .page_about .documents-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 10px;
    }

    .page_about .doc-image-wrap {

        height: 230px;
    }

    .page_about .doc-image-wrap img {

        padding: 5px;
    }

    .page_about .doc-content {

        padding:
            11px 10px 13px;
    }

    .page_about .doc-content h3 {

        min-height: 36px;

        margin-bottom: 8px;

        font-size: 10px;
    }

    .page_about .doc-open {

        font-size: 9px;
    }

    .page_about .doc-open span {

        font-size: 13px;
    }

    .page_about .chess-top {

        align-items:
            flex-start;
    }

    .page_about .chess-icon {

        width: 48px;
        height: 48px;

        border-radius: 13px;

        font-size: 20px;
    }

    .page_about .chess-top h2 {

        font-size: 21px;
    }

    .page_about .chess-stats {

        grid-template-columns:
            1fr;

        max-width: 100%;
    }

    .page_about .about-cta {

        padding-bottom:
            45px;
    }

    .page_about .about-cta-box {

        padding:
            28px 22px;

        border-radius:
            19px;
    }

    .page_about .about-cta-actions {

        flex-direction:
            column;

        width: 100%;
    }

    .page_about .about-cta-primary,
    .page_about .about-cta-secondary {

        width: 100%;
    }
}


/* =========================================================
   SMALL MOBILE 480
========================================================= */

@media (max-width: 480px) {

    .page_about .hero-title {

        font-size: 35px;
    }

    .page_about .hero-text {

        font-size: 15px;
    }

    .page_about .hero-benefits {

        padding: 19px;
    }

    .page_about .about-principles {

        gap: 15px;
    }

    .page_about .principle p {

        font-size: 11px;
    }

    .page_about .documents-grid {

        grid-template-columns:
            1fr;

        gap: 14px;
    }

    .page_about .doc-image-wrap {

        height: 360px;
    }

    .page_about .doc-content {

        padding: 14px;
    }

    .page_about .doc-content h3 {

        min-height:
            auto;

        font-size: 13px;
    }

    .page_about .doc-open {

        font-size: 11px;
    }

    .page_about .chess-card-pro {

        padding: 22px;
    }

    .page_about .chess-top {

        gap: 12px;
    }

    .page_about .chess-top h2 {

        font-size: 19px;
    }
}


/* =========================================================
   VERY SMALL PHONES 380
========================================================= */

@media (max-width: 380px) {

    .page_about .hero-container,
    .page_about .about-container {

        width:
            calc(100% - 20px);
    }

    .page_about .hero-title {

        font-size: 32px;
    }

    .page_about .hero-photo-wrap {

        width: 120px;
        height: 120px;
    }

    .page_about .about-main-card,
    .page_about .documents-card {

        padding: 19px;
    }

    .page_about .doc-image-wrap {

        height: 310px;
    }

    .page_about .about-cta-content h2 {

        font-size: 25px;
    }
}


/* =========================================================
   DARK THEME
========================================================= */

body.dark-theme .page_about {

    --about-text: #f1f5f9;
    --about-text-soft: #cbd5e1;
    --about-text-muted: #94a3b8;

    --about-border: #2f3a4a;
    --about-border-light: #303b4b;

    background:
        #111827;
}


/* HERO */

body.dark-theme .page_about .hero-about {

    background:
        radial-gradient(
            circle at 88% 12%,
            rgba(37,99,235,.13),
            transparent 30%
        ),
        #111827;
}


body.dark-theme .page_about .hero-profile h3 {

    color:
        #f1f5f9;
}


body.dark-theme .page_about .hero-text {

    color:
        #cbd5e1;
}


body.dark-theme .page_about .hero-benefits {

    background:
        rgba(27,36,48,.75);

    border-color:
        #303b4b;
}


body.dark-theme .page_about .hero-benefits li {

    color:
        #e2e8f0;
}


body.dark-theme .page_about
.hero-specialization span {

    color:
        #cbd5e1;

    background:
        #1b2430;

    border-color:
        #344154;
}


/* ABOUT */

body.dark-theme .page_about .about-section,
body.dark-theme .page_about .about-cta {

    background:
        #111827;
}


body.dark-theme .page_about .about-card {

    background:
        #1b2430;

    border-color:
        #303b4b;

    box-shadow:
        0 15px 45px
        rgba(0,0,0,.18);
}


body.dark-theme .page_about .about-card h2 {

    color:
        #f1f5f9;
}


body.dark-theme .page_about .about-text p {

    color:
        #cbd5e1;
}


body.dark-theme .page_about .about-text strong {

    color:
        #f8fafc;
}


body.dark-theme .page_about .principle strong {

    color:
        #f1f5f9;
}


body.dark-theme .page_about .principle p {

    color:
        #94a3b8;
}


/* DOCUMENTS */

body.dark-theme .page_about .documents-card
.card-description {

    color:
        #94a3b8;
}


body.dark-theme .page_about .doc-card {

    background:
        #151d28;

    border-color:
        #344154;
}


body.dark-theme .page_about .doc-image-wrap {

    background:
        linear-gradient(
            145deg,
            #182230,
            #101721
        );
}


body.dark-theme .page_about .doc-content {

    background:
        #151d28;

    border-color:
        #344154;
}


body.dark-theme .page_about .doc-content h3 {

    color:
        #e2e8f0;
}


/* CHESS */

body.dark-theme .page_about .chess-card-pro {

    background:
        linear-gradient(
            135deg,
            #1b2430,
            #151d28
        );
}


body.dark-theme .page_about .chess-text {

    color:
        #cbd5e1;
}


body.dark-theme .page_about .stat {

    background:
        rgba(15,23,42,.45);

    border-color:
        #344154;
}


body.dark-theme .page_about .stat-value {

    color:
        #f1f5f9;
}


body.dark-theme .page_about .stat-label {

    color:
        #94a3b8;
}


/* =========================================================
   ACCESSIBILITY
========================================================= */

.page_about a:focus-visible {

    outline:
        3px solid
        rgba(37,99,235,.35);

    outline-offset: 4px;

    border-radius: 8px;
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .page_about *,
    .page_about *::before,
    .page_about *::after {

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;

        scroll-behavior:
            auto !important;
    }
}


/* =========================================================
   FINAL DOCUMENT FLOW
   ВАЖНО:
   Страница НЕ фиксируется.
   Footer идёт после main обычным потоком.
========================================================= */

.page_about {

    position: relative;

    display: block;

    width: 100%;

    height: auto;

    min-height: 0;

    overflow: visible;

    margin: 0;
}