/* =============================================================
   VIce Net — Main Stylesheet
   Design tokens → Layout → Components → Sections → Utilities
   ============================================================= */

/* ── TOKENS ── */
:root {
  --vn-cyan:    #22D3EE;
  --vn-blue:    #3B82F6;
  --vn-violet:  #8B5CF6;
  --vn-magenta: #EC4899;

  /* Hybrid theme defaults (light hero + dark sections) */
  --vn-bg:          #F6F7FB;
  --vn-bg-alt:      #FFFFFF;
  --vn-bg-dark:     #07060F;
  --vn-bg-deeper:   #0B0918;
  --vn-ink:         #0B0A1A;
  --vn-ink-soft:    #3B3A52;
  --vn-ink-mute:    #6E6D86;
  --vn-line:        rgba(11,10,26,0.08);
  --vn-line-strong: rgba(11,10,26,0.14);
  --vn-glass:       rgba(255,255,255,0.65);
  --vn-glass-dk:    rgba(255,255,255,0.04);

  --vn-grad:      linear-gradient(95deg, #22D3EE 0%, #3B82F6 32%, #8B5CF6 66%, #EC4899 100%);
  --vn-grad-soft: linear-gradient(95deg, rgba(34,211,238,.18) 0%, rgba(59,130,246,.18) 32%, rgba(139,92,246,.18) 66%, rgba(236,72,153,.18) 100%);

  --vn-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --vn-body:    'Inter', ui-sans-serif, system-ui, sans-serif;
  --vn-mono:    'JetBrains Mono', ui-monospace, monospace;

  --vn-r-sm: 8px;
  --vn-r-md: 14px;
  --vn-r-lg: 22px;
  --vn-r-xl: 32px;
}

/* ── DARK MODE ── */
html.is-dark {
  --vn-bg:          #07060F;
  --vn-bg-alt:      #0B0918;
  --vn-ink:         #ECEAFF;
  --vn-ink-soft:    #BBB8D8;
  --vn-ink-mute:    #8887A0;
  --vn-line:        rgba(255,255,255,0.07);
  --vn-line-strong: rgba(255,255,255,0.12);
  --vn-glass:       rgba(255,255,255,0.05);
  --vn-glass-dk:    rgba(255,255,255,0.08);
}
html.is-dark .vn-hero { background: var(--vn-bg-dark); color: #ECEAFF; }
html.is-dark .vn-stat-card { background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.08); }
html.is-dark .vn-stat-key { color: #807EA0; }
html.is-dark .vn-stat-sub { color: #807EA0; }
html.is-dark .vn-stat-value { color: #ECEAFF; }
html.is-dark .vn-section:not(.vn-section-dark) { background: var(--vn-bg); }
/* dark header scrolled — handled in .vn-header.is-scrolled block below */
html.is-dark .vn-nav a { color: rgba(255,255,255,.6); }
html.is-dark .vn-nav a:hover { color: #fff; background: rgba(255,255,255,.06); }
html.is-dark .vn-wordmark { color: #ECEAFF; }
html.is-dark .vn-mobile-menu { background: rgba(7,6,15,.9); border-color: rgba(255,255,255,.1); }
html.is-dark .vn-mobile-menu a { color: #ECEAFF; }
html.is-dark .vn-mobile-toggle { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); color: #ECEAFF; }
html.is-dark .vn-eyebrow { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.1); color: #BBB8D8; }
html.is-dark .vn-btn-ghost { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); color: #ECEAFF; }

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { background: var(--vn-bg); }

body {
  font-family: var(--vn-body);
  font-size: 16px;
  color: var(--vn-ink);
  background: var(--vn-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  line-height: 1.55;
}

a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
p { margin: 0; }
h1, h2, h3, h4, h5, h6 { margin: 0; }

/* Custom scrollbar */
::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--vn-violet), var(--vn-blue));
  border-radius: 999px;
  border: 4px solid var(--vn-bg);
  background-clip: padding-box;
}

/* ── LAYOUT ── */
.vn-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
  position: relative;
}

.vn-section {
  position: relative;
  padding: 120px 0;
  /* overflow: visible — pozwala glow blobsom przelewać się między sekcjami */
}

.vn-section-dark {
  background: var(--vn-bg-dark);
  color: #ECEAFF;
}

/* Sekcja ciemna po jasnej */
.vn-after-light.vn-section-dark {
  background: linear-gradient(to bottom, var(--vn-bg) 0px, var(--vn-bg-dark) 320px);
}
/* Sekcja jasna po ciemnej */
.vn-after-dark:not(.vn-section-dark) {
  background: linear-gradient(to bottom, var(--vn-bg-dark) 0px, var(--vn-bg) 320px);
}

@media (max-width: 768px) {
  .vn-section { padding: 80px 0; }
  .vn-container { padding: 0 20px; }
}

/* ── TYPOGRAPHY ── */
.vn-h1 {
  font-family: var(--vn-display);
  font-weight: 600;
  font-size: clamp(40px, 6.4vw, 84px);
  line-height: 0.98;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.vn-h2 {
  font-family: var(--vn-display);
  font-weight: 600;
  font-size: clamp(32px, 4.2vw, 56px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.vn-h3 {
  font-family: var(--vn-display);
  font-weight: 600;
  font-size: clamp(20px, 1.6vw, 24px);
  line-height: 1.2;
  letter-spacing: -0.015em;
}

.vn-lead {
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.55;
  color: var(--vn-ink-soft);
  max-width: 60ch;
  text-wrap: pretty;
}

.vn-mono { font-family: var(--vn-mono); letter-spacing: 0.02em; }
.vn-display { font-family: var(--vn-display); letter-spacing: -0.02em; }

.vn-grad-text {
  background: var(--vn-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ── BUTTONS ── */
.vn-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: 999px;
  font-family: var(--vn-display);
  font-weight: 600;
  font-size: 15px;
  border: 0;
  cursor: pointer;
  position: relative;
  transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s, filter .25s;
  white-space: nowrap;
  text-decoration: none;
}

.vn-btn-primary {
  background: var(--vn-grad);
  color: #fff;
  box-shadow: 0 8px 28px -8px rgba(139,92,246,.55), 0 2px 0 rgba(255,255,255,.25) inset;
}

.vn-btn-primary:hover {
  transform: translateY(-1px);
  filter: brightness(1.08) saturate(1.05);
  box-shadow: 0 14px 40px -8px rgba(139,92,246,.65), 0 2px 0 rgba(255,255,255,.3) inset;
  color: #fff;
}

.vn-btn-ghost {
  background: var(--vn-glass);
  color: var(--vn-ink);
  border: 1px solid var(--vn-line-strong);
}

.vn-btn-ghost:hover {
  transform: translateY(-1px);
  border-color: rgba(139,92,246,.5);
  box-shadow: 0 8px 24px -10px rgba(139,92,246,.45);
  color: var(--vn-ink);
}

.vn-btn-dark {
  background: rgba(255,255,255,0.08);
  color: #ECEAFF;
  border: 1px solid rgba(255,255,255,0.14);
}

.vn-btn-dark:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(34,211,238,0.5);
  color: #ECEAFF;
  transform: translateY(-1px);
}

/* Small button variant */
.vn-btn-sm { padding: 11px 18px; font-size: 14px; }

/* ── EYEBROW ── */
.vn-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px 7px 10px;
  border-radius: 999px;
  background: var(--vn-glass);
  border: 1px solid var(--vn-line-strong);
  font-family: var(--vn-mono);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vn-ink-soft);
}

.vn-section-dark .vn-eyebrow {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.1);
  color: #BBB8D8;
}

.vn-eyebrow-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--vn-grad);
  box-shadow: 0 0 12px var(--vn-violet);
  flex: none;
}

/* ── BACKGROUND GRID ── */
.vn-grid-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.vn-grid-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ── GLOW BLOBS — statyczne (bez animacji CSS), brak GPU layers per blob ── */
.vn-glow {
  position: absolute;
  inset: -200px 0 -200px 0;
  pointer-events: none;
  overflow: visible;
  z-index: 0;
  will-change: transform;
}

.vn-glow-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(28px);
  pointer-events: none;
}

.vn-glow-blob-0 {
  top: -10%; left: -5%;
  width: 520px; height: 520px;
  background: radial-gradient(closest-side, #22D3EE 0%, transparent 70%);
  opacity: 0.2;
}

.vn-glow-blob-1 {
  top: 20%; right: -10%;
  width: 600px; height: 600px;
  background: radial-gradient(closest-side, #8B5CF6 0%, transparent 70%);
  opacity: 0.2;
}

.vn-glow-blob-2 {
  bottom: 10%; left: 30%;
  width: 480px; height: 480px;
  background: radial-gradient(closest-side, #EC4899 0%, transparent 70%);
  opacity: 0.16;
}

.vn-section-dark .vn-glow-blob-0,
.vn-section-dark .vn-glow-blob-1,
.vn-section-dark .vn-glow-blob-2 { opacity: 0.28; }

/* ── REVEAL ANIMATION ── */
.vn-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .65s cubic-bezier(.16,1,.3,1), transform .65s cubic-bezier(.16,1,.3,1);
}
.vn-reveal.is-in {
  opacity: 1;
  transform: translateY(0);
}

/* ── SECTION GLOW DIVIDERS ── */
/* Elementy wstawiane przez JS między sekcjami jasna↔ciemna */
.vn-sec-divider {
  position: relative;
  height: 0;
  overflow: visible;
  pointer-events: none;
  z-index: 5;
}
.vn-sec-divider-blob {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: min(900px, 120vw);
  height: 320px;
  top: -160px;
  border-radius: 50%;
  filter: blur(48px);
  will-change: transform;
}
.vn-sec-divider-ld .vn-sec-divider-blob {
  background: radial-gradient(ellipse at center,
    rgba(139,92,246,.28) 0%,
    rgba(59,130,246,.18) 40%,
    transparent 70%
  );
}
.vn-sec-divider-dl .vn-sec-divider-blob {
  background: radial-gradient(ellipse at center,
    rgba(34,211,238,.22) 0%,
    rgba(139,92,246,.18) 40%,
    transparent 70%
  );
}

/* ── HEADER ── */
.vn-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  transition: padding .3s ease;
  padding: 18px 0;
}

.vn-header.is-scrolled { padding: 10px 0; }

.vn-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1280px;
  margin: 0 auto;
  padding: 6px 14px 6px 18px;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: background .3s ease, border-color .3s ease, box-shadow .3s ease, padding .3s ease;
}

.vn-header.is-scrolled .vn-header-inner {
  background: rgba(246,247,251,0.96);
  border-color: rgba(11,10,26,0.12);
  box-shadow: 0 2px 16px rgba(11,10,26,0.10), 0 8px 32px -12px rgba(11,10,26,0.12);
  padding: 10px 14px 10px 18px;
}
html.is-dark .vn-header.is-scrolled .vn-header-inner {
  background: rgba(7,6,15,0.96);
  border-color: rgba(255,255,255,0.1);
  box-shadow: 0 2px 16px rgba(0,0,0,0.35), 0 8px 32px -12px rgba(0,0,0,0.3);
}

.vn-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.vn-logo-mark {
  width: 36px;
  height: 36px;
  flex: none;
}

.vn-logo-img {
  max-height: 36px;
  width: auto;
  display: block;
  flex: none;
}

.vn-footer-logo-img {
  max-height: 40px;
  width: auto;
  display: block;
}

.vn-wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--vn-display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--vn-ink);
  text-decoration: none;
}

