/* Layout + brand theme for NodWeb's own site: dark, technical, quietly
   confident — distinct from the warm client-demo templates below it. */

:root {
  --color-bg: #0f1326;
  --color-bg-alt: #141833;
  --color-surface: #161b38;
  --color-border: #2b3160;
  --color-text: #eef0fb;
  --color-text-muted: #9aa1c9;
  --color-accent: #6d87ff;
  --color-accent-hover: #8ea0ff;
  --color-accent-contrast: #0b0e1f;
  --font-display: "Bricolage Grotesque", "Segoe UI", sans-serif;
  --font-body: "JetBrains Mono", "Segoe UI", monospace;
  --gradient-signature: linear-gradient(100deg, #2dd4bf 0%, #ec4899 52%, #f59e0b 100%);
}

body {
  background: var(--color-bg);
}

h1, h2, h3 { font-weight: 800; letter-spacing: -0.02em; }
.eyebrow, .badge, .site-nav__brand, .btn { font-family: "JetBrains Mono", monospace; }
.eyebrow, .badge { letter-spacing: 0.06em; }
.site-nav__brand { letter-spacing: -0.02em; font-weight: 700; }

.gradient-text {
  background: var(--gradient-signature);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

/* ---------- Language switcher ---------- */
.lang-switch {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}
.lang-switch__flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 40px;
  border-radius: var(--radius-sm);
  font-size: 1.2rem;
  line-height: 1;
  text-decoration: none;
  filter: grayscale(65%);
  opacity: 0.55;
  transition: opacity var(--duration-fast) var(--ease), filter var(--duration-fast) var(--ease), background-color var(--duration-fast) var(--ease);
}
.lang-switch__flag:hover { opacity: 0.85; filter: grayscale(20%); }
.lang-switch__flag.is-current {
  opacity: 1;
  filter: none;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  cursor: default;
}
@media (max-width: 780px) {
  .site-nav__links .lang-switch {
    width: auto;
    justify-content: center;
    border-bottom: none;
    padding-block: var(--space-3);
  }
  .site-nav__links .lang-switch__flag {
    width: auto;
    min-height: 44px;
    border-bottom: none;
  }
}

.badge-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-5);
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(6px);
  font-family: "JetBrains Mono", monospace;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.hero { padding-block: var(--space-12) var(--space-10); text-align: center; position: relative; overflow: hidden; }
.hero .container { max-width: 860px; }
.hero h1 { font-size: var(--text-3xl); line-height: 1.08; }
.hero__intro { font-size: var(--text-lg); max-width: 56ch; margin-inline: auto; }
.hero-actions { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; }
.hero .btn--primary {
  background: var(--gradient-signature);
  color: #0b0e1f;
  border: none;
}
.hero .btn--primary:hover { filter: brightness(1.08); }
.hero .btn--secondary { border-radius: 999px; }
.hero .btn--primary { border-radius: 999px; }

.hero-node-mark {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 900px;
  height: 900px;
  transform: translate(-50%, -50%);
  color: var(--color-accent);
  opacity: 0.06;
  pointer-events: none;
}

.hero-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  z-index: 0;
}
.hero-glow--a { width: 480px; height: 480px; top: -140px; right: -80px; background: rgba(45, 212, 191, 0.30); }
.hero-glow--b { width: 420px; height: 420px; bottom: -160px; left: -100px; background: rgba(236, 72, 153, 0.24); }
.hero-glow--c { width: 380px; height: 380px; bottom: -120px; right: 10%; background: rgba(245, 158, 11, 0.18); }
.hero .container { position: relative; z-index: 1; }
.hero-node-mark { z-index: 1; }

.work-media { aspect-ratio: 16 / 10; }

.process-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
}
.process-list li { display: flex; flex-direction: column; gap: var(--space-3); }
.process-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: var(--color-accent);
  color: var(--color-accent-contrast);
  font-weight: 700;
  font-family: "JetBrains Mono", monospace;
}
@media (max-width: 860px) {
  .process-list { grid-template-columns: 1fr; }
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  align-items: start;
}
@media (max-width: 860px) {
  .contact-grid { grid-template-columns: 1fr; }
}