/* RESET */

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

html{
    scroll-behavior:smooth;
}

body{

    background:#0b0d11;
    color:white;

    font-family:Segoe UI,Arial,sans-serif;

}


/* HEADER */

header{

    position:fixed;

    top:0;
    left:0;

    width:100%;

    padding:12px 50px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    background:rgba(0,0,0,.65);

    backdrop-filter:blur(10px);

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

    z-index:1000;

}

.logo{

    display:flex;

    align-items:center;

    gap:18px;

    text-decoration:none;

}

.logo img{

    height:42px;

    transition:.3s;

}

.logo:hover img{

    transform:rotate(-5deg) scale(1.05);

}

.logo-text{

    display:flex;

    flex-direction:column;

}

.logo-main{

    color:white;

    font-size:20px;

    font-weight:700;

}

.logo-sub{

    color:#7da9d8;

    font-size:10px;

    letter-spacing:2px;

    text-transform:uppercase;

}

nav{

    display:flex;

    gap:22px;

}

nav a{

    color:white;

    text-decoration:none;

    transition:.3s;

    font-size:15px;

}

nav a:hover{

    color:#0b8cff;

}


/* HERO */

.hero{

    height:100vh;

    display:flex;

    align-items:flex-start;

    padding:0 120px;

    background:
    linear-gradient(
        90deg,
        rgba(5,10,18,.90) 0%,
        rgba(5,10,18,.70) 35%,
        rgba(5,10,18,.45) 60%,
        rgba(5,10,18,.30) 100%
    ),
    url("assets/images/hero.jpg");

    background-size:cover;

    background-position:center;

    position:relative;

    overflow:hidden;

}

.hero-content{

    max-width:700px;

}
.hero-content{

    display:flex;

    flex-direction:column;
    
    padding-top:90px;

}

.hero h1{

    font-size:40px;

    line-height:1.05;

    font-weight:800;

}

.hero p{

    font-size:15px;

    color:#cfcfcf;

    margin-bottom:40px;

}

.btn{

display:inline-flex;

align-items:center;

justify-content:center;

padding:18px 36px;

margin-top:200px;

border:2px solid #0b8cff;

background:transparent;

color:#ffffff;

border-radius:12px;

font-weight:700;

font-size:18px;

transition:.3s;

}