.vn-wordmark .net { background: var(--vn-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

.vn-nav {
  display: flex;
  align-items: center;
  gap: 4px;
}

.vn-nav a {
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  color: var(--vn-ink-soft);
  transition: color .2s, background .2s;
  text-decoration: none;
}

.vn-nav a:hover {
  color: var(--vn-ink);
  background: rgba(11,10,26,0.04);
}

.vn-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.vn-mobile-toggle {
  display: inline-flex;
  background: var(--vn-glass);
  border: 1px solid var(--vn-line-strong);
  border-radius: 12px;
  padding: 10px;
  color: var(--vn-ink);
  cursor: pointer;
  transition: background .2s;
}

.vn-mobile-toggle:hover {
  background: var(--vn-line);
}

.vn-mobile-menu {
  display: none;
  margin: 12px 20px 0;
  padding: 16px;
  border-radius: 18px;
  background: rgba(246,247,251,0.97);
  border: 1px solid var(--vn-line-strong);
  flex-direction: column;
  gap: 6px;
}

.vn-mobile-menu.is-open { display: flex; }

.vn-mobile-menu a {
  padding: 10px 12px;
  border-radius: 12px;
  font-weight: 500;
  color: var(--vn-ink);
  text-decoration: none;
  transition: background .2s;
}

.vn-mobile-menu a:hover { background: var(--vn-line); }

.vn-mobile-menu-cta {
  display: flex;
  gap: 10px;
  padding: 10px 12px 4px;
  border-top: 1px solid var(--vn-line);
  margin-top: 4px;
  align-items: center;
  flex-wrap: wrap;
}

.vn-mobile-menu-cta .vn-btn {
  flex: 1;
  justify-content: center;
  min-width: 140px;
}

.vn-mobile-menu-controls {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 4px 12px 10px;
}

@media (min-width: 1121px) {
  .vn-mobile-toggle { display: none; }  /* burger widoczny tylko na mobile */
}
@media (max-width: 1120px) {
  .vn-nav { display: none; }
  .vn-header-actions .vn-btn { display: none; }
  .vn-header-inner { padding: 6px 12px; }
  #vn-dark-toggle { display: none; }
}

@media (max-width: 420px) {
  .vn-wordmark { display: none; }
}

/* ── HERO ── */
.vn-hero {
  position: relative;
  padding-top: 160px;
  padding-bottom: 120px;
  background: var(--vn-bg);
  color: var(--vn-ink);
  overflow: hidden;
  min-height: 92vh;
  display: flex;
  align-items: center;
}

.vn-hero-content {
  position: relative;
  z-index: 2;
}

.vn-hero-ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 56px;
  margin-top: 36px;
}

.vn-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-top: 24px;
}

.vn-stat-card {
  padding: 18px 20px;
  border-radius: var(--vn-r-md);
  background: var(--vn-bg-alt);
  border: 1px solid var(--vn-line-strong);
}

.vn-stat-key {
  font-family: var(--vn-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vn-ink-mute);
  margin-bottom: 6px;
}

.vn-stat-value {
  font-family: var(--vn-display);
  font-size: 28px;
  font-weight: 600;
  line-height: 1;
  margin-bottom: 4px;
}

.vn-stat-sub {
  font-size: 13px;
  color: var(--vn-ink-mute);
}

/* Hero spin decoration */
.vn-hero-deco {
  position: absolute;
  right: -40px;
  top: 40px;
  width: 320px;
  height: 320px;
  pointer-events: none;
  opacity: 0.85;
}

.vn-hero-deco-inner {
  width: 100%;
  height: 100%;
  border-radius: 24px;
  background: conic-gradient(from 220deg, rgba(34,211,238,0), rgba(34,211,238,.45), rgba(139,92,246,.45), rgba(236,72,153,.45), rgba(34,211,238,0));
  filter: blur(36px);
  animation: vn-spin 28s linear infinite;
  will-change: transform;
}

@keyframes vn-spin { to { transform: rotate(360deg); } }

/* ── SERVICES ── */
.vn-section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
  margin-bottom: 56px;
}

.vn-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 380px));
  gap: 18px;
  justify-content: center;
}

