/* =========================================================
   LUCENT SOFT
   ABOUT PAGE
   File: assets/css/about.css
========================================================= */

.about-page {
    overflow: hidden;
    background: #ffffff;
}


/* =========================================================
   SHARED LABELS
========================================================= */

.about-section-label,
.about-dark-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    font-size: 9px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: 1.25px;
}

.about-section-label {
    color: #1e5aa8;
}

.about-dark-label {
    color: #82b6ef;
}

.about-section-label::before,
.about-dark-label::before {
    content: "";

    display: block;

    width: 21px;
    height: 2px;

    flex: 0 0 auto;

    background: #9b1834;
}


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

.about-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    padding: 84px 0 0;

    color: #ffffff;

    background:
        linear-gradient(
            125deg,
            #091425 0%,
            #0e1d34 50%,
            #142b4b 100%
        );
}


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

.about-hero-bg {
    position: absolute;
    inset: 0;

    z-index: -1;

    overflow: hidden;

    pointer-events: none;
}

.about-hero-grid {
    position: absolute;
    inset: 0;

    opacity: 0.5;

    background-image:
        linear-gradient(
            rgba(255,255,255,0.021) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,0.021) 1px,
            transparent 1px
        );

    background-size: 70px 70px;

    animation: aboutGridMove 22s linear infinite;
}

.about-hero-glow {
    position: absolute;

    display: block;

    border-radius: 50%;

    pointer-events: none;
}

.about-hero-glow-one {
    width: 620px;
    height: 620px;

    right: -290px;
    top: -250px;

    background:
        radial-gradient(
            circle,
            rgba(49,113,199,0.18),
            transparent 70%
        );

    animation: aboutGlowOne 10s ease-in-out infinite alternate;
}

.about-hero-glow-two {
    width: 500px;
    height: 500px;

    left: -290px;
    bottom: -250px;

    background:
        radial-gradient(
            circle,
            rgba(155,24,52,0.11),
            transparent 70%
        );

    animation: aboutGlowTwo 12s ease-in-out infinite alternate;
}

.about-hero-word {
    position: absolute;

    right: -30px;
    top: 118px;

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

    font-size: 155px;
    line-height: 1;

    font-weight: 850;

    letter-spacing: -9px;

    white-space: nowrap;

    user-select: none;
}


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

.about-hero-top {
    display: flex;

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

    gap: 30px;

    padding-bottom: 18px;

    border-bottom:
        1px solid
        rgba(255,255,255,0.11);
}

.about-hero-kicker {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    color: #8eb9eb;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1.25px;
}

.about-hero-kicker > span {
    width: 22px;
    height: 2px;

    background: #b62b4b;
}

.about-hero-meta {
    display: flex;

    align-items: center;

    gap: 9px;

    color: rgba(193,211,231,0.46);

    font-size: 7.5px;

    font-weight: 750;

    letter-spacing: 0.8px;
}

.about-hero-meta i {
    display: block;

    width: 17px;
    height: 1px;

    background: rgba(255,255,255,0.16);
}


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

.about-hero-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1.12fr)
        minmax(370px, 0.88fr);

    gap: clamp(65px, 8vw, 120px);

    align-items: center;

    padding: 60px 0 55px;
}


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

.about-hero-content {
    max-width: 690px;

    animation: aboutFadeUp 0.7s ease both;
}

.about-hero-eyebrow {
    display: block;

    margin-bottom: 12px;

    color: #b74660;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 1.15px;
}

.about-hero-content h1 {
    max-width: 700px;

    margin: 0;

    color: #ffffff;

    font-size: clamp(40px, 4.1vw, 51px);
    line-height: 1.07;

    font-weight: 730;

    letter-spacing: -1.7px;
}

.about-hero-content h1 span {
    display: block;

    margin-top: 5px;

    color: #82b6ef;
}

.about-hero-lead {
    max-width: 640px;

    margin: 23px 0 0;

    color: rgba(234,241,249,0.88);

    font-size: 14px;
    line-height: 1.72;

    font-weight: 520;
}

.about-hero-copy {
    max-width: 650px;

    margin: 12px 0 0;

    color: rgba(195,210,228,0.59);

    font-size: 12px;
    line-height: 1.76;
}

.about-hero-actions {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 22px;

    margin-top: 29px;
}

.about-text-link {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: #eaf2fb;

    font-size: 10.8px;

    font-weight: 700;

    transition:
        color 0.25s ease,
        gap 0.25s ease;
}

