/* ════════════════════════════════════════════════════════════════
   SyneuraX.Web — site styles (built ON TOP of css/styles.css tokens)
   Light · modern · premium · neural. All colors via --snx- tokens.
   ════════════════════════════════════════════════════════════════ */

/* ─── Language-aware typography ─────────────────────────────────── */
html[lang="fa"] body, html[lang="ar"] body { font-family: var(--snx-font-fa); }
html[lang="fa"] h1, html[lang="fa"] h2, html[lang="fa"] h3, html[lang="fa"] h4,
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3, html[lang="ar"] h4 {
  font-family: var(--snx-font-fa);
  letter-spacing: 0;
}

/* English fragments inside RTL text render LTR (no hamza, no reordering) */
.snx-ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }
[dir="rtl"] .snx-ltr-list a { direction: ltr; unicode-bidi: isolate; display: inline-block; }

/* ─── Layout primitives ─────────────────────────────────────────── */
.container {
  max-width: var(--snx-container);
  margin-inline: auto;
  padding-inline: var(--snx-gutter);
}

.section { padding-block: var(--snx-space-20); }
.section-tint { background: var(--snx-surface-sunken); }

.section-head { max-width: 760px; margin-inline: auto; text-align: center; margin-bottom: var(--snx-space-12); }
.section-head h2 { font-size: var(--snx-fs-h2); }
.section-lead { color: var(--snx-text-muted); font-size: var(--snx-fs-lg); margin-top: var(--snx-space-3); }
.section-lead p { margin: 0; }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--snx-space-8); }

/* ─── Buttons ───────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 26px;
  border-radius: var(--snx-radius-md);
  border: var(--snx-border-w) solid transparent;
  font: inherit; font-weight: var(--snx-w-semibold); font-size: var(--snx-fs-body);
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: transform var(--snx-dur-base) var(--snx-ease),
              box-shadow var(--snx-dur-base) var(--snx-ease),
              background-color var(--snx-dur-base) var(--snx-ease),
              filter var(--snx-dur-base) var(--snx-ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-primary { background: var(--snx-gradient); color: var(--snx-text-on-brand); box-shadow: var(--snx-shadow-md); }
.btn-primary:hover { color: var(--snx-text-on-brand); box-shadow: var(--snx-glow-blue); filter: saturate(1.08); }

.btn-ghost { background: transparent; color: var(--snx-text-strong); border-color: var(--snx-border-strong); }
.btn-ghost:hover { color: var(--snx-blue); border-color: var(--snx-blue); background: var(--snx-blue-050); }

.btn-light { background: #fff; color: var(--snx-navy); box-shadow: var(--snx-shadow-md); }
.btn-light:hover { color: var(--snx-violet-700); box-shadow: var(--snx-shadow-lg); }

.btn-danger { background: var(--snx-error); color: #fff; }
.btn-danger:hover { color: #fff; filter: brightness(0.94); }

.btn-sm { padding: 8px 16px; font-size: var(--snx-fs-sm); border-radius: var(--snx-radius-sm); }
.btn-lg { padding: 15px 34px; font-size: var(--snx-fs-lg); border-radius: var(--snx-radius-lg); }
.btn-block { width: 100%; }

/* ─── Header ────────────────────────────────────────────────────── */
.snx-header {
  position: sticky; top: 0; z-index: var(--snx-z-sticky);
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: var(--snx-border-w) solid var(--snx-border-subtle);
  transition: box-shadow var(--snx-dur-base) var(--snx-ease);
}
.snx-header.scrolled { box-shadow: var(--snx-shadow-md); }

.header-inner {
  display: flex; align-items: center; gap: var(--snx-space-6);
  min-height: var(--snx-header-h);
}
.brand { display: inline-flex; align-items: center; flex-shrink: 0; }
.brand-logo { height: 40px; width: auto; display: block; }

.main-nav { display: flex; align-items: center; gap: var(--snx-space-5); margin-inline: auto; flex-wrap: wrap; }
.main-nav a {
  color: var(--snx-text-body); font-weight: var(--snx-w-medium); font-size: var(--snx-fs-sm);
  padding: 6px 2px; position: relative;
}
.main-nav a::after {
  content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 2px;
  background: var(--snx-gradient); border-radius: 2px;
  transform: scaleX(0); transition: transform var(--snx-dur-base) var(--snx-ease);
}
.main-nav a:hover { color: var(--snx-blue); }
.main-nav a:hover::after { transform: scaleX(1); }

.header-actions { display: flex; align-items: center; gap: var(--snx-space-3); flex-shrink: 0; }
.portal-link { font-size: var(--snx-fs-sm); font-weight: var(--snx-w-semibold); color: var(--snx-violet); }
.portal-link:hover { color: var(--snx-violet-700); }

/* Items that live inside the slide-down menu on mobile only (hidden on desktop). */
.nav-mobile-only { display: none; }

.nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; }
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--snx-navy); margin: 5px 0; border-radius: 2px; transition: transform var(--snx-dur-base) var(--snx-ease), opacity var(--snx-dur-base); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ─── Language switcher ─────────────────────────────────────────── */
.lang-switch {
  display: inline-flex; align-items: center; gap: 2px;
  background: var(--snx-n-100); border-radius: var(--snx-radius-pill); padding: 3px;
}
.lang-form { display: inline-flex; margin: 0; }
.lang-btn {
  border: none; background: transparent; cursor: pointer;
  font: inherit; font-size: var(--snx-fs-xs); font-weight: var(--snx-w-semibold);
  color: var(--snx-text-muted); padding: 5px 10px; border-radius: var(--snx-radius-pill);
  transition: background-color var(--snx-dur-fast) var(--snx-ease), color var(--snx-dur-fast);
  min-width: 34px;
}
.lang-btn:hover { color: var(--snx-navy); }
.lang-btn.active { background: #fff; color: var(--snx-navy); box-shadow: var(--snx-shadow-xs); }

/* ─── Hero (home) ───────────────────────────────────────────────── */
.hero { overflow: hidden; }
.hero-inner {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: center; gap: var(--snx-space-12);
  padding-block: var(--snx-space-24) var(--snx-space-20);
}
.hero-title {
  font-size: clamp(34px, 5vw, var(--snx-fs-display));
  line-height: var(--snx-lh-tight);
  margin-top: var(--snx-space-4);
}
.hero-lead { font-size: var(--snx-fs-lg); color: var(--snx-text-muted); margin-top: var(--snx-space-5); max-width: 56ch; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: var(--snx-space-4); margin-top: var(--snx-space-8); }

.hero-stats { display: flex; gap: var(--snx-space-10); margin-top: var(--snx-space-12); flex-wrap: wrap; }
.stat { display: flex; flex-direction: column; gap: 2px; }
.stat-num {
  font-size: var(--snx-fs-h3); font-weight: var(--snx-w-bold);
  background: var(--snx-gradient);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat-label { font-size: var(--snx-fs-sm); color: var(--snx-text-muted); }

.hero-art { position: relative; min-height: 380px; display: grid; place-items: center; }
.hero-glow {
  position: absolute; width: 340px; height: 340px; border-radius: 50%;
  background: radial-gradient(circle, rgba(91,200,247,0.30) 0%, rgba(123,47,208,0.12) 55%, transparent 75%);
  filter: blur(8px);
}
.hero-mark { position: relative; width: min(260px, 60%); z-index: 1; }
.float { animation: snxFloat 7s var(--snx-ease-in-out) infinite; }
@keyframes snxFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }

.hero-ring { position: absolute; border-radius: 50%; border: var(--snx-stroke-neural) solid rgba(30,127,230,0.25); }
.ring-1 { width: 320px; height: 320px; animation: snxSpin 28s linear infinite; border-style: dashed; }
.ring-2 { width: 420px; height: 420px; border-color: rgba(123,47,208,0.18); animation: snxSpin 44s linear infinite reverse; }
@keyframes snxSpin { to { transform: rotate(360deg); } }

.hero-node { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--snx-cyan); box-shadow: var(--snx-glow-cyan); }
.node-1 { top: 16%; inset-inline-start: 22%; }
.node-2 { bottom: 20%; inset-inline-end: 14%; background: var(--snx-violet); box-shadow: var(--snx-glow-violet); width: 8px; height: 8px; }
.node-3 { top: 52%; inset-inline-start: 6%; background: var(--snx-blue); box-shadow: var(--snx-glow-blue); width: 7px; height: 7px; }