.vn-service-card {
  position: relative;
  padding: 28px 26px;
  border-radius: var(--vn-r-lg);
  background: var(--vn-bg-alt);
  border: 1px solid var(--vn-line-strong);
  overflow: hidden;
  transition: transform .3s cubic-bezier(.2,.7,.2,1), border-color .3s, box-shadow .3s;
}

.vn-service-card-glow {
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: var(--vn-grad);
  opacity: 0;
  transition: opacity .35s;
  z-index: -1;
  filter: blur(20px);
}

.vn-service-card:hover {
  transform: translateY(-3px);
  border-color: rgba(139,92,246,.5);
  box-shadow: 0 20px 60px -24px rgba(139,92,246,.35);
}

.vn-service-card:hover .vn-service-card-glow { opacity: 0.18; }

.vn-service-icon-wrap {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: var(--vn-grad);
  color: #fff;
  box-shadow: 0 8px 24px -10px rgba(139,92,246,.6);
  flex: none;
}

.vn-service-header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 22px;
}

.vn-service-tag {
  font-family: var(--vn-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--vn-ink-mute);
}

.vn-service-title {
  margin-bottom: 10px;
}

.vn-service-copy {
  color: var(--vn-ink-soft);
  font-size: 15px;
  margin-bottom: 18px;
}

.vn-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.vn-tag {
  font-family: var(--vn-mono);
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--vn-line-strong);
  color: var(--vn-ink-soft);
  background: var(--vn-bg-alt);
}

/* ── WHY US ── */
.vn-why-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

.vn-why-cell {
  flex: 1 1 260px;
  max-width: 380px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--vn-r-lg);
  padding: 30px 28px;
  transition: background .3s, border-color .3s;
  position: relative;
}

.vn-why-cell:hover {
  background: linear-gradient(180deg, rgba(34,211,238,.07), rgba(139,92,246,.05));
  border-color: rgba(139,92,246,.35);
}

.vn-why-icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--vn-cyan);
}

.vn-why-title {
  color: #ECEAFF;
  margin-bottom: 8px;
}

