:root{
  /* base background */
  --bg0:#0f071c;
  --bg1:#140a24;

  /* cards */
  --card:#1a1030cc;
  --card2:#1f1436cc;

  /* borders */
  --stroke:#3a2c5a;
  --stroke2:#5a3e8f;

  /* text */
  --text:#f2f7ff;
  --muted:#b7a7da;

  /* accents */
  --accent:#a970ff;
  --accent2:#7c4dff;

  /* UI */
  --shadow: 0 20px 60px rgba(0,0,0,.35);

  --r:14px;
  --r2:18px;

  --sidebarW:260px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font-family:"Manrope", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size:14px;
  line-height:1.45;
  letter-spacing:.01em;
  color:var(--text);

  background:
    radial-gradient(1100px 700px at 25% 5%, #4a2b88 0%, transparent 65%),
    radial-gradient(900px 500px at 75% 15%, #2a1a55 0%, transparent 65%),
    linear-gradient(180deg,#0f071c 0%, #140a24 40%, #140a24 100%);

  background-attachment:fixed;
  overflow-x:hidden;
}

.bg-glow{
  position:fixed;
  inset:-40px;
  pointer-events:none;
  background:
    radial-gradient(900px 420px at 30% 10%, rgba(169,112,255,.18), transparent 70%),
    radial-gradient(600px 320px at 70% 5%, rgba(179,136,255,.15), transparent 70%);
  filter:blur(8px);
  opacity:.9;
}

a{ color:inherit; text-decoration:none; }
button, input{ font:inherit; color:inherit; }
input{ outline:none; }

/* ===== Layout ===== */
.app{
  position:relative;
  display:grid;
  grid-template-columns:var(--sidebarW) 1fr;
  min-height:100vh;
  gap:18px;
  padding:18px;
}

.sidebar{
  position:sticky;
  top:18px;
  align-self:start;
  height:calc(100vh - 36px);
  border-radius:var(--r2);

  background:linear-gradient(180deg,#2a1a55,#140a24);
  border:1px solid var(--stroke);
  box-shadow:var(--shadow);

  padding:16px 14px;
  overflow:auto;

  /* Optional: make sidebar scrollbar a bit subtler */
  scrollbar-gutter:stable;
}

.main{
  min-width:0;
  padding-right:6px;
}

/* ===== Sidebar ===== */
.brand{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:6px 8px 12px;
  border-bottom:1px solid rgba(255,255,255,.06);
  margin-bottom:10px;
}

.brand__logo{
  font-weight:900;
  letter-spacing:.6px;
  font-size:20px;
  color:#b388ff;
  text-shadow:0 0 18px rgba(179,136,255,.35);
}

.brand__pill{
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(169,112,255,.25);
  background:rgba(20,10,36,.55);
  color:var(--muted);
  font-size:12px;
}

.nav{
  display:flex;
  flex-direction:column;
  gap:4px;
  margin:6px 0 14px;
}

.nav__item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 10px;
  border-radius:12px;
  color:var(--muted);
  border:1px solid transparent;
  transition:.15s ease;
}

.nav__item:hover{
  color:var(--text);
  background:rgba(169,112,255,.10);
  border-color:rgba(169,112,255,.20);
}

.nav__item.is-active{
  color:var(--text);
  background:linear-gradient(90deg, rgba(169,112,255,.18), rgba(169,112,255,.05));
  border-color:rgba(169,112,255,.25);
}

.ico{ width:16px; height:16px; display:inline-flex; }
.ico svg{ width:16px; height:16px; fill:currentColor; opacity:.95; }

/* ===== Topbar ===== */
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:10px 6px 14px;
}

.topbar__search{
  flex:1;
  max-width:560px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:999px;
  background:rgba(20,10,36,.6);
  border:1px solid rgba(255,255,255,.08);
}

.topbar__search input{
  flex:1;
  background:transparent;
  border:0;
  color:var(--text);
}

.topbar__search input::placeholder{ color:rgba(183,167,218,.7); }

.topbar__right{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:12px;
}

/* topbar link buttons */
.linkbtn{
  padding:10px 16px;
  border-radius:999px;
  background:rgba(20,10,36,.75);
  border:1px solid rgba(169,112,255,.22);

  display:inline-flex;
  align-items:center;
  gap:8px;

  font-weight:600;
}

.linkbtn:hover{
  background:rgba(169,112,255,.16);
  border-color:rgba(169,112,255,.40);
}

/* ===== Cards / Buttons ===== */
.card{
  border-radius:var(--r2);
  background:linear-gradient(180deg, rgba(20,10,36,.85), rgba(10,6,20,.55));
  border:1px solid var(--stroke);
  box-shadow:0 18px 60px rgba(0,0,0,.32);
}

.btn{
  border:0;
  cursor:pointer;
  border-radius:999px;
  padding:10px 16px;
  font-weight:800;
  letter-spacing:.2px;
}

.btn--primary{
  background:linear-gradient(180deg,#b388ff,#7c4dff);
  color:#fff;
  box-shadow:
    0 6px 18px rgba(124,77,255,.35),
    inset 0 1px 0 rgba(255,255,255,.25);
  transition:.15s;
}

.btn--primary:hover{
  transform:translateY(-1px);
  box-shadow:
    0 10px 28px rgba(124,77,255,.45),
    inset 0 1px 0 rgba(255,255,255,.25);
}

/* ===== Hero Row ===== */
.heroRow{
  display:grid;
  grid-template-columns:1fr 360px;
  gap:14px;
  align-items:stretch;
}

.hero{
  position:relative;
  overflow:hidden;
  padding:18px 18px;
  min-height:170px;

  display:grid;
  grid-template-columns:1.1fr 1fr; /* итоговое значение */
  gap:12px;
}

.hero__content{ padding:26px 32px; }

.hero__title{
  font-size:22px;
  font-weight:900;
  line-height:1.15;
}

.hero__sub{
  margin-top:10px;
  color:rgba(157,177,200,.85);
  max-width:520px;
  line-height:1.6;
}

.accent{
  color:#8fd2ff;
  text-shadow:0 0 16px rgba(143,210,255,.22);
}

.hero__actions{
  margin-top:20px;
  display:flex;
  gap:14px;
  align-items:center;
}

.hero__actions .btn{
  padding:12px 22px;
  font-size:15px;
}

.hero__art{
  position:relative;
  border-radius:14px;
  background:radial-gradient(700px 200px at 50% 70%, rgba(103,182,255,.20), rgba(0,0,0,0) 60%);
  display:flex;
  align-items:center;
  justify-content:center;
}

.hero__grid{
  position:absolute;
  inset:-40px -40px -30px -40px;
  background:
    linear-gradient(rgba(103,182,255,.16) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(90deg, rgba(103,182,255,.16) 1px, transparent 1px) 0 0 / 40px 40px;
  transform:perspective(600px) rotateX(65deg) translateY(22px);
  opacity:.35;
  mask-image:radial-gradient(300px 150px at 50% 55%, rgba(0,0,0,.95), transparent 70%);
}

.hero__img{
  position:relative;
  width:400px;
  height:290px;
}

.hero__img img{
  width:100%;
  height:100%;
  object-fit:contain;
  filter:
    drop-shadow(0 0 18px rgba(120,210,255,.35))
    drop-shadow(0 0 40px rgba(103,182,255,.20));
}

/* --- PATCH: hero banner size 715x308 --- */
.hero__img--banner{
  width:715px;
  height:308px;
  max-width:100%;
}

.hero__img--banner img{
  width:100%;
  height:100%;
  object-fit:cover; /* баннер */
  border-radius:14px;
}

/* ===== Stats ===== */
.statsCol{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.stat{
  padding:14px 14px;
  min-height:78px;
}

.stat__top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}

.stat__num{
  font-weight:950;
  font-size:18px;
}

.stat__thumb{
  width:74px;
  height:42px;
  border-radius:10px;
  background:
    radial-gradient(18px 18px at 30% 30%, rgba(255,255,255,.18), rgba(0,0,0,0) 70%),
    linear-gradient(135deg, rgba(103,182,255,.28), rgba(103,182,255,.08));
  border:1px solid rgba(255,255,255,.08);
  opacity:.9;
}

.stat__thumb.is-2{
  background:
    radial-gradient(18px 18px at 70% 35%, rgba(255,255,255,.18), rgba(0,0,0,0) 70%),
    linear-gradient(135deg, rgba(103,182,255,.22), rgba(103,182,255,.06));
}

/* --- PATCH: stat thumb as views badge --- */
.stat__thumb--views{
  width:86px; /* чуть шире под цифры */
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:950;
  letter-spacing:.2px;
  color:rgba(234,243,255,.95);
  text-shadow:0 0 14px rgba(143,210,255,.18);
}

.stat__text{
  margin-top:8px;
  color:rgba(157,177,200,.85);
  font-size:12.5px;
}

.stat__link{
  display:inline-block;
  margin-top:8px;
  color:rgba(143,210,255,.95);
  font-size:12.5px;
  opacity:.9;
}

.stat__link:hover{ opacity:1; }

/* ===== Mini searches ===== */
.miniSearch,
.projects__search{
  width:320px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:999px;
  background:rgba(7,14,24,.55);
  border:1px solid rgba(255,255,255,.08);
}

.miniSearch input,
.projects__search input{
  flex:1;
  background:transparent;
  border:0;
}

.miniSearch input::placeholder{ color:rgba(157,177,200,.7); }
.projects__search input{
  color:var(--text);
}
.projects__search input::placeholder{ color:rgba(157,177,200,.7); }

/* ===== Floating button ===== */
.fab{
  position:fixed;
  right:26px;
  bottom:26px;
  width:56px;
  height:56px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(11,23,38,.85);
  box-shadow:0 20px 60px rgba(0,0,0,.45);
  cursor:pointer;
  display:grid;
  place-items:center;
}

.fab svg{ width:22px; height:22px; fill:rgba(234,243,255,.92); }
.fab:hover{ border-color:rgba(103,182,255,.18); }

/* ===== Custom scrollbar (site-style) ===== */
/* Firefox */
*{
  scrollbar-width:thin;
  scrollbar-color:rgba(103,182,255,.35) rgba(7,14,24,.45);
}

/* Webkit (Chrome/Edge/Safari) */
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-track{
  background:rgba(7,14,24,.45);
  border-radius:999px;
}
*::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg, rgba(137,202,255,.55), rgba(74,156,255,.35));
  border-radius:999px;
  border:2px solid rgba(7,14,24,.65);
}
*::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg, rgba(137,202,255,.75), rgba(74,156,255,.50));
}

/* ===== Projects list (rows like screenshot) ===== */
.projects{
  margin-top:14px;
  padding:14px;
}

.projects__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:0 6px 12px;
  border-bottom:1px solid rgba(255,255,255,.06);
}

.projects__title{
  font-weight:900;
  color:rgba(157,177,200,.95);
}

.projects__body{
  padding:12px 6px 6px;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.pgroup__rows{
  display:flex;
  flex-direction:column;
  gap:14px; /* как в projects__body */
}

/* Group title like "GTA5:" */
.pgroup__title{
  margin:4px 0 8px;
  color:rgba(157,177,200,.85);
  font-weight:900;
  font-size:13px;
}

/* Single row card */
.prow{
  display:grid;
  grid-template-columns:420px 1fr 140px 160px 140px;
  gap:12px;
  align-items:center;

  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.06);
  background:rgba(6,12,20,.40);
}

