// Variant B — Architectural Light
// Світла, повітряна, швейцарська сітка, фокус на даних

const HERO_SLIDES = [
'assets/hero-1.jpg',
'assets/hero-2.jpg',
'assets/hero-3.jpg',
'assets/hero-4.jpg',
'assets/hero-5.jpg'];


const SpaceSlideshow = ({ photos, alt }) => {
  const [idx, setIdx] = React.useState(0);
  React.useEffect(() => {
    const t = setInterval(() => setIdx((i) => (i + 1) % photos.length), 3800);
    return () => clearInterval(t);
  }, [photos.length]);
  return (
    <div style={{ position: 'absolute', inset: 0 }}>
      {photos.map((src, i) =>
      <img key={src} src={src} alt={`${alt} — ${i + 1}`}
      style={{
        position: 'absolute', inset: 0,
        width: '100%', height: '100%', objectFit: 'cover',
        opacity: i === idx ? 1 : 0, transition: 'opacity 0.9s ease-in-out'
      }} />
      )}
      <div style={{
        position: 'absolute', bottom: 10, left: 10, display: 'flex', gap: 5, zIndex: 2
      }}>
        {photos.map((_, i) =>
        <span key={i} style={{
          width: i === idx ? 18 : 6, height: 3,
          background: i === idx ? '#fff' : 'rgba(255,255,255,0.5)',
          transition: 'all 0.4s ease', borderRadius: 2
        }} />
        )}
      </div>
    </div>);

};

const HeroSlideshow = () => {
  const [idx, setIdx] = React.useState(0);
  React.useEffect(() => {
    const t = setInterval(() => setIdx((i) => (i + 1) % HERO_SLIDES.length), 4500);
    return () => clearInterval(t);
  }, []);
  return (
    <div style={vbStyles.heroPhotoWide}>
      {HERO_SLIDES.map((src, i) =>
      <img
        key={src}
        src={src}
        alt={`Upstream Place — фото ${i + 1}`}
        style={{
          ...vbStyles.heroPhotoImgWide,
          position: 'absolute',
          inset: 0,
          opacity: i === idx ? 1 : 0,
          transition: 'opacity 1.2s ease-in-out'
        }} />

      )}
      <div style={{
        position: 'absolute', bottom: 16, left: 16, display: 'flex', gap: 6, zIndex: 2
      }}>
        {HERO_SLIDES.map((_, i) =>
        <span key={i} style={{
          width: i === idx ? 24 : 8, height: 4, background: i === idx ? '#fff' : 'rgba(255,255,255,0.45)',
          transition: 'all 0.4s ease', borderRadius: 2
        }} />
        )}
      </div>

      {/* TOP-LEFT GREEN BADGES */}
      <div className="vb-hero-badges-top" style={{
        position: 'absolute', top: 20, left: 20, display: 'flex', gap: 8, zIndex: 2, flexWrap: 'wrap'
      }}>
        <span style={{
          background: VB_ACCENT, color: '#fff',
          padding: '8px 14px', borderRadius: 999,
          fontFamily: '"JetBrains Mono", monospace', fontSize: 11, fontWeight: 600,
          letterSpacing: '0.08em', textTransform: 'uppercase',
          display: 'inline-flex', alignItems: 'center', gap: 8
        }}>
          <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#fff' }} />
          Зйомки · Подкасти · Live
        </span>
        <span style={{
          background: 'rgba(255,255,255,0.92)', color: VB_INK,
          padding: '8px 14px', borderRadius: 999,
          fontFamily: '"JetBrains Mono", monospace', fontSize: 11, fontWeight: 600,
          letterSpacing: '0.08em', textTransform: 'uppercase'
        }}>
          150–300 місць
        </span>
      </div>

      {/* BOTTOM-RIGHT TECH BADGES */}
      <div className="vb-hero-badges-bot" style={{
        position: 'absolute', bottom: 20, right: 20, display: 'flex', gap: 8, zIndex: 2, flexWrap: 'wrap', justifyContent: 'flex-end'
      }}>
        <span style={{
          background: 'rgba(20,30,25,0.7)', backdropFilter: 'blur(8px)', color: '#fff',
          padding: '10px 14px', borderRadius: 6,
          fontFamily: '"JetBrains Mono", monospace', fontSize: 11, fontWeight: 500,
          letterSpacing: '0.04em',
          border: `1px solid ${VB_ACCENT}`,
          display: 'inline-flex', alignItems: 'center', gap: 8
        }}>
          <span style={{ color: VB_ACCENT }}>◆</span>
          СЦЕНА 12×4 м
        </span>
        <span style={{
          background: 'rgba(20,30,25,0.7)', backdropFilter: 'blur(8px)', color: '#fff',
          padding: '10px 14px', borderRadius: 6,
          fontFamily: '"JetBrains Mono", monospace', fontSize: 11, fontWeight: 500,
          letterSpacing: '0.04em',
          border: `1px solid ${VB_ACCENT}`,
          display: 'inline-flex', alignItems: 'center', gap: 8
        }}>
          <span style={{ color: VB_ACCENT }}>◆</span>
          LED 6×2,5 м
        </span>
        <span style={{
          background: 'rgba(20,30,25,0.7)', backdropFilter: 'blur(8px)', color: '#fff',
          padding: '10px 14px', borderRadius: 6,
          fontFamily: '"JetBrains Mono", monospace', fontSize: 11, fontWeight: 500,
          letterSpacing: '0.04em',
          border: `1px solid ${VB_ACCENT}`,
          display: 'inline-flex', alignItems: 'center', gap: 8
        }}>
          <span style={{ color: VB_ACCENT }}>◆</span>
          СТЕЛЯ 6,5 м
        </span>
      </div>
    </div>);

};

const TourSection = () => {
  const [submitted, setSubmitted] = React.useState(false);
  const [name, setName] = React.useState('');
  const [phone, setPhone] = React.useState('');
  const onSubmit = (e) => {
    e.preventDefault();
    if (!phone.trim()) return;
    setSubmitted(true);
    setTimeout(() => setSubmitted(false), 6000);
    setName('');setPhone('');
  };
  return (
    <section style={{ padding: '0 48px 96px' }}>
      <div className="vb-tour-grid" style={{
        maxWidth: 1440, margin: '0 auto',
        background: VB_INK, color: 'oklch(0.97 0.012 75)',
        borderRadius: 6, padding: '64px 56px',
        display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'center',
        position: 'relative', overflow: 'hidden'
      }}>
        <div>
          <div style={{ fontFamily: '"JetBrains Mono", monospace', fontSize: 11, letterSpacing: '0.08em', textTransform: 'uppercase', color: VB_ACCENT, marginBottom: 16 }}>09 — Перегляд</div>
          <h2 style={{ fontFamily: '"Unbounded", sans-serif', fontSize: 'clamp(28px, 3vw, 40px)', fontWeight: 500, lineHeight: 1.1, margin: 0 }}>Запишіться на перегляд</h2>
          <p style={{ marginTop: 16, fontSize: 16, lineHeight: 1.6, opacity: 0.75, maxWidth: 460 }}>Покажемо простір вживу. Залиште імʼя та номер — зателефонуємо протягом 15 хв, щоб підібрати зручний час.</p>
        </div>
        <form onSubmit={onSubmit} style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          <input value={name} onChange={(e) => setName(e.target.value)} placeholder="Імʼя" style={{ background: 'transparent', border: '1px solid oklch(0.97 0.012 75 / 0.2)', color: '#fff', padding: '16px 20px', fontSize: 16, fontFamily: 'inherit', borderRadius: 4, outline: 'none' }} />
          <input value={phone} onChange={(e) => setPhone(e.target.value)} placeholder="Телефон" style={{ background: 'transparent', border: '1px solid oklch(0.97 0.012 75 / 0.2)', color: '#fff', padding: '16px 20px', fontSize: 16, fontFamily: 'inherit', borderRadius: 4, outline: 'none' }} />
          <button type="submit" style={{ background: VB_ACCENT, color: '#fff', border: 'none', padding: '18px 24px', fontSize: 15, fontWeight: 600, fontFamily: 'inherit', borderRadius: 4, cursor: 'pointer', letterSpacing: '0.02em' }}>Записатися на перегляд →</button>
        </form>
        {submitted &&
        <div style={{
          position: 'absolute', inset: 0, background: 'oklch(0.22 0.025 50 / 0.97)',
          display: 'flex', alignItems: 'center', justifyContent: 'center', flexDirection: 'column', gap: 12,
          animation: 'fadeIn 0.3s ease'
        }}>
            <div style={{ fontFamily: '"JetBrains Mono", monospace', fontSize: 11, letterSpacing: '0.1em', color: VB_ACCENT }}>✓ ЗАЯВКА ПРИЙНЯТА</div>
            <div style={{ fontFamily: '"Unbounded", sans-serif', fontSize: 28, textAlign: 'center', maxWidth: 600 }}>Зателефонуємо протягом 15 хв</div>
          </div>
        }
      </div>
    </section>);

};

