/* =========================================================
   ASSETPRO HOME
   Premium Dark Blue / Electric Blue
========================================================= */

:root {
    --home-bg: #050b16;
    --home-bg-soft: #08111f;
    --home-card: #0b1626;
    --home-card-light: #0e1c2f;

    --blue: #1677ff;
    --blue-light: #4da3ff;
    --blue-bright: #2687ff;

    --text: #f5f8fc;
    --text-soft: #aab8ca;
    --text-muted: #718197;

    --border: rgba(255, 255, 255, 0.08);
    --border-blue: rgba(22, 119, 255, 0.28);

    --container: 1240px;
}


/* =========================================================
   GLOBAL
========================================================= */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--home-bg);
    color: var(--text);
    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
    overflow-x: hidden;
}

body.menu-open {
    overflow: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

.container {
    width: min(
        calc(100% - 48px),
        var(--container)
    );

    margin: 0 auto;
}

/* =========================================================
   ASSETPRO ABOUT - STABILITY FIX
========================================================= */

html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

html {
    overflow-x: clip;
}

body {
    position: relative;
}

main {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
}

.about-hero,
.story-section,
.philosophy-section,
.platform-section,
.values-section,
.about-security-section,
.about-global-section,
.about-faq-section,
.about-cta {
    width: 100%;
    max-width: 100%;
    overflow: clip;
}

.about-hero-container,
.story-layout,
.philosophy-layout,
.platform-layout,
.values-grid,
.about-security-layout,
.global-visual {
    min-width: 0;
}


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

.about-hero {

    min-height: 720px;

    display: flex;

    align-items: center;

    padding: 130px 0 100px;

    background:

        radial-gradient(
            circle at 15% 35%,
            rgba(37, 99, 235, .15),
            transparent 35%
        ),

        radial-gradient(
            circle at 85% 65%,
            rgba(34, 211, 238, .07),
            transparent 35%
        ),

        var(--about-bg);

}


.about-grid {

    position: absolute;

    inset: 0;

    opacity: .24;

    background-image:

        linear-gradient(
            rgba(96,165,250,.045) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(96,165,250,.045) 1px,
            transparent 1px
        );

    background-size: 70px 70px;

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

}


.about-glow {

    position: absolute;

    border-radius: 50%;

    filter: blur(100px);

    pointer-events: none;

}


.about-glow-one {

    width: 320px;
    height: 320px;

    right: 15%;
    top: 10%;

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

}


.about-glow-two {

    width: 250px;
    height: 250px;

    left: 15%;
    bottom: 5%;

    background:
        rgba(34,211,238,.06);

}


.about-hero-container {

    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        1fr 1fr;

    align-items: center;

    gap: 80px;

}


.about-eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    padding:
        8px 14px;

    border:
        1px solid
        rgba(59,130,246,.2);

    border-radius: 100px;

    color: #93c5fd;

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

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.6px;

}


.about-eyebrow i {

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background:
        var(--about-green);

    box-shadow:
        0 0 15px
        rgba(74,222,128,.7);

    animation:
        aboutPulse 2s infinite;

}


.about-hero h1 {

    max-width: 700px;

    margin:
        25px 0 22px;

    color: white;

    font-size:
        clamp(48px, 6vw, 76px);

    line-height: 1.02;

    letter-spacing: -3px;

}


.about-hero h1 span {

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

}


.about-hero-content > p {

    max-width: 580px;

    color:
        var(--about-muted);

    font-size: 17px;

    line-height: 1.8;

}


.about-hero-actions {

    display: flex;

    gap: 13px;

    margin-top: 30px;

}


.about-primary-button,
.about-secondary-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    min-height: 48px;

    padding:
        0 20px;

    border-radius: 10px;

    text-decoration: none;

    font-size: 13px;

    font-weight: 700;

    transition: .3s ease;

}


.about-primary-button {

    color: white;

    background:
        var(--about-blue);

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

}


.about-primary-button:hover {

    transform:
        translateY(-3px);

    background:
        #3b82f6;

}


.about-secondary-button {

    color: #c9d8ec;

    border:
        1px solid
        rgba(96,165,250,.17);

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

}


.about-secondary-button:hover {

    color: white;

    border-color:
        rgba(96,165,250,.35);

    transform:
        translateY(-3px);

}