.prow:hover{
  border-color:rgba(103,182,255,.16);
  background:rgba(6,12,20,.52);
}

.prow__left{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}

.prow__logo{
  width:34px;
  height:34px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(135deg, rgba(103,182,255,.18), rgba(103,182,255,.06));
  display:grid;
  place-items:center;
  flex:0 0 auto;
}

.prow__logo span{
  width:12px;
  height:12px;
  border-radius:50%;
  background:rgba(143,210,255,.95);
  box-shadow:0 0 16px rgba(143,210,255,.35);
}

/* ===== Project logo images ===== */
.prow__logoLink{
  width:34px;
  height:34px;
  border-radius:12px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(7,14,24,.35);
  display:block;
  flex:0 0 auto;
}

.prow__logoImg{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.prow__name{
  font-weight:600;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.prow__nameLink{
  text-decoration:none;
  display:inline-block;
}

.prow__nameLink:hover .prow__name{
  text-decoration:underline;
  text-decoration-color:rgba(143,210,255,.35);
}

.prow__sub{
  color:rgba(157,177,200,.75);
  font-size:12px;
  margin-top:2px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.prow__price{
  font-weight:900;
  white-space:nowrap;
}

.prow__status{
  font-weight:900;
  white-space:nowrap;
  color:rgba(89,255,167,.95);
}

.prow__btn{
  justify-self:end;
  padding:9px 14px;
}

/* ===== Price badge ===== */
.priceBadge{
  display:inline-flex;
  align-items:baseline;
  gap:8px;
  padding:8px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(7,14,24,.35);
  box-shadow:0 10px 26px rgba(0,0,0,.22);
  white-space:nowrap;
}

.priceBadge__left{
  font-weight:950;
  letter-spacing:.2px;
  color:rgba(234,243,255,.95);
}

.priceBadge__dash{
  opacity:.55;
  transform:translateY(-1px);
}

.priceBadge__right{
  font-weight:950;
  color:rgba(143,210,255,.95);
  text-shadow:0 0 16px rgba(143,210,255,.18);
}

.priceBadge__cur{ font-weight:900; opacity:.8; }

/* ===== Servers as clickable chips ===== */
.prow__servers{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  min-width:0;
  color:rgba(157,177,200,.9);
}

.srv{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(103,182,255,.06);
  color:rgba(157,177,200,.92);
  font-size:12px;
  font-weight:800;
  white-space:nowrap;
  transition:.12s ease;
  text-decoration:none;
}

.srv:hover{
  background:rgba(103,182,255,.12);
  border-color:rgba(103,182,255,.20);
  color:rgba(234,243,255,.95);
}

.srv--more{
  opacity:.85;
  border-style:dashed;
}
.srv--more:hover{ opacity:1; }

/* ===== Sidebar: projects + servers (compact, premium) ===== */
.side-projects{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:10px 6px 10px;
}

.pitem{
  display:flex;
  flex-direction:column;
  gap:6px;

  padding:10px 10px;
  border-radius:16px;

  border:1px solid rgba(255,255,255,.06);
  background:rgba(7,14,24,.22);
  transition:.14s ease;
}

.pitem:hover{
  border-color:rgba(103,182,255,.18);
  background:rgba(7,14,24,.32);
}

.pitem__top{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

.pitem__ico{
  width:28px;
  height:28px;
  border-radius:12px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(7,14,24,.35);
  flex:0 0 auto;
  box-shadow:0 0 18px rgba(103,182,255,.10);
}

.pitem__ico img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.pitem__name{
  font-weight:950;
  letter-spacing:.2px;
  color:rgba(234,243,255,.95);
  font-size:13px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.pitem__group{
  margin-left:auto;
  display:inline-flex;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
}

.pitem__badge{
  min-width:28px;
  height:22px;
  padding:0 10px;
  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(10,26,44,.35);

  font-size:11px;
  font-weight:950;
  color:rgba(157,177,200,.85);
}

.pitem__sub{
  font-size:11px;
  color:rgba(157,177,200,.70);
  margin-top:-6px;
}

.pitem__servers{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.psrv{
  display:inline-flex;
  align-items:center;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(103,182,255,.06);
  color:rgba(157,177,200,.92);
  font-size:11px;
  font-weight:800;
  white-space:nowrap;
  cursor:pointer;
  transition:.12s ease;
}

.psrv:hover{
  background:rgba(103,182,255,.12);
  border-color:rgba(103,182,255,.20);
  color:rgba(234,243,255,.95);
}

.psrv--more{
  opacity:.85;
  border-style:dashed;
}
.psrv--more:hover{ opacity:1; }

.pitem.is-active{
  border-color:rgba(103,182,255,.26);
  background:linear-gradient(90deg, rgba(103,182,255,.14), rgba(7,14,24,.28));
  box-shadow:0 12px 26px rgba(0,0,0,.22);
}

/* ===== Footer ===== */
.footer{
  margin-top:18px;
  padding:24px 22px 16px;
}

.footer__grid{
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr 1fr;
  gap:26px;
}

.footer__logo{
  font-size:18px;
  font-weight:900;
  color:#9ad0ff;
  text-shadow:0 0 18px rgba(103,182,255,.35);
  margin-bottom:8px;
}

.footer__text{
  color:rgba(157,177,200,.85);
  font-size:13px;
  max-width:280px;
  line-height:1.5;
}

.footer__col{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.footer__title{
  font-weight:900;
  font-size:13px;
  margin-bottom:4px;
  color:rgba(234,243,255,.95);
}

.footer__col a{
  font-size:13px;
  color:rgba(157,177,200,.85);
  transition:.15s;
}

.footer__col a:hover{ color:rgba(143,210,255,.95); }

.footer__bottom{
  margin-top:18px;
  padding-top:12px;
  border-top:1px solid rgba(255,255,255,.06);
  display:flex;
  justify-content:space-between;
  font-size:12px;
  color:rgba(157,177,200,.7);
}

.footer__muted{ opacity:.7; }


.servers{
  margin-top:16px;
  padding:22px;
}

.servers__title{
  font-size:20px;
  font-weight:900;
  margin-bottom:14px;
}

.servers__grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(160px,1fr));
  gap:10px;
}

.serverBtn{
  display:flex;
  justify-content:center;
  align-items:center;

  padding:10px 14px;
  border-radius:999px;

  background:rgba(169,112,255,.08);
  border:1px solid rgba(169,112,255,.25);

  font-weight:700;
  font-size:13px;
  transition:.15s;
}

.serverBtn:hover{
  background:rgba(169,112,255,.18);
  border-color:rgba(169,112,255,.45);
}

.seoBlock{
  margin-top:16px;
  padding:24px;
}

.seoBlock h2{
  font-size:20px;
  margin-bottom:10px;
}

.seoBlock p{
  color:var(--muted);
  max-width:760px;
  margin-bottom:8px;
}

/* ===== Responsive ===== */
@media (max-width:1200px){
  :root{ --sidebarW:240px; }

  .heroRow{ grid-template-columns:1fr; }
  .statsCol{ flex-direction:row; }

  .miniSearch,
  .projects__search{ width:260px; }

  .prow{
    grid-template-columns:360px 1fr 140px 160px 140px;
  }

  /* чтобы на мобилках не ломалось */
  .hero__img--banner{ width:100%; height:240px; }
}

@media (max-width:1000px){
  .footer__grid{
    grid-template-columns:1fr 1fr;
    gap:20px;
  }
}

@media (max-width:980px){
  .app{ grid-template-columns:1fr; }

  .sidebar{ position:relative; height:auto; }

  .topbar{ flex-direction:column; align-items:stretch; }
  .topbar__right{ justify-content:flex-end; }

  .toolbar{ flex-direction:column; align-items:stretch; }
  .toolbar__right{ display:flex; justify-content:flex-end; }

  .miniSearch,
  .projects__search{ width:100%; }

  .list__header, .row{ grid-template-columns:1fr; }
  .row .btn{ justify-self:start; }

  .projects__head{ flex-direction:column; align-items:stretch; }

  .prow{ grid-template-columns:1fr; }
  .prow__btn{ justify-self:start; }

  .hero{ grid-template-columns:1fr; }
  .hero__img--banner{ height:220px; }
}

@media (max-width:640px){
  .footer__grid{ grid-template-columns:1fr; }

  .footer__bottom{
    flex-direction:column;
    gap:4px;
  }
}

/* ===== Servers block: premium panel ===== */
.servers{
  padding:18px;
}

.servers__title{
  margin-bottom:12px;
  font-size:18px;
}

/* внутренняя панель под чипсы */
.servers__grid{
  padding:14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(600px 220px at 20% 0%, rgba(169,112,255,.14), transparent 60%),
    rgba(7,14,24,.22);
  box-shadow: 0 12px 35px rgba(0,0,0,.25);

  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(140px, 1fr));
  gap:10px;
}

/* server chips */
.serverBtn{
  position:relative;
  padding:10px 14px;
  border-radius:999px;

  background:rgba(169,112,255,.06);
  border:1px solid rgba(169,112,255,.22);

  font-weight:800;
  font-size:13px;

  transition:transform .12s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease;
}

.serverBtn:hover{
  transform:translateY(-1px);
  background:rgba(169,112,255,.14);
  border-color:rgba(169,112,255,.45);
  box-shadow:0 10px 22px rgba(124,77,255,.20);
}

/* красивый "блик" */
.serverBtn::after{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:999px;
  background:linear-gradient(180deg, rgba(255,255,255,.14), transparent 55%);
  opacity:.35;
  pointer-events:none;
}

/* фокус для клавиатуры */
.serverBtn:focus-visible{
  outline:none;
  border-color:rgba(143,210,255,.55);
  box-shadow:0 0 0 3px rgba(143,210,255,.18);
}

/* ===== PROJECT PAGE: HERO v2 ===== */
.projectHero{
  display:grid;
  grid-template-columns: 1.15fr 220px .85fr; /* текст | ссылки | фото */
  gap:18px;
  padding:18px;
  align-items:center;
}

.projectHero__title{
  font-size:26px;
  font-weight:900;
  line-height:1.2;
  margin-bottom:10px;
}

.projectHero__text{
  color:var(--muted);
  max-width:560px;
  margin-bottom:8px;
}

/* center links column */
.projectHero__links{
  display:flex;
  flex-direction:column;
  gap:12px;
  align-items:stretch;
  justify-content:center;
  padding:10px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.06);
  background:rgba(7,14,24,.18);
}

/* ===== Telegram link buttons (premium) ===== */

.tgLink{
  position:relative;
  display:flex;
  align-items:center;
  gap:12px;

  padding:12px 14px;
  border-radius:16px;

  border:1px solid rgba(143,210,255,.18);

  background:
    radial-gradient(500px 180px at 20% 0%, rgba(103,182,255,.12), transparent 60%),
    rgba(103,182,255,.05);

  box-shadow:0 12px 32px rgba(0,0,0,.22);

  transition:
    transform .14s ease,
    border-color .14s ease,
    background .14s ease,
    box-shadow .14s ease;
}

/* верхний блик */
.tgLink::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
  opacity:.6;
}

/* hover */
.tgLink:hover{
  transform:translateY(-2px);
  border-color:rgba(143,210,255,.40);

  background:
    radial-gradient(500px 180px at 20% 0%, rgba(103,182,255,.18), transparent 60%),
    rgba(103,182,255,.10);

  box-shadow:
    0 18px 48px rgba(0,0,0,.30),
    0 0 30px rgba(103,182,255,.18);
}

/* мягкая версия (канал отзывов) */
.tgLink--soft{
  border-color:rgba(169,112,255,.22);

  background:
    radial-gradient(500px 180px at 20% 0%, rgba(169,112,255,.14), transparent 60%),
    rgba(169,112,255,.06);
}

.tgLink--soft:hover{
  border-color:rgba(169,112,255,.42);

  background:
    radial-gradient(500px 180px at 20% 0%, rgba(169,112,255,.20), transparent 60%),
    rgba(169,112,255,.10);

  box-shadow:
    0 18px 48px rgba(0,0,0,.30),
    0 0 30px rgba(169,112,255,.18);
}

/* иконка */
.tgLink__ico{
  width:36px;
  height:36px;
  border-radius:12px;

  display:grid;
  place-items:center;

  border:1px solid rgba(255,255,255,.12);

  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.14), transparent 70%),
    rgba(20,10,36,.55);

  box-shadow:0 0 18px rgba(103,182,255,.10);

  flex:0 0 auto;
}

