.about-page {
    min-height: 100vh;

    display: flex;
    flex-direction: column;
}


/* =========================================================
   HEADER
   ========================================================= */

.about-header {
    min-height: 90px;

    padding:
        20px
        clamp(22px, 5vw, 80px);

    display: flex;
    align-items: center;
    justify-content: space-between;

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

    background:
        rgba(7, 7, 9, 0.92);
}


.about-brand {
    display: flex;
    align-items: end;
    gap: 3px;
}


.about-brand-main {
    color: #f2f2f3;

    font-size: 29px;
    font-weight: 950;

    letter-spacing: -0.055em;
}


.about-brand-dot {
    color: var(--red-bright);

    font-size: 20px;
    font-weight: 950;
}


.about-back {
    min-height: 38px;

    padding:
        0
        14px;

    display: flex;
    align-items: center;
    gap: 9px;

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

    border-radius: 4px;

    color: #9999a1;

    font-size: 8px;
    font-weight: 900;
}


.about-back span {
    color: var(--red-bright);
}


/* =========================================================
   MAIN
   ========================================================= */

.about-main {
    width: 100%;
    max-width: 1450px;

    margin: 0 auto;

    padding:
        36px
        clamp(22px, 5vw, 80px)
        75px;

    flex: 1;
}


.breadcrumb {
    margin-bottom: 30px;

    display: flex;
    gap: 9px;

    color: #66666e;

    font-size: 8px;
    font-weight: 800;
}


.breadcrumb span:last-child {
    color: #9999a0;
}


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

.about-kicker {
    color: var(--red-bright);

    font-size: 8px;
    font-weight: 900;

    letter-spacing: 0.22em;
}


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

.about-hero {
    position: relative;

    min-height: 460px;

    margin-bottom: 60px;

    overflow: hidden;

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

    border-radius: 8px;

    background:
        linear-gradient(
            115deg,
            #111115,
            #09090b 60%
        );

    box-shadow:
        0 25px 70px rgba(0, 0, 0, 0.3);
}


.about-hero::before {
    content: "G";

    position: absolute;

    right: 4%;
    top: -95px;

    color:
        rgba(255, 255, 255, 0.022);

    font-size:
        clamp(380px, 40vw, 580px);

    font-weight: 950;

    line-height: 1;

    pointer-events: none;
}


.about-hero::after {
    content: "";

    position: absolute;

    right: -150px;
    bottom: -180px;

    width: 500px;
    height: 500px;

    border:
        1px solid rgba(227, 38, 46, 0.07);

    transform:
        rotate(45deg);

    pointer-events: none;
}


.about-hero-glow {
    position: absolute;

    left: 5%;
    bottom: -180px;

    width: 500px;
    height: 350px;

    border-radius: 50%;

    background:
        rgba(227, 38, 46, 0.13);

    filter:
        blur(110px);

    pointer-events: none;
}


.about-hero-content {
    position: relative;

    z-index: 2;

    min-height: 460px;

    max-width: 850px;

    padding:
        clamp(35px, 6vw, 75px);

    display: flex;
    flex-direction: column;
    justify-content: center;
}


.about-hero h1 {
    margin:
        7px
        0
        17px;

    color: #f4f4f5;

    font-size:
        clamp(48px, 7vw, 86px);

    font-weight: 950;

    line-height: 0.91;

    letter-spacing: -0.06em;
}


.about-lead {
    max-width: 690px;

    margin: 0;

    color: #898991;

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

    line-height: 1.85;
}


.about-actions {
    margin-top: 31px;

    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}


.about-primary-button,
.about-secondary-button {
    min-height: 42px;

    padding:
        0
        16px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 4px;

    font-size: 8px;
    font-weight: 900;

    letter-spacing: 0.08em;
}


.about-primary-button {
    min-width: 145px;

    justify-content: space-between;
    gap: 18px;

    border:
        1px solid rgba(227, 38, 46, 0.6);

    background:
        rgba(227, 38, 46, 0.14);

    color: #fff;

    transition:
        border-color 180ms ease,
        background 180ms ease,
        box-shadow 180ms ease;
}


.about-primary-button span {
    color: var(--red-bright);
}


.about-primary-button:hover {
    border-color:
        var(--red-bright);

    background:
        rgba(227, 38, 46, 0.25);

    box-shadow:
        0 0 22px rgba(227, 38, 46, 0.12);
}


.about-secondary-button {
    border:
        1px solid var(--border);

    background:
        rgba(255, 255, 255, 0.025);

    color: #8d8d95;
}


/* =========================================================
   SECTIONS
   ========================================================= */

.about-section {
    margin-bottom: 60px;
}


.about-section-heading {
    margin-bottom: 24px;
}


.about-section-heading h2 {
    margin:
        4px
        0
        0;

    color: #ececef;

    font-size:
        clamp(26px, 3vw, 38px);

    font-weight: 950;

    letter-spacing: -0.04em;
}


/* =========================================================
   TEXT CARDS
   ========================================================= */

.about-text-grid {
    display: grid;

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

    gap: 18px;
}


.about-text-card {
    min-height: 245px;

    padding:
        25px
        24px;

    position: relative;

    overflow: hidden;

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

    border-radius: 7px;

    background:
        linear-gradient(
            145deg,
            rgba(20, 20, 24, 0.88),
            rgba(9, 9, 12, 0.94)
        );

    transition:
        transform 180ms ease,
        border-color 180ms ease;
}


.about-text-card:hover {
    transform:
        translateY(-3px);

    border-color:
        rgba(227, 38, 46, 0.34);
}


