/* ==========================
   FOUNDATION
========================== */

.lumexa-shell{
    width:min(1280px,calc(100% - 40px));
    margin:0 auto;
}

.lumexa-service-section img,
.lumexa-service-section-alt img,
.lumexa-hero-media img,
.lumexa-intro-image img{
    max-width:100%;
    display:block;
}

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

.lumexa-hero-section{
    position:relative;
    overflow:hidden;
    padding:95px 0 85px;
    background:
    radial-gradient(circle at 8% 12%,rgba(20,184,166,.12),transparent 28%),
    radial-gradient(circle at 92% 15%,rgba(125,211,252,.18),transparent 30%),
    linear-gradient(180deg,#fbfeff 0%,#eefcff 100%);
}

.lumexa-hero-section::before{
    content:"";
    position:absolute;
    width:720px;
    height:720px;
    right:-280px;
    top:-280px;
    border-radius:50%;
    background:rgba(20,184,166,.08);
    filter:blur(80px);
}

.lumexa-hero-section::after{
    content:"";
    position:absolute;
    width:520px;
    height:520px;
    left:-200px;
    bottom:-220px;
    border-radius:50%;
    background:rgba(125,211,252,.12);
    filter:blur(80px);
}

.lumexa-hero-layout{
    display:grid;
    grid-template-columns:1.08fr .92fr;
    gap:90px;
    align-items:center;
    position:relative;
    z-index:2;
}

.lumexa-label{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:14px 22px;
    border-radius:999px;
    background:rgba(255,255,255,.8);
    border:1px solid rgba(8,24,39,.08);
    backdrop-filter:blur(22px);
    box-shadow:0 20px 50px rgba(8,24,39,.08);
    color:#0f766e;
    text-transform:uppercase;
    font-size:12px;
    letter-spacing:.08em;
    font-weight:800;
    margin-bottom:28px;
}

.lumexa-label::before{
    content:"";
    width:10px;
    height:10px;
    border-radius:50%;
    background:#14b8a6;
}

.lumexa-hero-content h1{
    margin:0 0 28px;
    color:#081827;
    font-size:clamp(3.4rem,5vw,4.8rem);
    line-height:1.02;
    letter-spacing:-2.4px;
    font-weight:800;
}

.lumexa-lead{
    margin:0 0 20px;
    color:#607182;
    line-height:1.95;
    font-size:1.03rem;
}

.lumexa-action-group{
    display:flex;
    gap:16px;
    flex-wrap:wrap;
    margin-top:36px;
}

.lumexa-btn-primary,
.lumexa-btn-secondary{
    min-height:64px;
    padding:0 32px;
    border-radius:20px;
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    transition:.35s ease;
    font-weight:700;
}

.lumexa-btn-primary{
    color:#fff;
    background:linear-gradient(135deg,#14b8a6,#0891b2);
    box-shadow:0 30px 70px rgba(20,184,166,.30);
}

.lumexa-btn-primary:hover{
    transform:translateY(-6px);
}

.lumexa-btn-secondary{
    color:#081827;
    background:#fff;
    border:1px solid rgba(8,24,39,.08);
    box-shadow:0 18px 45px rgba(8,24,39,.08);
}

.lumexa-btn-secondary:hover{
    transform:translateY(-6px);
}

.lumexa-hero-media{
    position:relative;
}

.lumexa-hero-media::before{
    content:"";
    position:absolute;
    inset:-18px;
    border-radius:42px;
    background:
    linear-gradient(
    135deg,
    rgba(20,184,166,.22),
    rgba(125,211,252,.22)
    );
}

.lumexa-hero-media img{
    position:relative;
    z-index:2;
    width:100%;
    border-radius:34px;
    box-shadow:0 50px 130px rgba(8,24,39,.18);
}

.lumexa-floating-card{
    position:absolute;
    z-index:3;
    max-width:230px;
    padding:20px 22px;
    border-radius:24px;
    background:rgba(255,255,255,.85);
    backdrop-filter:blur(24px);
    border:1px solid rgba(255,255,255,.8);
    box-shadow:0 25px 70px rgba(8,24,39,.12);
}

.lumexa-floating-card strong{
    display:block;
    margin-bottom:6px;
    color:#081827;
    font-size:1rem;
}

.lumexa-floating-card span{
    color:#68798b;
    line-height:1.7;
    font-size:.9rem;
}

.lumexa-card-a{
    left:-40px;
    bottom:45px;
}

.lumexa-card-b{
    right:-35px;
    top:40px;
}

/* ==========================
   INTRO SECTION
========================== */

.lumexa-intro-section{
    padding:90px 0;
}

.lumexa-intro-grid{
    display:grid;
    grid-template-columns:.9fr 1.1fr;
    gap:90px;
    align-items:center;
}

.lumexa-intro-image{
    position:relative;
}

.lumexa-intro-image::before{
    content:"";
    position:absolute;
    inset:-18px;
    border-radius:34px;
    background:
    linear-gradient(
    135deg,
    rgba(20,184,166,.12),
    rgba(125,211,252,.16)
    );
}

.lumexa-intro-image img{
    position:relative;
    z-index:2;
    border-radius:28px;
    box-shadow:0 40px 100px rgba(8,24,39,.14);
}

.lumexa-intro-content h2{
    margin:0 0 24px;
    color:#081827;
    font-size:clamp(2.6rem,4vw,3.8rem);
    line-height:1.06;
    letter-spacing:-1.8px;
}

.lumexa-intro-content p{
    margin-bottom:18px;
    color:#607182;
    line-height:1.95;
}

/* ==========================
   BENEFIT SECTION
========================== */

.lumexa-benefit-section{
    padding:90px 0;
    background:
    linear-gradient(180deg,#ffffff 0%,#f4fdff 100%);
}

.lumexa-section-head{
    max-width:860px;
    margin:0 auto 60px;
    text-align:center;
}

.lumexa-section-head span{
    display:inline-block;
    margin-bottom:16px;
    color:#0f766e;
    text-transform:uppercase;
    font-size:12px;
    letter-spacing:.08em;
    font-weight:800;
}

.lumexa-section-head h2{
    margin:0 0 18px;
    color:#081827;
    font-size:clamp(2.7rem,4vw,4rem);
    line-height:1.05;
    letter-spacing:-1.8px;
}

.lumexa-section-head p{
    color:#667789;
    line-height:1.9;
}

.lumexa-benefit-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:24px;
}

.lumexa-benefit-card{
    position:relative;
    overflow:hidden;
    padding:36px 30px;
    border-radius:30px;
    background:#fff;
    box-shadow:0 25px 70px rgba(8,24,39,.08);
    transition:.35s ease;
}

.lumexa-benefit-card::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:5px;
    background:
    linear-gradient(90deg,#14b8a6,#7dd3fc);
}

.lumexa-benefit-card:hover{
    transform:translateY(-10px);
    box-shadow:0 40px 100px rgba(8,24,39,.15);
}

.lumexa-benefit-card h3{
    margin:0 0 14px;
    color:#081827;
    font-size:1.35rem;
    line-height:1.3;
}

.lumexa-benefit-card p{
    color:#6a7b8c;
    line-height:1.85;
}

/* ==========================
   SERVICE SECTION
========================== */

.lumexa-service-section{
    padding:90px 0 40px;
}

.lumexa-service-section-alt{
    padding:0 0 90px;
}

.lumexa-service-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
}

.lumexa-service-card{
    position:relative;
    overflow:hidden;
    border-radius:34px;
    background:#fff;
    box-shadow:0 25px 80px rgba(8,24,39,.08);
    transition:.4s ease;
}

.lumexa-service-card:hover{
    transform:translateY(-12px);
    box-shadow:0 45px 120px rgba(8,24,39,.15);
}

.lumexa-service-card::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:6px;
    background:
    linear-gradient(
    90deg,
    #14b8a6,
    #7dd3fc
    );
    z-index:3;
}

