/* =====================================================
   ENTERPRISE DESIGN TOKENS
===================================================== */

:root{

    /* Brand Colors */
    --sx-deep-green:#0F3D2E;
    --sx-deep-blue:#0B1F2A;
    --sx-gold:#fcba07;

    /* Background */
    --sx-bg-soft:#F6F8FA;
    --sx-bg-light:#FBFCFD;

    /* Text */
    --sx-text-main:#0F172A;
    --sx-text-soft:#64748B;

    /* Borders */
    --sx-border:#E2E8F0;

    /* Shadows */
    --sx-shadow-sm:0 6px 14px rgba(0,0,0,0.05);
    --sx-shadow-md:0 18px 40px rgba(0,0,0,0.08);
    --sx-shadow-lg:0 32px 70px rgba(0,0,0,0.12);

    /* Radius */
    --sx-radius-sm:10px;
    --sx-radius-md:16px;
    --sx-radius-lg:22px;

}


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

.slx-hero{

    padding:120px 0;

    background:
        radial-gradient(circle at 20% 30%, rgba(255,255,255,0.08), transparent 40%),
        linear-gradient(135deg,#0F3D2E,#0B1F2A);

    color:white;

}

.slx-hero-inner{

    display:flex;
    flex-direction:column;
    gap:70px;

}

.slx-hero-tag{

    display:inline-block;

    font-size:12px;

    letter-spacing:1px;

    text-transform:uppercase;

    background:rgba(255,255,255,0.1);

    padding:6px 14px;

    border-radius:30px;

    margin-bottom:18px;

}

.slx-hero-text h1{

    font-size:36px;

    font-weight:700;

    line-height:1.2;

    margin-bottom:24px;

}

.slx-hero-text p{

    font-size:16px;

    opacity:0.92;

    max-width:560px;

    margin-bottom:34px;

}

.slx-hero-actions{

    display:flex;

    flex-direction:column;

    gap:14px;

}

/* Hero Feature Card */

.slx-hero-card{

    background:rgba(255,255,255,0.08);

    padding:34px;

    border-radius:var(--sx-radius-md);

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

    backdrop-filter:blur(10px);

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

}

.slx-hero-card h4{

    margin-bottom:16px;

    font-size:17px;

    font-weight:600;

}

.slx-hero-card ul{

    list-style:none;

}

.slx-hero-card li{

    margin-bottom:12px;

    font-size:14px;

    opacity:0.95;

}



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

.slx-section{

    padding:110px 0;

}

.slx-section-soft{

    background:var(--sx-bg-soft);

}

.slx-section-head{

    text-align:center;

    max-width:720px;

    margin:0 auto 70px auto;

}

.slx-section-head h2{

    font-size:32px;

    font-weight:700;

    color:var(--sx-deep-green);

    margin-bottom:14px;

}

.slx-section-head p{

    font-size:16px;

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

}



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

.slx-service-card,
.slx-feature{

    background:white;

    padding:34px;

    border-radius:var(--sx-radius-md);

    border:1px solid var(--sx-border);

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

    transition:all .28s ease;

}

.slx-service-card:hover,
.slx-feature:hover{

    transform:translateY(-8px);

    box-shadow:var(--sx-shadow-lg);

}

.slx-service-card h3{

    font-size:19px;

    margin-bottom:10px;

}

.slx-service-card p,
.slx-feature p{

    font-size:15px;

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

}

.slx-feature h4{

    font-size:17px;

    margin-bottom:8px;

}



/* =====================================================
   STEPS
===================================================== */

.slx-steps{

    display:flex;

    flex-direction:column;

    gap:45px;

    text-align:center;

}

.step span{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:42px;

    height:42px;

    background:var(--sx-gold);

    color:black;

    font-weight:600;

    border-radius:50%;

    margin-bottom:16px;

}

.step h4{

    margin-bottom:10px;

    font-size:17px;

}

.step p{

    font-size:15px;

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

}



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

.slx-cta{

    background:
        radial-gradient(circle at 80% 30%, rgba(255,255,255,0.08), transparent 40%),
        linear-gradient(135deg,#0B1F2A,#08202C);

    color:white;

    padding:110px 0;

}

.slx-cta-inner{

    display:flex;

    flex-direction:column;

    gap:30px;

    align-items:center;

    text-align:center;

}

.slx-cta h2{

    font-size:32px;

    font-weight:700;

}

.slx-cta p{

    font-size:16px;

    opacity:0.9;

}

.btn-primary.large{

    padding:16px 32px;
    width : 250px;
    font-size:16px;

}



/* =====================================================
   CEO SECTION
===================================================== */

.slx-ceo-inner{

    display:grid;

    grid-template-columns:340px 1fr;

    gap:70px;

    align-items:center;

}

.slx-ceo-photo{

    background:linear-gradient(145deg,#f8fafc,#eef3f8);

    padding:20px;

    border-radius:var(--sx-radius-md);

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

}

.slx-ceo-photo img{

    width:100%;

    border-radius:12px;

    object-fit:cover;

}

.slx-ceo-label{

    font-size:12px;

    letter-spacing:1px;

    text-transform:uppercase;

    color:#6b7280;

    font-weight:600;

}

.slx-ceo-name{

    font-size:34px;

    font-weight:700;

    margin:6px 0;

    color:var(--sx-text-main);

}

.slx-ceo-role{

    font-size:15px;

    font-weight:600;

    color:#2563eb;

    margin-bottom:20px;

}

.slx-ceo-bio{

    line-height:1.85;

    font-size:15px;

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

    margin-bottom:20px;

}

.slx-ceo-meta{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:34px;

}

.slx-ceo-meta h4{

    font-size:16px;

    margin-bottom:10px;

}

.slx-ceo-meta ul{

    padding-left:18px;

}

.slx-ceo-meta li{

    margin-bottom:8px;

}



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

@media (max-width:900px){

    .slx-ceo-inner{

        grid-template-columns:1fr;

        text-align:center;

    }

    .slx-ceo-meta{

        grid-template-columns:1fr;

    }

}


/* =====================================================
   TABLET
===================================================== */

@media (min-width:768px){

    .slx-hero-text h1{

        font-size:44px;

    }

    .slx-hero-actions{

        flex-direction:row;

    }

    .slx-steps{

        flex-direction:row;

        justify-content:space-between;

    }

    .slx-cta-inner{

        flex-direction:row;

        justify-content:space-between;

        text-align:left;

    }

}


/* =====================================================
   DESKTOP
===================================================== */

@media (min-width:1024px){

    .slx-hero-inner{

        flex-direction:row;

        justify-content:space-between;

        align-items:center;

    }

    .slx-hero-text h1{

        font-size:52px;

    }

}