/* ============================================================
   Offshore Development Center page styles (mkodc-)
   Matches homepage/contact design system.
   Loaded only by application/views/home/offshore_development_center.php
   ============================================================ */
.mkodc-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);
}
.mkodc-page *{box-sizing:border-box;}
.mkodc-container{max-width:1170px;margin:0 auto;padding:0 20px;}
.mkodc-kicker{
    display:inline-block;
    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; position:relative;
}

/* ---------- Hero ---------- */
.mkodc-hero{
    position:relative; overflow:hidden;
    background:linear-gradient(135deg,#0f172a 0%,#12235a 55%,#0f3a8e 100%);
    padding:100px 0 80px; text-align:center;
}
.mkodc-hero::before{
    content:""; position:absolute; width:620px; height:620px; border-radius:50%;
    background:radial-gradient(circle,rgba(117,188,0,.20) 0%,transparent 65%);
    top:-260px; right:-180px; pointer-events:none;
}
.mkodc-hero::after{
    content:""; position:absolute; width:480px; height:480px; border-radius:50%;
    background:radial-gradient(circle,rgba(59,130,246,.25) 0%,transparent 65%);
    bottom:-240px; left:-140px; pointer-events:none;
}
.mkodc-hero h1{
    position:relative; color:#fff; font-size:48px; font-weight:600;
    margin:0 0 16px; letter-spacing:-1px; line-height:1.15;
    font-family:'Spline Sans',sans-serif;
}
.mkodc-hero h1 span{color:var(--mk-green);}
.mkodc-hero-sub{
    position:relative; color:#cbd5e1; font-size:18px; max-width:700px;
    margin:0 auto 34px; line-height:1.65;
}
.mkodc-hero-cta{position:relative; display:flex; gap:14px; justify-content:center; flex-wrap:wrap;}
.mkodc-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;
}
.mkodc-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);
}
.mkodc-btn-primary:hover{transform:translateY(-2px); box-shadow:0 16px 30px rgba(26,86,219,.45); color:#fff;}
.mkodc-btn-ghost{
    background:transparent; color:#fff !important;
    border:1.5px solid rgba(255,255,255,.35);
}
.mkodc-btn-ghost:hover{transform:translateY(-2px); border-color:var(--mk-green); color:var(--mk-green) !important;}
.mkodc-hero-strip{
    position:relative; display:flex; gap:34px; justify-content:center; flex-wrap:wrap;
    margin-top:44px; padding-top:30px; border-top:1px solid rgba(148,163,184,.2);
}
.mkodc-hero-strip .mkodc-strip-item{color:#cbd5e1; font-size:14.5px; display:flex; align-items:center; gap:9px;}
.mkodc-hero-strip .mkodc-strip-item i{color:var(--mk-green); font-size:16px;}

/* ---------- Intro (what is an ODC) ---------- */
.mkodc-intro{padding:90px 0; background:#fff;}
.mkodc-intro-split{display:flex; gap:56px; align-items:center; flex-wrap:wrap;}
.mkodc-intro-text{flex:1 1 480px; min-width:300px;}
.mkodc-intro-text h2{
    font-size:34px; font-weight:600; color:var(--mk-dark);
    margin:0 0 20px; letter-spacing:-.5px; line-height:1.25;
    font-family:'Spline Sans',sans-serif;
}
.mkodc-intro-text h2 span{color:var(--mk-green);}
.mkodc-intro-text p{font-size:16px; line-height:1.8; color:var(--mk-text-light); margin:0 0 18px;}
.mkodc-intro-img{flex:1 1 380px; min-width:280px; text-align:center;}
.mkodc-intro-img img{
    width:100%; height:430px; object-fit:cover; object-position:88% center;
    border-radius:20px;
    box-shadow:0 20px 50px -12px rgba(15,23,42,.25);
}
@media (max-width:600px){
    .mkodc-intro-img img{height:300px;}
}

/* ---------- Benefits grid ---------- */
.mkodc-benefits{padding:90px 0; background:var(--mk-bg-light);}
.mkodc-sec-head{text-align:center; max-width:760px; margin:0 auto 54px;}
.mkodc-sec-head h2{
    font-size:34px; font-weight:600; color:var(--mk-dark);
    margin:0 0 14px; letter-spacing:-.5px; font-family:'Spline Sans',sans-serif;
}
.mkodc-sec-head h2 span{color:var(--mk-green);}
.mkodc-sec-head p{font-size:16px; line-height:1.75; color:var(--mk-text-light); margin:0;}
.mkodc-benefit-grid{display:flex; flex-wrap:wrap; gap:26px; justify-content:center;}
.mkodc-benefit{
    flex:1 1 300px; max-width:365px;
    background:#fff; border:1px solid var(--mk-border); border-radius:16px;
    padding:32px 28px;
    transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.mkodc-benefit:hover{
    transform:translateY(-6px);
    box-shadow:0 24px 50px -12px rgba(26,86,219,.22);
    border-color:rgba(26,86,219,.35);
}
.mkodc-benefit .mkodc-b-icon{
    width:54px; height:54px; border-radius:13px; margin-bottom:18px;
    display:flex; align-items:center; justify-content:center;
    background:linear-gradient(135deg,var(--mk-primary),var(--mk-primary-light));
    color:#fff; font-size:22px;
    box-shadow:0 8px 18px rgba(26,86,219,.30);
}
.mkodc-benefit:nth-child(3n+2) .mkodc-b-icon{background:linear-gradient(135deg,#5a9400,var(--mk-green)); box-shadow:0 8px 18px rgba(117,188,0,.30);}
.mkodc-benefit:nth-child(3n) .mkodc-b-icon{background:linear-gradient(135deg,#0e9488,var(--mk-accent)); box-shadow:0 8px 18px rgba(16,185,129,.30);}
.mkodc-benefit h3{font-size:18px; font-weight:600; color:var(--mk-dark); margin:0 0 10px; font-family:'Spline Sans',sans-serif;}
.mkodc-benefit p{font-size:14.5px; line-height:1.7; color:var(--mk-text-light); margin:0;}

/* ---------- Why India checklist ---------- */
.mkodc-india{padding:90px 0; background:#fff;}
.mkodc-india-split{display:flex; gap:56px; flex-wrap:wrap; align-items:flex-start;}
.mkodc-india-lead{flex:1 1 380px; min-width:300px;}
.mkodc-india-lead h2{
    font-size:34px; font-weight:600; color:var(--mk-dark);
    margin:0 0 18px; letter-spacing:-.5px; line-height:1.25;
    font-family:'Spline Sans',sans-serif;
}
.mkodc-india-lead h2 span{color:var(--mk-green);}
.mkodc-india-lead p{font-size:16px; line-height:1.8; color:var(--mk-text-light); margin:0 0 16px;}
.mkodc-checklist{flex:1 1 480px; min-width:300px; list-style:none; margin:0; padding:0;}
.mkodc-checklist li{
    display:flex; gap:16px; align-items:flex-start;
    background:var(--mk-bg-light); border:1px solid var(--mk-border);
    border-radius:14px; padding:18px 20px; margin-bottom:14px;
    transition:border-color .3s ease, box-shadow .3s ease;
}
.mkodc-checklist li:hover{border-color:rgba(117,188,0,.5); box-shadow:0 10px 24px -8px rgba(15,23,42,.12);}
.mkodc-checklist li i{
    flex:0 0 auto; margin-top:5px;
    color:var(--mk-green); font-size:17px;
}
.mkodc-checklist li p{margin:0; font-size:14.5px; line-height:1.75; color:var(--mk-text-light);}
.mkodc-checklist li p strong{
    display:block; color:var(--mk-dark); font-weight:600;
    font-size:17px; letter-spacing:-.2px; margin-bottom:6px;
    font-family:'Spline Sans',sans-serif;
}

/* ---------- AI development (dark) ---------- */
.mkodc-ai{background:var(--mk-dark); padding:100px 0; position:relative; overflow:hidden;}
.mkodc-ai::before{
    content:""; position:absolute; width:560px; height:560px; border-radius:50%;
    background:radial-gradient(circle,rgba(26,86,219,.28) 0%,transparent 65%);
    top:-260px; right:-160px; pointer-events:none;
}
.mkodc-ai-split{display:flex; gap:56px; flex-wrap:wrap; position:relative;}
.mkodc-ai-text{flex:1 1 500px; min-width:300px;}
.mkodc-ai-text h2{
    color:#fff; font-size:34px; font-weight:600; margin:0 0 20px;
    letter-spacing:-.5px; line-height:1.25; font-family:'Spline Sans',sans-serif;
}
.mkodc-ai-text h2 span{color:var(--mk-green);}
.mkodc-ai-text p{color:#cbd5e1; font-size:16px; line-height:1.85; margin:0 0 18px;}
.mkodc-ai-text p a{color:var(--mk-primary-light); text-decoration:none;}
.mkodc-ai-text p a:hover{color:var(--mk-green);}
.mkodc-ai-side{flex:1 1 340px; min-width:280px;}
.mkodc-ai-chips{display:flex; flex-wrap:wrap; gap:11px; margin-bottom:30px;}
.mkodc-ai-chips span{
    background:rgba(117,188,0,.13); color:var(--mk-green);
    border:1px solid rgba(117,188,0,.35);
    padding:9px 18px; border-radius:22px; font-size:13.5px; font-weight:500;
}
.mkodc-ai-card{
    background:var(--mk-dark-2); border:1px solid rgba(148,163,184,.15);
    border-radius:18px; padding:28px 26px; margin-bottom:18px;
}
.mkodc-ai-card h3{
    color:#fff; font-size:17px; font-weight:600; margin:0 0 10px;
    display:flex; align-items:center; gap:11px; font-family:'Spline Sans',sans-serif;
}
.mkodc-ai-card h3 i{color:var(--mk-green);}
.mkodc-ai-card p{color:#94a3b8; font-size:14.5px; line-height:1.7; margin:0;}

/* ---------- Process steps ---------- */
.mkodc-steps{padding:90px 0; background:var(--mk-bg-light);}
.mkodc-step-row{display:flex; gap:26px; flex-wrap:wrap;}
.mkodc-step{
    flex:1 1 240px; min-width:230px;
    background:#fff; border:1px solid var(--mk-border); border-radius:16px;
    padding:30px 26px; position:relative;
    transition:transform .3s ease, box-shadow .3s ease;
}
.mkodc-step:hover{transform:translateY(-5px); box-shadow:0 20px 44px -12px rgba(15,23,42,.18);}
.mkodc-step .mkodc-step-no{
    display:inline-flex; align-items:center; justify-content:center;
    width:42px; height:42px; border-radius:50%;
    background:linear-gradient(135deg,var(--mk-primary),var(--mk-primary-light));
    color:#fff; font-size:17px; font-weight:700; margin-bottom:16px;
}
.mkodc-step h3{font-size:17.5px; font-weight:600; color:var(--mk-dark); margin:0 0 10px; font-family:'Spline Sans',sans-serif;}
.mkodc-step p{font-size:14.5px; line-height:1.7; color:var(--mk-text-light); margin:0;}

/* ---------- FAQ ---------- */
.mkodc-faq{padding:90px 0; background:#fff;}
.mkodc-faq-list{max-width:820px; margin:0 auto;}
.mkodc-faq-item{
    border:1px solid var(--mk-border); border-radius:14px;
    margin-bottom:14px; background:var(--mk-bg-light);
    overflow:hidden; transition:border-color .3s ease;
}
.mkodc-faq-item[open]{border-color:rgba(26,86,219,.4); background:#fff;}
.mkodc-faq-item summary{
    cursor:pointer; list-style:none; padding:19px 24px;
    font-size:16.5px; font-weight:600; color:var(--mk-dark);
    display:flex; justify-content:space-between; align-items:center; gap:16px;
    font-family:'Spline Sans',sans-serif;
}
.mkodc-faq-item summary::-webkit-details-marker{display:none;}
.mkodc-faq-item summary::after{
    content:"\002B"; font-size:22px; font-weight:400; color:var(--mk-green);
    flex:0 0 auto; transition:transform .25s ease;
}
.mkodc-faq-item[open] summary::after{transform:rotate(45deg);}
.mkodc-faq-item .mkodc-faq-a{padding:0 24px 20px;}
.mkodc-faq-item .mkodc-faq-a p{margin:0; font-size:15px; line-height:1.8; color:var(--mk-text-light);}

/* ---------- CTA band ---------- */
.mkodc-cta{
    background:linear-gradient(135deg,#0f172a 0%,#12235a 55%,#0f3a8e 100%);
    padding:80px 0; text-align:center; position:relative; overflow:hidden;
}
.mkodc-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;
}
.mkodc-cta h2{
    position:relative; color:#fff; font-size:34px; font-weight:600;
    margin:0 0 14px; letter-spacing:-.5px; font-family:'Spline Sans',sans-serif;
}
.mkodc-cta h2 span{color:var(--mk-green);}
.mkodc-cta p{position:relative; color:#cbd5e1; font-size:16.5px; max-width:640px; margin:0 auto 32px; line-height:1.7;}
.mkodc-cta .mkodc-hero-cta{position:relative;}

/* ---------- Responsive ---------- */
@media (max-width:991px){
    .mkodc-hero{padding:80px 0 60px;}
    .mkodc-hero h1{font-size:38px;}
    .mkodc-intro,.mkodc-benefits,.mkodc-india,.mkodc-ai,.mkodc-steps,.mkodc-faq{padding:70px 0;}
    .mkodc-intro-split,.mkodc-india-split,.mkodc-ai-split{gap:40px;}
}
@media (max-width:600px){
    .mkodc-hero h1{font-size:29px;}
    .mkodc-hero-sub{font-size:15.5px;}
    .mkodc-intro-text h2,.mkodc-sec-head h2,.mkodc-india-lead h2,.mkodc-ai-text h2,.mkodc-cta h2{font-size:26px;}
    .mkodc-hero-strip{gap:16px;}
    .mkodc-faq-item summary{font-size:15px; padding:16px 18px;}
    .mkodc-faq-item .mkodc-faq-a{padding:0 18px 16px;}
}