.lumexa-service-image{
    overflow:hidden;
    position:relative;
}

.lumexa-service-image::after{
    content:"";
    position:absolute;
    inset:0;
    background:
    linear-gradient(
    180deg,
    transparent,
    rgba(8,24,39,.12)
    );
}

.lumexa-service-image img{
    width:100%;
    height:260px;
    object-fit:cover;
    transition:.6s ease;
}

.lumexa-service-card:hover .lumexa-service-image img{
    transform:scale(1.08);
}

.lumexa-service-content{
    padding:32px;
}

.lumexa-service-content h3{
    margin:0 0 14px;
    color:#081827;
    font-size:1.55rem;
    line-height:1.25;
}

.lumexa-service-content p{
    color:#667789;
    line-height:1.85;
    margin-bottom:22px;
}

.lumexa-service-link{
    display:inline-flex;
    align-items:center;
    gap:10px;
    color:#0891b2;
    font-weight:700;
    text-decoration:none;
}

.lumexa-service-link::after{
    content:"→";
    transition:.3s ease;
}

.lumexa-service-link:hover::after{
    transform:translateX(6px);
}

/* ==========================
   CONDITIONS SECTION
========================== */

.lumexa-condition-section{
    padding:90px 0;
    background:
    linear-gradient(
    180deg,
    #f7fdff 0%,
    #ffffff 100%
    );
}

.lumexa-condition-layout{
    display:grid;
    grid-template-columns:1.08fr .92fr;
    gap:90px;
    align-items:center;
}

