:root{
    --primary:#2563eb;
    --secondary:#06b6d4;
    --dark:#0f172a;
    --text:#172033;
    --muted:#64748b;
    --soft:#f8fafc;
    --card:#ffffff;
    --radius:26px;
    --shadow:0 28px 90px rgba(15,23,42,.14);
}

body{
    background:
        radial-gradient(circle at 15% 8%, rgba(37,99,235,.12), transparent 28%),
        radial-gradient(circle at 88% 18%, rgba(6,182,212,.16), transparent 30%),
        linear-gradient(180deg,#f8fbff,#f7fafc);
    color:var(--text);
}

.header{
    position:sticky;
    top:0;
    z-index:99;
    background:rgba(255,255,255,.88);
    backdrop-filter:blur(18px);
    border-bottom:1px solid rgba(148,163,184,.22);
    box-shadow:0 10px 35px rgba(15,23,42,.04);
}

.nav{
    min-height:88px;
}

.brand{
    gap:16px;
}

.logo-img,
.logo{
    width:64px;
    height:64px;
    border-radius:18px;
    box-shadow:0 18px 45px rgba(15,23,42,.18);
}

.brand strong{
    font-size:20px;
}

.menu a{
    font-weight:800;
    color:#475569;
    padding:12px 14px;
    border-radius:12px;
}

.menu a:hover{
    background:rgba(37,99,235,.09);
    color:var(--primary);
}

.hero{
    min-height:720px;
    display:flex;
    align-items:center;
    position:relative;
    overflow:hidden;
    background:
        radial-gradient(circle at 72% 42%, rgba(6,182,212,.20), transparent 24%),
        radial-gradient(circle at 40% 40%, rgba(37,99,235,.10), transparent 32%);
}

.hero:before{
    content:"";
    position:absolute;
    width:520px;
    height:520px;
    right:5%;
    top:16%;
    background:linear-gradient(135deg,var(--primary),var(--secondary));
    filter:blur(90px);
    opacity:.18;
    border-radius:999px;
}

.hero h1{
    font-size:clamp(46px,5.8vw,82px);
    line-height:1.05;
    letter-spacing:-2.5px;
    color:#111827;
    margin-bottom:28px;
}

.hero p{
    font-size:21px;
    line-height:1.75;
    color:#526070;
    max-width:850px;
}

.hero .section-label{
    margin-bottom:24px;
}

.hero-grid,
.hero .container{
    position:relative;
    z-index:2;
}

.card,
.info-card,
.cta{
    border:1px solid rgba(148,163,184,.22);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    background:rgba(255,255,255,.88);
    backdrop-filter:blur(16px);
}

.info-card{
    transform:perspective(900px) rotateY(-5deg) rotateX(2deg);
    transition:.35s ease;
}

.info-card:hover{
    transform:perspective(900px) rotateY(0deg) rotateX(0deg) translateY(-8px);
}

.card{
    transition:.28s ease;
}

.card:hover{
    transform:translateY(-10px);
    box-shadow:0 36px 100px rgba(15,23,42,.18);
}

.btn{
    border-radius:16px;
    transition:.25s ease;
    box-shadow:0 16px 35px rgba(37,99,235,.18);
}

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

.section{
    position:relative;
    padding-top:90px;
    padding-bottom:90px;
}

.section-label{
    display:inline-flex;
    align-items:center;
    padding:9px 16px;
    border-radius:999px;
    background:rgba(37,99,235,.10);
    color:var(--primary);
    font-weight:900;
    margin-bottom:18px;
}

.section h2{
    font-size:clamp(34px,4vw,54px);
    letter-spacing:-1.4px;
    color:#111827;
    margin-bottom:34px;
}

.portfolio-card,
.gallery-card{
    overflow:hidden;
}

.portfolio-img,
.gallery-img{
    transition:.35s ease;
    border-radius:18px;
}

.portfolio-card:hover .portfolio-img,
.gallery-card:hover .gallery-img{
    transform:scale(1.055);
}

.testimonial-card{
    text-align:center;
    position:relative;
}

.testimonial-card:before{
    content:"“";
    position:absolute;
    top:6px;
    left:22px;
    font-size:90px;
    line-height:1;
    color:rgba(37,99,235,.12);
    font-weight:900;
}

.footer{
    background:linear-gradient(135deg,#0f172a,#111827);
    color:#fff;
}

@media(max-width:768px){
    .hero{
        min-height:auto;
        padding-top:80px;
        padding-bottom:80px;
    }

    .hero h1{
        font-size:42px;
    }

    .hero p{
        font-size:17px;
    }

    .info-card{
        transform:none;
    }
}
.hero-preview{
    padding:30px;
}

.preview-screen{
    padding:40px 30px;
    border-radius:22px;
    background:
        linear-gradient(
            135deg,
            #2563eb,
            #06b6d4
        );
    text-align:center;
    color:#fff;
    margin-bottom:25px;
}

.preview-logo{
    width:90px;
    height:90px;
    object-fit:contain;
    border-radius:18px;
    background:#fff;
    padding:10px;
    margin-bottom:15px;
}

.preview-screen h3{
    margin:10px 0;
    font-size:28px;
    color:#fff;
}

.preview-screen p{
    color:#e8f4ff;
    margin:0;
}

.hero-stats{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:15px;
}

.stat-box{
    background:#fff;
    border-radius:18px;
    padding:20px;
    text-align:center;
    box-shadow:
        0 10px 30px rgba(15,23,42,.08);
}

.stat-box strong{
    display:block;
    font-size:28px;
    color:#2563eb;
}

.stat-box span{
    color:#64748b;
    font-size:14px;
}
.hero-project-img{
    width:100%;
    height:360px;
    object-fit:cover;
    border-radius:24px;
    display:block;
    margin-bottom:24px;
}

.hero-project-empty{
    height:360px;
    border-radius:24px;
    background:linear-gradient(135deg,#2563eb,#06b6d4);
    color:#fff;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:30px;
    margin-bottom:24px;
}

.hero-project-empty strong{
    font-size:28px;
    margin-bottom:10px;
}

.hero-project-empty span{
    opacity:.9;
}
.service-card{
    text-align:center;
    padding:35px;
    transition:.3s;
}

.service-card:hover{
    transform:translateY(-8px);
}

.service-icon{
    font-size:52px;
    margin-bottom:20px;
}

.service-card h3{
    margin-bottom:12px;
    font-size:24px;
}

.service-card p{
    color:#64748b;
    line-height:1.8;
}