/* =====================================================================
   Nebo Pro — сторінка «Підтримка» та 404. Доповнює site.css (не змінює його).
   ===================================================================== */

/* ---------- Hero + картка звʼязку ---------- */
.support-hero .lead { margin: 0 0 26px; }
.contact.support-contact { align-items: flex-start; }
.support-contact .mail {
  display: inline-block; margin-top: 10px;
  font-size: clamp(20px, 3.2vw, 30px); font-weight: 750; letter-spacing: -.01em; color: var(--signal);
  overflow-wrap: anywhere;
}
.support-contact .contact-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.support-contact .tip {
  margin-top: 18px; padding: 14px 16px; border-radius: 16px; font-size: 15px;
  background: rgba(0, 0, 0, .25); border: 1px solid rgba(255, 255, 255, .07); color: #C9CBB8;
}
.support-contact .tip b { color: var(--white); font-weight: 600; }
.support-contact .contact-main { flex: 1 1 420px; min-width: 0; }
.support-contact .cta-row { flex: 0 0 auto; }

/* ---------- Швидкі дії ---------- */
.support-block { margin-top: clamp(40px, 6vw, 64px); }
.support-block > .hud { display: block; margin-bottom: 14px; }
.support-block > h2 { font-size: clamp(26px, 3.4vw, 36px); font-weight: 800; letter-spacing: -.02em; margin-bottom: 20px; }
.quick .card { padding: 22px; }
.quick .card h3 { font-size: 18px; margin: 14px 0 6px; }
.quick .card p { font-size: 15px; }
.quick .card .path { display: inline-block; margin-top: 12px; white-space: normal; line-height: 1.5; }
/* у вузькій колонці (780px) 4 картки — по дві */
.wrap-narrow .quick.g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 640px) { .wrap-narrow .quick.g4 { grid-template-columns: 1fr; } }

/* ---------- FAQ: групи ---------- */
.faq-group { margin-top: 34px; }
.faq-group h3 {
  display: flex; align-items: center; gap: 10px; margin-bottom: 14px;
  font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--khaki-2);
}
.faq-group h3::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(185, 179, 140, .3), transparent); }
.faq summary:hover { color: var(--signal); }
.faq summary:focus-visible { outline-offset: -2px; border-radius: 20px; }
.faq details[open] { border-color: rgba(200, 255, 77, .22); }
.faq details[open] .ans { animation: faq-in .35s var(--ease); }
@keyframes faq-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.faq .ans b, .faq .ans strong { color: var(--white); font-weight: 600; }
.faq .path { white-space: normal; }

/* ---------- Безпека ---------- */
.safety { margin-top: clamp(40px, 6vw, 60px); }
.safety .warn { font-size: 16px; }
.safety .warn strong { color: #fff; }
.safety .num { font-family: var(--mono); font-weight: 800; color: #fff; letter-spacing: .04em; }

.support-links { margin-top: 30px; }

/* ---------- 404 ---------- */
.nf .lead { margin: 14px auto 0; }
.nf .lead-en { margin-top: 6px; font-size: 16px; color: var(--muted); }
.nf .h1-en { display: block; margin-top: 8px; font-size: .42em; font-weight: 700; letter-spacing: -.01em; color: var(--khaki-2); }
.nf .code .sep { color: var(--signal); }
.nf .radar .core { background: var(--khaki); box-shadow: 0 0 12px var(--khaki); animation: nf-pulse 2.4s ease-in-out infinite; }
@keyframes nf-pulse { 50% { opacity: .3; } }