.tgLink__ico svg{
  width:18px;
  height:18px;
  fill:rgba(234,243,255,.95);
}

/* текст */
.tgLink__txt{
  display:flex;
  flex-direction:column;
  line-height:1.1;
}

.tgLink__title{
  font-weight:900;
  letter-spacing:.15px;
  color:rgba(234,243,255,.96);
  font-size:13px;
}

.tgLink__sub{
  margin-top:4px;
  font-size:11.5px;
  color:rgba(157,177,200,.80);
}

.projectHero__links{
  display:flex;
  gap:12px;
  margin-top:14px;
}

.seoBlock__side{
  display:flex;
  justify-content:flex-start; /* сдвигает кнопку влево */
}



/* image: smaller, not stretching */
.projectHero__image{
  align-self:center;
  justify-self:end;
  width:100%;
  max-width:520px;
}

.projectHero__image img{
  width:100%;
  height:auto;
  max-height:220px;
  object-fit:cover;
  border-radius:16px;
  display:block;
  box-shadow:
    0 18px 55px rgba(0,0,0,.35),
    0 0 40px rgba(169,112,255,.12);
}

/* responsive */
@media (max-width:980px){
  .projectHero{
    grid-template-columns:1fr;
  }
  .projectHero__links{
    order:3; /* можно сделать после картинки или до — как хочешь */
  }
  .projectHero__image{
    justify-self:stretch;
    max-width:100%;
  }
  .projectHero__image img{
    max-height:200px;
  }
}

/* ===== Projects list: premium rows ===== */

/* общий контейнер чуть “карточнее” */
.projects{
  padding:16px;
  border-radius:18px;
}

/* заголовок секции */
.projects__head{
  padding:2px 6px 14px;
  border-bottom:1px solid rgba(255,255,255,.07);
}

.projects__title{
  font-size:13px;
  letter-spacing:.2px;
  text-transform:uppercase;
  color:rgba(157,177,200,.92);
}

/* группы */
.pgroup__title{
  margin:10px 0 10px;
  display:flex;
  align-items:center;
  gap:10px;
  font-size:12px;
  letter-spacing:.25px;
  text-transform:uppercase;
  color:rgba(157,177,200,.82);
}

.pgroup__title::before{
  content:"";
  width:10px;
  height:10px;
  border-radius:50%;
  background:rgba(169,112,255,.95);
  box-shadow:0 0 18px rgba(169,112,255,.35);
  flex:0 0 auto;
}

/* строка проекта */
.prow{
  position:relative;
  overflow:hidden;

  border-radius:16px;
  border:1px solid rgba(255,255,255,.07);

  /* вместо плоского фона — “слой” */
  background:
    radial-gradient(700px 260px at 20% 0%, rgba(169,112,255,.10), transparent 55%),
    radial-gradient(600px 220px at 80% 10%, rgba(103,182,255,.08), transparent 55%),
    rgba(6,12,20,.38);

  box-shadow:0 14px 40px rgba(0,0,0,.22);
  transition:transform .14s ease, border-color .14s ease, background .14s ease, box-shadow .14s ease;
}

/* тонкий “блик” сверху */
.prow::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  opacity:.55;
  pointer-events:none;
}

.prow:hover{
  transform:translateY(-1px);
  border-color:rgba(169,112,255,.18);
  box-shadow:0 18px 55px rgba(0,0,0,.28);
  background:
    radial-gradient(700px 260px at 20% 0%, rgba(169,112,255,.14), transparent 55%),
    radial-gradient(600px 220px at 80% 10%, rgba(103,182,255,.10), transparent 55%),
    rgba(6,12,20,.46);
}

/* логотип — чуть “стекляннее” */
.prow__logoLink{
  border-color:rgba(255,255,255,.12);
  background:rgba(7,14,24,.40);
  box-shadow:0 0 20px rgba(103,182,255,.10);
}

/* имя — чуть сильнее, суб — спокойнее */
.prow__name{
  font-weight:800;
  letter-spacing:.1px;
}

.prow__sub{
  color:rgba(157,177,200,.68);
}

/* чипы серверов — более “кликабельные” */
.srv{
  padding:6px 11px;
  border:1px solid rgba(143,210,255,.14);
  background:
    linear-gradient(180deg, rgba(103,182,255,.08), rgba(103,182,255,.03));
  color:rgba(200,215,235,.92);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  transition:transform .12s ease, background .12s ease, border-color .12s ease, color .12s ease, box-shadow .12s ease;
}

.srv:hover{
  transform:translateY(-1px);
  background:
    linear-gradient(180deg, rgba(103,182,255,.14), rgba(103,182,255,.06));
  border-color:rgba(143,210,255,.28);
  color:rgba(234,243,255,.96);
  box-shadow:
    0 10px 22px rgba(103,182,255,.14),
    inset 0 1px 0 rgba(255,255,255,.10);
}

.srv--more{
  border-style:dashed;
  opacity:.9;
}

/* статус: чуть “бейджем” (без изменения текста) */
.prow__status{
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(89,255,167,.18);
  background:rgba(89,255,167,.06);
  justify-self:start;
}

/* если есть класс для отсутствия (ты в JS ставишь is-off) */
.prow__status.is-off{
  color:rgba(255,140,140,.92);
  border-color:rgba(255,140,140,.18);
  background:rgba(255,140,140,.06);
}

/* кнопка “Выбрать” — чуть компактнее, но заметнее */
.prow__btn{
  padding:10px 16px;
  border-radius:999px;
}

/* мобилка: чтобы не было “слишком жирно” */
@media (max-width:980px){
  .projects{ padding:14px; }
  .prow{ padding:12px 12px; }
  .srv{ padding:6px 10px; }
}

/* ===== SEO block layout ===== */

.seoBlock__content{
  display:grid;
  grid-template-columns: 1fr 240px;
  gap:30px;
  align-items:center;
}

.seoBlock__text{
  max-width:720px;
}

/* ===== Telegram button ===== */

.seoTelegram{
  display:flex;
  align-items:center;
  gap:12px;

  padding:14px 18px;
  border-radius:16px;

  border:1px solid rgba(143,210,255,.25);
  background:rgba(143,210,255,.08);

  transition:.15s ease;
}

.seoTelegram:hover{
  transform:translateY(-2px);
  border-color:rgba(143,210,255,.45);
  background:rgba(143,210,255,.15);
  box-shadow:0 12px 28px rgba(103,182,255,.18);
}

.seoTelegram__icon{
  width:36px;
  height:36px;
  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:10px;
  background:rgba(143,210,255,.18);
}

.seoTelegram__icon svg{
  width:18px;
  height:18px;
  fill:#8fd2ff;
}

.seoTelegram__text{
  font-weight:800;
  line-height:1.2;
}

.seoTelegram__text small{
  display:block;
  font-weight:600;
  color:rgba(157,177,200,.8);
}

/* mobile */

@media (max-width:900px){
  .seoBlock__content{
    grid-template-columns:1fr;
    gap:18px;
  }

  .seoTelegram{
    width:100%;
    justify-content:center;
  }
}

.lots{
  display:flex;
  flex-wrap:nowrap;
  gap:14px;
  overflow-x:auto;
  padding:14px 2px 6px;
  -webkit-overflow-scrolling:touch;
  overflow:hidden;       /* прячем возможный скролл */
}

/* карточки автоматически делят ширину контейнера */
.lots > .lotCard{
  flex:1 1 0;            /* все одинаковой ширины */
  min-width:180px;       /* нижняя граница */
  max-width:240px;       /* верхняя граница */
}

/* если экран уже узкий — лучше перенос, чем скролл */
@media (max-width:1100px){
  .lots{
    flex-wrap:wrap;
    overflow:visible;
  }
  .lots > .lotCard{
    flex:1 1 220px;      /* 2-3 в ряд */
    max-width:none;
  }
}

.lots{
  display:flex;
  flex-wrap:nowrap;
  gap:14px;
  overflow-x:auto;
  padding:14px 2px 6px;
  -webkit-overflow-scrolling:touch;
  overflow:hidden;
}

/* карточки автоматически делят ширину контейнера */
.lots > .lotCard{
  flex:1 1 0;
  min-width:180px;
  max-width:240px;
}

/* если экран уже узкий — лучше перенос, чем скролл */
@media (max-width:1100px){
  .lots{
    flex-wrap:wrap;
    overflow:visible;
  }
  .lots > .lotCard{
    flex:1 1 220px;
    max-width:none;
  }
}

/* базовая карточка */
.lotCard{
  flex:0 0 250px;
  min-width:250px;
  max-width:250px;

  border-radius:16px;
  padding:14px;

  border:1px solid rgba(169,112,255,.28);

  background:
    linear-gradient(180deg,
      rgba(169,112,255,.14),
      rgba(20,10,36,.65)
    );

  color:inherit;
  text-decoration:none;

  display:flex;
  flex-direction:column;
  justify-content:space-between;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 10px 28px rgba(0,0,0,.28);

  transition:
    transform .14s ease,
    border-color .14s ease,
    box-shadow .14s ease,
    background .14s ease;
}

/* hover */
.lotCard:hover{
  transform:translateY(-3px);

  border-color:rgba(169,112,255,.55);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 16px 40px rgba(0,0,0,.35),
    0 0 18px rgba(169,112,255,.25);
}

/* PRO лоты (дороже) */
.lotCard--pro{
  border-color:rgba(255,210,120,.45);

  background:
    linear-gradient(180deg,
      rgba(255,210,120,.22),
      rgba(28,16,10,.65)
    );
}

.lotCard--pro:hover{
  border-color:rgba(255,210,120,.75);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 18px 44px rgba(0,0,0,.35),
    0 0 22px rgba(255,210,120,.35);
}

/* кастомный лот (telegram) */
.lotCard--custom{
  border-color:rgba(143,210,255,.40);

  background:
    linear-gradient(180deg,
      rgba(143,210,255,.22),
      rgba(10,20,36,.65)
    );
}