.about-text-link svg {
    width: 15px;
    height: 15px;

    fill: none;

    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;

    transition: transform 0.25s ease;
}

.about-text-link:hover {
    gap: 12px;

    color: #83b8ef;
}

.about-text-link:hover svg {
    transform: translateX(2px);
}


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

.about-hero-structure {
    position: relative;

    border-top:
        1px solid
        rgba(255,255,255,0.13);

    border-bottom:
        1px solid
        rgba(255,255,255,0.13);

    animation: aboutStructureEnter 0.8s 0.1s ease both;
}

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

    position: absolute;

    left: 0;
    top: 0;
    bottom: 0;

    width: 1px;

    background:
        linear-gradient(
            to bottom,
            #b42c4a 0%,
            #4288d3 45%,
            rgba(255,255,255,0.08) 100%
        );
}

.about-hero-structure-head {
    display: flex;

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

    gap: 20px;

    padding: 14px 0 14px 21px;

    border-bottom:
        1px solid
        rgba(255,255,255,0.09);
}

.about-hero-structure-head > span {
    color: #82b5ec;

    font-size: 7px;

    font-weight: 800;

    letter-spacing: 1px;
}

.about-hero-structure-head > small {
    color: rgba(196,213,232,0.37);

    font-size: 7px;

    font-weight: 700;

    letter-spacing: 0.8px;
}


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

.about-hero-principle {
    display: grid;

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

    gap: 16px;

    padding: 19px 0 19px 21px;

    border-bottom:
        1px solid
        rgba(255,255,255,0.08);

    transition:
        padding-left 0.3s ease,
        background 0.3s ease;
}

.about-hero-principle:last-child {
    border-bottom: 0;
}

.about-hero-principle:hover {
    padding-left: 27px;

    background:
        linear-gradient(
            90deg,
            rgba(63,130,208,0.08),
            transparent 80%
        );
}

.about-hero-principle-number {
    color: rgba(126,177,233,0.56);

    font-size: 8px;

    font-weight: 800;
}

.about-hero-principle small {
    display: block;

    margin-bottom: 5px;

    color: #b1435d;

    font-size: 6.5px;

    font-weight: 800;

    letter-spacing: 0.85px;
}

.about-hero-principle strong {
    display: block;

    color: #f0f6fc;

    font-size: 12.5px;
    line-height: 1.4;

    font-weight: 650;
}

.about-hero-principle p {
    max-width: 390px;

    margin: 6px 0 0;

    color: rgba(188,205,224,0.49);

    font-size: 9.8px;
    line-height: 1.62;
}


/* =========================================================
   HERO PLATFORM RAIL
========================================================= */

.about-hero-platforms {
    display: grid;

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

    border-top:
        1px solid
        rgba(255,255,255,0.11);
}

.about-hero-platform {
    display: grid;

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

    gap: 2px 12px;

    align-items: center;

    padding: 19px 22px;

    border-right:
        1px solid
        rgba(255,255,255,0.09);

    transition:
        background 0.3s ease;
}

.about-hero-platform:last-child {
    border-right: 0;
}

.about-hero-platform:hover {
    background:
        rgba(59,127,206,0.055);
}

.about-hero-platform > span {
    grid-row: 1 / span 2;

    color: rgba(124,176,233,0.48);

    font-size: 8px;

    font-weight: 800;
}

.about-hero-platform > strong {
    color: #f3f7fc;

    font-size: 13px;

    font-weight: 650;
}

.about-hero-platform > small {
    color: rgba(168,191,216,0.4);

    font-size: 6.5px;

    font-weight: 800;

    letter-spacing: 0.7px;
}


/* =========================================================
   COMPANY
========================================================= */

.about-company {
    position: relative;

    padding: 88px 0 64px;

    background:
        linear-gradient(
            180deg,
            #f7f9fc 0%,
            #ffffff 100%
        );
}

.about-company-layout {
    display: grid;

    grid-template-columns:
        minmax(300px, 0.82fr)
        minmax(0, 1.18fr);

    gap: clamp(70px, 9vw, 135px);

    align-items: start;
}

.about-company-heading {
    position: relative;
}

.about-company-heading .about-section-label {
    margin-bottom: 17px;
}

.about-company-heading h2 {
    max-width: 500px;

    margin: 0;

    color: #14213d;

    font-size: clamp(32px, 3.2vw, 41px);
    line-height: 1.14;

    font-weight: 720;

    letter-spacing: -1.15px;
}

