/* ===============================
   CASE STUDY - HERO
=============================== */

#case-study{
    background:
        radial-gradient(circle at top right,
        rgba(102,51,152,.06),
        transparent 45%),
        linear-gradient(#fff,#fff);

    position:relative;

    overflow:hidden;
}

#case-study::before{

    content:"";

    position:absolute;

    width:900px;
    height:900px;

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

    background:#663398;

    border-radius:50%;

    filter:blur(220px);

    opacity:.06;

    pointer-events:none;

}

#case-study::after{

    content:"";

    position:absolute;

    width:700px;
    height:700px;

    left:-250px;
    bottom:-200px;

    background:#a78bfa;

    border-radius:50%;

    filter:blur(220px);

    opacity:.05;

    pointer-events:none;

}
/* Container */

.case-hero{

padding:40px 0 40px;

display:flex;

align-items:flex-start;

min-height:auto;

}

.hero-container{

    position:relative;

    max-width:1400px;

    margin:0 auto;

    padding:40px 24px;

    display:grid;

    grid-template-columns:47% 53%;

    align-items:flex-start;

    gap:60px;

    overflow:visible;

}

/* Left */

.hero-tag{
    display:inline-block;
    color:#663398;
    font-size:14px;
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;
    margin-bottom:24px;
    position:relative;

    z-index:5;
}

.hero-left h1{

    font-size:clamp(3.2rem,4.6vw,4.8rem);

    line-height:.95;

    letter-spacing:-2px;

}


.hero-highlight{

    color:#1F5D15;

}

.hero-description{

    margin:24px 0 32px;

    max-width:620px;

    font-size:20px;

    line-height:1.9;

    color:#666;
}

.hero-btn:hover{
    transform:translateY(-3px);
}

/* Right */

.hero-right{
    margin-top:-10px;

    position:relative;

    height:720px;
    

    display:flex;

    align-items:center;

    justify-content:center;

}

.hero-right{ margin-bottom:130px; }

.hero-dashboard{

    position:absolute;

    top:30px;

    left:0px;

    width:92%;

    height:560px;

    overflow:hidden;

    border-radius:30px;

    background:#fff;

    box-shadow:
0 25px 60px rgba(15,23,42,.08),
0 60px 120px rgba(15,23,42,.10),
0 0 0 1px rgba(255,255,255,.8);

    transition:.45s ease;

}

.hero-dashboard:hover{

    transform:translateY(-4px);

}

.hero-dashboard img{

    width:100%;

    height:100%;

    object-fit:contain;

    display:block;

}

.hero-phone{

    position:absolute;

    right:10px;

    bottom:-15px;

    width:250px;

    height:510px;

    overflow:hidden;

    border-radius:42px;

    border:8px solid #171717;
    outline:1px solid rgba(255,255,255,.35);

    background:#fff;

    box-shadow:

        0 45px 90px rgba(0,0,0,.22);

    animation:phoneFloat 5s ease-in-out .9s infinite;

    z-index:10;

}

.hero-phone img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}

@keyframes phoneFloat{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-10px);

}

100%{

transform:translateY(0px);

}

}

.hero-left{

    animation:heroFade .7s ease both;

}

.hero-right{

    animation:heroVisual .9s ease both;

}

@keyframes heroFade{

from{

opacity:0;

transform:translateY(25px);

}

to{

opacity:1;

transform:none;

}

}

@keyframes heroVisual{

from{

opacity:0;

transform:translateX(40px);

}

to{

opacity:1;

transform:none;

}

}



/* Mobile */

@media(max-width:1200px) and (min-width:992px){

.hero-container{
    gap:40px;
}

.hero-right{
    height:640px;
}

.hero-dashboard{
    height:520px;
}

.hero-phone{
    width:230px;
    height:470px;
}

}

@media(max-width:991px){

.hero-container{

grid-template-columns:1fr;
padding:120px 24px 80px;
gap:60px;

}

.hero-actions{

    flex-wrap:wrap;

}

.hero-left h1{

font-size:54px;

}

.hero-right{

height:620px;

}

.hero-phone{

width:230px;
height:470px;

}

}