.btn:hover{

background:#0b8cff;

color:#fff;

transform:translateY(-3px);

box-shadow:0 10px 30px rgba(11,140,255,.35);

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

.stats{

    width:100%;

    background:#11151d;

    padding:80px;

    display:flex;

    justify-content:space-between;

    gap:25px;

    flex-wrap:wrap;

}

.stat-card{

    flex:1;

    min-width:250px;

    background:#181d26;

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

    border-radius:18px;

    padding:45px 25px;

    text-align:center;

    transition:.35s;

}
.stat-card:hover{

    transform:translateY(-10px);

    border-color:#0b8cff;

    box-shadow:0 20px 40px rgba(11,140,255,.25);

}

.stat-card h2{

    font-size:55px;

    color:#0b8cff;

    margin-bottom:15px;

}

.stat-card p{

    color:#d8d8d8;

    font-size:18px;

    letter-spacing:1px;

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

.services{

    background:#0d1118;

    padding:110px 8%;

}

.section-title{

    text-align:center;

    margin-bottom:70px;

}

.section-title h2{

    font-size:48px;

    margin-bottom:15px;

}

.section-title p{

    color:#a9b3c2;

    font-size:20px;

}

.services-grid{

    display:grid;

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

    gap:30px;

}

.service-card{

    background:#171c25;

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

    border-radius:18px;

    padding:45px 35px;

    transition:.35s;

}

.service-card:hover{

    transform:translateY(-10px);

    border-color:#0b8cff;

    box-shadow:0 20px 45px rgba(11,140,255,.25);

}

.icon{

    width:80px;
    height:80px;

    border-radius:20px;

    background:linear-gradient(135deg,#0b8cff,#0068d8);

    display:flex;

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

    font-size:40px;

    margin-bottom:30px;

    box-shadow:0 15px 30px rgba(11,140,255,.35);

}

.service-card h3{

    margin-bottom:18px;

    font-size:26px;

}

.service-card p{

    color:#bfc7d3;

    line-height:1.7;

}
/* ===========================
      ABOUT HOME
=========================== */

.about-home{

    padding:120px 8%;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

    background:#11151d;

}

.about-image img{

    width:100%;

    border-radius:20px;

    box-shadow:0 25px 60px rgba(0,0,0,.45);

}

.about-text span{

    color:#0b8cff;

    font-weight:bold;

    letter-spacing:2px;

}

.about-text h2{

    font-size:46px;

    margin:20px 0;

    line-height:1.2;

}

.about-text p{

    color:#bfc7d3;

    font-size:20px;

    line-height:1.8;

    margin-bottom:30px;

}

.about-text ul{

    list-style:none;

}

.about-text li{

    padding:12px 0;

    font-size:18px;

}
/*=============================
        PROJECTS
==============================*/

.projects{

    padding:120px 8%;

    background:#0b0d11;

}

.gallery{

    display:grid;

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

    gap:25px;

}

.gallery img{

    width:100%;

    aspect-ratio:4/3;

    object-fit:cover;

    display:block;

    border-radius:18px;

    transition:.35s;

    cursor:pointer;

}

.gallery img:hover{

    transform:scale(1.03);

    box-shadow:0 20px 40px rgba(11,140,255,.25);

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

.contact{

    background:#11151d;

    padding:120px 8%;

}

.contact-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:60px;

    align-items:start;

}

.contact-info h3{

    font-size:34px;

    margin-bottom:25px;

}

.contact-info p{

    margin:18px 0;

    color:#c8c8c8;

    font-size:18px;

}

.contact-form{

    display:flex;

    flex-direction:column;

    gap:20px;

}

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

    background:#181d26;

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

    border-radius:12px;

    color:white;

    padding:18px;

    font-size:17px;

}

.contact-form textarea{

    resize:vertical;

    min-height:180px;

}

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

    outline:none;

    border-color:#0b8cff;

}
/*=============================
        PROJECTS
=============================*/

.projects{

    background:#0d1118;

    padding:110px 8%;

}

.projects-grid{

    display:grid;

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

    gap:30px;

}

.project-card{

    background:#171c25;

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

    border-radius:18px;

    overflow:hidden;

    transition:.35s;

}

.project-card:hover{

    transform:translateY(-8px);

    border-color:#0b8cff;

    box-shadow:0 20px 45px rgba(11,140,255,.25);

}

.project-card img{

    width:100%;

    height:220px;

    object-fit:cover;

    display:block;

    transition:.4s;

}

.project-card:hover img{

    transform:scale(1.05);

}

.project-content{

    padding:24px;

}

.project-badge{

    display:inline-block;

    background:#0b8cff;

    color:white;

    padding:6px 14px;

    border-radius:30px;

    font-size:12px;

    font-weight:bold;

    margin-bottom:16px;

    letter-spacing:1px;

}

.project-content h3{

    font-size:28px;

    margin-bottom:8px;

}

.project-type{

    color:#8fb7ff;

    margin-bottom:20px;

}

.project-content ul{

    list-style:none;

}

.project-content li{

    padding:6px 0;

    color:#d8d8d8;

}/* ===========================
   MOBILE RESPONSIVE
=========================== */

@media (max-width: 992px){

header{
    padding:12px 20px;
}

.logo img{
    height:40px;
}

.logo-main{
    font-size:22px;
}

.logo-sub{
    font-size:10px;
}

nav{
    gap:15px;
    flex-wrap:wrap;
}

nav a{
    font-size:14px;
}

.hero{
    padding:120px 30px 60px;
    height:auto;
    min-height:100vh;
    background-position:center;
}

.hero-content{
    max-width:100%;
}

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

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

.about-home,
.contact-grid{
    grid-template-columns:1fr;
    gap:40px;
}

.stats{
    padding:50px 20px;
}

.services,
.offers,
.projects,
.contact{
    padding:70px 20px;
}

.services-grid,
.projects-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
}

}

