:root {
  --bg: #07031d;
  --panel: rgba(10, 18, 48, 0.82);
  --panel-strong: rgba(13, 22, 56, 0.92);
  --line: rgba(121, 147, 255, 0.18);
  --text: #eef3ff;
  --muted: #a8b6df;
  --accent: #ff6d70;
  --accent-2: #5f8cff;
  --shadow: 0 30px 80px rgba(0,0,0,.35);
  --max-width: 1220px;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0;
  font-family:"Sora","Segoe UI",sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 14% 10%, rgba(84,115,255,.24), transparent 22%),
    radial-gradient(circle at 86% 18%, rgba(255,95,118,.16), transparent 18%),
    linear-gradient(180deg, #040116 0%, #08122f 42%, #071126 100%);
}
a, button { color:inherit; text-decoration:none; font:inherit; }
img { max-width:100%; }
.support-shell { width:min(var(--max-width), calc(100% - 32px)); margin:0 auto; }
.support-topbar {
  position: sticky; top: 12px; z-index: 20; display:flex; justify-content:space-between; align-items:center; gap:24px; margin-top:16px; padding:18px 22px; border:1px solid var(--line); border-radius:20px; background:rgba(7,14,39,.84); backdrop-filter: blur(16px); box-shadow: var(--shadow);
}
.brand-lockup, .top-actions, .hero-actions, .meta-grid, .info-list li, .footer-meta, .footer-links { display:flex; align-items:center; }
.brand-lockup { gap:14px; }
.brand-icon {
  display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:14px; background:linear-gradient(135deg, var(--accent), var(--accent-2)); color:#fff; font-weight:800; box-shadow:0 18px 34px rgba(95,140,255,.24);
}
.brand-lockup strong { display:block; font-size:1rem; }
.brand-lockup small { display:block; margin-top:4px; color:var(--muted); }
.top-actions { gap:12px; }
.ghost-link, .primary-link, .back-link, .nav-link {
  display:inline-flex; align-items:center; justify-content:center; border-radius:16px; transition: transform .2s ease, background .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.ghost-link, .back-link { padding:12px 16px; border:1px solid rgba(121,147,255,.24); background:rgba(18,28,68,.76); color:#dbe5ff; }
.primary-link { padding:12px 18px; background:linear-gradient(135deg, rgba(255,111,122,.94), rgba(90,133,255,.88)); color:#fff; box-shadow:0 18px 30px rgba(88,104,255,.28); }
.ghost-link:hover, .primary-link:hover, .back-link:hover, .nav-link:hover { transform: translateY(-2px); }
.support-hero { padding: 56px 0 28px; }
.eyebrow { display:inline-flex; align-items:center; padding:8px 12px; border-radius:999px; background:rgba(18,31,80,.82); border:1px solid rgba(121,147,255,.18); color:#ff9ea4; font-size:.8rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.support-hero h1 { margin:18px 0 12px; font-size:clamp(2.9rem, 5vw, 4.8rem); line-height:1.02; letter-spacing:-.05em; }
.support-hero p { max-width: 780px; color:var(--muted); line-height:1.9; }
.hero-actions { gap:12px; flex-wrap:wrap; margin-top:24px; }
.support-layout { display:grid; grid-template-columns:300px minmax(0, 1fr); gap:24px; padding: 20px 0 54px; }
.sidebar-card, .content-card, .meta-item, .contact-card, .detail-card, .footer-shell { border:1px solid var(--line); border-radius:26px; background: var(--panel); box-shadow: var(--shadow); }
.sidebar-card { padding:24px; position:sticky; top:104px; }
.back-link { width:100%; justify-content:flex-start; }
.sidebar-title { margin:22px 0 12px; font-size:.82rem; color:#9fb0db; text-transform:uppercase; letter-spacing:.08em; }
.sidebar-nav { display:grid; gap:10px; }
.nav-link { justify-content:flex-start; padding:13px 16px; border:1px solid rgba(121,147,255,.18); background:rgba(18,28,68,.72); color:#dce6ff; font-weight:700; }
.nav-link.is-active { border-color: rgba(255,128,143,.28); background: linear-gradient(135deg, rgba(255,111,122,.18), rgba(90,133,255,.18)); color:#fff4f5; box-shadow:0 18px 28px rgba(0,0,0,.2); }
.sidebar-copy { margin-top:18px; color:var(--muted); line-height:1.8; }
.contact-card { margin-top:18px; padding:18px; background: var(--panel-strong); }
.contact-card h3, .section-card h2 { margin:0 0 12px; }
.contact-card p, .section-card p, .detail-card p, .footer-copy, .footer-note { color:var(--muted); line-height:1.8; }
.support-content { display:grid; gap:18px; }
.content-card { padding:28px; }
.meta-grid { gap:16px; flex-wrap:wrap; }
.meta-item { min-width:180px; padding:18px 20px; flex-direction:column; align-items:flex-start; background:rgba(8,15,40,.78); }
.meta-item span { color:#9fb0db; font-size:.82rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; }
.meta-item strong { margin-top:8px; font-size:1.04rem; color:#f5f8ff; }
.section-card { margin-top:18px; }
.section-card h2 { font-size:1.5rem; }
.info-list { display:grid; gap:14px; padding:0; margin:18px 0 0; list-style:none; }
.info-list li { gap:12px; align-items:flex-start; }
.info-dot { width:10px; height:10px; margin-top:10px; border-radius:50%; background: linear-gradient(135deg, var(--accent), var(--accent-2)); flex:0 0 auto; }
.detail-grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:16px; margin-top:18px; }
.detail-card { padding:20px; background: var(--panel-strong); }
.detail-card h3 { margin:0 0 10px; font-size:1.02rem; }
.return-row { display:flex; gap:12px; flex-wrap:wrap; margin-top:22px; }
.page-footer { padding: 12px 0 54px; }
.footer-shell { padding: 28px; }
.footer-meta { justify-content:space-between; gap:24px; }
.footer-company h4, .footer-payments h4 { margin:0 0 10px; font-size:.86rem; color:#9fb0db; text-transform:uppercase; letter-spacing:.08em; }
.footer-links { gap:16px; flex-wrap:wrap; margin-top:18px; }
.payment-grid { display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:12px; margin-top:16px; }
.payment-grid span { display:flex; align-items:center; justify-content:center; padding:12px 14px; border:1px solid rgba(121,147,255,.18); border-radius:16px; background: rgba(18,28,68,.76); }
.payment-grid img { display:block; width:100%; max-width:112px; height:24px; object-fit:contain; }
.footer-note { margin-top:14px; }
.footer-company p, .footer-links a, .footer-note { color:#b5c5ec; }
.footer-links a:hover { color:#fff; }
@media (max-width: 980px) {
  .support-layout, .detail-grid, .footer-meta { grid-template-columns: 1fr; display:grid; }
  .sidebar-card { position: static; }
}
@media (max-width: 720px) {
  .support-shell { width:min(var(--max-width), calc(100% - 20px)); }
  .support-topbar, .top-actions { flex-direction:column; align-items:flex-start; }
  .ghost-link, .primary-link, .nav-link, .back-link { width:100%; }
  .payment-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}