.lumexa-condition-content span{
    display:inline-block;
    margin-bottom:18px;
    color:#0f766e;
    font-weight:800;
    text-transform:uppercase;
    font-size:12px;
    letter-spacing:.08em;
}

.lumexa-condition-content h2{
    margin:0 0 24px;
    color:#081827;
    font-size:clamp(2.6rem,4vw,3.8rem);
    line-height:1.06;
    letter-spacing:-1.8px;
}

.lumexa-condition-content p{
    margin-bottom:18px;
    color:#607182;
    line-height:1.95;
}

.lumexa-condition-image{
    position:relative;
}

.lumexa-condition-image::before{
    content:"";
    position:absolute;
    inset:-18px;
    border-radius:36px;
    background:
    linear-gradient(
    135deg,
    rgba(20,184,166,.12),
    rgba(125,211,252,.18)
    );
}

.lumexa-condition-image img{
    width:100%;
    border-radius:30px;
    position:relative;
    z-index:2;
    box-shadow:0 45px 120px rgba(8,24,39,.14);
}

/* ==========================
   PROCESS SECTION
========================== */

.lumexa-process-section{
    padding:90px 0;
}

.lumexa-process-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:28px;
}

.lumexa-process-card{
    position:relative;
    padding:36px 30px;
    border-radius:32px;
    background:#fff;
    box-shadow:0 25px 80px rgba(8,24,39,.08);
    overflow:hidden;
    transition:.35s ease;
}

.lumexa-process-card:hover{
    transform:translateY(-10px);
    box-shadow:0 40px 110px rgba(8,24,39,.15);
}

.lumexa-process-card::after{
    content:"";
    position:absolute;
    inset:auto 0 0 0;
    height:5px;
    background:
    linear-gradient(
    90deg,
    #14b8a6,
    #7dd3fc
    );
}

.lumexa-process-number{
    font-size:4rem;
    font-weight:800;
    line-height:1;
    margin-bottom:18px;
    color:rgba(20,184,166,.18);
}

.lumexa-process-card h3{
    margin:0 0 14px;
    color:#081827;
    font-size:1.45rem;
}

.lumexa-process-card p{
    color:#68798b;
    line-height:1.85;
}

/* ==========================
   VALUE SECTION
========================== */

.lumexa-value-section{
    padding:90px 0;
}

.lumexa-value-content{
    position:relative;
    max-width:1050px;
    margin:0 auto;
    text-align:center;
    padding:65px;
    border-radius:40px;
    background:
    linear-gradient(
    135deg,
    rgba(20,184,166,.05),
    rgba(125,211,252,.12)
    );
    border:1px solid rgba(20,184,166,.08);
    overflow:hidden;
}

.lumexa-value-content::before{
    content:"";
    position:absolute;
    width:280px;
    height:280px;
    top:-120px;
    right:-80px;
    border-radius:50%;
    background:rgba(20,184,166,.08);
    filter:blur(30px);
}

.lumexa-value-content::after{
    content:"";
    position:absolute;
    width:220px;
    height:220px;
    left:-80px;
    bottom:-80px;
    border-radius:50%;
    background:rgba(125,211,252,.10);
    filter:blur(30px);
}

.lumexa-value-content h2{
    position:relative;
    z-index:2;
    margin:0 0 24px;
    color:#081827;
    font-size:clamp(2.6rem,4vw,3.8rem);
    line-height:1.08;
    letter-spacing:-1.8px;
}

.lumexa-value-content p{
    position:relative;
    z-index:2;
    color:#607182;
    line-height:1.95;
    max-width:900px;
    margin:0 auto 18px;
}

.lumexa-value-content p:last-child{
    margin-bottom:0;
}

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

.lumexa-cta-section{
    padding:90px 0;
    background:
    linear-gradient(
    180deg,
    #081827 0%,
    #10293e 100%
    );
    overflow:hidden;
}

.lumexa-cta-layout{
    position:relative;
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:70px;
    align-items:center;
    padding:60px;
    border-radius:42px;
    background:
    linear-gradient(
    135deg,
    rgba(255,255,255,.06),
    rgba(255,255,255,.03)
    );
    border:1px solid rgba(255,255,255,.08);
    backdrop-filter:blur(24px);
}

.lumexa-cta-layout::before{
    content:"";
    position:absolute;
    width:420px;
    height:420px;
    right:-140px;
    top:-180px;
    border-radius:50%;
    background:rgba(20,184,166,.16);
    filter:blur(70px);
}

.lumexa-cta-layout::after{
    content:"";
    position:absolute;
    width:320px;
    height:320px;
    left:-100px;
    bottom:-120px;
    border-radius:50%;
    background:rgba(125,211,252,.12);
    filter:blur(70px);
}

.lumexa-cta-content{
    position:relative;
    z-index:2;
}