@media (max-width:640px){

header{
    padding:10px 15px;
}

.logo{
    gap:10px;
}

.logo img{
    height:34px;
}

.logo-main{
    font-size:18px;
}

.logo-sub{
    display:none;
}

nav{
    width:100%;
    justify-content:center;
    gap:10px;
    margin-top:10px;
}

nav a{
    font-size:13px;
}

.hero{

    min-height:85vh;

    height:auto;

    padding:90px 20px 40px;

    background-position:65% center;

}
.hero-content{

    width:100%;

    max-width:100%;

    text-align:center;

}

.hero h1{

    font-size:32px;

    line-height:1.15;

    margin-bottom:20px;

}

.hero p{

    font-size:17px;

    line-height:1.7;

    margin-bottom:35px;

}

.btn{

    width:100%;

    max-width:300px;

    margin:auto;

}

.section-title h2{
    font-size:30px;
}

.section-title p{
    font-size:16px;
}

.services-grid,
.projects-grid{
    grid-template-columns:1fr;
}
    .menu-toggle{
    display:none;
    font-size:32px;
    cursor:pointer;
    color:white;
}

}

@media (max-width:768px){

.menu-toggle{
    display:block;
}

nav{

    display:none;

    position:absolute;

    top:70px;

    left:0;

    width:100%;

    background:#11151d;

    flex-direction:column;

    align-items:center;

    padding:25px 0;

    gap:20px;

}

nav.active{

    display:flex;

}

}

.stat-card{
    min-width:100%;
}
@media(max-width:768px){

.hero{

background-image:
linear-gradient(
rgba(5,10,18,.75),
rgba(5,10,18,.85)
),
url("assets/images/hero-mobile.jpg");

background-size:cover;

background-position:center;

}

/* ======================
    GLOBAL SIZE UPDATE
====================== */

.hero h1{

font-size:52px;

}

.hero p{

font-size:20px;

}

.section-title h2{

font-size:36px;

}

.section-title p{

font-size:17px;

}

.service-card h3,
.project-content h3{

font-size:22px;

}

.service-card p,
.project-content p,
.project-content li{

font-size:15px;

line-height:1.7;

}

.stat-card h2{

font-size:42px;

}

.stat-card p{

font-size:16px;

}
    .whatsapp{

position:fixed;

right:20px;

bottom:20px;

width:65px;

height:65px;

background:#25D366;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

font-size:32px;

text-decoration:none;

color:white;

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

z-index:9999;

transition:.3s;

}

.whatsapp:hover{

transform:scale(1.1);

}
    .call-now{

position:fixed;

right:20px;

bottom:95px;

width:65px;

height:65px;

background:#0b8cff;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

font-size:30px;

text-decoration:none;

color:white;

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

z-index:9999;

transition:.3s;

}

.call-now:hover{

transform:scale(1.1);

}
    @media (max-width:768px){

.hero{

background:
linear-gradient(
rgba(5,10,18,.35),
rgba(5,10,18,.55)
),
url("assets/images/hero-mobile.jpg");

background-size:cover;

background-position:center center;

}

}
footer{

background:#090b0f;

padding:60px 8% 25px;

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

}

.footer-container{

display:grid;

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

gap:40px;

}

.footer-container h3{

margin-bottom:15px;

font-size:24px;

}

.footer-container p{

color:#bfc7d3;

line-height:2;

font-size:15px;

}

.copyright{

margin-top:40px;

padding-top:20px;

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

text-align:center;

color:#7f8b9d;

font-size:14px;

}


}

/* =========================================================
   PIKSI - CNC SERVICE PAGE
   Scoped so the homepage design stays unchanged
   ========================================================= */

.service-page{
    overflow-x:hidden;
}

.service-page .service-container{
    width:min(1200px, calc(100% - 50px));
    margin:0 auto;
}

.service-page .service-hero{
    min-height:620px;
    padding:170px 0 90px;
    display:flex;
    align-items:center;
    background:
        linear-gradient(90deg, rgba(5,10,18,.94) 0%, rgba(5,10,18,.78) 48%, rgba(5,10,18,.50) 100%),
        url("../assets/images/hero.jpg") center/cover no-repeat;
}

.service-page .service-hero-content{
    max-width:900px;
}

.service-page .service-eyebrow,
.service-page .service-label{
    display:block;
    color:#0b8cff;
    font-size:13px;
    font-weight:800;
    letter-spacing:2px;
    text-transform:uppercase;
    margin-bottom:16px;
}

.service-page .service-hero h1{
    font-size:clamp(42px, 6vw, 72px);
    line-height:1.05;
    margin-bottom:24px;
    color:#fff;
}

.service-page .service-hero p{
    max-width:780px;
    font-size:21px;
    line-height:1.75;
    color:#d6dce6;
}