.about-company-heading h2 span {
    display: block;

    margin-top: 4px;

    color: #1e5aa8;
}


/* =========================================================
   COMPANY CONTENT
========================================================= */

.about-company-content {
    position: relative;

    padding-left: 31px;

    border-left:
        1px solid
        #d5dee8;
}

.about-company-content::before {
    content: "";

    position: absolute;

    left: -1px;
    top: 0;

    width: 2px;
    height: 65px;

    background:
        linear-gradient(
            #9b1834,
            #1e5aa8
        );
}

.about-company-content p {
    max-width: 700px;

    margin: 0 0 13px;

    color: #6d7a8a;

    font-size: 12px;
    line-height: 1.76;
}

.about-company-content p:last-child {
    margin-bottom: 0;
}

.about-company-content .about-company-lead {
    margin-bottom: 16px;

    color: #263a52;

    font-size: 14px;
    line-height: 1.72;

    font-weight: 550;
}


/* =========================================================
   COMPANY RAIL
========================================================= */

.about-company-rail {
    display: flex;

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

    gap: 16px;

    margin-top: 54px;

    padding: 17px 0;

    border-top:
        1px solid
        #dbe3ec;

    border-bottom:
        1px solid
        #dbe3ec;
}

.about-company-rail > span {
    color: #637186;

    font-size: 7px;

    font-weight: 800;

    letter-spacing: 0.75px;

    white-space: nowrap;
}

.about-company-rail > i {
    display: block;

    width: 100%;
    max-width: 70px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            #d6dee7,
            #9eb6d0,
            #d6dee7
        );
}


/* =========================================================
   PLATFORMS
========================================================= */

.about-platforms {
    position: relative;

    padding: 84px 0;

    background: #ffffff;
}

.about-platforms-head {
    display: grid;

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

    gap: clamp(55px, 7vw, 95px);

    align-items: end;

    margin-bottom: 42px;
}

.about-platforms-head .about-section-label {
    margin-bottom: 16px;
}

.about-platforms-head h2 {
    margin: 0;

    color: #14213d;

    font-size: clamp(32px, 3.2vw, 41px);
    line-height: 1.14;

    font-weight: 720;

    letter-spacing: -1.1px;
}

.about-platforms-head h2 span {
    display: block;

    margin-top: 4px;

    color: #1e5aa8;
}

.about-platforms-head > p {
    max-width: 500px;

    margin: 0;

    color: #718091;

    font-size: 11.8px;
    line-height: 1.74;
}


/* =========================================================
   PLATFORM LIST
========================================================= */

.about-platforms-list {
    border-top:
        1px solid
        #d8e1ea;

    border-bottom:
        1px solid
        #d8e1ea;
}

.about-platform-row {
    position: relative;

    display: grid;

    grid-template-columns:
        55px
        minmax(145px, 0.55fr)
        minmax(300px, 1.2fr)
        minmax(190px, 0.75fr)
        42px;

    gap: clamp(22px, 3vw, 42px);

    align-items: center;

    padding: 27px 0;

    border-bottom:
        1px solid
        #dce4ec;

    transition:
        background 0.3s ease;
}

.about-platform-row:last-child {
    border-bottom: 0;
}

.about-platform-row::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0;
    bottom: 0;

    width: 2px;

    background:
        linear-gradient(
            #9b1834,
            #1e5aa8
        );

    transform: scaleY(0);

    transform-origin: center;

    transition:
        transform 0.35s
        cubic-bezier(0.22, 1, 0.36, 1);
}

.about-platform-row::after {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 0;

    opacity: 0;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(30,90,168,0.05),
            rgba(30,90,168,0.012) 70%,
            transparent
        );

    transition: opacity 0.3s ease;
}

.about-platform-row:hover::before {
    transform: scaleY(1);
}

.about-platform-row:hover::after {
    opacity: 1;
}

.about-platform-row > * {
    position: relative;
    z-index: 1;
}


/* =========================================================
   PLATFORM INDEX
========================================================= */

.about-platform-index {
    padding-left: 13px;

    color: #1e5aa8;

    font-size: 18px;

    font-weight: 650;

    letter-spacing: -0.3px;
}


/* =========================================================
   PLATFORM NAME
========================================================= */

.about-platform-name > span {
    display: block;

    margin-bottom: 6px;

    color: #9b1834;

    font-size: 6.5px;

    font-weight: 800;

    letter-spacing: 0.75px;
}

.about-platform-name h3 {
    margin: 0;

    color: #192a42;

    font-size: 20px;

    font-weight: 680;

    letter-spacing: -0.35px;
}