const BookingModal = ({ open, onClose, context, palette }) => {
  const [submitted, setSubmitted] = React.useState(false);
  const [name, setName] = React.useState('');
  const [phone, setPhone] = React.useState('');
  const [email, setEmail] = React.useState('');
  const [date, setDate] = React.useState('');
  const [format, setFormat] = React.useState(context?.format || '');
  const [msg, setMsg] = React.useState('');
  const [sending, setSending] = React.useState(false);
  const [error, setError] = React.useState('');
  const [phoneError, setPhoneError] = React.useState(false);
  React.useEffect(() => {if (open) {setSubmitted(false);setFormat(context?.format || '');setPhoneError(false);setError('');}}, [open, context]);
  React.useEffect(() => {
    if (!open) return;
    const onKey = (e) => {if (e.key === 'Escape') onClose();};
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [open, onClose]);
  if (!open) return null;
  const onSubmit = async (e) => {
    e.preventDefault();
    if (!phone.trim()) {
      setPhoneError(true);
      setError('Вкажіть номер телефону — без нього ми не зможемо звʼязатися.');
      return;
    }
    if (sending) return;
    setSending(true);
    setError('');
    setPhoneError(false);
    try {
      const res = await fetch('/api/booking', {
        method: 'POST',
        headers: { 'content-type': 'application/json' },
        body: JSON.stringify({
          name, phone, email, date, format, msg,
          label: context?.label, title: context?.title,
          source: typeof window !== 'undefined' ? window.location.href : ''
        })
      });
      if (!res.ok) throw new Error('Не вдалося надіслати. Спробуйте ще раз або зателефонуйте.');
      if (typeof window !== 'undefined' && typeof window.gtag === 'function') {
        window.gtag('event', 'generate_lead', {
          form_label: context?.label || 'booking',
          form_title: context?.title || '',
          has_email: !!email.trim(),
          has_date: !!date.trim()
        });
      }
      setSubmitted(true);
      setTimeout(() => {onClose();setName('');setPhone('');setEmail('');setDate('');setMsg('');}, 2200);
    } catch (err) {
      setError(err.message || 'Помилка надсилання');
    } finally {
      setSending(false);
    }
  };
  const overlay = (
    <div className="vb-root vb-modal-overlay" data-palette={palette} onClick={onClose} style={{
      position: 'fixed', inset: 0, background: 'rgba(10,17,13,0.7)', backdropFilter: 'blur(6px)',
      zIndex: 2147483645, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 24,
      overflow: 'auto'
    }}>
      <div className="vb-modal-box" onClick={(e) => e.stopPropagation()} style={{
        background: '#fff', borderRadius: 8, maxWidth: 640, width: '100%',
        padding: '40px 40px 32px', position: 'relative',
        fontFamily: '"Manrope", system-ui, sans-serif'
      }}>
        <button onClick={onClose} aria-label="Закрити" style={{
          position: 'absolute', top: 16, right: 16, background: 'transparent', border: 'none',
          fontSize: 24, cursor: 'pointer', color: VB_MUTED, width: 36, height: 36, borderRadius: 4
        }}>×</button>
        <div style={{ fontFamily: '"JetBrains Mono", monospace', fontSize: 11, letterSpacing: '0.12em', color: VB_ACCENT, marginBottom: 12, fontWeight: 700 }}>
          ◆ {context?.label || 'БРОНЮВАННЯ'}
        </div>
        <h3 className="vb-modal-title" style={{ fontFamily: '"Unbounded", sans-serif', fontSize: 28, fontWeight: 500, margin: '0 0 8px', letterSpacing: '-0.02em', color: VB_INK }}>
          {context?.title || 'Залишити заявку'}
        </h3>
        <p style={{ margin: '0 0 24px', fontSize: 14, lineHeight: 1.55, color: VB_TEXT }}>
          {context?.subtitle || 'Заповніть форму — прорахуємо вартість і повернемось протягом години.'}
        </p>
        {submitted ?
        <div style={{ padding: '40px 0', textAlign: 'center' }}>
            <div style={{ fontFamily: '"JetBrains Mono", monospace', fontSize: 11, letterSpacing: '0.12em', color: VB_ACCENT, marginBottom: 12 }}>✓ ЗАЯВКА ПРИЙНЯТА</div>
            <div style={{ fontFamily: '"Unbounded", sans-serif', fontSize: 22, color: VB_INK }}>Зателефонуємо протягом години</div>
          </div> :
        <form onSubmit={onSubmit} style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            <div className="vb-modal-row" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
              <input value={name} onChange={(e) => setName(e.target.value)} placeholder="Імʼя" style={modalInputStyle} />
              <input value={phone} onChange={(e) => {setPhone(e.target.value); if (phoneError) {setPhoneError(false); setError('');}}} placeholder="Телефон *" aria-invalid={phoneError} style={{ ...modalInputStyle, border: phoneError ? '1px solid #c0392b' : modalInputStyle.border, background: phoneError ? '#fdf2f0' : modalInputStyle.background }} />
            </div>
            <div className="vb-modal-row" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
              <input value={email} onChange={(e) => setEmail(e.target.value)} type="email" placeholder="Email" style={modalInputStyle} />
              <input value={date} onChange={(e) => setDate(e.target.value)} type="date" placeholder="Дата" style={modalInputStyle} />
            </div>
            <select value={format} onChange={(e) => setFormat(e.target.value)} style={modalInputStyle}>
              <option value="">Формат події</option>
              <option>Зйомка / продакшн</option>
              <option>Концерт / стендап</option>
              <option>Подкаст</option>
              <option>Конференція / лекція</option>
              <option>Інше</option>
            </select>
            <textarea value={msg} onChange={(e) => setMsg(e.target.value)} placeholder="Коротко про подію (кількість гостей, час, технічні потреби)" rows={3} style={{ ...modalInputStyle, resize: 'vertical', fontFamily: 'inherit' }} />
            <button type="submit" disabled={sending} style={{ background: VB_ACCENT, color: '#fff', border: 'none', padding: '16px 24px', fontSize: 15, fontWeight: 600, fontFamily: 'inherit', borderRadius: 4, cursor: sending ? 'wait' : 'pointer', letterSpacing: '0.02em', marginTop: 4, opacity: sending ? 0.7 : 1 }}>
              {sending ? 'Надсилаю…' : 'Надіслати заявку →'}
            </button>
            {error &&
              <div style={{ fontSize: 13, color: '#c0392b', textAlign: 'center', marginTop: 4 }}>{error}</div>
            }
            <div style={{ fontSize: 12, color: VB_MUTED, textAlign: 'center', marginTop: 4 }}>
              Або зателефонуйте: <a href="tel:+380639842752" style={{ color: VB_INK }}>+38 063 984 27 52</a>
            </div>
          </form>
        }
      </div>
    </div>);
  return ReactDOM.createPortal(overlay, document.body);

};
const modalInputStyle = {
  background: '#f7f5f0', border: '1px solid #e2dfd6', color: '#1a1a1a',
  padding: '14px 16px', fontSize: 14, fontFamily: 'inherit', borderRadius: 4,
  outline: 'none', width: '100%', boxSizing: 'border-box'
};

const VariantB = ({ hideTweaks }) => {
  const [hovered, setHovered] = React.useState(null);
  const [activeFilter, setActiveFilter] = React.useState('all');
  const [booking, setBooking] = React.useState(null);
  const openBooking = (ctx) => setBooking(ctx || {});
  const closeBooking = () => setBooking(null);
  const scrollToId = (id) => (e) => {
    e.preventDefault();
    const el = document.getElementById(id);
    if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
  };
  const scrollToSpace = (spaceId) => (e) => {
    e.preventDefault();
    setActiveFilter('all');
    requestAnimationFrame(() => {
      const el = document.getElementById('space-' + spaceId) || document.getElementById('spaces');
      if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
    });
  };
  const [tweaks, setTweak] = typeof useTweaks !== 'undefined' ? useTweaks(/*EDITMODE-BEGIN*/{
    "palette": "forest"
  } /*EDITMODE-END*/) : [{ palette: 'forest' }, () => {}];

  const spaces = [
  { id: 'hall', code: 'H-01', name: 'Велика зала', area: 370, cap: 320, ceil: 6.5, price: 3000, type: 'event', photo: 'assets/hall-catalog.png', tags: ['Концерт', 'Зйомка', 'Конференція'], desc: 'Універсальна локація 370 м² зі сценою 6×2,5 м, LED-екраном на всю задню стіну та повним технічним забезпеченням.' },
  { id: 'lounge', code: 'L-02', name: 'Конференц-лаундж', area: 60, cap: 40, ceil: 3.20, price: 800, type: 'meeting', photo: 'assets/lounge-01.png', photos: ['assets/lounge-01.png', 'assets/lounge-02.png'], tags: ['Конференція', 'Гримерка', 'Зйомка'], desc: 'Простір другого фокусу — конференц-зал, лаундж, освітні заходи або локація для зйомок.' },
  { id: 'podcast', code: 'P-03', name: 'Подкаст-студія', area: null, cap: 4, ceil: null, price: null, type: 'studio', photo: 'assets/podcast-soon.png', tags: ['Скоро'], desc: 'Звукоізольована подкаст-студія повного циклу — у фінальній стадії ремонту. Запуск у 2026.', soon: true }];


  const filtered = activeFilter === 'all' ? spaces : spaces.filter((s) => s.type === activeFilter);

  return (
    <div style={vbStyles.root} className="vb-root" data-palette={tweaks.palette}>
      <style>{vbCss}</style>
      {!hideTweaks && typeof TweaksPanel !== 'undefined' && ReactDOM.createPortal(
        <TweaksPanel title="Tweaks · Палітра">
          <TweakRadio
            label="Палітра"
            value={tweaks.palette}
            onChange={(v) => setTweak('palette', v)}
            options={[
            { value: 'warm', label: 'Warm' },
            { value: 'forest', label: 'Forest' },
            { value: 'lime', label: 'Lime' },
            { value: 'ink', label: 'Ink' },
            { value: 'stone', label: 'Stone' }]
            } />
          
        </TweaksPanel>,
        document.body
      )}

      {/* TOPBAR */}
      <header style={vbStyles.topbar}>
        <div className="vb-topbar-inner" style={vbStyles.topbarInner}>
          <div style={vbStyles.brand}>
            <span style={vbStyles.brandMark}>◐</span>
            <span style={vbStyles.brandName}>Upstream Place</span>
          </div>
          <nav className="vb-nav" style={vbStyles.nav}>
            <a href="#spaces" onClick={scrollToId('spaces')} style={{ ...vbStyles.navLink, cursor: 'pointer' }}>Простори</a>
            <a href="#pricing" onClick={scrollToId('pricing')} style={{ ...vbStyles.navLink, cursor: 'pointer' }}>Тарифи</a>
            <a href="#amenities" onClick={scrollToId('amenities')} style={{ ...vbStyles.navLink, cursor: 'pointer' }}>Зручності</a>
            <a href="#location" onClick={scrollToId('location')} style={{ ...vbStyles.navLink, cursor: 'pointer' }}>Локація</a>
            <a href="#contacts" onClick={scrollToId('contacts')} style={{ ...vbStyles.navLink, cursor: 'pointer' }}>Контакти</a>
          </nav>
          <div className="vb-topbar-right" style={vbStyles.topbarRight}>
            <a href="tel:+380639842752" style={{ ...vbStyles.topbarMeta, textDecoration: 'none' }}>+38 063 984 27 52</a>
            <button onClick={() => openBooking({ label: 'БРОНЮВАННЯ', title: 'Забронювати простір' })} style={vbStyles.btnFilled}>Забронювати</button>
          </div>
        </div>
      </header>

      {/* HERO */}
      <section className="vb-hero" style={vbStyles.hero}>
        <div className="vb-hero-badges-mobile" style={{display:'none'}}>
          <span className="vb-hbm-green">● Зйомки · Подкасти · Live</span>
          <span className="vb-hbm-white">150–300 місць</span>
        </div>
        <HeroSlideshow />
        <div className="vb-hero-left" style={vbStyles.heroLeft}>
          <div style={vbStyles.heroLeftMain}>
            <div style={vbStyles.heroIndex}>
              <span style={vbStyles.heroIndexNum}>N° 01</span>
              <span style={vbStyles.heroIndexDiv}></span>
              <span style={vbStyles.heroIndexLoc}>KYIV</span>
            </div>
            <div style={vbStyles.heroLabel}>
              <span style={vbStyles.heroDot}></span>
              <span>Київ — погодинна оренда — будні дні</span>
            </div>
            <h1 style={vbStyles.heroTitle}>
              Простір для зйомок, подкастів і <span style={{ ...vbStyles.heroSerif, whiteSpace: 'nowrap' }}>live-шоу</span> з аудиторією.
            </h1>
            <p style={vbStyles.heroP}>
              Зал зі сценою на 150–300 місць у Києві —
              для YouTube, подкастів, інтерв&apos;ю, стендапу,
              концертів та інших подій з аудиторією.
            </p>
            <div className="vb-hero-ctas" style={vbStyles.heroCtas}>
              <button onClick={() => openBooking({ label: 'ЗАЯВКА', title: 'Залишити заявку' })} style={vbStyles.btnFilled}>Залишити заявку →</button>
              <button onClick={(e) => scrollToId('spaces')(e)} style={vbStyles.btnText}>Подивитися простори</button>
            </div>
          </div>

          <div style={vbStyles.heroSide}>
            <div style={vbStyles.heroSideTop}>
              <div style={vbStyles.heroSideKey}>Upstream Place</div>
              <div style={vbStyles.heroSideMeta}>H-01 · Велика зала</div>
              <div style={vbStyles.heroSideMeta}>370 м² · сцена 12/4 м</div>
              <div style={vbStyles.heroSideMeta}>LED-екран · світло · звук</div>
            </div>
            <div style={vbStyles.heroSideMid}>
              <div style={vbStyles.heroSideMidLabel}>Слоти бронювання</div>
              <div style={vbStyles.heroSideMidRow}>
                <span>Пн—Пт</span>
                <span style={vbStyles.heroSideMidVal}>09:00 — 22:00</span>
              </div>
              <div style={vbStyles.heroSideMidRow}>
                <span>Вихідні</span>
                <span style={vbStyles.heroSideMidVal}>з 17:00</span>
              </div>
              <div style={vbStyles.heroSideMidRow}>
                <span>Мін. бронь</span>
                <span style={vbStyles.heroSideMidVal}>3 години</span>
              </div>
              <div style={vbStyles.heroSideMidRow}>
                <span>Відповідь</span>
                <span style={vbStyles.heroSideMidVal}>протягом години</span>
              </div>
            </div>
            <div style={vbStyles.heroStats}>
              <div style={vbStyles.heroStat}>
                <div style={{ ...vbStyles.heroStatVal, fontSize: "30px" }}>від 3000</div>
                <div style={vbStyles.heroStatU}>грн / год — будні події</div>
              </div>
              <div style={vbStyles.heroStat}>
                <div style={{ ...vbStyles.heroStatVal, fontSize: "30px" }}>від 5000</div>
                <div style={vbStyles.heroStatU}>грн / год — зйомки / подкасти</div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* PRIMARY USE — 3 ОСНОВНІ СЦЕНАРІЇ */}
      <section style={vbStyles.primary}>
        <div className="vb-primary-grid" style={vbStyles.primaryGrid}>
          {[
          { num: '01', icon: '🎬', title: 'Зйомки та продакшн', kinds: 'YouTube · подкасти · курси · інтервʼю', desc: 'Готова сцена 12×4 м,\nLED-екран 6×2,5 м, високі стелі під монтаж студійного світла.', price: 'від 5 000', unit: 'грн / год' },
          { num: '02', icon: '🎤', title: 'Live події', kinds: 'стендап · концерти · open mic', desc: 'Сцена з повним технічним забезпеченням, місткість 150–300 осіб, окрема гримерка.', price: 'від 2 500', unit: 'грн / год' },
          { num: '03', icon: '🎓', title: 'Освітні формати', kinds: 'лекції · воркшопи · школи', desc: 'Велика зала або компактний лаундж на 40 осіб. Екрани, мікрофони, можливість організації кава-брейку.', price: 'від 2 500', unit: 'грн / год' }].
          map((p) =>
          <div key={p.num} style={vbStyles.primaryCard}>
              <div style={vbStyles.primaryTop}>
                <span style={vbStyles.primaryNum}>{p.num}</span>
                <span style={vbStyles.primaryIcon}>{p.icon}</span>
              </div>
              <h3 style={vbStyles.primaryTitle}>{p.title}</h3>
              <div style={vbStyles.primaryKinds}>{p.kinds}</div>
              <p style={vbStyles.primaryDesc}>{p.desc}</p>
              <div style={vbStyles.primaryPrice}>
                <span style={vbStyles.primaryPriceVal}>{p.price}</span>
                <span style={vbStyles.primaryPriceUnit}>{p.unit}</span>
              </div>
            </div>
          )}
        </div>
      </section>

      {/* MARQUEE */}
      <section style={vbStyles.marqueeBar}>
        <div style={vbStyles.marqueeViewport}>
          <div style={vbStyles.marqueeTrack}>
            {[...Array(2)].map((_, i) =>
            <div key={i} style={vbStyles.marqueeRun} aria-hidden={i === 1}>
                <span style={vbStyles.marqueeItem}>
                  <span style={vbStyles.marqueeLbl}>Робочі дні</span>
                  <span style={vbStyles.marqueeVal}>пн — пт</span>
                </span>
                <span style={vbStyles.marqueeDot}>✦</span>
                <span style={vbStyles.marqueeItem}>
                  <span style={vbStyles.marqueeLbl}>Доступ</span>
                  <span style={vbStyles.marqueeVal}>24/7 за домовленістю</span>
                </span>
                <span style={vbStyles.marqueeDot}>✦</span>
                <span style={vbStyles.marqueeItem}>
                  <span style={vbStyles.marqueeLbl}>Парковка</span>
                  <span style={vbStyles.marqueeVal}>є парковка</span>
                </span>
                <span style={vbStyles.marqueeDot}>✦</span>
                <span style={vbStyles.marqueeItem}>
                  <span style={vbStyles.marqueeLbl}>Залишайте заявку

</span>
                  <span style={vbStyles.marqueeVal}>прорахуємо за годину</span>
                </span>
                <span style={vbStyles.marqueeDot}>✦</span>
              </div>)}
          </div>
        </div>
      </section>

      {/* SPACES */}
      <section id="spaces" style={vbStyles.spaces}>
        <div style={vbStyles.sectionHead}>
          <div>
            <div style={vbStyles.sectionLabel}>01 — Простори</div>
            <h2 style={vbStyles.sectionTitle}>Каталог локацій</h2>
          </div>
          <div style={vbStyles.filters}>
            {[{ id: 'all', label: 'Усі' },
            { id: 'event', label: 'Великі івенти' },
            { id: 'meeting', label: 'Зустрічі' },
            { id: 'studio', label: 'Студії' }].
            map((f) =>
            <button
              key={f.id}
              onClick={() => setActiveFilter(f.id)}
              style={{
                ...vbStyles.filterBtn,
                ...(activeFilter === f.id ? vbStyles.filterBtnActive : {})
              }}>
              {f.label}</button>
            )}
          </div>
        </div>

        <div className="vb-spaces-grid" style={vbStyles.spacesGrid}>
          {filtered.map((s) =>
          <article
            key={s.id}
            id={'space-' + s.id}
            style={{
              ...vbStyles.spaceCard,
              ...(hovered === s.id ? vbStyles.spaceCardHover : {}),
              ...(s.soon ? vbStyles.spaceCardSoon : {})
            }}
            onMouseEnter={() => setHovered(s.id)}
            onMouseLeave={() => setHovered(null)}>
            
              <div style={vbStyles.spaceImg}>
                {s.photos && s.photos.length > 1 ?
              <SpaceSlideshow photos={s.photos} alt={s.name} /> :
              s.photo ?
              <img src={s.photo} alt={s.name} style={vbStyles.spaceImgEl} /> :

              <div style={vbStyles.imgPlaceholderInner}>
                    <span style={vbStyles.imgPlaceholderCode}>{s.code}</span>
                    <span style={vbStyles.imgPlaceholderLabel}>
                      {s.soon ? 'У ремонті' : 'Фото простору'}
                    </span>
                  </div>
              }
                {s.soon && s.photo &&
              <div style={{
                position: 'absolute', inset: 0,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                pointerEvents: 'none'
              }}>
                    <span style={{
                  fontFamily: '"Unbounded", sans-serif',
                  fontSize: 'clamp(40px, 7vw, 64px)',
                  fontWeight: 600,
                  letterSpacing: '-0.04em',
                  color: '#fff',
                  lineHeight: 1,
                  textShadow: '0 4px 32px rgba(0,0,0,0.55)'
                }}>soon..</span>
                  </div>
              }
              </div>
              <div style={vbStyles.spaceBody}>
                <div style={vbStyles.spaceMeta}>
                  <span style={vbStyles.spaceCode}>{s.code}</span>
                  <div style={vbStyles.spaceTags}>
                    {s.tags.map((t) => <span key={t} style={vbStyles.spaceTag}>{t}</span>)}
                  </div>
                </div>
                <h3 style={vbStyles.spaceName}>{s.name}</h3>
                <p style={vbStyles.spaceDesc}>{s.desc}</p>
                <div style={vbStyles.spaceMetricsRow}>
                  <div style={vbStyles.spaceMetric}>
                    <span style={vbStyles.spaceMetricL}>Площа</span>
                    <span style={vbStyles.spaceMetricV}>{s.area ? `${s.area} м²` : '—'}</span>
                  </div>
                  <div style={vbStyles.spaceMetric}>
                    <span style={vbStyles.spaceMetricL}>Місткість</span>
                    <span style={vbStyles.spaceMetricV}>{s.cap}</span>
                  </div>
                  <div style={vbStyles.spaceMetric}>
                    <span style={vbStyles.spaceMetricL}>Стеля</span>
                    <span style={vbStyles.spaceMetricV}>{s.ceil ? `${String(s.ceil).replace('.', ',')} м` : '—'}</span>
                  </div>
                </div>
                <div style={vbStyles.spaceFoot}>
                  <div>
                    <div style={vbStyles.spacePriceVal}>
                      {s.price ? s.price.toLocaleString('uk-UA') : 'Скоро'}
                      {s.price && <span style={vbStyles.spacePriceCur}> грн</span>}
                    </div>
                    <div style={vbStyles.spacePriceUnit}>{s.price ? 'за годину' : 'TBA · 2026'}</div>
                  </div>
                  <button
                  onClick={() => openBooking({ label: s.code, title: s.name, subtitle: s.soon ? 'Залиште контакт — повідомимо коли простір відкриється.' : `Орієнтовно ${s.price ? s.price.toLocaleString('uk-UA') + ' грн/год' : ''}. Прорахуємо точно під ваш формат.`, format: s.type === 'studio' ? 'Подкаст' : s.type === 'meeting' ? 'Конференція / лекція' : '' })}
                  style={vbStyles.spaceBtn}>
                  {s.soon ? 'Сповістити →' : 'Деталі →'}</button>
                </div>
              </div>
            </article>
          )}
        </div>
      </section>

      {/* USE CASES — Інші формати (другорядні) */}
      <section style={vbStyles.useCases}>
        <div className="vb-others-head" style={vbStyles.othersHead}>
          <div style={vbStyles.othersHeadLeft}>
            <div style={vbStyles.sectionLabel}>02 — Інші формати</div>
            <h3 style={vbStyles.othersTitle}>Окрім зйомок та live-шоу</h3>
          </div>
          <p style={vbStyles.othersLead}>
            Відкриті до співпраці з церквами, музичними школами
            та іншими креативними просторами — на постійній або разовій основі.
          </p>
        </div>

        <div style={vbStyles.othersGrid}>
          {[
          { n: '01', t: 'Музичні школи', d: 'Звітні концерти, випускні, відкриті уроки. Сцена, звук, гримерка, LED-екран під афішу.', what: 'Сформовані пропозиції' },
          { n: '02', t: 'Церкви та спільноти', d: 'Зал зі сценою для богослужінь, конференцій, дитячих програм.', what: 'На постійній основі' },
          { n: '03', t: 'Оренда окремих кімнат', d: 'Лаундж 60 м² як переговорна, гримерка, camera room для подкасту або менші кімнати — під уроки та репетиції.', what: 'Від 600 грн / год' }].
          map((u) =>
          <div key={u.n} className="vb-others-row" style={vbStyles.othersRow}>
              <span style={vbStyles.othersNum}>{u.n}</span>
              <div className="vb-others-body" style={vbStyles.othersBody}>
                <h4 style={vbStyles.othersRowTitle}>{u.t}</h4>
                <p style={vbStyles.othersRowDesc}>{u.d}</p>
              </div>
              <div className="vb-others-tag" style={vbStyles.othersTag}>{u.what}</div>
            </div>
          )}
        </div>
      </section>

      {/* AMENITIES */}
      <section id="amenities" style={vbStyles.amenSection}>
        <div style={vbStyles.sectionHead}>
          <div>
            <div style={vbStyles.sectionLabel}>03 — Зручності</div>
            <h2 style={vbStyles.sectionTitle}>Усе включено у вартість</h2>
          </div>
        </div>

        <div className="vb-amen-grid" style={vbStyles.amenGrid}>
          {[
          { g: 'Технічне', items: ['Wi-Fi 1 Gbps', 'LED-екран 6×2,5 м', 'Звук та мікрофони', 'Проектор / плазма', 'Студійне світло'] },
          { g: 'Простір', items: ['Кондиціонування', 'Звукоізоляція', 'Висока стеля 6,5 м', 'Меблі-трансформери', 'Інвертор 16 кВт', 'Автономна робота під час блекаутів'] },
          { g: 'Сервіс', items: ['Окрема рецепція', 'Гримерка', 'Парковка', 'Доступ 24/7'] }].
          map((cat) =>
          <div key={cat.g} style={vbStyles.amenCol}>
              <div style={vbStyles.amenColTitle}>{cat.g}</div>
              <ul style={vbStyles.amenList}>
                {cat.items.map((i) =>
              <li key={i} style={vbStyles.amenLi}>
                    <span style={vbStyles.amenCheck}>+</span>
                    <span>{i}</span>
                  </li>
              )}
              </ul>
            </div>
          )}
        </div>
      </section>

      {/* GREEN ACCENT STRIPE — декоративна плашка */}
      <section style={{ maxWidth: 1440, margin: '0 auto', padding: '64px 48px 0' }}>
        <div className="vb-green-stripe" style={{
          background: VB_ACCENT,
          color: '#fff',
          borderRadius: 8,
          padding: '40px 48px',
          display: 'grid',
          gridTemplateColumns: '1fr auto',
          gap: 48,
          alignItems: 'center',
          position: 'relative',
          overflow: 'hidden'
        }}>
          <div style={{
            position: 'absolute', top: 0, right: 0, bottom: 0, width: '40%',
            backgroundImage: 'repeating-linear-gradient(45deg, rgba(255,255,255,0.08) 0, rgba(255,255,255,0.08) 1px, transparent 1px, transparent 18px)',
            pointerEvents: 'none'
          }} />
          <div style={{ position: 'relative', zIndex: 2 }}>
            <div style={{
              fontFamily: '"JetBrains Mono", monospace', fontSize: 11, letterSpacing: '0.12em',
              textTransform: 'uppercase', opacity: 0.7, marginBottom: 14
            }}>
              ◆ Чому Upstream Place
            </div>
            <div style={{
              fontFamily: '"Unbounded", sans-serif', fontSize: 32, fontWeight: 500,
              letterSpacing: '-0.02em', lineHeight: 1.15, maxWidth: 720
            }}>
              Готовий простір з технікою — без витрат на оренду світла, звуку, монтажу сцени.
            </div>
          </div>
          <div style={{
            display: 'flex', flexDirection: 'column', gap: 10, position: 'relative', zIndex: 2,
            paddingLeft: 32, borderLeft: '1px solid rgba(255,255,255,0.25)'
          }}>
            {[
            { k: '370 м²', l: 'площа залу' },
            { k: '4,45 м', l: 'висота стелі' },
            { k: '24 / 7', l: 'доступ за домовленістю' }].
            map((row) =>
            <div key={row.k} style={{ display: 'flex', alignItems: 'baseline', gap: 12 }}>
                <span style={{ fontFamily: '"Unbounded", sans-serif', fontSize: 22, fontWeight: 600, letterSpacing: '-0.02em', minWidth: 90 }}>{row.k}</span>
                <span style={{ fontSize: 13, opacity: 0.85 }}>{row.l}</span>
              </div>
            )}
          </div>
        </div>
      </section>

      {/* PRICING TABLE */}
      <section id="pricing" style={vbStyles.pricing}>
        <div style={vbStyles.sectionHead}>
          <div>
            <div style={vbStyles.sectionLabel}>04 — Тарифи</div>
            <h2 style={vbStyles.sectionTitle}>Прозоре ціноутворення</h2>
          </div>
        </div>

        <div className="vb-price-table" style={vbStyles.priceTable}>
          <div className="vb-price-head" style={vbStyles.priceTableHead}>
            <div>Пакет</div>
            <div>Опис</div>
            <div>Тривалість</div>
            <div style={{ textAlign: 'right' }}>Ціна</div>
          </div>
          {[
          { tier: 'Погодинно — Велика зала', d: 'Базовий тариф для зйомок, репетицій, невеликих подій.  Мінімум 3 години.\nБазове сценічне світло, LED-екран, 2 радіомікрофони, звук з колонок.', t: '1 год', p: '3 000 грн', accent: false },
          { tier: 'Денний пакет — Велика зала', d: 'Базове сценічне світло, LED-екран, 2 радіомікрофони, звук з колонок. Економія 15% порівняно з погодинною оплатою.', t: '8 год', p: '20 000 грн', accent: false, badge: 'POPULAR' },
          { tier: 'Зйомочний день', d: 'Розширений день під відеозйомки. Без перерв, локація під ключ. Гримерка входить у вартість, технічне забезпечення обговорюється індивідуально.', t: '12 год', p: '22 000 грн', accent: false },
          { tier: 'Концерти — для музичних шкіл', d: 'Звітні концерти, випускні, відкриті уроки. Повне технічне забезпечення · звукорежисер на майданчику · базове сценічне світло · базова гримерка.', t: '', p: '', accent: false, group: true },
          { tier: 'Basic', d: 'Повне технічне забезпечення · звукорежисер на майданчику · сценічне світло · гримерка.', t: '3 год', p: '15 000 грн', accent: false, sub: true },
          { tier: 'Standard', d: 'Повне технічне забезпечення · звукорежисер на майданчику · сценічне світло · гримерка.', t: '5 год', p: '20 000 грн', accent: false, sub: true },
          { tier: 'Pro', d: 'Повне технічне забезпечення · звукорежисер на майданчику · сценічне світло · гримерка.', t: '8 год', p: '25 000 грн', accent: false, sub: true },
          { tier: 'Погодинно — Лаундж 60м²', d: 'Конференц-зал, гримерка, або локація для зйомок крупних планів.', t: '1 год', p: '800 грн', accent: false }].
          map((row, i) =>
          <div key={i} className="vb-price-row" style={{
            ...vbStyles.priceRow,
            ...(row.accent ? vbStyles.priceRowAccent : {}),
            ...(row.group ? { background: VB_ACCENT_SOFT, borderTop: `2px solid ${VB_ACCENT}`, color: VB_INK } : {}),
            ...(row.sub ? { background: 'transparent' } : {})
          }}>
              <div className="vb-price-tier" data-label="Пакет" style={{
              ...vbStyles.priceRowTier,
              ...(row.sub ? { paddingLeft: 28, fontWeight: 500, color: VB_TEXT, fontSize: 15 } : {}),
              ...(row.group ? { color: VB_INK, fontWeight: 600 } : {})
            }}>
                {row.sub && <span style={{ color: VB_ACCENT, marginRight: 8 }}>└</span>}
                {row.tier}
                {row.badge && <span style={vbStyles.priceBadge}>{row.badge}</span>}
              </div>
              <div className="vb-price-desc" data-label="Опис" style={vbStyles.priceRowDesc}>{row.d}</div>
              <div className="vb-price-time" data-label="Час" style={vbStyles.priceRowTime}>{row.t}</div>
              <div className="vb-price-price" data-label="Ціна" style={vbStyles.priceRowPrice}>{row.p}</div>
            </div>
          )}
        </div>

        <div style={vbStyles.priceFoot}>
          <div style={vbStyles.priceFootBlock}>
            <div style={vbStyles.priceFootLabel}>Графік</div>
            <div style={vbStyles.priceFootVal}>Будні дні (пн–пт). Вихідні дні з 17:00.</div>
          </div>
          <div style={vbStyles.priceFootBlock}>
            <div style={vbStyles.priceFootLabel}>Знижки</div>
            <div style={vbStyles.priceFootVal}>−10% на 3+ днів поспіль
</div>
          </div>
          <div style={vbStyles.priceFootBlock}>
            <div style={vbStyles.priceFootLabel}>Передоплата</div>
            <div style={vbStyles.priceFootVal}>50% при бронюванні. Решта — у день події.</div>
          </div>
        </div>
      </section>

      {/* LOCATION */}
      <section id="location" style={vbStyles.location}>
        <div className="vb-loc-inner" style={vbStyles.locInner}>
          <div style={vbStyles.locLeft}>
            <div style={vbStyles.sectionLabel}>05 — Локація</div>
            <h2 style={vbStyles.locTitle}>Зручна локація з великою парковкою.</h2>

            <div style={vbStyles.locRows}>
              <div style={vbStyles.locRow}>
                <span style={vbStyles.locL}>Адреса</span>
                <span style={vbStyles.locV}>пр-т Степана Бандери, 23, Київ</span>
              </div>
              <div style={vbStyles.locRow}>
                <span style={vbStyles.locL}>Метро</span>
                <span style={vbStyles.locV}>«Почайна» · 5 хв пішки</span>
              </div>
              <div style={vbStyles.locRow}>
                <span style={vbStyles.locL}>Доступ</span>
                <span style={vbStyles.locV}>24/7 за попередньою домовленістю</span>
              </div>
            </div>

            <div style={vbStyles.locCtas}>
              <a href="https://www.google.com/maps/place/Upstream+Church/@50.4921018,30.4945357,18z/data=!4m6!3m5!1s0x40d4cfc3ed16c377:0x17f98808107f402c!8m2!3d50.4921018!4d30.4945357!16s%2Fg%2F11vmb2xgc9" target="_blank" rel="noopener noreferrer" style={{ ...vbStyles.btnFilled, textDecoration: 'none', display: 'inline-flex', alignItems: 'center' }}>Відкрити в Google Maps</a>
              <a href="https://www.google.com/maps/dir/?api=1&destination=50.4921018,30.4945357" target="_blank" rel="noopener noreferrer" style={{ ...vbStyles.btnText, textDecoration: 'none', display: 'inline-flex', alignItems: 'center' }}>Як дістатись →</a>
            </div>
          </div>

          <div style={vbStyles.locRight}>
            <a href="https://www.google.com/maps/place/Upstream+Church/@50.4921018,30.4945357,18z/data=!4m6!3m5!1s0x40d4cfc3ed16c377:0x17f98808107f402c!8m2!3d50.4921018!4d30.4945357!16s%2Fg%2F11vmb2xgc9"
            target="_blank"
            rel="noopener noreferrer"
            style={{ ...vbStyles.mapBox, display: 'block', textDecoration: 'none', position: 'relative' }}
            aria-label="Відкрити локацію в Google Maps">
              
              <iframe
                src="https://www.google.com/maps?q=50.4921018,30.4945357&z=17&hl=uk&output=embed"
                style={{ width: '100%', height: '100%', border: 0, display: 'block', pointerEvents: 'none' }}
                loading="lazy"
                referrerPolicy="no-referrer-when-downgrade"
                title="Upstream Place — Google Maps" />
              
              <div style={{
                position: 'absolute', left: 16, bottom: 16,
                background: 'oklch(0.18 0.025 250)', color: 'oklch(0.96 0.005 240)',
                padding: '8px 12px', fontFamily: '"JetBrains Mono", monospace',
                fontSize: 11, fontWeight: 700, letterSpacing: '0.04em'
              }}>UPSTREAM PLACE ·пр-т Степана Бандери, 23
</div>
            </a>
          </div>
        </div>
      </section>

      {/* PROCESS — 4 кроки */}
      <section style={{ maxWidth: 1440, margin: '0 auto', padding: '120px 48px 96px' }}>
        <div style={vbStyles.sectionHead}>
          <div>
            <div style={vbStyles.sectionLabel}>06 — Як забронювати</div>
            <h2 style={vbStyles.sectionTitle}>Від першого дзвінка<br />до події — 4 кроки</h2>
          </div>
          <div style={vbStyles.sectionMeta}>Зазвичай — 24 години<br />від запиту до підтвердження</div>
        </div>
        <div className="vb-process-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24, marginTop: 56 }}>
          {[
          { n: '01', t: 'Заявка', d: 'Заповнюєте форму або телефонуєте. Розповідаєте формат, дату, кількість гостей та технічні потреби.' },
          { n: '02', t: 'Прорахунок', d: 'Протягом години надсилаємо комерційну пропозицію — погодинно або пакетом, із усіма зручностями.' },
          { n: '03', t: 'Перегляд', d: 'Запрошуємо в простір — обходимо локацію, обговорюємо нюанси, перевіряємо обладнання під ваш сценарій.' },
          { n: '04', t: 'Подія', d: 'У день події — техшпіль, наш менеджер на майданчику, повна готовність обладнання та сервісу.' }].
          map((p) =>
          <div key={p.n} style={{
            background: VB_CARD, border: `1px solid ${VB_BORDER}`, borderRadius: 6,
            padding: 32, display: 'flex', flexDirection: 'column', gap: 16, minHeight: 240
          }}>
              <div style={{
              fontFamily: '"JetBrains Mono", monospace', fontSize: 11, letterSpacing: '0.1em',
              color: VB_ACCENT, fontWeight: 700
            }}>STEP {p.n}</div>
              <h4 style={{ fontFamily: '"Unbounded", sans-serif', fontSize: 22, fontWeight: 500, margin: 0, lineHeight: 1.2, color: VB_INK }}>{p.t}</h4>
              <p style={{ margin: 0, fontSize: 14, lineHeight: 1.55, color: VB_TEXT }}>{p.d}</p>
            </div>
          )}
        </div>
      </section>

      {/* TRUST — Хто вже знімав / виступав */}
      {/* TOUR */}
      <div id="tour"><TourSection /></div>

      {/* CONTACTS */}
      <section id="contacts" style={vbStyles.contactsSection}>
        <div className="vb-contacts-inner" style={vbStyles.contactsInner}>
          <div style={vbStyles.contactsLeft}>
            <div style={{ ...vbStyles.sectionLabel, color: VB_ACCENT }}>10 — Контакти</div>
            <h2 style={vbStyles.contactsTitle}>Звʼяжіться з нами</h2>
            <p style={vbStyles.contactsLead}>
              Найшвидше — телефоном. Відповідаємо на повідомлення<br className="vb-contacts-br" />
              в Telegram та Instagram у робочий час.
            </p>
          </div>
          <div className="vb-contacts-right" style={vbStyles.contactsRight}>
            <a href="tel:+380639842752" style={vbStyles.contactsPhone}>
              <div style={vbStyles.contactsPhoneLabel}>Зателефонувати</div>
              <div style={vbStyles.contactsPhoneNum}>+38 063 984 27 52</div>
              <div style={vbStyles.contactsPhoneArrow}>→</div>
            </a>
            <div className="vb-contacts-social" style={vbStyles.contactsSocial}>
              <a href="https://t.me/upstream_place" target="_blank" rel="noopener noreferrer" style={vbStyles.contactsSocialBtn}>
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                  <path d="M21.5 4.5L2.5 11.8c-1 .4-1 1 .2 1.4l4.6 1.5 1.8 5.4c.2.6.4.8.8.8.4 0 .6-.2.9-.5l2.4-2.3 4.7 3.5c.9.5 1.5.2 1.7-.8l3.1-14.5c.3-1.3-.5-1.9-1.2-1.8z" fill="currentColor" />
                </svg>
                <span>Telegram</span>
              </a>
              <a href="https://www.instagram.com/upstream.place/" target="_blank" rel="noopener noreferrer" style={vbStyles.contactsSocialBtn}>
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                  <rect x="3" y="3" width="18" height="18" rx="5" stroke="currentColor" strokeWidth="1.8" />
                  <circle cx="12" cy="12" r="4" stroke="currentColor" strokeWidth="1.8" />
                  <circle cx="17.5" cy="6.5" r="1.2" fill="currentColor" />
                </svg>
                <span>Instagram</span>
              </a>
            </div>
          </div>
        </div>
      </section>

      <BookingModal open={!!booking} onClose={closeBooking} context={booking} palette={tweaks.palette} />

      {/* FOOTER */}
      <footer style={vbStyles.footer}>
        <div className="vb-footer-top" style={vbStyles.footerTop}>
          <div style={vbStyles.footerBrand}>
            <div style={vbStyles.footerMark}>Upstream Place</div>
            <div style={vbStyles.footerTag}>Простір для подій, що мають значення.<br />Київ — з 2024.</div>
          </div>
          <div className="vb-footer-cols" style={vbStyles.footerCols}>
            <div>
              <div style={vbStyles.footerColTitle}>Простори</div>
              <a href="#space-hall" onClick={scrollToSpace('hall')} style={{ ...vbStyles.footerLink, cursor: 'pointer' }}>Велика зала</a>
              <a href="#space-lounge" onClick={scrollToSpace('lounge')} style={{ ...vbStyles.footerLink, cursor: 'pointer' }}>Лаундж</a>
              <a href="#space-podcast" onClick={scrollToSpace('podcast')} style={{ ...vbStyles.footerLink, cursor: 'pointer' }}>Подкаст-студія</a>
            </div>
            <div>
              <div style={vbStyles.footerColTitle}>Інформація</div>
              <a href="#pricing" onClick={scrollToId('pricing')} style={{ ...vbStyles.footerLink, cursor: 'pointer' }}>Тарифи</a>
              <a href="#location" onClick={scrollToId('location')} style={{ ...vbStyles.footerLink, cursor: 'pointer' }}>Локація</a>
              <a href="#amenities" onClick={scrollToId('amenities')} style={{ ...vbStyles.footerLink, cursor: 'pointer' }}>Зручності</a>
            </div>
          </div>
        </div>
        <div className="vb-footer-contact" style={vbStyles.footerContact}>
          <a href="tel:+380639842752" style={vbStyles.footerPhone}>+38 063 984 27 52</a>
          <div style={vbStyles.footerSocial}>
            <a href="https://t.me/upstream_place" target="_blank" rel="noopener noreferrer" aria-label="Telegram" style={vbStyles.footerIconBtn}>
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                <path d="M21.5 4.5L2.5 11.8c-1 .4-1 1 .2 1.4l4.6 1.5 1.8 5.4c.2.6.4.8.8.8.4 0 .6-.2.9-.5l2.4-2.3 4.7 3.5c.9.5 1.5.2 1.7-.8l3.1-14.5c.3-1.3-.5-1.9-1.2-1.8z" fill="currentColor" />
              </svg>
            </a>
            <a href="https://www.instagram.com/upstream.place/" target="_blank" rel="noopener noreferrer" aria-label="Instagram" style={vbStyles.footerIconBtn}>
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                <rect x="3" y="3" width="18" height="18" rx="5" stroke="currentColor" strokeWidth="1.8" />
                <circle cx="12" cy="12" r="4" stroke="currentColor" strokeWidth="1.8" />
                <circle cx="17.5" cy="6.5" r="1.2" fill="currentColor" />
              </svg>
            </a>
          </div>
        </div>
        <div className="vb-footer-bottom" style={vbStyles.footerBottom}>
          <span>© 2024–2026 Upstream Place</span>
          <span>Зроблено з увагою до простору</span>
        </div>
      </footer>
    </div>);
};