.service-page .service-hero-actions{
    display:flex;
    gap:16px;
    margin-top:35px;
    flex-wrap:wrap;
}

.service-page .service-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:52px;
    padding:14px 28px;
    border:2px solid #0b8cff;
    border-radius:12px;
    background:#0b8cff;
    color:#fff;
    text-decoration:none;
    font-weight:700;
    transition:.3s;
}

.service-page .service-btn:hover{
    transform:translateY(-3px);
    box-shadow:0 12px 30px rgba(11,140,255,.30);
}

.service-page .service-btn-outline{
    background:transparent;
}

.service-page .service-intro{
    padding:95px 0;
    background:#11151d;
}

.service-page .service-two-col{
    display:grid;
    grid-template-columns:1fr 1.25fr;
    gap:70px;
    align-items:start;
}

.service-page .service-two-col h2,
.service-page .service-heading h2,
.service-page .service-why h2,
.service-page .service-cta h2{
    color:#fff;
    font-size:clamp(32px, 4vw, 48px);
    line-height:1.15;
    margin:0;
}

.service-page .service-intro p{
    color:#c7cfdb;
    font-size:18px;
    line-height:1.9;
    margin-bottom:20px;
}

.service-page .service-dark{
    background:#0b0d11;
}

.service-page .controllers,
.service-page .machines,
.service-page .service-work,
.service-page .service-process,
.service-page .service-why,
.service-page .faq{
    padding:95px 0;
}

.service-page .service-heading{
    text-align:center;
    max-width:850px;
    margin:0 auto 55px;
}

.service-page .service-heading > p{
    color:#aeb8c8;
    font-size:18px;
    line-height:1.7;
    margin-top:14px;
}

.service-page .controllers-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0,1fr));
    gap:25px;
    margin-top:0;
}

.service-page .controller-card{
    min-height:190px;
    padding:30px;
    background:#181d27;
    border:1px solid #2c3443;
    border-radius:18px;
    transition:.3s;
}

.service-page .controller-card:hover,
.service-page .work-card:hover{
    transform:translateY(-7px);
    border-color:#0b8cff;
    box-shadow:0 18px 40px rgba(11,140,255,.18);
}

.service-page .service-card-icon{
    width:50px;
    height:50px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:22px;
    border-radius:14px;
    background:linear-gradient(135deg,#0b8cff,#0068d8);
    font-size:23px;
    font-weight:800;
    color:#fff;
}

.service-page .controller-card h3{
    color:#fff;
    font-size:24px;
    margin-bottom:10px;
}

.service-page .controller-card p{
    color:#bfc7d4;
    line-height:1.7;
}

.service-page .machines{
    background:#151922;
}

.service-page .machines-grid{
    display:grid;
    grid-template-columns:repeat(4, minmax(0,1fr));
    gap:25px;
    margin-top:0;
}

.service-page .machine-card{
    display:block;
    overflow:hidden;
    background:#1b202b;
    border:1px solid #2a3240;
    border-radius:18px;
    color:#fff;
    text-decoration:none;
    transition:.3s;
}

.service-page .machine-card:hover{
    transform:translateY(-7px);
    border-color:#0b8cff;
    box-shadow:0 18px 40px rgba(11,140,255,.18);
}

.service-page .machine-card img{
    width:100%;
    height:210px;
    display:block;
    object-fit:cover;
}

.service-page .machine-card-content{
    padding:22px;
}

.service-page .machine-card h3{
    color:#fff;
    font-size:23px;
    margin-bottom:8px;
}

.service-page .machine-card span{
    color:#9eabc0;
    font-size:14px;
    line-height:1.5;
}

.service-page .work-grid{
    display:grid;
    grid-template-columns:repeat(4, minmax(0,1fr));
    gap:25px;
}

.service-page .work-card{
    padding:30px;
    background:#181d27;
    border:1px solid #2c3443;
    border-radius:18px;
    transition:.3s;
}

.service-page .work-card > span{
    color:#0b8cff;
    font-size:14px;
    font-weight:800;
    letter-spacing:1px;
}

.service-page .work-card h3{
    color:#fff;
    font-size:23px;
    margin:18px 0 12px;
}

.service-page .work-card p{
    color:#bfc7d4;
    line-height:1.7;
}

.service-page .process-grid{
    display:grid;
    grid-template-columns:repeat(4, minmax(0,1fr));
    gap:25px;
}

.service-page .process-grid > div{
    position:relative;
    padding:28px;
    border-top:2px solid #0b8cff;
    background:#11151d;
}

.service-page .process-grid strong{
    color:#0b8cff;
    font-size:30px;
}

.service-page .process-grid h3{
    color:#fff;
    font-size:21px;
    margin:14px 0 10px;
}

.service-page .process-grid p{
    color:#bfc7d4;
    line-height:1.7;
}

.service-page .service-why{
    background:#0b0d11;
}

.service-page .why-list{
    display:grid;
    gap:15px;
}

.service-page .why-list p{
    margin:0;
    padding:17px 20px;
    background:#181d27;
    border:1px solid #2c3443;
    border-radius:12px;
    color:#e3e8ef;
    line-height:1.5;
}

.service-page .faq{
    background:#151922;
}

.service-page .faq-inner{
    max-width:1000px;
}

.service-page .faq-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:22px;
}