.about-hero-meta {

    display: flex;

    gap: 35px;

    margin-top: 45px;

}


.about-hero-meta div {

    padding-left: 14px;

    border-left:
        1px solid
        rgba(96,165,250,.25);

}


.about-hero-meta strong {

    display: block;

    color: white;

    font-size: 14px;

}


.about-hero-meta span {

    display: block;

    margin-top: 5px;

    color: #627d9f;

    font-size: 10px;

}


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

.about-hero-visual {

    position: relative;

    min-height: 500px;

    display: flex;

    align-items: center;

    justify-content: center;

}


.about-orbit {

    position: absolute;

    border:
        1px solid
        rgba(59,130,246,.14);

    border-radius: 50%;

}


.about-orbit-one {

    width: 480px;
    height: 480px;

    animation:
        aboutOrbit 25s linear infinite;

}


.about-orbit-two {

    width: 365px;
    height: 365px;

    border-color:
        rgba(34,211,238,.12);

    animation:
        aboutOrbitReverse 19s linear infinite;

}


.about-orbit-three {

    width: 245px;
    height: 245px;

    border-color:
        rgba(96,165,250,.1);

}


.about-core {

    position: relative;

    z-index: 3;

    width: 155px;
    height: 155px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    border:
        1px solid
        rgba(96,165,250,.4);

    background:

        radial-gradient(
            circle,
            #12437f,
            #06172f 68%
        );

    box-shadow:

        0 0 85px
        rgba(37,99,235,.23),

        inset 0 0 30px
        rgba(96,165,250,.12);

    animation:
        aboutCoreFloat 5s ease-in-out infinite;

}


.about-core-inner {

    display: flex;

    flex-direction: column;

    align-items: center;

}


.about-core-inner span {

    color: white;

    font-size: 50px;

    font-weight: 800;

    letter-spacing: -4px;

}


.about-core-inner small {

    margin-top: 2px;

    color:
        #60a5fa;

    font-size: 7px;

    letter-spacing: 2px;

}


.about-floating {

    position: absolute;

    z-index: 4;

    padding:
        10px 14px;

    border:
        1px solid
        rgba(96,165,250,.15);

    border-radius: 10px;

    color: #cbdcf0;

    background:
        rgba(7,25,51,.8);

    backdrop-filter:
        blur(15px);

    box-shadow:
        0 15px 35px
        rgba(0,0,0,.25);

    font-size: 11px;

    animation:
        aboutFloat 4s ease-in-out infinite;

}


.about-floating span {

    margin-right: 7px;

    color:
        #60a5fa;

    font-size: 9px;

}


.about-floating-one {

    top: 12%;
    left: 2%;

}


.about-floating-two {

    top: 48%;
    right: -2%;

    animation-delay: 1s;

}


.about-floating-three {

    bottom: 10%;
    left: 10%;

    animation-delay: 2s;

}


.about-floating-four {

    bottom: 18%;
    right: 4%;

    animation-delay: 3s;

}


/* =========================================================
   SHARED SECTION
   ========================================================= */

.section-label {

    display: block;

    margin-bottom: 14px;

    color:
        #60a5fa;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 2px;

}


/* =========================================================
   STORY
   ========================================================= */

.story-section {

    padding:
        130px 0;

    background:
        #06162e;

}


.story-layout {

    display: grid;

    grid-template-columns:
        .35fr 1fr;

    gap: 80px;

}


.story-label {

    display: flex;

    flex-direction: column;

    justify-content: space-between;

}


.story-number {

    color:
        rgba(96,165,250,.25);

    font-size:
        clamp(70px, 10vw, 130px);

    font-weight: 800;

    line-height: 1;

    letter-spacing: -8px;

}


.story-content {

    max-width: 800px;

}


.story-content h2 {

    margin: 0 0 28px;

    color: white;

    font-size:
        clamp(38px, 5vw, 60px);

    line-height: 1.05;

    letter-spacing: -2.5px;

}


.story-content h2 span {

    color:
        #60a5fa;

}


.story-content p {

    max-width: 700px;

    margin:
        0 0 20px;

    color:
        #8098b7;

    font-size: 14px;

    line-height: 1.9;

}


.story-content .story-lead {

    color:
        #b5c7dc;

    font-size: 18px;

    line-height: 1.8;

}