/* =========================================================
   PLATFORM DESCRIPTION
========================================================= */

.about-platform-description strong {
    display: block;

    max-width: 470px;

    color: #2a3d55;

    font-size: 11.5px;
    line-height: 1.55;

    font-weight: 650;
}

.about-platform-description p {
    max-width: 520px;

    margin: 7px 0 0;

    color: #788596;

    font-size: 10.3px;
    line-height: 1.63;
}


/* =========================================================
   PLATFORM CAPABILITIES
========================================================= */

.about-platform-capabilities {
    padding-left: 21px;

    border-left:
        1px solid
        #d9e1e9;
}

.about-platform-capabilities > span {
    display: block;

    position: relative;

    padding: 3px 0 3px 11px;

    color: #5f6e81;

    font-size: 8.5px;
    line-height: 1.45;

    font-weight: 580;
}

.about-platform-capabilities > span::before {
    content: "";

    position: absolute;

    left: 0;
    top: 9px;

    width: 4px;
    height: 1px;

    background: #8ca5c0;
}


/* =========================================================
   PLATFORM LINK
========================================================= */

.about-platform-link {
    display: flex;

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

    width: 39px;
    height: 39px;

    border:
        1px solid
        #d0dae4;

    color: #1e5aa8;

    background: #ffffff;

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

.about-platform-link svg {
    width: 14px;
    height: 14px;

    fill: none;

    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;

    transition: transform 0.25s ease;
}

.about-platform-row:hover .about-platform-link {
    color: #ffffff;

    background: #1e5aa8;

    border-color: #1e5aa8;
}

.about-platform-row:hover .about-platform-link svg {
    transform: translateX(2px);
}


/* =========================================================
   THINKING
========================================================= */

.about-thinking {
    position: relative;

    isolation: isolate;

    overflow: hidden;

    padding: 86px 0;

    color: #ffffff;

    background:
        linear-gradient(
            130deg,
            #0b1728 0%,
            #10213a 55%,
            #142b4a 100%
        );
}


/* =========================================================
   THINKING BACKGROUND
========================================================= */

.about-thinking-bg {
    position: absolute;
    inset: 0;

    z-index: -1;

    overflow: hidden;

    pointer-events: none;
}

.about-thinking-grid {
    position: absolute;
    inset: 0;

    opacity: 0.5;

    background-image:
        linear-gradient(
            rgba(255,255,255,0.018) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,0.018) 1px,
            transparent 1px
        );

    background-size: 72px 72px;
}

.about-thinking-word {
    position: absolute;

    left: -25px;
    bottom: -30px;

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

    font-size: 150px;
    line-height: 1;

    font-weight: 850;

    letter-spacing: -8px;

    user-select: none;
}


/* =========================================================
   THINKING LAYOUT
========================================================= */

.about-thinking-layout {
    display: grid;

    grid-template-columns:
        minmax(300px, 0.78fr)
        minmax(0, 1.22fr);

    gap: clamp(70px, 9vw, 135px);

    align-items: start;
}

.about-thinking-intro {
    position: relative;

    max-width: 470px;
}

.about-thinking-intro .about-dark-label {
    margin-bottom: 17px;
}

.about-thinking-intro h2 {
    margin: 0;

    color: #ffffff;

    font-size: clamp(31px, 3.1vw, 40px);
    line-height: 1.16;

    font-weight: 710;

    letter-spacing: -1.05px;
}

.about-thinking-intro h2 span {
    display: block;

    margin-top: 4px;

    color: #7fb3ec;
}

