// 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 [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; }
    .vb-brand img { height: 40px; display: block; }
    .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; opacity: 0.55; filter: saturate(0.9); }
    .vb-hero-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,6,9,0.5) 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 80% 60% at 30% 50%, transparent 0%, rgba(5,6,9,0.7) 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-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: 4/5; background: linear-gradient(135deg, #1a0d18, #0a0606); border: 1px solid rgba(212,179,100,0.18); overflow: hidden; display: flex; align-items: center; justify-content: center; }
    .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%); }
    .vb-current-art::after { left: 50%; top: 0; bottom: 0; width: 1px; background: linear-gradient(to bottom, transparent, rgba(212,179,100,0.4), transparent); transform: translateX(-50%); }
    .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-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-testimonials { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
    .vb-test-card { padding: 32px 28px; background: linear-gradient(180deg, #0a0b0f, #07080b); border: 1px solid rgba(212,179,100,0.12); position: relative; }
    .vb-test-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 { margin: 0 0 24px; font-size: 15px; line-height: 1.6; color: #d8d4dc; font-style: italic; position: relative; z-index: 1; }
    .vb-test-card .who { font-size: 14px; font-weight: 600; color: #f0eef0; }
    .vb-test-card .ctx { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: #7a7382; margin-top: 4px; }

    .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; }

    @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; } .vb-testimonials { grid-template-columns: 1fr; } }
    @container vb (max-width: 900px) {
      .vb-nav-links { display: none; }
      .vb-nav { padding: 12px 18px; }
      .vb-brand img { height: 32px; }
      .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-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-art { aspect-ratio: 16/10; max-height: 360px; }
      .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-test-card { padding: 26px 22px; }
      .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">
        <div className="vb-brand"><img src="assets/brand/logo.png" alt="JOP Creativity" /></div>
        <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 === "pl" ? "active" : ""}>PL</span>
            <span className="sep">/</span>
            <span className={lang === "en" ? "active" : ""}>EN</span>
          </button>
          <a className="vb-btn small" href={"mailto:" + D.identity.email}>{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">
          <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("projects")}>{t.cta_primary} →</button>
              <a className="vb-btn" href={"mailto:" + D.identity.email}>{t.cta_secondary}</a>
            </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 className="vb-about-portrait-cap">{D.identity.name} · {lang === "pl" ? D.identity.location : D.identity.locationEn}</div>
            </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-inner">
          <div className="vb-current-art">
            <div className="vb-current-mark">
              <div className="glyph">M</div>
              <div className="name">MedMan</div>
              <div className="status"><span className="pulse"></span> {lang === "pl" ? D.current.statusPl : D.current.statusEn}</div>
            </div>
          </div>
          <div className="vb-current-text">
            <div className="vb-eyebrow vb-mono"><span className="line"></span><span>02 — {t.sections.current}</span></div>
            <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>
      </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" ? <>Wybrane <span className="accent">prace.</span></> : <>Selected <span className="accent">work.</span></>}</h2>
        </div>
        {D.projects.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) => (
                <li key={s.title}>
                  <div className="vb-narrative-title">{s.title}</div>
                  <p className="vb-narrative-note">{lang === "pl" ? s.note_pl : s.note_en}</p>
                  <a className="vb-narrative-link" href={s.file} 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) => (
                <li key={s.title}>
                  <div className="vb-narrative-title">{s.title}</div>
                  <p className="vb-narrative-note">{lang === "pl" ? s.note_pl : s.note_en}</p>
                  <a className="vb-narrative-link" href={s.file} 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) => (
                <li key={s.title}>
                  <div className="vb-narrative-title">{s.title}</div>
                  <p className="vb-narrative-note">{lang === "pl" ? s.note_pl : s.note_en}</p>
                  <a className="vb-narrative-link" href={s.file} 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">{lang === "pl" ? <>Co mówią <span className="accent">współpracownicy.</span></> : <>What <span className="accent">collaborators</span> say.</>}</h2>
        <div className="vb-testimonials">
          {D.testimonials.map((te, i) => (
            <div key={i} className="vb-test-card">
              <div className="mark">"</div>
              <blockquote>{te.quote}</blockquote>
              <div className="who">{te.name}</div>
              <div className="ctx">{te.context[lang]}</div>
            </div>
          ))}
        </div>
      </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 <span className="accent">something.</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">
        <span>© 2026 {D.identity.studio} · {D.identity.fullStudio} · NIP {D.identity.nip} · REGON {D.identity.regon}</span>
        <span className="vb-footer-motto">Imagine. Design. Create.</span>
      </footer>
    </div>
  );
};

window.VariantB = VariantB;