/* =========================================
SOLUTIONS PRO
========================================= */

.systems-solutions-pro{
    position:relative;
    overflow:hidden;

    padding:140px 0;

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

.solutions-bg-glow{
    position:absolute;

    width:900px;
    height:900px;

    background:
    radial-gradient(circle,
    rgba(59,130,246,.12),
    transparent 70%);

    top:-300px;
    right:-200px;

    pointer-events:none;
}

.solutions-heading-pro{
    text-align:center;
    margin-bottom:90px;
}

.solutions-heading-pro span{
    display:inline-flex;

    padding:10px 18px;

    border-radius:999px;

    background:#dbeafe;

    color:#2563eb;

    font-size:.78rem;

    font-weight:700;

    letter-spacing:.18em;

    margin-bottom:26px;
}

.solutions-heading-pro h2{
    font-size:clamp(3rem,6vw,5.8rem);

    line-height:.95;

    color:#0f172a;

    margin-bottom:30px;

    font-family:'DM Serif Display', serif;
}

.solutions-heading-pro p{
    max-width:850px;

    margin:auto;

    font-size:1.15rem;

    line-height:2;

    color:#475569;
}

.solutions-grid-pro{
    display:grid;

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

    gap:32px;
}

.solution-pro-card{
    position:relative;

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

    backdrop-filter:blur(20px);

    border:1px solid
    rgba(255,255,255,.7);

    border-radius:34px;

    padding:45px;

    overflow:hidden;

    transition:.45s ease;
}

.solution-pro-card:hover{
    transform:translateY(-10px);

    box-shadow:
    0 30px 80px rgba(15,23,42,.12);
}

.large-card{
    min-height:420px;
}

.dark-card{
    background:
    linear-gradient(
    135deg,
    #0f172a,
    #172554
    );

    border:none;
}

.dark-card h3,
.dark-card p,
.dark-card span{
    color:#fff !important;
}

.solution-top{
    display:flex;
    align-items:center;
    gap:18px;

    margin-bottom:35px;
}

.solution-icon-wrap{
    width:64px;
    height:64px;

    border-radius:20px;

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

    background:
    linear-gradient(
    135deg,
    #2563eb,
    #60a5fa
    );

    color:#fff;
}

.solution-icon-wrap svg{
    width:28px;
    height:28px;
}

.solution-top span{
    font-size:.8rem;

    letter-spacing:.16em;

    font-weight:700;

    color:#2563eb;
}

.solution-pro-card h3{
    font-size:2rem;

    line-height:1.15;

    color:#0f172a;

    margin-bottom:24px;

    font-family:'DM Serif Display', serif;
}

.solution-pro-card p{
    font-size:1rem;

    line-height:1.9;

    color:#475569;
}

.solution-card-glow{
    position:absolute;

    width:300px;
    height:300px;

    background:
    radial-gradient(circle,
    rgba(59,130,246,.25),
    transparent 70%);

    top:-100px;
    right:-100px;
}

.solution-lines{
    display:flex;
    gap:14px;

    margin-top:40px;
}

.solution-lines span{
    height:6px;

    border-radius:999px;

    background:#3b82f6;
}

.solution-lines span:nth-child(1){
    width:120px;
}

.solution-lines span:nth-child(2){
    width:80px;
    opacity:.7;
}

.solution-lines span:nth-child(3){
    width:40px;
    opacity:.4;
}

@media(max-width:980px){

    .solutions-grid-pro{
        grid-template-columns:1fr;
    }

    .solutions-heading-pro h2{
        font-size:3rem;
    }

}

.systems-enterprise-hero::before{

    content:'';

    position:absolute;

    inset:0;

    background:

    radial-gradient(

    circle at top right,

    rgba(59,130,246,.10),

    transparent 35%

    );

    pointer-events:none;

}

.cinematic-dashboard{
    transform-style:preserve-3d;

    box-shadow:
    0 40px 120px rgba(37,99,235,.18),
    0 20px 50px rgba(15,23,42,.15);

    border:
    1px solid rgba(255,255,255,.12);
}

.cinematic-dashboard:hover{
    transform:
    rotateY(-6deg)
    rotateX(3deg)
    translateY(-10px);
}

.wide-light{
    background:
    linear-gradient(
    135deg,
    #0f172a 0%,
    #172554 60%,
    #2563eb 100%
    ) !important;

    color:#fff;

    position:relative;

    overflow:hidden;
}

.wide-light::before{
    content:'';

    position:absolute;

    width:500px;
    height:500px;

    background:
    radial-gradient(circle,
    rgba(96,165,250,.25),
    transparent 70%);

    top:-200px;
    right:-120px;
}

.solution-pro-card{
    position:relative;
    overflow:hidden;
}

.solution-pro-card::before{
    content:'';

    position:absolute;
    inset:0;

    background:
    radial-gradient(
    circle at top right,
    rgba(59,130,246,.18),
    transparent 40%
    );

    opacity:0;

    transition:.5s ease;
}

.solution-pro-card:hover::before{
    opacity:1;
}

.enterprise-box,
.solution-pro-card,
.cinematic-dashboard{
    box-shadow:
    0 10px 30px rgba(15,23,42,.06);
}

.enterprise-box:hover,
.solution-pro-card:hover{
    box-shadow:
    0 30px 80px rgba(37,99,235,.12);
}

.solution-pro-card{
    transform-style:preserve-3d;

    transition:
    transform .45s ease,
    box-shadow .45s ease;
}

.solution-pro-card:hover{
    transform:
    perspective(1200px)
    rotateX(3deg)
    rotateY(-3deg)
    translateY(-10px);
}

.particle{
    width:6px;
    height:6px;

    border-radius:50%;

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

    filter:blur(2px);
}


/* =========================================
SOLUTIONS PRO SECTION
========================================= */

.systems-solutions-section{

    position:relative;

    padding:140px 0;

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

    overflow:hidden;
}

/* =========================================
BACKGROUND GLOW
========================================= */

.systems-solutions-section::before{

    content:'';

    position:absolute;

    width:700px;
    height:700px;

    top:-250px;
    right:-200px;

    background:
    radial-gradient(
    circle,
    rgba(37,99,235,.12),
    transparent 70%
    );

    filter:blur(40px);

    pointer-events:none;
}

.systems-solutions-section::after{

    content:'';

    position:absolute;

    width:500px;
    height:500px;

    bottom:-200px;
    left:-150px;

    background:
    radial-gradient(
    circle,
    rgba(59,130,246,.08),
    transparent 70%
    );

    filter:blur(40px);

    pointer-events:none;
}

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

.systems-heading{

    position:relative;

    z-index:2;

    max-width:760px;

    margin:0 auto 90px auto;

    text-align:center;
}

.systems-heading span{

    display:inline-flex;

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

    padding:10px 18px;

    border-radius:999px;

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

    border:
    1px solid rgba(37,99,235,.12);

    color:#2563eb;

    font-size:.78rem;
    font-weight:700;
    letter-spacing:.16em;

    text-transform:uppercase;

    margin-bottom:22px;
}

.systems-heading h2{

    font-size:clamp(2.6rem,5vw,4.6rem);

    line-height:1.05;

    letter-spacing:-0.05em;

    color:#0f172a;

    margin-bottom:26px;

    font-weight:800;
}

.systems-heading p{

    font-size:1.08rem;

    line-height:1.9;

    color:#475569;
}

/* =========================================
GRID
========================================= */

.systems-solutions-grid{

    position:relative;

    z-index:2;

    display:grid;

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

    gap:34px;
}

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

.solution-card{

    position:relative;

    overflow:hidden;

    padding:42px;

    border-radius:34px;

    background:
    linear-gradient(
    145deg,
    rgba(255,255,255,.95),
    rgba(248,250,252,.98)
    );

    border:
    1px solid rgba(148,163,184,.14);

    box-shadow:
    0 10px 40px rgba(15,23,42,.05);

    transition:
    transform .55s ease,
    box-shadow .55s ease,
    border-color .55s ease;

    backdrop-filter:blur(18px);

    transform-style:preserve-3d;
}

/* =========================================
HOVER GRADIENT
========================================= */

.solution-card::before{

    content:'';

    position:absolute;

    inset:0;

    background:
    radial-gradient(
    circle at top right,
    rgba(37,99,235,.16),
    transparent 45%
    );

    opacity:0;

    transition:.6s ease;
}

.solution-card:hover::before{

    opacity:1;
}

/* =========================================
TOP LIGHT
========================================= */

.solution-card::after{

    content:'';

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:1px;

    background:
    linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.9),
    transparent
    );
}