.hero-dashboard::before{
    content:"";
    position:absolute;
    width:500px;
    height:500px;
    background:#663398;
    filter:blur(180px);
    opacity:.12;
    top:-150px;
    right:-100px;
}

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

.hero-actions{

    display:flex;

    gap:16px;

    margin-bottom:24px;

    flex-wrap:nowrap;

}

.hero-btn{

    min-width:180px;

    height:60px;

    padding:0 28px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    border-radius:18px;

    text-decoration:none;

    font-weight:600;
    
    transition:
        transform .25s ease,
        box-shadow .25s ease,
        background .25s ease;

}

.hero-btn-primary{

    background:#FF6B6B;

    color:#fff;

    box-shadow:
        0 12px 30px rgba(255,107,107,.25);

}

.hero-btn-primary:hover{

    transform:translateY(-5px);

    background:#ff5757;

    box-shadow:
        0 18px 45px rgba(255,107,107,.35);

}

.hero-btn-secondary{

    background:#fff;

    color:#111;

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

.hero-btn-secondary:hover{

    transform:translateY(-5px);

    border-color:#FF6B6B;
}



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

.hero-metrics{
    position:absolute;
    left:0px;
    top:760px;
    width:92%;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:50px;
    padding:20px 0;
    background:#fff;
    border-radius:0 0 30px 30px;
    z-index:5;
}

.metric{

    text-align:center;

    min-width:72px;
    
    position:relative;

}

.metric strong{

    display:block;

    font-size:34px;

    line-height:1;

    font-weight:800;

    color:#1F5D15;

    margin-bottom:6px;

}

.metric span{

    display:block;

    font-size:11px;

    font-weight:500;

    color:#777;

    line-height:1.4;

}

.metric:not(:last-child)::after{

    content:"";

    position:absolute;

    top:6px;

    right:-14px;

    width:1px;

    height:42px;

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

}
/* ===============================
   PROJECT OVERVIEW
=============================== */

.project-overview{
    padding:90px 0;
    border-top:1px solid rgba(0,0,0,.05);
}

.overview-container{
    max-width:1300px;
    margin:auto;
    padding:0 24px;

    display:grid;
    grid-template-columns:1.2fr .8fr;
    gap:80px;
    align-items:center;
}

.section-tag{
    color:#663398;
    font-size:14px;
    font-weight:700;
    letter-spacing:2px;
}

.overview-left h2{

    font-size:clamp(2.6rem,4vw,3.4rem);

    line-height:1.15;

    letter-spacing:-1px;

    margin:18px 0 25px;

}

.overview-left p{
    font-size:20px;
    line-height:1.9;
    color:#666;
    max-width:650px;
}

.overview-card{
    background:#fff;
    border:1px solid #eee;
    border-radius:24px;
    padding:32px;
    box-shadow:0 20px 60px rgba(0,0,0,.06);
}

.overview-card .item{
    display:flex;
    justify-content:space-between;
    padding:18px 0;
    border-bottom:1px solid #eee;
}

.overview-card .item:last-child{
    border:none;
}

.overview-card span{
    color:#777;
}

.overview-card strong{
    color:#111;
}

/* ===============================
   BUSINESS UNDERSTANDING
=============================== */

.business-section{
    padding:90px 0;
    background:#fafafa;
}

.business-container{
    max-width:1300px;
    margin:auto;
    padding:0 24px;
}

.business-container h2{

    font-size:clamp(2.6rem,4vw,3.4rem);

    line-height:1.15;

    letter-spacing:-1px;

    max-width:640px;

    margin:18px 0 30px;

}

.business-intro{
    max-width:850px;
    font-size:20px;
    line-height:1.9;
    color:#666;
}

.workflow{
    margin:70px 0;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:24px;
    flex-wrap:wrap;
}

.step{
    background:#fff;
    padding:18px 28px;
    border-radius:16px;
    box-shadow:0 10px 30px rgba(0,0,0,.05);
    font-weight:600;
}

.challenge-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:30px;
}

