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

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

html{
    scroll-behavior:smooth;
}

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

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

:root{

    --bg:#050816;
    --bg-light:#0b1120;

    --primary:#7c3aed;
    --secondary:#22d3ee;

    --text:#ffffff;
    --muted:#94a3b8;

    --glass:rgba(255,255,255,.05);
    --border:rgba(255,255,255,.08);

}

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

.bg-grid{
    position:fixed;
    inset:0;

    background:
    linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);

    background-size:50px 50px;

    z-index:-10;
}

.blur{
    position:fixed;
    border-radius:50%;
    filter:blur(120px);
    z-index:-5;
}

.blur-1{
    width:400px;
    height:400px;
    background:#7c3aed;
    top:-150px;
    left:-100px;
}

.blur-2{
    width:450px;
    height:450px;
    background:#22d3ee;
    bottom:-150px;
    right:-100px;
}

/* =========================
   CONTAINER
========================= */

section{
    width:min(1400px,92%);
    margin:auto;
}

/* =========================
   HEADER
========================= */

.header{

    position:sticky;
    top:0;

    z-index:999;

    width:100%;

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

    padding:25px 5%;

    backdrop-filter:blur(20px);

    background:rgba(5,8,22,.7);

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

}

.logo{

    font-size:1.8rem;
    font-weight:900;
    letter-spacing:2px;

}

.logo span{
    color:var(--secondary);
}

.header nav{

    display:flex;
    gap:35px;

}

.header nav a{

    text-decoration:none;
    color:white;
    font-weight:500;
    transition:.3s;

}

.header nav a:hover{
    color:var(--secondary);
}

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

.btn-primary{

    text-decoration:none;

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

    padding:14px 28px;

    border-radius:14px;

    color:white;
    font-weight:700;

    transition:.3s;

    box-shadow:
    0 0 25px rgba(124,58,237,.4);

}

.btn-primary:hover{

    transform:translateY(-4px);

    box-shadow:
    0 0 40px rgba(124,58,237,.8);

}

.btn-secondary{

    text-decoration:none;

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

    padding:14px 28px;

    border-radius:14px;

    color:white;

    backdrop-filter:blur(20px);

}

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

.hero{

    min-height:100vh;

    display:grid;
    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:70px;

}

.badge{

    display:inline-flex;

    padding:10px 18px;

    border-radius:999px;

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

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

    margin-bottom:30px;

}

.hero h1{

    font-size:5rem;
    line-height:1.05;

    margin-bottom:25px;

    font-weight:900;

}

.hero h1 span{

    background:
    linear-gradient(
        90deg,
        #7c3aed,
        #22d3ee
    );

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

}

.hero p{

    color:var(--muted);

    font-size:1.15rem;

    max-width:650px;

    line-height:1.8;

    margin-bottom:35px;

}

.hero-buttons{

    display:flex;
    gap:20px;

    margin-bottom:60px;

}

.hero-clients{

    display:flex;
    gap:40px;

}

.hero-clients h2{

    font-size:2rem;
    margin-bottom:5px;

}

.hero-clients span{
    color:var(--muted);
}

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

.dashboard-card{

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

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

    backdrop-filter:blur(20px);

    border-radius:30px;

    padding:35px;

    box-shadow:
    0 0 60px rgba(124,58,237,.15);

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

}

.dashboard-header{

    display:flex;
    justify-content:space-between;

    margin-bottom:30px;

}

.dashboard-chart{

    height:280px;

    border-radius:20px;

    background:
    linear-gradient(
        180deg,
        rgba(124,58,237,.9),
        rgba(34,211,238,.2)
    );

    position:relative;

    overflow:hidden;

}

.dashboard-chart::before{

    content:"";

    position:absolute;
    inset:0;

    background:
    repeating-linear-gradient(
        90deg,
        transparent,
        transparent 40px,
        rgba(255,255,255,.04) 41px
    );

}

.dashboard-stats{

    display:grid;

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

    gap:15px;

    margin-top:25px;

}

.dashboard-stats div{

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

    border-radius:18px;

    padding:20px;

}

.dashboard-stats h3{

    font-size:1.5rem;

    margin-bottom:5px;

}

/* =========================
   BRANDS
========================= */

.brands{

    display:flex;

    justify-content:space-between;

    flex-wrap:wrap;

    gap:20px;

    padding:40px 0 100px;

}

