/* ===================================
   RESET
=================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
        padding-top:90px;
    font-family:'Outfit',sans-serif;
    background:#F8FAFC;
    color:#0F172A;
    overflow-x:hidden;
    position:relative;
}

/* ===================================
   BACKGROUND EFFECTS
=================================== */

body::before{
    content:'';
    position:fixed;
    width:700px;
    height:700px;
    top:-250px;
    right:-250px;

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

    z-index:-10;
}

body::after{
    content:'';
    position:fixed;
    width:800px;
    height:800px;
    bottom:-350px;
    left:-300px;

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

    z-index:-10;
}

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

.hero-wrapper{
    position:relative;
    overflow:hidden;
}

/* Top Graphic */

.hero-wrapper::before{

    content:'';

    position:absolute;

    width:350px;
    height:350px;

    border-radius:50%;

    background:
    linear-gradient(
        135deg,
        #2563EB,
        #60A5FA
    );

    opacity:.08;

    top:-120px;
    left:-120px;
}

/* Bottom Graphic */

.hero-wrapper::after{

    content:'';

    position:absolute;

    width:450px;
    height:450px;

    border-radius:50%;

    background:
    linear-gradient(
        135deg,
        #FF6B35,
        #FDBA74
    );

    opacity:.08;

    right:-180px;
    bottom:-180px;
}

.hero-img{

    width:100%;
    max-width:650px;

    animation:float 6s ease-in-out infinite;
}

@keyframes float{

0%{
transform:translateY(0);
}

50%{
transform:translateY(-15px);
}

100%{
transform:translateY(0);
}

}

.hero-wrapper{
    position:relative;
    overflow:hidden;
    background:#f8fafc;
}

.blob{
    position:absolute;
    border-radius:50%;
    filter:blur(100px);
    opacity:.4;
}

.blob1{
    width:300px;
    height:300px;
    background:#60A5FA;
    top:-100px;
    left:-100px;
}

.blob2{
    width:300px;
    height:300px;
    background:#A78BFA;
    top:100px;
    right:-100px;
}

.blob3{
    width:250px;
    height:250px;
    background:#34D399;
    bottom:-80px;
    left:40%;
}

/* ===================================
   NAVBAR
=================================== */

.premium-navbar{

    position:fixed;
    top:0;
    left:0;

    width:100%;

    z-index:9999;

    backdrop-filter:blur(20px);

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

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

    transition:.3s;
}

.brand-logo{

    font-size:32px;

    font-weight:800;

    color:#2563EB !important;
}

.nav-link{

    color:#334155 !important;

    font-weight:600;

    margin:0 12px;

    transition:.3s;
}

.nav-link:hover{

    color:#2563EB !important;
}

.demo-btn{

    background:
    linear-gradient(
        135deg,
        #2563EB,
        #3B82F6
    );

    color:white;

    text-decoration:none;

    padding:12px 26px;

    border-radius:50px;

    font-weight:600;

    transition:.3s;
}

