/* ESPRIQ ABOUT PAGE */

.about-main{
    min-height:calc(100vh - 95px);
    background:
        radial-gradient(circle at 72% 18%,rgba(0,187,215,.10),transparent 28%),
        radial-gradient(circle at 20% 72%,rgba(245,190,54,.05),transparent 24%),
        #001823;
    color:#fff;
    overflow:hidden;
}

.about-hero{
    position:relative;
    min-height:520px;
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:70px;
    align-items:center;
    padding:90px 7% 70px;
    border-bottom:1px solid rgba(40,196,215,.12);
}

.about-hero:before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    opacity:.22;
    background-image:
        linear-gradient(rgba(37,201,218,.05) 1px,transparent 1px),
        linear-gradient(90deg,rgba(37,201,218,.05) 1px,transparent 1px);
    background-size:70px 70px;
    mask-image:linear-gradient(to bottom,black,transparent 88%);
}

.about-copy{
    position:relative;
    z-index:2;
    text-align:right;
}

.about-kicker{
    color:#f2bd3d;
    font-size:14px;
    font-weight:900;
    letter-spacing:2px;
    margin-bottom:18px;
}

.about-title{
    margin:0 0 24px;
    font-size:clamp(52px,6vw,88px);
    line-height:.95;
    font-weight:900;
    letter-spacing:-2px;
}

.about-lead{
    margin:0;
    max-width:760px;
    color:#c5d9e2;
    font-size:20px;
    line-height:2;
}

.about-actions{
    display:flex;
    gap:16px;
    margin-top:34px;
    justify-content:flex-start;
    direction:rtl;
}

.about-btn{
    min-height:52px;
    padding:0 26px;
    border-radius:9px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    font-weight:800;
    font-size:15px;
    transition:.2s ease;
}

.about-btn.primary{
    background:#efbd42;
    color:#05151d;
    border:1px solid #efbd42;
}

.about-btn.secondary{
    background:rgba(0,177,202,.035);
    color:#fff;
    border:1px solid #0da9bd;
}

.about-btn:hover{
    transform:translateY(-2px);
}

.about-visual{
    position:relative;
    min-height:380px;
    display:grid;
    place-items:center;
}

.about-orbit{
    position:absolute;
    width:360px;
    height:360px;
    border:1px solid rgba(37,208,225,.18);
    border-radius:50%;
    box-shadow:
        0 0 70px rgba(0,188,220,.05),
        inset 0 0 70px rgba(0,188,220,.035);
}

.about-orbit:before,
.about-orbit:after{
    content:"";
    position:absolute;
    border-radius:50%;
    border:1px solid rgba(242,189,61,.18);
}

.about-orbit:before{
    inset:44px;
}

.about-orbit:after{
    inset:92px;
    border-color:rgba(37,208,225,.22);
}

.about-core{
    position:relative;
    z-index:3;
    width:190px;
    height:190px;
    border-radius:28px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    background:
        linear-gradient(145deg,rgba(4,45,59,.95),rgba(1,24,35,.98));
    border:1px solid rgba(37,208,225,.34);
    box-shadow:0 25px 80px rgba(0,0,0,.35);
}

.about-core .mark{
    color:#35d4e4;
    font-size:42px;
    font-weight:900;
}

.about-core strong{
    font-size:23px;
    margin-top:8px;
}

.about-core small{
    color:#809eaa;
    margin-top:7px;
    font-size:12px;
}

.about-dot{
    position:absolute;
    width:10px;
    height:10px;
    border-radius:50%;
    background:#31d1e2;
    box-shadow:0 0 18px #31d1e2;
}

.about-dot.gold{
    background:#efbd42;
    box-shadow:0 0 18px rgba(239,189,66,.8);
}

.d1{top:30px;left:49%}
.d2{bottom:50px;right:16%}
.d3{top:47%;left:8%}
.d4{top:22%;right:12%}

.about-section{
    padding:90px 7%;
}

.about-section-head{
    max-width:900px;
    margin-right:0;
    margin-left:auto;
    text-align:right;
    margin-bottom:42px;
}

.about-section-head span{
    color:#efbd42;
    font-size:13px;
    font-weight:900;
    letter-spacing:1.5px;
}

.about-section-head h2{
    margin:10px 0 14px;
    font-size:42px;
}

.about-section-head p{
    margin:0;
    color:#9eb7c1;
    line-height:1.9;
    font-size:17px;
}

.about-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
}

.about-card{
    position:relative;
    padding:30px;
    min-height:220px;
    border:1px solid rgba(29,177,197,.18);
    border-radius:15px;
    background:linear-gradient(
        150deg,
        rgba(2,31,44,.86),
        rgba(1,21,31,.72)
    );
    overflow:hidden;
}

.about-card:before{
    content:"";
    position:absolute;
    top:0;
    right:0;
    width:3px;
    height:54px;
    background:#efbd42;
}

.about-card .num{
    color:#29c8da;
    font-size:13px;
    font-weight:900;
    letter-spacing:2px;
}

.about-card h3{
    margin:20px 0 12px;
    font-size:23px;
}

.about-card p{
    margin:0;
    color:#9bb3bd;
    font-size:15px;
    line-height:1.9;
}

.about-band{
    margin:0 7% 90px;
    padding:38px 44px;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    border:1px solid rgba(34,196,214,.18);
    border-radius:16px;
    background:rgba(0,27,39,.66);
}

.about-stat{
    text-align:center;
    padding:8px 18px;
    border-left:1px solid rgba(255,255,255,.06);
}

.about-stat:last-child{
    border-left:0;
}