.vn-why-desc { color: #BBB8D8; font-size: 14.5px; }

/* ── STACK ── */
.vn-stack-table {
  border-radius: var(--vn-r-lg);
  border: 1px solid var(--vn-line-strong);
  background: var(--vn-bg-alt);
  overflow: hidden;
}

.vn-stack-row {
  display: grid;
  grid-template-columns: 220px 1fr;
  align-items: center;
  padding: 22px 26px;
  gap: 24px;
  border-top: 1px solid var(--vn-line-strong);
}

.vn-stack-row:first-child { border-top: none; }

.vn-stack-label-num {
  font-family: var(--vn-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vn-ink-mute);
  margin-bottom: 6px;
}

.vn-stack-label-name {
  font-family: var(--vn-display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.vn-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.vn-chip {
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 500;
  background: var(--vn-bg-alt);
  border: 1px solid var(--vn-line-strong);
  color: var(--vn-ink);
  transition: all .2s;
}

.vn-chip:hover {
  border-color: rgba(139,92,246,.5);
  box-shadow: 0 4px 18px -8px rgba(139,92,246,.45);
  transform: translateY(-1px);
}

@media (max-width: 720px) {
  .vn-stack-row { grid-template-columns: 1fr; }
}

/* ── PROCESS ── */
.vn-process-list {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.vn-step {
  position: relative;
  padding: 28px 24px;
  border-radius: var(--vn-r-lg);
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  min-height: 220px;
  overflow: hidden;
  transition: all .3s;
}

.vn-step:hover {
  background: rgba(255,255,255,.05);
  border-color: rgba(139,92,246,.4);
  transform: translateY(-2px);
}

.vn-step-num {
  position: absolute;
  top: 18px;
  right: 22px;
  font-family: var(--vn-display);
  font-weight: 700;
  font-size: 64px;
  letter-spacing: -0.04em;
  background: var(--vn-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0.5;
  line-height: 1;
  user-select: none;
}

.vn-step-body { position: relative; margin-top: 60px; }
.vn-step-title { color: #ECEAFF; margin-bottom: 8px; }
.vn-step-desc { color: #BBB8D8; font-size: 14px; }

/* ── PRICING ── */
.vn-pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 18px;
  align-items: stretch;
}

.vn-plan {
  position: relative;
  padding: 32px 28px;
  border-radius: var(--vn-r-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform .3s;
}

.vn-plan:hover { transform: translateY(-2px); }

.vn-plan-light {
  background: var(--vn-bg-alt);
  color: var(--vn-ink);
  border: 1px solid var(--vn-line-strong);
  box-shadow: 0 8px 28px -16px rgba(11,10,26,.12);
}

.vn-plan-featured {
  background: var(--vn-bg-dark);
  color: #ECEAFF;
  border: 1px solid rgba(139,92,246,.5);
  box-shadow: 0 30px 80px -30px rgba(139,92,246,.55);
}

.vn-plan-border {
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: var(--vn-grad);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.7;
  pointer-events: none;
}

.vn-plan-badge {
  align-self: flex-start;
  font-family: var(--vn-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fff;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--vn-grad);
  margin-bottom: 16px;
}

.vn-plan-name {
  font-family: var(--vn-display);
  font-size: 26px;
  font-weight: 600;
  margin-bottom: 8px;
}

.vn-plan-desc {
  font-size: 14px;
  margin-bottom: 24px;
}

.vn-plan-light .vn-plan-desc { color: var(--vn-ink-soft); }
.vn-plan-featured .vn-plan-desc { color: #BBB8D8; }

.vn-plan-price-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 24px;
}

.vn-plan-price {
  font-family: var(--vn-display);
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.vn-plan-featured .vn-plan-price {
  background: var(--vn-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.vn-plan-period { font-size: 14px; color: var(--vn-ink-mute); }
.vn-plan-featured .vn-plan-period { color: #807EA0; }

.vn-plan-features {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 28px;
  flex: 1;
}

.vn-plan-feature {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
}

.vn-plan-feature-icon {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  flex: none;
  display: grid;
  place-items: center;
}

.vn-plan-light .vn-plan-feature-icon {
  background: var(--vn-grad-soft);
  color: var(--vn-violet);
}

.vn-plan-featured .vn-plan-feature-icon {
  background: rgba(34,211,238,.12);
  color: var(--vn-cyan);
}

.vn-plan-cta { justify-content: center; }

/* ── PORTFOLIO ── */
.vn-portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 18px;
}

.vn-port-card {
  position: relative;
  border-radius: var(--vn-r-lg);
  border: 1px solid var(--vn-line-strong);
  background: var(--vn-bg-alt);
  overflow: hidden;
  transition: all .35s;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--vn-ink);
}

.vn-port-card:hover {
  transform: translateY(-3px);
  border-color: rgba(139,92,246,.5);
  box-shadow: 0 30px 60px -30px rgba(139,92,246,.4);
}

.vn-port-visual {
  aspect-ratio: 16 / 10;
  position: relative;
  overflow: hidden;
}

.vn-port-visual-grid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.vn-port-icon-wrap {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

.vn-port-icon-box {
  width: 82px;
  height: 82px;
  border-radius: 22px;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.22);
  display: grid;
  place-items: center;
  color: #fff;
}

.vn-port-tag {
  position: absolute;
  top: 14px;
  left: 14px;
  font-family: var(--vn-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.45);
  color: #fff;
  border: 1px solid rgba(255,255,255,.22);
}

.vn-port-body { padding: 22px 24px 24px; }

.vn-port-title { margin-bottom: 8px; }

.vn-port-meta {
  font-family: var(--vn-mono);
  font-size: 12px;
  color: var(--vn-ink-mute);
  letter-spacing: 0.04em;
}

/* ── TESTIMONIALS ── */
.vn-testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
}

.vn-testimonial {
  margin: 0;
  padding: 30px 28px;
  border-radius: var(--vn-r-lg);
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  position: relative;
  overflow: hidden;
}

.vn-testimonial-glow {
  position: absolute;
  top: -40px;
  right: -40px;
  width: 200px;
  height: 200px;
  opacity: 0.18;
  filter: blur(36px);
  border-radius: 50%;
  pointer-events: none;
}

.vn-quote-mark {
  font-family: var(--vn-display);
  font-size: 70px;
  line-height: 0.6;
  color: rgba(255,255,255,.18);
  margin-bottom: 4px;
  user-select: none;
}

.vn-quote-text {
  font-size: 17px;
  line-height: 1.55;
  color: #ECEAFF;
  margin-bottom: 24px;
  position: relative;
}

.vn-quote-author {
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
}

.vn-quote-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex: none;
  display: grid;
  place-items: center;
  font-family: var(--vn-display);
  font-weight: 700;
  color: #fff;
  font-size: 15px;
}

.vn-quote-name { font-weight: 600; color: #ECEAFF; }
.vn-quote-role { font-size: 13px; color: #807EA0; }

/* ── FAQ ── */
.vn-faq-layout {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1.4fr);
  gap: 56px;
  align-items: start;
}

.vn-faq-items {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.vn-faq-item {
  border-radius: var(--vn-r-md);
  border: 1px solid var(--vn-line-strong);
  background: rgba(255,255,255,.04);
  overflow: hidden;
  transition: border-color .25s, box-shadow .25s;
}

.vn-faq-item.is-open {
  border-color: rgba(139,92,246,.4);
  box-shadow: 0 14px 40px -20px rgba(139,92,246,.35);
}

.vn-faq-btn {
  width: 100%;
  padding: 20px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: transparent;
  border: 0;
  color: var(--vn-ink);
  text-align: left;
  font-family: var(--vn-display);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.01em;
  cursor: pointer;
  gap: 12px;
}

.vn-faq-icon {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  flex: none;
  display: grid;
  place-items: center;
  background: var(--vn-bg-alt);
  color: var(--vn-ink);
  border: 1px solid var(--vn-line-strong);
  transition: all .2s;
}

.vn-faq-item.is-open .vn-faq-icon {
  background: var(--vn-grad);
  color: #fff;
  border: none;
}

.vn-faq-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s cubic-bezier(.2,.7,.2,1);
}

.vn-faq-item.is-open .vn-faq-body { max-height: 240px; }

.vn-faq-answer {
  padding: 0 22px 22px;
  color: var(--vn-ink-soft);
  font-size: 15px;
  line-height: 1.55;
}

@media (max-width: 880px) {
  .vn-faq-layout { grid-template-columns: 1fr; gap: 32px; }
}

/* ── CONTACT ── */
.vn-contact-layout {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 56px;
  align-items: flex-start;
}

.vn-contact-info { }

.vn-contact-items {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 32px;
}

.vn-contact-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.vn-contact-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  flex: none;
}

.vn-contact-icon-mail { background: rgba(34,211,238,.1); color: var(--vn-cyan); }
.vn-contact-icon-phone { background: rgba(139,92,246,.12); color: var(--vn-violet); }
.vn-contact-icon-pin { background: rgba(236,72,153,.12); color: var(--vn-magenta); }

.vn-contact-label {
  font-family: var(--vn-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #807EA0;
  margin-bottom: 2px;
}

.vn-contact-value { color: #ECEAFF; font-weight: 500; }

.vn-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(34,211,238,.08);
  border: 1px solid rgba(34,211,238,.25);
  color: #ECEAFF;
  font-size: 13px;
}

.vn-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--vn-cyan);
  box-shadow: 0 0 12px var(--vn-cyan);
  animation: vn-pulse 1.6s ease-in-out infinite;
}

@keyframes vn-pulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50% { opacity: .5; transform: scale(.85); }
}

/* Contact form */
.vn-form-card {
  padding: 28px;
  border-radius: var(--vn-r-lg);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  overflow: hidden;
}

.vn-form-border {
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(34,211,238,.5), rgba(139,92,246,0) 50%, rgba(236,72,153,.45));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.5;
  pointer-events: none;
}

.vn-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.vn-field { display: flex; flex-direction: column; gap: 8px; }

.vn-field label {
  font-family: var(--vn-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #807EA0;
}

.vn-field input,
.vn-field textarea,
.vn-field select {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  color: #ECEAFF;
  font-family: var(--vn-body);
  font-size: 14px;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
  resize: vertical;
  -webkit-appearance: none;
  appearance: none;
}

.vn-field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23BBB8D8' stroke-width='1.5'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
  cursor: pointer;
}

.vn-field select option { background: #0B0918; color: #ECEAFF; }

.vn-field input::placeholder,
.vn-field textarea::placeholder { color: #4A4860; }

.vn-field input:focus,
.vn-field textarea:focus,
.vn-field select:focus {
  border-color: rgba(139,92,246,.6);
  box-shadow: 0 0 0 3px rgba(139,92,246,.12);
}

.vn-form-submit { justify-content: center; margin-top: 6px; }

.vn-form-privacy {
  font-size: 12px;
  color: #807EA0;
  text-align: center;
}

.vn-form-privacy a { color: #BBB8D8; text-decoration: underline; }

.vn-form-success {
  padding: 40px 12px;
  text-align: center;
  display: none;
}

.vn-form-success.is-shown { display: block; }

.vn-form-success-icon {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  margin: 0 auto 20px;
  background: var(--vn-grad);
  display: grid;
  place-items: center;
  color: #fff;
}

@media (max-width: 980px) {
  .vn-contact-layout { grid-template-columns: 1fr; gap: 40px; }
  .vn-form-row { grid-template-columns: 1fr; }
}

/* ── FOOTER ── */
.vn-footer {
  background: var(--vn-bg-deeper);
  color: #BBB8D8;
  padding: 80px 0 40px;
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(255,255,255,.06);
}

.vn-footer-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 70% at 50% 0%, rgba(139,92,246,.12) 0%, transparent 70%);
  pointer-events: none;
}

.vn-footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 60px;
}

.vn-footer-brand p {
  max-width: 38ch;
  color: #807EA0;
  font-size: 14.5px;
  line-height: 1.6;
}

.vn-footer-logotype {
  font-family: var(--vn-display);
  font-weight: 700;
  font-size: clamp(64px, 12vw, 180px);
  line-height: 1;
  letter-spacing: -0.04em;
  background: var(--vn-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0.18;
  margin-top: 28px;
  user-select: none;
}

.vn-footer-logotype--img {
  -webkit-text-fill-color: unset;
  background: none;
  max-width: 100%;
  height: auto;
  opacity: 0.18;
  filter: grayscale(1) brightness(3);
}

.vn-footer-col-title {
  font-family: var(--vn-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #ECEAFF;
  margin-bottom: 18px;
}

.vn-footer-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.vn-footer-links a {
  color: #BBB8D8;
  font-size: 14px;
  text-decoration: none;
  transition: color .2s;
}

.vn-footer-links a:hover { color: #ECEAFF; }

.vn-footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.08);
}

.vn-footer-copy { font-size: 13px; color: #807EA0; }
.vn-footer-build { font-family: var(--vn-mono); font-size: 12px; color: #807EA0; letter-spacing: 0.06em; }

@media (max-width: 920px) {
  .vn-footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .vn-footer-grid { grid-template-columns: 1fr; }
}

/* ── CIRCUIT SVG ── */
.vn-circuit-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}
@keyframes vn-circuit-flow {
  to { stroke-dashoffset: -120; }
}
.vn-circ-p1 {
  animation: vn-circuit-flow 18s linear infinite;
}
.vn-circ-p2 {
  animation: vn-circuit-flow 26s linear infinite reverse;
}
@media (prefers-reduced-motion: reduce) {
  .vn-circ-p1, .vn-circ-p2 { animation: none; }
}

/* ── PAGE TEMPLATES ── */
.vn-page-hero {
  position: relative;
  padding: 160px 0 80px;
  background: var(--vn-bg-dark);
  color: #ECEAFF;
  overflow: clip;
  overflow-clip-margin: 0px;
}

.vn-page-content {
  padding: 80px 0;
  background: var(--vn-bg);
  color: var(--vn-ink);
}

.vn-page-content .entry-content {
  max-width: 780px;
  font-size: 17px;
  line-height: 1.7;
  color: var(--vn-ink-soft);
}

.vn-page-content .entry-content h2,
.vn-page-content .entry-content h3 {
  font-family: var(--vn-display);
  font-weight: 600;
  color: var(--vn-ink);
  margin: 32px 0 16px;
}

.vn-page-content .entry-content p { margin-bottom: 20px; }

/* ── ICONS (inline SVG via PHP) ── */
.vn-icon { display: block; flex: none; }

/* ── CTA SECTION ── */
.vn-cta-section {
  padding: 120px 0;
  background: var(--vn-bg-dark);
  color: #ECEAFF;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.vn-cta-section h2 { color: #ECEAFF; margin-bottom: 16px; }
.vn-cta-section p { color: #BBB8D8; margin-bottom: 32px; }
.vn-cta-actions { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }

/* ── SKIP LINK ── */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--vn-violet);
  color: #fff;
  padding: 8px;
  z-index: 9999;
  border-radius: 0 0 4px 0;
  transition: top .2s;
}
.skip-link:focus { top: 0; }

/* ── FULL WIDTH template ── */
.page-template-page-fullwidth .vn-header + * { margin-top: 0; }
body.page-template-page-fullwidth #primary { width: 100%; max-width: none; padding: 0; }

/* ── ELEMENTOR compatibility ── */
.elementor-page .vn-header { position: fixed; }
.elementor-section { position: relative; z-index: 1; }

/* ── PAGINATION ── */
.vn-pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 40px 0;
}

.vn-pagination .page-numbers {
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid var(--vn-line-strong);
  color: var(--vn-ink-soft);
  font-size: 14px;
  transition: all .2s;
}

.vn-pagination .page-numbers.current,
.vn-pagination .page-numbers:hover {
  background: var(--vn-grad);
  color: #fff;
  border-color: transparent;
}

/* ── RESPONSIVE MEDIA ── */
.wp-block-image { margin: 24px 0; }
.wp-block-image img { border-radius: var(--vn-r-md); }
.wp-caption { max-width: 100%; }
iframe { max-width: 100%; }

/* ── CAREERS ── */
.vn-careers-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--vn-r-lg);
  overflow: hidden;
  margin-bottom: 72px;
}

.vn-careers-stat {
  padding: 32px 24px;
  background: rgba(255,255,255,.03);
  text-align: center;
}

.vn-careers-stat-value,
.vn-careers-stats .vn-stat-value {
  font-family: var(--vn-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  background: var(--vn-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  margin-bottom: 6px;
}

.vn-careers-stat-label,
.vn-careers-stats .vn-stat-sub {
  font-size: 13px;
  color: rgba(255,255,255,.5);
  letter-spacing: .04em;
}

/* Job cards */
.vn-jobs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 20px;
  margin-bottom: 72px;
}

.vn-job-card {
  position: relative;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--vn-r-lg);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 0;
  transition: border-color .3s, transform .3s, box-shadow .3s;
  overflow: hidden;
}

.vn-job-card::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: var(--vn-grad);
  opacity: 0;
  z-index: -1;
  transition: opacity .35s;
  filter: blur(22px);
}

.vn-job-card:hover {
  transform: translateY(-3px);
  border-color: rgba(139,92,246,.45);
  box-shadow: 0 20px 60px -24px rgba(139,92,246,.3);
}

.vn-job-card:hover::before { opacity: .15; }

.vn-job-header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 16px;
}

.vn-job-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: #fff;
  flex: none;
  box-shadow: 0 8px 24px -10px rgba(139,92,246,.6);
}