.demo-btn:hover{

    color:white;

    transform:translateY(-2px);

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

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

.hero-section{

    position:relative;
}

.mini-badge{

    display:inline-block;

    padding:12px 20px;

    border-radius:50px;

    background:white;

    box-shadow:
    0 10px 30px rgba(0,0,0,.06);

    color:#2563EB;

    font-weight:700;
}

.hero-title{

    font-size:82px;

    font-weight:800;

    line-height:1.05;

    margin-top:25px;

    background:
    linear-gradient(
        135deg,
        #0F172A,
        #2563EB
    );

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.hero-description{

    font-size:20px;

    color:#64748B;

    margin-top:25px;

    line-height:1.8;
}

.hero-buttons{

    display:flex;

    gap:15px;

    margin-top:35px;
}

/* ===================================
   BUTTONS
=================================== */

.primary-btn{

    background:
    linear-gradient(
        135deg,
        #2563EB,
        #3B82F6
    );

    color:white;

    text-decoration:none;

    padding:16px 35px;

    border-radius:50px;

    font-weight:700;

    transition:.3s;
}

.primary-btn:hover{

    color:white;

    transform:translateY(-4px);

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

.secondary-btn{

    background:white;

    border:
    1px solid #CBD5E1;

    color:#0F172A;

    text-decoration:none;

    padding:16px 35px;

    border-radius:50px;

    font-weight:700;

    transition:.3s;
}

.secondary-btn:hover{

    color:#0F172A;

    transform:translateY(-4px);

    box-shadow:
    0 10px 25px rgba(0,0,0,.08);
}

/* ===================================
   STATS
=================================== */

.stats-row{

    display:flex;

    gap:50px;

    margin-top:60px;
}

.stats-row h3{

    font-size:40px;

    font-weight:800;

    color:#2563EB;
}

.stats-row p{

    margin-top:5px;

    color:#64748B;
}

/* ===================================
   DASHBOARD
=================================== */

.dashboard-card{

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

    backdrop-filter:blur(25px);

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

    border-radius:35px;

    padding:30px;

    box-shadow:
    0 25px 60px rgba(15,23,42,.12);

    transform:rotate(-3deg);

    transition:.4s;
}

.dashboard-card:hover{

    transform:
    rotate(0deg)
    translateY(-10px);
}

.card-header-custom{

    display:flex;

    gap:10px;

    margin-bottom:25px;
}

.card-header-custom span{

    width:12px;
    height:12px;

    border-radius:50%;
}

.card-header-custom span:nth-child(1){
    background:#EF4444;
}

.card-header-custom span:nth-child(2){
    background:#F59E0B;
}

.card-header-custom span:nth-child(3){
    background:#22C55E;
}

.dashboard-content{

    display:grid;

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

    gap:20px;
}

.analytics-card{

    background:white;

    border-radius:20px;

    padding:25px;

    transition:.3s;

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

.analytics-card:hover{

    transform:translateY(-8px);

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

.analytics-card h4{

    color:#64748B;

    font-size:15px;

    margin-bottom:10px;
}

.analytics-card h2{

    font-size:32px;

    font-weight:800;

    color:#0F172A;
}

/* ===================================
   FLOATING SHAPES
=================================== */

.floating-shape{

    position:absolute;

    border-radius:50%;

    animation:
    floatShape 8s ease-in-out infinite;
}

.shape1{

    width:60px;
    height:60px;

    background:#2563EB;

    top:18%;
    right:12%;
}

.shape2{

    width:40px;
    height:40px;

    background:#FF6B35;

    bottom:20%;
    right:25%;
}

.shape3{

    width:25px;
    height:25px;

    background:#38BDF8;

    top:40%;
    left:48%;
}

@keyframes floatShape{

    0%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-20px);
    }

    100%{
        transform:translateY(0);
    }
}

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

@media(max-width:991px){

    .hero-title{

        font-size:52px;
    }

    .hero-description{

        font-size:18px;
    }

    .dashboard-card{

        margin-top:50px;

        transform:none;
    }

    .stats-row{

        flex-wrap:wrap;

        gap:30px;
    }

    .hero-buttons{

        flex-direction:column;
    }

}

@media(max-width:576px){

    .hero-title{

        font-size:42px;
    }

    .brand-logo{

        font-size:24px;
    }

}

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

.hero-graphic{

    position:relative;

    height:650px;

    display:flex;

    justify-content:center;

    align-items:center;
}

.main-illustration img{

    width:100%;

    max-width:550px;

    animation:
    floatMain 6s ease-in-out infinite;
}

/* KPI CARDS */

.floating-card{

    position:absolute;

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

    backdrop-filter:blur(20px);

    padding:18px 25px;

    border-radius:20px;

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

    min-width:180px;

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

.floating-card span{

    display:block;

    color:#64748B;

    font-size:14px;

    margin-bottom:8px;
}

.floating-card h3{

    margin:0;

    font-size:28px;

    color:#2563EB;

    font-weight:800;
}

/* CARD POSITIONS */

.card-1{

    top:80px;
    left:0;
}

.card-2{

    top:120px;
    right:0;
}

.card-3{

    bottom:120px;
    left:30px;
}

.card-4{

    bottom:80px;
    right:20px;
}

/* ANIMATION */

@keyframes floatMain{

    0%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-20px);
    }

    100%{
        transform:translateY(0);
    }
}

@keyframes floatCard{

    0%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-12px);
    }

    100%{
        transform:translateY(0);
    }
}

