/* DARK TECH THEME */

:root{
    --primary:#38bdf8;
    --primary-dark:#0284c7;
    --primary-soft:rgba(56,189,248,.14);
    --bg:#0f172a;
    --card:#111827;
    --text:#f8fafc;
    --muted:#cbd5e1;
    --line:rgba(148,163,184,.22);
    --dark:#020617;
    --shadow:0 18px 45px rgba(0,0,0,.35);
    --shadow-hover:0 28px 70px rgba(56,189,248,.16);
}

body{
    background:
        radial-gradient(circle at top left,rgba(56,189,248,.14),transparent 32%),
        #0f172a !important;
    color:var(--text) !important;
}

.header{
    background:rgba(2,6,23,.88) !important;
    backdrop-filter:blur(16px);
    border-bottom:1px solid var(--line) !important;
}

.brand strong,
.section h2,
h1,h2,h3{
    color:#f8fafc !important;
}

.brand small,
.menu a,
.section p,
p{
    color:#cbd5e1 !important;
}

.logo{
    background:linear-gradient(135deg,#38bdf8,#2563eb) !important;
}

.logo-img{
    width:58px !important;
    height:58px !important;
    object-fit:contain !important;
    border-radius:18px !important;
    background:#fff;
}

.menu a:hover{
    color:#38bdf8 !important;
}

.hero{
    padding:66px 0 !important;
    background:
        radial-gradient(circle at 20% 20%,rgba(56,189,248,.20),transparent 30%),
        radial-gradient(circle at 90% 10%,rgba(37,99,235,.18),transparent 32%),
        linear-gradient(135deg,#020617,#0f172a) !important;
}

.hero h1{
    font-size:48px !important;
    line-height:1.08 !important;
    letter-spacing:-1.5px;
    color:#ffffff !important;
}

.hero .lead{
    font-size:17px !important;
    color:#cbd5e1 !important;
}

.badge,
.section-label{
    display:inline-block !important;
    background:rgba(56,189,248,.14) !important;
    color:#7dd3fc !important;
    border:1px solid rgba(56,189,248,.25);
    border-radius:999px !important;
    padding:7px 14px !important;
    font-size:12px !important;
    font-weight:900 !important;
}

.btn{
    border-radius:12px !important;
    font-weight:800 !important;
    background:#111827 !important;
    color:#f8fafc !important;
    border:1px solid var(--line) !important;
}

.btn.primary{
    background:linear-gradient(135deg,#38bdf8,#2563eb) !important;
    border-color:transparent !important;
    color:#fff !important;
    box-shadow:0 14px 35px rgba(56,189,248,.22);
}

.card{
    background:rgba(17,24,39,.86) !important;
    color:#f8fafc !important;
    border:1px solid var(--line) !important;
    border-radius:22px !important;
    box-shadow:var(--shadow) !important;
    transition:.25s ease;
}

.card:hover{
    box-shadow:var(--shadow-hover) !important;
    transform:translateY(-4px);
    border-color:rgba(56,189,248,.38) !important;
}

.section{
    padding:50px 0 !important;
}

.section h2{
    font-size:30px !important;
    letter-spacing:-.5px;
}

.muted{
    background:rgba(2,6,23,.35) !important;
}

.hero-preview{
    max-width:430px !important;
    margin-left:auto !important;
    overflow:hidden;
    border-radius:24px !important;
}

.hero-project-img{
    width:100% !important;
    height:305px !important;
    object-fit:cover !important;
    border-radius:18px !important;
}

.stat-box{
    background:rgba(15,23,42,.9) !important;
    border:1px solid var(--line) !important;
    border-radius:16px !important;
}

.stat-box strong{
    color:#7dd3fc !important;
}

.company-preview{
    padding:0 !important;
    overflow:hidden !important;
    border-radius:24px !important;
}

.company-preview-img{
    width:100% !important;
    height:360px !important;
    object-fit:cover !important;
}

.service-icon{
    width:56px;
    height:56px;
    border-radius:18px;
    background:rgba(56,189,248,.14);
    color:#7dd3fc;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:28px;
    margin-bottom:15px;
}

.service-card h3,
.portfolio-card h3,
.gallery-card h3,
.team-card h3{
    color:#f8fafc !important;
}

.portfolio-link{
    text-decoration:none !important;
    color:inherit !important;
}

.portfolio-card{
    padding:0 !important;
    overflow:hidden !important;
}

.portfolio-img{
    width:100% !important;
    height:190px !important;
    object-fit:cover !important;
}

.portfolio-card h3{
    padding:18px 18px 6px !important;
    margin:0 !important;
}

.portfolio-card p{
    padding:0 18px 14px !important;
    margin:0;
    font-size:14px;
}

.portfolio-card strong{
    color:#7dd3fc !important;
}

.gallery-card{
    padding:0 !important;
    overflow:hidden !important;
}

.gallery-img{
    width:100% !important;
    height:185px !important;
    object-fit:cover !important;
    transition:.35s ease;
}

.gallery-card:hover .gallery-img{
    transform:scale(1.08);
}

.gallery-card h3{
    padding:14px 16px 16px;
    margin:0;
    font-size:16px;
}

.gallery-lightbox{
    background:rgba(2,6,23,.94) !important;
}

.team-grid{
    display:flex !important;
    flex-wrap:wrap !important;
    justify-content:center !important;
    gap:24px !important;
}

.team-card{
    width:260px !important;
    max-width:260px !important;
    text-align:center !important;
    padding:25px !important;
}

.team-photo,
.team-card img{
    width:112px !important;
    height:112px !important;
    border-radius:50% !important;
    object-fit:cover !important;
    margin:0 auto 15px !important;
    border:4px solid rgba(56,189,248,.18);
}

.team-card strong{
    color:#7dd3fc !important;
}

.testimonial-card{
    text-align:center !important;
}

.testimonial-photo{
    width:86px !important;
    height:86px !important;
    border-radius:50% !important;
    object-fit:cover !important;
}

.testimonial-rating{
    color:#facc15 !important;
}

.cta{
    background:
        radial-gradient(circle at top right,rgba(56,189,248,.18),transparent 30%),
        rgba(17,24,39,.92) !important;
    border:1px solid var(--line) !important;
    border-radius:28px !important;
    padding:34px !important;
}

.footer{
    background:#020617 !important;
    border-top:1px solid var(--line) !important;
}

.footer p,
.footer a{
    color:#cbd5e1 !important;
}

.footer a:hover{
    color:#7dd3fc !important;
}

.project-detail-image{
    width:100% !important;
    height:420px !important;
    object-fit:cover !important;
    border-radius:24px !important;
    margin:24px 0 !important;
}

.project-short-description{
    font-size:19px !important;
    color:#cbd5e1 !important;
    margin-bottom:22px !important;
}

.project-description{
    font-size:17px !important;
    line-height:1.85 !important;
    color:#e2e8f0 !important;
}

@media(max-width:900px){
    .hero{
        padding:44px 0 !important;
    }

    .hero h1{
        font-size:34px !important;
    }

    .hero-project-img,
    .company-preview-img,
    .project-detail-image{
        height:260px !important;
    }

    .section{
        padding:38px 0 !important;
    }

    .section h2{
        font-size:24px !important;
    }

    .cards{
        grid-template-columns:1fr !important;
    }

    .cta{
        padding:24px !important;
    }
}