.vn-job-title-wrap { flex: 1; min-width: 0; }

.vn-job-card h4 {
  font-family: var(--vn-display);
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 4px;
  line-height: 1.25;
}

.vn-job-stack {
  font-family: var(--vn-mono);
  font-size: 11px;
  color: rgba(255,255,255,.45);
  letter-spacing: .06em;
}

.vn-job-summary {
  font-size: 14px;
  color: rgba(255,255,255,.55);
  line-height: 1.6;
  margin-bottom: 16px;
  flex: 1;
}

.vn-job-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.vn-job-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: rgba(255,255,255,.5);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px;
  padding: 4px 10px;
}

.vn-job-salary {
  font-family: var(--vn-mono);
  font-size: 13px;
  font-weight: 600;
  color: #22D3EE;
  margin-bottom: 16px;
}

.vn-job-actions {
  display: flex;
  gap: 10px;
  margin-top: auto;
  padding-top: 18px;
}

.vn-job-actions .vn-btn { font-size: 13px; padding: 9px 18px; }

.vn-job-card .vn-tag {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.1);
  color: rgba(255,255,255,.6);
}

.vn-job-card .vn-tag-list { margin-bottom: 0; }

.vn-job-apply-btn { flex: 1; justify-content: center; }

/* Benefits */
.vn-benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: var(--vn-r-lg);
  overflow: hidden;
  margin-bottom: 72px;
}

.vn-benefit-cell {
  background: rgba(255,255,255,.025);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: background .25s;
}

.vn-benefit-cell:hover { background: rgba(255,255,255,.055); }

.vn-benefit-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--vn-grad);
  color: #fff;
  flex: none;
}

.vn-benefit-title {
  font-family: var(--vn-display);
  font-size: 15px;
  font-weight: 700;
  color: #fff;
}

.vn-benefit-desc {
  font-size: 13px;
  color: rgba(255,255,255,.5);
  line-height: 1.55;
}

/* Remove browser hidden default so CSS opacity/pointer-events control visibility */
.vn-modal[hidden] { display: flex; }

/* Career success */
.vn-career-success[style*="display: flex"],
.vn-career-success[style*="display:flex"] { display: flex !important; }

/* Careers spontaneous CTA */
.vn-careers-cta {
  position: relative;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--vn-r-xl);
  padding: 56px 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  overflow: hidden;
  margin-top: 72px;
}

.vn-careers-cta-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 60% at 50% 100%, rgba(139,92,246,.25) 0%, transparent 70%);
  pointer-events: none;
}

/* ── MODAL ── */
.vn-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s;
}

.vn-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}

.vn-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(7,6,15,.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.vn-modal-wrap {
  position: relative;
  background: #0F0E1C;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--vn-r-xl) var(--vn-r-xl) 0 0;
  width: 100%;
  max-width: 760px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  transform: translateY(40px);
  transition: transform .3s cubic-bezier(.22,1,.36,1);
  overflow: hidden;
}

.vn-modal.is-open .vn-modal-wrap { transform: translateY(0); }

.vn-modal-header {
  position: relative;
  padding: 0 28px 0;
  flex: none;
  overflow: hidden;
}

.vn-modal-header-band {
  position: absolute;
  inset: 0;
  opacity: .18;
}

.vn-modal-grid-bg {
  position: absolute;
  inset: 0;
  opacity: .08;
}

.vn-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.07);
  color: rgba(255,255,255,.7);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background .2s, color .2s;
}