// ===== VARIANT B STYLES =====
// Palette is driven by CSS custom properties on .vb-root[data-palette="…"]
// Each VB_* below maps to a var() so the whole UI re-themes with one attribute.
const VB_BG = 'var(--vb-bg)';
const VB_CARD = 'var(--vb-card)';
const VB_INK = 'var(--vb-ink)';
const VB_TEXT = 'var(--vb-text)';
const VB_MUTED = 'var(--vb-muted)';
const VB_BORDER = 'var(--vb-border)';
const VB_BORDER_STRONG = 'var(--vb-border-strong)';
const VB_ACCENT = 'var(--vb-accent)';
const VB_ACCENT_SOFT = 'var(--vb-accent-soft)';

const vbCss = `
  @import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@400;500;600;700;800;900&family=Inter:wght@400;500;600;700&family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400;500&display=swap');

  @font-face {
    font-family: 'Deutschlander';
    src: url('assets/Deutschlander.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
  }

  /* WARM — cream paper + terracotta (original) */
  .vb-root, .vb-root[data-palette="warm"] {
    --vb-bg: oklch(0.975 0.012 75);
    --vb-card: oklch(0.995 0.006 75);
    --vb-ink: oklch(0.22 0.025 50);
    --vb-text: oklch(0.36 0.022 55);
    --vb-muted: oklch(0.55 0.018 60);
    --vb-border: oklch(0.9 0.012 70);
    --vb-border-strong: oklch(0.82 0.018 65);
    --vb-accent: oklch(0.66 0.16 50);
    --vb-accent-soft: oklch(0.94 0.035 65);
  }

  /* MONO FOREST — neutral b/w + deep evergreen */
  .vb-root[data-palette="forest"] {
    --vb-bg: oklch(0.985 0 0);
    --vb-card: #ffffff;
    --vb-ink: oklch(0.18 0 0);
    --vb-text: oklch(0.36 0 0);
    --vb-muted: oklch(0.55 0 0);
    --vb-border: oklch(0.9 0 0);
    --vb-border-strong: oklch(0.8 0 0);
    --vb-accent: oklch(0.46 0.11 155);
    --vb-accent-soft: oklch(0.94 0.04 155);
  }

  /* MONO LIME — neutral b/w + electric yellow-green */
  .vb-root[data-palette="lime"] {
    --vb-bg: oklch(0.985 0 0);
    --vb-card: #ffffff;
    --vb-ink: oklch(0.16 0 0);
    --vb-text: oklch(0.34 0 0);
    --vb-muted: oklch(0.55 0 0);
    --vb-border: oklch(0.9 0 0);
    --vb-border-strong: oklch(0.78 0 0);
    --vb-accent: oklch(0.78 0.21 130);
    --vb-accent-soft: oklch(0.95 0.08 130);
  }

  /* MONO INK — neutral b/w + dark blue ink */
  .vb-root[data-palette="ink"] {
    --vb-bg: oklch(0.985 0 0);
    --vb-card: #ffffff;
    --vb-ink: oklch(0.18 0 0);
    --vb-text: oklch(0.36 0 0);
    --vb-muted: oklch(0.55 0 0);
    --vb-border: oklch(0.9 0 0);
    --vb-border-strong: oklch(0.8 0 0);
    --vb-accent: oklch(0.42 0.16 265);
    --vb-accent-soft: oklch(0.94 0.04 265);
  }

  /* STONE MINT — warm grey + soft mint */
  .vb-root[data-palette="stone"] {
    --vb-bg: oklch(0.97 0.005 100);
    --vb-card: oklch(0.99 0.003 100);
    --vb-ink: oklch(0.22 0.008 100);
    --vb-text: oklch(0.38 0.006 100);
    --vb-muted: oklch(0.56 0.005 100);
    --vb-border: oklch(0.9 0.006 100);
    --vb-border-strong: oklch(0.82 0.008 100);
    --vb-accent: oklch(0.55 0.12 165);
    --vb-accent-soft: oklch(0.94 0.04 165);
  }

  .vb-root *::selection { background: var(--vb-ink); color: var(--vb-bg); }
  .vb-root button { font-family: inherit; }
  .vb-root a { color: inherit; text-decoration: none; cursor: pointer; }
  .vb-root input, .vb-root textarea, .vb-root select { font-family: inherit; }

  @keyframes vbMarquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
  }

  /* ============ MOBILE ============ */
  @container vbroot (max-width: 900px) {
    .vb-root section { padding-left: 20px !important; padding-right: 20px !important; }
    .vb-root header > div.vb-topbar-inner { padding: 12px 20px !important; gap: 12px !important; grid-template-columns: 1fr auto !important; }
    .vb-root .vb-nav { display: none !important; }
    .vb-root .vb-topbar-right > a { display: none !important; }

    /* Hero */
    .vb-root .vb-hero { grid-template-columns: 1fr !important; padding: 32px 20px 48px !important; gap: 24px !important; }
    .vb-root .vb-hero-left { grid-template-columns: 1fr !important; gap: 24px !important; }
    .vb-root .vb-hero h1 { font-size: clamp(34px, 9vw, 48px) !important; }
    .vb-root .vb-hero-ctas { flex-direction: column !important; align-items: stretch !important; }
    .vb-root .vb-hero-ctas > button { width: 100% !important; justify-content: center !important; text-align: center !important; }

    /* Primary section */
    .vb-root .vb-primary-head > div { grid-template-columns: 1fr !important; gap: 16px !important; }
    .vb-root .vb-primary-grid { grid-template-columns: 1fr !important; gap: 16px !important; }

    /* Section heads — stack title + filters/meta */
    .vb-root .vb-spaces-grid { grid-template-columns: 1fr !important; gap: 20px !important; }
    .vb-root .vb-others-head { grid-template-columns: 1fr !important; gap: 16px !important; }
    .vb-root .vb-amen-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
    .vb-root .vb-others-row { grid-template-columns: auto 1fr !important; gap: 12px !important; padding: 24px 0 !important; }
    .vb-root .vb-others-body { grid-template-columns: 1fr !important; gap: 6px !important; grid-column: 1 / -1 !important; }
    .vb-root .vb-others-tag { white-space: normal !important; grid-column: 1 / -1 !important; margin-top: 4px !important; }

    /* Section titles smaller */
    .vb-root h2 { font-size: clamp(26px, 7vw, 38px) !important; }

    /* Green stripe */
    .vb-root .vb-green-stripe { grid-template-columns: 1fr !important; padding: 28px 24px !important; gap: 20px !important; }
    .vb-root .vb-green-stripe > div:last-child { padding-left: 0 !important; border-left: none !important; padding-top: 16px !important; border-top: 1px solid rgba(255,255,255,0.25) !important; }

    /* Pricing table — horizontal scroll */
    .vb-root .vb-price-table { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }
    .vb-root .vb-price-table > * { min-width: 700px !important; }

    /* Location */
    .vb-root .vb-loc-inner { grid-template-columns: 1fr !important; }
    .vb-root .vb-loc-inner > div:last-child { min-height: 320px !important; }

    /* Process grid */
    .vb-root .vb-process-grid { grid-template-columns: 1fr !important; gap: 12px !important; margin-top: 32px !important; }
    .vb-root .vb-process-grid > div { min-height: 0 !important; padding: 24px !important; }

    /* Tour */
    .vb-root .vb-tour-grid { grid-template-columns: 1fr !important; padding: 40px 24px !important; gap: 32px !important; }

    /* Contacts */
    .vb-root #contacts { padding: 64px 20px !important; }
    .vb-root .vb-contacts-inner { grid-template-columns: 1fr !important; gap: 32px !important; }
    .vb-root .vb-contacts-br { display: none; }

    /* Booking modal — mobile */
    .vb-root .vb-modal-overlay { padding: 12px !important; align-items: flex-start !important; }
    .vb-root .vb-modal-box { padding: 28px 20px 24px !important; border-radius: 6px !important; margin-top: 16px !important; margin-bottom: 16px !important; }
    .vb-root .vb-modal-title { font-size: 22px !important; }
    .vb-root .vb-modal-row { grid-template-columns: 1fr !important; }

    /* Footer */
    .vb-root .vb-footer-top { grid-template-columns: 1fr !important; gap: 32px !important; }
    .vb-root .vb-footer-cols { grid-template-columns: repeat(2, 1fr) !important; gap: 24px !important; }
    .vb-root .vb-footer-bottom { flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; }
    .vb-root footer { padding: 40px 20px 24px !important; }

    /* Hide overlay badges on hero photo — photo readable */
    .vb-root .vb-hero-badges-bot { display: none !important; }
    .vb-root .vb-hero-badges-top { display: none !important; }
    .vb-root .vb-hero-badges-mobile {
      display: flex !important; flex-wrap: nowrap; gap: 6px;
      margin: 0 0 12px 0; align-items: center;
    }
    .vb-root .vb-hbm-green {
      background: var(--vb-accent); color: #fff;
      padding: 7px 10px; border-radius: 999px;
      font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 600;
      letter-spacing: 0.04em; text-transform: uppercase;
      white-space: nowrap; flex: 0 1 auto; min-width: 0;
    }
    .vb-root .vb-hbm-white {
      background: #fff; color: var(--vb-ink);
      padding: 7px 10px; border-radius: 999px;
      font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 600;
      letter-spacing: 0.04em; text-transform: uppercase;
      border: 1px solid var(--vb-border);
      white-space: nowrap; flex: 0 0 auto;
    }

    /* Pricing — card layout instead of horizontal scroll */
    .vb-root .vb-price-table { overflow: visible !important; border: none !important; background: transparent !important; }
    .vb-root .vb-price-table > * { min-width: 0 !important; }
    .vb-root .vb-price-head { display: none !important; }
    .vb-root .vb-price-row {
      grid-template-columns: 1fr !important;
      gap: 8px !important;
      padding: 20px !important;
      background: var(--vb-card) !important;
      border: 1px solid var(--vb-border) !important;
      border-radius: 8px !important;
      margin-bottom: 12px !important;
    }
    .vb-root .vb-price-tier { font-size: 18px !important; margin-bottom: 4px !important; }
    .vb-root .vb-price-desc::before,
    .vb-root .vb-price-time::before,
    .vb-root .vb-price-price::before {
      content: attr(data-label) ":";
      display: inline-block; margin-right: 8px;
      font-family: 'JetBrains Mono', monospace; font-size: 10px;
      letter-spacing: 0.1em; text-transform: uppercase;
      color: var(--vb-muted); font-weight: 600;
    }
    .vb-root .vb-price-price { font-size: 22px !important; display: flex !important; align-items: baseline; gap: 8px; margin-top: 4px; }

    /* Marquee — keep but trim */
    .vb-root section > div[style*="marquee"] { padding: 16px 0 !important; }
  }

  @container vbroot (max-width: 480px) {
    .vb-root .vb-footer-cols { grid-template-columns: repeat(2, 1fr) !important; gap: 20px !important; }
  }
`;