.service-page .faq-grid > div{
    padding:28px;
    background:#1b202b;
    border:1px solid #2a3240;
    border-radius:16px;
}

.service-page .faq-grid h3{
    color:#0b8cff;
    font-size:20px;
    margin-bottom:12px;
}

.service-page .faq-grid p{
    color:#c7cfdb;
    line-height:1.75;
}

.service-page .service-cta{
    padding:100px 0;
    text-align:center;
    background:
        linear-gradient(90deg, rgba(11,140,255,.08), rgba(11,140,255,.02));
}

.service-page .service-cta p{
    max-width:700px;
    margin:18px auto 30px;
    color:#c7cfdb;
    font-size:18px;
    line-height:1.7;
}

@media (max-width:992px){
    .service-page .controllers-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .service-page .machines-grid,
    .service-page .work-grid,
    .service-page .process-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .service-page .service-two-col{
        grid-template-columns:1fr;
        gap:35px;
    }
}

@media (max-width:768px){
    .service-page .service-container{
        width:min(100% - 40px, 700px);
    }

    .service-page .service-hero{
        min-height:620px;
        padding:150px 0 70px;
        background-position:65% center;
    }

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

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

    .service-page .service-hero-actions{
        flex-direction:column;
        align-items:stretch;
    }

    .service-page .service-btn{
        width:100%;
    }

    .service-page .controllers-grid,
    .service-page .machines-grid,
    .service-page .work-grid,
    .service-page .process-grid,
    .service-page .faq-grid{
        grid-template-columns:1fr;
    }

    .service-page .controllers,
    .service-page .machines,
    .service-page .service-work,
    .service-page .service-process,
    .service-page .service-why,
    .service-page .faq,
    .service-page .service-intro{
        padding:70px 0;
    }

    .service-page .machine-card img{
        height:230px;
    }
}

@media (max-width:640px){
    .service-page .service-container{
        width:calc(100% - 30px);
    }

    .service-page .service-hero{
        min-height:570px;
        padding:130px 0 60px;
        background:
            linear-gradient(rgba(5,10,18,.60),rgba(5,10,18,.78)),
            url("../assets/images/hero-mobile.jpg") center/cover no-repeat;
    }

    .service-page .service-hero h1{
        font-size:34px;
    }

    .service-page .service-hero p{
        font-size:16px;
        line-height:1.65;
    }

    .service-page .service-two-col h2,
    .service-page .service-heading h2,
    .service-page .service-why h2,
    .service-page .service-cta h2{
        font-size:30px;
    }

    .service-page .service-heading{
        margin-bottom:38px;
    }

    .service-page .controller-card,
    .service-page .work-card,
    .service-page .process-grid > div,
    .service-page .faq-grid > div{
        padding:24px;
    }
}