.lotCard--custom:hover{
  border-color:rgba(143,210,255,.65);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 18px 40px rgba(0,0,0,.35),
    0 0 22px rgba(143,210,255,.35);
}

.lotCard__top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}

.lotCard__amount{
  font-weight:950;
  font-size:18px;
}

.lotCard__sub{
  margin-top:6px;
  color:rgba(157,177,200,.80);
  font-size:12px;
}

.lotCard__price{
  margin-top:12px;
  font-weight:950;
  font-size:16px;
}

/* бейдж */
.lotCard__tag{
  height:24px;
  padding:0 10px;
  border-radius:999px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  font-size:11px;
  font-weight:950;

  background:rgba(137,202,255,.92);
  color:#0c1a26;

  box-shadow:0 4px 12px rgba(0,0,0,.25);
}

/* бейджи */
.lotCard__tag--pro{
  background:rgba(255,210,120,.95);
}

.lotCard__tag--tg{
  background:rgba(143,210,255,.95);
}

/* ===== SIDEBAR UI FIX ===== */

.sidebar{
  position:sticky;
  top:18px;
  align-self:start;
  height:calc(100vh - 36px);
  border-radius:20px;
  padding:16px 14px;
  overflow:auto;
  scrollbar-gutter:stable;

  border:1px solid rgba(255,255,255,.08);

  background:
    radial-gradient(700px 240px at 15% 0%, rgba(169,112,255,.16), transparent 58%),
    radial-gradient(520px 220px at 85% 10%, rgba(103,182,255,.08), transparent 60%),
    linear-gradient(180deg, rgba(31,20,54,.92), rgba(15,7,28,.92));

  box-shadow:
    0 18px 60px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.05);
}

.sidebar::before{
  content:"";
  position:absolute;
  left:14px;
  right:14px;
  top:0;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  opacity:.7;
  pointer-events:none;
}

.brand{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:4px 6px 14px;
  margin-bottom:12px;
  border-bottom:1px solid rgba(255,255,255,.07);
}

.brand__logo{
  font-weight:900;
  letter-spacing:.4px;
  font-size:18px;
  color:#bfa7ff;
  text-shadow:0 0 18px rgba(169,112,255,.22);
}

.brand__pill{
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
  color:rgba(214,224,240,.78);
  font-size:12px;
  font-weight:700;
  backdrop-filter:blur(8px);
}

.nav{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin:4px 0 16px;
}

.nav__item{
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
  min-height:46px;
  padding:0 12px;
  border-radius:14px;

  color:rgba(214,224,240,.78);
  font-weight:700;
  font-size:14px;
  letter-spacing:0;

  border:1px solid transparent;
  background:transparent;

  transition:
    transform .12s ease,
    color .12s ease,
    border-color .12s ease,
    background .12s ease,
    box-shadow .12s ease;
}

.nav__item:hover{
  transform:translateY(-1px);
  color:rgba(242,247,255,.96);
  border-color:rgba(255,255,255,.08);

  background:
    radial-gradient(260px 100px at 10% 0%, rgba(169,112,255,.14), transparent 65%),
    rgba(255,255,255,.035);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 10px 24px rgba(0,0,0,.18);
}

.nav__item.is-active{
  color:#fff;
  border-color:rgba(169,112,255,.24);

  background:
    radial-gradient(280px 110px at 0% 0%, rgba(169,112,255,.22), transparent 65%),
    linear-gradient(90deg, rgba(169,112,255,.14), rgba(103,182,255,.06));

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 12px 26px rgba(0,0,0,.20);
}

.nav__item.is-active::before{
  content:"";
  position:absolute;
  left:0;
  top:10px;
  bottom:10px;
  width:3px;
  border-radius:999px;
  background:linear-gradient(180deg, #c59cff, #7c4dff);
  box-shadow:0 0 14px rgba(169,112,255,.45);
}

.ico{
  width:18px;
  height:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:inherit;
  opacity:.95;
  flex:0 0 auto;
}

.ico svg{
  width:18px;
  height:18px;
  fill:currentColor;
}

.side-projects{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:12px 4px 6px;
  border-top:1px solid rgba(255,255,255,.05);
}

/* чуть ближе к карточкам справа */
.pitem{
  padding:10px 10px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.07);

  background:
    radial-gradient(260px 90px at 15% 0%, rgba(169,112,255,.10), transparent 65%),
    rgba(255,255,255,.025);

  box-shadow:0 10px 26px rgba(0,0,0,.16);
}

.pitem:hover{
  border-color:rgba(169,112,255,.16);
  background:
    radial-gradient(260px 90px at 15% 0%, rgba(169,112,255,.14), transparent 65%),
    rgba(255,255,255,.04);
}

.pitem__name{
  font-weight:800;
  font-size:13px;
  color:rgba(242,247,255,.94);
}

.pitem__badge{
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
  color:rgba(214,224,240,.78);
}

.psrv{
  padding:5px 9px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);

  background:
    linear-gradient(180deg, rgba(169,112,255,.10), rgba(103,182,255,.04));

  color:rgba(214,224,240,.82);
}

.psrv:hover{
  border-color:rgba(169,112,255,.22);
  background:
    linear-gradient(180deg, rgba(169,112,255,.16), rgba(103,182,255,.08));
  color:#fff;
}

.servers__head{
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom:20px;
}

/* кнопка возврата */
.servers__back{
  display:inline-flex;
  align-items:center;
  gap:6px;

  padding:6px 12px;

  font-size:12.5px;
  font-weight:700;

  border-radius:999px;

  color:rgba(200,180,255,.95);
  text-decoration:none;

  border:1px solid rgba(169,112,255,.25);
  background:rgba(169,112,255,.06);

  transition:.18s ease;
}

/* hover */
.servers__back:hover{
  background:rgba(169,112,255,.16);
  border-color:rgba(169,112,255,.45);
  color:white;

  transform:translateY(-1px);
}

/* небольшой glow */
.servers__back:active{
  transform:translateY(0);
}

.brand__logo{
  font-weight:900;
  letter-spacing:.8px;
  font-size:20px;

  color:#caa6ff;

  text-decoration:none;
  display:inline-block;

  text-shadow:
    0 0 8px rgba(169,112,255,.45),
    0 0 18px rgba(169,112,255,.35),
    0 0 32px rgba(124,77,255,.25);

  transition:.18s ease;
}

.brand__logo:hover{
  color:#e3c9ff;

  text-shadow:
    0 0 10px rgba(169,112,255,.6),
    0 0 26px rgba(169,112,255,.45),
    0 0 50px rgba(124,77,255,.35);

  transform:translateY(-1px);
}

/* ===== Topbar improved ===== */

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding: 8px 6px 16px;
}

.topbar__searchWrap{
  flex:1;
  min-width:0;
}

.topbar__search{
  width:100%;
  max-width:680px;
  display:flex;
  align-items:center;
  gap:10px;

  padding: 8px 10px 8px 14px;
  border-radius: 18px;

  background:
    linear-gradient(180deg, rgba(31,16,54,.88), rgba(18,9,34,.82));
  border:1px solid rgba(169,112,255,.18);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 10px 30px rgba(0,0,0,.18),
    0 0 0 1px rgba(169,112,255,.04);
  transition:.18s ease;
}

.topbar__search:focus-within{
  border-color: rgba(169,112,255,.38);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 14px 34px rgba(0,0,0,.22),
    0 0 0 4px rgba(169,112,255,.08);
}

.topbar__searchIco{
  color: rgba(202,166,255,.82);
  flex: 0 0 auto;
}

.topbar__search input{
  flex:1;
  min-width:0;
  background: transparent;
  border:0;
  color: var(--text);
  font-size: 14px;
}

.topbar__search input::placeholder{
  color: rgba(183,167,218,.72);
}

.topbar__searchBtn{
  border:1px solid rgba(169,112,255,.20);
  background: rgba(169,112,255,.10);
  color: rgba(243,237,255,.96);

  height: 38px;
  padding: 0 14px;
  border-radius: 12px;

  font-weight: 800;
  cursor:pointer;
  transition:.16s ease;
  flex: 0 0 auto;
}

.topbar__searchBtn:hover{
  background: rgba(169,112,255,.18);
  border-color: rgba(169,112,255,.36);
}

.topbar__right{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:12px;
  flex-wrap:nowrap;
}

.linkbtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;

  min-height: 44px;
  padding: 0 16px;
  border-radius: 14px;

  background: rgba(20,10,36,.68);
  border:1px solid rgba(169,112,255,.18);
  color: var(--text);

  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  transition:.16s ease;
}

.linkbtn:hover{
  background: rgba(169,112,255,.14);
  border-color: rgba(169,112,255,.34);
  transform: translateY(-1px);
}

.topbar__cta{
  min-height: 44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 0 18px;
}

/* responsive */
@media (max-width: 1180px){
  .topbar{
    flex-direction:column;
    align-items:stretch;
  }

  .topbar__search{
    max-width:none;
  }

  .topbar__right{
    justify-content:flex-end;
  }
}

@media (max-width: 720px){
  .topbar__right{
    flex-wrap:wrap;
  }

  .topbar__searchBtn{
    display:none;
  }
}

.termsIntro{
  max-width: 1120px;
  margin: 0 auto 14px;
  padding: 18px 22px;
}

.termsArticle{
  max-width: 1120px;
  margin: 0 auto;
  padding: 0;
}

.termsArticle__content{
  max-width: 100%;
  padding: 26px 28px 28px;
}

.termsArticle__content p{
  margin: 0 0 14px;
  color: var(--muted);
  line-height: 1.7;
}

.termsArticle__content h2{
  margin: 26px 0 10px;
  font-size: 22px;
  font-weight: 900;
  line-height: 1.25;
}

.termsArticle__list{
  margin: 0 0 16px 18px;
  padding: 0;
  color: var(--muted);
}

.termsArticle__list li{
  margin-bottom: 8px;
}

.termsArticle__support{
  margin-top: 22px;
  display: flex;
  justify-content: flex-start;
}

/* ===== Reviews page ===== */

.reviewsHero{
  display:grid;
  grid-template-columns: 1fr 320px;
  gap:18px;
  padding:22px;
  align-items:start;
}

.reviewsHero__meta{
  display:inline-flex;
  align-items:center;
  height:28px;
  padding:0 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  color:rgba(200,180,255,.92);
  border:1px solid rgba(169,112,255,.22);
  background:rgba(169,112,255,.08);
  margin-bottom:12px;
}

.reviewsHero__title{
  margin:0 0 10px;
  font-size:34px;
  font-weight:900;
  line-height:1.15;
}

.reviewsHero__text{
  margin:0;
  max-width:860px;
  color:var(--muted);
  line-height:1.75;
}

.reviewsHero__stats{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:18px;
}

.reviewsHeroStat{
  min-width:120px;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(280px 90px at 10% 0%, rgba(169,112,255,.10), transparent 70%),
    rgba(255,255,255,.025);
}

.reviewsHeroStat__num{
  font-size:18px;
  font-weight:950;
  color:rgba(242,247,255,.95);
}

.reviewsHeroStat__label{
  margin-top:4px;
  font-size:12px;
  color:rgba(183,167,218,.78);
}

