:root{

    --page-width:1500px;
    --content-width:1380px;

    --bg:#f4f7fc;

    --surface:
        rgba(255,255,255,.78);

    --surface-strong:
        rgba(255,255,255,.92);

    --primary:#3563e9;

    --primary-dark:#2447bb;

    --accent:#7f93ff;

    --text-soft:#5e6c85;

    --muted:#667085;

    --border:
        rgba(15,23,42,.06);

    --radius-sm:22px;
    --radius-md:34px;
    --radius-lg:48px;

    --shadow-xs:
        0 8px 24px rgba(15,23,42,.04);

    --shadow-sm:
        0 18px 42px rgba(15,23,42,.06);

    --shadow-md:
        0 34px 90px rgba(15,23,42,.10);

    --transition:
        .28s cubic-bezier(.4,0,.2,1);
}

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

html{

    scroll-behavior:smooth;
}

body{

    background:
        linear-gradient(
            180deg,
            #f9fbff 0%,
            #edf3fb 100%
        );

    line-height:1.82;

    letter-spacing:-.01em;

    -webkit-font-smoothing:antialiased;

    text-rendering:optimizeLegibility;
}

a{

    transition:
        all var(--transition);
}

img{

    max-width:100%;

    display:block;
}

/* =========================================================
JOOMLA / HELIX
========================================================= */

#sp-body{

    background:
        transparent !important;

    padding-top:
        72px !important;

    padding-bottom:
        120px !important;
}

.container,
.sppb-row-container,
.hub-container{

    width:100%;

    max-width:
        var(--content-width);

    margin:auto;

    padding-inline:
        clamp(28px,4vw,68px);
}

.article-details{

    overflow:hidden;
}

#sp-main-body,
#sp-component{

    padding:0 !important;
}

.row{

    --bs-gutter-x:0;
}

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

#sp-header{

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

    backdrop-filter:
        blur(18px);

    border-bottom:
        1px solid rgba(15,23,42,.05);

    box-shadow:
        0 4px 24px rgba(15,23,42,.03);
}

#sp-header .container{

    max-width:1480px;
}

#sp-logo .logo a{

    font-size:52px;

    letter-spacing:-.08em;

    color:var(--primary);
}

.sp-megamenu-parent > li > a{

    position:relative;

    padding:
        0 20px !important;

    height:84px !important;

    line-height:84px !important;
}

.sp-megamenu-parent > li > a::after{

    content:"";

    position:absolute;

    left:20px;
    bottom:24px;

    width:0;
    height:2px;

    background:
        var(--primary);

    transition:
        width var(--transition);
}

.sp-megamenu-parent > li:hover > a::after,
.sp-megamenu-parent > li.active > a::after{

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

.sp-megamenu-parent > li:hover > a,
.sp-megamenu-parent > li.active > a{

    color:var(--primary) !important;
}

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

.hub-hero-section{

    position:relative;

    padding-top:20px;
}

.hub-hero-grid{

    display:grid;

    grid-template-columns:
        1.25fr .75fr;

    align-items:center;

    gap:80px;
}

.hub-overline{

    margin-bottom:22px;

    font-size:13px;

    letter-spacing:.24em;

    text-transform:uppercase;

    color:#7d8aad;
}

.hub-title{

    margin-bottom:22px;

    line-height:.88;

    letter-spacing:-.08em;
}

.hub-subtitle{

    max-width:720px;

    margin-bottom:28px;

    line-height:1.2;

    color:var(--primary);
}

.hub-description{

    max-width:760px;

    margin-bottom:40px;

    line-height:1.9;

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

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

.hub-cta-row{

    display:flex;

    flex-wrap:wrap;

    gap:18px;
}

.btn-main-cta,
.btn-secondary-cta{

    display:inline-flex;

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

    min-width:200px;

    height:62px;

    padding-inline:32px;

    border-radius:20px;

    text-decoration:none !important;

    transition:
        all var(--transition);
}

.btn-main-cta{

    background:
        linear-gradient(
            135deg,
            #4170ff 0%,
            #2f56d8 100%
        );

    color:#fff !important;

    box-shadow:
        0 16px 38px rgba(53,99,233,.22);
}

.btn-main-cta:hover{

    transform:
        translateY(-4px);
}

.btn-secondary-cta{

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

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

    backdrop-filter:
        blur(12px);

    box-shadow:
        var(--shadow-xs);
}

.btn-secondary-cta:hover{

    transform:
        translateY(-4px);

    background:#fff;
}

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

.hub-hero-right{

    display:flex;

    justify-content:center;

    align-items:center;
}

.hub-image-wrap{

    position:relative;

    width:100%;

    max-width:240px;
}

.hub-image-wrap::before{

    content:"";

    position:absolute;

    inset:-14px;

    border-radius:30px;

    background:
        linear-gradient(
            135deg,
            rgba(53,99,233,.14),
            rgba(127,147,255,.05)
        );

    z-index:0;
}

.hub-main-photo{

    position:relative;

    z-index:2;

    width:100%;

    border-radius:24px;

    border:
        5px solid rgba(255,255,255,.92);

    box-shadow:
        0 24px 56px rgba(15,23,42,.10);
}

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

.hub-stats-full{

    margin-top:58px;

    display:grid;

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

    gap:18px;
}

.hub-stat-box{

    position:relative;

    overflow:hidden;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

    min-height:132px;

    padding:
        22px 20px;

    border-radius:24px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.94),
            rgba(255,255,255,.80)
        );

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

    backdrop-filter:
        blur(14px);

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

    transition:
        all .24s cubic-bezier(.4,0,.2,1);
}