/* ─── Info / problem-solution cards ─────────────────────────────── */
.info-card {
  background: var(--snx-surface-card);
  border: var(--snx-border-w) solid var(--snx-border-subtle);
  border-radius: var(--snx-radius-lg);
  padding: var(--snx-space-8);
  box-shadow: var(--snx-shadow-sm);
  position: relative; overflow: hidden;
}
.info-card::before { content: ""; position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: 4px; }
.info-card.problem::before { background: var(--snx-n-300); }
.info-card.solution::before { background: var(--snx-gradient); }
.info-card h2 { font-size: var(--snx-fs-h3); margin-bottom: var(--snx-space-3); }
.info-card p { color: var(--snx-text-muted); margin: 0; }

/* ─── Product cards ─────────────────────────────────────────────── */
.cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--snx-space-6); }
.product-card {
  background: var(--snx-surface-card);
  border: var(--snx-border-w) solid var(--snx-border-subtle);
  border-radius: var(--snx-radius-lg);
  padding: var(--snx-space-8);
  box-shadow: var(--snx-shadow-sm);
  display: flex; flex-direction: column; gap: var(--snx-space-3);
  transition: transform var(--snx-dur-base) var(--snx-ease), box-shadow var(--snx-dur-base) var(--snx-ease);
}
.product-card:hover { transform: translateY(-6px); box-shadow: var(--snx-shadow-lg); }
.product-card.live { border-top: 3px solid var(--snx-blue); }
.product-card.soon { border-top: 3px solid var(--snx-violet-100); }
.product-card p { color: var(--snx-text-muted); margin: 0; }
.product-top { display: flex; align-items: center; justify-content: space-between; gap: var(--snx-space-3); }
.product-name { font-size: var(--snx-fs-h3); }

.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--snx-fs-xs); font-weight: var(--snx-w-semibold);
  border-radius: var(--snx-radius-pill); padding: 4px 12px; white-space: nowrap;
}
.badge-live { background: var(--snx-success-bg); color: var(--snx-success); }
.badge-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--snx-success); }
.badge-soon { background: var(--snx-violet-050); color: var(--snx-violet-700); }

/* ─── Why grid ──────────────────────────────────────────────────── */
.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--snx-space-6); }
.why-item {
  background: var(--snx-surface-card);
  border: var(--snx-border-w) solid var(--snx-border-subtle);
  border-radius: var(--snx-radius-lg);
  padding: var(--snx-space-6);
  box-shadow: var(--snx-shadow-xs);
}
.why-item h3 { font-size: var(--snx-fs-h4); margin: var(--snx-space-3) 0 var(--snx-space-2); }
.why-item p { color: var(--snx-text-muted); margin: 0; font-size: var(--snx-fs-sm); }
.why-dot { display: block; width: 12px; height: 12px; border-radius: 50%; }
.dot-0 { background: var(--snx-blue); box-shadow: 0 0 12px rgba(30,127,230,0.5); }
.dot-1 { background: var(--snx-violet); box-shadow: 0 0 12px rgba(123,47,208,0.5); }
.dot-2 { background: var(--snx-cyan); box-shadow: 0 0 12px rgba(91,200,247,0.6); }

/* ─── Science band (dark) + CTA band ────────────────────────────── */
.science-band { padding-block: var(--snx-space-20); }
.science-band-inner { text-align: center; max-width: 820px; margin-inline: auto; }
.science-band h2 { color: #F2F5FD; font-size: var(--snx-fs-h2); }
.science-band-body { color: #C9D3EE; font-size: var(--snx-fs-lg); margin: var(--snx-space-5) 0 var(--snx-space-8); }
.science-band-body p { margin: 0; }

.cta-band { background: var(--snx-gradient); padding-block: var(--snx-space-20); }
.cta-inner {
  /* flex-column centering keeps every child (chip, heading, lead, buttons)
     on one axis regardless of RTL/bidi text measurement quirks */
  display: flex; flex-direction: column; align-items: center;
  text-align: center; max-width: 760px; margin-inline: auto;
}
.cta-inner > * { margin-inline: auto; }
.cta-eyebrow {
  display: inline-block;
  color: rgba(255,255,255,0.85);
  font-size: var(--snx-fs-xs); font-weight: var(--snx-w-bold); letter-spacing: 0.12em;
  border: 1px solid rgba(255,255,255,0.4); border-radius: var(--snx-radius-pill);
  padding: 5px 16px; margin-bottom: var(--snx-space-5);
}
.cta-band h2 { color: #fff; font-size: var(--snx-fs-h2); }
.cta-body { color: rgba(255,255,255,0.92); font-size: var(--snx-fs-lg); margin: var(--snx-space-4) auto var(--snx-space-8); max-width: 56ch; }
.cta-body p { margin: 0; }
.cta-actions { display: flex; justify-content: center; align-items: center; gap: var(--snx-space-4); flex-wrap: wrap; }
.btn-cta-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,0.55); }
.btn-cta-ghost:hover { background: rgba(255,255,255,0.14); color: #fff; border-color: #fff; }

/* ─── Workflow ──────────────────────────────────────────────────── */
.workflow {
  list-style: none; counter-reset: step;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--snx-space-6);
  padding: 0; margin: 0;
}
.workflow-step {
  background: var(--snx-surface-card);
  border: var(--snx-border-w) solid var(--snx-border-subtle);
  border-radius: var(--snx-radius-lg);
  padding: var(--snx-space-6);
  box-shadow: var(--snx-shadow-xs);
  position: relative;
}
.step-num {
  display: inline-grid; place-items: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--snx-gradient); color: #fff;
  font-weight: var(--snx-w-bold); font-size: var(--snx-fs-lg);
  margin-bottom: var(--snx-space-4);
}
.workflow-step h3 { font-size: var(--snx-fs-h4); margin-bottom: var(--snx-space-2); }
.workflow-step p { color: var(--snx-text-muted); margin: 0; font-size: var(--snx-fs-sm); }

/* ─── Page hero (inner pages) ───────────────────────────────────── */
.page-hero { padding-block: var(--snx-space-16) var(--snx-space-12); }
.page-hero-inner { max-width: 820px; }
.page-hero h1 { font-size: clamp(30px, 4vw, var(--snx-fs-h1)); margin-top: var(--snx-space-3); }
.page-hero-lead { color: var(--snx-text-muted); font-size: var(--snx-fs-lg); margin-top: var(--snx-space-4); }
.page-hero-lead p { margin: 0 0 var(--snx-space-3); }
.page-hero-lead p:last-child { margin-bottom: 0; }

/* ─── Generic feature/pillar grids (platform, science, clinics) ─── */
.pillar-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--snx-space-6); }
.pillar-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.pillar-card {
  background: var(--snx-surface-card);
  border: var(--snx-border-w) solid var(--snx-border-subtle);
  border-radius: var(--snx-radius-lg);
  padding: var(--snx-space-8);
  box-shadow: var(--snx-shadow-sm);
}
.pillar-card h2, .pillar-card h3 { font-size: var(--snx-fs-h4); margin-bottom: var(--snx-space-3); }
.pillar-card p { color: var(--snx-text-muted); margin: 0 0 var(--snx-space-2); }
.pillar-card p:last-child { margin-bottom: 0; }
.pillar-card ul { color: var(--snx-text-muted); margin: 0; padding-inline-start: 20px; }
.pillar-card li { margin-bottom: 6px; }

.numbered-list { counter-reset: principle; list-style: none; padding: 0; margin: 0; display: grid; gap: var(--snx-space-5); }
.numbered-item {
  background: var(--snx-surface-card);
  border: var(--snx-border-w) solid var(--snx-border-subtle);
  border-radius: var(--snx-radius-lg);
  padding: var(--snx-space-6) var(--snx-space-8);
  box-shadow: var(--snx-shadow-xs);
  display: grid; grid-template-columns: auto 1fr; gap: var(--snx-space-5); align-items: start;
}
.numbered-item h3 { font-size: var(--snx-fs-h4); margin-bottom: var(--snx-space-2); }
.numbered-item p { color: var(--snx-text-muted); margin: 0; }

