/* ============================================================
   Portfolio page styles (mkpf-) — matches site design system
   Loaded only by application/views/home/portfolio.php
   ============================================================ */
.mkpf-page{
    --mk-primary:#1a56db; --mk-primary-light:#3b82f6; --mk-primary-dark:#0f3a8e;
    --mk-green:#75bc00; --mk-accent:#10b981;
    --mk-dark:#0f172a; --mk-dark-2:#1e293b;
    --mk-text:#334155; --mk-text-light:#64748b;
    --mk-bg-light:#f8fafc; --mk-border:#e2e8f0;
    font-family:'Spline Sans',-apple-system,sans-serif;
    color:var(--mk-text);
}
.mkpf-page *{box-sizing:border-box;}
.mkpf-container{max-width:1170px;margin:0 auto;padding:0 20px;}
.mkpf-kicker{
    display:inline-block; position:relative;
    background:linear-gradient(90deg,var(--mk-primary),var(--mk-accent));
    color:#fff; padding:6px 18px; border-radius:20px;
    font-size:12px; font-weight:600; letter-spacing:2px; text-transform:uppercase;
    margin-bottom:20px;
}

/* ---------- Hero ---------- */
.mkpf-hero{
    position:relative; overflow:hidden;
    background:linear-gradient(135deg,#0f172a 0%,#12235a 55%,#0f3a8e 100%);
    padding:100px 0 90px; text-align:center;
}
.mkpf-hero::before{
    content:""; position:absolute; inset:0;
    background:url('../images/banner/portfolio-03.png') center/cover no-repeat;
    opacity:.12; mix-blend-mode:luminosity;
}
.mkpf-hero::after{
    content:""; position:absolute; width:580px; height:580px; border-radius:50%;
    background:radial-gradient(circle,rgba(117,188,0,.20) 0%,transparent 65%);
    top:-250px; right:-170px; pointer-events:none;
}
.mkpf-hero h1{
    position:relative; color:#fff; font-size:46px; font-weight:600;
    margin:0 0 16px; letter-spacing:-1px; line-height:1.16;
    font-family:'Spline Sans',sans-serif;
}
.mkpf-hero h1 span{color:var(--mk-green);}
.mkpf-hero-sub{
    position:relative; color:#cbd5e1; font-size:18px; max-width:680px;
    margin:0 auto; line-height:1.65;
}
.mkpf-hero-strip{
    position:relative; display:flex; gap:34px; justify-content:center; flex-wrap:wrap;
    margin-top:40px; padding-top:28px; border-top:1px solid rgba(148,163,184,.2);
}
.mkpf-hero-strip span{color:#cbd5e1; font-size:14.5px; display:flex; align-items:center; gap:9px;}
.mkpf-hero-strip span i{color:var(--mk-green); font-size:16px;}

/* ---------- Grid ---------- */
.mkpf-grid-sec{padding:80px 0 90px; background:var(--mk-bg-light);}
.mkpf-grid-head{text-align:center; max-width:780px; margin:0 auto 50px;}
.mkpf-grid-head h2{
    font-size:32px; font-weight:600; color:var(--mk-dark);
    margin:0 0 14px; letter-spacing:-.5px; font-family:'Spline Sans',sans-serif;
}
.mkpf-grid-head h2 span{color:var(--mk-green);}
.mkpf-grid-head p{font-size:16px; line-height:1.75; color:var(--mk-text-light); margin:0;}
.mkpf-grid{display:flex; flex-wrap:wrap; gap:26px;}
.mkpf-card{
    flex:1 1 255px; max-width:270px; min-width:240px;
    background:#fff; border:1px solid var(--mk-border); border-radius:16px;
    overflow:hidden; display:flex; flex-direction:column;
    transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
    box-shadow:0 4px 6px -1px rgba(0,0,0,.05);
}
.mkpf-card:hover{
    transform:translateY(-6px);
    box-shadow:0 24px 50px -14px rgba(26,86,219,.25);
    border-color:rgba(26,86,219,.35);
}
.mkpf-card.mkpf-hidden{display:none;}
.mkpf-card-img{position:relative; height:190px; overflow:hidden; background:#fff;}
.mkpf-card-img img{
    width:100%; height:100%; object-fit:cover; object-position:top center; display:block;
    transition:transform .45s ease;
}
.mkpf-card:hover .mkpf-card-img img{transform:scale(1.06);}
.mkpf-card-body{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding:16px 18px; flex:1; border-top:1px solid var(--mk-border);
}
.mkpf-card-body h3{
    font-size:15px; font-weight:600; color:var(--mk-dark); margin:0;
    line-height:1.4; font-family:'Spline Sans',sans-serif;
}
.mkpf-card-link{
    flex:0 0 auto; display:inline-flex; align-items:center; gap:6px;
    color:var(--mk-primary); font-size:12.5px; font-weight:600;
    text-decoration:none; white-space:nowrap;
}
.mkpf-card-link:hover{color:var(--mk-green); text-decoration:none;}
.mkpf-more-wrap{text-align:center; margin-top:44px;}
.mkpf-more{
    display:inline-flex; align-items:center; gap:10px;
    padding:14px 36px; border-radius:30px; border:none; cursor:pointer;
    background:linear-gradient(90deg,var(--mk-primary),var(--mk-primary-light));
    color:#fff; font-size:14.5px; font-weight:600; letter-spacing:.5px;
    font-family:inherit; box-shadow:0 10px 20px rgba(26,86,219,.30);
    transition:all .3s ease;
}
.mkpf-more:hover{transform:translateY(-2px); box-shadow:0 16px 30px rgba(26,86,219,.4);}

/* ---------- Capabilities strip ---------- */
.mkpf-caps{background:var(--mk-dark); padding:90px 0; position:relative; overflow:hidden;}
.mkpf-caps::before{
    content:""; position:absolute; width:520px; height:520px; border-radius:50%;
    background:radial-gradient(circle,rgba(26,86,219,.25) 0%,transparent 65%);
    bottom:-260px; left:-150px; pointer-events:none;
}
.mkpf-caps-head{text-align:center; max-width:760px; margin:0 auto 50px; position:relative;}
.mkpf-caps-head h2{color:#fff; font-size:32px; font-weight:600; margin:0 0 14px; letter-spacing:-.5px; font-family:'Spline Sans',sans-serif;}
.mkpf-caps-head h2 span{color:var(--mk-green);}
.mkpf-caps-head p{color:#94a3b8; font-size:16px; margin:0; line-height:1.7;}
.mkpf-caps-row{display:flex; gap:26px; flex-wrap:wrap; position:relative;}
.mkpf-cap{
    flex:1 1 250px; min-width:240px;
    background:var(--mk-dark-2); border:1px solid rgba(148,163,184,.15);
    border-radius:16px; padding:30px 26px;
    transition:transform .3s ease, border-color .3s ease;
}
.mkpf-cap:hover{transform:translateY(-5px); border-color:rgba(117,188,0,.45);}
.mkpf-cap .mkpf-cap-icon{
    width:50px; height:50px; border-radius:12px; margin-bottom:16px;
    display:flex; align-items:center; justify-content:center;
    background:rgba(117,188,0,.14); color:var(--mk-green); font-size:20px;
}
.mkpf-cap h3{color:#fff; font-size:17px; font-weight:600; margin:0 0 10px; font-family:'Spline Sans',sans-serif;}
.mkpf-cap p{color:#94a3b8; font-size:14.5px; line-height:1.7; margin:0;}

/* ---------- CTA band ---------- */
.mkpf-cta{
    background:linear-gradient(135deg,#0f172a 0%,#12235a 55%,#0f3a8e 100%);
    padding:80px 0; text-align:center; position:relative; overflow:hidden;
    border-top:1px solid rgba(148,163,184,.12);
}
.mkpf-cta::before{
    content:""; position:absolute; width:500px; height:500px; border-radius:50%;
    background:radial-gradient(circle,rgba(117,188,0,.18) 0%,transparent 65%);
    bottom:-250px; right:-140px; pointer-events:none;
}
.mkpf-cta h2{position:relative; color:#fff; font-size:32px; font-weight:600; margin:0 0 14px; letter-spacing:-.5px; font-family:'Spline Sans',sans-serif;}
.mkpf-cta h2 span{color:var(--mk-green);}
.mkpf-cta p{position:relative; color:#cbd5e1; font-size:16.5px; max-width:640px; margin:0 auto 32px; line-height:1.7;}
.mkpf-cta-btns{position:relative; display:flex; gap:14px; justify-content:center; flex-wrap:wrap;}
.mkpf-btn{
    display:inline-flex; align-items:center; gap:9px;
    padding:14px 32px; border-radius:30px; font-weight:600; font-size:14.5px;
    text-decoration:none; letter-spacing:.5px; transition:all .3s ease;
}
.mkpf-btn-primary{
    background:linear-gradient(90deg,var(--mk-primary),var(--mk-primary-light));
    color:#fff !important; box-shadow:0 10px 20px rgba(26,86,219,.35);
}
.mkpf-btn-primary:hover{transform:translateY(-2px); box-shadow:0 16px 30px rgba(26,86,219,.45); color:#fff;}
.mkpf-btn-ghost{background:transparent; color:#fff !important; border:1.5px solid rgba(255,255,255,.35);}
.mkpf-btn-ghost:hover{transform:translateY(-2px); border-color:var(--mk-green); color:var(--mk-green) !important;}

/* ---------- Responsive ---------- */
@media (max-width:991px){
    .mkpf-hero{padding:80px 0 70px;}
    .mkpf-hero h1{font-size:36px;}
    .mkpf-grid-sec{padding:60px 0 70px;}
    .mkpf-caps,.mkpf-cta{padding:70px 0;}
}
@media (max-width:600px){
    .mkpf-hero h1{font-size:28px;}
    .mkpf-hero-sub{font-size:15.5px;}
    .mkpf-hero-strip{gap:16px;}
    .mkpf-grid-head h2,.mkpf-caps-head h2,.mkpf-cta h2{font-size:25px;}
    .mkpf-card{max-width:100%; flex-basis:100%;}
}