.server1-hero{
  --bg1:#f5f3ff;
  --bg2:#eef2ff;
  --ink:#0f172a;
  --muted:#6b7280;
  --brand:#0ea5e9; /* SERVER1 accent (sky) */
  --btn:#2a62fe;
  --btn-hover:#3f75ff;
  padding:64px 0;
  background:
    radial-gradient(60% 60% at 70% 10%, rgba(14,165,233,.18), transparent 60%),
    radial-gradient(50% 50% at 10% 20%, rgba(99,102,241,.12), transparent 60%),
    linear-gradient(180deg, var(--bg1), var(--bg2));

}
.server1-hero__container{
  max-width:1160px; margin:0 auto; padding:0 20px;
  display:grid; gap:40px; grid-template-columns: 1.05fr 1fr; align-items:center;
}
@media (max-width: 960px){
  .server1-hero__container{ grid-template-columns: 1fr; }
}

/* Copy */
.server1-hero__eyebrow{
  font: 500 14px/1.4 MainBold,Inter; color:var(--muted); margin:0 0 10px;
}
.server1-hero__eyebrow a{ color:#6366f1; text-decoration:none; }
.server1-hero__title{
  font:800 46px/1.5 Inter,system-ui; color:var(--ink); margin:0 0 14px; font-family:MainBold;
}
.server1-hero__title span{ color:var(--brand); font-family:MainBold; }
@media (max-width: 640px){
  .server1-hero__title{ font-size:38px; font-family:MainBold; }
}
.server1-hero__sub{
  font: 400 16px/1.7 Inter,system-ui; color:var(--muted); max-width:620px; margin:0 0 18px; font-family:MainBold;
}
.server1-hero__bullets{ list-style:none; padding:0; margin:0 0 26px; }
.server1-hero__bullets li{
  display:flex; align-items:center; gap:10px;

  font:500 15px/1.6 MainBold,Inter; color:var(--ink); margin:8px 0;
}
.server1-hero__bullets svg{ width:18px; height:18px; fill:#22c55e; flex:0 0 18px; }

.server1-hero__btn{
  display:inline-block; background:var(--btn); color:#fff; text-decoration:none;
  padding:14px 22px; border-radius:999px; font:600 15px/1 Inter,system-ui;
  box-shadow:0 8px 22px rgba(42,98,254,.15);
}
.server1-hero__btn:hover{ background:var(--btn-hover); }

/* Visual */
.server1-hero__visual{ position:relative; }
.server1-browser{
  background:#fff; border-radius:18px; box-shadow:0 10px 40px rgba(15,23,42,.08);
  overflow:hidden; border:1px solid #e5e7eb;
}
.server1-browser__bar{
  display:flex; align-items:center; gap:10px; padding:12px 16px; background:#f3f4f6; border-bottom:1px solid #e5e7eb;
}
.server1-browser__bar .dot{ width:10px; height:10px; border-radius:50%; display:inline-block; }
.server1-browser__bar .red{ background:#ef4444; } .server1-browser__bar .yellow{ background:#f59e0b; } .server1-browser__bar .green{ background:#22c55e; }
.server1-browser__address{
  display:flex; align-items:center; gap:8px; background:#fff; padding:8px 10px; border-radius:10px; border:1px solid #e5e7eb; flex:1;
  color:#6b7280; font:500 14px/1 Inter,system-ui;
}
.server1-browser__address svg{ width:16px; height:16px; fill:#10b981; }
.server1-browser__bar .plus{ margin-left:8px; color:#9ca3af; font-weight:600; }

.server1-browser__body{ position:relative; padding:14px; }
.server1-card{
  position:relative; grid-template-columns: 1fr 320px; min-height:220px; border-radius:12px; overflow:hidden;
}
.server1-card img{ width:100%; height:100%; object-fit:cover; }
.server1-card .server1-panel{ background:#14b8a6; }
.server1-card .server1-panel.green{ background:#22c55e; }

/* Badges */
.badge{
  position:absolute; display:flex; align-items:center; gap:10px; background:#fff; padding:10px 12px;
  border:1px solid #e5e7eb; border-radius:12px; box-shadow:0 10px 30px rgba(15,23,42,.08);
}
.badge svg{ width:20px; height:20px; fill:#334155; }

.badge--server1{ top:28px; left:-6px; }      /* ადრე badge--wp */
.badge--siteprot{ left:24px; bottom:16px; font:600 14px/1 Inter,system-ui; }
.badge--uptime{ right:16px; top:24px; display:flex; flex-direction:column; align-items:center; gap:6px; padding:10px; }
.badge--uptime small{ color:#6b7280; font:600 12px/1 Inter,system-ui; }

/* Circular uptime ring */
.badge--uptime .ring{
  width:74px; height:74px; border-radius:50%;
  background:
    conic-gradient(#22c55e 0 359deg, #e5e7eb 0 360deg),
    #fff;
  display:grid; place-items:center;
}
.badge--uptime .ring::after{
  content:""; width:58px; height:58px; background:#fff; border-radius:50%;
}
.badge--uptime .ring span{
  position:absolute; font:800 16px/1 Inter,system-ui; color:#111827;
}