/* ============================================================
   Clash – Shared Stylesheet
   Used by all language pages via: ../../assets/css/main.css
   ============================================================ */

/* ---------- Base ---------- */
body {
  background-color: #060608;
  color: #e2e8f0;
}

/* ---------- Grid background ---------- */
.bg-grid {
  background-size: 48px 48px;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.022) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.022) 1px, transparent 1px);
}

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: #060608; }
::-webkit-scrollbar-thumb { background: #2d3748; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #4a5568; }

/* ---------- Gradient text ---------- */
.text-gradient {
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(135deg, #60a5fa 0%, #22d3ee 100%);
}

/* ---------- Glass card ---------- */
.glass-card {
  background: rgba(255, 255, 255, 0.028);
  border: 1px solid rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: border-color 0.3s, background 0.3s;
}
.glass-card:hover {
  background: rgba(255, 255, 255, 0.048);
  border-color: rgba(255, 255, 255, 0.13);
}

/* ---------- Network connection line animation ---------- */
.conn-line {
  stroke-dasharray: 8 300;
  stroke-linecap: round;
  animation: travel-dot 2.5s linear infinite;
  transition: stroke-opacity 0.25s ease;
}
.conn-line.active {
  stroke-opacity: 1 !important;
}
@keyframes travel-dot {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -308; }
}

/* ---------- Platform node ---------- */
.platform-node {
  cursor: default;
}
/* Scale is applied to .node-card (inner), NOT the outer wrapper,
   so it doesn't conflict with translateX/translateY positioning */
.node-card {
  transition:
    transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
    filter 0.3s ease;
}
.platform-node:hover .node-card {
  transform: scale(1.12) translateY(-4px);
  filter: brightness(1.3);
}
.node-label {
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.platform-node:hover .node-label {
  transform: translateY(-3px);
  opacity: 1 !important;
}

/* ---------- FAQ accordion ---------- */
.faq-body {
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease;
}

/* ---------- Primary CTA button ---------- */
.btn-primary {
  background: linear-gradient(135deg, #2563eb, #0891b2);
  transition: all 0.25s ease;
}
.btn-primary:hover {
  background: linear-gradient(135deg, #3b82f6, #06b6d4);
  box-shadow: 0 0 40px rgba(59, 130, 246, 0.45), 0 0 80px rgba(6, 182, 212, 0.15);
  transform: translateY(-1px);
}

/* ---------- Navbar base + scroll state ---------- */
#navbar {
  background: rgba(6, 6, 8, 0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  transition:
    background 0.3s ease,
    border-color 0.3s ease,
    padding 0.3s ease,
    backdrop-filter 0.3s ease;
}

#navbar.scrolled {
  background: rgba(6, 6, 8, 0.88);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-color: rgba(255, 255, 255, 0.07);
  padding-top: 14px;
  padding-bottom: 14px;
}

#navbar.menu-open {
  background: rgba(6, 6, 8, 0.97);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-color: rgba(255, 255, 255, 0.06);
}