.story-signature {

    display: flex;

    align-items: center;

    gap: 13px;

    margin-top: 40px;

    color:
        #6f89a9;

    font-size: 10px;

    letter-spacing: 1.5px;

}


.signature-line {

    width: 50px;

    height: 1px;

    background:
        #3b82f6;

}


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

.philosophy-section {

    padding:
        130px 0;

    background:
        #041126;

}


.philosophy-heading {

    max-width: 800px;

    margin-bottom: 70px;

}


.philosophy-heading h2 {

    margin: 0;

    color: white;

    font-size:
        clamp(38px, 5vw, 60px);

    line-height: 1.05;

    letter-spacing: -2.5px;

}


.philosophy-heading h2 span {

    color:
        #60a5fa;

}


.philosophy-layout {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 100px;

    align-items: center;

}


/* PHILOSOPHY VISUAL */

.philosophy-visual {

    position: relative;

    height: 480px;

    display: flex;

    align-items: center;

    justify-content: center;

}


.philosophy-grid {

    position: absolute;

    inset: 0;

    opacity: .3;

    background-image:

        linear-gradient(
            rgba(96,165,250,.04) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(96,165,250,.04) 1px,
            transparent 1px
        );

    background-size: 45px 45px;

    mask-image:
        radial-gradient(
            circle,
            black,
            transparent 70%
        );

}


.philosophy-ring {

    position: absolute;

    border:
        1px solid
        rgba(59,130,246,.15);

    border-radius: 50%;

}


.philosophy-ring.ring-one {

    width: 420px;
    height: 420px;

    animation:
        aboutOrbit 30s linear infinite;

}


.philosophy-ring.ring-two {

    width: 300px;
    height: 300px;

    border-color:
        rgba(34,211,238,.12);

    animation:
        aboutOrbitReverse 20s linear infinite;

}


.philosophy-ring.ring-three {

    width: 190px;
    height: 190px;

}


.philosophy-core {

    position: relative;

    z-index: 3;

    width: 115px;
    height: 115px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            #164d91,
            #071a35
        );

    border:
        1px solid
        rgba(96,165,250,.35);

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

}


.philosophy-core span {

    color: white;

    font-size: 42px;

    font-weight: 800;

}


.philosophy-node {

    position: absolute;

    z-index: 4;

    width: 40px;
    height: 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    color:
        #93c5fd;

    background:
        #081e3e;

    border:
        1px solid
        rgba(96,165,250,.25);

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

    font-size: 11px;

    font-weight: 800;

}


.node-one {

    top: 17%;
    left: 18%;

}


.node-two {

    top: 18%;
    right: 17%;

}


.node-three {

    bottom: 18%;
    left: 18%;

}


.node-four {

    bottom: 17%;
    right: 17%;

}


/* PHILOSOPHY CONTENT */

.philosophy-content {

    display: flex;

    flex-direction: column;

}


.philosophy-item {

    display: grid;

    grid-template-columns:
        45px 1fr;

    gap: 18px;

    padding:
        27px 0;

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

}


.philosophy-item:first-child {

    padding-top: 0;

}


.philosophy-index {

    color:
        #4b6d96;

    font-size: 10px;

    font-weight: 800;

    padding-top: 5px;

}


.philosophy-item h3 {

    margin:
        0 0 7px;

    color: white;

    font-size: 19px;

}


.philosophy-item p {

    max-width: 450px;

    margin: 0;

    color:
        #7089a8;

    font-size: 12px;

    line-height: 1.8;

}


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

.platform-section {

    padding:
        130px 0;

    background:
        #06162e;

}


.platform-layout {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 90px;

    align-items: center;

}


.platform-content h2 {

    margin: 0;

    color: white;

    font-size:
        clamp(38px, 5vw, 55px);

    line-height: 1.05;

    letter-spacing: -2px;

}


.platform-content h2 span {

    color:
        #60a5fa;

}


.platform-content > p {

    max-width: 560px;

    margin:
        22px 0 35px;

    color:
        #8199b7;

    line-height: 1.85;

    font-size: 14px;

}


.platform-list {

    display: flex;

    flex-direction: column;

    gap: 18px;

}


.platform-list-item {

    display: flex;

    gap: 13px;

}


