.container{max-width:var(--max-width);margin:0 auto;padding:0 32px}
.section{padding:clamp(28px,3vw,48px) 0}
.section-header{text-align:center;max-width:640px;margin:0 auto clamp(16px,2vw,28px)}
.section-tag{display:inline-flex;align-items:center;gap:6px;padding:6px 16px;border-radius:99px;background:var(--white-5);border:var(--border-silver);font-size:12px;color:var(--silver-400);letter-spacing:0.08em;text-transform:uppercase;position:relative;margin-bottom:16px}
.section-tag::after{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 21px rgba(192,192,192,0.1);pointer-events:none}
.section-title{margin-bottom:16px}
.section-subtitle{font-size:clamp(1rem,1.3vw,1.15rem);color:var(--silver-500);max-width:560px;margin:0 auto}

.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}

.card{background:var(--gradient-card);border:var(--border-silver);border-radius:var(--radius-lg);padding:28px;transition:all var(--transition-med);position:relative;overflow:hidden}
.card::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--silver-800),transparent);opacity:0;transition:opacity var(--transition-med)}
.card:hover{border-color:var(--white-20);transform:translateY(-2px);box-shadow:var(--shadow-silver)}
.card:hover::before{opacity:1}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 28px;border-radius:var(--radius-md);font-size:14px;font-weight:500;cursor:pointer;transition:all var(--transition-fast);border:none;font-family:var(--font-body);letter-spacing:-0.01em;position:relative;overflow:hidden}
.btn-silver{background:var(--gradient-silver);color:var(--black);font-weight:600}
.btn-silver:hover{box-shadow:var(--shadow-silver-lg);transform:translateY(-1px)}
.btn-outline{background:transparent;border:var(--border-silver-light);color:var(--silver-200)}
.btn-outline:hover{background:var(--white-5);border-color:var(--white-20)}
.btn-ghost{background:transparent;color:var(--silver-500);padding:8px 16px}
.btn-ghost:hover{color:var(--silver-200)}
.btn-lg{padding:16px 36px;font-size:16px;border-radius:var(--radius-md)}
.btn-sm{padding:8px 18px;font-size:13px}
.btn-icon{width:40px;height:40px;padding:0;border-radius:var(--radius-md)}
.btn-block{width:100%}

.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 14px;border-radius:99px;background:var(--white-5);border:var(--border-silver);font-size:12px;color:var(--silver-500);position:relative}
.pill::after{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 21px rgba(192,192,192,0.08);pointer-events:none}

.status-dot{width:7px;height:7px;border-radius:50%;display:inline-block;flex-shrink:0}
.status-dot.online{background:#00c853;box-shadow:0 0 8px rgba(0,200,83,0.4)}
.status-dot.limited{background:#ffc107;box-shadow:0 0 8px rgba(255,193,7,0.4)}
.status-dot.offline{background:#ef5350;box-shadow:0 0 8px rgba(239,83,80,0.4)}
.status-badge{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:4px;font-size:11px;font-weight:500}
.status-badge.online{background:rgba(0,200,83,0.12);color:#00c853}
.status-badge.limited{background:rgba(255,193,7,0.12);color:#ffc107}
.status-badge.offline{background:rgba(239,83,80,0.12);color:#ef5350}

.badge{display:inline-flex;padding:3px 12px;border-radius:99px;font-size:11px;font-weight:600;letter-spacing:0.03em}
.badge-silver{background:var(--gradient-silver);color:var(--black)}
.badge-outline{border:var(--border-silver);color:var(--silver-400)}

.tag{display:inline-flex;padding:4px 12px;border-radius:99px;background:var(--white-5);border:var(--border-silver);font-size:11px;color:var(--silver-500)}

.spacer-sm{height:16px}
.spacer-md{height:32px}
.spacer-lg{height:64px}
.mt-sm{margin-top:16px}
.mt-md{margin-top:32px}
.mt-lg{margin-top:64px}
.mb-sm{margin-bottom:16px}
.mb-md{margin-bottom:32px}
.gap-sm{gap:8px}
.gap-md{gap:16px}
.gap-lg{gap:24px}
.flex{display:flex}
.flex-center{align-items:center;justify-content:center}
.flex-between{align-items:center;justify-content:space-between}
.flex-col{flex-direction:column}
.flex-wrap{flex-wrap:wrap}
.flex-1{flex:1}
.grid{display:grid}
.relative{position:relative}
.overflow-hidden{overflow:hidden}
.w-full{width:100%}
.hidden{display:none}
@media(max-width:768px){.mobile-hidden{display:none!important}}