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

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Inter',sans-serif;
    background:#050816;
    color:#ffffff;
    overflow-x:hidden;
    line-height:1.6;
}

/* =========================
   VARIABLES
========================= */

:root{

    --bg:#050816;
    --bg-secondary:#0c1023;

    --glass:rgba(255,255,255,0.06);

    --border:rgba(255,255,255,0.10);

    --white:#ffffff;

    --muted:#a7adc3;

    --primary:#7c5cff;

    --secondary:#00d4ff;

    --radius:24px;

    --shadow:
    0 10px 40px rgba(0,0,0,.35);

}

/* =========================
   GLOBAL
========================= */

body::before{
    content:"";
    position:fixed;
    inset:0;
    background:
    radial-gradient(circle at 20% 20%,
    rgba(124,92,255,.12),
    transparent 40%),

    radial-gradient(circle at 80% 30%,
    rgba(0,212,255,.10),
    transparent 40%),

    radial-gradient(circle at 50% 80%,
    rgba(255,255,255,.05),
    transparent 40%);

    z-index:-5;
}

section{
    padding:120px 8%;
}

.section{
    position:relative;
}

.section-heading{
    text-align:center;
    margin-bottom:70px;
}

.section-tag{

    display:inline-block;

    padding:10px 18px;

    border-radius:999px;

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

    background:var(--glass);

    backdrop-filter:blur(18px);

    font-size:.9rem;

    color:var(--secondary);

    margin-bottom:18px;

}

.section-heading h2{

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

    max-width:900px;

    margin:auto;

    font-weight:800;

}

/* =========================
   AURORA
========================= */

.aurora{

    position:fixed;

    border-radius:50%;

    filter:blur(120px);

    z-index:-3;

    opacity:.4;

}

.aurora-1{

    width:400px;
    height:400px;

    background:#7c5cff;

    top:-100px;
    left:-100px;

}

.aurora-2{

    width:500px;
    height:500px;

    background:#00d4ff;

    top:20%;
    right:-150px;

}

.aurora-3{

    width:400px;
    height:400px;

    background:#8b5cf6;

    bottom:-150px;
    left:35%;

}

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

.header{

    position:fixed;

    top:0;
    left:0;

    width:100%;

    z-index:1000;

    padding:18px 4%;

}

.navbar{

    max-width:1400px;

    margin:auto;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:18px 30px;

    background:rgba(12,16,35,.55);

    backdrop-filter:blur(24px);

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

    border-radius:20px;

}

.logo{

    font-size:1.3rem;

    font-weight:800;

}

.accent{

    color:var(--secondary);

}

.nav-links{

    display:flex;

    list-style:none;

    gap:35px;

}

.nav-links a{

    color:white;

    text-decoration:none;

    transition:.3s;

}

.nav-links a:hover{

    color:var(--secondary);

}

.nav-btn{

    text-decoration:none;

    color:white;

    padding:14px 24px;

    border-radius:14px;

    background:linear-gradient(
    135deg,
    var(--primary),
    var(--secondary)
    );

    font-weight:600;

}

.mobile-toggle{

    display:none;

    flex-direction:column;

    gap:5px;

}

.mobile-toggle span{

    width:26px;
    height:2px;

    background:white;

}

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

.hero{

    min-height:100vh;

    display:grid;

    grid-template-columns:
    1.1fr
    .9fr;

    gap:60px;

    align-items:center;

    padding-top:180px;

}

.hero-content h1{

    font-size:clamp(
    3rem,
    6vw,
    6rem
    );

    line-height:1.05;

    margin-bottom:25px;

}

.hero-content h1 span{

    background:
    linear-gradient(
    135deg,
    var(--secondary),
    var(--primary)
    );

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}

.hero-content p{

    color:var(--muted);

    font-size:1.15rem;

    max-width:700px;

    margin-bottom:35px;

}

.hero-badge{

    display:inline-block;

    padding:10px 18px;

    margin-bottom:25px;

    border-radius:999px;

    background:var(--glass);

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

}

.hero-buttons{

    display:flex;

    gap:16px;

    flex-wrap:wrap;

}

