.support-hero { position: relative; padding: clamp(120px, 16vw, 190px) 0 clamp(64px, 9vw, 110px); overflow: hidden; }
.support-hero .display { max-width: 900px; }
.support-hero .display span { color: var(--teal-bright); }
.support-intro { max-width: 700px; margin: 30px 0 0; font-size: clamp(1.08rem, 1.7vw, 1.35rem); }
.gateway { }
.gateway-title { margin-top: 32px; }
.gateway-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.gateway-card { min-height: 245px; padding: clamp(24px, 4vw, 42px); border: 1px solid var(--line); border-radius: var(--radius); background: transparent; display: flex; flex-direction: column; text-decoration: none; transition: transform .2s, background .2s, box-shadow .2s; }
.gateway-card:hover { transform: translateY(-4px); background: rgba(255,255,255,.38); box-shadow: var(--shadow); }
.gateway-card.primary { background: var(--teal-bright); }
.gateway-card.primary .zh { color: var(--ink); }
.gateway-card .index { font: 10px var(--font-mono); letter-spacing: .14em; text-transform: uppercase; }
.gateway-card h2 { margin: auto 0 8px; font: 400 clamp(2rem, 4vw, 3.8rem)/.92 var(--font-display); text-transform: uppercase; }
.gateway-card p { margin: 0; color: rgba(13,14,43,.64); }
.social-strip { padding: 32px 0; }
.social-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.social-card { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border: 1px solid var(--ink); background: var(--ink); color: var(--white); text-decoration: none; font: 700 12px var(--font-mono); text-transform: uppercase; transition: background .2s, color .2s; }
.social-card:hover { background: var(--teal-bright); border-color: var(--teal-bright); }
.social-card svg { flex-shrink: 0; }

.error-main { min-height: 100svh; display: grid; place-items: center; padding: 110px var(--gutter) 64px; background: radial-gradient(circle at 75% 20%, rgba(0,194,199,.18), transparent 32%), var(--paper); }
.error-card { width: min(100%, 900px); text-align: center; }
.error-code { margin: 0; color: var(--teal-bright); font: 400 clamp(8rem, 28vw, 20rem)/.72 var(--font-display); }
.error-card h1 { margin: 26px 0 14px; font: 400 clamp(2.2rem, 5vw, 4.8rem)/.95 var(--font-display); text-transform: uppercase; }
.error-card p { max-width: 600px; margin: 0 auto 30px; font-size: 1.08rem; }
.error-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }
.footer-accent { color: var(--teal-bright); }

@media (max-width: 700px) {
  .gateway-grid { grid-template-columns: 1fr; }
  .gateway-card { min-height: 210px; }
}
@media (max-width: 600px) { .social-grid { grid-template-columns: 1fr; } }