.note-card {
  background: var(--snx-info-bg);
  border: var(--snx-border-w) solid var(--snx-blue-100);
  border-radius: var(--snx-radius-lg);
  padding: var(--snx-space-6) var(--snx-space-8);
  color: var(--snx-text-body);
}
.note-card h3 { font-size: var(--snx-fs-h4); margin-bottom: var(--snx-space-2); }
.note-card p { margin: 0; }

/* ─── FAQ ───────────────────────────────────────────────────────── */
.faq-list { display: grid; gap: var(--snx-space-4); max-width: 860px; margin-inline: auto; }
.faq-item {
  background: var(--snx-surface-card);
  border: var(--snx-border-w) solid var(--snx-border-subtle);
  border-radius: var(--snx-radius-md);
  box-shadow: var(--snx-shadow-xs);
  overflow: hidden;
}
.faq-item summary {
  cursor: pointer; list-style: none;
  padding: var(--snx-space-5) var(--snx-space-6);
  font-weight: var(--snx-w-semibold); color: var(--snx-text-strong);
  display: flex; align-items: center; justify-content: space-between; gap: var(--snx-space-4);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-size: 22px; color: var(--snx-blue); transition: transform var(--snx-dur-base) var(--snx-ease); }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-body { padding: 0 var(--snx-space-6) var(--snx-space-5); color: var(--snx-text-muted); }
.faq-body p { margin: 0; }

/* ─── News & articles ───────────────────────────────────────────── */
.news-columns { display: grid; grid-template-columns: 1fr 1fr; gap: var(--snx-space-10); }
.col-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--snx-space-4); margin-bottom: var(--snx-space-5); }
.col-head h3 { font-size: var(--snx-fs-h4); }
.col-head a { font-size: var(--snx-fs-sm); font-weight: var(--snx-w-semibold); }

.post-list { display: grid; gap: var(--snx-space-5); max-width: 860px; margin-inline: auto; }
.post-card {
  background: var(--snx-surface-card);
  border: var(--snx-border-w) solid var(--snx-border-subtle);
  border-radius: var(--snx-radius-lg);
  box-shadow: var(--snx-shadow-xs);
  transition: transform var(--snx-dur-base) var(--snx-ease), box-shadow var(--snx-dur-base) var(--snx-ease);
  margin-bottom: var(--snx-space-4);
}
.post-card:hover { transform: translateY(-3px); box-shadow: var(--snx-shadow-md); }
.post-card-body { padding: var(--snx-space-6); }
.post-date { font-size: var(--snx-fs-xs); color: var(--snx-text-subtle); display: block; margin-bottom: var(--snx-space-2); }
.post-title { font-size: var(--snx-fs-h4); margin-bottom: var(--snx-space-2); }
.post-title a { color: var(--snx-text-strong); }
.post-title a:hover { color: var(--snx-blue); }
.post-summary { color: var(--snx-text-muted); font-size: var(--snx-fs-sm); margin: 0 0 var(--snx-space-3); }
.post-more { font-size: var(--snx-fs-sm); font-weight: var(--snx-w-semibold); display: inline-flex; align-items: center; gap: 6px; }
.post-more .arrow { transition: transform var(--snx-dur-base) var(--snx-ease); display: inline-block; }
.post-more:hover .arrow { transform: translateX(4px); }
[dir="rtl"] .post-more .arrow { transform: scaleX(-1); }
[dir="rtl"] .post-more:hover .arrow { transform: scaleX(-1) translateX(4px); }

/* Post detail */
.post-detail { max-width: 800px; margin-inline: auto; }
.post-detail-head { margin-bottom: var(--snx-space-8); }
.post-detail-head h1 { font-size: clamp(28px, 4vw, var(--snx-fs-h1)); margin-top: var(--snx-space-2); }
.prose { color: var(--snx-text-body); font-size: 17px; }
.prose p { margin: 0 0 var(--snx-space-4); }
.prose h2 { font-size: var(--snx-fs-h3); margin: var(--snx-space-8) 0 var(--snx-space-3); }
.prose h3 { font-size: var(--snx-fs-h4); margin: var(--snx-space-6) 0 var(--snx-space-2); }
.prose ul, .prose ol { padding-inline-start: 22px; margin: 0 0 var(--snx-space-4); }
.prose li { margin-bottom: 6px; }
.prose blockquote {
  margin: var(--snx-space-6) 0; padding: var(--snx-space-4) var(--snx-space-6);
  border-inline-start: 3px solid var(--snx-violet);
  background: var(--snx-violet-050); border-radius: var(--snx-radius-sm);
  color: var(--snx-text-body);
}

/* ─── Forms ─────────────────────────────────────────────────────── */
.form-card {
  background: var(--snx-surface-card);
  border: var(--snx-border-w) solid var(--snx-border-subtle);
  border-radius: var(--snx-radius-lg);
  box-shadow: var(--snx-shadow-md);
  padding: var(--snx-space-10);
  max-width: 680px; margin-inline: auto;
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--snx-space-5); }
.form-grid .span-2 { grid-column: 1 / -1; }
.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-field label { font-size: var(--snx-fs-sm); font-weight: var(--snx-w-semibold); color: var(--snx-text-strong); }

.form-field input[type="text"], .form-field input[type="email"], .form-field input[type="password"],
.form-field input[type="tel"], .form-field input[type="date"], .form-field input[type="datetime-local"],
.form-field select, .form-field textarea {
  font: inherit; color: var(--snx-text-body);
  background: var(--snx-n-25);
  border: var(--snx-border-w) solid var(--snx-border);
  border-radius: var(--snx-radius-sm);
  padding: 11px 14px;
  transition: border-color var(--snx-dur-fast) var(--snx-ease), box-shadow var(--snx-dur-fast) var(--snx-ease), background-color var(--snx-dur-fast);
  width: 100%;
}
.form-field textarea { min-height: 130px; resize: vertical; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  outline: none; border-color: var(--snx-blue); background: #fff;
  box-shadow: 0 0 0 3px var(--snx-focus-ring);
}
.form-field input.input-validation-error, .form-field textarea.input-validation-error { border-color: var(--snx-error); }

.field-validation-error { color: var(--snx-error); font-size: var(--snx-fs-xs); }
.validation-summary-errors {
  background: var(--snx-error-bg); color: var(--snx-error);
  border: var(--snx-border-w) solid rgba(229,72,77,0.3);
  border-radius: var(--snx-radius-sm); padding: var(--snx-space-3) var(--snx-space-4);
  margin-bottom: var(--snx-space-5); font-size: var(--snx-fs-sm);
}
.validation-summary-errors ul { margin: 0; padding-inline-start: 18px; }
.validation-summary-valid { display: none; }

.alert { border-radius: var(--snx-radius-md); padding: var(--snx-space-4) var(--snx-space-5); margin-bottom: var(--snx-space-5); font-size: var(--snx-fs-sm); }
.alert-success { background: var(--snx-success-bg); color: var(--snx-success); border: var(--snx-border-w) solid rgba(31,169,113,0.3); }
.alert-info { background: var(--snx-info-bg); color: var(--snx-blue-700); border: var(--snx-border-w) solid var(--snx-blue-100); }
.alert-warn { background: var(--snx-warning-bg); color: #9A6308; border: var(--snx-border-w) solid rgba(245,166,35,0.35); }

.checkbox-row { display: flex; align-items: center; gap: 8px; }
.checkbox-row input { width: 17px; height: 17px; accent-color: var(--snx-blue); }
.checkbox-row label { font-size: var(--snx-fs-sm); color: var(--snx-text-body); font-weight: var(--snx-w-regular); }

/* ─── Footer (light — the brand mark is designed for light surfaces) ─ */
.snx-footer {
  background: var(--snx-surface-card);
  color: var(--snx-text-body);
  border-top: var(--snx-border-w) solid var(--snx-border-subtle);
  margin-top: 0;
  padding-top: var(--snx-space-16);
}
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--snx-space-12); padding-bottom: var(--snx-space-12); }
.footer-brand-link { display: inline-block; margin-bottom: var(--snx-space-4); }
.footer-landscape { height: 56px; width: auto; display: block; }
.footer-tagline { color: var(--snx-text-strong); font-size: var(--snx-fs-sm); font-weight: var(--snx-w-semibold); margin: 0 0 var(--snx-space-3); }
.snx-footer h4, .snx-footer h5 { color: var(--snx-navy); margin-bottom: var(--snx-space-4); font-size: var(--snx-fs-body); }
.footer-about { font-size: var(--snx-fs-sm); color: var(--snx-text-muted); max-width: 42ch; line-height: 1.9; }
.footer-about p { margin: 0 0 var(--snx-space-2); }
.footer-about p:last-child { margin-bottom: 0; }
.footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer-links a { color: var(--snx-text-body); font-size: var(--snx-fs-sm); }
.footer-links a:hover { color: var(--snx-blue); }
.footer-bottom {
  display: flex; align-items: center; justify-content: space-between; gap: var(--snx-space-4); flex-wrap: wrap;
  border-top: 1px solid var(--snx-border-subtle);
  padding-block: var(--snx-space-6);
  font-size: var(--snx-fs-xs); color: var(--snx-text-muted);
}
.footer-note { opacity: 0.9; }