/* ===================================
   SERVICES SECTION
=================================== */

.services-section{

    padding:100px 0;

    position:relative;
}

.section-tag{

    display:inline-block;

    background:#EFF6FF;

    color:#2563EB;

    padding:10px 20px;

    border-radius:50px;

    font-weight:700;

    margin-bottom:20px;
}

.section-title{

    font-size:52px;

    font-weight:800;

    color:#0F172A;

    margin-bottom:15px;
}

.section-subtitle{

    color:#64748B;

    font-size:18px;

    max-width:700px;

    margin:auto;
}

.service-card{

    background:white;

    border-radius:28px;

    padding:35px;

    height:100%;

    position:relative;

    overflow:hidden;

    transition:.4s;

    border:1px solid #E2E8F0;

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

.service-card:hover{

    transform:
    translateY(-10px);

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

    border-color:#2563EB;
}

.service-card::before{

    content:'';

    position:absolute;

    width:120px;
    height:120px;

    border-radius:50%;

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

    top:-50px;
    right:-50px;
}

.service-icon{

    width:70px;
    height:70px;

    border-radius:20px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:32px;

    background:
    linear-gradient(
        135deg,
        #2563EB,
        #60A5FA
    );

    margin-bottom:25px;
}

.service-card h4{

    font-size:24px;

    font-weight:700;

    margin-bottom:20px;

    color:#0F172A;
}

.service-card ul{

    list-style:none;

    padding:0;
}

.service-card ul li{

    color:#64748B;

    margin-bottom:12px;

    position:relative;

    padding-left:20px;
}

.service-card ul li::before{

    content:'✓';

    position:absolute;

    left:0;

    color:#2563EB;

    font-weight:bold;
}

@media(max-width:768px){

    .section-title{

        font-size:36px;
    }

}

/* ==========================
   WHY SECTION
========================== */

.why-section{
padding:120px 0;
background:
linear-gradient(
180deg,
#f8fbff 0%,
#eef6ff 100%
);
}

.section-badge{

display:inline-block;

padding:10px 22px;

border-radius:50px;

background:#e0edff;

color:#2563eb;

font-weight:700;

margin-bottom:20px;
}

.why-card{

background:white;

padding:45px 30px;

border-radius:28px;

text-align:center;

height:100%;

transition:.4s;

position:relative;

overflow:hidden;

box-shadow:
0 15px 40px rgba(0,0,0,.08);
}

.why-card::before{

content:"";

position:absolute;

top:0;
left:0;

width:100%;
height:5px;

background:
linear-gradient(
90deg,
#2563eb,
#7c3aed
);
}

.why-card:hover{

transform:
translateY(-12px);

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

.why-icon{

width:70px;
height:70px;

margin:auto auto 25px;

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

font-size:32px;

border-radius:20px;

background:
linear-gradient(
135deg,
#2563eb,
#7c3aed
);

color:white;
}

.why-card h3{

font-size:42px;
font-weight:800;

margin-bottom:10px;

color:#111827;
}

.why-card p{

margin:0;

color:#6b7280;
font-weight:500;
}
/* ===========================
   Industries Section Premium
=========================== */

.industries-section{
    padding:120px 0;
    background:
    radial-gradient(circle at top left,#e8f0ff,transparent 35%),
    radial-gradient(circle at bottom right,#eef7ff,transparent 35%),
    #fff;
    position:relative;
    overflow:hidden;
}

.industries-section::before{
    content:'';
    position:absolute;
    width:500px;
    height:500px;
    background:rgba(54,106,255,.08);
    border-radius:50%;
    top:-200px;
    right:-200px;
}

.industries-section::after{
    content:'';
    position:absolute;
    width:350px;
    height:350px;
    background:rgba(0,210,255,.08);
    border-radius:50%;
    bottom:-150px;
    left:-100px;
}

.industry-card{
    background:#fff;
    border-radius:28px;
    padding:50px 30px;
    text-align:center;
    height:100%;
    transition:.4s;
    border:1px solid rgba(54,106,255,.08);
    box-shadow:
    0 10px 30px rgba(0,0,0,.04);
    position:relative;
    overflow:hidden;
}

.industry-card::before{
    content:'';
    position:absolute;
    width:150px;
    height:150px;
    background:linear-gradient(
    135deg,
    rgba(54,106,255,.12),
    rgba(0,210,255,.12)
    );
    border-radius:50%;
    top:-70px;
    right:-70px;
}

.industry-card:hover{
    transform:translateY(-12px);
    box-shadow:
    0 25px 60px rgba(54,106,255,.15);
}

.industry-icon{
    width:90px;
    height:90px;
    margin:auto;
    margin-bottom:25px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:40px;
    background:linear-gradient(
    135deg,
    #366AFF,
    #00D2FF
    );
    color:#fff;
    box-shadow:
    0 15px 40px rgba(54,106,255,.25);
}

.industry-card h4{
    font-size:28px;
    font-weight:700;
    color:#081C45;
    margin-bottom:12px;
}

.industry-card p{
    color:#6c7a95;
    line-height:1.8;
    margin:0;
}

.section-badge{
    display:inline-block;
    background:#edf3ff;
    color:#366AFF;
    padding:10px 20px;
    border-radius:40px;
    font-weight:600;
    margin-bottom:15px;
}

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

.tech-section{
    padding:120px 0;
    background:#f8fbff;
    position:relative;
}

.tech-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:25px;
    margin-top:60px;
}

.tech-card{
    background:#fff;
    border-radius:24px;
    padding:35px 20px;
    text-align:center;
    transition:.4s;
    position:relative;
    overflow:hidden;

    border:1px solid #edf1f7;

    box-shadow:
    0 10px 30px rgba(0,0,0,.05);
}

.tech-card img{
    width:60px;
    height:60px;
    margin-bottom:18px;
}

.tech-card h4{
    font-size:22px;
    font-weight:700;
    color:#0f172a;
}

.tech-card::before{
    content:'';
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:5px;

    background:linear-gradient(
    90deg,
    #2563eb,
    #7c3aed
    );

    transform:scaleX(0);
    transition:.4s;
}

.tech-card:hover{
    transform:translateY(-12px);

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

.tech-card:hover::before{
    transform:scaleX(1);
}

.tech-card:hover h4{
    color:#2563eb;
}

@media(max-width:992px){

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

}

@media(max-width:576px){

.tech-grid{
    grid-template-columns:1fr;
}

}
/* ==========================
   CONTACT SECTION
========================== */

.contact-section{

    padding:120px 0;

    background:#ffffff;
}

.contact-info-card,
.contact-form-card{

    background:white;

    border-radius:30px;

    padding:40px;

    border:1px solid #e2e8f0;

    box-shadow:
    0 20px 50px rgba(0,0,0,.05);

    height:100%;
}

.contact-item{

    margin-top:25px;
}

.contact-item h5{

    font-weight:700;

    margin-bottom:10px;
}

.contact-item p{

    color:#64748B;
}

.custom-input{

    border-radius:16px;

    border:1px solid #dbe4f0;

    padding:14px 18px;
}

.custom-input:focus{

    box-shadow:none;

    border-color:#2563EB;
}

/* ==========================
   FOOTER
========================== */

.premium-footer{

    background:#0f172a;

    color:white;

    padding:80px 0 30px;
}

.footer-logo{

    font-size:32px;

    font-weight:800;

    margin-bottom:20px;
}

.footer-text{

    color:#cbd5e1;

    line-height:1.8;
}

.footer-links{

    list-style:none;

    padding:0;
}

.footer-links li{

    margin-bottom:12px;

    color:#cbd5e1;

    cursor:pointer;
}

.footer-links li:hover{

    color:#60A5FA;
}

.footer-bottom{

    text-align:center;

    color:#94a3b8;

    padding-top:15px;
}

/* STATS */

.stats-section{
    padding:100px 0;
    background:#f8fafc;
}

.stat-card{
    background:white;
    text-align:center;
    padding:35px;
    border-radius:25px;
    box-shadow:0 10px 30px rgba(0,0,0,.05);
}

.stat-card h2{
    font-size:42px;
    font-weight:800;
    color:#2563eb;
}

/* PORTFOLIO */

.portfolio-section{
    padding:120px 0;
}

.portfolio-card{
    overflow:hidden;
    border-radius:25px;
    background:white;
    box-shadow:0 15px 40px rgba(0,0,0,.08);
}

.portfolio-card img{
    width:100%;
    height:250px;
    object-fit:cover;
}

.portfolio-content{
    padding:25px;
}

/* TESTIMONIALS */

.testimonial-section{
    padding:120px 0;
    background:#f8fafc;
}

.testimonial-card{
    background:white;
    padding:35px;
    border-radius:25px;
    box-shadow:0 15px 40px rgba(0,0,0,.05);
}

.testimonial-card p{
    margin-bottom:20px;
}

/* CTA */

.cta-section{
    padding:120px 0;
}

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

    padding:80px;

    border-radius:40px;

    text-align:center;

    color:white;
}

.cta-box h2{
    font-size:48px;
    font-weight:800;
}

.cta-box p{
    margin:20px 0 30px;
}

.whatsapp-float{

    position:fixed;

    right:30px;
    bottom:30px;

    width:65px;
    height:65px;

    border-radius:50%;

    display:flex;

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

    font-size:28px;

    text-decoration:none;

    background:#25D366;

    color:white;

    z-index:9999;

    box-shadow:
    0 15px 40px rgba(37,211,102,.4);

    animation:pulse 2s infinite;
}

@keyframes pulse{

    0%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.08);
    }

    100%{
        transform:scale(1);
    }
}

.gradient-ball{

    position:absolute;

    border-radius:50%;

    filter:blur(100px);

    z-index:-1;
}

.ball1{

    width:300px;
    height:300px;

    background:#60A5FA;

    top:120px;
    left:-100px;
}

.ball2{

    width:250px;
    height:250px;

    background:#818CF8;

    right:0;
    top:250px;
}

.ball3{

    width:200px;
    height:200px;

    background:#34D399;

    bottom:0;
    left:40%;
}

.logo-img{
    height:70px;
    width:auto;
}

/* CTA SECTION */

.cta-section{
    padding:120px 0;
}
.cta-wrapper{

    position:relative;

    overflow:hidden;

    border-radius:40px;

    padding:90px 80px;

    background:
    linear-gradient(
    135deg,
    #1d4ed8 0%,
    #2563eb 35%,
    #3b82f6 70%,
    #60a5fa 100%);

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

}

.cta-tag{

    display:inline-block;

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

    color:#fff;

    padding:10px 18px;

    border-radius:30px;

    font-size:13px;

    font-weight:600;

    letter-spacing:1px;

    margin-bottom:20px;

}

.cta-title{

    color:#fff;

    font-size:58px;

    font-weight:800;

    line-height:1.1;
}
.cta-description{

    color:rgba(255,255,255,.9);

    font-size:18px;

    line-height:1.8;

    margin-bottom:35px;

}

.cta-buttons{
    display:flex;
    gap:15px;
    flex-wrap:wrap;
}

.cta-btn-primary{

    background:#fff;

    color:#2563eb;

    padding:15px 35px;

    border-radius:50px;

    font-weight:700;

    text-decoration:none;

    transition:.3s;

}

.cta-btn-primary:hover{

    transform:translateY(-5px);

}

.cta-btn-secondary{

    background:transparent;

    border:2px solid rgba(255,255,255,.4);

    color:#fff;

    padding:15px 35px;

    border-radius:50px;

    font-weight:700;

    text-decoration:none;

}

.cta-image{

    width:100%;
    max-width:500px;

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

}

@keyframes float{

    0%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-15px);
    }

    100%{
        transform:translateY(0);
    }

}