/* =========================================
3D HOVER
========================================= */

.solution-card:hover{

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

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

    border-color:
    rgba(37,99,235,.18);
}

/* =========================================
ICON
========================================= */

.solution-icon{

    position:relative;

    width:78px;
    height:78px;

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

    border-radius:24px;

    background:
    linear-gradient(
    135deg,
    #2563eb,
    #3b82f6
    );

    box-shadow:
    0 20px 40px rgba(37,99,235,.24);

    margin-bottom:30px;
}

.solution-icon i{

    width:34px;
    height:34px;

    color:#fff;
}

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

.solution-card h3{

    font-size:1.6rem;

    line-height:1.25;

    color:#0f172a;

    margin-bottom:18px;

    font-weight:800;
}

.solution-card p{

    color:#475569;

    line-height:1.9;

    font-size:1rem;
}

/* =========================================
MICRO GLOW
========================================= */

.solution-card:hover .solution-icon{

    transform:scale(1.06);

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

    transition:.5s ease;
}

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

@media(max-width:980px){

    .systems-solutions-grid{

        grid-template-columns:1fr;
    }

    .solution-card{

        padding:34px;
    }

    .systems-solutions-section{

        padding:110px 0;
    }

}

/* =========================================
WIDE LIGHT CARD TEXT WHITE
========================================= */

