Py-3XUI-multiserver/web/css/home.css

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --bg: #080c18;
  --surface: rgba(255,255,255,0.03);
  --border: rgba(255,255,255,0.06);
  --border-hover: rgba(255,255,255,0.12);
  --text: #fff;
  --text-sec: rgba(255,255,255,0.5);
  --text-ter: rgba(255,255,255,0.3);
  --accent: #6C63FF;
  --green: #10b981;
  --amber: #f59e0b;
  --rose: #f43f5e;
  --card-rad: 16px;
}

* { margin:0; padding:0; box-sizing:border-box }
html { scroll-behavior:smooth }
body {
  font-family:'Plus Jakarta Sans',sans-serif;
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  overflow-x:hidden;
}
body::before {
  content:'';
  position:fixed;inset:0;
  background:
    radial-gradient(ellipse 80% 50% at 10% 0%, rgba(108,99,255,0.08) 0%, transparent 70%),
    radial-gradient(ellipse 60% 40% at 90% 100%, rgba(16,185,129,0.06) 0%, transparent 70%);
  pointer-events:none;
  z-index:0;
}
.container { position:relative; z-index:1; max-width:720px; margin:0 auto; padding:48px 20px 32px }

.section { animation:fadeUp .6s ease-out var(--d,0s) both; margin-bottom:40px }

/* Header */
.header { text-align:center; --d:0.1s }
.header h1 {
  font-size:34px; font-weight:800; letter-spacing:-.03em;
  background:linear-gradient(135deg,#fff 30%,rgba(255,255,255,.6));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
}
.header p { color:var(--text-sec); font-size:15px; margin-top:8px; line-height:1.6 }
.header .sub { color:var(--text-ter); font-size:13px; margin-top:4px }

/* Why us */
.why { --d:0.2s }
.why h2 { font-size:18px; font-weight:600; margin-bottom:14px }
.why-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px }
.w-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:12px; padding:14px;
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  transition:border-color .3s, transform .3s;
  animation:fadeUp .5s ease-out calc(var(--d,0s) + var(--i,0)*0.06s) both;
}
.w-card:hover { border-color:var(--border-hover); transform:translateY(-2px) }
.w-card .e { font-size:20px; margin-bottom:6px }
.w-card h4 { font-size:13px; font-weight:600; margin-bottom:3px }
.w-card p { font-size:11px; color:var(--text-sec); line-height:1.5 }

/* Servers */
.srv-section { --d:0.35s }
.srv-section h2 { font-size:18px; font-weight:600; margin-bottom:14px }
.servers { display:grid; gap:14px }

/* Server card */
.s-card {
  background:var(--surface); border:1px solid var(--border);
  border-left:3px solid var(--hl, transparent);
  border-radius:var(--card-rad); padding:16px 18px;
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  transition:border-color .4s, transform .4s, box-shadow .4s;
  animation:fadeUp .6s ease-out var(--d,0s) both;
}
.s-card:hover { border-color:var(--border-hover); transform:translateY(-3px); box-shadow:0 12px 48px rgba(108,99,255,0.06) }
.s-head { font-size:14px; font-weight:600; display:flex; align-items:center; gap:6px; flex-wrap:wrap }
.s-head .flag { font-size:20px; line-height:1 }
.tier { font-size:10px; font-weight:600; padding:2px 8px; border-radius:20px; letter-spacing:.02em }
.tier.both { background:rgba(108,99,255,0.15); color:var(--accent) }
.tier.free { background:rgba(16,185,129,0.12); color:var(--green) }
.tier.prem { background:rgba(245,158,11,0.12); color:var(--amber) }
.h-dot { width:8px; height:8px; border-radius:50%; display:inline-block; flex-shrink:0 }
.h-lbl { font-size:11px; font-weight:600; font-family:'JetBrains Mono',monospace; white-space:nowrap }
.s-stats { font-size:11px; color:var(--text-ter); font-family:'JetBrains Mono',monospace; margin-top:8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.s-stats.off { color:var(--rose) }

/* Inbounds inside server card */
.ib-list { margin-top:10px; display:flex; flex-wrap:wrap; gap:6px }
.ib-card {
  display:inline-flex; align-items:center; gap:5px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:8px; padding:5px 10px;
  font-size:11px; font-family:'JetBrains Mono',monospace;
  color:var(--text-sec);
  transition:border-color .2s;
}
.ib-card:hover { border-color:var(--border-hover) }
.ib-dot { width:5px; height:5px; border-radius:50%; background:var(--green); flex-shrink:0 }
.ib-name { font-weight:500 }
.ib-type { color:var(--text-ter); font-size:10px }

/* RU server special note */
.ru-note {
  margin-top:10px; padding:8px 12px;
  background:rgba(245,158,11,0.08);
  border:1px solid rgba(245,158,11,0.15);
  border-radius:8px;
  font-size:11px; color:var(--amber);
  display:flex; align-items:center; gap:6px;
}

/* Tech info */
.tech { --d:0.5s }
.tech h2 { font-size:18px; font-weight:600; margin-bottom:14px }
.tech-grid {
  display:grid; grid-template-columns:1fr 1fr;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--card-rad); padding:20px;
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  transition:border-color .3s;
}
.tech-grid:hover { border-color:var(--border-hover) }
.t-item { font-size:12px; color:var(--text-sec); padding:8px 0; display:flex; align-items:center; gap:8px; border-bottom:1px solid var(--border) }
.t-item:last-child { border-bottom:none }
.t-item .t-dot { width:4px; height:4px; border-radius:2px; background:var(--accent); flex-shrink:0 }

/* Buttons */
.btns { display:flex; justify-content:center; gap:10px; margin-top:12px; animation:fadeUp .6s .55s ease-out both }
.btn {
  display:inline-flex; align-items:center; gap:6px;
  padding:12px 28px; border-radius:12px;
  font-size:14px; font-weight:600; text-decoration:none;
  transition:transform .3s, box-shadow .3s;
  cursor:pointer;
}
.btn:hover { transform:translateY(-2px); box-shadow:0 8px 32px rgba(108,99,255,0.2) }
.btn.da { background:linear-gradient(135deg,#f43f5e,#e11d48); color:#fff }

.footer { text-align:center; margin-top:40px; color:var(--text-ter); font-size:12px; animation:fadeUp .6s .6s ease-out both }

@keyframes fadeUp {
  from { opacity:0; transform:translateY(16px) }
  to { opacity:1; transform:translateY(0) }
}

@media(max-width:520px) {
  .container { padding:24px 12px }
  .header h1 { font-size:24px }
  .why-grid { grid-template-columns:1fr }
  .s-card { padding:12px 14px }
  .s-head { font-size:13px; gap:4px }
  .h-lbl { font-size:10px }
  .s-stats { font-size:10px }
  .ib-card { font-size:10px; padding:4px 8px }
  .ru-note { font-size:10px; padding:6px 10px }
  .tech-grid { grid-template-columns:1fr }
  .btns { flex-direction:column; align-items:center }
}