.challenge-card{
    background:#fff;
    padding:35px;
    border-radius:20px;
    box-shadow:0 12px 30px rgba(0,0,0,.05);
}

.challenge-card h3{
    margin-bottom:15px;
    font-size:24px;
}

.challenge-card p{
    color:#666;
    line-height:1.8;
}

/* =====================================================
   ECOSYSTEM V2
===================================================== */

.ecosystem-section{

    padding:100px 0;

    background:#fff;

}

.ecosystem-container{

    max-width:1400px;

    margin:auto;

    padding:0 24px;

    display:grid;

    grid-template-columns:46% 54%;

    align-items:center;

    gap:110px;

}

.ecosystem-content h2{

    font-size:clamp(2.6rem,4vw,3.4rem);

    line-height:1.15;

    letter-spacing:-1px;

    margin:20px 0 30px;

}

.ecosystem-content>p{

    font-size:20px;

    line-height:1.9;

    color:#666;

    max-width:620px;

    margin-bottom:50px;

}

.ecosystem-features{

    display:flex;

    flex-direction:column;

    gap:28px;

}

.feature-item{

    display:flex;

    gap:20px;

    align-items:flex-start;

}

.feature-icon{

    width:56px;

    height:56px;

    border-radius:18px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#f7f4ff;

    font-size:22px;

    flex-shrink:0;

}

.feature-item h4{

    margin:0 0 8px;

    font-size:22px;

}

.feature-item span{

    color:#666;

    line-height:1.7;

}

.ecosystem-footer{

    margin-top:50px;

    padding:24px 28px;

    border-radius:22px;

    background:#faf7ff;

    border:1px solid rgba(102,51,152,.08);

}

.ecosystem-footer strong{

    display:block;

    color:#663398;

    font-size:20px;

    margin-bottom:8px;

}

.ecosystem-footer span{

    color:#666;

}







/* RIGHT */

.ecosystem-visual{

    position:relative;

    width:100%;

    height:950px;

}

.ecosystem-svg{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

}

.ring{

    fill:none;

    stroke:#e8ddff;

    stroke-width:2;

    transform-origin:center;

}

.ring1{

    animation:ringRotate 30s linear infinite;

}

.ring2{

    animation:ringRotateReverse 42s linear infinite;

}

.ring3{

    animation:ringRotate 55s linear infinite;

}