.about-thinking-intro > p {
    margin: 20px 0 0;

    color: rgba(191,207,226,0.57);

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


/* =========================================================
   THINKING LIST
========================================================= */

.about-thinking-list {
    border-top:
        1px solid
        rgba(255,255,255,0.11);
}

.about-thinking-list article {
    display: grid;

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

    gap: 18px;

    padding: 22px 0;

    border-bottom:
        1px solid
        rgba(255,255,255,0.1);

    transition:
        padding-left 0.3s ease,
        background 0.3s ease;
}

.about-thinking-list article:hover {
    padding-left: 13px;

    background:
        linear-gradient(
            90deg,
            rgba(61,130,211,0.07),
            transparent
        );
}

.about-thinking-number {
    color: rgba(119,174,235,0.52);

    font-size: 8px;

    font-weight: 800;
}

.about-thinking-list small {
    display: block;

    margin-bottom: 5px;

    color: #b7445e;

    font-size: 6.5px;

    font-weight: 800;

    letter-spacing: 0.85px;
}

.about-thinking-list h3 {
    margin: 0;

    color: #f2f6fb;

    font-size: 15px;
    line-height: 1.4;

    font-weight: 650;
}

.about-thinking-list p {
    max-width: 590px;

    margin: 7px 0 0;

    color: rgba(190,207,226,0.49);

    font-size: 10.5px;
    line-height: 1.66;
}


/* =========================================================
   SCOPE
========================================================= */

.about-scope {
    position: relative;

    padding: 86px 0;

    background:
        linear-gradient(
            180deg,
            #f6f8fb 0%,
            #ffffff 100%
        );
}

.about-scope-head {
    display: grid;

    grid-template-columns:
        minmax(0, 0.8fr)
        minmax(0, 1.05fr)
        minmax(280px, 0.75fr);

    gap: 42px;

    align-items: end;

    margin-bottom: 39px;
}

.about-scope-head .about-section-label {
    align-self: start;

    margin-top: 8px;
}

.about-scope-head h2 {
    margin: 0;

    color: #14213d;

    font-size: clamp(31px, 3vw, 39px);
    line-height: 1.15;

    font-weight: 710;

    letter-spacing: -1px;
}

.about-scope-head h2 span {
    display: block;

    color: #1e5aa8;
}

.about-scope-head > p {
    margin: 0;

    color: #748191;

    font-size: 10.8px;
    line-height: 1.7;
}


/* =========================================================
   SCOPE LAYOUT
========================================================= */

.about-scope-layout {
    display: grid;

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

    border-top:
        1px solid
        #d8e1ea;

    border-left:
        1px solid
        #d8e1ea;
}

.about-scope-item {
    position: relative;

    min-height: 225px;

    padding: 25px 24px;

    border-right:
        1px solid
        #d8e1ea;

    border-bottom:
        1px solid
        #d8e1ea;

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

    transition:
        background 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.about-scope-item::before {
    content: "";

    position: absolute;

    left: -1px;
    top: -1px;

    width: 2px;
    height: 0;

    background:
        linear-gradient(
            #9b1834,
            #1e5aa8
        );

    transition: height 0.35s ease;
}

.about-scope-item:hover {
    z-index: 2;

    transform: translateY(-4px);

    background: #ffffff;

    box-shadow:
        0 18px 42px
        rgba(20,33,61,0.075);
}

.about-scope-item:hover::before {
    height: calc(100% + 2px);
}


/* =========================================================
   SCOPE TOP
========================================================= */

.about-scope-top {
    display: flex;

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

    gap: 20px;

    margin-bottom: 41px;
}

.about-scope-top > span {
    color: #1e5aa8;

    font-size: 9px;

    font-weight: 800;
}

.about-scope-top > small {
    color: #9b1834;

    font-size: 6.5px;

    font-weight: 800;

    letter-spacing: 0.8px;
}

.about-scope-item h3 {
    max-width: 280px;

    margin: 0;

    color: #1b2c44;

    font-size: 15px;
    line-height: 1.4;

    font-weight: 660;
}

.about-scope-item p {
    max-width: 310px;

    margin: 9px 0 0;

    color: #768394;

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


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

.about-principles {
    padding: 84px 0;

    background: #ffffff;
}

.about-principles-layout {
    display: grid;

    grid-template-columns:
        minmax(300px, 0.72fr)
        minmax(0, 1.28fr);

    gap: clamp(70px, 9vw, 135px);

    align-items: start;
}


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

.about-principles-heading {
    max-width: 440px;
}

.about-principles-heading .about-section-label {
    margin-bottom: 17px;
}

.about-principles-heading h2 {
    margin: 0;

    color: #14213d;

    font-size: clamp(31px, 3.1vw, 40px);
    line-height: 1.16;

    font-weight: 710;

    letter-spacing: -1px;
}

.about-principles-heading h2 span {
    display: block;

    margin-top: 4px;

    color: #1e5aa8;
}

.about-principles-heading > p {
    margin: 18px 0 0;

    color: #748191;

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


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

.about-principles-list {
    border-top:
        1px solid
        #d9e2eb;
}

.about-principles-list article {
    display: grid;

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

    gap: 18px;

    padding: 21px 0;

    border-bottom:
        1px solid
        #d9e2eb;

    transition:
        padding-left 0.3s ease,
        background 0.3s ease;
}

.about-principles-list article:hover {
    padding-left: 12px;

    background:
        linear-gradient(
            90deg,
            rgba(30,90,168,0.045),
            transparent
        );
}

.about-principles-list article > span {
    color: #1e5aa8;

    font-size: 8px;

    font-weight: 800;
}

.about-principles-list strong {
    display: block;

    color: #263950;

    font-size: 13px;

    font-weight: 650;
}

.about-principles-list p {
    max-width: 580px;

    margin: 6px 0 0;

    color: #778495;

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


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

.about-cta {
    position: relative;

    isolation: isolate;

    overflow: hidden;

    padding: 67px 0;

    background:
        linear-gradient(
            120deg,
            #0c182a 0%,
            #10223c 55%,
            #173459 100%
        );
}

.about-cta-bg {
    position: absolute;
    inset: 0;

    z-index: -1;

    pointer-events: none;
}

.about-cta-grid {
    position: absolute;
    inset: 0;

    opacity: 0.48;

    background-image:
        linear-gradient(
            rgba(255,255,255,0.018) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,0.018) 1px,
            transparent 1px
        );

    background-size: 70px 70px;
}

.about-cta-glow {
    position: absolute;

    right: -190px;
    top: 50%;

    width: 430px;
    height: 430px;

    border-radius: 50%;

    transform: translateY(-50%);

    background:
        radial-gradient(
            circle,
            rgba(57,128,211,0.18),
            transparent 70%
        );

    animation:
        aboutCtaGlow
        8s ease-in-out infinite alternate;
}


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

.about-cta-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1.1fr)
        minmax(300px, 0.9fr);

    gap: clamp(60px, 8vw, 110px);

    align-items: center;
}

.about-cta-content > span {
    display: block;

    margin-bottom: 10px;

    color: #81b3ea;

    font-size: 7.5px;

    font-weight: 800;

    letter-spacing: 1px;
}

.about-cta-content h2 {
    max-width: 650px;

    margin: 0;

    color: #ffffff;

    font-size: clamp(31px, 3.3vw, 42px);
    line-height: 1.14;

    font-weight: 710;

    letter-spacing: -1.1px;
}

.about-cta-content h2 strong {
    display: block;

    margin-top: 4px;

    color: #7fb3ec;

    font-weight: inherit;
}

.about-cta-action {
    max-width: 440px;

    padding-left: 27px;

    border-left:
        1px solid
        rgba(255,255,255,0.13);
}

.about-cta-action p {
    margin: 0 0 20px;

    color: rgba(195,211,229,0.58);

    font-size: 11.5px;
    line-height: 1.72;
}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes aboutFadeUp {

    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


@keyframes aboutStructureEnter {

    from {
        opacity: 0;
        transform: translateX(22px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }

}


@keyframes aboutGridMove {

    from {
        background-position: 0 0;
    }

    to {
        background-position: 70px 70px;
    }

}


@keyframes aboutGlowOne {

    from {
        transform: translate(0, 0) scale(1);
    }

    to {
        transform: translate(-35px, 35px) scale(1.08);
    }

}


@keyframes aboutGlowTwo {

    from {
        transform: translate(0, 0) scale(1);
    }

    to {
        transform: translate(35px, -25px) scale(1.08);
    }

}


@keyframes aboutCtaGlow {

    from {
        transform:
            translateY(-50%)
            scale(1);
    }

    to {
        transform:
            translateY(-50%)
            scale(1.12);
    }

}


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

@media (max-width: 1120px) {

    .about-hero {
        padding-top: 76px;
    }

    .about-hero-layout {
        grid-template-columns:
            minmax(0, 1.05fr)
            minmax(350px, 0.95fr);

        gap: 55px;
    }

    .about-company-layout,
    .about-thinking-layout,
    .about-principles-layout {
        gap: 65px;
    }

    .about-platform-row {
        grid-template-columns:
            45px
            135px
            minmax(270px, 1fr)
            minmax(170px, 0.65fr)
            40px;

        gap: 24px;
    }

    .about-scope-head {
        grid-template-columns:
            180px
            minmax(0, 1fr)
            280px;
    }

}


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

@media (max-width: 950px) {

    .about-hero {
        padding-top: 68px;
    }

    .about-hero-layout {
        grid-template-columns: 1fr;

        gap: 42px;

        padding: 45px 0;
    }

    .about-hero-content {
        max-width: 760px;
    }

    .about-hero-structure {
        max-width: 720px;
    }


    /* COMPANY */

    .about-company {
        padding: 70px 0 55px;
    }

    .about-company-layout {
        grid-template-columns: 1fr;

        gap: 32px;
    }

    .about-company-heading {
        max-width: 650px;
    }

    .about-company-content {
        max-width: 760px;
    }


    /* PLATFORMS */

    .about-platforms {
        padding: 70px 0;
    }

    .about-platforms-head {
        grid-template-columns: 1fr;

        gap: 20px;
    }

    .about-platforms-head > p {
        max-width: 650px;
    }

    .about-platform-row {
        grid-template-columns:
            50px
            150px
            minmax(0, 1fr)
            40px;

        gap: 22px;
    }

    .about-platform-capabilities {
        grid-column: 3;
        grid-row: 2;

        display: grid;

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

        gap: 2px 18px;

        margin-top: -5px;

        padding: 13px 0 0;

        border-left: 0;

        border-top:
            1px solid
            #d9e1e9;
    }

    .about-platform-link {
        grid-column: 4;
        grid-row: 1;

        align-self: start;
    }


    /* THINKING */

    .about-thinking {
        padding: 70px 0;
    }

    .about-thinking-layout {
        grid-template-columns: 1fr;

        gap: 37px;
    }

    .about-thinking-intro {
        max-width: 650px;
    }


    /* SCOPE */

    .about-scope {
        padding: 70px 0;
    }

    .about-scope-head {
        grid-template-columns: 1fr;

        gap: 14px;

        max-width: 720px;
    }

    .about-scope-head .about-section-label {
        margin-top: 0;
    }

    .about-scope-layout {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    /* PRINCIPLES */

    .about-principles {
        padding: 70px 0;
    }

    .about-principles-layout {
        grid-template-columns: 1fr;

        gap: 35px;
    }

    .about-principles-heading {
        max-width: 650px;
    }


    /* CTA */

    .about-cta-layout {
        gap: 45px;
    }

}


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

@media (max-width: 650px) {

    /* HERO */

    .about-hero {
        padding-top: 50px;
    }

    .about-hero-word {
        top: 115px;
        right: -15px;

        font-size: 78px;

        letter-spacing: -5px;
    }

    .about-hero-grid {
        background-size: 45px 45px;
    }

    .about-hero-top {
        display: block;

        padding-bottom: 14px;
    }

    .about-hero-kicker {
        font-size: 8.3px;
    }

    .about-hero-meta {
        margin-top: 10px;

        flex-wrap: wrap;

        font-size: 6.5px;
    }

    .about-hero-meta i {
        width: 10px;
    }

    .about-hero-layout {
        gap: 34px;

        padding: 32px 0;
    }

    .about-hero-eyebrow {
        font-size: 7px;
    }

    .about-hero-content h1 {
        font-size: 32px;
        line-height: 1.12;

        letter-spacing: -0.9px;
    }

    .about-hero-content h1 span {
        display: inline;
    }

    .about-hero-lead {
        margin-top: 18px;

        font-size: 12.8px;
        line-height: 1.67;
    }

    .about-hero-copy {
        font-size: 11px;
        line-height: 1.68;
    }

    .about-hero-actions {
        display: grid;

        grid-template-columns: 1fr;

        gap: 16px;

        margin-top: 23px;
    }

    .about-hero-actions .site-btn {
        width: 100%;
    }


    /* HERO STRUCTURE */

    .about-hero-structure-head {
        padding-left: 15px;
    }

    .about-hero-principle {
        grid-template-columns:
            28px
            minmax(0, 1fr);

        gap: 10px;

        padding:
            17px 0
            17px 15px;
    }

    .about-hero-principle:hover {
        padding-left: 15px;
    }

    .about-hero-principle strong {
        font-size: 11.5px;
    }

    .about-hero-principle p {
        font-size: 9.3px;
    }


    /* PLATFORM RAIL */

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

    .about-hero-platform {
        padding: 15px 5px;

        border-right: 0;

        border-bottom:
            1px solid
            rgba(255,255,255,0.09);
    }

    .about-hero-platform:last-child {
        border-bottom: 0;
    }


    /* COMPANY */

    .about-company {
        padding: 55px 0 45px;
    }

    .about-company-heading h2,
    .about-platforms-head h2,
    .about-thinking-intro h2,
    .about-scope-head h2,
    .about-principles-heading h2 {
        font-size: 28px;
        line-height: 1.18;

        letter-spacing: -0.65px;
    }

    .about-company-heading h2 span,
    .about-platforms-head h2 span,
    .about-thinking-intro h2 span,
    .about-scope-head h2 span,
    .about-principles-heading h2 span {
        display: inline;
    }

    .about-company-content {
        padding-left: 18px;
    }

    .about-company-content .about-company-lead {
        font-size: 12.8px;
    }

    .about-company-content p {
        font-size: 11px;
        line-height: 1.7;
    }

    .about-company-rail {
        display: grid;

        grid-template-columns:
            1fr 1fr;

        gap: 0;

        margin-top: 37px;

        padding: 0;

        border-bottom: 0;
    }

    .about-company-rail > span {
        padding: 13px 8px;

        white-space: normal;

        border-right:
            1px solid
            #dbe3ec;

        border-bottom:
            1px solid
            #dbe3ec;
    }

    .about-company-rail > span:nth-of-type(even) {
        border-right: 0;
    }

    .about-company-rail > i {
        display: none;
    }


    /* PLATFORMS */

    .about-platforms {
        padding: 55px 0;
    }

    .about-platforms-head {
        margin-bottom: 30px;
    }

    .about-platform-row {
        display: grid;

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

        gap: 13px;

        padding: 22px 0;
    }

    .about-platform-index {
        grid-column: 1;
        grid-row: 1;

        padding-left: 7px;

        font-size: 15px;
    }

    .about-platform-name {
        grid-column: 2;
        grid-row: 1;
    }

    .about-platform-name h3 {
        font-size: 18px;
    }

    .about-platform-description {
        grid-column: 2 / 4;
        grid-row: 2;
    }

    .about-platform-description strong {
        font-size: 10.8px;
    }

    .about-platform-description p {
        font-size: 9.8px;
    }

    .about-platform-capabilities {
        grid-column: 2 / 4;
        grid-row: 3;

        grid-template-columns: 1fr;

        padding-top: 11px;
    }

    .about-platform-link {
        grid-column: 3;
        grid-row: 1;

        width: 36px;
        height: 36px;
    }


    /* THINKING */

    .about-thinking {
        padding: 55px 0;
    }

    .about-thinking-word {
        font-size: 80px;
        letter-spacing: -4px;
    }

    .about-thinking-intro > p {
        font-size: 10.8px;
    }

    .about-thinking-list article {
        grid-template-columns:
            31px
            minmax(0, 1fr);

        gap: 11px;

        padding: 19px 0;
    }

    .about-thinking-list article:hover {
        padding-left: 0;
    }

    .about-thinking-list h3 {
        font-size: 13px;
    }

    .about-thinking-list p {
        font-size: 9.8px;
    }


    /* SCOPE */

    .about-scope {
        padding: 55px 0;
    }

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

    .about-scope-item {
        min-height: auto;

        padding: 21px 19px;
    }

    .about-scope-item:hover {
        transform: none;
    }

    .about-scope-top {
        margin-bottom: 27px;
    }


    /* PRINCIPLES */

    .about-principles {
        padding: 55px 0;
    }

    .about-principles-list article {
        grid-template-columns:
            34px
            minmax(0, 1fr);

        gap: 10px;

        padding: 18px 0;
    }

    .about-principles-list article:hover {
        padding-left: 0;
    }


    /* CTA */

    .about-cta {
        padding: 50px 0;
    }

    .about-cta-layout {
        grid-template-columns: 1fr;

        gap: 26px;
    }

    .about-cta-content h2 {
        font-size: 29px;
        line-height: 1.17;
    }

    .about-cta-content h2 strong {
        display: inline;
    }

    .about-cta-action {
        max-width: none;

        padding-left: 17px;
    }

    .about-cta-action p {
        font-size: 10.8px;
    }

}


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

@media (max-width: 380px) {

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

    .about-company-heading h2,
    .about-platforms-head h2,
    .about-thinking-intro h2,
    .about-scope-head h2,
    .about-principles-heading h2 {
        font-size: 26px;
    }

    .about-cta-content h2 {
        font-size: 27px;
    }

}


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

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

    .about-hero-grid,
    .about-hero-glow,
    .about-hero-content,
    .about-hero-structure,
    .about-cta-glow {
        animation: none !important;
    }

    .about-text-link,
    .about-text-link svg,
    .about-hero-principle,
    .about-platform-row,
    .about-platform-row::before,
    .about-platform-row::after,
    .about-platform-link,
    .about-platform-link svg,
    .about-thinking-list article,
    .about-scope-item,
    .about-scope-item::before,
    .about-principles-list article {
        transition: none !important;
    }

}