.brands span{

    color:#94a3b8;
    font-size:1.1rem;

}

/* =========================
   TITLES
========================= */

.section-title{

    text-align:center;

    margin-bottom:70px;

}

.section-title span{

    color:var(--secondary);
    font-weight:700;

    letter-spacing:2px;

}

.section-title h2{

    margin-top:15px;

    font-size:3rem;

}

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

.services{

    padding:100px 0;

}

.services-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(320px,1fr));

    gap:25px;

}

.service-card{

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

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

    border-radius:24px;

    padding:35px;

    transition:.4s;

}

.service-card:hover{

    transform:translateY(-10px);

    border-color:#22d3ee;

    box-shadow:
    0 0 30px rgba(34,211,238,.2);

}

.service-card i{

    font-size:2rem;

    margin-bottom:20px;

    color:#22d3ee;

}

.service-card h3{

    margin-bottom:15px;

}

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

.portfolio{

    padding:120px 0;

}

.portfolio-grid{

    display:grid;

    grid-template-columns:
    2fr 1fr 1fr;

    grid-auto-rows:280px;

    gap:25px;

}

.project-card{

    background:
    linear-gradient(
        135deg,
        rgba(124,58,237,.25),
        rgba(34,211,238,.15)
    );

    border-radius:30px;

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

    overflow:hidden;

    position:relative;

}

.large{
    grid-row:span 2;
}

.project-content{

    position:absolute;

    bottom:30px;
    left:30px;

}

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

.process{

    padding:120px 0;

}

.timeline{

    display:grid;

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

    gap:25px;

}

.step{

    text-align:center;

    padding:30px;

    border-radius:25px;

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

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

}

.step span{

    font-size:3rem;
    font-weight:900;

    color:#22d3ee;

}

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

.cta{

    padding:120px 0;
}

.cta-box{

    text-align:center;

    padding:90px;

    border-radius:40px;

    background:
    linear-gradient(
        135deg,
        rgba(124,58,237,.3),
        rgba(34,211,238,.15)
    );

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

}

.cta-box h2{

    font-size:4rem;

    margin:20px 0;

}

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

footer{

    padding:100px 5% 40px;

}

.footer-grid{

    display:grid;

    grid-template-columns:
    2fr 1fr 1fr 1fr;

    gap:40px;

}

.footer-grid h3,
.footer-grid h4{

    margin-bottom:20px;

}

.footer-grid a{

    display:block;

    color:#94a3b8;

    text-decoration:none;

    margin-bottom:12px;

}

.footer-grid p{

    color:#94a3b8;

    line-height:1.8;

}

.copyright{

    margin-top:50px;

    padding-top:30px;

    border-top:1px solid rgba(255,255,255,.08);

    text-align:center;

    color:#94a3b8;

}

/* =========================
   ANIMATION
========================= */

@keyframes float{

    0%{
        transform:translateY(0);
    }

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

    100%{
        transform:translateY(0);
    }

}

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

@media(max-width:1100px){

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

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

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

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

    .hero h1{
        font-size:3.5rem;
    }

}

@media(max-width:768px){

    .header nav{
        display:none;
    }

    .hero h1{
        font-size:2.8rem;
    }

    .hero-clients{
        flex-direction:column;
    }

    .dashboard-stats{
        grid-template-columns:1fr;
    }

}

/* =========================
   REVEAL EFFECT
========================= */

.reveal{

    opacity:0;
    transform:translateY(80px);
    transition:1s ease;

}

.reveal.active{

    opacity:1;
    transform:translateY(0);

}

/* =========================
   CURSOR GLOW
========================= */

.cursor-glow{

    position:fixed;

    width:250px;
    height:250px;

    border-radius:50%;

    background:
    radial-gradient(
        circle,
        rgba(34,211,238,.18),
        transparent 70%
    );

    pointer-events:none;

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

    z-index:-1;

}

/* =========================
   PARTICLES
========================= */

.particle{

    position:fixed;

    width:4px;
    height:4px;

    border-radius:50%;

    background:#22d3ee;

    pointer-events:none;

    bottom:-10px;

    animation:particleUp linear forwards;

}

@keyframes particleUp{

    from{

        transform:
        translateY(0);

        opacity:1;

    }

    to{

        transform:
        translateY(-120vh);

        opacity:0;

    }

}