/* ==========================================================================
   Appslin — Server service pages (linux-server.html, aws-server.html)
   Page-scoped additions only. Does not modify or override global CSS.
   ========================================================================== */

.page-server .sp-hero-visual{ align-self:start; }
.page-server .sp-hero-art{
  margin:0; border-radius:26px; overflow:hidden; background:#fff;
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 34px 80px -34px rgba(3,10,28,.65);
}
.page-server .sp-hero-art img{ display:block; width:100%; height:auto; }
.page-server .sp-hero-cap{
  display:flex; flex-wrap:wrap; gap:8px; padding:12px 14px;
  background:linear-gradient(180deg,rgba(11,18,38,.02),rgba(11,18,38,.06));
  border-top:1px solid rgba(11,18,38,.08);
}
.page-server .sp-hero-cap span{
  font:600 12px/1 "Plus Jakarta Sans",sans-serif; color:#0b1226;
  background:#fff; border:1px solid rgba(11,18,38,.1);
  border-radius:999px; padding:7px 12px;
}

/* ---------- icon cards that reuse the existing PNG icon library ---------- */
.page-server .sp-grid{ display:grid; gap:18px; }
.page-server .sp-grid--2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.page-server .sp-grid--3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.page-server .sp-grid--4{ grid-template-columns:repeat(4,minmax(0,1fr)); }

.page-server .sp-card{
  background:#fff; border:1px solid rgba(11,18,38,.08); border-radius:20px;
  padding:24px 22px; box-shadow:0 18px 44px -34px rgba(3,10,28,.5);
  transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease;
  min-width:0;
}
.page-server .sp-card:hover{
  transform:translateY(-5px); border-color:rgba(18,184,134,.34);
  box-shadow:0 26px 60px -32px rgba(3,10,28,.55);
}
.page-server .sp-card h3,
.page-server .sp-card h4,
.page-server .sp-card h5{ margin:0 0 8px; font:700 17px/1.35 "Sora",sans-serif; color:#0b1226; }
.page-server .sp-card p{ margin:0; color:#4a5570; font:400 15px/1.7 "Plus Jakarta Sans",sans-serif; }

.page-server .sp-ico{
  width:54px; height:54px; border-radius:16px; display:grid; place-items:center;
  background:linear-gradient(150deg,rgba(37,99,235,.12),rgba(18,184,134,.14));
  margin-bottom:14px; flex:none;
}
.page-server .sp-ico img{ width:30px; height:30px; object-fit:contain; display:block; }
.page-server .sp-ico svg{ width:26px; height:26px; color:#1a4fd6; }

/* ---------- numbered process timeline ---------- */
.page-server .sp-steps{ list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.page-server .sp-step{
  display:flex; gap:16px; align-items:flex-start; background:#fff;
  border:1px solid rgba(11,18,38,.08); border-radius:18px; padding:18px 20px;
  box-shadow:0 16px 40px -34px rgba(3,10,28,.5);
  transition:transform .28s ease, border-color .28s ease;
  min-width:0;
}
.page-server .sp-step:hover{ transform:translateX(4px); border-color:rgba(18,184,134,.34); }
.page-server .sp-step-num{
  flex:none; width:44px; height:44px; border-radius:14px; display:grid; place-items:center;
  font:800 15px/1 "Sora",sans-serif; color:#fff;
  background:linear-gradient(150deg,#1a4fd6,#12b886);
}
.page-server .sp-step-ico{ flex:none; width:40px; height:40px; display:grid; place-items:center; }
.page-server .sp-step-ico img{ width:34px; height:34px; object-fit:contain; }
.page-server .sp-step h5{ margin:0 0 4px; font:700 16px/1.35 "Sora",sans-serif; color:#0b1226; }
.page-server .sp-step p{ margin:0; color:#4a5570; font:400 14.5px/1.65 "Plus Jakarta Sans",sans-serif; }

/* ---------- media column: aligns with content, never crops ---------- */
.page-server .sp-media{
  margin:0; border-radius:24px; overflow:hidden; align-self:start; background:#fff;
  border:1px solid rgba(11,18,38,.08); box-shadow:0 26px 60px -38px rgba(3,10,28,.5);
}
.page-server .sp-media img{ display:block; width:100%; height:auto; object-fit:contain; }
@media (min-width:993px){
  .page-server .sp-media{ position:sticky; top:110px; }
}

/* ---------- complimentary services ---------- */
.page-server .sp-comp{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px;
  max-width:920px; margin:0 auto; list-style:none; padding:0;
}
.page-server .sp-comp li{
  display:flex; align-items:center; gap:12px; min-width:0;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16);
  border-radius:16px; padding:16px 18px; color:#fff;
  font:600 15px/1.5 "Plus Jakarta Sans",sans-serif;
}
.page-server .sp-comp li svg{ width:20px; height:20px; flex:none; color:#3ddc9a; }
.page-server .sp-comp li:last-child{ grid-column:1 / -1; justify-content:center; text-align:center; }

/* ---------- CTA band ---------- */
.page-server .sp-cta-inner{ max-width:960px; margin:0 auto; text-align:center; }
.page-server .sp-cta-inner h3,
.page-server .sp-cta-inner h5{ color:#fff; font-family:"Sora",sans-serif; }
.page-server .sp-cta-inner p{ color:rgba(255,255,255,.8); }
.page-server .sp-cta-actions{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:22px; }

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .page-server .sp-grid--4{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:992px){
  .page-server .sp-grid--3{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .page-server .sp-media{ position:static; }
}
@media (max-width:700px){
  .page-server .sp-grid--2,
  .page-server .sp-grid--3,
  .page-server .sp-grid--4{ grid-template-columns:1fr; }
  .page-server .sp-comp{ grid-template-columns:1fr; }
  .page-server .sp-step{ padding:16px; gap:12px; }
}

/* keep the reCAPTCHA badge from sitting behind the floating widgets */
.page-server .grecaptcha-badge,
body.page-server .grecaptcha-badge{
  visibility:hidden !important; opacity:0 !important; pointer-events:none !important;
}