.wide-light{

    position:relative;

    overflow:hidden;

    background:
    linear-gradient(
    135deg,
    #2563eb 0%,
    #1d4ed8 45%,
    #0f172a 100%
    ) !important;

    border:none !important;

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

/* glow */

.wide-light::before{

    content:'';

    position:absolute;

    width:400px;
    height:400px;

    top:-120px;
    right:-100px;

    background:
    radial-gradient(
    circle,
    rgba(255,255,255,.18),
    transparent 70%
    );

    filter:blur(20px);
}

/* text */

.wide-light-content{

    position:relative;

    z-index:2;
}

.wide-light-content span{

    color:
    rgba(255,255,255,.7) !important;
}

.wide-light-content h3{

    color:#ffffff !important;

    font-size:2.2rem;

    line-height:1.1;

    margin-bottom:18px;
}

.wide-light-content p{

    color:
    rgba(255,255,255,.82) !important;

    font-size:1.05rem;

    line-height:1.9;

    max-width:760px;
}


/* =========================================

LIGHT HEADING ON DARK SECTION

========================================= */

.systems-heading-light h2{

    color:#ffffff !important;

}

.systems-heading-light span{

    color:

    rgba(255,255,255,.72) !important;

    border:

    1px solid rgba(255,255,255,.12);

    background:

    rgba(255,255,255,.05);

}

.architecture-card{

    position:relative;
 min-height:260px;
    overflow:hidden;

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

    backdrop-filter:blur(18px);

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

    border-radius:32px;

    padding:48px;

    transition:
    transform .5s ease,
    box-shadow .5s ease;

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

.architecture-card::before{

    content:'';

    position:absolute;

    inset:0;

    background:
    radial-gradient(
    circle at top right,
    rgba(37,99,235,.12),
    transparent 45%
    );

    opacity:0;

    transition:.5s;
}

.architecture-card:hover{

    transform:
    translateY(-10px);

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

.architecture-card:hover::before{

    opacity:1;
}

.architecture-icon{

    width:72px;
    height:72px;

    border-radius:24px;

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

    margin-bottom:28px;

    background:
    linear-gradient(
    135deg,
    rgba(37,99,235,.14),
    rgba(59,130,246,.05)
    );

    color:#2563eb;
}

.architecture-icon svg{

    width:34px;
    height:34px;
}

.architecture-card::after{

    content:'';

    position:absolute;

    width:140px;
    height:140px;

    right:-40px;
    bottom:-40px;

    border-radius:50%;

    background:
    radial-gradient(
    circle,
    rgba(37,99,235,.08),
    transparent 70%
    );
}
.systems-architecture-container{

    display:grid;

    grid-template-columns:
    .8fr 1.2fr;

    gap:60px;

    align-items:start;
}
.architecture-left h2{

    font-size:clamp(3.5rem,6vw,6rem);

    line-height:.92;
}

html{

    scroll-behavior:smooth;
}

body{

    overflow-x:hidden;

    background:
    #f4f7fb;
}

.systems-top-left{

    max-width:620px;

}

.cinematic-dashboard{

    position:relative;

    overflow:hidden;
}

.cinematic-dashboard::after{

    content:'';

    position:absolute;

    inset:0;

    background:
    linear-gradient(
    135deg,
    rgba(255,255,255,.06),
    transparent 40%
    );

    pointer-events:none;
}

/* =========================================
LUCIDE ICONS FIX
========================================= */

[data-lucide]{

    width:22px;

    height:22px;

    stroke-width:2;

    color:#2563eb;

    display:block;

    flex-shrink:0;
}

/* ICON WRAPPERS */

.enterprise-icon,
.solution-icon-wrap{

    width:58px;

    height:58px;

    border-radius:18px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:
    linear-gradient(
    135deg,
    rgba(37,99,235,.12),
    rgba(37,99,235,.04)
    );

    border:
    1px solid rgba(37,99,235,.14);
}

/* WHITE ICONS ON DARK */

.dark-card [data-lucide],
.dark-soft [data-lucide]{

    color:#ffffff;
}

/* =========================================
LUCIDE FIX
========================================= */

.proof-tag{

    display:flex;

    align-items:center;

    gap:10px;
}

.proof-tag svg{

    width:18px;

    height:18px;

    stroke:#2563eb;

    stroke-width:2.2;

    flex-shrink:0;

    overflow:visible;
}

/* =========================================
ARCHITECTURE ICONS
========================================= */

.architecture-icon{

    width:64px;

    height:64px;

    border-radius:20px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:28px;

    background:
    linear-gradient(
    135deg,
    rgba(37,99,235,.12),
    rgba(37,99,235,.03)
    );

    border:
    1px solid rgba(37,99,235,.12);

    box-shadow:
    0 10px 40px rgba(37,99,235,.08);
}

.architecture-icon svg{

    width:28px;

    height:28px;

    stroke:#2563eb;

    stroke-width:2.2;
}
.architecture-icon{

    margin-bottom:20px;
}

.architecture-icon svg{

    width:28px;

    height:28px;

    stroke:#2563eb;
}

.systems-project-image{

    position:relative;

    overflow:hidden;
}

.systems-project-image::after{

    content:"";

    position:absolute;

    inset:0;

    background:
    linear-gradient(
    to top,
    rgba(0,0,0,.55),
    rgba(0,0,0,.08)
    );
}
.cinematic-dashboard::before{

    content:"";

    position:absolute;

    inset:-2px;

    border-radius:34px;

    background:
    linear-gradient(
    135deg,
    rgba(37,99,235,.35),
    transparent,
    rgba(96,165,250,.25)
    );

    z-index:-1;

    filter:blur(30px);

    opacity:.9;
}

.systems-project-image img{

    transition:
    transform 1.2s cubic-bezier(.19,1,.22,1);
}

.systems-project-card:hover img{

    transform:scale(1.06);
}

@media(max-width:768px){

    section{

        padding:
        90px 0;
    }

}

/* =========================================
PREMIUM CTA BUTTON
========================================= */

.systems-btn-premium{

    position:relative;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

    padding:18px 34px;

    border-radius:18px;

    text-decoration:none;

    background:linear-gradient(
        135deg,
        #0d1b42 0%,
        #102a66 45%,
        #2563eb 100%
    );

    border:1px solid rgba(255,255,255,.12);

    box-shadow:
    0 20px 60px rgba(37,99,235,.28),
    inset 0 1px 0 rgba(255,255,255,.12);

    transition:.45s ease;

    backdrop-filter:blur(12px);
}

.systems-btn-premium:hover{

    transform:
    translateY(-4px)
    scale(1.02);

    box-shadow:
    0 30px 90px rgba(37,99,235,.42),
    0 0 40px rgba(59,130,246,.25);
}

.systems-btn-premium .btn-content{

    position:relative;

    z-index:2;

    display:flex;

    align-items:center;

    gap:12px;

    color:#fff;

    font-size:14px;

    font-weight:700;

    letter-spacing:.12em;

    text-transform:uppercase;
}

.systems-btn-premium svg{

    width:18px;
    height:18px;

    stroke-width:2.2;
}

.systems-btn-premium .btn-glow{

    position:absolute;

    inset:-40%;

    background:
    radial-gradient(
        circle,
        rgba(255,255,255,.28) 0%,
        transparent 70%
    );

    opacity:.6;

    animation:
    premiumGlow 5s linear infinite;
}

@keyframes premiumGlow{

    0%{
        transform:translateX(-40%) rotate(0deg);
    }

    100%{
        transform:translateX(40%) rotate(360deg);
    }
}

.systems-btn-primary{

    color:#ffffff !important;

    font-weight:700;

    letter-spacing:.08em;

    text-decoration:none;

    text-transform:uppercase;

    font-size:14px;
}