.vn-modal-close:hover { background: rgba(255,255,255,.14); color: #fff; }

.vn-modal-title-row {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 28px 0 20px;
}

.vn-modal-icon-box {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  color: #fff;
  flex: none;
}

.vn-modal-title-text { flex: 1; min-width: 0; }

.vn-modal-title-text h2 {
  font-family: var(--vn-display);
  font-size: clamp(17px, 2.5vw, 22px);
  font-weight: 800;
  color: #fff;
  margin: 0 0 4px;
}

.vn-modal-seniority {
  font-family: var(--vn-mono);
  font-size: 11px;
  letter-spacing: .1em;
  color: rgba(255,255,255,.45);
  text-transform: uppercase;
}

.vn-modal-meta {
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.4);
  margin-bottom: 4px;
}

.vn-modal-strip {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: 20px;
}

.vn-modal-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: rgba(255,255,255,.6);
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 999px;
  padding: 5px 12px;
}

.vn-modal-salary-pill {
  font-family: var(--vn-mono);
  font-size: 13px;
  font-weight: 700;
  color: #22D3EE;
  background: rgba(34,211,238,.12);
  border-color: rgba(34,211,238,.25);
}

.vn-modal-tabs {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.vn-modal-tab {
  padding: 12px 22px;
  font-family: var(--vn-display);
  font-size: 14px;
  font-weight: 600;
  color: rgba(255,255,255,.45);
  border: none;
  background: none;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .2s, border-color .2s;
}

.vn-modal-tab:hover { color: rgba(255,255,255,.8); }

.vn-modal-tab.is-active {
  color: #fff;
  border-bottom-color: var(--vn-cyan);
}

.vn-modal-body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.12) transparent;
}

.vn-modal-panel {
  display: none;
  padding: 28px;
}

.vn-modal-panel.is-active { display: block; }

.vn-modal-summary {
  font-size: 15px;
  color: rgba(255,255,255,.65);
  line-height: 1.7;
  margin-bottom: 28px;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}

.vn-modal-section { margin-bottom: 28px; }

.vn-modal-section-title {
  font-family: var(--vn-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.4);
  margin-bottom: 12px;
}

.vn-modal-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.vn-modal-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: rgba(255,255,255,.7);
  line-height: 1.55;
}

.vn-modal-list li .vn-li-icon {
  flex: none;
  margin-top: 2px;
}

.vn-modal-list li .vn-li-icon.check { color: #22D3EE; }
.vn-modal-list li .vn-li-icon.bolt { color: #8B5CF6; }
.vn-modal-list li .vn-li-icon.plus { color: #EC4899; }

.vn-modal-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.07);
}

.vn-modal-footer {
  flex: none;
  padding: 16px 28px;
  border-top: 1px solid rgba(255,255,255,.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: rgba(255,255,255,.02);
}

.vn-modal-footer-note {
  font-size: 12px;
  color: rgba(255,255,255,.35);
}

.vn-modal-footer-actions { display: flex; gap: 10px; align-items: center; }

/* Career form */
.vn-career-form { display: flex; flex-direction: column; gap: 16px; }

.vn-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.vn-field label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
  margin-bottom: 6px;
}

.vn-field input,
.vn-field select,
.vn-field textarea {
  width: 100%;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--vn-r-sm);
  color: #fff;
  font-family: var(--vn-body);
  font-size: 14px;
  padding: 11px 14px;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
  box-sizing: border-box;
}

.vn-field select option { background: #0F0E1C; }

.vn-career-form .vn-field select,
.vn-field select {
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23BBB8D8' stroke-width='1.5'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
  cursor: pointer;
}

html:not(.is-dark) .vn-career-form .vn-field select,
html:not(.is-dark) .vn-field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%235A5878' stroke-width='1.5'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
}

.vn-field input:focus,
.vn-field select:focus,
.vn-field textarea:focus {
  border-color: rgba(139,92,246,.6);
  box-shadow: 0 0 0 3px rgba(139,92,246,.12);
}

.vn-field textarea { resize: vertical; min-height: 96px; }

.vn-field-error {
  display: none;
  font-size: 11px;
  color: #F87171;
  margin-top: 4px;
}

.vn-field.has-error input,
.vn-field.has-error select,
.vn-field.has-error textarea { border-color: rgba(248,113,113,.5); box-shadow: 0 0 0 3px rgba(248,113,113,.08); }

.vn-field.has-error .vn-field-error { display: block; }

.vn-field.has-ok input,
.vn-field.has-ok select,
.vn-field.has-ok textarea { border-color: rgba(34,211,238,.45); }

/* CV uploader */
.vn-cv-uploader { position: relative; }

.vn-cv-uploader.has-error .vn-cv-drop-zone {
  border-color: rgba(248,113,113,.5);
  box-shadow: 0 0 0 3px rgba(248,113,113,.08);
}
.vn-cv-uploader.has-error .vn-field-error { display: block; }

.vn-cv-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.vn-cv-drop-zone {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  padding: 28px 20px;
  border: 2px dashed rgba(255,255,255,.15);
  border-radius: var(--vn-r-md);
  background: rgba(255,255,255,.03);
  cursor: pointer;
  text-align: center;
  transition: border-color .25s, background .25s;
}

.vn-cv-drop-zone:hover,
.vn-cv-drop-zone.is-dragging {
  border-color: rgba(139,92,246,.5);
  background: rgba(139,92,246,.07);
}

.vn-cv-drop-zone.has-file {
  border-style: solid;
  border-color: rgba(34,211,238,.4);
  background: rgba(34,211,238,.06);
}

.vn-cv-icon-wrap {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(255,255,255,.08);
  display: grid;
  place-items: center;
  color: rgba(255,255,255,.5);
}

.vn-cv-drop-zone.has-file .vn-cv-icon-wrap {
  background: rgba(34,211,238,.15);
  color: #22D3EE;
}

.vn-cv-label {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255,255,255,.7);
}

.vn-cv-filename {
  font-family: var(--vn-mono);
  font-size: 12px;
  color: #22D3EE;
  display: none;
}

.vn-cv-drop-zone.has-file .vn-cv-filename { display: block; }

.vn-cv-hint {
  font-size: 11px;
  color: rgba(255,255,255,.35);
}

.vn-cv-remove {
  display: none;
  font-size: 11px;
  color: #F87171;
  cursor: pointer;
  text-decoration: underline;
  background: none;
  border: none;
  padding: 0;
}

.vn-cv-drop-zone.has-file .vn-cv-remove { display: inline-block; }

/* RODO consents */
.vn-career-consents { display: flex; flex-direction: column; gap: 12px; }
.vn-career-consents.has-error .vn-consent-label:first-child { color: #F87171; }
.vn-career-consents.has-error .vn-checkbox { border-color: rgba(248,113,113,.6); }
.vn-career-consents.has-error .vn-field-error { display: block; }

.vn-consent-label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  font-size: 12px;
  color: rgba(255,255,255,.5);
  line-height: 1.55;
}

.vn-consent-label input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.vn-checkbox {
  width: 20px;
  height: 20px;
  border: 1.5px solid rgba(255,255,255,.2);
  border-radius: 6px;
  background: rgba(255,255,255,.05);
  flex: none;
  margin-top: 1px;
  display: grid;
  place-items: center;
  transition: border-color .2s, background .2s;
}

.vn-consent-label:has(input:checked) .vn-checkbox {
  border-color: #22D3EE;
  background: rgba(34,211,238,.15);
}

.vn-checkbox-tick {
  display: none;
  color: #22D3EE;
}

.vn-consent-label:has(input:checked) .vn-checkbox-tick { display: block; }

.vn-privacy-clause {
  font-size: 11px;
  color: rgba(255,255,255,.3);
  line-height: 1.55;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,.06);
}

/* Career success state */
.vn-career-success {
  display: none;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  padding: 40px 20px;
}

.vn-career-success.is-visible { display: flex; }

.vn-career-success-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--vn-grad);
  display: grid;
  place-items: center;
  color: #fff;
}

.vn-career-success h3 {
  font-family: var(--vn-display);
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  margin: 0;
}