.reviewsHero__side{
  display:flex;
  flex-direction:column;
  gap:12px;
}

/* board */
.reviewsBoard{
  margin-top:16px;
  padding:18px;
}

.reviewsBoard__head{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:14px;
  padding:2px 4px 14px;
  border-bottom:1px solid rgba(255,255,255,.07);
}

.reviewsBoard__title{
  margin:0;
  font-size:22px;
  font-weight:900;
}

.reviewsBoard__hint{
  color:rgba(183,167,218,.75);
  font-size:13px;
}

.reviewsGrid{
  margin-top:16px;
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:14px;
}

.reviewCard{
  padding:16px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.07);

  background:
    radial-gradient(260px 90px at 15% 0%, rgba(169,112,255,.10), transparent 65%),
    rgba(255,255,255,.025);

  box-shadow:0 10px 26px rgba(0,0,0,.16);
  transition:.14s ease;
}

.reviewCard:hover{
  transform:translateY(-2px);
  border-color:rgba(169,112,255,.18);
  background:
    radial-gradient(260px 90px at 15% 0%, rgba(169,112,255,.14), transparent 65%),
    rgba(255,255,255,.04);
}

.reviewCard__top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}

.reviewCard__name{
  font-weight:900;
  font-size:16px;
  color:rgba(242,247,255,.95);
}

.reviewCard__meta{
  margin-top:4px;
  font-size:12px;
  color:rgba(183,167,218,.72);
}

.reviewCard__badge{
  flex:0 0 auto;
  height:24px;
  padding:0 10px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  font-weight:900;
  color:#0c1a26;
  background:rgba(137,202,255,.92);
}

.reviewCard__badge--buy{
  background:rgba(255,210,120,.95);
}

.reviewCard__text{
  margin:14px 0 0;
  color:var(--muted);
  line-height:1.65;
}

.reviewCard__bottom{
  margin-top:14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.reviewCard__rating{
  font-size:14px;
  letter-spacing:1px;
  color:rgba(255,210,120,.98);
}

.reviewCard__date{
  font-size:12px;
  color:rgba(183,167,218,.72);
}

/* seo */
.reviewsSeo{
  margin-top:16px;
  padding:22px;
}

.reviewsSeo__content{
  display:grid;
  grid-template-columns: 1fr 240px;
  gap:28px;
  align-items:center;
}

.reviewsSeo__text h2{
  margin:0 0 10px;
  font-size:22px;
  font-weight:900;
}

.reviewsSeo__text p{
  margin:0 0 12px;
  max-width:820px;
  color:var(--muted);
  line-height:1.7;
}

.reviewsSeo__side{
  display:flex;
  justify-content:flex-start;
}

@media (max-width: 1200px){
  .reviewsGrid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 980px){
  .reviewsHero{
    grid-template-columns:1fr;
  }

  .reviewsGrid{
    grid-template-columns:1fr;
  }

  .reviewsSeo__content{
    grid-template-columns:1fr;
    gap:18px;
  }

  .reviewsBoard__head{
    flex-direction:column;
    align-items:flex-start;
  }
}

/* ===== Articles page ===== */

.articlesHero{
  display:grid;
  grid-template-columns: 1fr 280px;
  gap:18px;
  padding:22px;
  align-items:start;
}

.articlesHero__meta{
  display:inline-flex;
  align-items:center;
  height:28px;
  padding:0 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  color:rgba(200,180,255,.92);
  border:1px solid rgba(169,112,255,.22);
  background:rgba(169,112,255,.08);
  margin-bottom:12px;
}

.articlesHero__title{
  margin:0 0 10px;
  font-size:34px;
  font-weight:900;
  line-height:1.15;
}

.articlesHero__text{
  margin:0;
  max-width:860px;
  color:var(--muted);
  line-height:1.75;
}

.articlesHero__side{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.articlesGrid{
  margin-top:16px;
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:16px;
}

.articleCard{
  padding:20px;
}

.articleCard__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}

.articleCard__badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:26px;
  padding:0 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  color:#0c1a26;
  background:rgba(137,202,255,.92);
}

.articleCard__badge--sell{
  background:rgba(255,210,120,.95);
}

.articleCard__date{
  font-size:12px;
  color:rgba(183,167,218,.72);
}

.articleCard__title{
  margin:0 0 10px;
  font-size:28px;
  font-weight:900;
  line-height:1.2;
}

.articleCard__lead{
  margin:0 0 16px;
  color:var(--muted);
  line-height:1.7;
}

.articleCard__content h3{
  margin:18px 0 8px;
  font-size:18px;
  font-weight:900;
}

.articleCard__content p{
  margin:0 0 12px;
  color:var(--muted);
  line-height:1.7;
}

.articleCard__link{
  display:inline-flex;
  align-items:center;
  margin-top:10px;
  font-weight:800;
  color:rgba(143,210,255,.95);
}

.articleCard__link:hover{
  text-decoration:underline;
}

.articlesSeo{
  margin-top:16px;
  padding:22px;
}

.articlesSeo__content{
  display:grid;
  grid-template-columns: 1fr 240px;
  gap:28px;
  align-items:center;
}

.articlesSeo__text h2{
  margin:0 0 10px;
  font-size:22px;
  font-weight:900;
}

.articlesSeo__text p{
  margin:0 0 12px;
  max-width:820px;
  color:var(--muted);
  line-height:1.7;
}

.articlesSeo__side{
  display:flex;
  justify-content:flex-start;
}

@media (max-width: 980px){
  .articlesHero{
    grid-template-columns:1fr;
  }

  .articlesGrid{
    grid-template-columns:1fr;
  }

  .articlesSeo__content{
    grid-template-columns:1fr;
    gap:18px;
  }
}

/* ===== Article page ===== */

.articleHero{
  display:grid;
  grid-template-columns:1fr 280px;
  gap:20px;
  padding:24px;
  align-items:start;
}

.articleHero__meta{
  display:inline-flex;
  align-items:center;
  height:28px;
  padding:0 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  color:rgba(200,180,255,.92);
  border:1px solid rgba(169,112,255,.22);
  background:rgba(169,112,255,.08);
  margin-bottom:12px;
}

.articleHero__title{
  margin:0 0 10px;
  font-size:36px;
  font-weight:900;
  line-height:1.12;
}

.articleHero__lead{
  margin:0;
  max-width:860px;
  color:var(--muted);
  line-height:1.75;
}

.articleContent{
  margin-top:16px;
  padding:24px;
}

.articleContent h2{
  margin:0 0 12px;
  font-size:26px;
  font-weight:900;
  line-height:1.2;
}

.articleContent h3{
  margin:20px 0 8px;
  font-size:18px;
  font-weight:900;
  line-height:1.3;
}

.articleContent p{
  margin:0 0 12px;
  color:var(--muted);
  line-height:1.75;
}

/* ===== Price table ===== */

