/* Karachi VPS Page */
.hero-khi{padding:56px 0 64px;text-align:center;background:linear-gradient(180deg,#f0f5ff 0%,#fff 100%)}
.hero-khi h1{font-size:clamp(28px,4.5vw,48px);font-weight:800;letter-spacing:-.03em;line-height:1.08;margin-bottom:16px}
.hero-khi h1 em{font-style:normal;color:var(--a)}
.hero-khi .desc{font-size:16px;color:var(--t2);max-width:640px;margin:0 auto 28px;line-height:1.75}
.hero-khi .desc a{color:var(--a);font-weight:600}
.hero-khi .bc{justify-content:center;display:flex;margin-bottom:20px}
.khi-areas{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.khi-area{padding:16px;border:1.5px solid var(--b);border-radius:10px;background:var(--s);text-align:center;font-size:13px;font-weight:600;color:var(--t2);transition:all .12s}
.khi-area:hover{border-color:var(--a);color:var(--a)}
.khi-area span{display:block;font-size:10px;color:var(--t3);font-weight:500;margin-top:2px}
@media(max-width:768px){.khi-areas{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.khi-areas{grid-template-columns:1fr}}
/* ==========================================================
   Karachi VPS — EXTRA CSS ONLY
   Add this AFTER global.css / existing Karachi page CSS.
   Existing classes are intentionally reused wherever possible.
   ========================================================== */

/* New reusable quick-spec cards */
.khi-spec-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
}
.khi-spec{
  padding:18px;
  border:1.5px solid var(--b);
  border-radius:10px;
  background:var(--s);
}
.khi-spec-k{
  font-size:11px;
  font-weight:600;
  color:var(--t3);
  text-transform:uppercase;
  letter-spacing:.04em;
  margin-bottom:4px;
}
.khi-spec-v{
  font-size:14px;
  font-weight:700;
  line-height:1.35;
}
.khi-spec-s{
  margin-top:3px;
  font-size:11px;
  line-height:1.45;
  color:var(--t3);
}

/* Real control-panel screenshot section */
.khi-panel-showcase{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(420px,1.35fr);
  gap:28px;
  align-items:center;
}
.khi-panel-copy .cp-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.khi-panel-figure{
  margin:0;
  border:1.5px solid var(--b);
  border-radius:16px;
  overflow:hidden;
  background:var(--s);
  box-shadow:0 18px 50px rgba(15,23,42,.10);
}
.khi-panel-figure img{
  display:block;
  width:100%;
  height:auto;
}
.khi-panel-figure figcaption{
  padding:10px 14px;
  font-size:11px;
  line-height:1.5;
  color:var(--t3);
  border-top:1px solid var(--b);
}

/* Improve trust-bar support for longer provisioning text */
.trust-item{
  min-width:0;
}
.trust-label{
  line-height:1.3;
}

/* Responsive additions */
@media (max-width:1100px){
  .khi-spec-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .khi-panel-showcase{
    grid-template-columns:1fr;
  }
}

@media (max-width:760px){
  .khi-spec-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .khi-panel-copy .cp-grid{
    grid-template-columns:1fr;
  }
  .khi-manage-grid{
    grid-template-columns:1fr !important;
  }
}

@media (max-width:480px){
  .khi-spec-grid{
    grid-template-columns:1fr;
  }
}