const vbStyles = {
  root: {
    background: VB_BG,
    color: VB_INK,
    fontFamily: '"Inter", system-ui, sans-serif',
    minHeight: '100vh',
    position: 'relative',
    containerType: 'inline-size',
    containerName: 'vbroot'
  },

  topbar: {
    position: 'sticky',
    top: 0,
    zIndex: 100,
    background: 'rgba(252, 252, 253, 0.85)',
    backdropFilter: 'blur(12px)',
    borderBottom: `1px solid ${VB_BORDER}`
  },
  topbarInner: {
    maxWidth: 1440,
    margin: '0 auto',
    padding: '16px 48px',
    display: 'grid',
    gridTemplateColumns: 'auto 1fr auto',
    gap: 48,
    alignItems: 'center'
  },
  brand: {
    display: 'flex',
    alignItems: 'center',
    gap: 10,
    fontFamily: '"Unbounded", sans-serif',
    fontWeight: 700,
    letterSpacing: '-0.01em'
  },
  brandMark: { fontSize: 18, color: VB_ACCENT },
  brandName: { fontFamily: '"Deutschlander", "Unbounded", sans-serif', fontSize: 22, color: VB_INK, letterSpacing: '0.01em', textTransform: 'uppercase' },
  nav: { display: 'flex', gap: 28, justifyContent: 'center' },
  navLink: { fontSize: 14, color: VB_TEXT, fontWeight: 500 },
  topbarRight: { display: 'flex', alignItems: 'center', gap: 16 },
  topbarMeta: { fontSize: 13, color: VB_MUTED, fontWeight: 500 },

  btnFilled: {
    background: VB_INK,
    color: VB_BG,
    border: 'none',
    padding: '12px 20px',
    fontSize: 14,
    fontWeight: 500,
    cursor: 'pointer',
    borderRadius: 999
  },
  btnFilledLg: {
    background: VB_INK,
    color: VB_BG,
    border: 'none',
    padding: '18px 28px',
    fontSize: 15,
    fontWeight: 500,
    cursor: 'pointer',
    borderRadius: 999,
    width: 'fit-content'
  },
  btnText: {
    background: 'transparent',
    color: VB_INK,
    border: 'none',
    padding: '12px 4px',
    fontSize: 14,
    fontWeight: 500,
    cursor: 'pointer',
    borderBottom: `1px solid ${VB_INK}`,
    borderRadius: 0
  },

  hero: {
    maxWidth: 1440,
    margin: '0 auto',
    padding: '40px 48px 48px',
    display: 'flex',
    flexDirection: 'column',
    gap: 48
  },
  heroPhotoWide: {
    width: '100%',
    aspectRatio: '21/9',
    background: VB_INK,
    border: `1px solid ${VB_BORDER}`,
    borderRadius: 6,
    position: 'relative',
    overflow: 'hidden'
  },
  heroPhotoImgWide: {
    width: '100%',
    height: '100%',
    objectFit: 'cover',
    display: 'block'
  },
  heroPhotoCaption: {
    position: 'absolute',
    bottom: 16,
    right: 16,
    display: 'flex',
    gap: 16,
    fontFamily: '"JetBrains Mono", monospace',
    fontSize: 11,
    color: 'rgba(252,252,253,0.85)',
    letterSpacing: '0.04em',
    background: 'rgba(20,20,28,0.55)',
    padding: '8px 12px',
    backdropFilter: 'blur(6px)',
    borderRadius: 4
  },
  heroLeft: { display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 64, alignItems: 'stretch', paddingTop: 24, paddingRight: 60 },
  heroLeftMain: { display: 'flex', flexDirection: 'column', gap: 24 },
  heroSide: {
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'space-between',
    paddingLeft: 32,
    borderLeft: `1px solid ${VB_BORDER}`,
    gap: 32
  },
  heroSideTop: { display: 'flex', flexDirection: 'column', gap: 6 },
  heroSideKey: {
    fontFamily: '"Deutschlander", "Unbounded", sans-serif',
    fontSize: 32,
    textTransform: 'uppercase',
    fontWeight: 600,
    color: VB_INK,
    letterSpacing: '0.01em',
    marginBottom: 8
  },
  heroSideMeta: {
    fontFamily: '"JetBrains Mono", monospace',
    fontSize: 13,
    color: VB_MUTED,
    letterSpacing: '0.02em',
    lineHeight: 1.55
  },
  heroSideMid: {
    display: 'flex',
    flexDirection: 'column',
    gap: 8,
    paddingTop: 20,
    borderTop: `1px solid ${VB_BORDER}`
  },
  heroSideMidLabel: {
    fontFamily: '"JetBrains Mono", monospace',
    fontSize: 11,
    color: VB_ACCENT,
    letterSpacing: '0.12em',
    textTransform: 'uppercase',
    marginBottom: 4
  },
  heroSideMidRow: {
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'baseline',
    fontSize: 13,
    color: VB_TEXT
  },
  heroSideMidVal: {
    fontWeight: 600,
    color: VB_INK
  },
  heroIndex: {
    display: 'flex',
    alignItems: 'center',
    gap: 12,
    fontFamily: '"JetBrains Mono", monospace',
    fontSize: 11,
    color: VB_MUTED,
    letterSpacing: '0.12em',
    textTransform: 'uppercase',
    marginBottom: 4
  },
  heroIndexNum: { color: VB_INK, fontWeight: 600 },
  heroIndexDiv: { width: 24, height: 1, background: VB_BORDER },
  heroIndexLoc: {},
  heroLabel: {
    display: 'inline-flex',
    alignItems: 'center',
    gap: 10,
    width: 'fit-content',
    padding: '8px 14px',
    background: VB_ACCENT_SOFT,
    border: `1px solid ${VB_ACCENT}`,
    borderRadius: 999,
    fontSize: 13,
    color: VB_ACCENT,
    fontWeight: 600
  },
  heroDot: {
    width: 8, height: 8, borderRadius: '50%', background: VB_ACCENT
  },
  heroTitle: {
    fontFamily: '"Unbounded", sans-serif',
    fontSize: 'clamp(40px, 5vw, 72px)',
    fontWeight: 600,
    letterSpacing: '-0.035em',
    lineHeight: 1.02,
    margin: 0
  },
  heroSerif: {
    fontFamily: '"Instrument Serif", serif',
    fontStyle: 'italic',
    fontWeight: 400,
    color: VB_ACCENT,
    letterSpacing: '-0.02em'
  },
  heroP: {
    fontSize: 17,
    lineHeight: 1.55,
    color: VB_TEXT,
    margin: 0,
    maxWidth: 520
  },
  heroCtas: { display: 'flex', gap: 16, alignItems: 'center', flexWrap: 'wrap' },
  heroStats: {
    display: 'grid',
    gridTemplateColumns: 'repeat(2, 1fr)',
    gap: 24,
    paddingTop: 24,
    borderTop: `1px solid ${VB_BORDER}`
  },
  heroStat: { display: 'flex', flexDirection: 'column', gap: 4 },
  heroStatVal: {
    fontFamily: '"Unbounded", sans-serif',
    fontSize: 36,
    fontWeight: 600,
    letterSpacing: '-0.03em',
    color: VB_INK,
    lineHeight: 1
  },
  heroStatU: { fontSize: 13, color: VB_MUTED },

  heroRight: {},
  heroImg: { display: 'flex', flexDirection: 'column', gap: 12 },
  heroPhoto: {
    aspectRatio: '4/5',
    background: VB_INK,
    border: `1px solid ${VB_BORDER}`,
    position: 'relative',
    overflow: 'hidden',
    borderRadius: 4
  },
  heroPhotoImg: {
    width: '100%',
    height: '100%',
    objectFit: 'cover',
    display: 'block'
  },
  heroPhotoMeta: {
    position: 'absolute',
    top: 16,
    left: 16,
    display: 'flex',
    flexDirection: 'column',
    gap: 2,
    background: 'rgba(252, 252, 253, 0.92)',
    padding: '10px 14px',
    border: `1px solid ${VB_BORDER}`,
    borderRadius: 4,
    backdropFilter: 'blur(6px)'
  },
  imgPlaceholder: {
    aspectRatio: '4/5',
    background: VB_CARD,
    border: `1px solid ${VB_BORDER}`,
    backgroundImage: `repeating-linear-gradient(45deg, ${VB_ACCENT_SOFT} 0, ${VB_ACCENT_SOFT} 1px, transparent 1px, transparent 14px)`,
    position: 'relative',
    display: 'flex',
    alignItems: 'flex-end',
    justifyContent: 'flex-start',
    padding: 24,
    borderRadius: 4
  },
  imgMeta: {
    display: 'flex',
    flexDirection: 'column',
    gap: 4,
    background: VB_CARD,
    padding: '10px 14px',
    border: `1px solid ${VB_BORDER}`,
    borderRadius: 4
  },
  imgMetaCode: {
    fontFamily: '"JetBrains Mono", monospace',
    fontSize: 10,
    color: VB_ACCENT,
    letterSpacing: '0.1em'
  },
  imgMetaName: {
    fontSize: 14,
    fontWeight: 600,
    color: VB_INK
  },
  imgPlaceholderText: {
    position: 'absolute',
    top: '50%',
    left: '50%',
    transform: 'translate(-50%, -50%)',
    fontFamily: '"JetBrains Mono", monospace',
    fontSize: 12,
    color: VB_MUTED,
    letterSpacing: '0.1em',
    textTransform: 'uppercase'
  },
  heroImgCaption: {
    display: 'flex',
    justifyContent: 'space-between',
    fontFamily: '"JetBrains Mono", monospace',
    fontSize: 11,
    color: VB_MUTED,
    letterSpacing: '0.06em'
  },

  marqueeBar: {
    maxWidth: 1440,
    margin: '0 auto',
    padding: '0 48px'
  },
  marqueeViewport: {
    border: `1px solid ${VB_ACCENT}`,
    background: VB_ACCENT,
    color: '#fff',
    borderRadius: 4,
    overflow: 'hidden',
    padding: '20px 0'
  },
  marqueeTrack: {
    display: 'flex',
    width: 'max-content',
    animation: 'vbMarquee 38s linear infinite'
  },
  marqueeRun: {
    display: 'flex',
    alignItems: 'center',
    flexShrink: 0,
    paddingRight: 48
  },
  marqueeItem: {
    display: 'inline-flex',
    alignItems: 'baseline',
    gap: 12,
    padding: '0 36px',
    whiteSpace: 'nowrap'
  },
  marqueeLbl: { fontSize: 16, fontWeight: 500, color: 'rgba(255,255,255,0.7)', letterSpacing: '0.02em' },
  marqueeVal: { fontSize: 16, fontWeight: 600, color: '#fff', letterSpacing: '0.02em' },
  marqueeDot: { color: 'rgba(255,255,255,0.5)', fontSize: 16 },

  spaces: {
    maxWidth: 1440,
    margin: '0 auto',
    padding: '96px 48px 0'
  },
  sectionHead: {
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'flex-end',
    marginBottom: 48,
    gap: 32,
    flexWrap: 'wrap'
  },
  sectionLabel: {
    fontFamily: '"JetBrains Mono", monospace',
    fontSize: 12,
    color: VB_ACCENT,
    letterSpacing: '0.12em',
    marginBottom: 12
  },
  sectionTitle: {
    fontFamily: '"Unbounded", sans-serif',
    fontSize: 'clamp(36px, 4vw, 56px)',
    fontWeight: 600,
    letterSpacing: '-0.03em',
    lineHeight: 1,
    color: VB_INK,
    margin: 0
  },
  filters: { display: 'flex', gap: 8 },
  filterBtn: {
    background: 'transparent',
    color: VB_TEXT,
    border: `1px solid ${VB_BORDER}`,
    padding: '10px 18px',
    fontSize: 13,
    fontWeight: 500,
    cursor: 'pointer',
    borderRadius: 999
  },
  filterBtnActive: {
    background: VB_INK,
    color: VB_BG,
    borderColor: VB_INK
  },

  gallery: {
    maxWidth: 1440,
    margin: '0 auto',
    padding: '96px 48px 0'
  },
  galleryGrid: {
    display: 'grid',
    gridTemplateColumns: '1.2fr 1fr 1fr',
    gridTemplateRows: 'auto',
    gap: 16
  },
  galleryFig: {
    margin: 0,
    display: 'flex',
    flexDirection: 'column',
    gap: 8
  },
  galleryFigTall: {
    margin: 0,
    display: 'flex',
    flexDirection: 'column',
    gap: 8,
    gridRow: 'span 1'
  },
  galleryImg: {
    width: '100%',
    aspectRatio: '4/3',
    objectFit: 'cover',
    display: 'block',
    borderRadius: 4,
    border: `1px solid ${VB_BORDER}`
  },
  galleryCap: {
    fontFamily: '"JetBrains Mono", monospace',
    fontSize: 11,
    color: VB_MUTED,
    letterSpacing: '0.04em'
  },
  spacesGrid: {
    display: 'grid',
    gridTemplateColumns: 'repeat(3, 1fr)',
    gap: 16
  },
  spaceCard: {
    background: VB_CARD,
    border: `1px solid ${VB_BORDER}`,
    borderRadius: 8,
    overflow: 'hidden',
    transition: 'border-color 0.2s, transform 0.2s',
    display: 'flex',
    flexDirection: 'column'
  },
  spaceCardHover: {
    borderColor: VB_INK,
    transform: 'translateY(-2px)'
  },
  spaceCardSoon: { opacity: 0.7 },
  spaceImg: {
    aspectRatio: '4/3',
    background: VB_INK,
    borderBottom: `1px solid ${VB_BORDER}`,
    position: 'relative',
    overflow: 'hidden'
  },
  spaceImgEl: {
    width: '100%',
    height: '100%',
    objectFit: 'cover',
    display: 'block'
  },
  spaceImgOld: {
    aspectRatio: '4/3',
    background: VB_ACCENT_SOFT,
    backgroundImage: `repeating-linear-gradient(135deg, ${VB_ACCENT_SOFT} 0, ${VB_ACCENT_SOFT} 12px, ${VB_BG} 12px, ${VB_BG} 24px)`,
    borderBottom: `1px solid ${VB_BORDER}`,
    position: 'relative',
    display: 'flex',
    alignItems: 'flex-end',
    padding: 16
  },
  imgPlaceholderInner: {
    background: VB_CARD,
    border: `1px solid ${VB_BORDER}`,
    borderRadius: 4,
    padding: '8px 12px',
    display: 'flex',
    flexDirection: 'column',
    gap: 2
  },
  imgPlaceholderCode: {
    fontFamily: '"JetBrains Mono", monospace',
    fontSize: 10,
    color: VB_ACCENT,
    letterSpacing: '0.08em'
  },
  imgPlaceholderLabel: {
    fontSize: 11,
    color: VB_MUTED
  },

  spaceBody: {
    padding: '24px',
    display: 'flex',
    flexDirection: 'column',
    gap: 12,
    flex: 1
  },
  spaceMeta: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' },
  spaceCode: {
    fontFamily: '"JetBrains Mono", monospace',
    fontSize: 11,
    color: VB_MUTED,
    letterSpacing: '0.1em'
  },
  spaceTags: { display: 'flex', gap: 4, flexWrap: 'wrap' },
  spaceTag: {
    fontSize: 10,
    padding: '3px 8px',
    background: VB_ACCENT_SOFT,
    color: VB_ACCENT,
    borderRadius: 999,
    fontWeight: 500,
    letterSpacing: '0.02em'
  },
  spaceName: {
    fontFamily: '"Unbounded", sans-serif',
    fontSize: 24,
    fontWeight: 600,
    color: VB_INK,
    margin: 0,
    letterSpacing: '-0.02em'
  },
  spaceDesc: { fontSize: 14, color: VB_TEXT, lineHeight: 1.5, margin: 0 },
  spaceMetricsRow: {
    display: 'flex',
    gap: 16,
    paddingTop: 12,
    borderTop: `1px solid ${VB_BORDER}`,
    flexWrap: 'wrap'
  },
  spaceMetric: { display: 'flex', flexDirection: 'column', gap: 2 },
  spaceMetricL: { fontSize: 11, color: VB_MUTED, letterSpacing: '0.04em' },
  spaceMetricV: { fontSize: 14, fontWeight: 600, color: VB_INK },
  spaceFoot: {
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'flex-end',
    marginTop: 'auto',
    paddingTop: 16
  },
  spacePriceVal: {
    fontFamily: '"Unbounded", sans-serif',
    fontSize: 28,
    fontWeight: 700,
    color: VB_INK,
    letterSpacing: '-0.02em',
    lineHeight: 1
  },
  spacePriceCur: { fontSize: 14, fontWeight: 500, color: VB_MUTED },
  spacePriceUnit: { fontSize: 12, color: VB_MUTED, marginTop: 4 },
  spaceBtn: {
    background: VB_INK,
    color: VB_BG,
    border: 'none',
    padding: '10px 16px',
    fontSize: 13,
    fontWeight: 500,
    cursor: 'pointer',
    borderRadius: 999
  },
  spaceBtnDisabled: {
    background: VB_BORDER,
    color: VB_TEXT,
    cursor: 'not-allowed'
  },

  useCases: {
    maxWidth: 1440,
    margin: '0 auto',
    padding: '64px 48px 0'
  },
  othersHead: {
    display: 'grid',
    gridTemplateColumns: '1fr 1fr',
    gap: 48,
    alignItems: 'end',
    paddingBottom: 24,
    borderBottom: `1px solid ${VB_BORDER}`,
    marginBottom: 0
  },
  othersHeadLeft: {},
  othersTitle: {
    fontFamily: '"Unbounded", sans-serif',
    fontSize: 28,
    fontWeight: 500,
    letterSpacing: '-0.02em',
    lineHeight: 1.1,
    color: VB_INK,
    margin: 0
  },
  othersLead: {
    fontSize: 14,
    lineHeight: 1.55,
    color: VB_MUTED,
    margin: 0,
    maxWidth: 480
  },
  othersGrid: {
    display: 'flex',
    flexDirection: 'column'
  },
  othersRow: {
    display: 'grid',
    gridTemplateColumns: '60px 1fr auto',
    gap: 32,
    alignItems: 'center',
    padding: '24px 0',
    borderBottom: `1px solid ${VB_BORDER}`
  },
  othersNum: {
    fontFamily: '"JetBrains Mono", monospace',
    fontSize: 12,
    color: VB_ACCENT,
    letterSpacing: '0.12em',
    fontWeight: 600
  },
  othersBody: {
    display: 'grid',
    gridTemplateColumns: '220px 1fr',
    gap: 32,
    alignItems: 'baseline'
  },
  othersRowTitle: {
    fontFamily: '"Unbounded", sans-serif',
    fontSize: 18,
    fontWeight: 500,
    color: VB_INK,
    margin: 0,
    letterSpacing: '-0.01em'
  },
  othersRowDesc: {
    fontSize: 14,
    color: VB_TEXT,
    lineHeight: 1.5,
    margin: 0
  },
  othersTag: {
    fontFamily: '"JetBrains Mono", monospace',
    fontSize: 11,
    color: VB_MUTED,
    letterSpacing: '0.06em',
    textTransform: 'uppercase',
    whiteSpace: 'nowrap'
  },
  primary: {
    maxWidth: 1440,
    margin: '0 auto',
    padding: '64px 48px 0'
  },
  primaryHead: {
    paddingBottom: 40,
    borderBottom: `2px solid ${VB_INK}`,
    marginBottom: 32
  },
  primaryHeadInner: {
    display: 'grid',
    gridTemplateColumns: '1.4fr 1fr',
    gap: 64,
    alignItems: 'end'
  },
  primaryLead: {
    fontSize: 16,
    lineHeight: 1.55,
    color: VB_TEXT,
    margin: 0,
    maxWidth: 480
  },
  primaryGrid: {
    display: 'grid',
    gridTemplateColumns: 'repeat(3, 1fr)',
    gap: 16
  },
  primaryCard: {
    background: VB_CARD,
    border: `1px solid ${VB_BORDER}`,
    borderRadius: 8,
    padding: 36,
    display: 'flex',
    flexDirection: 'column',
    gap: 14,
    minHeight: 340
  },
  primaryTop: {
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'flex-start'
  },
  primaryNum: {
    fontFamily: '"JetBrains Mono", monospace',
    fontSize: 11,
    color: '#fff',
    background: VB_ACCENT,
    padding: '6px 12px',
    borderRadius: 4,
    letterSpacing: '0.12em',
    fontWeight: 700
  },
  primaryIcon: {
    fontSize: 28
  },
  primaryTitle: {
    fontFamily: '"Unbounded", sans-serif',
    fontSize: 26,
    fontWeight: 600,
    margin: 0,
    color: VB_INK,
    letterSpacing: '-0.02em',
    lineHeight: 1.1
  },
  primaryKinds: {
    fontSize: 13,
    color: VB_MUTED,
    letterSpacing: '0.02em'
  },
  primaryDesc: {
    fontSize: 14,
    color: VB_TEXT,
    whiteSpace: 'pre-line',
    lineHeight: 1.55,
    margin: 0
  },
  primaryPrice: {
    marginTop: 'auto',
    paddingTop: 16,
    borderTop: `1px solid ${VB_BORDER}`,
    display: 'flex',
    alignItems: 'baseline',
    gap: 8
  },
  primaryPriceVal: {
    fontFamily: '"Unbounded", sans-serif',
    fontSize: 28,
    fontWeight: 700,
    color: VB_INK,
    letterSpacing: '-0.02em'
  },
  primaryPriceUnit: {
    fontSize: 12,
    color: VB_MUTED
  },
  usesGrid: {
    display: 'grid',
    gridTemplateColumns: 'repeat(3, 1fr)',
    gap: 16
  },
  useCard: {
    background: VB_CARD,
    border: `1px solid ${VB_BORDER}`,
    borderRadius: 8,
    padding: 28,
    display: 'flex',
    flexDirection: 'column',
    gap: 12,
    minHeight: 240,
    position: 'relative'
  },
  useTop: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' },
  useNum: {
    fontFamily: '"JetBrains Mono", monospace',
    fontSize: 12,
    color: VB_ACCENT,
    letterSpacing: '0.1em'
  },
  useEmoji: { fontSize: 24, color: VB_ACCENT, fontFamily: 'serif' },
  useTitle: {
    fontFamily: '"Unbounded", sans-serif',
    fontSize: 22,
    fontWeight: 600,
    color: VB_INK,
    margin: 0,
    letterSpacing: '-0.02em'
  },
  useDesc: { fontSize: 14, color: VB_TEXT, lineHeight: 1.5, margin: 0 },
  useTag: {
    marginTop: 'auto',
    fontSize: 11,
    color: VB_MUTED,
    letterSpacing: '0.05em',
    paddingTop: 16,
    borderTop: `1px solid ${VB_BORDER}`,
    textTransform: 'uppercase',
    fontWeight: 600
  },

  amenSection: {
    maxWidth: 1440,
    margin: '0 auto',
    padding: '96px 48px 0'
  },
  amenLead: {
    fontSize: 16,
    color: VB_TEXT,
    lineHeight: 1.55,
    maxWidth: 480,
    marginTop: 24
  },
  amenGrid: {
    display: 'grid',
    gridTemplateColumns: 'repeat(3, 1fr)',
    gap: 16,
    background: VB_CARD,
    border: `1px solid ${VB_BORDER}`,
    borderRadius: 8,
    padding: 16
  },
  amenCol: {
    padding: 20
  },
  amenColTitle: {
    fontFamily: '"Unbounded", sans-serif',
    fontSize: 16,
    fontWeight: 600,
    color: VB_INK,
    marginBottom: 16,
    letterSpacing: '-0.01em'
  },
  amenList: { listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10 },
  amenLi: {
    display: 'flex',
    gap: 10,
    fontSize: 14,
    color: VB_TEXT,
    alignItems: 'center'
  },
  amenCheck: {
    width: 20,
    height: 20,
    borderRadius: '50%',
    background: VB_ACCENT_SOFT,
    color: VB_ACCENT,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    fontWeight: 700,
    fontSize: 14
  },

  pricing: {
    maxWidth: 1440,
    margin: '0 auto',
    padding: '96px 48px 0'
  },
  priceTable: {
    background: VB_CARD,
    border: `1px solid ${VB_BORDER}`,
    borderRadius: 8,
    overflow: 'hidden'
  },
  priceTableHead: {
    display: 'grid',
    gridTemplateColumns: '2fr 3fr 1fr 1fr',
    gap: 24,
    padding: '16px 24px',
    background: VB_BG,
    borderBottom: `1px solid ${VB_BORDER}`,
    fontSize: 12,
    color: VB_MUTED,
    letterSpacing: '0.06em',
    textTransform: 'uppercase',
    fontWeight: 600
  },
  priceRow: {
    display: 'grid',
    gridTemplateColumns: '2fr 3fr 1fr 1fr',
    gap: 24,
    padding: '20px 24px',
    borderBottom: `1px solid ${VB_BORDER}`,
    alignItems: 'center'
  },
  priceRowAccent: { background: VB_ACCENT_SOFT },
  priceRowTier: {
    fontSize: 15,
    fontWeight: 600,
    color: VB_INK,
    display: 'flex',
    alignItems: 'center',
    gap: 8,
    flexWrap: 'wrap'
  },
  priceBadge: {
    fontSize: 10,
    padding: '3px 8px',
    background: VB_INK,
    color: VB_BG,
    borderRadius: 999,
    letterSpacing: '0.08em',
    fontWeight: 600
  },
  priceRowDesc: { fontSize: 14, color: VB_TEXT, lineHeight: 1.45, whiteSpace: 'pre-line' },
  priceRowTime: { fontSize: 14, color: VB_TEXT },
  priceRowPrice: {
    fontFamily: '"Unbounded", sans-serif',
    fontSize: 18,
    fontWeight: 600,
    color: VB_INK,
    letterSpacing: '-0.02em',
    textAlign: 'right'
  },
  priceFoot: {
    display: 'grid',
    gridTemplateColumns: 'repeat(3, 1fr)',
    gap: 16,
    marginTop: 16
  },
  priceFootBlock: {
    background: VB_CARD,
    border: `1px solid ${VB_BORDER}`,
    borderRadius: 8,
    padding: 20
  },
  priceFootLabel: {
    fontFamily: '"JetBrains Mono", monospace',
    fontSize: 11,
    color: VB_ACCENT,
    letterSpacing: '0.1em',
    marginBottom: 8
  },
  priceFootVal: { fontSize: 14, color: VB_TEXT, lineHeight: 1.5 },

  location: {
    marginTop: 96,
    padding: '0 48px'
  },
  locInner: {
    maxWidth: 1440,
    margin: '0 auto',
    background: VB_CARD,
    border: `1px solid ${VB_BORDER}`,
    borderRadius: 12,
    overflow: 'hidden',
    display: 'grid',
    gridTemplateColumns: '1fr 1fr'
  },
  locLeft: {
    padding: 48,
    display: 'flex',
    flexDirection: 'column',
    gap: 24
  },
  locTitle: {
    fontFamily: '"Unbounded", sans-serif',
    fontSize: 'clamp(32px, 3.6vw, 48px)',
    fontWeight: 600,
    letterSpacing: '-0.03em',
    lineHeight: 1.05,
    color: VB_INK,
    margin: 0
  },
  locRows: { display: 'flex', flexDirection: 'column' },
  locRow: {
    display: 'flex',
    justifyContent: 'space-between',
    padding: '14px 0',
    borderTop: `1px solid ${VB_BORDER}`,
    fontSize: 14,
    gap: 16
  },
  locL: { color: VB_MUTED },
  locV: { color: VB_INK, fontWeight: 500, textAlign: 'right' },
  locCtas: { display: 'flex', gap: 16, alignItems: 'center', flexWrap: 'wrap', marginTop: 8 },
  locRight: { background: VB_BG, minHeight: 480 },
  mapBox: { width: '100%', height: '100%' },

  contact: {
    padding: '96px 48px'
  },
  contactInner: {
    maxWidth: 1440,
    margin: '0 auto'
  },
  contactLabel: {
    fontFamily: '"JetBrains Mono", monospace',
    fontSize: 12,
    color: VB_ACCENT,
    letterSpacing: '0.12em',
    marginBottom: 12
  },
  contactTitle: {
    fontFamily: '"Unbounded", sans-serif',
    fontSize: 'clamp(36px, 4vw, 56px)',
    fontWeight: 600,
    letterSpacing: '-0.03em',
    lineHeight: 1.05,
    color: VB_INK,
    margin: '0 0 48px 0'
  },
  contactGrid: {
    display: 'grid',
    gridTemplateColumns: '2fr 1fr',
    gap: 32
  },
  contactForm: {
    background: VB_CARD,
    border: `1px solid ${VB_BORDER}`,
    borderRadius: 12,
    padding: 32,
    display: 'flex',
    flexDirection: 'column',
    gap: 16
  },
  contactRow: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 },
  contactInput: {
    background: VB_BG,
    border: `1px solid ${VB_BORDER}`,
    color: VB_INK,
    fontSize: 15,
    padding: '14px 16px',
    outline: 'none',
    borderRadius: 8
  },
  contactTextarea: {
    background: VB_BG,
    border: `1px solid ${VB_BORDER}`,
    color: VB_INK,
    fontSize: 15,
    padding: '14px 16px',
    outline: 'none',
    borderRadius: 8,
    resize: 'vertical'
  },
  contactSide: { display: 'flex', flexDirection: 'column', gap: 16 },
  contactSideBlock: {
    background: VB_CARD,
    border: `1px solid ${VB_BORDER}`,
    borderRadius: 12,
    padding: 24,
    display: 'flex',
    flexDirection: 'column',
    gap: 8
  },
  contactSideLabel: {
    fontFamily: '"JetBrains Mono", monospace',
    fontSize: 11,
    color: VB_ACCENT,
    letterSpacing: '0.12em',
    marginBottom: 8
  },
  contactSideLink: {
    fontSize: 15,
    fontWeight: 500,
    color: VB_INK,
    paddingBottom: 4,
    borderBottom: `1px solid transparent`
  },
  contactSideText: { fontSize: 15, color: VB_INK, fontWeight: 500 },
  contactSideTextMute: { fontSize: 13, color: VB_MUTED },

  contactsSection: {
    background: VB_BG,
    borderTop: `1px solid ${VB_BORDER}`,
    padding: '96px 48px'
  },
  contactsInner: {
    maxWidth: 1440,
    margin: '0 auto',
    display: 'grid',
    gridTemplateColumns: '1fr 1fr',
    gap: 80,
    alignItems: 'center'
  },
  contactsLeft: { display: 'flex', flexDirection: 'column', gap: 16 },
  contactsTitle: {
    fontFamily: '"Unbounded", sans-serif',
    fontSize: 'clamp(32px, 3.4vw, 52px)',
    fontWeight: 500,
    lineHeight: 1.05,
    letterSpacing: '-0.02em',
    color: VB_INK,
    margin: 0
  },
  contactsLead: {
    fontSize: 16,
    lineHeight: 1.6,
    color: VB_TEXT,
    margin: 0,
    maxWidth: 480
  },
  contactsRight: { display: 'flex', flexDirection: 'column', gap: 16 },
  contactsPhone: {
    display: 'grid',
    gridTemplateColumns: '1fr auto',
    gridTemplateRows: 'auto auto',
    columnGap: 16,
    rowGap: 6,
    alignItems: 'center',
    padding: '28px 32px',
    background: VB_INK,
    color: VB_BG,
    borderRadius: 8,
    textDecoration: 'none',
    transition: 'transform 0.2s ease'
  },
  contactsPhoneLabel: {
    fontFamily: '"JetBrains Mono", monospace',
    fontSize: 11,
    letterSpacing: '0.12em',
    textTransform: 'uppercase',
    opacity: 0.6,
    gridColumn: '1 / 2',
    gridRow: '1 / 2'
  },
  contactsPhoneNum: {
    fontFamily: '"Unbounded", sans-serif',
    fontSize: 'clamp(24px, 2.4vw, 34px)',
    fontWeight: 500,
    letterSpacing: '-0.01em',
    gridColumn: '1 / 2',
    gridRow: '2 / 3'
  },
  contactsPhoneArrow: {
    fontSize: 28,
    gridColumn: '2 / 3',
    gridRow: '1 / 3',
    opacity: 0.7
  },
  contactsSocial: {
    display: 'grid',
    gridTemplateColumns: '1fr 1fr',
    gap: 12
  },
  contactsSocialBtn: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    gap: 10,
    padding: '20px 24px',
    background: VB_CARD,
    border: `1px solid ${VB_BORDER}`,
    color: VB_INK,
    borderRadius: 8,
    textDecoration: 'none',
    fontFamily: '"JetBrains Mono", monospace',
    fontSize: 13,
    fontWeight: 600,
    letterSpacing: '0.04em',
    textTransform: 'uppercase',
    transition: 'border-color 0.2s ease, background 0.2s ease'
  },

  footer: {
    background: VB_CARD,
    borderTop: `1px solid ${VB_BORDER}`,
    padding: '48px 48px 24px'
  },
  footerTop: {
    display: 'grid',
    gridTemplateColumns: '1fr 1.5fr',
    gap: 48,
    paddingBottom: 48,
    maxWidth: 1440,
    margin: '0 auto'
  },
  footerBrand: {},
  footerMark: {
    fontFamily: '"Deutschlander", "Unbounded", sans-serif',
    fontSize: 36,
    textTransform: 'uppercase',
    fontWeight: 700,
    color: VB_INK,
    letterSpacing: '0.01em'
  },
  footerTag: { fontSize: 14, color: VB_TEXT, lineHeight: 1.5, marginTop: 16 },
  footerCols: {
    display: 'grid',
    gridTemplateColumns: 'repeat(2, 1fr)',
    gap: 24
  },
  footerContact: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'space-between',
    gap: 16,
    flexWrap: 'wrap',
    maxWidth: 1440,
    margin: '32px auto 0',
    padding: '20px 0',
    borderTop: `1px solid ${VB_BORDER}`
  },
  footerPhone: {
    fontFamily: '"JetBrains Mono", monospace',
    fontSize: 14,
    color: VB_INK,
    textDecoration: 'none',
    letterSpacing: '0.02em',
    fontWeight: 500
  },
  footerSocial: { display: 'flex', gap: 10 },
  footerIconBtn: {
    width: 36, height: 36,
    display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
    border: `1px solid ${VB_BORDER}`,
    borderRadius: 8,
    color: VB_INK,
    textDecoration: 'none',
    transition: 'border-color 0.2s ease, color 0.2s ease'
  },
  footerColTitle: {
    fontFamily: '"JetBrains Mono", monospace',
    fontSize: 11,
    color: VB_ACCENT,
    letterSpacing: '0.12em',
    marginBottom: 16
  },
  footerLink: {
    display: 'block',
    fontSize: 14,
    cursor: 'pointer',
    textDecoration: 'none',
    color: VB_TEXT,
    padding: '6px 0'
  },
  footerBottom: {
    display: 'flex',
    justifyContent: 'space-between',
    paddingTop: 24,
    borderTop: `1px solid ${VB_BORDER}`,
    fontSize: 12,
    color: VB_MUTED,
    maxWidth: 1440,
    margin: '0 auto',
    flexWrap: 'wrap',
    gap: 16
  }
};

window.VariantB = VariantB;