/* ─── Auth pages ────────────────────────────────────────────────── */
.auth-body { min-height: 100vh; display: grid; place-items: center; padding: var(--snx-space-8) var(--snx-gutter); }
.auth-wrap { width: 100%; max-width: 440px; display: flex; flex-direction: column; align-items: center; gap: var(--snx-space-6); }
.auth-logo { height: 48px; width: auto; }
.auth-card {
  width: 100%;
  background: var(--snx-surface-card);
  border: var(--snx-border-w) solid var(--snx-border-subtle);
  border-radius: var(--snx-radius-xl);
  box-shadow: var(--snx-shadow-lg);
  padding: var(--snx-space-10);
  position: relative; overflow: hidden;
}
.auth-card::before { content: ""; position: absolute; top: 0; inset-inline: 0; height: 4px; }
.auth-card.accent-blue::before { background: var(--snx-gradient); }
.auth-card.accent-violet::before { background: linear-gradient(135deg, var(--snx-violet) 0%, var(--snx-violet-deep) 100%); }
.auth-title { font-size: var(--snx-fs-h3); margin-bottom: var(--snx-space-2); }
.auth-sub { color: var(--snx-text-muted); font-size: var(--snx-fs-sm); margin: 0 0 var(--snx-space-6); }
.auth-form { display: grid; gap: var(--snx-space-4); }
.auth-foot { margin-top: var(--snx-space-5); font-size: var(--snx-fs-sm); color: var(--snx-text-muted); text-align: center; }
.auth-back { font-size: var(--snx-fs-sm); color: var(--snx-text-muted); }
.auth-back:hover { color: var(--snx-blue); }