/* ===== PIKSI PROJECT DETAIL PAGES ===== */
.container{width:min(1200px,calc(100% - 50px));margin:0 auto}
.project-page{overflow-x:hidden;background:#0b0d11}
.project-page .project-hero{min-height:600px;padding:160px 0 90px;display:flex;align-items:center;background:linear-gradient(90deg,rgba(5,10,18,.92),rgba(5,10,18,.72),rgba(5,10,18,.38)),var(--project-image) center/cover no-repeat}
.project-page .project-hero-content{max-width:850px}
.project-page .project-eyebrow{display:block;color:#0b8cff;font-size:13px;font-weight:800;letter-spacing:2px;text-transform:uppercase;margin-bottom:15px}
.project-page .project-hero h1{color:#fff;font-size:clamp(42px,6vw,72px);line-height:1.05;margin-bottom:18px}
.project-page .project-hero .project-type{color:#bfc9d8;font-size:21px;line-height:1.7;margin:0 0 30px}
.project-page .project-actions{display:flex;gap:14px;flex-wrap:wrap}
.project-page .project-btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:13px 25px;border-radius:10px;border:2px solid #0b8cff;background:#0b8cff;color:#fff;text-decoration:none;font-weight:700;transition:.25s}
.project-page .project-btn.secondary{background:transparent}
.project-page .project-btn:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(11,140,255,.25)}
.project-page .project-intro{padding:90px 0;background:#11151d}
.project-page .project-intro-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:55px;align-items:center}
.project-page .project-intro h2,.project-page .project-section h2{color:#fff;font-size:clamp(32px,4vw,48px);line-height:1.15;margin-bottom:20px}
.project-page .project-intro p,.project-page .project-section p{color:#c7cfdb;font-size:18px;line-height:1.85}
.project-page .project-main-image{width:100%;max-height:520px;object-fit:cover;border-radius:20px;border:1px solid rgba(255,255,255,.08);box-shadow:0 25px 60px rgba(0,0,0,.4)}
.project-page .project-section{padding:90px 0;background:#0b0d11}
.project-page .project-section.alt{background:#151922}
.project-page .project-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;margin-top:45px}
.project-page .project-info-card{padding:28px;background:#181d27;border:1px solid #2c3443;border-radius:16px}
.project-page .project-info-card strong{display:block;color:#0b8cff;font-size:13px;letter-spacing:1px;text-transform:uppercase;margin-bottom:10px}
.project-page .project-info-card h3{color:#fff;font-size:21px;margin-bottom:9px}
.project-page .project-info-card p{font-size:16px;line-height:1.65}
.project-page .project-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:45px}
.project-page .project-gallery img{width:100%;height:230px;object-fit:cover;display:block;border-radius:16px;border:1px solid rgba(255,255,255,.07)}
.project-page .project-cta{padding:95px 0;text-align:center;background:linear-gradient(90deg,rgba(11,140,255,.08),rgba(11,140,255,.02))}
.project-page .project-cta h2{color:#fff;font-size:clamp(32px,4vw,48px);margin-bottom:15px}
.project-page .project-cta p{color:#c7cfdb;max-width:720px;margin:0 auto 30px;font-size:18px;line-height:1.7}
@media(max-width:992px){
 .project-page .project-intro-grid{grid-template-columns:1fr}
 .project-page .project-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
 .project-page .project-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:768px){
 .container{width:calc(100% - 40px)}
 .project-page .project-hero{min-height:560px;padding:140px 0 70px;background-position:65% center}
 .project-page .project-hero h1{font-size:42px}
 .project-page .project-hero .project-type{font-size:17px}
 .project-page .project-cards,.project-page .project-gallery{grid-template-columns:1fr}
 .project-page .project-gallery img{height:240px}
}
@media(max-width:640px){
 .container{width:calc(100% - 30px)}
 .project-page .project-hero{min-height:540px;padding:125px 0 60px}
 .project-page .project-hero h1{font-size:34px}
}

/* FINAL POLISH — consistent rhythm and centered content */
.section-title{max-width:1000px;margin-left:auto;margin-right:auto}
.services-grid,.projects-grid,.stats{max-width:1250px;margin-left:auto;margin-right:auto}
.about-home{max-width:none}
.about-home .about-image,.about-home .about-text{max-width:600px;width:100%;margin-left:auto;margin-right:auto}
.services-grid .service-card,.projects-grid .project-card{height:100%}
.service-page .service-container{max-width:1200px}
.service-page .service-heading{text-align:center;max-width:900px;margin-left:auto;margin-right:auto}
.service-page .service-heading > p{margin-left:auto;margin-right:auto}
.service-page .service-two-col{max-width:1200px;margin-left:auto;margin-right:auto}
.project-page .section-title{text-align:center}
.project-page .project-intro-grid,.project-page .project-cards,.project-page .project-gallery{max-width:1200px;margin-left:auto;margin-right:auto}
@media(max-width:768px){
 .services-grid,.projects-grid{width:100%}
 .about-home .about-image,.about-home .about-text{max-width:100%}
}

/* ===== FINAL STATS FIX ===== */
.stats{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:25px;
    align-items:stretch;
}
.stats .stat-card{
    min-width:0;
    width:auto;
}
@media(max-width:992px){
    .stats{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:640px){
    .stats{grid-template-columns:1fr;}
}

/* PIKSI SEO / navigation improvements */
.services-grid a.service-card, a.service-card { text-decoration:none; color:inherit; display:block; }
a.service-card { cursor:pointer; }
a.service-card:hover { transform:translateY(-4px); }
.related-services { padding:80px 0; background:#0b0d11; }
.related-services .services-grid { margin-top:30px; }
.active { color:#1683ff !important; }

/* ===== Standalone About / Gallery / Service page layout fixes ===== */
.hero-small{padding:120px 0 70px;background:linear-gradient(90deg,rgba(5,10,18,.94),rgba(5,10,18,.78)),url("assets/images/hero.jpg") center/cover no-repeat;}
.hero-small .container{max-width:1200px;}
.hero-small h1{font-size:clamp(40px,5vw,64px);line-height:1.08;margin:15px 0 18px;}
.hero-small p{max-width:850px;color:#c8d0dc;font-size:19px;line-height:1.7;}
.section-label{color:#0b8cff;font-weight:800;letter-spacing:2px;font-size:13px;}
.contact-page-section{background:#11151d;padding:90px 0;}
.contact-page-section .container{max-width:1200px;}
.contact-actions{display:flex;gap:15px;flex-wrap:wrap;margin-top:25px;}
.contact-actions .btn{margin-top:0;}
.contact-form-wrap{width:100%;}
@media(max-width:768px){.hero-small{padding:100px 20px 55px}.hero-small h1{font-size:38px}.hero-small p{font-size:17px}.contact-page-section{padding:65px 20px}.contact-actions{justify-content:center}}

/* PIKSI KNOWLEDGE / TECHNICAL GUIDES */
.knowledge-page .knowledge-hero{min-height:430px}
.knowledge-page .knowledge-hero h1{max-width:980px}
.knowledge-article{background:#0b0e13;padding:80px 0}
.knowledge-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:50px;align-items:start}
.knowledge-content{max-width:900px;color:#cbd3df;font-size:17px;line-height:1.8}
.knowledge-content h2{color:#fff;font-size:30px;line-height:1.25;margin:0 0 16px;padding-top:14px}
.knowledge-content h2:not(:first-child){margin-top:44px}
.knowledge-content p{margin:0 0 18px}
.knowledge-content ul,.knowledge-content ol{padding-left:25px;margin:10px 0 24px}
.knowledge-content li{margin:7px 0}
.knowledge-content strong{color:#fff}
.knowledge-aside{position:sticky;top:100px;background:#151b24;border:1px solid #293548;border-radius:16px;padding:26px;color:#aebbd0}
.knowledge-aside h3{color:#fff;font-size:22px;margin:10px 0}
.knowledge-aside p{line-height:1.65}
.knowledge-intro{background:#10151d;padding:70px 0}
.knowledge-intro h2{color:#fff;font-size:36px;max-width:900px;margin:0 0 18px}
.knowledge-intro p{color:#aebbd0;max-width:900px;font-size:18px;line-height:1.75}
.knowledge-grid{background:#0b0e13;padding:70px 0}
.knowledge-grid .service-container{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
a.knowledge-card{display:flex;flex-direction:column;text-decoration:none;background:#151b24;border:1px solid #293548;border-radius:15px;padding:26px;min-height:270px;transition:.2s}
a.knowledge-card:hover{border-color:#008cff;transform:translateY(-3px)}
.knowledge-card h3{color:#fff;font-size:24px;margin:8px 0 12px}
.knowledge-card p{color:#aebbd0;line-height:1.65;margin:0 0 20px}
.knowledge-more{color:#1295ff;font-weight:700;margin-top:auto}
@media(max-width:900px){.knowledge-layout{grid-template-columns:1fr}.knowledge-aside{position:static}.knowledge-grid .service-container{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.knowledge-grid .service-container{grid-template-columns:1fr}.knowledge-intro h2{font-size:28px}.knowledge-content{font-size:16px}}