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

.solutions-hero{

    position:relative;

    overflow:hidden;

    min-height:85vh;

    display:flex;

    align-items:center;

    padding:120px 0 90px;

}

.solutions-hero-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:80px;

}

.solutions-hero-content{

    position:relative;

    z-index:2;

}

.solutions-hero-content h1{

    max-width:700px;

    margin:22px 0 28px;

}

.solutions-hero-content p{

    max-width:620px;

    margin-bottom:38px;

}
.solutions-visual{

    position:relative;

    width:600px;

    height:600px;

    margin:auto;

}

.solutions-core{

    position:absolute;

    top:50%;

    left:50%;

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

    width:170px;

    height:170px;

    border-radius:50%;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:12px;

    text-align:center;

    background:

    linear-gradient(

        135deg,

        var(--primary),

        var(--secondary)

    );

    box-shadow:

    0 0 50px rgba(0,212,255,.35);

    z-index:5;

}

.solutions-core i{

    font-size:42px;

}

.solutions-core span{

    font-weight:700;

    line-height:1.3;

}
.solutions-orbit{

    position:absolute;

    top:50%;

    left:50%;

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

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

    border-radius:50%;

    pointer-events:none;

}

.orbit-one{

    width:360px;

    height:360px;

}

.orbit-two{

    width:520px;

    height:520px;

}
.solution-node{

    position:absolute;

    width:110px;

    height:110px;

    border-radius:22px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:10px;

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

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

    backdrop-filter:blur(18px);

    transition:.35s;

    z-index:4;

}

.solution-node i{

    font-size:25px;

}

.solution-node:hover{

    transform:translateY(-8px) scale(1.05);

    border-color:var(--secondary);

    box-shadow:

    0 15px 40px rgba(0,0,0,.2);

}
.node-commerce{

    top:10px;

    left:245px;

}

.node-cms{

    top:110px;

    right:20px;

}

.node-ai{

    bottom:100px;

    right:20px;

}

.node-apps{

    bottom:10px;

    left:245px;

}

.node-erp{

    top:245px;

    left:0;

}
/*=====================================
SOLUTIONS GRID
======================================*/

.solutions-grid{

    display:grid;

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

    gap:24px;

    margin-top:70px;

}

.solution-card{

    position:relative;

    min-height:360px;

    padding:32px;

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    overflow:hidden;

    border-radius:26px;

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

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

    backdrop-filter:blur(18px);

    transition:

        transform .4s ease,

        border-color .4s ease,

        box-shadow .4s ease;

}

.solution-card:hover{

    transform:translateY(-10px);

    border-color:rgba(0,212,255,.4);

    box-shadow:

        0 25px 60px rgba(0,0,0,.2);

}

.solution-card::before{

    content:"";

    position:absolute;

    width:220px;

    height:220px;

    top:-100px;

    right:-100px;

    border-radius:50%;

    background:radial-gradient(

        circle,

        rgba(0,212,255,.18),

        transparent 70%

    );

    pointer-events:none;

}
.solution-card-icon{

    width:64px;

    height:64px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:18px;

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

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

}

.solution-card-icon i{

    font-size:26px;

}
.solution-card-content{

    position:relative;

    z-index:1;

}

.solution-number{

    display:block;

    margin-bottom:14px;

    font-size:13px;

    letter-spacing:2px;

    color:var(--secondary);

}

.solution-card h3{

    margin-bottom:14px;

}

.solution-card p{

    line-height:1.7;

    color:var(--text-light);

}
.solution-tech{

    display:flex;

    flex-wrap:wrap;

    gap:8px;

    margin-top:22px;

}

.solution-tech span{

    padding:7px 12px;

    border-radius:20px;

    font-size:12px;

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

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

}
.solution-card-arrow{

    position:absolute;

    right:28px;

    bottom:28px;

    width:42px;

    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

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

    transition:.35s;

}

.solution-card:hover .solution-card-arrow{

    transform:rotate(45deg);

    background:var(--primary);

}
/*=====================================
SOLUTIONS TECHNOLOGY ECOSYSTEM
======================================*/

.solutions-tech-board{

    display:grid;

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

    gap:24px;

    margin-top:70px;

}

.tech-category{

    position:relative;

    padding:32px;

    min-height:220px;

    border-radius:26px;

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

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

    backdrop-filter:blur(18px);

    overflow:hidden;

    transition:.4s ease;

}

.tech-category:hover{

    transform:translateY(-8px);

    border-color:rgba(0,212,255,.35);

    box-shadow:

        0 25px 60px rgba(0,0,0,.2);

}

.tech-category::before{

    content:"";

    position:absolute;

    width:240px;

    height:240px;

    top:-120px;

    right:-100px;

    border-radius:50%;

    background:radial-gradient(

        circle,

        rgba(0,212,255,.16),

        transparent 70%

    );

    pointer-events:none;

}
.tech-category-header{

    position:relative;

    z-index:1;

    display:flex;

    align-items:center;

    gap:16px;

    margin-bottom:28px;

}

.tech-category-header > i{

    width:52px;

    height:52px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:16px;

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

    font-size:22px;

}

.tech-category-header h3{

    margin:0;

    font-size:20px;

}
.tech-category-items{

    position:relative;

    z-index:1;

    display:flex;

    flex-wrap:wrap;

    gap:12px;

}

.tech-pill{

    display:inline-flex;

    align-items:center;

    gap:9px;

    padding:11px 16px;

    border-radius:30px;

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

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

    font-size:14px;

    transition:.3s ease;

}

.tech-pill i{

    font-size:16px;

}

.tech-pill:hover{

    transform:translateY(-4px);

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

    border-color:var(--secondary);

}
/*=====================================
SOLUTIONS CTA
======================================*/

.solutions-cta-section{

    padding-top:40px;

}

.solutions-cta-box{

    position:relative;

    overflow:hidden;

    text-align:center;

    padding:100px 70px;

    border-radius:32px;

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

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

    backdrop-filter:blur(24px);

}

.solutions-cta-glow{

    position:absolute;

    width:600px;

    height:600px;

    top:-320px;

    left:50%;

    transform:translateX(-50%);

    border-radius:50%;

    background:radial-gradient(

        circle,

        rgba(0,212,255,.2),

        transparent 70%

    );

    pointer-events:none;

}

.solutions-cta-box h2{

    position:relative;

    z-index:1;

    max-width:800px;

    margin:24px auto;

}

.solutions-cta-box p{

    position:relative;

    z-index:1;

    max-width:720px;

    margin:0 auto 42px;

    font-size:18px;

    line-height:1.8;

    color:var(--text-light);

}

.solutions-cta-box .hero-buttons{

    position:relative;

    z-index:1;

    justify-content:center;

}