.priceTable{
  margin-top:14px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.priceRow{
  display:grid;
  grid-template-columns: minmax(220px, 1.4fr) minmax(140px, .7fr) minmax(120px, .6fr);
  align-items:center;
  gap:16px;

  padding:14px 18px;
  border-radius:14px;

  border:1px solid rgba(255,255,255,.08);

  background:
    radial-gradient(400px 120px at 15% 0%, rgba(169,112,255,.10), transparent 65%),
    rgba(255,255,255,.025);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 10px 24px rgba(0,0,0,.16);

  transition:.14s ease;
}

.priceRow:hover{
  transform:translateY(-1px);
  border-color:rgba(169,112,255,.18);
  background:
    radial-gradient(400px 120px at 15% 0%, rgba(169,112,255,.14), transparent 65%),
    rgba(255,255,255,.04);
}

.priceProject{
  font-weight:900;
  font-size:15px;
  color:rgba(242,247,255,.96);
}

.priceAmount{
  text-align:center;
  font-weight:700;
  color:rgba(183,167,218,.88);
  letter-spacing:.2px;
}

.pricePrice{
  text-align:right;
  font-weight:950;
  font-size:16px;
  color:#8fd2ff;
  text-shadow:0 0 14px rgba(143,210,255,.14);
}

/* ===== Step list ===== */

.stepList{
  margin-top:14px;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.stepItem{
  display:flex;
  gap:14px;
  align-items:flex-start;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.07);
  background:rgba(255,255,255,.025);
}

.stepNum{
  width:30px;
  height:30px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(180deg,#b388ff,#7c4dff);
  color:#fff;
  font-weight:900;
  flex:0 0 auto;
  box-shadow:0 8px 18px rgba(124,77,255,.28);
}

.stepText{
  color:var(--muted);
  line-height:1.65;
  padding-top:2px;
}

/* ===== List ===== */

.articleList{
  margin:12px 0 0 18px;
  padding:0;
  color:var(--muted);
}

.articleList li{
  margin-bottom:8px;
}

/* ===== CTA ===== */

.articleCTA{
  margin-top:16px;
  padding:28px;
  text-align:center;
  background:
    radial-gradient(520px 180px at 50% 0%, rgba(169,112,255,.14), transparent 65%),
    linear-gradient(180deg, rgba(20,10,36,.85), rgba(10,6,20,.55));
}

.articleCTA h2{
  margin:0 0 8px;
  font-size:28px;
  font-weight:900;
}

.articleCTA p{
  margin:0 0 16px;
  color:var(--muted);
  line-height:1.7;
}

/* ===== Responsive ===== */

@media (max-width:980px){
  .articleHero{
    grid-template-columns:1fr;
  }

  .priceRow{
    grid-template-columns:1fr;
    gap:6px;
  }

  .priceAmount,
  .pricePrice{
    text-align:left;
  }
}
/* ===== Articles page additions ===== */

.articlesHero__links{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:18px;
}

.articleQuickLink{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:34px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid rgba(169,112,255,.20);
  background:rgba(169,112,255,.08);
  color:rgba(234,243,255,.92);
  font-size:12px;
  font-weight:800;
  transition:.14s ease;
}

.articleQuickLink:hover{
  transform:translateY(-1px);
  border-color:rgba(169,112,255,.40);
  background:rgba(169,112,255,.16);
}

.articleCard__content a{
  color:rgba(143,210,255,.95);
  text-decoration:none;
  font-weight:700;
  border-bottom:1px solid rgba(143,210,255,.22);
  transition:.14s ease;
}

.articleCard__content a:hover{
  color:#b8e6ff;
  border-bottom-color:rgba(143,210,255,.55);
}

.articlesServers{
  margin-top:16px;
  padding:20px;
}

.articlesServers__head{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:14px;
  padding:2px 2px 14px;
  border-bottom:1px solid rgba(255,255,255,.07);
}

.articlesServers__title{
  margin:0;
  font-size:22px;
  font-weight:900;
}

.articlesServers__hint{
  color:rgba(183,167,218,.72);
  font-size:13px;
}

.articlesServers__grid{
  margin-top:16px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.serverMiniLink{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:36px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(260px 90px at 15% 0%, rgba(169,112,255,.10), transparent 65%),
    rgba(255,255,255,.025);
  color:rgba(234,243,255,.94);
  font-size:12.5px;
  font-weight:800;
  transition:.14s ease;
}

.serverMiniLink:hover{
  transform:translateY(-1px);
  border-color:rgba(169,112,255,.22);
  background:
    radial-gradient(260px 90px at 15% 0%, rgba(169,112,255,.14), transparent 65%),
    rgba(255,255,255,.04);
}

@media (max-width:980px){
  .articlesServers__head{
    flex-direction:column;
    align-items:flex-start;
  }
}

/* ===== clickable article title ===== */

.articlesHero__title a{
  color:inherit;
  text-decoration:none;
  transition:.14s ease;
}

.articlesHero__title a:hover{
  opacity:.85;
}

/* ===== button all servers ===== */

.articleAllServers{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  height:36px;
  padding:0 16px;

  border-radius:999px;

  font-size:12px;
  font-weight:900;

  color:#fff;
  text-decoration:none;

  border:1px solid rgba(169,112,255,.35);

  background:
    linear-gradient(180deg,#9d6cff,#7a47ff);

  box-shadow:
    0 10px 24px rgba(122,71,255,.28),
    inset 0 1px 0 rgba(255,255,255,.25);

  transition:.14s ease;
}

.articleAllServers:hover{
  transform:translateY(-1px);
  box-shadow:
    0 14px 28px rgba(122,71,255,.36),
    inset 0 1px 0 rgba(255,255,255,.25);
}

.articleCard__titleLink{
  color:inherit;
  text-decoration:none;
  transition:.15s ease;
}

.articleCard__titleLink:hover{
  color:#b8e6ff;
  text-shadow:0 0 14px rgba(143,210,255,.18);
}

/* ===== Article SEO upgrade ===== */

.articleHero{
  display:grid;
  grid-template-columns:1fr 260px;
  gap:20px;
  padding:24px;
  align-items:start;
}

.articleHero__meta{
  display:inline-flex;
  align-items:center;
  height:28px;
  padding:0 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  color:rgba(200,180,255,.92);
  border:1px solid rgba(169,112,255,.22);
  background:rgba(169,112,255,.08);
  margin-bottom:12px;
}

.articleHero__title{
  margin:0 0 10px;
  font-size:36px;
  font-weight:900;
  line-height:1.12;
}

.articleHero__lead{
  margin:0;
  max-width:860px;
  color:var(--muted);
  line-height:1.75;
}

.articleHero__badges{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:18px;
  position:relative;
  z-index:2;
}

.articleHero__badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid rgba(169,112,255,.20);
  background:rgba(169,112,255,.08);
  color:rgba(234,243,255,.94);
  font-size:12px;
  font-weight:800;
  text-decoration:none;
  cursor:pointer;
  position:relative;
  z-index:2;
}

.articleHero__side{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.articleHero__allServers{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:0 16px;
  border-radius:14px;
  border:1px solid rgba(169,112,255,.28);
  background:rgba(169,112,255,.08);
  color:rgba(242,247,255,.96);
  font-weight:800;
  text-decoration:none;
  transition:.14s ease;
}

.articleHero__allServers:hover{
  transform:translateY(-1px);
  border-color:rgba(169,112,255,.45);
  background:rgba(169,112,255,.16);
}

.articleContent{
  margin-top:16px;
  padding:24px;
}

.articleContent h2{
  margin:0 0 12px;
  font-size:26px;
  font-weight:900;
  line-height:1.2;
}

.articleContent h3{
  margin:20px 0 8px;
  font-size:18px;
  font-weight:900;
  line-height:1.3;
}

.articleContent p{
  margin:0 0 12px;
  color:var(--muted);
  line-height:1.75;
}

/* ===== price table ===== */

.priceTable{
  margin-top:14px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.priceRow{
  display:grid;
  grid-template-columns: minmax(220px, 1.4fr) minmax(140px, .7fr) minmax(120px, .6fr);
  align-items:center;
  gap:16px;
  padding:14px 18px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(400px 120px at 15% 0%, rgba(169,112,255,.10), transparent 65%),
    rgba(255,255,255,.025);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 10px 24px rgba(0,0,0,.16);
  transition:.14s ease;
}

.priceRow:hover{
  transform:translateY(-1px);
  border-color:rgba(169,112,255,.18);
  background:
    radial-gradient(400px 120px at 15% 0%, rgba(169,112,255,.14), transparent 65%),
    rgba(255,255,255,.04);
}

.priceProject{
  font-weight:900;
  font-size:15px;
  color:rgba(242,247,255,.96);
}

.priceAmount{
  text-align:center;
  font-weight:700;
  color:rgba(183,167,218,.88);
  letter-spacing:.2px;
}

.pricePrice{
  text-align:right;
  font-weight:950;
  font-size:16px;
  color:#8fd2ff;
  text-shadow:0 0 14px rgba(143,210,255,.14);
}

/* ===== server links ===== */

.articleServers{
  margin-top:14px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.articleServerLink{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:36px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(260px 90px at 15% 0%, rgba(169,112,255,.10), transparent 65%),
    rgba(255,255,255,.025);
  color:rgba(234,243,255,.94);
  font-size:12.5px;
  font-weight:800;
  text-decoration:none;
  transition:.14s ease;
}

.articleServerLink:hover{
  transform:translateY(-1px);
  border-color:rgba(169,112,255,.22);
  background:
    radial-gradient(260px 90px at 15% 0%, rgba(169,112,255,.14), transparent 65%),
    rgba(255,255,255,.04);
}

/* ===== steps ===== */

.stepList{
  margin-top:14px;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.stepItem{
  display:flex;
  gap:14px;
  align-items:flex-start;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.07);
  background:rgba(255,255,255,.025);
}

.stepNum{
  width:30px;
  height:30px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(180deg,#b388ff,#7c4dff);
  color:#fff;
  font-weight:900;
  flex:0 0 auto;
  box-shadow:0 8px 18px rgba(124,77,255,.28);
}

.stepText{
  color:var(--muted);
  line-height:1.65;
  padding-top:2px;
}

/* ===== list ===== */

.articleList{
  margin:12px 0 0 18px;
  padding:0;
  color:var(--muted);
}

.articleList li{
  margin-bottom:8px;
}

/* ===== cta ===== */

.articleCTA{
  margin-top:16px;
  padding:28px;
  text-align:center;
  background:
    radial-gradient(520px 180px at 50% 0%, rgba(169,112,255,.14), transparent 65%),
    linear-gradient(180deg, rgba(20,10,36,.85), rgba(10,6,20,.55));
}

.articleCTA h2{
  margin:0 0 8px;
  font-size:28px;
  font-weight:900;
}

.articleCTA p{
  margin:0 0 16px;
  color:var(--muted);
  line-height:1.7;
}

.articleCTA__actions{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
}

.articleCTA__ghost{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:0 18px;
  border-radius:999px;
  border:1px solid rgba(169,112,255,.22);
  background:rgba(169,112,255,.08);
  color:rgba(242,247,255,.94);
  font-weight:800;
  text-decoration:none;
  transition:.14s ease;
}

.articleCTA__ghost:hover{
  transform:translateY(-1px);
  border-color:rgba(169,112,255,.42);
  background:rgba(169,112,255,.16);
}

/* ===== responsive ===== */

@media (max-width:980px){
  .articleHero{
    grid-template-columns:1fr;
  }

  .priceRow{
    grid-template-columns:1fr;
    gap:6px;
  }

  .priceAmount,
  .pricePrice{
    text-align:left;
  }
}

/* ===== Sell article page ===== */

.sellHero{
  display:grid;
  grid-template-columns:1fr 320px;
  gap:20px;
  padding:24px;
  align-items:start;
}

.sellHero__meta{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:0 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  color:rgba(200,180,255,.92);
  border:1px solid rgba(169,112,255,.22);
  background:rgba(169,112,255,.08);
  margin-bottom:12px;
}

.sellHero__title{
  margin:0 0 10px;
  font-size:38px;
  font-weight:900;
  line-height:1.1;
}

.sellHero__lead{
  margin:0;
  max-width:900px;
  color:var(--muted);
  line-height:1.8;
}

.sellHero__chips{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:18px;
}

.sellHero__chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(260px 90px at 15% 0%, rgba(169,112,255,.10), transparent 65%),
    rgba(255,255,255,.025);
  color:rgba(234,243,255,.94);
  font-size:12px;
  font-weight:800;
}

.sellHero__chip--accent{
  border-color:rgba(169,112,255,.28);
  background:rgba(169,112,255,.12);
}

.sellHero__side{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.sellHero__cta{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  border-radius:18px;
  text-decoration:none;
  transition:.16s ease;
}

.sellHero__cta--primary{
  border:1px solid rgba(143,210,255,.22);
  background:
    radial-gradient(500px 180px at 20% 0%, rgba(103,182,255,.14), transparent 60%),
    rgba(103,182,255,.06);
  box-shadow:0 14px 30px rgba(0,0,0,.20);
}

.sellHero__cta--primary:hover{
  transform:translateY(-2px);
  border-color:rgba(143,210,255,.42);
  box-shadow:
    0 18px 40px rgba(0,0,0,.28),
    0 0 28px rgba(103,182,255,.16);
}

.sellHero__cta--soft{
  border:1px solid rgba(169,112,255,.22);
  background:
    radial-gradient(500px 180px at 20% 0%, rgba(169,112,255,.14), transparent 60%),
    rgba(169,112,255,.06);
}

.sellHero__cta--soft:hover{
  transform:translateY(-2px);
  border-color:rgba(169,112,255,.40);
  box-shadow:0 16px 34px rgba(0,0,0,.24);
}

.sellHero__ctaIcon{
  width:38px;
  height:38px;
  border-radius:12px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(20,10,36,.55);
}

.sellHero__ctaIcon svg{
  width:18px;
  height:18px;
  fill:rgba(234,243,255,.96);
}

.sellHero__ctaText{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.sellHero__ctaTitle{
  font-size:14px;
  font-weight:900;
  color:rgba(242,247,255,.96);
}

.sellHero__ctaSub{
  font-size:12px;
  color:rgba(183,167,218,.78);
}

.sellHero__note{
  padding:14px 16px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.07);
  background:rgba(255,255,255,.025);
  color:var(--muted);
  line-height:1.65;
}

/* generic content panels */
.sellPanel{
  margin-top:16px;
  padding:24px;
}

.sellPanel__title{
  margin:0 0 12px;
  font-size:26px;
  font-weight:900;
  line-height:1.2;
}

.sellPanel__text{
  margin:0;
  color:var(--muted);
  line-height:1.75;
}

/* server links */
.sellServers{
  margin-top:16px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.sellServer{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:36px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(260px 90px at 15% 0%, rgba(169,112,255,.10), transparent 65%),
    rgba(255,255,255,.025);
  color:rgba(234,243,255,.94);
  font-size:12.5px;
  font-weight:800;
  text-decoration:none;
  transition:.14s ease;
}

.sellServer:hover{
  transform:translateY(-1px);
  border-color:rgba(169,112,255,.24);
  background:
    radial-gradient(260px 90px at 15% 0%, rgba(169,112,255,.14), transparent 65%),
    rgba(255,255,255,.04);
}

/* steps */
.sellSteps{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-top:12px;
}

.sellStep{
  display:flex;
  gap:14px;
  align-items:flex-start;
  padding:14px 16px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.07);
  background:rgba(255,255,255,.025);
}

.sellStep__num{
  width:34px;
  height:34px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  background:linear-gradient(180deg,#b388ff,#7c4dff);
  color:#fff;
  font-weight:900;
  box-shadow:0 8px 18px rgba(124,77,255,.30);
}

.sellStep__body h3{
  margin:0 0 6px;
  font-size:18px;
  font-weight:900;
}

.sellStep__body p{
  margin:0;
  color:var(--muted);
  line-height:1.75;
}

/* reasons */
.sellReasons{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:14px;
  margin-top:12px;
}

.sellReason{
  padding:16px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.07);
  background:
    radial-gradient(260px 90px at 15% 0%, rgba(169,112,255,.10), transparent 65%),
    rgba(255,255,255,.025);
}

.sellReason__title{
  font-size:16px;
  font-weight:900;
  color:rgba(242,247,255,.96);
  margin-bottom:8px;
}

.sellReason__text{
  color:var(--muted);
  line-height:1.7;
}

/* faq */
.sellFaq{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-top:12px;
}

.sellFaq__item{
  padding:16px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.07);
  background:rgba(255,255,255,.022);
}

.sellFaq__item h3{
  margin:0 0 8px;
  font-size:18px;
  font-weight:900;
}

.sellFaq__item p{
  margin:0;
  color:var(--muted);
  line-height:1.75;
}

/* seo block */
.sellSeo{
  margin-top:16px;
  padding:24px;
}

.sellSeo__content{
  display:grid;
  grid-template-columns:1fr 220px;
  gap:24px;
  align-items:center;
}

.sellSeo__text h2{
  margin:0 0 10px;
  font-size:24px;
  font-weight:900;
}

.sellSeo__text p{
  margin:0 0 12px;
  color:var(--muted);
  line-height:1.75;
}

.sellSeo__button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:0 18px;
  border-radius:999px;
  text-decoration:none;
  font-weight:900;
  color:#fff;
  background:linear-gradient(180deg,#b388ff,#7c4dff);
  box-shadow:
    0 10px 24px rgba(124,77,255,.28),
    inset 0 1px 0 rgba(255,255,255,.25);
  transition:.14s ease;
}

.sellSeo__button:hover{
  transform:translateY(-1px);
  box-shadow:
    0 14px 30px rgba(124,77,255,.34),
    inset 0 1px 0 rgba(255,255,255,.25);
}

/* footer cta */
.sellCTA{
  margin-top:16px;
  padding:30px;
  text-align:center;
  background:
    radial-gradient(520px 180px at 50% 0%, rgba(169,112,255,.14), transparent 65%),
    linear-gradient(180deg, rgba(20,10,36,.85), rgba(10,6,20,.55));
}

.sellCTA__title{
  margin:0 0 10px;
  font-size:30px;
  font-weight:900;
}

.sellCTA__text{
  margin:0 0 18px;
  color:var(--muted);
  line-height:1.75;
}

.sellCTA__actions{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
}

.sellCTA__ghost{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:0 18px;
  border-radius:999px;
  border:1px solid rgba(169,112,255,.22);
  background:rgba(169,112,255,.08);
  color:rgba(242,247,255,.94);
  font-weight:800;
  text-decoration:none;
  transition:.14s ease;
}

.sellCTA__ghost:hover{
  transform:translateY(-1px);
  border-color:rgba(169,112,255,.42);
  background:rgba(169,112,255,.16);
}

/* responsive */
@media (max-width: 980px){
  .sellHero{
    grid-template-columns:1fr;
  }

  .sellReasons{
    grid-template-columns:1fr;
  }

  .sellSeo__content{
    grid-template-columns:1fr;
  }
}

/* ===== FAQ page ===== */

.faqHero{
display:grid;
grid-template-columns:1fr 260px;
gap:20px;
padding:24px;
align-items:start;
}

.faqHero__meta{
font-size:12px;
font-weight:800;
color:rgba(200,180,255,.9);
margin-bottom:10px;
}

.faqHero__title{
font-size:36px;
font-weight:900;
margin:0 0 10px;
}

.faqHero__lead{
color:var(--muted);
line-height:1.75;
}

.faqHero__cta{
display:flex;
flex-direction:column;
gap:4px;
padding:16px;
border-radius:16px;
text-decoration:none;
border:1px solid rgba(143,210,255,.2);
background:rgba(143,210,255,.08);
}

.faqHero__ctaTitle{
font-weight:900;
}

.faqHero__ctaSub{
font-size:12px;
color:var(--muted);
}

/* FAQ sections */

.faqContent{
padding:24px;
margin-top:16px;
}

.faqContent h2{
font-size:24px;
margin-bottom:12px;
}

.faqPrices{
margin:12px 0;
padding-left:18px;
}

.faqPrice{
color:#8fd2ff;
font-weight:900;
}

.faqNote{
margin-top:10px;
color:var(--muted);
}

/* steps */

.faqSteps{
display:flex;
flex-direction:column;
gap:12px;
margin-top:14px;
}

.faqStep{
display:flex;
gap:12px;
padding:12px;
border-radius:14px;
border:1px solid rgba(255,255,255,.07);
background:rgba(255,255,255,.03);
}

.faqStep__num{
width:28px;
height:28px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
background:#7c4dff;
color:#fff;
font-weight:900;
}

/* servers */

.faqServers{
display:flex;
flex-wrap:wrap;
gap:10px;
margin-top:14px;
}

.faqServer{
padding:8px 14px;
border-radius:999px;
border:1px solid rgba(255,255,255,.08);
background:rgba(255,255,255,.03);
text-decoration:none;
font-size:13px;
}

/* articles */

.faqArticles{
display:flex;
gap:14px;
margin-top:14px;
}

.faqArticle{
padding:10px 16px;
border-radius:14px;
border:1px solid rgba(169,112,255,.2);
background:rgba(169,112,255,.08);
text-decoration:none;
font-weight:700;
}

/* CTA */

.faqCTAblock{
padding:30px;
margin-top:16px;
text-align:center;
}

.faqCTAblock h2{
font-size:28px;
margin-bottom:10px;
}

.faqCTAblock p{
color:var(--muted);
margin-bottom:16px;
}

.priceTable a.priceRow{
  text-decoration:none;
  color:inherit;
}

.priceRow{
  display:grid; /* или flex — смотря что у тебя уже стоит */
  cursor:pointer;
}

.articleContent p a{
  color:inherit;
  text-decoration:none;
}

.articleContent p a:hover b,
.priceRow:hover .priceProject,
.priceRow:hover .pricePrice{
  text-decoration:underline;
}

/* ===== MOBILE SIDEBAR DRAWER PATCH ===== */

.mobMenuBtn{
  display:none;
  width:44px;
  height:44px;
  padding:0;
  border:1px solid rgba(169,112,255,.22);
  border-radius:14px;
  background:rgba(20,10,36,.78);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:5px;
  cursor:pointer;
  flex:0 0 auto;
}

.mobMenuBtn span{
  display:block;
  width:18px;
  height:2px;
  border-radius:999px;
  background:rgba(242,247,255,.96);
  transition:.18s ease;
}

.sidebarOverlay{
  display:none;
}

@media (max-width:980px){
  .app{
    grid-template-columns:1fr;
    gap:14px;
    padding:14px;
  }

  /* topbar на мобилке остаётся сверху, а не всё в столбик */
  .topbar{
    position:sticky;
    top:0;
    z-index:40;
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:0 0 12px;
    background:linear-gradient(180deg, rgba(15,7,28,.96), rgba(15,7,28,.82));
    backdrop-filter:blur(10px);
  }

  .topbar__searchWrap{
    order:2;
    width:100%;
  }

  .topbar__right{
    order:3;
    width:auto;
    justify-content:flex-end;
    flex-wrap:nowrap;
    gap:8px;
  }

  .mobMenuBtn{
    display:inline-flex;
    order:1;
  }

  /* sidebar убираем из обычного потока и делаем drawer */
  .sidebar{
    position:fixed;
    top:0;
    left:0;
    bottom:0;
    width:min(86vw, 320px);
    height:100dvh;
    max-height:100dvh;
    margin:0;
    border-radius:0 22px 22px 0;
    z-index:80;
    transform:translateX(-105%);
    transition:transform .24s ease;
    overflow:auto;
  }

  body.sidebar-open .sidebar{
    transform:translateX(0);
  }

  .sidebarOverlay{
    display:block;
    position:fixed;
    inset:0;
    background:rgba(5,4,12,.58);
    backdrop-filter:blur(3px);
    opacity:0;
    pointer-events:none;
    transition:opacity .22s ease;
    z-index:70;
  }

  body.sidebar-open .sidebarOverlay{
    opacity:1;
    pointer-events:auto;
  }

  /* основной контент сверху */
  .main{
    padding-right:0;
    min-width:0;
  }

  /* projects header удобнее */
  .projects{
    padding:12px;
    border-radius:16px;
  }

  .projects__head{
    flex-direction:column;
    align-items:stretch;
    gap:10px;
    padding:0 0 12px;
  }

  .projects__search{
    width:100%;
  }

  /* каждая строка проекта превращается в карточку */
  .prow{
    grid-template-columns:1fr;
    gap:10px;
    padding:12px;
    align-items:start;
  }

  .prow__left{
    align-items:flex-start;
  }

  .prow__logoLink,
  .prow__logo{
    width:38px;
    height:38px;
    border-radius:12px;
  }

  .prow__name{
    white-space:normal;
    overflow:visible;
    text-overflow:unset;
    line-height:1.3;
  }

  .prow__sub{
    white-space:normal;
    overflow:visible;
    text-overflow:unset;
    line-height:1.45;
  }

  .prow__servers{
    gap:6px;
  }

  .srv{
    padding:7px 10px;
    font-size:11.5px;
  }

  .priceBadge{
    width:fit-content;
    max-width:100%;
  }

  .prow__price,
  .prow__status,
  .prow__btn{
    justify-self:start;
  }

  .prow__btn{
    width:100%;
    min-height:42px;
  }
}

@media (max-width:720px){
  .topbar{
    flex-wrap:wrap;
  }

  .topbar__searchWrap{
    flex:1 1 100%;
    width:100%;
  }

  .topbar__search{
    max-width:none;
  }

  .topbar__right{
    margin-left:auto;
    flex-wrap:wrap;
  }

  .linkbtn{
    min-height:40px;
    padding:0 12px;
    border-radius:12px;
  }
}

@media (max-width:560px){
  .app{
    padding:10px;
    gap:10px;
  }

  .sidebar{
    width:min(90vw, 300px);
  }

  .projects{
    padding:10px;
  }

  .pgroup__title{
    margin:8px 0;
    font-size:11px;
  }

  .prow{
    padding:10px;
    border-radius:14px;
  }

  .priceBadge{
    padding:7px 10px;
    gap:6px;
  }
}

@media (max-width:980px){
  html, body{
    overflow-x:hidden;
  }

  .topbar{
    position:sticky;
    top:0;
    z-index:40;
    background:transparent;
    isolation:isolate;
  }

  .topbar::before{
    content:"";
    position:absolute;
    top:-10px;
    bottom:-10px;
    left:50%;
    transform:translateX(-50%);
    width:100vw;
    background:linear-gradient(180deg, rgba(22,10,40,.98), rgba(22,10,40,.90));
    border-bottom:1px solid rgba(169,112,255,.18);
    z-index:-1;
  }
}

@media (max-width:980px){
  .statsCol{
    min-width:0;
    width:100%;
    overflow:hidden;
  }

  .statsGrid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    min-width:0;
  }

  .statsCard{
    min-width:0;
    width:100%;
  }
}

@media (max-width:560px){
  .statsGrid{
    grid-template-columns:1fr;
  }
}

.mobMenuBtn{
  display:none;
  width:46px;
  height:46px;
  padding:0;
  border:1px solid rgba(169,112,255,.22);
  border-radius:14px;
  background:rgba(20,10,36,.82);
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:5px;
  cursor:pointer;
  flex:0 0 auto;
}

.mobMenuBtn span{
  display:block;
  width:18px;
  height:2px;
  border-radius:999px;
  background:#fff;
}

.mSidebarOverlay{
  position:fixed;
  inset:0;
  background:rgba(7,5,14,.62);
  opacity:0;
  pointer-events:none;
  transition:opacity .22s ease;
  z-index:199;
}

.mSidebar{
  position:fixed;
  top:0;
  left:0;
  width:min(88vw, 340px);
  height:100dvh;
  padding:18px 14px 18px;
  background:linear-gradient(180deg, #160a28 0%, #0f071c 100%);
  border-right:1px solid rgba(169,112,255,.18);
  box-shadow:0 20px 60px rgba(0,0,0,.45);
  transform:translateX(-105%);
  transition:transform .24s ease;
  z-index:200;
  overflow:auto;
}

.mSidebar__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}

.mSidebar__close{
  position:relative;
  width:42px;
  height:42px;
  border:1px solid rgba(169,112,255,.22);
  border-radius:12px;
  background:rgba(20,10,36,.82);
  cursor:pointer;
  flex:0 0 auto;
}

.mSidebar__close span{
  position:absolute;
  top:50%;
  left:50%;
  width:18px;
  height:2px;
  background:#fff;
  border-radius:999px;
}

.mSidebar__close span:first-child{
  transform:translate(-50%, -50%) rotate(45deg);
}

.mSidebar__close span:last-child{
  transform:translate(-50%, -50%) rotate(-45deg);
}

body.mSidebar-open{
  overflow:hidden;
}

body.mSidebar-open .mSidebar{
  transform:translateX(0);
}

body.mSidebar-open .mSidebarOverlay{
  opacity:1;
  pointer-events:auto;
}

@media (min-width:981px){
  .mSidebar,
  .mSidebarOverlay{
    display:none !important;
  }
}

@media (max-width:980px){
  html, body{
    overflow-x:hidden;
  }

  .mobMenuBtn{
    display:inline-flex;
  }

  .sidebar{
    display:none !important;
  }

  .topbar{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:10px;
    position:sticky;
    top:0;
    z-index:50;
    padding:10px 0 12px;
    background:transparent;
    isolation:isolate;
  }

  .topbar::before{
    content:"";
    position:absolute;
    left:50%;
    top:-10px;
    bottom:-10px;
    width:100vw;
    transform:translateX(-50%);
    background:#160a28;
    border-bottom:1px solid rgba(169,112,255,.14);
    z-index:-1;
  }

  .topbar__search{
    flex:1 1 0;
    min-width:0;
  }

  .topbar__search input{
    width:100%;
    min-width:0;
    box-sizing:border-box;
  }

  .topbar__right{
    width:100%;
    display:flex;
    flex-wrap:wrap;
    gap:8px;
  }

  .topbar__right > *{
    flex:1 1 calc(33.333% - 6px);
    min-width:0;
  }
}

@media (max-width:560px){
  .mSidebar{
    width:min(90vw, 320px);
  }

  .topbar__right{
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    gap:8px;
  }

  .linkbtn,
  .btn{
    min-width:0;
    padding-left:10px;
    padding-right:10px;
  }
}

@media (max-width:980px){

  /* убираем ограничения контейнера */
  .main{
    padding-left:0;
    padding-right:0;
  }

  /* hero растягиваем на ширину экрана */
  .heroRow{
    position:relative;
    width:100vw;
    max-width:100vw;
    margin-left:50%;
    transform:translateX(-50%);
    margin-top:2px;
    box-sizing:border-box;
  }

  /* внутренние отступы чтобы контент не лип к краям */
  .heroRow > *{
    padding-left:14px;
    padding-right:14px;
  }

  /* защита от горизонтального скролла */
  html,body{
    overflow-x:hidden;
  }

}

.topbar__search{
  position:relative;
}

.topSearchSuggest{
  position:absolute;
  top:calc(100% + 10px);
  left:0;
  right:0;
  z-index:120;
  opacity:0;
  transform:translateY(6px);
  pointer-events:none;
  transition:.18s ease;
}

.topSearchSuggest.is-open{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}

.topSearchSuggest__list{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:8px;
  border:1px solid rgba(169,112,255,.18);
  border-radius:18px;
  background:rgba(17,10,28,.96);
  backdrop-filter:blur(16px);
  box-shadow:0 18px 50px rgba(0,0,0,.38);
}

.topSearchSuggest__item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 12px;
  border-radius:14px;
  text-decoration:none;
  color:inherit;
  transition:.16s ease;
}

.topSearchSuggest__item:hover,
.topSearchSuggest__item.is-active{
  background:rgba(255,255,255,.06);
}

.topSearchSuggest__icon{
  width:38px;
  height:38px;
  border-radius:12px;
  overflow:hidden;
  flex:0 0 38px;
  background:rgba(255,255,255,.04);
  display:flex;
  align-items:center;
  justify-content:center;
}

.topSearchSuggest__icon img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.topSearchSuggest__meta{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
  flex:1 1 auto;
}

.topSearchSuggest__title{
  font-size:14px;
  font-weight:700;
  line-height:1.25;
  color:#fff;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.topSearchSuggest__sub{
  font-size:12px;
  color:rgba(255,255,255,.62);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.topSearchSuggest__badge{
  flex:0 0 auto;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(169,112,255,.18);
  background:rgba(169,112,255,.10);
  color:#d9c2ff;
  font-size:11px;
  font-weight:700;
}

.topSearchSuggest mark{
  padding:0;
  background:none;
  color:#b78cff;
}

@media (max-width:980px){
  .topSearchSuggest{
    top:calc(100% + 8px);
  }

  .topSearchSuggest__list{
    border-radius:16px;
    padding:6px;
  }

  .topSearchSuggest__item{
    padding:10px;
    gap:10px;
  }

  .topSearchSuggest__icon{
    width:34px;
    height:34px;
    flex-basis:34px;
    border-radius:10px;
  }

  .topSearchSuggest__badge{
    font-size:10px;
    padding:5px 8px;
  }
}

.relatedServers{
  padding:18px 18px 20px;
}

.relatedServers__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}

.relatedServers__title{
  margin:0;
  font-size:22px;
  line-height:1.1;
  font-weight:800;
}

.relatedServers__list{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.relatedServers__item{
  display:inline-flex;
  align-items:center;
  min-height:42px;
  padding:10px 14px;
  border-radius:14px;
  text-decoration:none;
  color:rgba(255,255,255,.92);
  background:rgba(255,255,255,.04);
  border:1px solid rgba(169,112,255,.14);
  transition:transform .18s ease, border-color .18s ease, background .18s ease, color .18s ease;
  line-height:1.2;
  font-weight:600;
}

.relatedServers__item:hover{
  transform:translateY(-1px);
  background:rgba(169,112,255,.10);
  border-color:rgba(169,112,255,.28);
  color:#fff;
}

.relatedServers__item:active{
  transform:translateY(0);
}

@media (max-width:980px){
  .relatedServers{
    padding:16px 14px 18px;
  }

  .relatedServers__title{
    font-size:20px;
  }

  .relatedServers__list{
    gap:8px;
  }

  .relatedServers__item{
    min-height:40px;
    padding:9px 12px;
    border-radius:12px;
    font-size:14px;
  }
}

@media (max-width:560px){
  .relatedServers__list{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
  }

  .relatedServers__item{
    width:100%;
    min-width:0;
    justify-content:center;
    text-align:center;
    padding:10px;
  }
}

.relatedServers{
  position:relative;
  padding-bottom:20px;
  overflow:hidden;
}

.relatedServers::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(1200px 220px at 10% -20%, rgba(169,112,255,.10), transparent 45%),
    radial-gradient(900px 180px at 100% 0%, rgba(79,178,255,.08), transparent 42%);
  pointer-events:none;
}

.relatedServers__head{
  position:relative;
  z-index:1;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom:8px;
}

.relatedServers__title{
  margin:0;
  font-size:22px;
  line-height:1.1;
  font-weight:800;
  letter-spacing:-0.02em;
}

.relatedServers__all{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:40px;
  padding:0 14px;
  border-radius:12px;
  text-decoration:none;
  color:rgba(255,255,255,.9);
  background:rgba(255,255,255,.04);
  border:1px solid rgba(169,112,255,.16);
  transition:background .18s ease, border-color .18s ease, transform .18s ease;
}

.relatedServers__all:hover{
  background:rgba(169,112,255,.10);
  border-color:rgba(169,112,255,.28);
  transform:translateY(-1px);
}

.relatedServers__text{
  position:relative;
  z-index:1;
  margin:0 0 14px;
  color:rgba(255,255,255,.68);
  font-size:14px;
  line-height:1.45;
}

.relatedServers__list{
  position:relative;
  z-index:1;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.relatedServers__item{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:10px 14px;
  border-radius:14px;
  text-decoration:none;
  color:rgba(255,255,255,.94);
  font-weight:700;
  font-size:14px;
  line-height:1.2;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.03) 100%);
  border:1px solid rgba(169,112,255,.14);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 8px 20px rgba(0,0,0,.12);
  transition:
    transform .18s ease,
    border-color .18s ease,
    background .18s ease,
    box-shadow .18s ease,
    color .18s ease;
}

.relatedServers__item:hover{
  transform:translateY(-1px);
  color:#fff;
  background:
    linear-gradient(180deg, rgba(169,112,255,.16) 0%, rgba(169,112,255,.08) 100%);
  border-color:rgba(169,112,255,.30);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 12px 28px rgba(0,0,0,.18);
}

.relatedServers__item:active{
  transform:translateY(0);
}

@media (max-width:980px){
  .relatedServers{
    padding:16px 14px 18px;
  }

  .relatedServers__head{
    align-items:stretch;
    flex-direction:column;
    gap:10px;
  }

  .relatedServers__title{
    font-size:20px;
  }

  .relatedServers__all{
    width:fit-content;
  }

  .relatedServers__text{
    margin-bottom:12px;
    font-size:13px;
  }

  .relatedServers__list{
    gap:8px;
  }

  .relatedServers__item{
    min-height:40px;
    padding:9px 12px;
    border-radius:12px;
    font-size:13px;
  }
}

@media (max-width:560px){
  .relatedServers__list{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
  }

  .relatedServers__item{
    width:100%;
    min-width:0;
    text-align:center;
    padding:10px 8px;
  }
}

.footer__payments {
  margin-top: 18px;
}

.footer__paymentList {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.footer__paymentItem {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  font-size: 14px;
  line-height: 1;
  color: #d7d7d7;
}

.dot {
  width: 8px;
  height: 8px;
  background: #22c55e;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 6px rgba(34,197,94,0.6);
}