.platform-check {

    width: 23px;
    height: 23px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    border-radius: 50%;

    color:
        #4ade80;

    background:
        rgba(74,222,128,.07);

    border:
        1px solid
        rgba(74,222,128,.12);

    font-size: 10px;

}


.platform-list-item strong {

    display: block;

    color: white;

    font-size: 13px;

}


.platform-list-item p {

    margin:
        5px 0 0;

    color:
        #6f88a8;

    font-size: 11px;

    line-height: 1.6;

}


/* PLATFORM VISUAL */

.platform-visual {

    min-height: 450px;

    display: flex;

    align-items: center;

    justify-content: center;

    perspective: 1200px;

}


.platform-window {

    width:
        min(500px, 100%);

    border:
        1px solid
        rgba(96,165,250,.2);

    border-radius: 20px;

    overflow: hidden;

    background:
        #071a34;

    box-shadow:
        0 35px 80px
        rgba(0,0,0,.35);

    transform:
        perspective(1200px)
        rotateY(-8deg)
        rotateX(3deg);

    transition:
        transform .6s ease;

}


.platform-window:hover {

    transform:
        perspective(1200px)
        rotateY(0)
        rotateX(0)
        translateY(-6px);

}


.platform-window-top {

    height: 44px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding:
        0 16px;

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

    color:
        #587292;

    font-size: 8px;

    letter-spacing: 1.5px;

}


.window-dots {

    display: flex;

    gap: 5px;

}


.window-dots i {

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background:
        #27415f;

}


.platform-dashboard {

    display: grid;

    grid-template-columns:
        55px 1fr;

    min-height: 330px;

}


.dashboard-side {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 20px;

    padding-top: 25px;

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

}


.dashboard-side span {

    width: 19px;
    height: 19px;

    border-radius: 5px;

    background:
        #142f51;

}


.dashboard-side .side-active {

    background:
        #2563eb;

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

}


.dashboard-main {

    padding: 28px;

}


.dashboard-title {

    display: flex;

    justify-content: space-between;

    color:
        #7892b2;

    font-size: 9px;

    letter-spacing: 1px;

}


.dashboard-title small {

    color:
        #4ade80;

}


.dashboard-visual {

    position: relative;

    height: 150px;

    margin-top: 35px;

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

}


.dashboard-line {

    position: absolute;

    left: 0;
    right: 0;

    bottom: 30%;

    height: 1px;

    background:
        rgba(96,165,250,.06);

}


.dashboard-line.line-two {

    bottom: 55%;

}


.dashboard-line.line-three {

    bottom: 80%;

}


.dashboard-point {

    position: absolute;

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background:
        #3b82f6;

    box-shadow:
        0 0 15px
        rgba(59,130,246,.7);

}


.point-one {

    left: 20%;
    bottom: 35%;

}


.point-two {

    left: 54%;
    bottom: 60%;

}


.point-three {

    right: 10%;
    bottom: 80%;

}


.dashboard-bars {

    height: 80px;

    display: flex;

    align-items: flex-end;

    gap: 12px;

    margin-top: 22px;

}


.dashboard-bars span {

    flex: 1;

    max-width: 25px;

    border-radius:
        4px 4px 0 0;

    background:
        linear-gradient(
            to top,
            #1550b5,
            #3b82f6
        );

    opacity: .7;

}


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

.values-section {

    padding:
        130px 0;

    background:
        #041126;

}


.values-header {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 60px;

    margin-bottom: 60px;

}


.values-header h2 {

    margin: 0;

    color: white;

    font-size:
        clamp(38px, 5vw, 55px);

    line-height: 1.05;

    letter-spacing: -2px;

}


.values-header h2 span {

    color:
        #60a5fa;

}


.values-header > p {

    max-width: 450px;

    margin: 0;

    color:
        #7891af;

    font-size: 13px;

    line-height: 1.8;

}


.values-grid {

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

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

}


.value-item {

    min-height: 270px;

    padding:
        30px 28px;

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

    transition:
        background .35s ease;

}


.value-item:last-child {

    border-right: 0;

}


.value-item:hover {

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

}


.value-number {

    color:
        #426589;

    font-size: 10px;

    font-weight: 800;

}


.value-item h3 {

    margin:
        55px 0 13px;

    color: white;

    font-size: 19px;

}