.primary-btn{

    text-decoration:none;

    color:white;

    padding:16px 30px;

    border-radius:16px;

    background:
    linear-gradient(
    135deg,
    var(--primary),
    var(--secondary)
    );

    font-weight:700;

    transition:.35s;

}

.primary-btn:hover{

    transform:translateY(-4px);

}

.secondary-btn{

    text-decoration:none;

    color:white;

    padding:16px 30px;

    border-radius:16px;

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

    background:var(--glass);

    backdrop-filter:blur(20px);

}

.hero-trust{

    margin-top:40px;

    display:flex;

    gap:15px;

    flex-wrap:wrap;

}

.trust-item{

    padding:12px 16px;

    border-radius:999px;

    background:var(--glass);

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

    font-size:.9rem;

}

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

.hero-visual{

    position:relative;

    min-height:650px;

}

.glass-card{

    position:absolute;

    overflow:hidden;

    border-radius:30px;

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

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

    backdrop-filter:blur(30px);

    box-shadow:var(--shadow);

}

.glass-card img{

    width:100%;
    height:100%;

    object-fit:cover;

}

.card-1{

    width:420px;
    height:520px;

    top:0;
    left:0;

}

.card-2{

    width:340px;
    height:240px;

    bottom:0;
    right:0;

}

/* =========================
   TRUST STRIP
========================= */

.trust-strip{

    padding:30px 0;

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

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

    overflow:hidden;

}

.trust-marquee{

    display:flex;

    gap:80px;

    white-space:nowrap;

    font-weight:700;

    color:var(--muted);

}

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

.stats{

    display:grid;

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

    gap:25px;

}

.stat-card{

    padding:35px;

    border-radius:24px;

    background:var(--glass);

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

    backdrop-filter:blur(24px);

    text-align:center;

}

.stat-card h3{

    font-size:3rem;

    color:var(--secondary);

}

.stat-card p{

    color:var(--muted);

}

/* =========================
   ABOUT SECTION
========================= */

.about-grid{

    display:grid;

    grid-template-columns:
    1.2fr
    .8fr;

    gap:50px;

    align-items:center;

}

.about-content p{

    font-size:1.05rem;

    color:var(--muted);

    margin-bottom:24px;

}

.about-features{

    display:grid;

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

    gap:18px;

    margin-top:35px;

}

.feature{

    padding:18px;

    border-radius:18px;

    background:var(--glass);

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

    backdrop-filter:blur(20px);

}

.about-card{

    display:flex;

    justify-content:center;

}

.glass-box{

    width:100%;

    padding:40px;

    border-radius:28px;

    background:
    linear-gradient(
    145deg,
    rgba(255,255,255,.08),
    rgba(255,255,255,.03)
    );

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

    backdrop-filter:blur(28px);

}

.glass-box h3{

    font-size:1.6rem;

    margin-bottom:15px;

}

.glass-box p{

    color:var(--muted);

}

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

.services-bento{

    display:grid;

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

    gap:24px;

}

.service-card{

    padding:35px;

    border-radius:28px;

    background:var(--glass);

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

    backdrop-filter:blur(24px);

    transition:.4s ease;

    position:relative;

    overflow:hidden;

}

.service-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:
    linear-gradient(
    135deg,
    rgba(124,92,255,.12),
    transparent
    );

    opacity:0;

    transition:.4s;

}

.service-card:hover{

    transform:
    translateY(-10px);

    border-color:
    rgba(124,92,255,.4);

}

.service-card:hover::before{

    opacity:1;

}

.service-card.large{

    grid-column:span 2;

}

.service-icon{

    font-size:2.4rem;

    margin-bottom:20px;

}

.service-card h3{

    margin-bottom:12px;

    font-size:1.4rem;

}

.service-card p{

    color:var(--muted);

}

/* =========================
   PORTFOLIO
========================= */

.portfolio-grid{

    display:grid;

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

    gap:28px;

}

.project-card{

    position:relative;

    overflow:hidden;

    border-radius:30px;

    cursor:pointer;

    min-height:320px;

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

}

.project-card img{

    width:100%;
    height:100%;

    object-fit:cover;

    transition:
    transform .7s ease;

}

.project-overlay{

    position:absolute;

    inset:0;

    display:flex;

    flex-direction:column;

    justify-content:flex-end;

    padding:30px;

    background:
    linear-gradient(
    to top,
    rgba(0,0,0,.88),
    transparent
    );

}