.hub-stat-box::before{

    content:"";

    position:absolute;

    top:-70px;
    right:-70px;

    width:140px;
    height:140px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(53,99,233,.10),
            transparent 72%
        );
}

.hub-stat-box:hover{

    transform:
        translateY(-4px);

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

.hub-stat-number{

    position:relative;

    margin-bottom:6px;

    font-size:40px;

    line-height:1;

    letter-spacing:-.06em;

    color:#2e56d7;

    z-index:2;
}

.hub-stat-label{

    position:relative;

    max-width:150px;

    font-size:13px;

    line-height:1.5;

    color:var(--muted);

    z-index:2;
}

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

.hub-section{

    padding:
        120px 0;
}

.hub-section-white{

    margin-top:80px;

    border-radius:44px;

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

    backdrop-filter:
        blur(16px);
}

.hub-section-light{

    border-radius:44px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.52),
            rgba(240,244,252,.92)
        );
}

.hub-section-header{

    max-width:900px;

    margin:
        0 auto 74px auto;

    text-align:center;
}

.hub-section-label{

    margin-bottom:16px;

    font-size:14px;

    letter-spacing:.20em;

    text-transform:uppercase;

    color:var(--primary);
}

.hub-section-title{

    margin-bottom:22px;

    line-height:1.04;

    letter-spacing:-.06em;
}

.hub-section-description{

    line-height:1.9;

    color:#627086;
}

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

.hub-card-grid{

    display:grid;

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

    gap:30px;
}

.hub-card{

    position:relative;

    overflow:hidden;

    padding:40px;

    border-radius:32px;

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

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

    backdrop-filter:
        blur(14px);

    box-shadow:
        var(--shadow-sm);

    transition:
        all var(--transition);
}

.hub-card:hover{

    transform:
        translateY(-8px);

    box-shadow:
        var(--shadow-md);
}

.hub-card-icon{

    width:70px;
    height:70px;

    margin-bottom:26px;

    display:flex;

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

    border-radius:20px;

    background:
        linear-gradient(
            135deg,
            #4170ff,
            #2d53d3
        );

    color:#fff;

    box-shadow:
        0 16px 34px rgba(53,99,233,.22);
}

.hub-card p{

    color:#64748b;

    line-height:1.85;
}

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

@media (max-width:1100px){

    .hub-hero-grid{

        grid-template-columns:1fr;

        gap:60px;
    }

    .hub-hero-right{

        justify-content:flex-start;
    }
}

@media (max-width:991px){

    .hub-card-grid,
    .hub-stats-full{

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

@media (max-width:768px){

    .hub-card-grid,
    .hub-stats-full{

        grid-template-columns:1fr;
    }

    .hub-image-wrap{

        max-width:220px;
    }

    .btn-main-cta,
    .btn-secondary-cta{

        width:100%;
    }
}