.value-item p {

    margin: 0;

    color:
        #6f88a8;

    font-size: 12px;

    line-height: 1.8;

}


/* =========================================================
   SECURITY
   ========================================================= */

.about-security-section {

    padding:
        130px 0;

    background:
        #06162e;

}


.about-security-layout {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 100px;

    align-items: center;

}


.about-security-visual {

    position: relative;

    height: 460px;

    display: flex;

    align-items: center;

    justify-content: center;

}


.security-circle {

    position: absolute;

    border:
        1px solid
        rgba(59,130,246,.13);

    border-radius: 50%;

}


.circle-one {

    width: 420px;
    height: 420px;

}


.circle-two {

    width: 310px;
    height: 310px;

    border-color:
        rgba(34,211,238,.12);

    animation:
        aboutOrbit 20s linear infinite;

}


.circle-three {

    width: 205px;
    height: 205px;

}


.security-shield {

    position: relative;

    z-index: 3;

    width: 145px;
    height: 165px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    clip-path:
        polygon(
            50% 0,
            92% 16%,
            87% 70%,
            50% 100%,
            13% 70%,
            8% 16%
        );

    background:
        linear-gradient(
            145deg,
            #1654a3,
            #071b37
        );

    box-shadow:
        0 0 70px
        rgba(37,99,235,.2);

}


.shield-icon {

    width: 55px;
    height: 55px;

    display: flex;

    align-items: center;

    justify-content: center;

    border:
        1px solid
        rgba(96,165,250,.35);

    border-radius: 50%;

    color:
        #60a5fa;

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

    font-size: 20px;

}


.security-shield small {

    margin-top: 10px;

    color:
        #7ea1cb;

    font-size: 7px;

    letter-spacing: 1.5px;

}


.security-orbit-dot {

    position: absolute;

    z-index: 4;

    width: 9px;
    height: 9px;

    border-radius: 50%;

    background:
        #3b82f6;

    box-shadow:
        0 0 18px
        rgba(59,130,246,.8);

}


.dot-one {

    top: 15%;
    left: 25%;

}


.dot-two {

    right: 16%;
    top: 45%;

}


.dot-three {

    bottom: 14%;
    left: 28%;

}


.about-security-content h2 {

    margin: 0;

    color: white;

    font-size:
        clamp(38px, 5vw, 55px);

    line-height: 1.05;

    letter-spacing: -2px;

}


.about-security-content h2 span {

    color:
        #60a5fa;

}


.about-security-content > p {

    max-width: 550px;

    margin:
        22px 0 35px;

    color:
        #8199b7;

    line-height: 1.85;

    font-size: 14px;

}


.security-points {

    display: flex;

    flex-direction: column;

    gap: 18px;

}


.security-points div {

    display: grid;

    grid-template-columns:
        35px 1fr;

    gap: 12px;

}


.security-points span {

    color:
        #52769e;

    font-size: 10px;

    font-weight: 800;

    padding-top: 3px;

}


.security-points p {

    margin: 0;

    color:
        #a0b4cc;

    font-size: 12px;

    line-height: 1.6;

}


.security-link {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    margin-top: 35px;

    color:
        #60a5fa;

    text-decoration: none;

    font-size: 12px;

    font-weight: 700;

}


.security-link span {

    transition:
        transform .3s ease;

}


.security-link:hover span {

    transform:
        translateX(5px);

}


/* =========================================================
   GLOBAL
   ========================================================= */

.about-global-section {

    padding:
        130px 0;

    background:
        #041126;

}


.global-heading {

    max-width: 750px;

    text-align: center;

    margin:
        0 auto 60px;

}


.global-heading h2 {

    margin: 0;

    color: white;

    font-size:
        clamp(38px, 5vw, 58px);

    line-height: 1.05;

    letter-spacing: -2px;

}


.global-heading h2 span {

    color:
        #60a5fa;

}


.global-heading p {

    max-width: 600px;

    margin:
        18px auto 0;

    color:
        #7892b0;

    font-size: 13px;

    line-height: 1.8;

}


.global-visual {

    position: relative;

    height: 520px;

    display: flex;

    align-items: center;

    justify-content: center;

}


