/* =========================
   Support page (flat, clean)
   ========================= */

/* Vars (no backend deps) */
:root{
  --border:#e5e7eb;
  --text:#111827;
  --muted:#6b7280;
  --bg:#ffffff;
  --bg-soft:#f8fafc;
  --discord:#5865F2;
  --discord-700:#4a56d3;
  --telegram:#229ED9;     /* or #0088cc if you prefer */
  --telegram-700:#1e8fc4;
}

*{ box-sizing:border-box; }
body{ color:var(--text); background:var(--bg); }

/* Page shells */
.support-page{
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
.support-wrap{
  max-width:880px;
  margin:24px auto;
  padding:0 16px;
  flex:1;                 /* push footer to bottom */
}

/* Hero */
.hero{
  background:var(--bg-soft);
  border:1px solid var(--border);
  border-radius:14px;
  padding:18px;
  margin-bottom:18px;
}
.hero h1{ margin:0 0 6px; font-size:26px; }
.hero p { margin:0 0 12px; color:var(--muted); }

/* Section title */
.contact-section h2{ margin:0 0 10px; font-size:18px; }

/* -------- Buttons (flat) -------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:10px 14px;
  border:2px solid transparent;
  border-radius:12px;
  background:#111827;
  color:#fff;
  text-decoration:none;
  cursor:pointer;
  font-size:14px;
  font-weight:800;         /* bold & punchy */
  letter-spacing:.2px;
  transition:background-color .12s ease, transform .06s ease;
}
.btn:hover{ background:#0f172a; }
.btn:active{ transform:translateY(1px); }
.btn:focus-visible{ outline:3px solid rgba(0,0,0,.18); outline-offset:2px; }

.btn-sm{ padding:6px 10px; border-radius:8px; font-size:12px; }
.btn-lg{ padding:14px 20px; font-size:16px; }

.btn-icon svg{ width:20px; height:20px; flex:0 0 20px; }

/* Brand variants */
.btn-ghost{ background:#fff; color:#111827; border-color:var(--border); }
.btn-ghost:hover{ background:#f3f4f6; }

.btn-discord{ background:var(--discord); }
.btn-discord:hover{ background:var(--discord-700); }
.btn-discord-outline{ background:#fff; color:var(--discord); border-color:var(--discord); }
.btn-discord-outline:hover{ background:#f4f6ff; }

.btn-telegram{ background:var(--telegram); }
.btn-telegram:hover{ background:var(--telegram-700); }
.btn-telegram-outline{ background:#fff; color:var(--telegram); border-color:var(--telegram); }
.btn-telegram-outline:hover{ background:#f0f9ff; }

/* Telegram icon +20% (24px) */
.support-wrap .btn-telegram.btn-icon svg{
  width:24px;
  height:24px;
}

/* CTA row */
.cta-row{ display:flex; gap:10px; flex-wrap:wrap; margin:8px 0 14px; }

/* Cards */
.cards{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
@media (max-width:820px){ .cards{ grid-template-columns:1fr; } }

.card{
  border:1px solid var(--border);
  border-radius:12px;
  padding:12px;
  background:#fff;
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* Pills */
.pill{
  display:inline-block;
  padding:4px 10px;
  border-radius:999px;
  font-weight:700;
  border:1px solid var(--border);
  background:#f9fafb;
}
.pill-discord{ border-color:var(--discord); color:var(--discord); background:rgba(88,101,242,.08); }
.pill-telegram{ border-color:var(--telegram); color:var(--telegram); background:rgba(34,158,217,.10); }

/* Info rows */
.line{
  display:grid;
  grid-template-columns:90px 1fr;
  gap:10px;
  align-items:center;
}
.label{ color:var(--muted); font-size:12px; }
code{
  background:#f3f4f6;
  border:1px solid var(--border);
  padding:2px 6px;
  border-radius:6px;
}

/* A11y */
a:focus, button:focus{ outline:2px solid rgba(0,0,0,.15); outline-offset:2px; }

/* Optional: doc link style (kept neutral) */
.link-doc{ background:#111827; }
.link-doc:hover{ background:#0f172a; }

/* Motion prefs */
@media (prefers-reduced-motion: reduce){
  .btn:hover{ transform:none; }
}