.vn-career-success p {
  font-size: 14px;
  color: rgba(255,255,255,.55);
  max-width: 380px;
  line-height: 1.6;
  margin: 0;
}

/* Animations */
@keyframes vn-fade {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes vn-pop {
  0%   { transform: scale(.85); opacity: 0; }
  70%  { transform: scale(1.05); }
  100% { transform: scale(1);   opacity: 1; }
}

.vn-modal-panel.is-active { animation: vn-fade .22s ease; }
.vn-career-success.is-visible { animation: vn-pop .35s cubic-bezier(.22,1,.36,1); }

/* Responsive careers */
@media (max-width: 900px) {
  .vn-careers-stats { grid-template-columns: repeat(2, 1fr); }
  .vn-jobs-grid { grid-template-columns: 1fr; }
  .vn-benefits-grid { grid-template-columns: repeat(2, 1fr); }
  .vn-careers-cta { padding: 40px 28px; flex-direction: column; text-align: center; }
}

@media (max-width: 640px) {
  .vn-careers-stats { grid-template-columns: repeat(2, 1fr); }
  .vn-benefits-grid { grid-template-columns: 1fr 1fr; }
  .vn-form-row { grid-template-columns: 1fr; }
  .vn-modal-wrap { max-height: 95vh; border-radius: var(--vn-r-lg) var(--vn-r-lg) 0 0; }
  .vn-modal-panel { padding: 20px; }
  .vn-modal-footer { flex-direction: column; align-items: stretch; }
  .vn-modal-footer-actions { justify-content: flex-end; }
  .vn-modal-wrap {
    width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
    margin: 0;
  }
  .vn-modal-body {
    padding: 20px 16px;
  }
  .vn-form-row {
    grid-template-columns: 1fr;
  }
  .vn-modal-footer {
    flex-direction: column;
    gap: 10px;
    padding: 12px 16px;
  }
  .vn-modal-footer > div:last-child {
    width: 100%;
  }
  .vn-modal-footer .vn-btn {
    flex: 1;
    text-align: center;
    justify-content: center;
  }
  .vn-modal-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .vn-modal-strip {
    flex-wrap: wrap;
    gap: 6px;
  }
}

/* ── Modal — always dark regardless of site mode ── */
#vn-job-modal .vn-modal-wrap {
  background: #0D0B1A;
  border-color: rgba(255,255,255,.08);
  color: #ECEAFF;
}
#vn-job-modal .vn-modal-body {
  scrollbar-color: rgba(255,255,255,.12) transparent;
}
#vn-job-modal .vn-modal-footer {
  border-top-color: rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
}
#vn-job-modal .vn-modal-summary {
  color: #BBB8D8;
  border-bottom-color: rgba(255,255,255,.07);
}
#vn-job-modal .vn-modal-section-title { color: rgba(255,255,255,.38); }
#vn-job-modal .vn-modal-list li { color: rgba(255,255,255,.7); }
#vn-job-modal .vn-modal-footer a { color: #ECEAFF; border-bottom-color: rgba(255,255,255,.2); }
#vn-job-modal .vn-btn-ghost {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.14);
  color: #ECEAFF;
}
#vn-job-modal .vn-btn-ghost:hover {
  background: rgba(255,255,255,.1);
  color: #ECEAFF;
}

/* Form fields */
html:not(.is-dark) .vn-field label { color: rgba(0,0,0,.5); }
html:not(.is-dark) .vn-field input,
html:not(.is-dark) .vn-field select,
html:not(.is-dark) .vn-field textarea {
  background: #fff;
  border-color: rgba(0,0,0,.14);
  color: #1A1830;
}
html:not(.is-dark) .vn-field select option {
  background: #fff;
  color: #1A1830;
}
html:not(.is-dark) .vn-field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%235A5878' stroke-width='1.5'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
}
html:not(.is-dark) .vn-field input::placeholder,
html:not(.is-dark) .vn-field textarea::placeholder { color: rgba(0,0,0,.32); }
html:not(.is-dark) .vn-field.has-error input,
html:not(.is-dark) .vn-field.has-error select,
html:not(.is-dark) .vn-field.has-error textarea { background: #FFF5F5; }
html:not(.is-dark) .vn-field.has-ok input,
html:not(.is-dark) .vn-field.has-ok select,
html:not(.is-dark) .vn-field.has-ok textarea { background: #F0FDFC; border-color: rgba(34,211,238,.5); }

/* Contact form: force dark field styling inside #kontakt regardless of light/dark mode */
#kontakt .vn-field label { color: #807EA0 !important; }
#kontakt .vn-field input,
#kontakt .vn-field textarea {
  background: rgba(255,255,255,.04) !important;
  border-color: rgba(255,255,255,.1) !important;
  color: #ECEAFF !important;
}
#kontakt .vn-field select {
  background: rgba(255,255,255,.04) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23BBB8D8' stroke-width='1.5'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 12px center !important;
  border-color: rgba(255,255,255,.1) !important;
  color: #ECEAFF !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
#kontakt .vn-field select option { background: #0B0918; color: #ECEAFF; }
#kontakt .vn-field input::placeholder,
#kontakt .vn-field textarea::placeholder { color: #4A4860 !important; }

/* Career modal: dark form fields always */
#vn-job-modal .vn-field label { color: #807EA0 !important; }
#vn-job-modal .vn-field input,
#vn-job-modal .vn-field textarea {
  background: rgba(255,255,255,.04) !important;
  border-color: rgba(255,255,255,.1) !important;
  color: #ECEAFF !important;
}
#vn-job-modal .vn-field select {
  background: rgba(255,255,255,.04) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23BBB8D8' stroke-width='1.5'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 12px center !important;
  border-color: rgba(255,255,255,.1) !important;
  color: #ECEAFF !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
#vn-job-modal .vn-field select option { background: #0B0918; color: #ECEAFF; }
#vn-job-modal .vn-field input::placeholder,
#vn-job-modal .vn-field textarea::placeholder { color: #4A4860 !important; }

/* Career modal: force dark CV uploader + consents regardless of mode */
#vn-job-modal .vn-cv-drop-zone {
  background: rgba(255,255,255,.03) !important;
  border-color: rgba(255,255,255,.15) !important;
}
#vn-job-modal .vn-cv-drop-zone:hover,
#vn-job-modal .vn-cv-drop-zone.is-dragging {
  border-color: rgba(139,92,246,.5) !important;
  background: rgba(139,92,246,.07) !important;
}
#vn-job-modal .vn-cv-drop-zone.has-file {
  border-color: rgba(34,211,238,.4) !important;
  background: rgba(34,211,238,.06) !important;
}
#vn-job-modal .vn-cv-icon-wrap {
  background: rgba(255,255,255,.08) !important;
  color: rgba(255,255,255,.5) !important;
}
#vn-job-modal .vn-cv-drop-zone.has-file .vn-cv-icon-wrap {
  background: rgba(34,211,238,.15) !important;
  color: #22D3EE !important;
}
#vn-job-modal .vn-cv-label { color: rgba(255,255,255,.7) !important; }
#vn-job-modal .vn-cv-hint  { color: rgba(255,255,255,.35) !important; }
#vn-job-modal .vn-cv-filename { color: #22D3EE !important; }
#vn-job-modal .vn-consent-label { color: rgba(255,255,255,.5) !important; }
#vn-job-modal .vn-checkbox {
  background: rgba(255,255,255,.05) !important;
  border-color: rgba(255,255,255,.2) !important;
}
#vn-job-modal .vn-consent-label:has(input:checked) .vn-checkbox {
  border-color: #22D3EE !important;
  background: rgba(34,211,238,.15) !important;
}
#vn-job-modal .vn-privacy-clause {
  color: rgba(255,255,255,.3) !important;
  border-top-color: rgba(255,255,255,.07) !important;
}
#vn-job-modal .vn-career-success h3 { color: #ECEAFF !important; }
#vn-job-modal .vn-career-success p  { color: #BBB8D8 !important; }