.global-grid {

    position: absolute;

    inset: 0;

    opacity: .2;

    background-image:

        linear-gradient(
            rgba(96,165,250,.04) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(96,165,250,.04) 1px,
            transparent 1px
        );

    background-size:
        50px 50px;

    mask-image:
        radial-gradient(
            circle,
            black,
            transparent 65%
        );

}


.global-globe {

    position: relative;

    width: 440px;
    height: 440px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

}


.globe-ring {

    position: absolute;

    border:
        1px solid
        rgba(59,130,246,.13);

    border-radius: 50%;

}


.ring-a {

    width: 440px;
    height: 440px;

    animation:
        aboutOrbit 30s linear infinite;

}


.ring-b {

    width: 330px;
    height: 440px;

    transform:
        rotate(35deg);

}


.ring-c {

    width: 330px;
    height: 440px;

    transform:
        rotate(-35deg);

}


.globe-core {

    position: relative;

    z-index: 3;

    width: 130px;
    height: 130px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            #15519d,
            #061a35
        );

    border:
        1px solid
        rgba(96,165,250,.35);

    box-shadow:
        0 0 80px
        rgba(37,99,235,.2);

}


.globe-core span {

    color: white;

    font-size: 48px;

    font-weight: 800;

}


.global-point {

    position: absolute;

    z-index: 5;

    display: flex;

    align-items: center;

    gap: 7px;

    padding:
        8px 11px;

    border:
        1px solid
        rgba(96,165,250,.13);

    border-radius: 8px;

    color:
        #91a8c2;

    background:
        rgba(7,25,51,.8);

    backdrop-filter:
        blur(10px);

    font-size: 9px;

}


.global-point span {

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background:
        #3b82f6;

    box-shadow:
        0 0 12px
        rgba(59,130,246,.8);

}


.point-na {

    top: 12%;
    left: 4%;

}


.point-eu {

    top: 8%;
    right: 12%;

}


.point-af {

    bottom: 17%;
    left: 8%;

}


.point-as {

    bottom: 20%;
    right: 4%;

}


.point-oc {

    bottom: 3%;
    left: 45%;

}


.global-bottom {

    display: grid;

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

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

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

}


.global-bottom div {

    padding:
        24px;

    text-align: center;

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

}


.global-bottom div:last-child {

    border-right: 0;

}


.global-bottom strong {

    display: block;

    color: white;

    font-size: 13px;

    letter-spacing: 1px;

}


.global-bottom span {

    display: block;

    margin-top: 5px;

    color:
        #5e7899;

    font-size: 9px;

}


/* =========================================================
   FAQ
   ========================================================= */

.about-faq-section {

    padding:
        130px 0;

    background:
        #06162e;

}


.about-faq {

    max-width: 850px;

}


.faq-item {

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

}


.faq-question {

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding:
        24px 0;

    border: 0;

    color: white;

    background: transparent;

    text-align: left;

    cursor: pointer;

    font-family: inherit;

    font-size: 14px;

    font-weight: 600;

}


.faq-question i {

    width: 27px;
    height: 27px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    border:
        1px solid
        rgba(96,165,250,.18);

    border-radius: 50%;

    color:
        #60a5fa;

    font-style: normal;

    transition:
        .3s ease;

}


.faq-answer {

    display: grid;

    grid-template-rows:
        0fr;

    transition:
        grid-template-rows
        .4s ease;

}


.faq-answer p {

    min-height: 0;

    overflow: hidden;

    margin: 0;

    color:
        #7189a8;

    font-size: 12px;

    line-height: 1.8;

}


.faq-item.active
.faq-answer {

    grid-template-rows:
        1fr;

}


.faq-item.active
.faq-answer p {

    padding-bottom:
        23px;

}


.faq-item.active
.faq-question i {

    transform:
        rotate(45deg);

    background:
        rgba(59,130,246,.1);

}


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

.about-cta {

    padding:
        125px 0;

    text-align: center;

    background:

        radial-gradient(
            circle at center,
            rgba(37,99,235,.16),
            transparent 45%
        ),

        #041126;

}


.about-cta-glow {

    position: absolute;

    width: 450px;
    height: 450px;

    left: 50%;
    top: 50%;

    transform:
        translate(-50%, -50%);

    border-radius: 50%;

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

    filter:
        blur(70px);

}


.about-cta-content {

    position: relative;

    z-index: 2;

}