.lumexa-cta-content span{
    display:inline-block;
    margin-bottom:18px;
    color:#7dd3fc;
    text-transform:uppercase;
    font-size:12px;
    font-weight:800;
    letter-spacing:.08em;
}

.lumexa-cta-content h2{
    margin:0 0 24px;
    color:#fff;
    font-size:clamp(2.8rem,4vw,4.2rem);
    line-height:1.04;
    letter-spacing:-2px;
}

.lumexa-cta-content p{
    color:rgba(255,255,255,.78);
    line-height:1.95;
    font-size:1.03rem;
}

.lumexa-cta-actions{
    display:flex;
    gap:16px;
    flex-wrap:wrap;
    margin-top:34px;
}

.lumexa-cta-primary,
.lumexa-cta-secondary{
    min-height:64px;
    padding:0 34px;
    border-radius:20px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    font-weight:700;
    transition:.35s ease;
}

.lumexa-cta-primary{
    color:#081827;
    background:
    linear-gradient(
    135deg,
    #14b8a6,
    #7dd3fc
    );
    box-shadow:0 30px 80px rgba(20,184,166,.35);
}

.lumexa-cta-primary:hover{
    transform:translateY(-6px);
}

.lumexa-cta-secondary{
    color:#fff;
    border:1px solid rgba(255,255,255,.12);
    background:rgba(255,255,255,.08);
}

.lumexa-cta-secondary:hover{
    transform:translateY(-6px);
}

.lumexa-cta-image{
    position:relative;
    z-index:2;
}

.lumexa-cta-image img{
    width:100%;
    border-radius:34px;
    box-shadow:0 50px 140px rgba(0,0,0,.35);
}

/* ==========================
   FAQ SECTION
========================== */

.lumexa-faq-section{
    padding:90px 0;
    background:
    linear-gradient(
    180deg,
    #f8fdff 0%,
    #ffffff 100%
    );
}

.lumexa-faq-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:26px;
}

.lumexa-faq-card{
    position:relative;
    overflow:hidden;
    padding:34px;
    border-radius:30px;
    background:#fff;
    box-shadow:0 25px 70px rgba(8,24,39,.08);
    transition:.35s ease;
}

.lumexa-faq-card::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:5px;
    height:100%;
    background:
    linear-gradient(
    180deg,
    #14b8a6,
    #7dd3fc
    );
}

.lumexa-faq-card:hover{
    transform:translateY(-8px);
    box-shadow:0 40px 110px rgba(8,24,39,.14);
}

.lumexa-faq-card h3{
    margin:0 0 14px;
    color:#081827;
    font-size:1.35rem;
    line-height:1.35;
}

.lumexa-faq-card p{
    margin:0;
    color:#68798b;
    line-height:1.9;
}

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

@media(max-width:1100px){

    .lumexa-hero-layout,
    .lumexa-intro-grid,
    .lumexa-condition-layout,
    .lumexa-cta-layout{
        grid-template-columns:1fr;
        gap:50px;
    }

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

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

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

    .lumexa-faq-grid{
        grid-template-columns:1fr;
    }

}

@media(max-width:768px){

    .lumexa-hero-section,
    .lumexa-intro-section,
    .lumexa-benefit-section,
    .lumexa-service-section,
    .lumexa-service-section-alt,
    .lumexa-condition-section,
    .lumexa-process-section,
    .lumexa-value-section,
    .lumexa-cta-section,
    .lumexa-faq-section{
        padding:70px 0;
    }

    .lumexa-benefit-grid,
    .lumexa-service-grid,
    .lumexa-process-grid{
        grid-template-columns:1fr;
    }

    .lumexa-floating-card{
        display:none;
    }

    .lumexa-value-content,
    .lumexa-cta-layout{
        padding:34px;
    }

    .lumexa-btn-primary,
    .lumexa-btn-secondary,
    .lumexa-cta-primary,
    .lumexa-cta-secondary{
        width:100%;
    }

    .lumexa-action-group,
    .lumexa-cta-actions{
        flex-direction:column;
    }

    .lumexa-hero-content h1{
        font-size:42px;
        letter-spacing:-1px;
    }

    .lumexa-intro-content h2,
    .lumexa-section-head h2,
    .lumexa-condition-content h2,
    .lumexa-value-content h2,
    .lumexa-cta-content h2{
        font-size:34px;
        letter-spacing:-1px;
    }

}

@media(max-width:480px){

    .lumexa-shell{
        width:min(100% - 24px);
    }

    .lumexa-hero-content h1{
        font-size:38px;
    }

    .lumexa-service-content,
    .lumexa-faq-card,
    .lumexa-process-card{
        padding:28px;
    }

    .lumexa-value-content,
    .lumexa-cta-layout{
        padding:28px;
    }

}