/* CV uploader */
html:not(.is-dark) .vn-cv-drop-zone {
  border-color: rgba(0,0,0,.14);
  background: #fff;
}
html:not(.is-dark) .vn-cv-drop-zone:hover,
html:not(.is-dark) .vn-cv-drop-zone.is-dragging {
  border-color: rgba(139,92,246,.5);
  background: rgba(139,92,246,.05);
}
html:not(.is-dark) .vn-cv-drop-zone.has-file {
  border-color: rgba(34,211,238,.45);
  background: rgba(34,211,238,.05);
}
html:not(.is-dark) .vn-cv-icon-wrap {
  background: rgba(0,0,0,.06);
  color: rgba(0,0,0,.38);
}
html:not(.is-dark) .vn-cv-drop-zone.has-file .vn-cv-icon-wrap {
  background: rgba(34,211,238,.12);
  color: #0E9E8D;
}
html:not(.is-dark) .vn-cv-hint { color: rgba(0,0,0,.38); }
html:not(.is-dark) .vn-cv-filename { color: #0E9E8D; }
html:not(.is-dark) .vn-cv-uploader.has-error .vn-cv-drop-zone { background: #FFF5F5; }

/* Consents */
html:not(.is-dark) .vn-consent-label { color: rgba(0,0,0,.55); }
html:not(.is-dark) .vn-checkbox {
  border-color: rgba(0,0,0,.22);
  background: #fff;
}
html:not(.is-dark) .vn-consent-label:has(input:checked) .vn-checkbox {
  border-color: #22D3EE;
  background: rgba(34,211,238,.1);
}
html:not(.is-dark) .vn-privacy-clause {
  color: rgba(0,0,0,.35);
  border-top-color: rgba(0,0,0,.07);
}

/* Career success in light mode */
html:not(.is-dark) .vn-career-success h3 { color: #1A1830; }
html:not(.is-dark) .vn-career-success p  { color: rgba(0,0,0,.55); }

/* ── SCREEN READER ── */
.screen-reader-text {
  border: 0;
  clip: rect(1px,1px,1px,1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

.screen-reader-text:focus {
  background-color: var(--vn-bg-alt);
  border-radius: 3px;
  box-shadow: 0 0 2px 2px rgba(0,0,0,.6);
  clip: auto !important;
  clip-path: none;
  color: var(--vn-ink);
  display: block;
  font-weight: 700;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
}

/* ── vn-section-dark text overrides ── */
.vn-section-dark .vn-lead { color: rgba(255,255,255,.65); }
.vn-section-dark .vn-h2 { color: #ECEAFF; }
.vn-section-dark .vn-section-header .vn-btn-ghost { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); color: #ECEAFF; }

/* Careers stats in dark section */
.vn-careers-stats .vn-stat-key { color: rgba(255,255,255,.4); margin-bottom: 8px; }

/* Dark mode: lang button contrast */
html.is-dark .vn-lang-btn { color: rgba(255,255,255,.5); }
html.is-dark .vn-lang-btn:hover { color: #fff; }
html.is-dark .vn-lang-btn.is-active { color: #fff; background: rgba(255,255,255,.1); }
html.is-dark .vn-dark-toggle { color: rgba(255,255,255,.6); border-color: rgba(255,255,255,.12); background: rgba(255,255,255,.05); }

/* ── Dark mode toggle ── */
.vn-dark-toggle {
  width: 38px; height: 38px;
  border-radius: 12px;
  border: 1px solid var(--vn-line-strong);
  background: var(--vn-glass);
  color: var(--vn-ink-soft);
  display: grid; place-items: center;
  cursor: pointer;
  transition: all .2s;
  flex: none;
}
.vn-dark-toggle:hover { color: var(--vn-ink); border-color: rgba(139,92,246,.4); }
.vn-dt-sun { display: block; }
.vn-dt-moon { display: none; }
html.is-dark .vn-dt-sun { display: none; }
html.is-dark .vn-dt-moon { display: block; }

/* ── Language switcher ── */
.vn-lang-switcher {
  display: flex;
  border: 1px solid var(--vn-line-strong);
  border-radius: 10px;
  overflow: hidden;
  background: var(--vn-glass);
}
.vn-lang-btn {
  padding: 7px 11px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--vn-ink-mute);
  background: none;
  border: none;
  cursor: pointer;
  transition: all .2s;
  font-family: var(--vn-mono);
}
.vn-lang-btn:hover { color: var(--vn-ink); }
.vn-lang-btn.is-active { color: var(--vn-ink); background: var(--vn-line); }

/* ── Cookie consent banner ── */
#vn-cookie-banner {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  width: calc(100% - 48px);
  max-width: 860px;
  background: var(--vn-bg-dark);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--vn-r-lg);
  box-shadow: 0 8px 40px rgba(0,0,0,.5);
  animation: vn-slide-up .3s ease;
}
.vn-cookie-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 20px 28px;
  flex-wrap: wrap;
}
.vn-cookie-text {
  flex: 1;
  min-width: 220px;
}
.vn-cookie-text strong {
  display: block;
  color: #ECEAFF;
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 4px;
}
.vn-cookie-text p {
  color: rgba(255,255,255,.55);
  font-size: 13px;
  line-height: 1.5;
}
.vn-cookie-actions {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}
@keyframes vn-slide-up {
  from { opacity: 0; transform: translateX(-50%) translateY(16px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@media (max-width: 600px) {
  #vn-cookie-banner { bottom: 0; left: 0; transform: none; width: 100%; border-radius: var(--vn-r-lg) var(--vn-r-lg) 0 0; }
  .vn-cookie-inner { padding: 16px 20px; }
  .vn-cookie-actions { width: 100%; }
  .vn-cookie-actions .vn-btn { flex: 1; justify-content: center; }
}

/* ── WOOCOMMERCE ── */
.vn-wc-page {
  padding-top: 120px;
  padding-bottom: 80px;
  min-height: 60vh;
}

/* Inherit theme button styles for WC primary buttons */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
  background: var(--vn-grad);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 12px 24px;
  font-family: var(--vn-sans);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: opacity .2s;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover { opacity: .85; color: #fff; }

.woocommerce a.button.alt,
.woocommerce button.button.alt { background: var(--vn-grad); }

/* Product grid */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--vn-sans);
  font-size: 16px;
  font-weight: 600;
  color: var(--vn-ink);
}

.woocommerce ul.products li.product .price { color: var(--vn-ink-soft); }
.woocommerce ul.products li.product .price ins { color: var(--vn-ink); text-decoration: none; }

/* Notices */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  border-top-color: var(--vn-cyan);
}

/* Form inputs */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea {
  background: var(--vn-glass);
  border: 1px solid var(--vn-line-strong);
  border-radius: var(--vn-r-md);
  color: var(--vn-ink);
  padding: 12px 16px;
}

/* Dark mode WC */
html.is-dark .woocommerce ul.products li.product .woocommerce-loop-product__title { color: #ECEAFF; }
html.is-dark .woocommerce-message,
html.is-dark .woocommerce-info { background: rgba(34,211,238,.08); border-color: var(--vn-cyan); color: #ECEAFF; }

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .vn-reveal { opacity: 1; transform: none; }
  #vn-particles { display: none; }
}

/* ── Performance: grid SVG tylko w hero, w sekcjach zbędna kosztowna rasteryzacja ── */
.vn-section .vn-grid-bg { display: none; }

/* ── Mobile performance ── */
@media (max-width: 768px) {
  /* wyłącz animacje blobów — działają na CPU, zamulają scroll */
  .vn-glow-blob { animation: none !important; }
  /* ukryj dekorację hero — dużo blura na mobilnym GPU */
  .vn-hero-deco { display: none; }
}