.about-cta h2 {

    max-width: 750px;

    margin:
        0 auto;

    color: white;

    font-size:
        clamp(42px, 5vw, 64px);

    line-height: 1.05;

    letter-spacing: -2.5px;

}


.about-cta h2 span {

    color:
        #60a5fa;

}


.about-cta-content > p {

    max-width: 560px;

    margin:
        20px auto 30px;

    color:
        #8199b7;

    line-height: 1.8;

    font-size: 13px;

}


.about-cta-actions {

    display: flex;

    justify-content: center;

    gap: 12px;

}


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

@keyframes aboutPulse {

    0%,
    100% {

        opacity: 1;

        transform:
            scale(1);

    }

    50% {

        opacity: .4;

        transform:
            scale(.7);

    }

}


@keyframes aboutOrbit {

    from {

        transform:
            rotate(0deg);

    }

    to {

        transform:
            rotate(360deg);

    }

}


@keyframes aboutOrbitReverse {

    from {

        transform:
            rotate(360deg);

    }

    to {

        transform:
            rotate(0deg);

    }

}


@keyframes aboutCoreFloat {

    0%,
    100% {

        transform:
            translateY(0);

    }

    50% {

        transform:
            translateY(-10px);

    }

}


@keyframes aboutFloat {

    0%,
    100% {

        transform:
            translateY(0);

    }

    50% {

        transform:
            translateY(-9px);

    }

}


/* =========================================================
   SCROLL REVEALS
   ========================================================= */

.about-reveal {

    opacity: 0;

    transform:
        translateY(55px);

    transition:

        opacity 1.1s ease,

        transform
        1.1s cubic-bezier(
            .22,
            1,
            .36,
            1
        );

    transition-delay:
        var(--about-delay, 0ms);

}


.about-reveal-visible {

    opacity: 1;

    transform:
        translateY(0);

}


/* LEFT */

.about-reveal-left {

    opacity: 0;

    transform:
        translateX(-65px);

    transition:

        opacity 1.15s ease,

        transform
        1.15s cubic-bezier(
            .22,
            1,
            .36,
            1
        );

}


.about-reveal-left.about-reveal-visible {

    opacity: 1;

    transform:
        translateX(0);

}


/* RIGHT */

.about-reveal-right {

    opacity: 0;

    transform:
        translateX(65px)
        scale(.96);

    transition:

        opacity 1.2s ease,

        transform
        1.2s cubic-bezier(
            .22,
            1,
            .36,
            1
        );

}


.about-reveal-right.about-reveal-visible {

    opacity: 1;

    transform:
        translateX(0)
        scale(1);

}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1000px) {

    .about-hero-container {

        gap: 50px;

    }


    .philosophy-layout,
    .platform-layout,
    .about-security-layout {

        gap: 60px;

    }


    .values-grid {

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

    }


    .value-item:nth-child(2) {

        border-right: 0;

    }


    .value-item:nth-child(-n+2) {

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

    }

}


@media (max-width: 850px) {

    .about-hero-container {

        grid-template-columns:
            1fr;

    }


    .about-hero-content {

        text-align: center;

    }


    .about-hero-content > p {

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

    }


    .about-hero-actions {

        justify-content: center;

    }


    .about-hero-meta {

        justify-content: center;

    }


    .about-hero-visual {

        min-height: 420px;

    }


    .story-layout {

        grid-template-columns:
            1fr;

        gap: 25px;

    }


    .story-number {

        font-size: 70px;

    }


    .philosophy-layout,
    .platform-layout,
    .about-security-layout {

        grid-template-columns:
            1fr;

    }


    .philosophy-heading {

        text-align: center;

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

    }


    .philosophy-visual {

        min-height: 400px;

    }


    .platform-content,
    .about-security-content {

        text-align: center;

    }


    .platform-content > p,
    .about-security-content > p {

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

    }


    .platform-list {

        max-width: 500px;

        margin:
            0 auto;

        text-align: left;

    }


    .about-security-visual {

        order: 2;

    }


    .about-security-content {

        order: 1;

    }


    .values-header {

        flex-direction: column;

        align-items: flex-start;

        gap: 20px;

    }


    .values-header > p {

        max-width: 600px;

    }

}