@keyframes ringRotate{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

@keyframes ringRotateReverse{

    from{

        transform:rotate(360deg);

    }

    to{

        transform:rotate(0deg);

    }

}

.connector{

    stroke:#b78cff;

    stroke-width:3;

    stroke-linecap:round;

    fill:none;

    stroke-dasharray:8 8;

    opacity:1;

}

.ecosystem-core{

    position:absolute;

    left:50%;

    top:50%;

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

    width:300px;

    height:300px;

    border-radius:50%;

    background:#663398;

    color:#fff;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    box-shadow:
        0 25px 80px rgba(102,51,152,.35);
        
        transition:
        transform .4s ease,
        box-shadow .4s ease;


}

.ecosystem-core:hover{

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

    box-shadow:
0 25px 70px rgba(15,23,42,.08),
0 10px 30px rgba(102,51,152,.10);

}

.ecosystem-core::before{

    content:"";

    position:absolute;

    inset:-18px;

    border-radius:50%;

    border:2px solid rgba(102,51,152,.18);

    animation:corePulse 3s ease infinite;

}

@keyframes corePulse{

    0%{

        transform:scale(1);

        opacity:.7;

    }

    50%{

        transform:scale(1.08);

        opacity:.25;

    }

    100%{

        transform:scale(1);

        opacity:.7;

    }

}

.core-icon{

    width:70px;

    height:70px;

    margin-bottom:18px;

}

.core-icon img{

    width:100%;

}

.ecosystem-core h3{

    margin:0;

    font-size:42px;

}

.ecosystem-core p{

    margin:8px 0 20px;

    opacity:.9;

}

.core-badge{

    padding:10px 18px;

    border-radius:999px;

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

    font-size:14px;

}

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

.app-card{

    position:absolute;

    width:230px;

    padding:24px;

    border-radius:24px;

    background:#fff;

    border:1px solid rgba(0,0,0,.06);

    box-shadow:
        0 20px 60px rgba(15,23,42,.08),
        0 8px 24px rgba(15,23,42,.04);

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

    z-index:5;

}

.app-card:hover{

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

    box-shadow:
        0 40px 90px rgba(102,51,152,.15);

    border-color:#663398;

}

.app-icon{

    width:56px;

    height:56px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:16px;

    background:#f6f2ff;

    font-size:26px;

    margin-bottom:18px;

}

.app-card h4{

    margin:0 0 10px;

    font-size:20px;

}

.app-card p{

    margin:0 0 18px;

    color:#666;

    line-height:1.6;

    font-size:15px;

}

.app-card span{

    display:inline-flex;

    padding:8px 16px;

    border-radius:999px;

    background:#f5f5f5;

    font-size:13px;

    font-weight:600;

}

.customer{

    top:10px;

    left:50%;

    transform:translateX(-50%);

}

.sales{

    top:230px;

    left:10px;

}

.warehouse{

    top:230px;

    right:10px;

}

.delivery{

    bottom:140px;

    left:40px;

}

.admin{

    bottom:140px;

    right:40px;

}

.owner{

    bottom:40px;

    left:50%;

    transform:translateX(-50%);

}

@keyframes floatCard{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

    100%{

        transform:translateY(0);

    }

}

.customer{

    animation:none;

}

.sales{

    animation:floatCard 5s ease-in-out infinite;

}

.warehouse{

    animation:floatCard 7s ease-in-out infinite;

}

.delivery{

    animation:floatCard 6.5s ease-in-out infinite;

}

.admin{

    animation:floatCard 5.5s ease-in-out infinite;

}

.owner{

    animation:none;

}
/* ====================================
   PLATFORM SHOWCASE
==================================== */

.showcase-section{

padding:90px 0;

}

.showcase-container{

max-width:1300px;
margin:auto;
padding:0 24px;

display:grid;
grid-template-columns:1fr 520px;
gap:120px;
align-items:center;

}

.showcase-content h2{

    font-size:clamp(2.6rem,4vw,3.4rem);

    line-height:1.15;

    letter-spacing:-1px;

    margin:20px 0 30px;

}

.showcase-content p{

font-size:20px;
line-height:1.9;
color:#666;
max-width:620px;
margin-bottom:40px;

}

.feature-list{

list-style:none;
padding:0;
margin:0;

}

.feature-list li{

position:relative;

padding-left:34px;
margin-bottom:20px;

font-size:18px;
font-weight:500;

}

.feature-list li::before{

content:"✓";

position:absolute;
left:0;
top:0;

color:#663398;
font-weight:700;

}

.showcase-image{

display:flex;
justify-content:center;

}

.showcase-image img{

width:380px;
height:auto;

border-radius:36px;

box-shadow:0 35px 90px rgba(0,0,0,.15);

transition:.35s;

}

.showcase-image img:hover{

transform:translateY(-10px);

}

/* Alternate Layout */

.showcase-reverse .showcase-container{
    grid-template-columns:520px 1fr;
}

.showcase-reverse .showcase-image{
    order:1;
}

.showcase-reverse .showcase-content{
    order:2;
}

/* ==========================================================
   BUILT FOR SCALE
========================================================== */

.built-scale{

    padding:100px 20px;
    background:#fff;
}

.scale-container{

    max-width:1200px;
    margin:auto;
    text-align:center;
}

.built-scale h2{

    margin:18px 0 24px;
    font-size:clamp(2.6rem,4vw,3.4rem);
    line-height:1.1;
    font-weight:700;
}

.section-description{

    max-width:760px;
    margin:0 auto 70px;
    font-size:1.1rem;
    line-height:1.9;
    color:#666;
}

.scale-grid{

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:28px;
}

.scale-card{

    padding:36px;
    border:1px solid rgba(0,0,0,.08);
    border-radius:24px;
    background:#fff;

    transition:.35s ease;
}

.scale-card:hover{

    transform:translateY(-8px);

    box-shadow:
        0 30px 70px rgba(102,51,152,.08);
}

.scale-card h3{

    margin-bottom:16px;
    font-size:1.25rem;
}

.scale-card p{

    color:#666;
    line-height:1.8;
}

@media(max-width:900px){

.scale-grid{

grid-template-columns:1fr;
}

.built-scale{

padding:100px 20px;
}

}

/* ==========================================================
   TECHNOLOGY
========================================================== */

.technology-section{

    padding:100px 20px;
    background:#fafafa;
}

.technology-container{

    max-width:1100px;
    margin:auto;
    text-align:center;
}

.technology-section h2{

    margin:18px 0 24px;
    font-size:clamp(2.6rem,4vw,3.4rem);
    line-height:1.1;
}

.technology-description{

    max-width:700px;
    margin:0 auto 70px;
    color:#666;
    line-height:1.9;
}

.technology-grid{

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
}

.tech-card{

    padding:32px;

    border-radius:20px;

    background:#fff;

    border:1px solid rgba(0,0,0,.06);

    font-size:1.1rem;

    font-weight:600;

    transition:.3s ease;
}

.tech-card:hover{

    transform:translateY(-6px);

    box-shadow:0 20px 50px rgba(102,51,152,.08);
}

@media(max-width:900px){

.technology-grid{

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

}

}

@media(max-width:600px){

.technology-grid{

grid-template-columns:1fr;

}

}

/* ==========================================================
   BUSINESS OUTCOMES
========================================================== */

.business-outcomes{

    padding:100px 20px;

    background:#fff;
}

.outcomes-container{

    max-width:1100px;

    margin:auto;

    text-align:center;
}

.business-outcomes h2{

    margin:18px 0 24px;

    font-size:clamp(2.6rem,4vw,3.4rem);

    line-height:1.1;
}

.outcomes-description{

    max-width:720px;

    margin:0 auto 70px;

    color:#666;

    line-height:1.9;
}

.outcomes-grid{

    display:grid;

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

    gap:28px;
}

.outcome-item{

    padding:42px;

    border-radius:24px;

    background:#fafafa;

    border:1px solid rgba(0,0,0,.06);

    transition:.3s ease;
}

.outcome-item:hover{

    transform:translateY(-6px);

    box-shadow:0 25px 60px rgba(102,51,152,.08);
}

.outcome-item h3{

    margin-bottom:16px;

    font-size:1.5rem;
}

.outcome-item p{

    color:#666;

    line-height:1.8;
}

@media(max-width:900px){

.outcomes-grid{

grid-template-columns:1fr;

}

}

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

.case-cta{

    padding:110px 20px;

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

    text-align:center;
}

.case-cta-container{

    max-width:850px;

    margin:auto;
}

.case-cta h2{

    margin:20px 0 28px;

    font-size:clamp(2.6rem,4vw,3.4rem);

    line-height:1.1;
}

.case-cta p{

    max-width:700px;

    margin:0 auto 50px;

    line-height:1.9;

    color:#666;
}

.case-cta-buttons{

    display:flex;

    justify-content:center;

    gap:18px;

    flex-wrap:wrap;
}

.primary-btn,
.secondary-btn{
    min-width:180px;
    height:60px;
    padding:0 28px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:18px;
    text-decoration:none;
    font-weight:600;
    transition:
        transform .25s ease,
        box-shadow .25s ease,
        background .25s ease,
        border-color .25s ease;
}

.primary-btn{

    background:#FF6B6B;

    color:#fff;

    box-shadow:
        0 12px 30px rgba(255,107,107,.25);

}

.primary-btn:hover{

    transform:translateY(-5px);

    background:#ff5757;

    box-shadow:
        0 18px 45px rgba(255,107,107,.35);

}

.secondary-btn{
    background:#fff;
    color:#111;
    border:1px solid rgba(0,0,0,.08);
}

.secondary-btn:hover{
    transform:translateY(-5px);
    border-color:#FF6B6B;
}