.project-overlay h3{

    font-size:1.4rem;

    margin-bottom:6px;

}

.project-overlay p{

    color:#d4d7e5;

}

.project-card:hover img{

    transform:scale(1.08);

}

/* =========================
   VIDEO SHOWCASE
========================= */

.video-grid{

    display:grid;

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

    gap:30px;

}

.video-grid video{

    width:100%;

    border-radius:28px;

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

    box-shadow:var(--shadow);

    background:#000;

}

.video-showcase{

    position:relative;

}

.video-showcase::before{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

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

    top:-100px;

    left:-150px;

    filter:blur(80px);

    z-index:-1;

}

/* =========================
   PREMIUM HOVER EFFECTS
========================= */

.project-card,
.service-card,
.glass-box{

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

}

.project-card:hover,
.service-card:hover,
.glass-box:hover{

    box-shadow:
    0 20px 60px
    rgba(124,92,255,.15);

}

/* =========================
   SECTION SPACING
========================= */

.about,
.services,
.portfolio,
.video-showcase{

    position:relative;

}

.about::after,
.services::after{

    content:"";

    position:absolute;

    width:300px;

    height:300px;

    border-radius:50%;

    background:
    radial-gradient(
    circle,
    rgba(0,212,255,.08),
    transparent
    );

    filter:blur(100px);

    z-index:-1;

}

.about::after{

    right:-150px;
    top:0;

}

.services::after{

    left:-120px;
    bottom:0;

}

/* =========================
   PROCESS TIMELINE
========================= */

.timeline{

    display:grid;

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

    gap:24px;

    position:relative;

}

.timeline::before{

    content:"";

    position:absolute;

    top:45px;

    left:0;

    width:100%;

    height:2px;

    background:
    linear-gradient(
    90deg,
    var(--primary),
    var(--secondary)
    );

    opacity:.4;

}

.timeline-item{

    position:relative;

    padding:35px 25px;

    border-radius:24px;

    background:var(--glass);

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

    backdrop-filter:blur(24px);

    z-index:2;

}

.timeline-number{

    width:60px;
    height:60px;

    border-radius:50%;

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

    background:
    linear-gradient(
    135deg,
    var(--primary),
    var(--secondary)
    );

    font-weight:700;

    margin-bottom:20px;

}

.timeline-item h3{

    margin-bottom:10px;

}

.timeline-item p{

    color:var(--muted);

}

/* =========================
   TESTIMONIALS
========================= */

.testimonial-slider{

    display:grid;

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

    gap:24px;

}

.testimonial-card{

    padding:30px;

    border-radius:28px;

    background:var(--glass);

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

    backdrop-filter:blur(24px);

}

.testimonial-top{

    display:flex;

    align-items:center;

    gap:15px;

    margin-bottom:20px;

}

.testimonial-top img{

    width:60px;
    height:60px;

    border-radius:50%;

    object-fit:cover;

}

.testimonial-top h4{

    margin-bottom:4px;

}

.testimonial-top span{

    color:var(--muted);

    font-size:.9rem;

}

.testimonial-card p{

    color:var(--muted);

    margin-bottom:20px;

}

.stars{

    color:#ffd54f;

    letter-spacing:2px;

}

/* =========================
   WHY CHOOSE ME
========================= */

.why-grid{

    display:grid;

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

    gap:24px;

}

.why-card{

    padding:30px;

    border-radius:24px;

    background:var(--glass);

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

    transition:.3s;

}

.why-card:hover{

    transform:translateY(-8px);

}

.why-card h3{

    margin-bottom:12px;

}

.why-card p{

    color:var(--muted);

}

/* =========================
   CONTACT
========================= */

.contact-wrapper{

    display:grid;

    grid-template-columns:
    1fr
    1fr;

    gap:50px;

}

.contact-info h2{

    margin:20px 0;

    font-size:clamp(
    2rem,
    4vw,
    3.5rem
    );

}

.contact-info p{

    color:var(--muted);

}

.contact-details{

    margin-top:30px;

    display:grid;

    gap:20px;

}