.about-card-number {
    position: absolute;

    right: 18px;
    top: 10px;

    color:
        rgba(255, 255, 255, 0.035);

    font-size: 58px;
    font-weight: 950;
}


.about-text-card h3 {
    margin:
        80px
        0
        10px;

    color: #e6e6e9;

    font-size: 17px;
    font-weight: 950;
}


.about-text-card p {
    margin: 0;

    color: #777780;

    font-size: 10px;
    line-height: 1.75;
}


/* =========================================================
   PHILOSOPHY
   ========================================================= */

.about-philosophy {
    margin-bottom: 60px;

    padding:
        clamp(30px, 5vw, 55px);

    display: grid;

    grid-template-columns:
        1.15fr
        1fr;

    align-items: center;
    gap: 50px;

    border:
        1px solid rgba(227, 38, 46, 0.16);

    border-radius: 8px;

    background:
        radial-gradient(
            circle at 15% 80%,
            rgba(227, 38, 46, 0.10),
            transparent 35%
        ),
        linear-gradient(
            120deg,
            rgba(30, 11, 14, 0.6),
            rgba(12, 12, 15, 0.92)
        );
}


.about-philosophy h2 {
    margin:
        6px
        0
        15px;

    color: #f0f0f2;

    font-size:
        clamp(30px, 4vw, 48px);

    font-weight: 950;

    line-height: 0.98;

    letter-spacing: -0.045em;
}


.about-philosophy p {
    max-width: 650px;

    margin: 0;

    color: #85858d;

    font-size: 11px;
    line-height: 1.8;
}


.philosophy-grid {
    display: grid;

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

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

    border-radius: 6px;

    overflow: hidden;

    background:
        rgba(7, 7, 9, 0.4);
}


.philosophy-grid div {
    min-height: 125px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}


.philosophy-grid div:nth-child(odd) {
    border-right:
        1px solid var(--border);
}


.philosophy-grid div:nth-child(-n + 2) {
    border-bottom:
        1px solid var(--border);
}


.philosophy-grid strong {
    color: var(--red-bright);

    font-size: 27px;
    font-weight: 950;
}


.philosophy-grid span {
    margin-top: 4px;

    color: #6d6d75;

    font-size: 8px;
}


/* =========================================================
   FEATURES
   ========================================================= */

.feature-grid {
    display: grid;

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

    gap: 14px;
}


.feature-card {
    min-height: 115px;

    padding:
        19px
        20px;

    display: flex;
    align-items: flex-start;
    gap: 17px;

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

    border-radius: 6px;

    background:
        rgba(14, 14, 17, 0.74);
}


.feature-icon {
    width: 35px;
    height: 35px;

    flex-shrink: 0;

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

    border:
        1px solid rgba(227, 38, 46, 0.24);

    border-radius: 4px;

    background:
        rgba(227, 38, 46, 0.055);

    color: var(--red-bright);

    font-size: 8px;
    font-weight: 900;
}


.feature-card h3 {
    margin:
        2px
        0
        6px;

    color: #dcdce0;

    font-size: 11px;
    font-weight: 900;
}


.feature-card p {
    margin: 0;

    color: #6f6f77;

    font-size: 9px;
    line-height: 1.65;
}


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

.about-cta {
    padding:
        28px
        30px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 35px;

    border:
        1px solid rgba(227, 38, 46, 0.18);

    border-radius: 7px;

    background:
        linear-gradient(
            110deg,
            rgba(58, 12, 16, 0.45),
            rgba(13, 13, 16, 0.9)
        );
}


.about-cta h2 {
    margin:
        3px
        0
        4px;

    color: #eeeef0;

    font-size: 24px;
    font-weight: 950;
}


.about-cta p {
    margin: 0;

    color: #777780;

    font-size: 10px;
}


/* =========================================================
   FOOTER
   ========================================================= */

.about-footer {
    min-height: 80px;

    padding:
        20px
        clamp(22px, 5vw, 80px);

    display: grid;

    grid-template-columns:
        1fr
        auto
        1fr;

    align-items: center;

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

    color: #6e6e76;

    font-size: 9px;
}


.about-footer strong {
    color: #a0a0a7;
}


.about-footer a {
    justify-self: end;
}


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

@media (max-width: 900px) {

    .about-text-grid {
        grid-template-columns:
            1fr;
    }


    .about-text-card {
        min-height: 190px;
    }


    .about-text-card h3 {
        margin-top: 50px;
    }


    .about-philosophy {
        grid-template-columns:
            1fr;
    }

}


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

@media (max-width: 650px) {

    .about-header {
        padding:
            15px
            16px;
    }


    .about-brand-main {
        font-size: 23px;
    }


    .about-brand-dot {
        font-size: 16px;
    }


    .about-main {
        padding:
            25px
            13px
            45px;
    }


    .about-hero {
        min-height: 500px;

        margin-bottom: 42px;
    }


    .about-hero-content {
        min-height: 500px;

        padding:
            28px
            20px;
    }


    .about-hero h1 {
        font-size: 50px;
    }


    .about-actions {
        flex-direction: column;
    }


    .about-primary-button,
    .about-secondary-button {
        width: 100%;
    }


    .about-philosophy {
        padding:
            27px
            20px;

        gap: 30px;
    }


    .philosophy-grid div {
        min-height: 95px;
    }


    .feature-grid {
        grid-template-columns:
            1fr;
    }


    .about-cta {
        padding:
            24px
            20px;

        flex-direction: column;
        align-items: stretch;
    }


    .about-footer {
        grid-template-columns:
            1fr;

        gap: 9px;

        text-align: center;
    }


    .about-footer a {
        justify-self: center;
    }

}