/* ─── Admin / portal panel shell ────────────────────────────────── */
.panel-body { background: var(--snx-surface-sunken); min-height: 100vh; }
.panel-shell { display: grid; grid-template-columns: 250px 1fr; min-height: 100vh; }
.panel-sidebar {
  background: var(--snx-bg-dark);
  padding: var(--snx-space-6) var(--snx-space-4);
  display: flex; flex-direction: column; gap: var(--snx-space-8);
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.panel-logo { height: 36px; width: auto; display: block; margin-inline: var(--snx-space-2); }
.panel-nav { display: grid; gap: 4px; }
.panel-nav a {
  color: #AEB9DC; font-size: var(--snx-fs-sm); font-weight: var(--snx-w-medium);
  padding: 10px 14px; border-radius: var(--snx-radius-sm);
  transition: background-color var(--snx-dur-fast) var(--snx-ease), color var(--snx-dur-fast);
}
.panel-nav a:hover { background: rgba(255,255,255,0.06); color: #fff; }
.panel-nav a.active { background: var(--snx-gradient); color: #fff; }
.panel-nav .nav-sep { border: none; border-top: 1px solid rgba(123,145,200,0.18); margin: var(--snx-space-3) 0; }

.panel-main { padding: var(--snx-space-8) var(--snx-space-10); min-width: 0; }
.panel-topbar { display: flex; align-items: center; justify-content: space-between; gap: var(--snx-space-4); margin-bottom: var(--snx-space-8); flex-wrap: wrap; }
.panel-topbar h1 { font-size: var(--snx-fs-h2); }
.panel-topbar-actions { display: flex; align-items: center; gap: var(--snx-space-3); flex-wrap: wrap; }
.panel-user { font-size: var(--snx-fs-sm); color: var(--snx-text-muted); }

.panel-card {
  background: var(--snx-surface-card);
  border: var(--snx-border-w) solid var(--snx-border-subtle);
  border-radius: var(--snx-radius-lg);
  box-shadow: var(--snx-shadow-xs);
  padding: var(--snx-space-6);
  margin-bottom: var(--snx-space-6);
}
.panel-card h2 { font-size: var(--snx-fs-h4); margin-bottom: var(--snx-space-4); }

.stat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--snx-space-4); margin-bottom: var(--snx-space-8); }
.stat-card {
  background: var(--snx-surface-card);
  border: var(--snx-border-w) solid var(--snx-border-subtle);
  border-radius: var(--snx-radius-lg);
  padding: var(--snx-space-5) var(--snx-space-6);
  box-shadow: var(--snx-shadow-xs);
}
.stat-card .num { font-size: var(--snx-fs-h2); font-weight: var(--snx-w-bold); color: var(--snx-navy); display: block; }
.stat-card .lbl { font-size: var(--snx-fs-xs); color: var(--snx-text-muted); }
.stat-card.hot .num { background: var(--snx-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Tables */
.table-wrap { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: var(--snx-fs-sm); }
.data-table th {
  text-align: start; color: var(--snx-text-muted); font-weight: var(--snx-w-semibold);
  font-size: var(--snx-fs-xs); letter-spacing: 0.04em;
  padding: 10px 12px; border-bottom: 2px solid var(--snx-border);
  white-space: nowrap;
}
.data-table td { padding: 12px; border-bottom: 1px solid var(--snx-border-subtle); vertical-align: top; }
.data-table tr:hover td { background: var(--snx-n-25); }
.data-table .actions { display: flex; gap: 8px; flex-wrap: wrap; }

.chip { display: inline-flex; align-items: center; font-size: var(--snx-fs-xs); font-weight: var(--snx-w-semibold); border-radius: var(--snx-radius-pill); padding: 3px 10px; white-space: nowrap; }
.chip-ok { background: var(--snx-success-bg); color: var(--snx-success); }
.chip-pend { background: var(--snx-warning-bg); color: #9A6308; }
.chip-muted { background: var(--snx-n-100); color: var(--snx-text-muted); }
.chip-violet { background: var(--snx-violet-050); color: var(--snx-violet-700); }
.chip-blue { background: var(--snx-blue-050); color: var(--snx-blue-700); }

/* Quill editor inside admin forms */
.ql-wrap { background: #fff; border-radius: var(--snx-radius-sm); }
.ql-toolbar.ql-snow { border-radius: var(--snx-radius-sm) var(--snx-radius-sm) 0 0; border-color: var(--snx-border); }
.ql-container.ql-snow { border-radius: 0 0 var(--snx-radius-sm) var(--snx-radius-sm); border-color: var(--snx-border); min-height: 180px; font-family: inherit; font-size: var(--snx-fs-body); }
/* Quill's toolbar (icons + the "Normal" format picker) is designed LTR; on the
   RTL admin page its picker caret overlapped the label ("Normal" → "Normaˡ").
   Keep the toolbar chrome LTR while the editor CONTENT follows the page (RTL). */
.ql-toolbar.ql-snow { direction: ltr; text-align: left; }

.culture-tabs { display: flex; gap: 4px; margin-bottom: var(--snx-space-5); border-bottom: 2px solid var(--snx-border-subtle); }
.culture-tab {
  border: none; background: none; cursor: pointer; font: inherit;
  font-size: var(--snx-fs-sm); font-weight: var(--snx-w-semibold);
  color: var(--snx-text-muted); padding: 10px 18px;
  border-bottom: 2px solid transparent; margin-bottom: -2px;
}
.culture-tab.active { color: var(--snx-blue); border-bottom-color: var(--snx-blue); }
.culture-pane { display: none; }
.culture-pane.active { display: block; }

/* ─── Scroll-reveal animation ───────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity var(--snx-dur-slower) var(--snx-ease-out), transform var(--snx-dur-slower) var(--snx-ease-out); }
.reveal.revealed { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* ─── Utilities ─────────────────────────────────────────────────── */
.muted { color: var(--snx-text-muted); }
.text-center { text-align: center; }
.mt-2 { margin-top: var(--snx-space-2); } .mt-4 { margin-top: var(--snx-space-4); }
.mt-6 { margin-top: var(--snx-space-6); } .mt-8 { margin-top: var(--snx-space-8); }
.mb-4 { margin-bottom: var(--snx-space-4); } .mb-6 { margin-bottom: var(--snx-space-6); }

/* ─── Responsive ────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .hero-inner { grid-template-columns: 1fr; padding-block: var(--snx-space-16); }
  .hero-art { min-height: 320px; order: -1; }
  .cards-3, .why-grid, .pillar-grid { grid-template-columns: repeat(2, 1fr); }
  .workflow { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .panel-shell { grid-template-columns: 210px 1fr; }
  .panel-main { padding: var(--snx-space-6); }
}

@media (max-width: 768px) {
  .section { padding-block: var(--snx-space-12); }
  .two-col, .cards-3, .why-grid, .pillar-grid, .pillar-grid.cols-2, .workflow, .news-columns { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: var(--snx-space-8); }
  .hero-stats { gap: var(--snx-space-6); }

  .nav-toggle { display: block; }
  /* Keep the top bar compact so it never overflows (was shoving content in RTL):
     trim the logo + gaps, and move language + portal into the slide-down menu. */
  .header-inner { gap: var(--snx-space-4); }
  .brand-logo { height: 34px; }
  .header-actions .lang-switch { display: none; }
  .main-nav {
    display: none;
    position: absolute; top: 100%; inset-inline: 0;
    background: #fff; border-bottom: var(--snx-border-w) solid var(--snx-border-subtle);
    box-shadow: var(--snx-shadow-lg);
    flex-direction: column; align-items: stretch; gap: 0;
    padding: var(--snx-space-3) var(--snx-gutter) var(--snx-space-5);
  }
  .main-nav.open { display: flex; }
  .main-nav a { padding: 12px 4px; border-bottom: 1px solid var(--snx-border-subtle); }
  .main-nav a:last-child { border-bottom: none; }
  .portal-link { display: none; }
  .nav-mobile-only { display: block; }
  .nav-menu-lang { padding: 12px 4px 2px; }

  .panel-shell { grid-template-columns: 1fr; }
  .panel-sidebar { position: static; height: auto; flex-direction: column; }
  .panel-main { padding: var(--snx-space-5) var(--snx-space-4); }
  .numbered-item { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════
   Redesign components — products dropdown, editions, games catalog,
   gallery + lightbox, logo wall, social icons, server/feature cards,
   contact layout, admin media library & gallery manager.
   ════════════════════════════════════════════════════════════════ */

/* ─── Products dropdown (header) ────────────────────────────────── */
.nav-dd { position: relative; }
.nav-dd-trigger {
  display: inline-flex; align-items: center; gap: 6px;
  border: none; background: none; cursor: pointer; font: inherit;
  color: var(--snx-text-body); font-weight: var(--snx-w-medium); font-size: var(--snx-fs-sm);
  padding: 6px 2px;
}
.nav-dd-trigger:hover { color: var(--snx-blue); }
.nav-dd-caret { transition: transform var(--snx-dur-base) var(--snx-ease); }
.nav-dd:hover .nav-dd-caret, .nav-dd.open .nav-dd-caret { transform: rotate(180deg); }

.nav-dd-menu {
  position: absolute; top: calc(100% + 10px); inset-inline-start: -12px;
  min-width: 280px;
  background: #fff;
  border: var(--snx-border-w) solid var(--snx-border-subtle);
  border-radius: var(--snx-radius-lg);
  box-shadow: var(--snx-shadow-lg);
  padding: var(--snx-space-2);
  display: none;
  z-index: var(--snx-z-dropdown, 1000);
}
.nav-dd:hover .nav-dd-menu, .nav-dd:focus-within .nav-dd-menu, .nav-dd.open .nav-dd-menu { display: block; }
.nav-dd-menu::before { /* hover bridge so the menu doesn't close in the gap */
  content: ""; position: absolute; top: -12px; inset-inline: 0; height: 12px;
}
.nav-dd-item {
  display: flex; flex-direction: column; gap: 1px;
  padding: 10px 14px; border-radius: var(--snx-radius-sm);
  color: var(--snx-text-body); font-size: var(--snx-fs-sm);
}
.nav-dd-item:hover { background: var(--snx-blue-050); color: var(--snx-blue-700); }
.nav-dd-strong { font-weight: var(--snx-w-semibold); color: var(--snx-text-strong); }
.nav-dd-name { font-weight: var(--snx-w-semibold); }
.nav-dd-sub { font-size: var(--snx-fs-xs); color: var(--snx-text-muted); }
.nav-dd-sep { border-top: 1px solid var(--snx-border-subtle); margin: var(--snx-space-2) var(--snx-space-3); }

/* ─── Edition cards ─────────────────────────────────────────────── */
.edition-card {
  background: var(--snx-surface-card);
  border: var(--snx-border-w) solid var(--snx-border-subtle);
  border-radius: var(--snx-radius-lg);
  padding: var(--snx-space-8);
  box-shadow: var(--snx-shadow-sm);
  display: flex; flex-direction: column; gap: var(--snx-space-3);
  position: relative; overflow: hidden;
  transition: transform var(--snx-dur-base) var(--snx-ease), box-shadow var(--snx-dur-base) var(--snx-ease);
}
.edition-card:hover { transform: translateY(-6px); box-shadow: var(--snx-shadow-lg); }
.edition-card::before { content: ""; position: absolute; top: 0; inset-inline: 0; height: 4px; }
.edition-card.tone-blue::before { background: var(--snx-blue); }
.edition-card.tone-violet::before { background: var(--snx-violet); }
.edition-card.tone-gradient::before { background: var(--snx-gradient); }
.edition-name { font-size: var(--snx-fs-h3); }
.edition-card.tone-blue .edition-name { color: var(--snx-blue-700); }
.edition-card.tone-violet .edition-name { color: var(--snx-violet-700); }
.edition-tagline { font-weight: var(--snx-w-semibold); color: var(--snx-text-strong); margin: 0; }
.edition-summary { color: var(--snx-text-muted); margin: 0; font-size: var(--snx-fs-sm); }
.edition-count {
  font-size: var(--snx-fs-xs); color: var(--snx-text-muted);
  background: var(--snx-n-100); border-radius: var(--snx-radius-pill);
  padding: 4px 12px; align-self: start;
}
.edition-hero.tone-violet .snx-eyebrow { color: var(--snx-violet); }

/* ─── Server strip / hero card ──────────────────────────────────── */
.server-strip {
  display: flex; align-items: center; gap: var(--snx-space-5);
  background: var(--snx-bg-dark);
  color: #DCE4F9;
  border-radius: var(--snx-radius-lg);
  padding: var(--snx-space-5) var(--snx-space-6);
  box-shadow: var(--snx-shadow-md);
  transition: transform var(--snx-dur-base) var(--snx-ease), box-shadow var(--snx-dur-base) var(--snx-ease);
}
.server-strip:hover { transform: translateY(-3px); box-shadow: var(--snx-shadow-lg); color: #fff; }
.server-strip-icon {
  display: grid; place-items: center; flex-shrink: 0;
  width: 52px; height: 52px; border-radius: var(--snx-radius-md);
  background: var(--snx-gradient); color: #fff;
}
.server-strip-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.server-strip-text strong { color: #fff; font-size: var(--snx-fs-lg); }
.server-strip-text span p { margin: 0; font-size: var(--snx-fs-sm); color: #AEB9DC; }
.server-strip .post-more { color: var(--snx-cyan); flex-shrink: 0; }

.server-hero-card {
  display: flex; align-items: center; gap: var(--snx-space-8);
  background: var(--snx-bg-dark);
  border-radius: var(--snx-radius-xl);
  padding: var(--snx-space-10);
  box-shadow: var(--snx-shadow-lg);
  color: #C9D3EE;
  transition: transform var(--snx-dur-base) var(--snx-ease), box-shadow var(--snx-dur-base) var(--snx-ease);
}
.server-hero-card:hover { transform: translateY(-4px); color: #DCE4F9; }
.server-hero-icon {
  display: grid; place-items: center; flex-shrink: 0;
  width: 76px; height: 76px; border-radius: var(--snx-radius-lg);
  background: var(--snx-gradient); color: #fff;
}
.server-hero-icon svg { width: 38px; height: 38px; }
.server-hero-text { flex: 1; min-width: 0; }
.server-hero-text h2 { color: #fff; font-size: var(--snx-fs-h3); margin-bottom: var(--snx-space-2); }
.server-hero-text p { margin: 0 0 var(--snx-space-2); font-size: var(--snx-fs-sm); }
.server-hero-text p:last-child { margin-bottom: 0; }
.server-hero-card .post-more { color: var(--snx-cyan); flex-shrink: 0; }

/* ─── Games grid + cards ────────────────────────────────────────── */
.games-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--snx-space-6); }
.game-card {
  background: var(--snx-surface-card);
  border: var(--snx-border-w) solid var(--snx-border-subtle);
  border-radius: var(--snx-radius-lg);
  box-shadow: var(--snx-shadow-sm);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform var(--snx-dur-base) var(--snx-ease), box-shadow var(--snx-dur-base) var(--snx-ease);
}
.game-card:hover { transform: translateY(-6px); box-shadow: var(--snx-shadow-lg); }
.game-card-media {
  position: relative; display: block; aspect-ratio: 16 / 9;
  background: var(--snx-surface-sunken); overflow: hidden;
}
.game-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--snx-dur-slow) var(--snx-ease); }
.game-card:hover .game-card-media img { transform: scale(1.04); }
.game-card-fallback {
  display: grid; place-items: center; width: 100%; height: 100%;
  font-size: 56px; font-weight: var(--snx-w-bold); color: #fff;
}
.game-card-fallback.is-motor { background: linear-gradient(135deg, var(--snx-blue) 0%, var(--snx-cyan) 100%); }
.game-card-fallback.is-cognitive { background: linear-gradient(135deg, var(--snx-violet) 0%, var(--snx-violet-deep) 100%); }
.game-card-badges { position: absolute; top: 12px; inset-inline-start: 12px; display: flex; gap: 6px; }
.badge-beta { background: var(--snx-warning-bg); color: #9A6308; }
.badge-prep { background: var(--snx-blue-050); color: var(--snx-blue-700); }
.badge-prep::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--snx-blue); }
.game-card-body { padding: var(--snx-space-5) var(--snx-space-6) var(--snx-space-6); display: flex; flex-direction: column; gap: var(--snx-space-2); flex: 1; }
.game-card-top { display: flex; align-items: center; justify-content: space-between; gap: var(--snx-space-3); }
.game-card-name { font-size: var(--snx-fs-h4); }
.game-card-name a { color: var(--snx-text-strong); }
.game-card-name a:hover { color: var(--snx-blue); }
.game-card-tagline { color: var(--snx-text-muted); font-size: var(--snx-fs-sm); margin: 0; flex: 1; }

/* ─── Category filter tabs ──────────────────────────────────────── */
.filter-tabs { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.filter-tab {
  padding: 9px 22px; border-radius: var(--snx-radius-pill);
  border: var(--snx-border-w) solid var(--snx-border);
  color: var(--snx-text-body); font-size: var(--snx-fs-sm); font-weight: var(--snx-w-semibold);
  transition: background-color var(--snx-dur-fast) var(--snx-ease), color var(--snx-dur-fast), border-color var(--snx-dur-fast);
}
.filter-tab:hover { border-color: var(--snx-blue); color: var(--snx-blue); }
.filter-tab.active { background: var(--snx-gradient); border-color: transparent; color: #fff; }

/* ─── Game details page ─────────────────────────────────────────── */
.game-hero-inner { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: var(--snx-space-10); }
.game-hero-inner .page-hero-inner { max-width: none; }
.game-hero-meta { display: flex; align-items: center; gap: var(--snx-space-3); flex-wrap: wrap; margin-top: var(--snx-space-4); }
.game-hero-art img { width: 100%; height: auto; border-radius: var(--snx-radius-lg); box-shadow: var(--snx-shadow-lg); display: block; }
.game-video video { width: 100%; border-radius: var(--snx-radius-lg); box-shadow: var(--snx-shadow-md); display: block; background: #000; }
.game-sections { display: grid; gap: var(--snx-space-6); max-width: 900px; margin-inline: auto; }
.game-section {
  background: var(--snx-surface-card);
  border: var(--snx-border-w) solid var(--snx-border-subtle);
  border-radius: var(--snx-radius-lg);
  padding: var(--snx-space-8);
  box-shadow: var(--snx-shadow-sm);
}
.game-section-head { display: flex; align-items: center; gap: var(--snx-space-4); margin-bottom: var(--snx-space-4); }
.game-section-head h2 { font-size: var(--snx-fs-h3); }
.feature-icon {
  display: inline-grid; place-items: center; flex-shrink: 0;
  width: 46px; height: 46px; border-radius: var(--snx-radius-md);
  background: var(--snx-blue-050); color: var(--snx-blue);
}
.game-section:nth-child(even) .feature-icon { background: var(--snx-violet-050); color: var(--snx-violet); }

/* ─── Platform feature grid (server page) ───────────────────────── */
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--snx-space-6); }
.feature-card {
  background: var(--snx-surface-card);
  border: var(--snx-border-w) solid var(--snx-border-subtle);
  border-radius: var(--snx-radius-lg);
  padding: var(--snx-space-6);
  box-shadow: var(--snx-shadow-xs);
}
.feature-card .feature-icon { margin-bottom: var(--snx-space-4); }
.feature-card:nth-child(3n+2) .feature-icon { background: var(--snx-violet-050); color: var(--snx-violet); }
.feature-card:nth-child(3n) .feature-icon { background: rgba(91,200,247,0.16); color: #1992C8; }
.feature-card h3 { font-size: var(--snx-fs-h4); margin-bottom: var(--snx-space-2); }
.feature-card p { color: var(--snx-text-muted); margin: 0 0 var(--snx-space-2); font-size: var(--snx-fs-sm); }
.feature-card p:last-child { margin-bottom: 0; }
.feature-card ul { color: var(--snx-text-muted); font-size: var(--snx-fs-sm); margin: 0; padding-inline-start: 18px; }

/* ─── Gallery + lightbox ────────────────────────────────────────── */
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--snx-space-5); }
.gallery-item {
  position: relative; display: block; width: 100%;
  aspect-ratio: 16 / 10; border: none; padding: 0; cursor: zoom-in;
  border-radius: var(--snx-radius-md); overflow: hidden;
  background: var(--snx-surface-sunken);
  box-shadow: var(--snx-shadow-xs);
  transition: transform var(--snx-dur-base) var(--snx-ease), box-shadow var(--snx-dur-base) var(--snx-ease);
}
.gallery-item:hover { transform: translateY(-3px); box-shadow: var(--snx-shadow-md); }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-item.is-video { cursor: pointer; }
.gallery-video-ph { display: grid; place-items: center; width: 100%; height: 100%; font-size: 34px; color: var(--snx-text-muted); background: var(--snx-bg-dark); }
.gallery-play {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 22px; color: #fff;
  background: rgba(11,16,38,0.35);
}
.gallery-play::before { content: ""; }
.gallery-caption {
  position: absolute; bottom: 0; inset-inline: 0;
  padding: 18px 12px 8px; font-size: var(--snx-fs-xs); color: #fff; text-align: start;
  background: linear-gradient(transparent, rgba(11,16,38,0.78));
}
.lightbox {
  position: fixed; inset: 0; z-index: var(--snx-z-modal, 1100);
  background: rgba(11,16,38,0.9);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: var(--snx-space-8) var(--snx-gutter);
}
.lightbox[hidden] { display: none; }
.lightbox-content { max-width: min(1080px, 92vw); max-height: 78vh; display: grid; place-items: center; }
.lightbox-content img, .lightbox-content video { max-width: 100%; max-height: 78vh; border-radius: var(--snx-radius-md); box-shadow: var(--snx-shadow-lg); }
.lightbox-caption { color: #DCE4F9; font-size: var(--snx-fs-sm); margin-top: var(--snx-space-4); text-align: center; }
.lightbox-close {
  position: absolute; top: 18px; inset-inline-end: 22px;
  border: none; background: rgba(255,255,255,0.12); color: #fff;
  width: 42px; height: 42px; border-radius: 50%; font-size: 17px; cursor: pointer;
  transition: background-color var(--snx-dur-fast) var(--snx-ease);
}
.lightbox-close:hover { background: rgba(255,255,255,0.24); }

/* ─── Platform architecture diagram (dark band) ─────────────────── */
.arch-band { padding-block: var(--snx-space-20); }
.arch-band h2 { color: #F2F5FD; }
.arch-diagram {
  display: flex; align-items: stretch; justify-content: center;
  margin-top: var(--snx-space-10);
}
.arch-node {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: var(--snx-space-6) var(--snx-space-8);
  border-radius: var(--snx-radius-lg);
  border: 1px solid rgba(123,145,200,0.32);
  background: rgba(255,255,255,0.045);
  color: #DCE4F9; text-align: center; min-width: 190px;
  transition: transform var(--snx-dur-base) var(--snx-ease), border-color var(--snx-dur-base);
}
a.arch-node:hover { transform: translateY(-4px); border-color: var(--snx-cyan); color: #fff; }
.arch-node strong { font-size: var(--snx-fs-lg); color: #F2F5FD; }
.arch-server {
  background: var(--snx-gradient); border: none; color: #fff;
  box-shadow: 0 0 34px rgba(30,127,230,0.45);
}
.arch-server strong, .arch-server .arch-count { color: #fff; }
.arch-icon {
  display: grid; place-items: center;
  width: 48px; height: 48px; border-radius: var(--snx-radius-md);
  background: rgba(255,255,255,0.12); color: currentColor;
}
.arch-count { font-size: var(--snx-fs-xs); color: #AEB9DC; }
.arch-link {
  position: relative; align-self: center;
  width: 72px; height: 2px; flex-shrink: 0;
  background: linear-gradient(90deg, rgba(91,200,247,0.15), rgba(91,200,247,0.7), rgba(91,200,247,0.15));
}
.arch-link::after {
  content: ""; position: absolute; top: -3px; inset-inline-start: 0;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--snx-cyan); box-shadow: var(--snx-glow-cyan);
  animation: archPulse 2.6s var(--snx-ease-in-out) infinite;
}
@keyframes archPulse {
  0%, 100% { inset-inline-start: 0; opacity: 0.4; }
  50% { inset-inline-start: calc(100% - 8px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .arch-link::after { animation: none; } }

.suite-card { position: relative; overflow: hidden; }
.suite-card::before { content: ""; position: absolute; top: 0; inset-inline: 0; height: 4px; }
.suite-card.tone-blue::before { background: var(--snx-blue); }
.suite-card.tone-violet::before { background: var(--snx-violet); }
.suite-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: var(--snx-space-4); }
.suite-card .btn { align-self: start; }

@media (max-width: 860px) {
  .arch-diagram { flex-direction: column; align-items: center; gap: 0; }
  .arch-link { width: 2px; height: 44px; background: linear-gradient(180deg, rgba(91,200,247,0.15), rgba(91,200,247,0.7), rgba(91,200,247,0.15)); }
  .arch-link::after { inset-inline-start: -3px; top: 0; animation: archPulseV 2.6s var(--snx-ease-in-out) infinite; }
  @keyframes archPulseV {
    0%, 100% { top: 0; opacity: 0.4; }
    50% { top: calc(100% - 8px); opacity: 1; }
  }
  .arch-node { width: min(320px, 100%); }
}

/* ─── FDA validation strip + reference cards ────────────────────── */
.fda-strip {
  display: flex; align-items: center; gap: var(--snx-space-6);
  background: var(--snx-surface-card);
  border: var(--snx-border-w) solid var(--snx-border-subtle);
  border-inline-start: 4px solid var(--snx-blue);
  border-radius: var(--snx-radius-lg);
  padding: var(--snx-space-6) var(--snx-space-8);
  box-shadow: var(--snx-shadow-sm);
}
.fda-strip-icon {
  display: grid; place-items: center; flex-shrink: 0;
  width: 58px; height: 58px; border-radius: var(--snx-radius-md);
  background: var(--snx-gradient); color: #fff;
}
.fda-strip-icon svg { width: 30px; height: 30px; }
.fda-strip-text { flex: 1; min-width: 0; }
.fda-strip-text h2 { font-size: var(--snx-fs-h4); margin-bottom: var(--snx-space-2); }
.fda-strip-text p { color: var(--snx-text-muted); margin: 0; font-size: var(--snx-fs-sm); }
.fda-strip .btn { flex-shrink: 0; }

.fda-refs { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--snx-space-6); }
.fda-ref {
  background: var(--snx-surface-card);
  border: var(--snx-border-w) solid var(--snx-border-subtle);
  border-radius: var(--snx-radius-lg);
  padding: var(--snx-space-6);
  box-shadow: var(--snx-shadow-xs);
}
.fda-ref-badge {
  display: inline-grid; place-items: center;
  width: 44px; height: 44px; border-radius: var(--snx-radius-md);
  background: var(--snx-blue-050); color: var(--snx-blue);
  margin-bottom: var(--snx-space-4);
}
.fda-ref h3 { font-size: var(--snx-fs-h4); margin-bottom: var(--snx-space-2); }
.fda-ref p { color: var(--snx-text-muted); margin: 0 0 var(--snx-space-2); font-size: var(--snx-fs-sm); }
.fda-ref p:last-child { margin-bottom: 0; }
.fda-ref a { font-weight: var(--snx-w-semibold); direction: ltr; unicode-bidi: isolate; display: inline-block; }

@media (max-width: 1024px) { .fda-refs { grid-template-columns: 1fr; } }
@media (max-width: 768px) { .fda-strip { flex-direction: column; align-items: flex-start; } }

/* ─── Customers logo wall ───────────────────────────────────────── */
.logo-wall { display: flex; flex-wrap: wrap; gap: var(--snx-space-5); justify-content: center; }
.logo-wall-item {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 160px; min-height: 72px; padding: var(--snx-space-4) var(--snx-space-6);
  background: var(--snx-surface-card);
  border: var(--snx-border-w) solid var(--snx-border-subtle);
  border-radius: var(--snx-radius-md);
  box-shadow: var(--snx-shadow-xs);
  color: var(--snx-text-muted); font-weight: var(--snx-w-semibold); font-size: var(--snx-fs-sm);
  filter: grayscale(1); opacity: 0.82;
  transition: filter var(--snx-dur-base) var(--snx-ease), opacity var(--snx-dur-base), transform var(--snx-dur-base) var(--snx-ease);
}
.logo-wall-item:hover { filter: grayscale(0); opacity: 1; transform: translateY(-3px); }
.logo-wall-item img { max-height: 44px; max-width: 150px; object-fit: contain; display: block; }

/* ─── Social icons ──────────────────────────────────────────────── */
.footer-social { display: flex; gap: 10px; margin-top: var(--snx-space-5); flex-wrap: wrap; }
.social-icon {
  display: inline-grid; place-items: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--snx-n-100); color: var(--snx-text-muted);
  transition: background-color var(--snx-dur-fast) var(--snx-ease), color var(--snx-dur-fast), transform var(--snx-dur-fast) var(--snx-ease);
}
.social-icon:hover { background: var(--snx-gradient); color: #fff; transform: translateY(-2px); }
.contact-social .social-icon { background: var(--snx-n-100); color: var(--snx-text-muted); }
.contact-social .social-icon:hover { background: var(--snx-gradient); color: #fff; }

/* ─── Footer contact column ─────────────────────────────────────── */
.footer-contact { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.footer-contact li { display: flex; align-items: flex-start; gap: 10px; font-size: var(--snx-fs-sm); color: var(--snx-text-body); }
.footer-contact li svg { flex-shrink: 0; margin-top: 2px; color: var(--snx-blue); opacity: 0.9; }
.footer-contact a { color: var(--snx-text-body); }
.footer-contact a:hover { color: var(--snx-blue); }
.snx-footer .footer-grid { grid-template-columns: 2fr 1fr 1fr 1.3fr; }

/* ─── Contact page layout ───────────────────────────────────────── */
.contact-layout { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--snx-space-8); align-items: start; }
.contact-channel-list li { color: var(--snx-text-body); }
.contact-channel-list li svg { color: var(--snx-blue); }
.contact-channel-list a { color: var(--snx-text-body); }
.contact-channel-list a:hover { color: var(--snx-blue); }

/* ─── Admin: sidebar groups, media library, gallery manager ─────── */
.panel-nav .nav-group {
  display: block; margin: var(--snx-space-4) 14px 4px;
  font-size: 10.5px; font-weight: var(--snx-w-bold); letter-spacing: 0.09em;
  color: #6B7BA8; text-transform: uppercase;
}
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--snx-space-4); }
.media-card {
  background: var(--snx-surface-card);
  border: var(--snx-border-w) solid var(--snx-border-subtle);
  border-radius: var(--snx-radius-md);
  overflow: hidden; padding: 0; font: inherit; text-align: start;
  display: flex; flex-direction: column;
  box-shadow: var(--snx-shadow-xs);
}
button.media-card { cursor: pointer; transition: transform var(--snx-dur-fast) var(--snx-ease), box-shadow var(--snx-dur-fast) var(--snx-ease); }
button.media-card:hover { transform: translateY(-3px); box-shadow: var(--snx-shadow-md); border-color: var(--snx-blue); }
.media-thumb { display: grid; place-items: center; aspect-ratio: 4 / 3; background: var(--snx-surface-sunken); overflow: hidden; }
.media-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-ext { font-weight: var(--snx-w-bold); color: var(--snx-text-muted); font-size: var(--snx-fs-sm); }
.media-meta { padding: 10px 12px; display: grid; gap: 4px; font-size: var(--snx-fs-xs); }
.media-meta strong { color: var(--snx-text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.media-url {
  font: inherit; font-size: 11px; font-family: var(--snx-font-mono);
  border: 1px dashed var(--snx-border); border-radius: var(--snx-radius-xs, 4px);
  background: var(--snx-n-25); color: var(--snx-text-muted);
  padding: 4px 6px; cursor: copy; width: 100%;
}
.media-card form { padding: 0 12px 12px; }

.media-field { display: flex; gap: 8px; align-items: stretch; }
.media-field input { flex: 1; }
.media-field-preview { max-height: 72px; max-width: 200px; object-fit: contain; border-radius: var(--snx-radius-sm); border: var(--snx-border-w) solid var(--snx-border-subtle); margin-top: 6px; }

.gallery-admin-list { display: grid; gap: var(--snx-space-5); }
.gallery-admin-item {
  display: grid; grid-template-columns: 200px 1fr; gap: var(--snx-space-5);
  border: var(--snx-border-w) solid var(--snx-border-subtle);
  border-radius: var(--snx-radius-md); padding: var(--snx-space-4);
  background: var(--snx-n-25);
}
.gallery-admin-item .media-thumb { border-radius: var(--snx-radius-sm); }

.setting-row { display: grid; gap: 6px; margin-bottom: var(--snx-space-5); }
.setting-row-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.setting-row-head label { font-size: var(--snx-fs-sm); font-weight: var(--snx-w-semibold); color: var(--snx-text-strong); }
.setting-row input, .setting-row textarea {
  font: inherit; color: var(--snx-text-body);
  background: var(--snx-n-25);
  border: var(--snx-border-w) solid var(--snx-border);
  border-radius: var(--snx-radius-sm);
  padding: 11px 14px; width: 100%;
}
.setting-row input:focus, .setting-row textarea:focus {
  outline: none; border-color: var(--snx-blue); background: #fff;
  box-shadow: 0 0 0 3px var(--snx-focus-ring);
}

/* ─── Structured content manager (pages → blocks) ───────────────── */
.content-pages { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--snx-space-4); }
.content-page-card {
  display: flex; flex-direction: column; gap: 6px;
  background: var(--snx-surface-card);
  border: var(--snx-border-w) solid var(--snx-border-subtle);
  border-radius: var(--snx-radius-lg);
  padding: var(--snx-space-5) var(--snx-space-6);
  box-shadow: var(--snx-shadow-xs);
  transition: transform var(--snx-dur-fast) var(--snx-ease), box-shadow var(--snx-dur-fast) var(--snx-ease), border-color var(--snx-dur-fast);
}
.content-page-card:hover { transform: translateY(-3px); box-shadow: var(--snx-shadow-md); border-color: var(--snx-blue); }
.content-page-card.is-legacy { border-style: dashed; opacity: 0.8; }
.content-page-title { font-weight: var(--snx-w-semibold); color: var(--snx-text-strong); font-size: var(--snx-fs-body); }
.content-page-url { font-family: var(--snx-font-mono); font-size: var(--snx-fs-xs); color: var(--snx-text-subtle); }
.content-page-stats { display: flex; gap: 6px; flex-wrap: wrap; margin-top: var(--snx-space-2); }

.content-entry-list { display: grid; gap: 10px; }
.content-entry {
  display: grid; grid-template-columns: 1fr auto auto; gap: var(--snx-space-4); align-items: center;
  padding: 12px 16px;
  background: var(--snx-n-25);
  border: var(--snx-border-w) solid var(--snx-border-subtle);
  border-radius: var(--snx-radius-md);
}
.content-entry-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.content-entry-info strong { color: var(--snx-text-strong); }
.entry-hint { color: var(--snx-text-muted); font-size: var(--snx-fs-xs); }
.entry-key { font-family: var(--snx-font-mono); font-size: 11px; color: var(--snx-text-subtle); direction: ltr; unicode-bidi: isolate; }
.entry-langs { display: inline-flex; gap: 4px; }
.content-entry-actions { display: flex; gap: 6px; align-items: center; }

@media (max-width: 768px) {
  .content-entry { grid-template-columns: 1fr; }
}

.dash-editions { display: flex; gap: var(--snx-space-3); flex-wrap: wrap; }
.dash-edition {
  display: inline-flex; flex-direction: column; gap: 2px;
  border: var(--snx-border-w) solid var(--snx-border-subtle);
  border-radius: var(--snx-radius-md);
  padding: 10px 18px; font-size: var(--snx-fs-sm);
  background: var(--snx-n-25); color: var(--snx-text-body);
  transition: border-color var(--snx-dur-fast) var(--snx-ease), transform var(--snx-dur-fast) var(--snx-ease);
}
.dash-edition:hover { border-color: var(--snx-blue); transform: translateY(-2px); }
.active-filter { border-color: var(--snx-blue); color: var(--snx-blue); }

/* ─── Responsive for redesign components ────────────────────────── */
@media (max-width: 1024px) {
  .games-grid, .gallery-grid, .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .game-hero-inner { grid-template-columns: 1fr; }
  .game-hero-art { max-width: 460px; }
  .snx-footer .footer-grid { grid-template-columns: 1fr 1fr; }
  .contact-layout { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .games-grid, .gallery-grid, .feature-grid { grid-template-columns: 1fr; }
  .snx-footer .footer-grid { grid-template-columns: 1fr; }
  .server-strip { flex-direction: column; align-items: flex-start; }
  .server-hero-card { flex-direction: column; align-items: flex-start; gap: var(--snx-space-5); padding: var(--snx-space-6); }
  .gallery-admin-item { grid-template-columns: 1fr; }
  .cards-3[style] { grid-template-columns: 1fr !important; }

  /* Dropdown becomes an inline expandable block inside the mobile nav */
  .nav-dd { width: 100%; }
  .nav-dd-trigger { width: 100%; justify-content: space-between; padding: 12px 4px; border-bottom: 1px solid var(--snx-border-subtle); }
  .nav-dd-menu {
    position: static; min-width: 0; box-shadow: none; border: none;
    border-inline-start: 2px solid var(--snx-border-subtle);
    border-radius: 0; margin-inline-start: var(--snx-space-3);
  }
  .nav-dd:hover .nav-dd-menu, .nav-dd:focus-within .nav-dd-menu { display: none; }
  .nav-dd.open .nav-dd-menu { display: block; }
}