.contact-details strong{

    display:block;

    margin-bottom:5px;

}

.contact-buttons{

    display:flex;

    gap:15px;

    margin-top:35px;

    flex-wrap:wrap;

}

.contact-form{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.contact-form input,
.contact-form textarea{

    width:100%;

    padding:18px 20px;

    border-radius:18px;

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

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

    color:white;

    outline:none;

    font-family:inherit;

}

.contact-form textarea{

    resize:none;

}

.contact-form button{

    border:none;

    cursor:pointer;

}

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

.footer{

    padding:80px 8% 30px;

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

}

.footer-content{

    display:flex;

    justify-content:space-between;

    gap:50px;

    margin-bottom:40px;

}

.footer-content p{

    color:var(--muted);

    max-width:450px;

}

.footer-links{

    display:flex;

    gap:20px;

    flex-wrap:wrap;

}

.footer-links a{

    color:white;

    text-decoration:none;

}

.footer-bottom{

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

    padding-top:25px;

    color:var(--muted);

    text-align:center;

}

.footer-contact p{

    margin-top:10px;

    color:var(--muted);

}

.footer-contact strong{

    color:white;

}

/* =========================
   FLOATING WHATSAPP
========================= */

.floating-whatsapp{

    position:fixed;

    right:25px;

    bottom:25px;

    width:60px;
    height:60px;

    display:flex;

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

    border-radius:50%;

    background:
    linear-gradient(
    135deg,
    #25D366,
    #1da851
    );

    color:white;

    text-decoration:none;

    font-size:1.4rem;

    z-index:9999;

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

}

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

.faq-container{

    max-width:1000px;
    margin:auto;

}

.faq-item{

    margin-bottom:20px;

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

    border-radius:20px;

    overflow:hidden;

    background:var(--glass);

    backdrop-filter:blur(20px);

}

.faq-question{

    width:100%;

    padding:24px;

    background:none;

    border:none;

    color:white;

    text-align:left;

    cursor:pointer;

    font-size:1.1rem;

    font-weight:600;

}

.faq-answer{

    max-height:0;

    overflow:hidden;

    transition:max-height .4s ease;

}

.faq-answer p{

    padding:0 24px 24px;

    color:var(--muted);

}

.faq-item.active .faq-answer{

    max-height:300px;

}


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

@media(max-width:1200px){

    .hero{

        grid-template-columns:1fr;

        text-align:center;

    }

    .hero-content{

        display:flex;
        flex-direction:column;
        align-items:center;

    }

    .hero-visual{

        min-height:500px;

    }

    .timeline{

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

    }

}

@media(max-width:992px){

    .portfolio-grid{

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

    }

    .services-bento{

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

    }

    .service-card.large{

        grid-column:span 2;

    }

    .why-grid{

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

    }

    .testimonial-slider{

        grid-template-columns:1fr;

    }

    .contact-wrapper{

        grid-template-columns:1fr;

    }

    .about-grid{

        grid-template-columns:1fr;

    }

    .video-grid{

        grid-template-columns:1fr;

    }

}

@media(max-width:768px){

    section{

        padding:90px 6%;

    }

    .nav-links,
    .nav-btn{

        display:none;

    }

    .mobile-toggle{

        display:flex;

    }

    .stats{

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

    }

    .portfolio-grid{

        grid-template-columns:1fr;

    }

    .services-bento{

        grid-template-columns:1fr;

    }

    .service-card.large{

        grid-column:auto;

    }

    .why-grid{

        grid-template-columns:1fr;

    }

    .timeline{

        grid-template-columns:1fr;

    }

    .timeline::before{

        display:none;

    }

}

@media(max-width:500px){

    .stats{

        grid-template-columns:1fr;

    }

    .hero-buttons{

        flex-direction:column;

        width:100%;

    }

    .primary-btn,
    .secondary-btn{

        width:100%;

        text-align:center;

    }

    .contact-buttons{

        flex-direction:column;

    }

}

.mobile-open{
    display:flex !important;
    position:absolute;
    top:90px;
    left:0;
    width:100%;
    flex-direction:column;
    gap:20px;
    padding:30px;
    background:#0c1023;
    border-radius:20px;
}

.nav-links a.active{
    color:var(--secondary);
}