// Variant B — Cinematic full-bleed gamedev. The chosen direction.

const VariantB = ({ lang, onProject, onToggleLang }) => {
  const D = window.PORTFOLIO_DATA;
  const t = D.meta[lang];
  const skills = D.skills[lang];
  const timeline = D.timeline[lang];
  const facts = D.facts[lang];
  const dawn = D.projects.find(p => p.id === "dawnwalker") || D.projects[0];
  const older = D.projects.filter(p => p.id !== "dawnwalker");
  const [timelineOpen, setTimelineOpen] = React.useState(false);

  const scrollToSection = (id) => {
    const el = document.getElementById(id);
    if (el) {
      const y = el.getBoundingClientRect().top + window.pageYOffset - 70;
      window.scrollTo({ top: y, behavior: "smooth" });
    }
  };

  const css = `
    .vb { font-family: 'Space Grotesk', system-ui, sans-serif; background: #050609; color: #f0eef0; min-height: 100%; container-type: inline-size; container-name: vb; }
    .vb * { box-sizing: border-box; }
    .vb-mono { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; }
    .vb-gold { color: #d4b364; }

    .vb-nav { position: sticky; top: 0; z-index: 50; padding: 16px 40px; display: flex; justify-content: space-between; align-items: center; background: linear-gradient(to bottom, rgba(5,6,9,0.95), rgba(5,6,9,0.4) 70%, rgba(5,6,9,0)); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(212,179,100,0.08); }
    .vb-brand { display: flex; align-items: center; gap: 14px; background: none; border: none; padding: 0; cursor: pointer; }
    .vb-brand img { height: 50px; display: block; transition: transform .3s; }
    .vb-brand:hover img { transform: rotate(20deg); }
    .vb-brand img.spin { animation: vbBrandSpin .8s cubic-bezier(.34,1.2,.4,1); }
    @keyframes vbBrandSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
    .vb-nav-links { display: flex; gap: 24px; font-size: 13px; }
    .vb-nav-links a { color: #b8b3bd; text-decoration: none; padding: 6px 0; transition: color .2s; cursor: pointer; }
    .vb-nav-links a:hover { color: #d4b364; }
    .vb-nav-cta { display: flex; align-items: center; gap: 12px; }
    .vb-lang-pill { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.08em; padding: 6px 14px; border: 1px solid rgba(212,179,100,0.3); border-radius: 999px; background: transparent; color: #7a7382; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: all .2s; }
    .vb-lang-pill:hover { border-color: #d4b364; background: rgba(212,179,100,0.06); }
    .vb-lang-pill .active { color: #d4b364; }
    .vb-lang-pill .sep { color: #4a4538; }

    .vb-hero { position: relative; min-height: 100vh; overflow: hidden; padding-bottom: 80px; }
    .vb-hero-bg { position: absolute; inset: 0; }
    .vb-hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 70% center; opacity: 0.5; filter: saturate(0.9); }
    .vb-hero-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #050609 0%, rgba(5,6,9,0.92) 30%, rgba(5,6,9,0.55) 55%, rgba(5,6,9,0.2) 80%, transparent 100%), linear-gradient(180deg, rgba(5,6,9,0.45) 0%, rgba(5,6,9,0.1) 30%, rgba(5,6,9,0.85) 90%, rgba(5,6,9,1) 100%); }
    .vb-hero-bg::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 55% at 28% 48%, transparent 0%, rgba(5,6,9,0.55) 100%); z-index: 1; }
    .vb-hero-content { position: relative; max-width: 1400px; margin: 0 auto; padding: 80px 40px 0; display: flex; flex-direction: column; justify-content: flex-end; min-height: calc(100vh - 80px); z-index: 2; }
    .vb-hero-eye { display: flex; align-items: center; gap: 14px; margin-bottom: 36px; flex-wrap: wrap; }
    .vb-hero-logo { width: 210px; height: 210px; display: block; margin: -53px auto 27px 64px; object-fit: contain; }
    .vb-dot { width: 8px; height: 8px; border-radius: 50%; background: #5fe5a3; box-shadow: 0 0 14px #5fe5a3; }
    .vb-hero h1 { font-size: clamp(56px, 9cqw, 144px); line-height: 0.92; letter-spacing: -0.045em; margin: 0 0 36px; font-weight: 600; max-width: 1100px; overflow-wrap: break-word; }
    .vb-hero h1 .accent { color: #d4b364; font-style: italic; }
    .vb-hero-sub { display: grid; grid-template-columns: 2fr 1fr; gap: 64px; padding-top: 36px; border-top: 1px solid rgba(212,179,100,0.15); align-items: end; }
    .vb-hero-sub p { font-size: 19px; line-height: 1.5; color: #d8d4dc; max-width: 620px; margin: 0; }
    .vb-hero-cta { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
    .vb-btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.18); background: transparent; color: #f0eef0; font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; text-decoration: none; transition: all .2s; }
    .vb-btn:hover { background: rgba(255,255,255,0.08); border-color: rgba(212,179,100,0.5); }
    .vb-btn.primary { background: #d4b364; color: #050609; border-color: #d4b364; }
    .vb-btn.primary:hover { background: #f0e1b8; border-color: #f0e1b8; }
    .vb-btn.small { padding: 8px 16px; font-size: 12px; }

    .vb-section { padding: 120px 40px; max-width: 1400px; margin: 0 auto; }
    .vb-section.tight { padding-top: 80px; padding-bottom: 80px; }
    .vb-h2 { font-size: clamp(40px, 6cqw, 88px); line-height: 0.95; letter-spacing: -0.03em; margin: 0 0 48px; font-weight: 600; overflow-wrap: break-word; }
    .vb-h2 .accent { color: #d4b364; font-style: italic; }
    .vb-eyebrow { display: flex; align-items: center; gap: 10px; color: #7a7382; margin-bottom: 24px; }
    .vb-eyebrow .line { width: 32px; height: 1px; background: #d4b364; }

    .vb-about { display: grid; grid-template-columns: 1.1fr 1fr; gap: 80px; align-items: start; }
    .vb-about-portrait { aspect-ratio: 4/5; background: #1a1820 center/cover; border-radius: 4px; overflow: hidden; position: relative; }
    .vb-about-portrait img { width: 100%; height: 100%; object-fit: cover; }
    .vb-about-portrait::after { content: ''; position: absolute; inset: 0; box-shadow: inset 0 0 80px rgba(5,6,9,0.5); pointer-events: none; }
    .vb-about-portrait-cap { position: absolute; left: 24px; bottom: 24px; right: 24px; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #d4b364; letter-spacing: 0.1em; text-transform: uppercase; z-index: 2; }
    .vb-about-text p { font-size: 18px; line-height: 1.6; color: #d0ccd5; margin: 0 0 18px; }
    .vb-about-text p.lead { font-size: 22px; color: #f0eef0; }
    .vb-about-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: #1a1820; border: 1px solid #1a1820; margin-top: 32px; }
    .vb-about-stat { background: #0a0b0f; padding: 28px 24px; }
    .vb-about-stat-num { font-size: 48px; font-weight: 600; line-height: 1; letter-spacing: -0.04em; color: #d4b364; }
    .vb-about-stat-label { font-size: 13px; color: #b8b3bd; margin-top: 6px; }
    .vb-facts { margin-top: 28px; padding: 22px 0 0; border-top: 1px solid rgba(212,179,100,0.15); display: flex; flex-wrap: wrap; gap: 8px; }
    .vb-fact { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #b8b3bd; letter-spacing: 0.06em; padding: 6px 12px; border: 1px solid rgba(212,179,100,0.18); border-radius: 999px; }

    .vb-current { padding: 0; max-width: 100%; }
    .vb-current-inner { max-width: 1400px; margin: 0 auto; padding: 100px 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; position: relative; }
    .vb-current-art { position: relative; aspect-ratio: 1055/1491; background: linear-gradient(135deg, #1a0d18, #0a0606); border: 1px solid rgba(212,179,100,0.22); overflow: hidden; display: flex; align-items: center; justify-content: center; box-shadow: 0 30px 80px rgba(0,0,0,0.5); }
    .vb-current-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
    .vb-current-status { position: absolute; left: 16px; bottom: 16px; z-index: 3; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: #e8e2e6; background: rgba(8,6,9,0.72); backdrop-filter: blur(6px); border: 1px solid rgba(212,179,100,0.25); padding: 8px 14px; border-radius: 999px; display: inline-flex; align-items: center; gap: 8px; }
    .vb-current-status .pulse { width: 7px; height: 7px; border-radius: 50%; background: #c43a3a; box-shadow: 0 0 12px #c43a3a; animation: vbPulse 1.6s infinite; }
    .vb-current-art::before, .vb-current-art::after { content: ''; position: absolute; }
    .vb-current-art::before { inset: 0; background: radial-gradient(circle at 50% 35%, rgba(180,40,60,0.18), transparent 60%); z-index: 2; pointer-events: none; }
    .vb-current-art::after { display: none; }
    .vb-current-mark { position: relative; z-index: 2; text-align: center; padding: 40px; }
    .vb-current-mark .glyph { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: clamp(80px, 12cqw, 180px); line-height: 0.9; color: #d4b364; opacity: 0.85; letter-spacing: -0.04em; margin-bottom: 12px; }
    .vb-current-mark .name { font-size: clamp(36px, 5cqw, 56px); font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
    .vb-current-mark .status { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: #7a7382; margin-top: 18px; display: inline-flex; align-items: center; gap: 8px; }
    .vb-current-mark .pulse { width: 7px; height: 7px; border-radius: 50%; background: #c43a3a; box-shadow: 0 0 12px #c43a3a; animation: vbPulse 1.6s infinite; }
    @keyframes vbPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
    .vb-current-text h3 { font-size: clamp(36px, 5cqw, 64px); line-height: 1; letter-spacing: -0.03em; margin: 0 0 20px; font-weight: 600; }
    .vb-current-text p.lead { font-size: 19px; line-height: 1.55; color: #d8d4dc; margin: 0 0 16px; }
    .vb-current-text p { font-size: 16px; line-height: 1.6; color: #b8b3bd; margin: 0 0 28px; max-width: 540px; }
    .vb-current-tag { display: inline-block; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: #d4b364; padding: 6px 12px; border: 1px solid rgba(212,179,100,0.3); border-radius: 999px; margin-bottom: 20px; }
    .vb-current-cta { display: flex; gap: 12px; flex-wrap: wrap; }
    .vb-current-head { max-width: 1400px; margin: 0 auto; padding: 120px 40px 8px; }
    .vb-current-lead { font-size: 18px; line-height: 1.5; color: #c8c4cd; max-width: 680px; margin: 0; }
    .vb-current-block + .vb-current-block .vb-current-inner { padding-top: 24px; }
    .vb-current-inner { padding: 56px 40px; }
    .vb-current-inner.reverse .vb-current-art { order: 2; }
    .vb-current-inner.reverse .vb-current-text { order: 1; }
    .vb-current-art.landscape { aspect-ratio: 16/9; align-self: center; cursor: pointer; }
    .vb-current-art.landscape .vb-current-poster { transition: transform 1.2s, opacity .4s; }
    .vb-current-art.landscape:hover .vb-current-poster { transform: scale(1.04); }
    .vb-current-status.live { border-color: rgba(95,229,163,0.3); }
    .vb-current-status.live .pulse { background: #5fe5a3; box-shadow: 0 0 12px #5fe5a3; }
    .vb-current-meta { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 4px 0 24px; }
    .vb-current-meta-item { display: flex; flex-direction: column; gap: 3px; }
    .vb-current-meta-label { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: #7a7382; }
    .vb-current-meta-val { font-size: 13px; color: #f0eef0; }

    .vb-projects { padding: 0; max-width: 100%; }
    .vb-projects-head { max-width: 1400px; margin: 0 auto; padding: 120px 40px 64px; }
    .vb-project-row { position: relative; height: 80vh; min-height: 620px; overflow: hidden; cursor: pointer; }
    .vb-project-row + .vb-project-row { border-top: 1px solid rgba(212,179,100,0.08); }
    .vb-project-row-bg { position: absolute; inset: 0; }
    .vb-project-row-bg img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s, opacity .6s; opacity: 0.7; }
    .vb-project-row:hover .vb-project-row-bg img { transform: scale(1.05); opacity: 0.95; }
    .vb-project-row-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5,6,9,0.94) 0%, rgba(5,6,9,0.5) 50%, rgba(5,6,9,0.7) 100%); }
    .vb-project-row-content { position: relative; height: 100%; max-width: 1400px; margin: 0 auto; padding: 60px 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: end; z-index: 2; }
    .vb-project-row-meta { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: #d4b364; margin-bottom: 18px; }
    .vb-project-row h3 { font-size: clamp(40px, 5cqw, 72px); line-height: 0.95; letter-spacing: -0.03em; margin: 0 0 16px; font-weight: 600; max-width: 760px; overflow-wrap: break-word; }
    .vb-project-row p { font-size: 16px; line-height: 1.55; color: #d0ccd5; max-width: 500px; margin: 0 0 28px; }
    .vb-project-cta-row { display: flex; gap: 8px; flex-wrap: wrap; }
    .vb-project-row-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding: 24px 0 0; border-top: 1px solid rgba(212,179,100,0.15); }
    .vb-project-row-stat-label { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: #7a7382; margin-bottom: 4px; }
    .vb-project-row-stat-val { font-size: 14px; color: #f0eef0; }

    .vb-skills { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: rgba(212,179,100,0.12); border: 1px solid rgba(212,179,100,0.12); }
    .vb-skill { background: #0a0b0f; padding: 36px 24px; transition: background .3s; position: relative; }
    .vb-skill:hover { background: #101218; }
    .vb-skill-link { display: inline-block; margin-top: 14px; padding: 6px 12px; border: 1px solid rgba(212,179,100,0.3); border-radius: 999px; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: #d4b364; text-decoration: none; cursor: pointer; transition: all .2s; }
    .vb-skill-link:hover { background: rgba(212,179,100,0.08); border-color: #d4b364; }
    .vb-skill-icon { width: 44px; height: 44px; border-radius: 10px; background: linear-gradient(135deg, #d4b364, #8a6a2e); display: flex; align-items: center; justify-content: center; color: #050609; font-weight: 700; font-size: 16px; margin-bottom: 24px; }
    .vb-skill h3 { font-size: 24px; margin: 0 0 4px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
    .vb-skill-years { color: #d4b364; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.1em; }
    .vb-skill p { color: #c8c4cd; line-height: 1.55; font-size: 13px; margin: 18px 0 18px; }
    .vb-skill ul { list-style: none; padding: 0; margin: 0; }
    .vb-skill li { padding: 8px 0; border-top: 1px solid rgba(212,179,100,0.08); font-size: 12px; color: #b8b3bd; display: flex; gap: 8px; align-items: center; }
    .vb-skill li::before { content: '◆'; color: #d4b364; font-size: 7px; }

    .vb-narrative-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
    .vb-narrative-block { background: #0a0b0f; border: 1px solid rgba(212,179,100,0.12); padding: 28px 28px 24px; display: flex; flex-direction: column; }
    .vb-narrative-block h4 { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: #d4b364; margin: 0 0 18px; }
    .vb-narrative-list { list-style: none; padding: 0; margin: 0; flex: 1; }
    .vb-narrative-list li { padding: 14px 0; border-top: 1px solid rgba(212,179,100,0.08); }
    .vb-narrative-list li:first-child { border-top: none; }
    .vb-narrative-title { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 4px; color: #f0eef0; }
    .vb-narrative-note { font-size: 13px; color: #9b96a3; line-height: 1.5; margin: 0 0 8px; }
    .vb-narrative-link { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: #d4b364; text-decoration: none; border-bottom: 1px solid rgba(212,179,100,0.3); padding-bottom: 1px; }
    .vb-narrative-link:hover { color: #f0e1b8; border-color: #f0e1b8; }
    .vb-yt-card { margin-top: 24px; padding: 28px; background: linear-gradient(135deg, #11070a, #0a0b0f); border: 1px solid rgba(212,179,100,0.18); display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; }
    .vb-yt-card h4 { margin: 0 0 6px; font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
    .vb-yt-card p { margin: 0; color: #b8b3bd; font-size: 14px; line-height: 1.5; max-width: 720px; }
    .vb-rpg-systems { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 6px; }
    .vb-rpg-systems span { font-family: 'JetBrains Mono', monospace; font-size: 10px; padding: 4px 10px; border: 1px solid rgba(212,179,100,0.2); color: #b8b3bd; letter-spacing: 0.06em; }

    .vb-tc-wrap { position: relative; margin: 0 -40px; padding: 40px 0 8px; }
    .vb-tc-track { display: flex; align-items: center; gap: 20px; overflow-x: auto; overflow-y: visible; scroll-snap-type: x proximity; padding: 30px 0; cursor: grab; touch-action: pan-y; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    .vb-tc-track.vb-tc-grabbing { cursor: grabbing; scroll-snap-type: none; }
    .vb-tc-track::-webkit-scrollbar { display: none; }
    .vb-tc-pad { flex: 0 0 calc(50% - 170px); }
    .vb-test-card, .vb-tc-card { flex: 0 0 340px; scroll-snap-align: center; padding: 32px 28px; background: linear-gradient(180deg, #0a0b0f, #07080b); border: 1px solid rgba(212,179,100,0.16); position: relative; display: flex; flex-direction: column; transition: transform .12s ease-out, opacity .12s ease-out; will-change: transform, opacity; user-select: none; }
    .vb-test-card .mark, .vb-tc-card .mark { position: absolute; top: 12px; right: 18px; font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 80px; line-height: 1; color: rgba(212,179,100,0.18); }
    .vb-test-card blockquote, .vb-tc-card blockquote { margin: 0 0 24px; font-size: 15px; line-height: 1.6; color: #d8d4dc; font-style: italic; position: relative; z-index: 1; flex: 1; }
    .vb-test-card .who, .vb-tc-card .who { font-size: 14px; font-weight: 600; color: #f0eef0; }
    .vb-test-card .ctx, .vb-tc-card .ctx { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: #7a7382; margin-top: 4px; }
    .vb-tc-nav { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 8px; }
    .vb-tc-arrow { width: 40px; height: 40px; border-radius: 999px; border: 1px solid rgba(212,179,100,0.3); background: transparent; color: #d4b364; font-size: 16px; cursor: pointer; transition: all .2s; }
    .vb-tc-arrow:hover { background: rgba(212,179,100,0.1); border-color: #d4b364; }
    .vb-tc-hint { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: #7a7382; }

    .vb-clients { padding: 60px 40px; border-top: 1px solid rgba(212,179,100,0.08); border-bottom: 1px solid rgba(212,179,100,0.08); background: #07080b; }
    .vb-clients-inner { max-width: 1400px; margin: 0 auto; }
    .vb-clients-label { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: #7a7382; margin-bottom: 24px; text-align: center; }
    .vb-clients-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 24px; }
    .vb-client { padding: 12px 22px; border: 1px solid rgba(212,179,100,0.15); color: #d8d4dc; font-size: 14px; letter-spacing: -0.01em; font-weight: 500; transition: all .2s; }
    .vb-client:hover { border-color: rgba(212,179,100,0.5); background: rgba(212,179,100,0.04); color: #d4b364; }

    .vb-timeline { position: relative; padding-left: 32px; max-width: 900px; }
    .vb-timeline::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: rgba(212,179,100,0.2); }
    .vb-tl-item { position: relative; padding: 0 0 40px 32px; }
    .vb-tl-item:last-child { padding-bottom: 0; }
    .vb-tl-item::before { content: ''; position: absolute; left: -36px; top: 6px; width: 9px; height: 9px; border-radius: 50%; background: #d4b364; box-shadow: 0 0 0 4px #050609, 0 0 12px rgba(212,179,100,0.5); }
    .vb-tl-year { color: #d4b364; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 8px; }
    .vb-tl-role { font-size: 22px; font-weight: 600; margin: 0 0 4px; letter-spacing: -0.02em; }
    .vb-tl-company { color: #b8b3bd; font-size: 15px; margin-bottom: 6px; }
    .vb-tl-note { color: #7a7382; font-size: 13px; }
    .vb-tl-peek { position: relative; opacity: 0.45; max-height: 90px; overflow: hidden; }
    .vb-tl-peek::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 90px; background: linear-gradient(to bottom, rgba(5,6,9,0) 0%, #050609 90%); pointer-events: none; }
    .vb-tl-toggle-wrap { display: flex; justify-content: center; margin-top: 8px; position: relative; z-index: 2; }
    .vb-tl-toggle { background: #0e1015; border: 1px solid rgba(212,179,100,0.4); color: #d4b364; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; padding: 14px 28px; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; gap: 12px; transition: all .25s; }
    .vb-tl-toggle:hover { background: rgba(212,179,100,0.08); border-color: #d4b364; color: #f0e1b8; transform: translateY(-2px); }
    .vb-tl-toggle .chev { display: inline-block; transition: transform .3s; font-size: 14px; }
    .vb-tl-toggle.open .chev { transform: rotate(180deg); }

    .vb-quote { padding: 100px 40px; max-width: 1100px; margin: 0 auto; text-align: center; }
    .vb-quote blockquote { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: clamp(28px, 4cqw, 44px); line-height: 1.25; color: #f0eef0; margin: 0 0 16px; letter-spacing: -0.01em; }
    .vb-quote .attr { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: #d4b364; }

    .vb-contact { background: linear-gradient(135deg, #0a0b0f, #131017); padding: 140px 40px; border-top: 1px solid rgba(212,179,100,0.08); }
    .vb-contact-inner { max-width: 1100px; margin: 0 auto; text-align: center; }
    .vb-contact h2 { font-size: clamp(48px, 8cqw, 120px); line-height: 0.95; margin: 0 0 32px; font-weight: 600; letter-spacing: -0.03em; overflow-wrap: break-word; }
    .vb-contact h2 .accent { color: #d4b364; font-style: italic; }
    .vb-contact-lead { font-size: 19px; line-height: 1.5; color: #d0ccd5; max-width: 720px; margin: 0 auto 56px; }
    .vb-contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 24px; }
    .vb-contact-card { padding: 28px 24px; border: 1px solid rgba(212,179,100,0.15); border-radius: 16px; background: rgba(255,255,255,0.02); text-decoration: none; color: inherit; transition: all .2s; text-align: left; display: block; }
    .vb-contact-card:hover { border-color: #d4b364; background: rgba(212,179,100,0.06); transform: translateY(-2px); }
    .vb-contact-card-label { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #7a7382; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 8px; }
    .vb-contact-card-value { font-size: 16px; font-weight: 500; word-break: break-word; }
    .vb-contact-extras { display: flex; gap: 24px; justify-content: center; flex-wrap: wrap; font-size: 13px; color: #7a7382; }
    .vb-contact-extras a { color: #d4b364; text-decoration: none; border-bottom: 1px solid rgba(212,179,100,0.3); padding-bottom: 1px; }
    .vb-contact-extras a:hover { color: #f0e1b8; }

    .vb-footer { padding: 36px 40px; max-width: 1400px; margin: 0 auto; display: flex; justify-content: space-between; gap: 16px; color: #7a7382; font-size: 12px; border-top: 1px solid rgba(212,179,100,0.08); flex-wrap: wrap; }
    .vb-footer-motto { font-family: 'Cormorant Garamond', serif; font-style: italic; color: #d4b364; letter-spacing: 0.04em; font-size: 26px; line-height: 1.2; }
    .vb-footer-left { display: flex; align-items: center; gap: 16px; }
    .vb-footer-logo { height: 46px; width: 46px; border-radius: 8px; display: block; flex-shrink: 0; }

    @container vb (max-width: 1300px) { .vb-skills { grid-template-columns: repeat(3,1fr); } }
    @container vb (max-width: 1100px) { .vb-skills { grid-template-columns: repeat(2,1fr); } .vb-narrative-grid { grid-template-columns: 1fr; } }
    @container vb (max-width: 900px) {
      .vb-nav-links { display: none; }
      .vb-nav { padding: 12px 18px; }
      .vb-brand img { height: 40px; }
      .vb-nav-cta { gap: 8px; }
      .vb-btn.small { padding: 7px 12px; font-size: 11px; }
      .vb-section { padding: 72px 20px; }
      .vb-projects-head { padding: 80px 20px 40px; }
      .vb-hero { min-height: auto; padding-bottom: 48px; }
      .vb-hero-content { padding: 100px 20px 0; min-height: 92vh; }
      .vb-hero h1 { font-size: clamp(40px, 11cqw, 64px); margin-bottom: 28px; }
      .vb-hero-logo { width: 144px; height: 144px; margin: 0 auto auto 8px; }
      .vb-hero-sub { display: flex; flex-direction: column; gap: 24px; padding-top: 24px; align-items: stretch; }
      .vb-hero-sub p { font-size: 16px; }
      .vb-hero-cta { justify-content: flex-start; gap: 8px; }
      .vb-hero-eye { gap: 8px; row-gap: 4px; margin-bottom: 24px; }
      .vb-h2 { font-size: clamp(34px, 9cqw, 56px); margin-bottom: 32px; }
      .vb-about { display: flex; flex-direction: column; gap: 32px; }
      .vb-about-text p { font-size: 16px; }
      .vb-about-text p.lead { font-size: 19px; }
      .vb-about-stat-num { font-size: 36px; }
      .vb-about-stats { grid-template-columns: 1fr 1fr; }
      .vb-current-inner { display: flex; flex-direction: column; gap: 32px; padding: 72px 20px; }
      .vb-current-head { padding: 72px 20px 0; }
      .vb-current-block + .vb-current-block .vb-current-inner { padding-top: 24px; }
      .vb-current-inner.reverse .vb-current-art { order: 0; }
      .vb-current-inner.reverse .vb-current-text { order: 0; }
      .vb-current-art { aspect-ratio: 1055/1491; max-height: none; max-width: 320px; width: 100%; margin: 0 auto; }
      .vb-current-art.landscape { aspect-ratio: 16/9; max-width: 100%; }
      .vb-current-text h3 { font-size: clamp(32px, 7cqw, 44px); }
      .vb-current-text p.lead { font-size: 17px; }
      .vb-projects-head .vb-h2 { margin-bottom: 0; }
      .vb-project-row { height: auto; min-height: 0; }
      .vb-project-row-bg { position: relative; height: 220px; }
      .vb-project-row-bg img { opacity: 0.95; }
      .vb-project-row-bg::after { background: linear-gradient(180deg, rgba(5,6,9,0) 0%, rgba(5,6,9,0.85) 100%); }
      .vb-project-row-content { display: flex; flex-direction: column; padding: 28px 20px 40px; gap: 24px; }
      .vb-project-row h3 { font-size: clamp(28px, 7cqw, 40px); }
      .vb-project-row p { font-size: 15px; }
      .vb-project-row-stats { grid-template-columns: 1fr 1fr; gap: 16px; padding-top: 18px; }
      .vb-skills { grid-template-columns: 1fr; }
      .vb-skill { padding: 28px 22px; }
      .vb-skill h3 { font-size: 22px; }
      .vb-narrative-block { padding: 24px 22px; }
      .vb-yt-card { grid-template-columns: 1fr; padding: 24px 22px; gap: 16px; }
      .vb-yt-card h4 { font-size: 18px; }
      .vb-quote { padding: 72px 22px; }
      .vb-clients { padding: 48px 20px; }
      .vb-client { padding: 10px 16px; font-size: 13px; }
      .vb-tc-card { flex-basis: 280px; padding: 26px 22px; }
      .vb-tc-pad { flex-basis: calc(50% - 140px); }
      .vb-tc-wrap { margin: 0 -20px; }
      .vb-tl-role { font-size: 19px; }
      .vb-tl-toggle { padding: 12px 20px; font-size: 10px; letter-spacing: 0.1em; }
      .vb-contact { padding: 88px 20px; }
      .vb-contact-grid { grid-template-columns: 1fr; gap: 12px; }
      .vb-contact-lead { font-size: 16px; margin-bottom: 36px; }
      .vb-contact-extras { gap: 12px 18px; font-size: 12px; }
      .vb-footer { flex-direction: column; align-items: flex-start; padding: 28px 20px; gap: 12px; }
      .vb-footer-motto { font-size: 22px; }
    }
    @container vb (max-width: 480px) {
      .vb-section { padding: 56px 16px; }
      .vb-hero-content { padding: 80px 16px 0; }
      .vb-projects-head { padding: 64px 16px 32px; }
      .vb-current-inner { padding: 56px 16px; }
      .vb-contact { padding: 72px 16px; }
      .vb-quote { padding: 56px 18px; }
      .vb-hero h1 { font-size: clamp(36px, 11cqw, 52px); letter-spacing: -0.04em; }
      .vb-h2 { font-size: clamp(30px, 9cqw, 44px); }
      .vb-hero-eye { font-size: 10px; }
      .vb-about-stat-num { font-size: 30px; }
      .vb-current-mark .glyph { font-size: clamp(56px, 16cqw, 96px); }
      .vb-current-mark .name { font-size: clamp(28px, 8cqw, 40px); }
      .vb-project-row-content { padding: 24px 16px 32px; }
      .vb-clients-grid { gap: 8px 12px; }
      .vb-client { padding: 8px 14px; font-size: 12px; }
      .vb-tl-toggle { padding: 11px 16px; font-size: 10px; }
      .vb-contact h2 { font-size: clamp(36px, 12cqw, 56px); margin-bottom: 24px; }
    }
  `;

  return (
    <div className="vb">
      <style>{css}</style>
      <nav className="vb-nav">
        <button className="vb-brand" onClick={() => { const el = document.querySelector('.vb-brand img'); if (el) { el.classList.remove('spin'); void el.offsetWidth; el.classList.add('spin'); } const start = window.scrollY || document.documentElement.scrollTop; const t0 = performance.now(); const dur = Math.min(900, Math.max(350, start * 0.5)); const ease = (p) => 1 - Math.pow(1 - p, 3); const step = (now) => { const p = Math.min(1, (now - t0) / dur); window.scrollTo(0, Math.round(start * (1 - ease(p)))); if (p < 1) requestAnimationFrame(step); }; requestAnimationFrame(step); }} aria-label={lang === "pl" ? "Na górę" : "Back to top"}>
          <img src="assets/brand/favicon-jop.png" alt="JOP Creativity" />
        </button>
        <div className="vb-nav-links">
          <a onClick={() => scrollToSection("about")}>{t.sections.about}</a>
          <a onClick={() => scrollToSection("current")}>{t.sections.current}</a>
          <a onClick={() => scrollToSection("projects")}>{t.sections.projects}</a>
          <a onClick={() => scrollToSection("skills")}>{t.sections.skills}</a>
          <a onClick={() => scrollToSection("narrative")}>{t.sections.narrative}</a>
          <a onClick={() => scrollToSection("timeline")}>{t.sections.timeline}</a>
          <a onClick={() => scrollToSection("contact")}>{t.sections.contact}</a>
        </div>
        <div className="vb-nav-cta">
          <button className="vb-lang-pill" onClick={onToggleLang} title={lang === "pl" ? "Switch to English" : "Przełącz na polski"}>
            <span className={lang === "en" ? "active" : ""}>EN</span>
            <span className="sep">/</span>
            <span className={lang === "pl" ? "active" : ""}>PL</span>
          </button>
          <a className="vb-btn small" onClick={() => scrollToSection("contact")} style={{ cursor: "pointer" }}>{t.cta_secondary}</a>
        </div>
      </nav>

      <header className="vb-hero">
        <div className="vb-hero-bg"><img src={D.projects[0].hero} alt="" /></div>
        <div className="vb-hero-content">
          <img className="vb-hero-logo" src="assets/brand/logo-mark.png" alt="JOP Creativity" />
          <div className="vb-hero-eye">
            <span className="vb-dot"></span>
            <span className="vb-mono" style={{ color: "#5fe5a3" }}>{t.available}</span>
            <span className="vb-mono" style={{ color: "#7a7382" }}>· {lang === "pl" ? D.identity.workMode : D.identity.workModeEn}</span>
            <span className="vb-mono" style={{ color: "#7a7382" }}>· JOP Creativity</span>
          </div>
          <h1>
            {lang === "pl"
              ? <>Tworzę <span className="accent">światy,</span><br/>w których wybór coś znaczy.</>
              : <>I create <span className="accent">worlds</span><br/>where choice means something.</>}
          </h1>
          <div className="vb-hero-sub">
            <p>{t.pitch}</p>
            <div className="vb-hero-cta">
              <button className="vb-btn primary" onClick={() => scrollToSection("current")}>{t.cta_primary} →</button>
              <button className="vb-btn" onClick={() => scrollToSection("contact")}>{t.cta_secondary}</button>
            </div>
          </div>
        </div>
      </header>

      <section className="vb-section" id="about">
        <div className="vb-eyebrow vb-mono"><span className="line"></span><span>01 — {t.sections.about}</span></div>
        <div className="vb-about">
          <div>
            <h2 className="vb-h2">{lang === "pl" ? <>Kreatywny <span className="accent">twórca,</span><br/>który dba o głębię.</> : <>A <span className="accent">creator</span><br/>who insists on depth.</>}</h2>
            <div className="vb-about-portrait">
              <img src="assets/brand/portrait.jpg" alt={D.identity.name} />
            </div>
          </div>
          <div className="vb-about-text">
            <p className="lead">{t.oneliner}</p>
            <p>{t.about_long}</p>
            <p>{t.about_b2b}</p>
            <p>{t.about_rpg}</p>
            <p style={{ color: "#9b96a3", fontSize: 15 }}>{t.about_creative}</p>
            <div className="vb-about-stats">
              {D.stats.map((s, i) => (
                <div key={i} className="vb-about-stat">
                  <div className="vb-about-stat-num">{s.num}</div>
                  <div className="vb-about-stat-label">{s[lang]}</div>
                </div>
              ))}
            </div>
            <div className="vb-facts">
              {facts.map((f, i) => <span key={i} className="vb-fact">{f}</span>)}
            </div>
          </div>
        </div>
      </section>

      <section className="vb-current" id="current">
        <div className="vb-current-head">
          <div className="vb-eyebrow vb-mono"><span className="line"></span><span>02 — {t.sections.current}</span></div>
          <h2 className="vb-h2" style={{ marginBottom: 20 }}>{lang === "pl" ? <>Obecnie <span className="accent">pracuję nad.</span></> : <>Currently <span className="accent">working on.</span></>}</h2>
          <p className="vb-current-lead">{lang === "pl"
            ? "Tytuł AAA RPG w Rebel Wolves na co dzień — i mój autorski horror psychologiczny pod szyldem JOP Creativity po godzinach."
            : "A AAA RPG with Rebel Wolves by day — my own psychological horror under JOP Creativity on the side."}</p>
        </div>

        <div className="vb-current-block">
          <div className="vb-current-inner">
            <div className="vb-current-art landscape" onClick={() => onProject(dawn.id)}>
              <img className="vb-current-poster" src={dawn.hero} alt={dawn.title} />
              <div className="vb-current-status live"><span className="pulse"></span> {lang === "pl" ? "W produkcji · Rebel Wolves" : "In production · Rebel Wolves"}</div>
            </div>
            <div className="vb-current-text">
              <span className="vb-current-tag">{dawn.tag[lang]}</span>
              <h3>{dawn.title}</h3>
              <p className="lead">{lang === "pl" ? "Mój główny, codzienny projekt — otwarty świat dark-fantasy RPG." : "My main, day-to-day project — an open-world dark-fantasy RPG."}</p>
              <p>{dawn.desc[lang]}</p>
              <div className="vb-current-meta">
                <div className="vb-current-meta-item"><span className="vb-current-meta-label">{t.role_label}</span><span className="vb-current-meta-val">{dawn.role[lang]}</span></div>
                <div className="vb-current-meta-item"><span className="vb-current-meta-label">Studio</span><span className="vb-current-meta-val">{dawn.studio}</span></div>
                <div className="vb-current-meta-item"><span className="vb-current-meta-label">{t.year_label}</span><span className="vb-current-meta-val">{dawn.year}</span></div>
              </div>
              <div className="vb-current-cta">
                <button className="vb-btn primary" onClick={() => onProject(dawn.id)}>{t.explore} →</button>
                {dawn.links && dawn.links.slice(0, 2).map((l, li) => (
                  <a key={li} className="vb-btn small" href={l.url} target="_blank" rel="noreferrer">{lang === "pl" ? l.labelPl : l.labelEn} ↗</a>
                ))}
              </div>
            </div>
          </div>
        </div>

        <div className="vb-current-block">
          <div className="vb-current-inner reverse">
            <div className="vb-current-art">
              <img className="vb-current-poster" src="assets/projects/medman-cover.png" alt="MedMan — MED MAN · Fear is a symptom" />
              <div className="vb-current-status"><span className="pulse"></span> {lang === "pl" ? D.current.statusPl : D.current.statusEn}</div>
            </div>
            <div className="vb-current-text">
              <span className="vb-current-tag">{lang === "pl" ? D.current.tag_pl : D.current.tag_en}</span>
              <h3>{D.current.title}</h3>
              <p className="lead">{t.current_lead}</p>
              <p>{lang === "pl" ? D.current.desc_pl : D.current.desc_en}</p>
              <div className="vb-current-cta">
                <a className="vb-btn" href={D.current.githubUrl} target="_blank" rel="noreferrer">GitHub ↗</a>
                <a className="vb-btn" href={D.current.itchUrl} target="_blank" rel="noreferrer">Itch.io ↗</a>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="vb-projects" id="projects">
        <div className="vb-projects-head">
          <div className="vb-eyebrow vb-mono"><span className="line"></span><span>03 — {t.sections.projects}</span></div>
          <h2 className="vb-h2">{lang === "pl" ? <>Starsze <span className="accent">projekty.</span></> : <>Older <span className="accent">projects.</span></>}</h2>
        </div>
        {older.map((p, i) => (
          <div key={p.id} className="vb-project-row" onClick={() => onProject(p.id)}>
            <div className="vb-project-row-bg"><img src={p.hero} alt={p.title} /></div>
            <div className="vb-project-row-content">
              <div>
                <div className="vb-project-row-meta">{String(i+1).padStart(2,"0")} / {p.tag[lang]}</div>
                <h3>{p.title}</h3>
                <p>{p.desc[lang]}</p>
                <div className="vb-project-cta-row">
                  <button className="vb-btn">{t.explore} →</button>
                  {p.links && p.links.slice(0, 2).map((l, li) => (
                    <a key={li} className="vb-btn small" href={l.url} target="_blank" rel="noreferrer" onClick={(e) => e.stopPropagation()}>{lang === "pl" ? l.labelPl : l.labelEn} ↗</a>
                  ))}
                </div>
              </div>
              <div className="vb-project-row-stats">
                <div><div className="vb-project-row-stat-label">{t.year_label}</div><div className="vb-project-row-stat-val">{p.year}</div></div>
                <div><div className="vb-project-row-stat-label">{t.role_label}</div><div className="vb-project-row-stat-val" style={{ fontSize: 13 }}>{p.role[lang]}</div></div>
                <div><div className="vb-project-row-stat-label">Studio</div><div className="vb-project-row-stat-val" style={{ fontSize: 13 }}>{p.studio}</div></div>
              </div>
            </div>
          </div>
        ))}
      </section>

      <section className="vb-section" id="skills">
        <div className="vb-eyebrow vb-mono"><span className="line"></span><span>04 — {t.sections.skills}</span></div>
        <h2 className="vb-h2">{lang === "pl" ? <>Pięć <span className="accent">ról,</span> jedna osoba.</> : <>Five <span className="accent">roles,</span> one person.</>}</h2>
        <p style={{ color: "#c8c4cd", fontSize: 18, lineHeight: 1.5, maxWidth: 600, marginTop: -24, marginBottom: 48 }}>{t.skills_lead}</p>
        <div className="vb-skills">
          {skills.map((s, i) => (
            <div key={s.key} className="vb-skill">
              <div className="vb-skill-icon">{String(i+1).padStart(2,"0")}</div>
              <h3>{s.title}</h3>
              <span className="vb-skill-years">{s.years}</span>
              <p>{s.desc}</p>
              <ul>{s.list.map(x => <li key={x}>{x}</li>)}</ul>
              {s.anchor && (
                <a className="vb-skill-link" onClick={(e) => { e.preventDefault(); scrollToSection(s.anchor); }} href={"#" + s.anchor}>
                  {lang === "pl" ? "Zobacz teksty" : "See writing"} ↓
                </a>
              )}
            </div>
          ))}
        </div>
      </section>

      <section className="vb-section" id="narrative">
        <div className="vb-eyebrow vb-mono"><span className="line"></span><span>05 — {t.sections.narrative}</span></div>
        <h2 className="vb-h2">{lang === "pl" ? <>Słowa to też <span className="accent">design.</span></> : <>Words are <span className="accent">design</span> too.</>}</h2>
        <p style={{ color: "#c8c4cd", fontSize: 18, lineHeight: 1.5, maxWidth: 720, marginTop: -24, marginBottom: 48 }}>{t.narrative_lead}</p>
        <div className="vb-narrative-grid">
          <div className="vb-narrative-block">
            <h4>{t.stories_label}</h4>
            <ul className="vb-narrative-list">
              {D.narrative.stories.map((s) => { const href = (lang === "pl" ? s.file_pl : s.file_en) || s.file_pl || s.file_en; return (
                <li key={s.title_pl || s.title}>
                  <div className="vb-narrative-title">{(lang === "pl" ? s.title_pl : s.title_en) || s.title}</div>
                  <p className="vb-narrative-note">{lang === "pl" ? s.note_pl : s.note_en}</p>
                  {href && <a className="vb-narrative-link" href={href} target="_blank" rel="noreferrer">{t.read} ↗</a>}
                </li>
              ); })}
            </ul>
          </div>
          <div className="vb-narrative-block">
            <h4>{t.gramel_label} <a href={D.narrative.gramelUrl} target="_blank" rel="noreferrer" style={{ color: "#7a7382", textDecoration: "none", fontSize: 9 }}>↗</a></h4>
            <ul className="vb-narrative-list">
              {D.narrative.gramel.map((s) => { const href = (lang === "pl" ? s.file_pl : s.file_en) || s.file_pl || s.file_en; return (
                <li key={s.title_pl || s.title}>
                  <div className="vb-narrative-title">{(lang === "pl" ? s.title_pl : s.title_en) || s.title}</div>
                  <p className="vb-narrative-note">{lang === "pl" ? s.note_pl : s.note_en}</p>
                  {href && <a className="vb-narrative-link" href={href} target="_blank" rel="noreferrer">{t.read} ↗</a>}
                </li>
              ); })}
            </ul>
          </div>
          <div className="vb-narrative-block">
            <h4>{t.gdd_label}</h4>
            <ul className="vb-narrative-list">
              {D.narrative.gdds.map((s) => { const href = (lang === "pl" ? s.file_pl : s.file_en) || s.file_pl || s.file_en; return (
                <li key={s.title_pl || s.title}>
                  <div className="vb-narrative-title">{(lang === "pl" ? s.title_pl : s.title_en) || s.title}</div>
                  <p className="vb-narrative-note">{lang === "pl" ? s.note_pl : s.note_en}</p>
                  {href && <a className="vb-narrative-link" href={href} target="_blank" rel="noreferrer">{t.read} ↗</a>}
                </li>
              ); })}
            </ul>
            <div style={{ marginTop: 20, paddingTop: 20, borderTop: "1px solid rgba(212,179,100,0.12)" }}>
              <div className="vb-narrative-note" style={{ marginBottom: 8 }}>{lang === "pl" ? "Systemy RPG, które prowadzę" : "RPG systems I've run"}:</div>
              <div className="vb-rpg-systems">
                {D.narrative.rpgSystems.map(s => <span key={s}>{s}</span>)}
              </div>
            </div>
          </div>
        </div>
        <div className="vb-yt-card">
          <div>
            <h4>{t.yt_label}</h4>
            <p>{lang === "pl" ? D.narrative.youtube.note_pl : D.narrative.youtube.note_en}</p>
          </div>
          <a className="vb-btn" href={D.narrative.youtube.url} target="_blank" rel="noreferrer">{t.watch} ↗</a>
        </div>
      </section>

      <section className="vb-quote">
        <blockquote>{lang === "pl" ? D.quotes[0].text_pl : D.quotes[0].text_en}</blockquote>
        <div className="attr">{lang === "pl" ? D.quotes[0].attribution_pl : D.quotes[0].attribution_en}</div>
      </section>

      <section className="vb-clients">
        <div className="vb-clients-inner">
          <div className="vb-clients-label">{t.sections.clients}</div>
          <div className="vb-clients-grid">
            {D.clients.map(c => <div key={c.name} className="vb-client">{c.name}</div>)}
          </div>
        </div>
      </section>

      <section className="vb-section" id="testimonials">
        <div className="vb-eyebrow vb-mono"><span className="line"></span><span>06 — {t.sections.testimonials}</span></div>
        <h2 className="vb-h2" style={{ marginBottom: 8 }}>{lang === "pl" ? <>Co mówią <span className="accent">współpracownicy.</span></> : <>What <span className="accent">collaborators</span> say.</>}</h2>
        <TestimonialCarousel items={D.testimonials} lang={lang} />
      </section>

      <section className="vb-section" id="timeline">
        <div className="vb-eyebrow vb-mono"><span className="line"></span><span>07 — {t.sections.timeline}</span></div>
        <h2 className="vb-h2">{lang === "pl" ? <>Ścieżka.</> : <>Track record.</>}</h2>
        <div className="vb-timeline">
          {(timelineOpen ? timeline : timeline.slice(0, 4)).map((r, i) => (
            <div key={i} className="vb-tl-item">
              <div className="vb-tl-year">{r.year}</div>
              <h3 className="vb-tl-role">{r.role}</h3>
              <div className="vb-tl-company">{r.company}</div>
              <div className="vb-tl-note">{r.note}</div>
            </div>
          ))}
          {!timelineOpen && timeline[4] && (
            <div className="vb-tl-item vb-tl-peek">
              <div className="vb-tl-year">{timeline[4].year}</div>
              <h3 className="vb-tl-role">{timeline[4].role}</h3>
              <div className="vb-tl-company">{timeline[4].company}</div>
            </div>
          )}
        </div>
        {timeline.length > 4 && (
          <div className="vb-tl-toggle-wrap">
            <button
              className={"vb-tl-toggle" + (timelineOpen ? " open" : "")}
              onClick={() => setTimelineOpen(o => !o)}
            >
              {timelineOpen
                ? (lang === "pl" ? "Zwiń" : "Collapse")
                : (lang === "pl" ? `Pokaż całą ścieżkę (${timeline.length - 4} więcej)` : `Show full track record (${timeline.length - 4} more)`)
              }
              <span className="chev">▾</span>
            </button>
          </div>
        )}
      </section>

      <section className="vb-quote">
        <blockquote>{lang === "pl" ? D.quotes[1].text_pl : D.quotes[1].text_en}</blockquote>
        <div className="attr">{lang === "pl" ? D.quotes[1].attribution_pl : D.quotes[1].attribution_en}</div>
      </section>

      <section className="vb-contact" id="contact">
        <div className="vb-contact-inner">
          <div className="vb-eyebrow vb-mono" style={{ justifyContent: "center" }}><span className="line"></span><span>08 — {t.sections.contact}</span></div>
          <h2>{lang === "pl" ? <>Zróbmy <span className="accent">coś</span> razem.</> : <>Let's make something <span className="accent">together.</span></>}</h2>
          <p className="vb-contact-lead">{t.contact_lead}</p>
          <div className="vb-contact-grid">
            <a className="vb-contact-card" href={"mailto:" + D.identity.email}>
              <div className="vb-contact-card-label">Email</div>
              <div className="vb-contact-card-value">{D.identity.email}</div>
            </a>
            <a className="vb-contact-card" href={"tel:" + D.identity.phone.replace(/\s/g, "")}>
              <div className="vb-contact-card-label">{lang === "pl" ? "Telefon" : "Phone"}</div>
              <div className="vb-contact-card-value">{D.identity.phone}</div>
            </a>
            <a className="vb-contact-card" href={D.identity.linkedinUrl} target="_blank" rel="noreferrer">
              <div className="vb-contact-card-label">LinkedIn</div>
              <div className="vb-contact-card-value">{D.identity.linkedin.replace("linkedin.com/in/", "in/")}</div>
            </a>
          </div>
          <div className="vb-contact-extras">
            <span><a href={D.identity.githubUrl} target="_blank" rel="noreferrer">GitHub</a> · jop-creativity</span>
            <span><a href={D.identity.itchUrl} target="_blank" rel="noreferrer">Itch.io</a> · jop-creativity</span>
            <span><a href={D.identity.cvUrl} target="_blank" rel="noreferrer">{t.cta_cv} ↓</a></span>
          </div>
        </div>
      </section>

      <footer className="vb-footer">
        <div className="vb-footer-left">
          <img className="vb-footer-logo" src="assets/brand/logo-mark.png" alt="JOP Creativity" />
          <span>© 2026 {D.identity.studio} · {D.identity.fullStudio} · NIP {D.identity.nip} · REGON {D.identity.regon}</span>
        </div>
        <span className="vb-footer-motto">Imagine. Design. Create.</span>
      </footer>
    </div>
  );
};

window.VariantB = VariantB;