@media (max-width: 650px) {

    .container {

        width:
            min(
                100% - 28px,
                1180px
            );

    }


    .about-hero {

        min-height: auto;

        padding:
            110px 0 70px;

    }


    .about-hero h1 {

        font-size: 47px;

        letter-spacing: -2px;

    }


    .about-hero-actions {

        flex-direction: column;

    }


    .about-primary-button,
    .about-secondary-button {

        width: 100%;

    }


    .about-hero-meta {

        flex-wrap: wrap;

        gap: 18px;

        justify-content: flex-start;

        text-align: left;

    }


    .about-hero-visual {

        min-height: 350px;

    }


    .about-orbit-one {

        width: 350px;
        height: 350px;

    }


    .about-orbit-two {

        width: 270px;
        height: 270px;

    }


    .about-orbit-three {

        width: 190px;
        height: 190px;

    }


    .about-core {

        width: 125px;
        height: 125px;

    }


    .about-core-inner span {

        font-size: 40px;

    }


    .about-floating {

        font-size: 9px;

    }


    .about-floating-one {

        left: 0;

    }


    .about-floating-two {

        right: 0;

    }


    .about-floating-four {

        display: none;

    }


    .story-section,
    .philosophy-section,
    .platform-section,
    .values-section,
    .about-security-section,
    .about-global-section,
    .about-faq-section,
    .about-cta {

        padding:
            90px 0;

    }


    .philosophy-visual {

        height: 350px;

    }


    .philosophy-ring.ring-one {

        width: 320px;
        height: 320px;

    }


    .philosophy-ring.ring-two {

        width: 240px;
        height: 240px;

    }


    .philosophy-ring.ring-three {

        width: 155px;
        height: 155px;

    }


    .node-one {

        left: 8%;

    }


    .node-two {

        right: 8%;

    }


    .node-three {

        left: 8%;

    }


    .node-four {

        right: 8%;

    }


    .platform-visual {

        min-height: 330px;

    }


    .platform-window {

        transform:
            none;

    }


    .platform-window:hover {

        transform:
            translateY(-4px);

    }


    .platform-dashboard {

        min-height: 270px;

    }


    .dashboard-main {

        padding: 20px;

    }


    .values-grid {

        grid-template-columns:
            1fr;

    }


    .value-item {

        min-height: auto;

        border-right: 0;

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

    }


    .value-item:last-child {

        border-bottom: 0;

    }


    .value-item h3 {

        margin-top: 35px;

    }


    .about-security-visual {

        height: 350px;

    }


    .circle-one {

        width: 330px;
        height: 330px;

    }


    .circle-two {

        width: 250px;
        height: 250px;

    }


    .circle-three {

        width: 170px;
        height: 170px;

    }


    .global-visual {

        height: 390px;

    }


    .global-globe {

        width: 320px;
        height: 320px;

    }


    .ring-a {

        width: 320px;
        height: 320px;

    }


    .ring-b,
    .ring-c {

        width: 245px;
        height: 320px;

    }


    .globe-core {

        width: 100px;
        height: 100px;

    }


    .globe-core span {

        font-size: 38px;

    }


    .global-point {

        font-size: 7px;

        padding:
            6px 8px;

    }


    .point-na {

        left: 0;

    }


    .point-eu {

        right: 0;

    }


    .point-af {

        left: 0;

    }


    .point-as {

        right: 0;

    }


    .global-bottom {

        grid-template-columns:
            1fr;

    }


    .global-bottom div {

        border-right: 0;

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

    }


    .global-bottom div:last-child {

        border-bottom: 0;

    }


    .about-cta-actions {

        flex-direction: column;

    }


    .about-cta-actions a {

        width: 100%;

    }

}


@media (max-width: 420px) {

    .about-hero h1 {

        font-size: 40px;

    }


    .about-hero-meta {

        flex-direction: column;

    }


    .about-hero-visual {

        min-height: 310px;

    }


    .about-orbit-one {

        width: 290px;
        height: 290px;

    }


    .about-orbit-two {

        width: 220px;
        height: 220px;

    }


    .about-orbit-three {

        width: 155px;
        height: 155px;

    }


    .about-core {

        width: 105px;
        height: 105px;

    }


    .about-core-inner span {

        font-size: 34px;

    }


    .about-floating {

        padding:
            8px 9px;

    }


    .about-floating-three {

        left: 0;

    }

}