.about-stat strong{
    display:block;
    color:#fff;
    font-size:27px;
    margin-bottom:7px;
}

.about-stat span{
    color:#7897a4;
    font-size:13px;
}

@media(max-width:1100px){
    .about-hero{
        grid-template-columns:1fr;
        gap:35px;
        padding-top:60px;
    }

    .about-visual{
        min-height:300px;
    }

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

    .about-band{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:700px){
    .about-hero,
    .about-section{
        padding-left:5%;
        padding-right:5%;
    }

    .about-title{
        font-size:48px;
    }

    .about-orbit{
        width:280px;
        height:280px;
    }

    .about-band{
        margin-left:5%;
        margin-right:5%;
        grid-template-columns:1fr;
    }

    .about-stat{
        border-left:0;
        border-bottom:1px solid rgba(255,255,255,.06);
        padding:20px 0;
    }
}


/* ==================================================
   ESPRIQ DYNAMIC KNOWLEDGE NETWORK
   ================================================== */

.about-web-scene{
    position:relative;
    width:470px;
    height:470px;
    max-width:100%;
    margin:auto;
}

.about-web-svg{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    overflow:visible;
    z-index:1;
}

.about-web-center{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:4;
    pointer-events:none;
}

.about-web-card{
    width:182px;
    height:182px;
    border:1px solid rgba(48,211,231,.38);
    border-radius:27px;

    background:
        radial-gradient(
            circle at 50% 10%,
            rgba(31,210,229,.08),
            transparent 55%
        ),
        linear-gradient(
            150deg,
            rgba(3,49,65,.97),
            rgba(1,27,39,.98)
        );

    box-shadow:
        0 25px 70px rgba(0,0,0,.32),
        0 0 45px rgba(0,207,231,.07),
        inset 0 0 35px rgba(27,196,219,.025);

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

.about-web-icon{
    color:#36def0;
    font-size:42px;
    font-weight:900;
    line-height:1;
    margin-bottom:12px;

    text-shadow:
        0 0 18px rgba(54,222,240,.28);
}

.about-web-title{
    color:#fff;
    font-size:24px;
    line-height:1;
    font-weight:900;
    margin-bottom:10px;
}

.about-web-subtitle{
    width:82%;
    color:#87b8c6;
    font-size:10px;
    line-height:1.5;
    font-weight:600;
}

.about-net-ring{
    fill:none;
    stroke:rgba(42,211,231,.12);
    stroke-width:1;
}

.about-net-ring.gold{
    stroke:rgba(239,189,66,.13);
}

.about-net-line{
    stroke:rgba(45,214,233,.21);
    stroke-width:1;
    vector-effect:non-scaling-stroke;
}

.about-net-line.gold{
    stroke:rgba(239,189,66,.16);
}

.about-net-line.faint{
    stroke:rgba(45,214,233,.09);
}

.about-net-node{
    position:absolute;
    width:9px;
    height:9px;
    margin-left:-4.5px;
    margin-top:-4.5px;
    border-radius:50%;
    z-index:3;
    pointer-events:none;
}

.about-net-node.cyan{
    background:#3ce4f4;
    box-shadow:
        0 0 9px #3ce4f4,
        0 0 24px rgba(60,228,244,.65);
}

.about-net-node.gold{
    background:#efbd42;
    box-shadow:
        0 0 9px #efbd42,
        0 0 25px rgba(239,189,66,.58);
}

.about-net-node.small{
    width:6px;
    height:6px;
    margin-left:-3px;
    margin-top:-3px;
}

@media(max-width:1200px){

    .about-web-scene{
        width:400px;
        height:400px;
    }

    .about-web-card{
        width:165px;
        height:165px;
    }

}

@media(max-width:700px){

    .about-web-scene{
        width:320px;
        height:320px;
    }

    .about-web-card{
        width:145px;
        height:145px;
    }

    .about-web-icon{
        font-size:34px;
    }

    .about-web-title{
        font-size:21px;
    }

}


/* ==================================================
   ESPRIQ LOWER TYPOGRAPHY V1
   ================================================== */

.about-section-head span{
    font-size:15px !important;
}

.about-section-head h2{
    font-size:44px !important;
}

.about-section-head p{
    font-size:18px !important;
    line-height:1.75 !important;
}

.about-card .num{
    font-size:14px !important;
}

.about-card h3{
    font-size:24px !important;
}

.about-card p{
    font-size:16px !important;
    line-height:1.8 !important;
}

.about-stat strong{
    font-size:29px !important;
}

.about-stat span{
    font-size:15px !important;
    line-height:1.6 !important;
}


/* ==================================================
   ESPRIQ LOWER READABILITY FINAL
   ================================================== */

.about-section-head span{
    font-size:16px !important;
    font-weight:700 !important;
}

.about-section-head h2{
    font-size:48px !important;
    font-weight:800 !important;
}

.about-section-head p{
    font-size:20px !important;
    line-height:1.9 !important;
    font-weight:500 !important;
}

.about-card .num{
    font-size:15px !important;
    font-weight:800 !important;
}

.about-card h3{
    font-size:28px !important;
    font-weight:800 !important;
}

.about-card p{
    font-size:20px !important;
    line-height:1.9 !important;
    font-weight:600 !important;
}

.about-stat strong{
    font-size:32px !important;
    font-weight:800 !important;
}

.about-stat span{
    font-size:18px !important;
    line-height:1.7 !important;
    font-weight:600 !important;
}


/* ESPRIQ SECONDARY BAND READABILITY FINAL */
.about-stat span{
    font-size:21px !important;
    font-weight:700 !important;
    line-height:1.8 !important;
}