{"id":6,"date":"2026-05-02T17:13:44","date_gmt":"2026-05-02T17:13:44","guid":{"rendered":"https:\/\/www.loopyball.pl\/?page_id=6"},"modified":"2026-05-02T17:45:26","modified_gmt":"2026-05-02T17:45:26","slug":"loopyball-home","status":"publish","type":"page","link":"https:\/\/www.loopyball.pl\/?page_id=6","title":{"rendered":"Loopyball \u2014 Home"},"content":{"rendered":"<style>\n<p>\/* GP shell override for Loopyball page *\/\nbody.page-template-default .site-header,\nbody.page-template-default .main-navigation,\nbody.page-template-default #secondary,\nbody.page-template-default .sidebar,\nbody.page-template-default .widget-area,\nbody.page-template-default .site-footer,\nbody.page-template-default .entry-header,\nbody.page-template-default .entry-title,\nbody.page-template-default .entry-meta,\nbody.page-template-default .entry-footer { display: none !important; }\nbody.page-template-default #page,\nbody.page-template-default .site,\nbody.page-template-default .site-content,\nbody.page-template-default #primary,\nbody.page-template-default .content-area,\nbody.page-template-default .inside-article,\nbody.page-template-default .entry-content,\nbody.page-template-default article,\nbody.page-template-default main { max-width: none !important; width: 100% !important; padding: 0 !important; margin: 0 !important; background: transparent !important; box-shadow: none !important; border: 0 !important; }\nbody.page-template-default { background: #000 !important; }\nbody.page-template-default .grid-container { max-width: none !important; padding: 0 !important; }<\/p>\n<p>\/* ===== TOKENS ===== *\/\n:root {\n  \/* Palette A: BOLD (default) *\/\n  --bg: #0A0A0A;\n  --bg-alt: #121212;\n  --bg-card: #1A1A1A;\n  --surface: #F5F2EB;\n  --surface-alt: #EDE7D9;\n  --ink: #0A0A0A;\n  --ink-dim: #555;\n  --muted: #8A8A8A;\n  --accent: #FF3D2E;\n  --accent-hover: #FF5548;\n  --accent-2: #D19411;\n  --accent-2-dark: #4B4423;\n  --border: rgba(255,255,255,0.08);\n  --border-dark: rgba(0,0,0,0.08);<\/p>\n<p>  --font-display: 'Archivo Black', 'Anton', sans-serif;\n  --font-body: 'Inter', 'Helvetica Neue', system-ui, sans-serif;\n  --font-mono: 'JetBrains Mono', monospace;<\/p>\n<p>  --radius: 14px;\n  --radius-lg: 22px;\n  --radius-sm: 8px;\n  --container: 1280px;\n  --ease: cubic-bezier(0.22, 1, 0.36, 1);\n}<\/p>\n<p>\/* Tweak-driven variants (applied via [data-palette] \/ [data-typography] on <html>) *\/\n[data-palette=\"neon\"] {\n  --bg: #0A0420;\n  --bg-alt: #13083B;\n  --bg-card: #1A0E52;\n  --accent: #00D4FF;\n  --accent-hover: #3DE4FF;\n  --accent-2: #FF3DF0;\n}\n[data-palette=\"court\"] {\n  --bg: #0E1F1A;\n  --bg-alt: #0A1812;\n  --bg-card: #142A22;\n  --accent: #FFE047;\n  --accent-hover: #FFF070;\n  --accent-2: #FF6B35;\n}<\/p>\n<p>[data-typography=\"grotesk\"] {\n  --font-display: 'Space Grotesk', 'Archivo', sans-serif;\n  --font-body: 'Space Grotesk', system-ui, sans-serif;\n}\n[data-typography=\"condensed\"] {\n  --font-display: 'Anton', 'Archivo Black', sans-serif;\n  --font-body: 'Inter', system-ui, sans-serif;\n}<\/p>\n<p>\/* ===== RESET + BASE ===== *\/\n*, *::before, *::after { box-sizing: border-box; }\nhtml { scroll-behavior: smooth; }\nbody {\n  margin: 0;\n  font-family: var(--font-body);\n  background: var(--bg);\n  color: var(--surface);\n  -webkit-font-smoothing: antialiased;\n  text-rendering: optimizeLegibility;\n  overflow-x: hidden;\n}\nimg { max-width: 100%; display: block; }\na { color: inherit; text-decoration: none; }\nbutton { font-family: inherit; cursor: pointer; border: 0; background: none; color: inherit; }\ninput { font-family: inherit; }<\/p>\n<p>.container { max-width: var(--container); margin: 0 auto; padding: 0 32px; }\n@media (max-width: 720px) { .container { padding: 0 20px; } }<\/p>\n<p>\/* ===== SHARED ===== *\/\n.eyebrow {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  font-family: var(--font-mono);\n  font-size: 12px;\n  letter-spacing: 0.14em;\n  text-transform: uppercase;\n  color: var(--accent);\n  font-weight: 600;\n}\n.eyebrow::before {\n  content: \"\";\n  width: 24px;\n  height: 2px;\n  background: var(--accent);\n}\n.eyebrow--dark { color: var(--ink); }\n.eyebrow--dark::before { background: var(--ink); }\n.eyebrow--glow { color: var(--accent-2); }\n.eyebrow--glow::before { background: var(--accent-2); }<\/p>\n<p>.section-title {\n  font-family: var(--font-display);\n  font-size: clamp(36px, 5.5vw, 72px);\n  line-height: 0.95;\n  letter-spacing: -0.02em;\n  text-transform: uppercase;\n  color: var(--ink);\n  margin: 16px 0 0;\n  text-wrap: balance;\n}\n.section-title--light { color: var(--surface); }\n.section-title__accent { color: var(--accent); font-style: italic; }<\/p>\n<p>.section-sub {\n  font-size: 18px;\n  line-height: 1.55;\n  color: var(--ink-dim);\n  max-width: 640px;\n  margin: 20px 0 0;\n}\n.section-sub--light { color: rgba(245, 242, 235, 0.7); }<\/p>\n<p>.section-head { margin-bottom: 64px; }\n.section-head--dark { margin-bottom: 48px; }<\/p>\n<p>\/* ===== BUTTONS ===== *\/\n.btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 10px;\n  padding: 14px 24px;\n  font-family: var(--font-display);\n  font-size: 14px;\n  letter-spacing: 0.06em;\n  text-transform: uppercase;\n  border-radius: var(--radius);\n  transition: transform 0.2s var(--ease), background 0.2s var(--ease), color 0.2s var(--ease);\n  will-change: transform;\n  white-space: nowrap;\n}\n.btn:hover { transform: translateY(-2px); }\n.btn:active { transform: translateY(0); }<\/p>\n<p>.btn--primary { background: var(--accent); color: #fff; }\n.btn--primary:hover { background: var(--accent-hover); }<\/p>\n<p>.btn--ghost {\n  background: transparent;\n  color: var(--surface);\n  border: 2px solid rgba(255,255,255,0.2);\n}\n.btn--ghost:hover { border-color: var(--accent); color: var(--accent); }<\/p>\n<p>.section--light .btn--ghost, .faq .btn--ghost, .builder .btn--ghost {\n  color: var(--ink);\n  border-color: rgba(0,0,0,0.15);\n}\n.section--light .btn--ghost:hover, .faq .btn--ghost:hover, .builder .btn--ghost:hover {\n  border-color: var(--accent);\n  color: var(--accent);\n}<\/p>\n<p>.btn--lg { padding: 18px 32px; font-size: 16px; }\n.btn--block { width: 100%; }<\/p>\n<p>\/* ===== NAV ===== *\/\n.nav {\n  position: fixed;\n  top: 0; left: 0; right: 0;\n  z-index: 100;\n  padding: 20px 0;\n  transition: background 0.3s var(--ease), padding 0.3s var(--ease), border-color 0.3s;\n  border-bottom: 1px solid transparent;\n}\n.nav--scrolled {\n  background: rgba(10, 10, 10, 0.85);\n  backdrop-filter: blur(16px);\n  -webkit-backdrop-filter: blur(16px);\n  padding: 12px 0;\n  border-bottom-color: var(--border);\n}\n.nav__inner {\n  max-width: var(--container);\n  margin: 0 auto;\n  padding: 0 32px;\n  display: flex;\n  align-items: center;\n  gap: 32px;\n}\n.nav__logo {\n  display: flex; align-items: center; gap: 10px;\n  font-family: var(--font-display);\n  font-size: 20px;\n  letter-spacing: -0.02em;\n  color: var(--surface);\n}\n.nav__logo-mark {\n  position: relative;\n  width: 28px; height: 28px;\n}\n.nav__logo-ball {\n  position: absolute;\n  border-radius: 50%;\n  border: 2px solid var(--surface);\n}\n.nav__logo-ball--a { width: 20px; height: 20px; top: 0; left: 0; background: var(--accent); border-color: transparent; }\n.nav__logo-ball--b { width: 16px; height: 16px; bottom: 0; right: 0; background: var(--accent-2); border-color: transparent; mix-blend-mode: screen; }\n.nav__logo-dot { color: var(--accent); }<\/p>\n<p>.nav__links {\n  display: flex;\n  gap: 28px;\n  margin-left: auto;\n  font-size: 14px;\n  font-weight: 500;\n  color: rgba(245,242,235,0.75);\n}\n.nav__links a { transition: color 0.15s; position: relative; }\n.nav__links a::after {\n  content: \"\";\n  position: absolute;\n  left: 0; right: 0; bottom: -4px;\n  height: 2px;\n  background: var(--accent);\n  transform: scaleX(0);\n  transform-origin: left;\n  transition: transform 0.2s var(--ease);\n}\n.nav__links a:hover { color: var(--surface); }\n.nav__links a:hover::after { transform: scaleX(1); }<\/p>\n<p>.nav__cta-wrap { display: flex; align-items: center; gap: 16px; }\n.nav__phone {\n  display: inline-flex; align-items: center; gap: 8px;\n  font-family: var(--font-mono);\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--surface);\n}\n.nav__phone:hover { color: var(--accent); }\n.nav__cta { padding: 10px 18px; font-size: 12px; }<\/p>\n<p>.nav__burger { display: none; flex-direction: column; gap: 4px; width: 28px; height: 28px; align-items: center; justify-content: center; }\n.nav__burger span { width: 22px; height: 2px; background: var(--surface); }<\/p>\n<p>.nav__mobile {\n  display: none;\n  position: absolute; top: 100%; left: 0; right: 0;\n  background: var(--bg-alt);\n  padding: 24px 32px;\n  flex-direction: column;\n  gap: 16px;\n  border-top: 1px solid var(--border);\n}<\/p>\n<p>@media (max-width: 960px) {\n  .nav__links, .nav__phone { display: none; }\n  .nav__burger { display: flex; }\n  .nav__mobile { display: flex; }\n}\n@media (max-width: 540px) {\n  .nav__cta { display: none; }\n}<\/p>\n<p>\/* ===== HERO ===== *\/\n.hero {\n  position: relative;\n  background: var(--bg);\n  color: var(--surface);\n  overflow: hidden;\n  padding: 160px 0 120px;\n  min-height: 100vh;\n  display: flex;\n  align-items: center;\n}<\/p>\n<p>.hero__balls {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n  z-index: 0;\n}\n.hero__ball {\n  position: absolute;\n  border-radius: 50%;\n  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.3), rgba(255,255,255,0.05) 60%, transparent 70%);\n  border: 2px solid rgba(255,255,255,0.12);\n  backdrop-filter: blur(2px);\n}\n.hero__ball--1 { width: 320px; height: 320px; top: 8%; left: -80px; background: radial-gradient(circle at 30% 30%, rgba(255,61,46,0.35), rgba(255,61,46,0.06) 60%, transparent 70%); }\n.hero__ball--2 { width: 220px; height: 220px; top: 55%; left: 35%; background: radial-gradient(circle at 30% 30%, rgba(255,224,71,0.25), rgba(255,224,71,0.04) 60%, transparent 70%); }\n.hero__ball--3 { width: 180px; height: 180px; top: 18%; right: 8%; }\n.hero__ball--4 { width: 140px; height: 140px; bottom: 15%; left: 12%; background: radial-gradient(circle at 30% 30%, rgba(255,61,46,0.3), rgba(255,61,46,0.05) 60%, transparent 70%); }\n.hero__ball--5 { width: 260px; height: 260px; bottom: -60px; right: -40px; background: radial-gradient(circle at 30% 30%, rgba(255,224,71,0.2), rgba(255,224,71,0.03) 60%, transparent 70%); }<\/p>\n<p>.hero__inner {\n  position: relative;\n  z-index: 2;\n  max-width: var(--container);\n  margin: 0 auto;\n  padding: 0 32px;\n  width: 100%;\n}<\/p>\n<p>.hero--split .hero__inner {\n  display: grid;\n  grid-template-columns: 1fr 440px;\n  gap: 80px;\n  align-items: center;\n}\n.hero--center { text-align: center; }\n.hero--center .hero__lead { margin-left: auto; margin-right: auto; }<\/p>\n<p>.hero__title {\n  font-family: var(--font-display);\n  font-size: clamp(56px, 9vw, 128px);\n  line-height: 0.9;\n  letter-spacing: -0.03em;\n  text-transform: uppercase;\n  margin: 16px 0 0;\n  text-wrap: balance;\n}\n.hero__title--center { font-size: clamp(56px, 10vw, 140px); }\n.hero__title-accent {\n  color: var(--accent);\n  font-style: italic;\n  display: inline-block;\n  position: relative;\n}\n.hero__title-accent::after {\n  content: \"\";\n  position: absolute;\n  left: 0; right: 0; bottom: 8px;\n  height: 6px;\n  background: var(--accent-2);\n  z-index: -1;\n  transform: skewX(-10deg);\n}<\/p>\n<p>\/* On light backgrounds (About, Builder, FAQ, Games), the accent underline needs more contrast\n   than the default --accent-2 (yellow). Use the ink color for clear legibility. *\/\n.about .section-title__accent,\n.games .section-title__accent,\n.builder .section-title__accent,\n.faq .section-title__accent {\n  position: relative;\n  display: inline-block;\n  z-index: 1;\n}\n.about .section-title__accent::after,\n.games .section-title__accent::after,\n.builder .section-title__accent::after,\n.faq .section-title__accent::after {\n  content: \"\";\n  position: absolute;\n  left: -4px; right: -4px; bottom: 4px;\n  height: 14px;\n  background: var(--ink);\n  z-index: -1;\n  transform: skewX(-8deg);\n  opacity: 0.92;\n}\n.about .section-title__accent,\n.games .section-title__accent,\n.builder .section-title__accent,\n.faq .section-title__accent {\n  color: var(--accent-2-dark);\n  -webkit-text-stroke: 0;\n  padding: 0 4px;\n}<\/p>\n<p>.hero__title-line { display: block; }\n.hero__title-line--alt { color: var(--accent); font-style: italic; }\n.hero__title-line--city { font-size: 0.5em; letter-spacing: 0.04em; opacity: 0.6; }<\/p>\n<p>.hero__lead {\n  font-size: clamp(16px, 1.6vw, 20px);\n  line-height: 1.55;\n  color: rgba(245,242,235,0.75);\n  max-width: 540px;\n  margin: 28px 0 0;\n}<\/p>\n<p>.hero__bullets {\n  list-style: none;\n  padding: 0;\n  margin: 32px 0 0;\n  display: flex;\n  flex-wrap: wrap;\n  gap: 20px;\n  font-size: 15px;\n  color: rgba(245,242,235,0.85);\n}\n.hero__bullets li { display: inline-flex; align-items: center; gap: 10px; }\n.hero__bullet-dot {\n  width: 8px; height: 8px; border-radius: 50%;\n  background: var(--accent-2);\n  box-shadow: 0 0 12px var(--accent-2);\n}<\/p>\n<p>.hero__stats {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 32px;\n  margin: 48px 0 0;\n  padding: 28px 0 0;\n  border-top: 1px solid var(--border);\n  max-width: 540px;\n}\n.hero__stats > div { display: flex; flex-direction: column; gap: 4px; }\n.hero__stats strong {\n  font-family: var(--font-display);\n  font-size: clamp(22px, 2.4vw, 28px);\n  color: var(--surface);\n  letter-spacing: -0.02em;\n}\n.hero__stats span { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }<\/p>\n<p>.hero__ctas { display: flex; gap: 16px; margin: 40px 0 0; justify-content: center; flex-wrap: wrap; }<\/p>\n<p>.hero__form-wrap { position: relative; }\n.hero__form-wrap--wide { max-width: 640px; margin: 60px auto 0; }<\/p>\n<p>.hero__scroll {\n  position: absolute;\n  bottom: 32px;\n  left: 32px;\n  z-index: 2;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 8px;\n  font-family: var(--font-mono);\n  font-size: 11px;\n  letter-spacing: 0.2em;\n  text-transform: uppercase;\n  color: rgba(245,242,235,0.4);\n}\n.hero__scroll-line {\n  width: 1px; height: 40px;\n  background: linear-gradient(to bottom, transparent, var(--surface), transparent);\n  animation: scrollAnim 2s infinite;\n}\n@keyframes scrollAnim {\n  0%, 100% { transform: translateY(-10px); opacity: 0.2; }\n  50% { transform: translateY(10px); opacity: 1; }\n}<\/p>\n<p>.hero__marquee {\n  position: absolute;\n  top: 15%;\n  left: 0; right: 0;\n  overflow: hidden;\n  font-family: var(--font-display);\n  font-size: 120px;\n  color: rgba(255, 61, 46, 0.08);\n  white-space: nowrap;\n  z-index: 1;\n}\n.hero__marquee-track {\n  display: inline-block;\n  animation: marquee 50s linear infinite;\n}\n@keyframes marquee {\n  from { transform: translateX(0); }\n  to { transform: translateX(-50%); }\n}<\/p>\n<p>\/* ===== HERO FORM ===== *\/\n.hero-form {\n  background: var(--bg-card);\n  border: 1px solid var(--border);\n  border-radius: var(--radius-lg);\n  padding: 32px;\n  box-shadow: 0 40px 80px -20px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.03) inset;\n  position: relative;\n}\n.hero-form::before {\n  content: \"\";\n  position: absolute;\n  inset: -1px;\n  border-radius: var(--radius-lg);\n  padding: 1px;\n  background: linear-gradient(135deg, rgba(255,61,46,0.4), transparent 30%, transparent 70%, rgba(255,224,71,0.3));\n  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);\n  -webkit-mask-composite: xor;\n          mask-composite: exclude;\n  pointer-events: none;\n}<\/p>\n<p>.hero-form__head { margin-bottom: 24px; }\n.hero-form__badge {\n  display: inline-block;\n  padding: 4px 10px;\n  background: rgba(255,61,46,0.15);\n  color: var(--accent);\n  font-family: var(--font-mono);\n  font-size: 11px;\n  letter-spacing: 0.1em;\n  text-transform: uppercase;\n  border-radius: 100px;\n  margin-bottom: 12px;\n}\n.hero-form__head h3 {\n  font-family: var(--font-display);\n  font-size: 28px;\n  letter-spacing: -0.01em;\n  margin: 0;\n}\n.hero-form__head p { margin: 6px 0 0; color: rgba(245,242,235,0.6); font-size: 14px; }<\/p>\n<p>.hero-form__grid {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 14px;\n  margin-bottom: 20px;\n}<\/p>\n<p>.field { display: flex; flex-direction: column; gap: 6px; }\n.field span {\n  font-family: var(--font-mono);\n  font-size: 11px;\n  letter-spacing: 0.1em;\n  text-transform: uppercase;\n  color: rgba(245,242,235,0.6);\n}\n.field input {\n  background: rgba(255,255,255,0.04);\n  border: 1px solid rgba(255,255,255,0.1);\n  border-radius: var(--radius-sm);\n  padding: 12px 14px;\n  color: var(--surface);\n  font-size: 15px;\n  transition: border-color 0.15s, background 0.15s;\n  color-scheme: dark;\n}\n.field input:focus {\n  outline: none;\n  border-color: var(--accent);\n  background: rgba(255,255,255,0.06);\n}\n.field--err input { border-color: #ff6b6b; background: rgba(255,107,107,0.08); }<\/p>\n<p>.hero-form__meta {\n  margin-top: 16px;\n  display: flex;\n  gap: 20px;\n  font-size: 12px;\n  color: rgba(245,242,235,0.55);\n}\n.hero-form__meta span { display: inline-flex; align-items: center; gap: 6px; }\n.hero-form__meta svg { color: var(--accent-2); }<\/p>\n<p>.hero-form--success { text-align: center; padding: 48px 32px; }\n.hero-form--success h3 {\n  font-family: var(--font-display);\n  font-size: 32px;\n  margin: 16px 0 12px;\n}\n.hero-form__check {\n  width: 72px; height: 72px;\n  border-radius: 50%;\n  background: var(--accent-2);\n  color: var(--bg);\n  display: grid;\n  place-items: center;\n  margin: 0 auto;\n}\n.hero-form--success p { color: rgba(245,242,235,0.75); line-height: 1.55; max-width: 380px; margin: 0 auto 24px; }<\/p>\n<p>@media (max-width: 960px) {\n  .hero { padding: 140px 0 80px; min-height: auto; }\n  .hero--split .hero__inner { grid-template-columns: 1fr; gap: 48px; }\n  .hero__stats { grid-template-columns: repeat(3, 1fr); gap: 16px; }\n  .hero__scroll { display: none; }\n}\n@media (max-width: 540px) {\n  .hero-form { padding: 24px; }\n  .hero-form__grid { grid-template-columns: 1fr; }\n  .hero__marquee { font-size: 64px; }\n}<\/p>\n<p>\/* ===== ABOUT ===== *\/\n.about {\n  background: var(--surface);\n  color: var(--ink);\n  padding: 120px 0;\n}\n.about__head { margin-bottom: 64px; max-width: 760px; }\n.about__grid {\n  display: grid;\n  grid-template-columns: 1.3fr 1fr;\n  gap: 80px;\n  align-items: start;\n}\n.about__lead {\n  font-size: clamp(18px, 1.8vw, 22px);\n  line-height: 1.55;\n  color: var(--ink);\n  margin: 0 0 40px;\n  font-weight: 500;\n  max-width: 580px;\n}\n.about__points {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 32px 40px;\n}\n.about__point { display: flex; gap: 16px; align-items: flex-start; }\n.about__point-icon {\n  flex-shrink: 0;\n  width: 44px; height: 44px;\n  border-radius: 12px;\n  background: var(--ink);\n  color: var(--accent-2);\n  display: grid;\n  place-items: center;\n}\n.about__point h4 {\n  font-family: var(--font-display);\n  font-size: 18px;\n  letter-spacing: -0.01em;\n  margin: 0 0 4px;\n  text-transform: uppercase;\n}\n.about__point p { font-size: 14px; color: var(--ink-dim); margin: 0; line-height: 1.5; }<\/p>\n<p>.about__counters {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 2px;\n  background: var(--ink);\n  border-radius: var(--radius-lg);\n  overflow: hidden;\n  padding: 2px;\n}\n.counter {\n  background: var(--surface);\n  padding: 32px 24px;\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n.counter__num {\n  font-family: var(--font-display);\n  font-size: clamp(40px, 4.5vw, 56px);\n  line-height: 1;\n  letter-spacing: -0.02em;\n  color: var(--ink);\n}\n.counter__suffix { color: var(--accent); }\n.counter__label { font-size: 14px; font-weight: 600; color: var(--ink); margin-top: 12px; }\n.counter__sub { font-size: 12px; color: var(--ink-dim); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; }<\/p>\n<p>@media (max-width: 960px) {\n  .about { padding: 80px 0; }\n  .about__grid { grid-template-columns: 1fr; gap: 48px; }\n  .about__points { grid-template-columns: 1fr; gap: 24px; }\n}<\/p>\n<p>\/* ===== GAMES ===== *\/\n.games {\n  background: var(--surface-alt);\n  color: var(--ink);\n  padding: 120px 0;\n  position: relative;\n}\n.games::before {\n  content: \"GAMES\";\n  position: absolute;\n  top: 20px;\n  right: -20px;\n  font-family: var(--font-display);\n  font-size: 200px;\n  color: rgba(0,0,0,0.04);\n  line-height: 1;\n  pointer-events: none;\n}\n.games__grid {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 24px;\n  margin-bottom: 48px;\n  position: relative;\n}\n.game-card {\n  background: var(--surface);\n  border-radius: var(--radius-lg);\n  overflow: hidden;\n  border: 1px solid rgba(0,0,0,0.06);\n  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);\n  cursor: pointer;\n  display: flex;\n  flex-direction: column;\n}\n.game-card:hover, .game-card:focus, .game-card--active {\n  transform: translateY(-6px);\n  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.2);\n  outline: none;\n}\n.game-card__img {\n  aspect-ratio: 4 \/ 3;\n  background-size: cover;\n  background-position: center;\n  position: relative;\n  overflow: hidden;\n}\n.game-card__img::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  background: linear-gradient(to bottom, rgba(0,0,0,0) 40%, rgba(0,0,0,0.5));\n  transition: opacity 0.3s;\n}\n.game-card:hover .game-card__img,\n.game-card--active .game-card__img { transform: scale(1); }\n.game-card__img {\n  transition: transform 0.4s var(--ease);\n}\n.game-card:hover .game-card__img { transform: none; }<\/p>\n<p>.game-card__num {\n  position: absolute;\n  top: 20px; left: 20px;\n  font-family: var(--font-display);\n  font-size: 14px;\n  color: rgba(255,255,255,0.8);\n  background: rgba(0,0,0,0.5);\n  padding: 6px 10px;\n  border-radius: 100px;\n  letter-spacing: 0.1em;\n  z-index: 2;\n  backdrop-filter: blur(6px);\n}\n.game-card__emoji {\n  position: absolute;\n  bottom: 16px;\n  right: 16px;\n  font-size: 36px;\n  z-index: 2;\n  transition: transform 0.3s var(--ease);\n}\n.game-card:hover .game-card__emoji,\n.game-card--active .game-card__emoji { transform: scale(1.2) rotate(-8deg); }<\/p>\n<p>.game-card__body { padding: 24px; flex: 1; display: flex; flex-direction: column; }\n.game-card__name {\n  font-family: var(--font-display);\n  font-size: 24px;\n  letter-spacing: -0.01em;\n  margin: 0 0 6px;\n  text-transform: uppercase;\n}\n.game-card__tag { font-size: 14px; font-weight: 600; color: var(--accent); margin: 0 0 12px; }\n.game-card__desc { font-size: 14px; line-height: 1.55; color: var(--ink-dim); margin: 0 0 20px; flex: 1; }<\/p>\n<p>.game-card__meta {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 16px;\n  padding-top: 20px;\n  border-top: 1px solid rgba(0,0,0,0.08);\n}\n.game-card__meta > div { display: flex; flex-direction: column; gap: 2px; }\n.game-card__meta span {\n  font-family: var(--font-mono);\n  font-size: 10px;\n  color: var(--ink-dim);\n  text-transform: uppercase;\n  letter-spacing: 0.08em;\n}\n.game-card__meta strong { font-family: var(--font-display); font-size: 15px; color: var(--ink); }<\/p>\n<p>.intensity { display: flex; gap: 4px; align-items: center; height: 20px; }\n.intensity__dot {\n  width: 10px; height: 10px;\n  border-radius: 50%;\n  border: 1.5px solid var(--ink);\n}\n.intensity__dot--on { background: var(--accent); border-color: var(--accent); }<\/p>\n<p>.games__note {\n  display: flex;\n  gap: 16px;\n  align-items: center;\n  background: var(--ink);\n  color: var(--surface);\n  padding: 20px 28px;\n  border-radius: var(--radius);\n  position: relative;\n}\n.games__note-icon { font-size: 28px; }\n.games__note p { margin: 0; font-size: 14px; line-height: 1.55; }<\/p>\n<p>@media (max-width: 960px) {\n  .games { padding: 80px 0; }\n  .games__grid { grid-template-columns: 1fr; }\n  .games::before { font-size: 120px; }\n}<\/p>\n<p>\/* ===== GALLERY ===== *\/\n.gallery {\n  background: var(--bg);\n  padding: 120px 0 0;\n  color: var(--surface);\n}\n.gallery__grid {\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  grid-auto-rows: 180px;\n  gap: 4px;\n  margin-top: 64px;\n}\n.gallery__item {\n  background-size: cover;\n  background-position: center;\n  position: relative;\n  overflow: hidden;\n  border: 0;\n  padding: 0;\n  transition: transform 0.4s var(--ease);\n}\n.gallery__item::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  background: linear-gradient(to top, rgba(0,0,0,0.7), transparent 50%);\n  opacity: 0;\n  transition: opacity 0.2s;\n}\n.gallery__item:hover { transform: scale(1.02); z-index: 2; }\n.gallery__item:hover::after { opacity: 1; }\n.gallery__item:hover .gallery__tag { opacity: 1; transform: translateY(0); }<\/p>\n<p>.gallery__item--1 { grid-row: span 2; }\n.gallery__item--3 { grid-row: span 2; }\n.gallery__item--4 { grid-column: span 2; }<\/p>\n<p>.gallery__tag {\n  position: absolute;\n  bottom: 16px; left: 16px;\n  font-family: var(--font-mono);\n  font-size: 12px;\n  letter-spacing: 0.08em;\n  color: var(--surface);\n  z-index: 2;\n  opacity: 0;\n  transform: translateY(8px);\n  transition: opacity 0.2s, transform 0.2s;\n  background: rgba(0,0,0,0.6);\n  padding: 6px 10px;\n  border-radius: 100px;\n  backdrop-filter: blur(6px);\n}<\/p>\n<p>.lightbox {\n  position: fixed;\n  inset: 0;\n  z-index: 200;\n  background: rgba(0,0,0,0.92);\n  display: grid;\n  place-items: center;\n  padding: 48px;\n  cursor: zoom-out;\n  backdrop-filter: blur(8px);\n}\n.lightbox img {\n  max-width: 90vw;\n  max-height: 85vh;\n  border-radius: var(--radius);\n  cursor: default;\n}\n.lightbox__close {\n  position: absolute;\n  top: 20px; right: 24px;\n  color: var(--surface);\n  font-size: 32px;\n  width: 44px; height: 44px;\n  border-radius: 50%;\n  background: rgba(255,255,255,0.1);\n}\n.lightbox__close:hover { background: rgba(255,255,255,0.2); }\n.lightbox__nav {\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n  color: var(--surface);\n  font-size: 44px;\n  width: 56px; height: 56px;\n  border-radius: 50%;\n  background: rgba(255,255,255,0.1);\n  display: grid;\n  place-items: center;\n}\n.lightbox__nav:hover { background: rgba(255,255,255,0.2); }\n.lightbox__nav--prev { left: 24px; }\n.lightbox__nav--next { right: 24px; }\n.lightbox__caption {\n  position: absolute;\n  bottom: 24px;\n  color: rgba(255,255,255,0.7);\n  font-family: var(--font-mono);\n  font-size: 13px;\n  letter-spacing: 0.08em;\n}<\/p>\n<p>@media (max-width: 720px) {\n  .gallery__grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 140px; }\n  .gallery__item--4 { grid-column: span 2; }\n  .lightbox__nav { width: 44px; height: 44px; font-size: 32px; }\n}<\/p>\n<p>\/* ===== BUILDER ===== *\/\n.builder {\n  background: var(--surface);\n  color: var(--ink);\n  padding: 120px 0;\n}\n.builder__grid {\n  display: grid;\n  grid-template-columns: 1.5fr 1fr;\n  gap: 48px;\n  margin-top: 64px;\n  align-items: start;\n}<\/p>\n<p>.builder__block {\n  background: var(--surface);\n  border: 1px solid rgba(0,0,0,0.08);\n  border-radius: var(--radius-lg);\n  padding: 28px;\n  margin-bottom: 20px;\n}\n.builder__block-head { margin-bottom: 20px; }\n.builder__block-label {\n  font-family: var(--font-mono);\n  font-size: 11px;\n  letter-spacing: 0.12em;\n  text-transform: uppercase;\n  color: var(--accent);\n  font-weight: 600;\n}\n.builder__block-head h3 {\n  font-family: var(--font-display);\n  font-size: 24px;\n  letter-spacing: -0.01em;\n  margin: 4px 0 0;\n  text-transform: uppercase;\n}<\/p>\n<p>.builder__base {\n  display: grid;\n  grid-template-columns: auto 1fr auto;\n  gap: 20px;\n  align-items: center;\n  padding: 20px;\n  background: var(--ink);\n  color: var(--surface);\n  border-radius: var(--radius);\n}\n.builder__base-emoji { font-size: 48px; }\n.builder__base-body p { margin: 0 0 10px; font-size: 14px; line-height: 1.5; color: rgba(245,242,235,0.8); }\n.builder__base-meta { display: flex; flex-wrap: wrap; gap: 6px; }\n.builder__base-meta span {\n  font-family: var(--font-mono);\n  font-size: 10px;\n  padding: 4px 8px;\n  background: rgba(255,255,255,0.1);\n  border-radius: 100px;\n  text-transform: uppercase;\n  letter-spacing: 0.08em;\n}\n.builder__base-price { text-align: right; }\n.builder__base-price strong {\n  font-family: var(--font-display);\n  font-size: 28px;\n  color: var(--accent-2);\n  display: block;\n  line-height: 1;\n}\n.builder__base-price span { font-size: 11px; color: rgba(245,242,235,0.6); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; }<\/p>\n<p>.builder__segmented {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 8px;\n  padding: 4px;\n  background: rgba(0,0,0,0.05);\n  border-radius: var(--radius);\n}\n.builder__seg {\n  padding: 14px;\n  border-radius: var(--radius-sm);\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 2px;\n  transition: background 0.15s, color 0.15s;\n}\n.builder__seg strong {\n  font-family: var(--font-display);\n  font-size: 16px;\n  text-transform: uppercase;\n  letter-spacing: -0.01em;\n}\n.builder__seg span { font-family: var(--font-mono); font-size: 11px; color: var(--ink-dim); text-transform: uppercase; letter-spacing: 0.08em; }\n.builder__seg--on { background: var(--ink); color: var(--surface); }\n.builder__seg--on span { color: var(--accent-2); }<\/p>\n<p>.builder__slider { display: flex; gap: 20px; align-items: center; }\n.builder__slider input[type=range] {\n  flex: 1;\n  -webkit-appearance: none;\n  appearance: none;\n  height: 6px;\n  background: rgba(0,0,0,0.1);\n  border-radius: 100px;\n  outline: none;\n}\n.builder__slider input[type=range]::-webkit-slider-thumb {\n  -webkit-appearance: none;\n  appearance: none;\n  width: 28px;\n  height: 28px;\n  border-radius: 50%;\n  background: var(--accent);\n  cursor: pointer;\n  border: 3px solid var(--surface);\n  box-shadow: 0 2px 10px rgba(0,0,0,0.2);\n}\n.builder__slider input[type=range]::-moz-range-thumb {\n  width: 28px; height: 28px;\n  border-radius: 50%;\n  background: var(--accent);\n  cursor: pointer;\n  border: 3px solid var(--surface);\n}\n.builder__slider-val {\n  display: flex;\n  align-items: baseline;\n  gap: 6px;\n  min-width: 100px;\n  text-align: right;\n  justify-content: flex-end;\n}\n.builder__slider-val strong { font-family: var(--font-display); font-size: 36px; color: var(--ink); line-height: 1; }\n.builder__slider-val span { font-size: 13px; color: var(--ink-dim); font-weight: 500; }<\/p>\n<p>.builder__slider-meta {\n  display: flex;\n  justify-content: space-between;\n  padding: 8px 0 0;\n  font-family: var(--font-mono);\n  font-size: 10px;\n  color: var(--ink-dim);\n}<\/p>\n<p>.builder__addons {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n.addon {\n  display: grid;\n  grid-template-columns: auto 1fr auto auto;\n  gap: 18px;\n  align-items: center;\n  padding: 16px 18px;\n  border: 2px solid rgba(0,0,0,0.08);\n  border-radius: var(--radius);\n  background: var(--surface);\n  text-align: left;\n  transition: border-color 0.15s, background 0.15s, transform 0.15s;\n  font-family: inherit;\n  color: inherit;\n}\n.addon:hover { border-color: rgba(0,0,0,0.2); transform: translateY(-1px); }\n.addon--on { border-color: var(--accent); background: rgba(255,61,46,0.04); }\n.addon__emoji { font-size: 28px; line-height: 1; }\n.addon__body h4 {\n  font-family: var(--font-display);\n  font-size: 16px;\n  letter-spacing: -0.005em;\n  margin: 0 0 2px;\n  text-transform: uppercase;\n}\n.addon__body p { font-size: 13px; color: var(--ink-dim); margin: 0; line-height: 1.45; }\n.addon__price { text-align: right; }\n.addon__price strong { font-family: var(--font-display); font-size: 16px; display: block; color: var(--ink); line-height: 1.2; }\n.addon__price span { font-family: var(--font-mono); font-size: 10px; color: var(--ink-dim); text-transform: uppercase; letter-spacing: 0.06em; }\n.addon__check {\n  width: 26px; height: 26px;\n  border-radius: 50%;\n  border: 2px solid rgba(0,0,0,0.15);\n  display: grid;\n  place-items: center;\n  color: transparent;\n  transition: all 0.15s;\n}\n.addon--on .addon__check { background: var(--accent); border-color: var(--accent); color: #fff; }<\/p>\n<p>.builder__summary { position: sticky; top: 100px; }\n.builder__summary-sticky {\n  background: var(--ink);\n  color: var(--surface);\n  border-radius: var(--radius-lg);\n  padding: 28px;\n  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.3);\n}\n.builder__summary-head { margin-bottom: 20px; }\n.builder__summary-head .eyebrow { color: var(--accent-2); }\n.builder__summary-head .eyebrow::before { background: var(--accent-2); }\n.builder__summary-head h3 {\n  font-family: var(--font-display);\n  font-size: 24px;\n  margin: 4px 0 0;\n  text-transform: uppercase;\n  letter-spacing: -0.01em;\n}<\/p>\n<p>.builder__summary-lines { display: flex; flex-direction: column; gap: 10px; padding: 20px 0; border-top: 1px solid rgba(255,255,255,0.1); border-bottom: 1px solid rgba(255,255,255,0.1); }\n.line { display: flex; justify-content: space-between; align-items: center; font-size: 14px; }\n.line span { color: rgba(245,242,235,0.8); }\n.line strong { font-family: var(--font-display); color: var(--surface); }\n.line--hint span { color: rgba(245,242,235,0.5); font-style: italic; font-size: 13px; }<\/p>\n<p>.builder__summary-total {\n  padding: 24px 0 20px;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n.builder__summary-total > div:first-child {\n  display: flex;\n  justify-content: space-between;\n  align-items: baseline;\n}\n.builder__summary-total span { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(245,242,235,0.6); }\n.builder__summary-total strong {\n  font-family: var(--font-display);\n  font-size: 40px;\n  color: var(--accent-2);\n  line-height: 1;\n}\n.builder__summary-pp { display: flex; justify-content: space-between; align-items: center; }\n.builder__summary-pp span:first-child { color: var(--surface); font-family: var(--font-display); font-size: 16px; letter-spacing: 0; }<\/p>\n<p>.builder__reset {\n  width: 100%;\n  margin-top: 10px;\n  padding: 10px;\n  font-family: var(--font-mono);\n  font-size: 12px;\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n  color: rgba(245,242,235,0.5);\n}\n.builder__reset:hover { color: var(--accent-2); }<\/p>\n<p>.builder__summary-fine {\n  font-size: 11px;\n  color: rgba(245,242,235,0.5);\n  line-height: 1.5;\n  margin: 16px 0 0;\n  font-family: var(--font-mono);\n}<\/p>\n<p>@media (max-width: 960px) {\n  .builder { padding: 80px 0; }\n  .builder__grid { grid-template-columns: 1fr; }\n  .builder__summary { position: static; }\n  .builder__base { grid-template-columns: auto 1fr; }\n  .builder__base-price { grid-column: 2; text-align: left; }\n  .addon { grid-template-columns: auto 1fr auto; }\n  .addon__check { grid-column: 3; }\n  .addon__body { grid-column: 2; }\n  .addon__price { grid-column: 2; grid-row: 2; text-align: left; }\n}<\/p>\n<p>\/* ===== FAQ ===== *\/\n.faq {\n  background: var(--surface-alt);\n  color: var(--ink);\n  padding: 120px 0;\n}\n.faq__grid {\n  display: grid;\n  grid-template-columns: 1fr 1.4fr;\n  gap: 80px;\n  align-items: start;\n}\n.faq__head { position: sticky; top: 100px; }\n.faq__cta { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; }<\/p>\n<p>.faq__list { display: flex; flex-direction: column; gap: 4px; }\n.faq-item {\n  background: var(--surface);\n  border-radius: var(--radius);\n  overflow: hidden;\n  border: 1px solid rgba(0,0,0,0.06);\n  transition: border-color 0.15s;\n}\n.faq-item--open { border-color: var(--accent); }<\/p>\n<p>.faq-item__q {\n  width: 100%;\n  padding: 20px 24px;\n  display: grid;\n  grid-template-columns: auto 1fr auto;\n  gap: 20px;\n  align-items: center;\n  text-align: left;\n  transition: background 0.15s;\n}\n.faq-item__q:hover { background: rgba(0,0,0,0.02); }\n.faq-item__num {\n  font-family: var(--font-mono);\n  font-size: 12px;\n  color: var(--accent);\n  font-weight: 700;\n  letter-spacing: 0.1em;\n}\n.faq-item__text {\n  font-family: var(--font-display);\n  font-size: 17px;\n  text-transform: uppercase;\n  letter-spacing: -0.005em;\n  line-height: 1.25;\n}\n.faq-item__icon {\n  position: relative;\n  width: 20px; height: 20px;\n  flex-shrink: 0;\n}\n.faq-item__icon span {\n  position: absolute;\n  background: var(--ink);\n  transition: transform 0.3s var(--ease);\n}\n.faq-item__icon span:nth-child(1) { top: 50%; left: 0; right: 0; height: 2px; transform: translateY(-50%); }\n.faq-item__icon span:nth-child(2) { left: 50%; top: 0; bottom: 0; width: 2px; transform: translateX(-50%); }\n.faq-item--open .faq-item__icon span:nth-child(2) { transform: translateX(-50%) rotate(90deg); }\n.faq-item--open .faq-item__icon span { background: var(--accent); }<\/p>\n<p>.faq-item__a {\n  max-height: 0;\n  overflow: hidden;\n  transition: max-height 0.4s var(--ease);\n}\n.faq-item--open .faq-item__a { max-height: 400px; }\n.faq-item__a-inner {\n  padding: 0 24px 24px 64px;\n}\n.faq-item__a p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink-dim); }<\/p>\n<p>@media (max-width: 960px) {\n  .faq { padding: 80px 0; }\n  .faq__grid { grid-template-columns: 1fr; gap: 48px; }\n  .faq__head { position: static; }\n  .faq-item__a-inner { padding-left: 24px; }\n}<\/p>\n<p>\/* ===== CTA BAND ===== *\/\n.cta-band {\n  background: var(--accent);\n  color: #fff;\n  padding: 100px 0 80px;\n  position: relative;\n  overflow: hidden;\n}\n.cta-band__marquee {\n  position: absolute;\n  top: 0; left: 0; right: 0;\n  padding: 16px 0;\n  background: var(--ink);\n  color: var(--accent-2);\n  font-family: var(--font-display);\n  font-size: 14px;\n  letter-spacing: 0.1em;\n  overflow: hidden;\n  white-space: nowrap;\n}\n.cta-band__track {\n  display: inline-flex;\n  gap: 24px;\n  animation: marquee 30s linear infinite;\n}\n.cta-band__ball { color: var(--accent); }<\/p>\n<p>.cta-band__inner {\n  display: grid;\n  grid-template-columns: 1fr auto;\n  gap: 48px;\n  align-items: center;\n  margin-top: 40px;\n}\n.cta-band__title {\n  font-family: var(--font-display);\n  font-size: clamp(40px, 6vw, 80px);\n  line-height: 0.95;\n  letter-spacing: -0.02em;\n  text-transform: uppercase;\n  margin: 0;\n  text-wrap: balance;\n}\n.cta-band__sub { margin: 12px 0 0; font-size: 18px; opacity: 0.9; }\n.cta-band__actions { display: flex; gap: 12px; flex-shrink: 0; }\n.cta-band .btn--primary { background: var(--ink); color: var(--accent-2); }\n.cta-band .btn--primary:hover { background: #000; }\n.cta-band .btn--ghost { border-color: rgba(255,255,255,0.4); color: #fff; }\n.cta-band .btn--ghost:hover { border-color: #fff; background: rgba(255,255,255,0.1); color: #fff; }<\/p>\n<p>@media (max-width: 720px) {\n  .cta-band__inner { grid-template-columns: 1fr; }\n  .cta-band__actions { flex-direction: column; }\n  .cta-band__actions .btn { width: 100%; }\n}<\/p>\n<p>\/* ===== FOOTER ===== *\/\n.footer { background: #050505; color: rgba(245,242,235,0.7); padding: 80px 0 0; }\n.footer__inner {\n  display: grid;\n  grid-template-columns: 2fr 1fr 1fr 1fr;\n  gap: 48px;\n  padding-bottom: 60px;\n}\n.footer__brand .nav__logo { color: var(--surface); margin-bottom: 20px; }\n.footer__brand p { font-size: 14px; line-height: 1.6; margin: 0 0 24px; max-width: 320px; }\n.footer__socials { display: flex; gap: 10px; }\n.footer__socials a {\n  width: 40px; height: 40px;\n  border-radius: 50%;\n  border: 1px solid rgba(255,255,255,0.15);\n  display: grid;\n  place-items: center;\n  font-family: var(--font-display);\n  font-size: 12px;\n  color: var(--surface);\n  transition: all 0.15s;\n}\n.footer__socials a:hover { background: var(--accent); border-color: var(--accent); }<\/p>\n<p>.footer__col h4 {\n  font-family: var(--font-display);\n  font-size: 14px;\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n  color: var(--surface);\n  margin: 0 0 20px;\n}\n.footer__col a, .footer__col span {\n  display: block;\n  font-size: 14px;\n  padding: 4px 0;\n  transition: color 0.15s;\n}\n.footer__col a:hover { color: var(--accent); }<\/p>\n<p>.footer__bottom { border-top: 1px solid var(--border); padding: 24px 0; }\n.footer__bottom-inner {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  font-size: 13px;\n}\n.footer__bottom-inner > div { display: flex; gap: 24px; }<\/p>\n<p>@media (max-width: 960px) {\n  .footer__inner { grid-template-columns: 1fr 1fr; gap: 32px; padding-bottom: 40px; }\n  .footer__brand { grid-column: 1 \/ -1; }\n}\n@media (max-width: 540px) {\n  .footer__bottom-inner { flex-direction: column; gap: 12px; }\n}<\/p>\n<p>\/* ===== TWEAKS PANEL ===== *\/\n.tweaks {\n  position: fixed;\n  bottom: 20px; right: 20px;\n  z-index: 150;\n  background: #111;\n  color: var(--surface);\n  border: 1px solid rgba(255,255,255,0.1);\n  border-radius: var(--radius);\n  padding: 16px;\n  width: 280px;\n  box-shadow: 0 20px 40px rgba(0,0,0,0.5);\n  font-family: var(--font-body);\n  font-size: 13px;\n}\n.tweaks__head {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 14px;\n  padding-bottom: 10px;\n  border-bottom: 1px solid rgba(255,255,255,0.1);\n}\n.tweaks__title { font-family: var(--font-display); font-size: 14px; text-transform: uppercase; letter-spacing: 0.05em; }\n.tweaks__close { color: rgba(255,255,255,0.5); font-size: 18px; }\n.tweaks__group { margin-bottom: 14px; }\n.tweaks__group:last-child { margin-bottom: 0; }\n.tweaks__label {\n  font-family: var(--font-mono);\n  font-size: 10px;\n  color: rgba(255,255,255,0.5);\n  letter-spacing: 0.1em;\n  text-transform: uppercase;\n  margin-bottom: 8px;\n}\n.tweaks__opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }\n.tweaks__opt {\n  padding: 8px;\n  border-radius: 6px;\n  background: rgba(255,255,255,0.05);\n  border: 1px solid transparent;\n  color: rgba(255,255,255,0.7);\n  font-size: 11px;\n  text-transform: capitalize;\n  text-align: center;\n}\n.tweaks__opt:hover { background: rgba(255,255,255,0.08); }\n.tweaks__opt--on { background: var(--accent); color: #fff; border-color: var(--accent); }<\/p>\n<\/style>\n<p><!-- ============================================================\n     LOOPYBALL \u2014 HOME (paste as Custom HTML block on a page set\n     to GeneratePress \"Blank\" \/ \"Full Width\" template).\n     Wymaga: CSS z additional.css w Customize \u2192 Additional CSS,\n     oraz Google Fonts (Archivo Black, Anton, Inter, JetBrains\n     Mono, Space Grotesk) \u2014 patrz <link> ni\u017cej (mo\u017cesz doda\u0107\n     przez wtyczk\u0119 typu \"Insert Headers & Footers\" do <head>).\n     ============================================================ --><\/p>\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Archivo+Black&#038;family=Anton&#038;family=Inter:wght@400;500;600;700&#038;family=JetBrains+Mono:wght@400;500;600;700&#038;family=Space+Grotesk:wght@400;500;600;700&#038;display=swap\" rel=\"stylesheet\">\n<div id=\"lpb-root\" data-palette=\"bold\" data-typography=\"archivo\">\n<p>  <!-- NAV --><\/p>\n<header class=\"nav\" id=\"lpb-nav\">\n<div class=\"nav__inner\">\n      <a href=\"#top\" class=\"nav__logo\"><br \/>\n        <span class=\"nav__logo-mark\"><br \/>\n          <span class=\"nav__logo-ball nav__logo-ball--a\"><\/span><br \/>\n          <span class=\"nav__logo-ball nav__logo-ball--b\"><\/span><br \/>\n        <\/span><br \/>\n        <span class=\"nav__logo-text\">LOOPYBALL<span class=\"nav__logo-dot\">.pl<\/span><\/span><br \/>\n      <\/a><\/p>\n<nav class=\"nav__links\">\n        <a href=\"#o-nas\">O bubble football<\/a><br \/>\n        <a href=\"#gry\">Gry<\/a><br \/>\n        <a href=\"#galeria\">Galeria<\/a><br \/>\n        <a href=\"#pakiet\">Zbuduj pakiet<\/a><br \/>\n        <a href=\"#faq\">FAQ<\/a><br \/>\n      <\/nav>\n<div class=\"nav__cta-wrap\">\n        <a href=\"tel:+48506432150\" class=\"nav__phone\"><br \/>\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z\"\/><\/svg><br \/>\n          506 432 150<br \/>\n        <\/a><br \/>\n        <a href=\"#hero-form\" class=\"btn btn--primary nav__cta\">Zarezerwuj<\/a><br \/>\n        <button class=\"nav__burger\" id=\"lpb-burger\" aria-label=\"Menu\"><span><\/span><span><\/span><span><\/span><\/button>\n      <\/div>\n<\/p><\/div>\n<div class=\"nav__mobile\" id=\"lpb-mobile\" hidden>\n      <a href=\"#o-nas\">O bubble football<\/a><br \/>\n      <a href=\"#gry\">Gry<\/a><br \/>\n      <a href=\"#galeria\">Galeria<\/a><br \/>\n      <a href=\"#pakiet\">Zbuduj pakiet<\/a><br \/>\n      <a href=\"#faq\">FAQ<\/a><br \/>\n      <a href=\"#hero-form\" class=\"btn btn--primary\">Zarezerwuj termin<\/a>\n    <\/div>\n<\/header>\n<p>  <main><\/p>\n<p>    <!-- HERO (split) --><\/p>\n<section class=\"hero hero--split\" id=\"top\">\n<div class=\"hero__balls\" id=\"lpb-balls\" aria-hidden=\"true\">\n<div class=\"hero__ball hero__ball--1\" data-speed=\"-0.25\" data-rot=\"0.08\"><\/div>\n<div class=\"hero__ball hero__ball--2\" data-speed=\"-0.45\" data-rot=\"-0.12\"><\/div>\n<div class=\"hero__ball hero__ball--3\" data-speed=\"-0.15\" data-rot=\"0.05\"><\/div>\n<div class=\"hero__ball hero__ball--4\" data-speed=\"-0.35\" data-rot=\"-0.09\"><\/div>\n<div class=\"hero__ball hero__ball--5\" data-speed=\"-0.2\" data-rot=\"0.07\"><\/div>\n<\/p><\/div>\n<div class=\"hero__inner\">\n<div class=\"hero__copy\">\n          <span class=\"eyebrow\">#1 w Warszawie \u00b7 od 2019<\/span><\/p>\n<h1 class=\"hero__title\">BUBBLE FOOTBALL <span class=\"hero__title-accent\">WARSZAWA<\/span><\/h1>\n<p class=\"hero__lead\">Wynajem kul pneumatycznych z prowadz\u0105cym. Wieczory kawalerskie, integracje firmowe, pikniki rodzinne \u2014 dojedziemy w dowolne miejsce w stolicy z pe\u0142nym sprz\u0119tem.<\/p>\n<ul class=\"hero__bullets\">\n<li><span class=\"hero__bullet-dot\"><\/span>3 gry w standardzie<\/li>\n<li><span class=\"hero__bullet-dot\"><\/span>do 16 graczy jednocze\u015bnie<\/li>\n<li><span class=\"hero__bullet-dot\"><\/span>prowadz\u0105cy + kamera GoPro<\/li>\n<\/ul>\n<div class=\"hero__stats\">\n<div><strong>650 z\u0142<\/strong><span>60 min \/ grupa<\/span><\/div>\n<div><strong>60 min<\/strong><span>odpowied\u017a na zapytanie<\/span><\/div>\n<div><strong>4.9\/5<\/strong><span>Google \u00b7 120 opinii<\/span><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"hero__form-wrap\">\n<form class=\"hero-form\" id=\"hero-form\" novalidate>\n<div class=\"hero-form__head\">\n              <span class=\"hero-form__badge\">Szybka wycena<\/span><\/p>\n<h3>Sprawd\u017a termin w 60 sek.<\/h3>\n<p>Odpowiadamy w godzin\u0119. Zero spamu.<\/p>\n<\/p><\/div>\n<div class=\"hero-form__grid\">\n              <label class=\"field\"><span>Imi\u0119 i nazwisko<\/span><input type=\"text\" name=\"name\" placeholder=\"Jan Kowalski\" required><\/label><br \/>\n              <label class=\"field\"><span>Telefon<\/span><input type=\"tel\" name=\"phone\" placeholder=\"+48 506 432 150\" required><\/label><br \/>\n              <label class=\"field\"><span>E-mail<\/span><input type=\"email\" name=\"email\" placeholder=\"jan@firma.pl\" required><\/label><br \/>\n              <label class=\"field\"><span>Data wydarzenia<\/span><input type=\"date\" name=\"date\" required><\/label>\n            <\/div>\n<p>            <button type=\"submit\" class=\"btn btn--primary btn--block\"><br \/>\n              Zarezerwuj termin<br \/>\n              <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><polyline points=\"12 5 19 12 12 19\"\/><\/svg><br \/>\n            <\/button><\/p>\n<div class=\"hero-form__meta\">\n              <span><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg> bez przedp\u0142aty<\/span><br \/>\n              <span><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg> odpowied\u017a w 60 min<\/span>\n            <\/div>\n<\/p><\/form>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"hero__scroll\" aria-hidden=\"true\"><span>scroll<\/span><\/p>\n<div class=\"hero__scroll-line\"><\/div>\n<\/div>\n<\/section>\n<p>    <!-- GALLERY --><\/p>\n<section class=\"gallery\" id=\"galeria\">\n<div class=\"container\">\n<div class=\"section-head section-head--dark\">\n          <span class=\"eyebrow\">03 \u2014 Galeria<\/span><\/p>\n<h2 class=\"section-title section-title--light\">Tak to <span class=\"section-title__accent\">wygl\u0105da naprawd\u0119.<\/span><\/h2>\n<p class=\"section-sub section-sub--light\">Prawdziwe zdj\u0119cia z naszych event\u00f3w. Bez AI, bez stock\u00f3w robionych w studio.<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"gallery__grid\" id=\"lpb-gallery\"><\/div>\n<\/section>\n<p>    <!-- ABOUT --><\/p>\n<section class=\"about\" id=\"o-nas\">\n<div class=\"container\">\n<div class=\"about__head\">\n          <span class=\"eyebrow eyebrow--dark\">01 \u2014 Czym to w\u0142a\u015bciwie jest?<\/span><\/p>\n<h2 class=\"section-title\">Wchodzisz w kul\u0119. <span class=\"section-title__accent\">Reszta to chaos.<\/span><\/h2>\n<\/p><\/div>\n<div class=\"about__grid\">\n<div class=\"about__copy\">\n<p class=\"about__lead\">Bubble football (zorbing football) to pi\u0142ka no\u017cna, w kt\u00f3rej ka\u017cdy gracz jest zapakowany w ogromn\u0105, przezroczyst\u0105 kul\u0119 pneumatyczn\u0105. Biegasz, zderzasz si\u0119, kozio\u0142kujesz \u2014 i dalej pr\u00f3bujesz strzeli\u0107 gola. Zasady? Minimalne. \u015amiechu? Maksymalnie.<\/p>\n<div class=\"about__points\">\n<div class=\"about__point\">\n<div class=\"about__point-icon\"><svg viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2\"\/><circle cx=\"9\" cy=\"7\" r=\"4\"\/><path d=\"M23 21v-2a4 4 0 0 0-3-3.87\"\/><path d=\"M16 3.13a4 4 0 0 1 0 7.75\"\/><\/svg><\/div>\n<div>\n<h4>8\u201316 os\u00f3b<\/h4>\n<p>Idealna wielko\u015b\u0107 grupy na firm\u0119 albo wiecz\u00f3r kawalerski.<\/p>\n<\/div><\/div>\n<div class=\"about__point\">\n<div class=\"about__point-icon\"><svg viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><polyline points=\"12 6 12 12 16 14\"\/><\/svg><\/div>\n<div>\n<h4>60\u201390 minut<\/h4>\n<p>Tyle trwa standardowa rozgrywka. Starczy ka\u017cdemu do zadyszki.<\/p>\n<\/div><\/div>\n<div class=\"about__point\">\n<div class=\"about__point-icon\"><svg viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z\"\/><circle cx=\"12\" cy=\"10\" r=\"3\"\/><\/svg><\/div>\n<div>\n<h4>Ca\u0142a Warszawa<\/h4>\n<p>Park, hala, ogr\u00f3d, pla\u017ca nad Wis\u0142\u0105 \u2014 dojedziemy gdzie trzeba.<\/p>\n<\/div><\/div>\n<div class=\"about__point\">\n<div class=\"about__point-icon\"><svg viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"\/><\/svg><\/div>\n<div>\n<h4>Bez ogrania<\/h4>\n<p>Nie trzeba umie\u0107 gra\u0107 w pi\u0142k\u0119. Wystarczy, \u017ce umiesz si\u0119 \u015bmia\u0107.<\/p>\n<\/div><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"about__counters\" id=\"lpb-counters\">\n<div class=\"counter\" data-target=\"500\" data-suffix=\"+\">\n<div class=\"counter__num\">0<span class=\"counter__suffix\">+<\/span><\/div>\n<div class=\"counter__label\">Zrealizowanych event\u00f3w<\/div>\n<div class=\"counter__sub\">od 2019 roku<\/div>\n<\/div>\n<div class=\"counter\" data-target=\"12000\" data-suffix=\"+\">\n<div class=\"counter__num\">0<span class=\"counter__suffix\">+<\/span><\/div>\n<div class=\"counter__label\">Zadowolonych graczy<\/div>\n<div class=\"counter__sub\">firmy, grupy, rodziny<\/div>\n<\/div>\n<div class=\"counter\" data-target=\"98\" data-suffix=\"%\">\n<div class=\"counter__num\">0<span class=\"counter__suffix\">%<\/span><\/div>\n<div class=\"counter__label\">Poleci\u0142oby nas<\/div>\n<div class=\"counter__sub\">ankieta po evencie<\/div>\n<\/div>\n<div class=\"counter\" data-target=\"4.9\" data-suffix=\"\/5\">\n<div class=\"counter__num\">0<span class=\"counter__suffix\">\/5<\/span><\/div>\n<div class=\"counter__label\">Ocen w Google<\/div>\n<div class=\"counter__sub\">120+ recenzji<\/div>\n<\/div><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/section>\n<p>    <!-- GAMES --><\/p>\n<section class=\"games\" id=\"gry\">\n<div class=\"container\">\n<div class=\"section-head\">\n          <span class=\"eyebrow\">02 \u2014 Trzy gry w standardzie<\/span><\/p>\n<h2 class=\"section-title\">Wybierasz <span class=\"section-title__accent\">klimat.<\/span><br \/>My dostarczamy chaos.<\/h2>\n<p class=\"section-sub\">Ka\u017cdy pakiet zawiera wszystkie trzy gry. Prowadz\u0105cy dobierze kolejno\u015b\u0107 i d\u0142ugo\u015b\u0107 rund do grupy.<\/p>\n<\/p><\/div>\n<div class=\"games__grid\" id=\"lpb-games\"><\/div>\n<div class=\"games__note\">\n          <span class=\"games__note-icon\">\ud83d\udca1<\/span><\/p>\n<p>Na miejscu prowadz\u0105cy proponuje te\u017c warianty: mini-mecz 4vs4, bitw\u0119 \u201ekr\u00f3l g\u00f3ry&#8221; na macie, sztafet\u0119 w kulach. Wszystko wliczone w cen\u0119.<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<\/section>\n<p>    <!-- BUILDER --><\/p>\n<section class=\"builder\" id=\"pakiet\">\n<div class=\"container\">\n<div class=\"section-head\">\n          <span class=\"eyebrow\">04 \u2014 Rozszerz pakiet<\/span><\/p>\n<h2 class=\"section-title\">Zbuduj sw\u00f3j event.<br \/><span class=\"section-title__accent\">Zap\u0142a\u0107 za to, co faktycznie bierzesz.<\/span><\/h2>\n<p class=\"section-sub\">Bubble football to baza. Dorzu\u0107 dodatkowe atrakcje i zobacz cen\u0119 w czasie rzeczywistym.<\/p>\n<\/p><\/div>\n<div class=\"builder__grid\">\n<div class=\"builder__options\">\n<div class=\"builder__block\">\n<div class=\"builder__block-head\"><span class=\"builder__block-label\">Baza<\/span><\/p>\n<h3>Bubble Football<\/h3>\n<\/div>\n<div class=\"builder__base\">\n<div class=\"builder__base-emoji\">\u26bd<\/div>\n<div class=\"builder__base-body\">\n<p>10 kul pneumatycznych + prowadz\u0105cy + 3 gry. Dojazd w obr\u0119bie Warszawy gratis.<\/p>\n<div class=\"builder__base-meta\"><span>10 kul<\/span><span>Prowadz\u0105cy<\/span><span>3 gry<\/span><span>Dojazd gratis<\/span><\/div>\n<\/p><\/div>\n<div class=\"builder__base-price\"><strong id=\"lpb-base-price\">650 z\u0142<\/strong><span>za grup\u0119<\/span><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"builder__block\">\n<div class=\"builder__block-head\"><span class=\"builder__block-label\">D\u0142ugo\u015b\u0107<\/span><\/p>\n<h3>Ile czasu gramy?<\/h3>\n<\/div>\n<div class=\"builder__segmented\" id=\"lpb-duration\">\n                <button class=\"builder__seg builder__seg--on\" data-mult=\"1\" data-id=\"60\"><strong>60 minut<\/strong><span>standard<\/span><\/button><br \/>\n                <button class=\"builder__seg\" data-mult=\"1.4\" data-id=\"90\"><strong>90 minut<\/strong><span>+40%<\/span><\/button><br \/>\n                <button class=\"builder__seg\" data-mult=\"1.75\" data-id=\"120\"><strong>120 minut<\/strong><span>+75%<\/span><\/button>\n              <\/div>\n<\/p><\/div>\n<div class=\"builder__block\">\n<div class=\"builder__block-head\"><span class=\"builder__block-label\">Grupa<\/span><\/p>\n<h3>Ile os\u00f3b bierze udzia\u0142?<\/h3>\n<\/div>\n<div class=\"builder__slider\">\n                <input type=\"range\" min=\"6\" max=\"20\" value=\"12\" id=\"lpb-players\"><\/p>\n<div class=\"builder__slider-val\"><strong id=\"lpb-players-val\">12<\/strong><span>os\u00f3b<\/span><\/div>\n<\/p><\/div>\n<div class=\"builder__slider-meta\"><span>6<\/span><span>10<\/span><span>14<\/span><span>18<\/span><span>20<\/span><\/div>\n<\/p><\/div>\n<div class=\"builder__block\">\n<div class=\"builder__block-head\"><span class=\"builder__block-label\">Dodatki<\/span><\/p>\n<h3>Rozszerz atrakcjami<\/h3>\n<\/div>\n<div class=\"builder__addons\" id=\"lpb-addons\"><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<aside class=\"builder__summary\">\n<div class=\"builder__summary-sticky\">\n<div class=\"builder__summary-head\"><span class=\"eyebrow eyebrow--dark\">Twoja wycena<\/span><\/p>\n<h3>Podsumowanie<\/h3>\n<\/div>\n<div class=\"builder__summary-lines\" id=\"lpb-summary-lines\"><\/div>\n<div class=\"builder__summary-total\">\n<div><span>Razem<\/span><strong id=\"lpb-total\">650 z\u0142<\/strong><\/div>\n<div class=\"builder__summary-pp\"><span id=\"lpb-pp\">\u2248 54 z\u0142 \/ os.<\/span><span id=\"lpb-pp-meta\">przy 12 osobach<\/span><\/div>\n<\/p><\/div>\n<p>              <a href=\"#hero-form\" class=\"btn btn--primary btn--block\"><br \/>\n                Zarezerwuj ten pakiet<br \/>\n                <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><polyline points=\"12 5 19 12 12 19\"\/><\/svg><br \/>\n              <\/a><br \/>\n              <button class=\"builder__reset\" id=\"lpb-reset\">Wyczy\u015b\u0107 wyb\u00f3r<\/button><\/p>\n<p class=\"builder__summary-fine\">Cena orientacyjna. Dla grup 20+ os\u00f3b, event\u00f3w poza Warszaw\u0105 albo d\u0142u\u017cszych ni\u017c 2h \u2014 wysy\u0142amy indywidualn\u0105 wycen\u0119.<\/p>\n<\/p><\/div>\n<\/aside><\/div>\n<\/p><\/div>\n<\/section>\n<p>    <!-- FAQ --><\/p>\n<section class=\"faq\" id=\"faq\">\n<div class=\"container\">\n<div class=\"faq__grid\">\n<div class=\"faq__head\">\n            <span class=\"eyebrow\">05 \u2014 FAQ<\/span><\/p>\n<h2 class=\"section-title\">Co chcesz wiedzie\u0107,<br \/><span class=\"section-title__accent\">zanim klikniesz rezerwacj\u0119?<\/span><\/h2>\n<p class=\"section-sub\">9 pyta\u0144, kt\u00f3re padaj\u0105 najcz\u0119\u015bciej. Je\u015bli czego\u015b brakuje \u2014 napisz w formularzu albo zadzwo\u0144.<\/p>\n<div class=\"faq__cta\">\n              <a href=\"tel:+48506432150\" class=\"btn btn--ghost\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z\"\/><\/svg> 506 432 150<\/a><br \/>\n              <a href=\"#hero-form\" class=\"btn btn--primary\">Napisz do nas<\/a>\n            <\/div>\n<\/p><\/div>\n<div class=\"faq__list\" id=\"lpb-faq\"><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/section>\n<p>    <!-- CTA BAND --><\/p>\n<section class=\"cta-band\">\n<div class=\"cta-band__marquee\" aria-hidden=\"true\">\n<div class=\"cta-band__track\" id=\"lpb-marquee\"><\/div>\n<\/p><\/div>\n<div class=\"container cta-band__inner\">\n<div>\n<h2 class=\"cta-band__title\">Masz grup\u0119? Mamy kule.<\/h2>\n<p class=\"cta-band__sub\">Sprawd\u017a termin. Bez przedp\u0142aty, bez zobowi\u0105za\u0144.<\/p>\n<\/p><\/div>\n<div class=\"cta-band__actions\">\n          <a href=\"#hero-form\" class=\"btn btn--primary btn--lg\">Zarezerwuj termin<\/a><br \/>\n          <a href=\"tel:+48506432150\" class=\"btn btn--ghost btn--lg\">Zadzwo\u0144<\/a>\n        <\/div>\n<\/p><\/div>\n<\/section>\n<p>  <\/main><\/p>\n<p>  <!-- FOOTER --><\/p>\n<footer class=\"footer\">\n<div class=\"container footer__inner\">\n<div class=\"footer__brand\">\n<div class=\"nav__logo\">\n          <span class=\"nav__logo-mark\"><span class=\"nav__logo-ball nav__logo-ball--a\"><\/span><span class=\"nav__logo-ball nav__logo-ball--b\"><\/span><\/span><br \/>\n          <span class=\"nav__logo-text\">LOOPYBALL<span class=\"nav__logo-dot\">.pl<\/span><\/span>\n        <\/div>\n<p>Bubble football, archery tag i foot darts na wieczory kawalerskie, integracje firmowe i eventy w Warszawie. Od 2019 roku.<\/p>\n<div class=\"footer__socials\"><a href=\"#\" aria-label=\"Instagram\">IG<\/a><a href=\"#\" aria-label=\"Facebook\">FB<\/a><a href=\"#\" aria-label=\"TikTok\">TT<\/a><\/div>\n<\/p><\/div>\n<div class=\"footer__col\">\n<h4>Oferta<\/h4>\n<p><a href=\"#o-nas\">Bubble Football<\/a><a href=\"#pakiet\">Archery Tag<\/a><a href=\"#pakiet\">Foot Darts<\/a><a href=\"#pakiet\">Alkogogle<\/a><\/div>\n<div class=\"footer__col\">\n<h4>Firma<\/h4>\n<p><a href=\"#o-nas\">O nas<\/a><a href=\"#galeria\">Galeria<\/a><a href=\"#faq\">FAQ<\/a><a href=\"#hero-form\">Kontakt<\/a><\/div>\n<div class=\"footer__col\">\n<h4>Kontakt<\/h4>\n<p><a href=\"tel:+48506432150\">+48 506 432 150<\/a><a href=\"mailto:hello@loopyball.pl\">hello@loopyball.pl<\/a><span>Warszawa \u00b7 ca\u0142a Polska na zapytanie<\/span><span>pn\u2013nd 9:00\u201321:00<\/span><\/div>\n<\/p><\/div>\n<div class=\"footer__bottom\">\n<div class=\"container footer__bottom-inner\">\n        <span>\u00a9 2026 Loopyball sp. z o.o.<\/span><\/p>\n<div><a href=\"#\">Polityka prywatno\u015bci<\/a><a href=\"#\">Regulamin<\/a><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/footer>\n<p>  <!-- LIGHTBOX --><\/p>\n<div class=\"lightbox\" id=\"lpb-lightbox\" hidden>\n    <button class=\"lightbox__close\" id=\"lpb-lb-close\" aria-label=\"Zamknij\">\u00d7<\/button><br \/>\n    <button class=\"lightbox__nav lightbox__nav--prev\" id=\"lpb-lb-prev\" aria-label=\"Poprzednie\">\u2039<\/button><br \/>\n    <img decoding=\"async\" id=\"lpb-lb-img\" src=\"\" alt=\"\"><br \/>\n    <button class=\"lightbox__nav lightbox__nav--next\" id=\"lpb-lb-next\" aria-label=\"Nast\u0119pne\">\u203a<\/button><br \/>\n    <span class=\"lightbox__caption\" id=\"lpb-lb-cap\"><\/span>\n  <\/div>\n<\/div>\n<p><script>\n(function(){\n  \/\/ Set palette\/typography on <html> so styles.css :root[data-*] selectors match\n  document.documentElement.setAttribute('data-palette', 'bold');\n  document.documentElement.setAttribute('data-typography', 'archivo');<\/p>\n<p>  \/\/ ---------- DATA ----------\n  const PHOTOS = [\n    { src:'https:\/\/images.unsplash.com\/photo-1517649763962-0c623066013b?w=1200&q=80&auto=format&fit=crop', tag:'Kawalerski \u00b7 Praga' },\n    { src:'https:\/\/images.unsplash.com\/photo-1526676037777-05a232554f77?w=1200&q=80&auto=format&fit=crop', tag:'Integracja \u00b7 Mokot\u00f3w' },\n    { src:'https:\/\/images.unsplash.com\/photo-1486286701208-1d58e9338013?w=1200&q=80&auto=format&fit=crop', tag:'Event firmowy' },\n    { src:'https:\/\/images.unsplash.com\/photo-1508098682722-e99c43a406b2?w=1200&q=80&auto=format&fit=crop', tag:'Last Man Standing' },\n    { src:'https:\/\/images.unsplash.com\/photo-1551958219-acbc608c6377?w=1200&q=80&auto=format&fit=crop', tag:'Piknik \u00b7 Pole Mokotowskie' },\n    { src:'https:\/\/images.unsplash.com\/photo-1579952363873-27f3bade9f55?w=1200&q=80&auto=format&fit=crop', tag:'Archery Tag' },\n    { src:'https:\/\/images.unsplash.com\/photo-1431324155629-1a6deb1dec8d?w=1200&q=80&auto=format&fit=crop', tag:'Urodziny 30-tki' },\n    { src:'https:\/\/images.unsplash.com\/photo-1556056504-5c7696c4c28d?w=1200&q=80&auto=format&fit=crop', tag:'Foot Darts' },\n  ];\n  const GAMES = [\n    { id:'lms', num:'01', name:'Last Man Standing', tagline:'Ka\u017cdy przeciwko ka\u017cdemu.', desc:'Wszyscy wchodz\u0105 do k\u00f3\u0142 na raz. Zderzasz si\u0119, wybijasz innych z r\u00f3wnowagi. Kto pierwszy upadnie \u2014 odpada. Ostatni stoj\u0105cy wygrywa.', players:'6\u201316', duration:'5\u201310 min', intensity:3, img:'https:\/\/images.unsplash.com\/photo-1517649763962-0c623066013b?w=900&q=80&auto=format&fit=crop', emoji:'\ud83d\udc4a' },\n    { id:'zbijak', num:'02', name:'Zbijak', tagline:'Dwie dru\u017cyny. Jedna pi\u0142ka. Zero lito\u015bci.', desc:'Klasyczny zbijak, tylko \u017ce w kulach. Trafiasz rywala pi\u0142k\u0105 \u2014 wypada z gry. Wybijesz wszystkich z dru\u017cyny przeciwnej \u2014 wygrywasz rund\u0119.', players:'8\u201316', duration:'10\u201315 min', intensity:2, img:'https:\/\/images.unsplash.com\/photo-1486286701208-1d58e9338013?w=900&q=80&auto=format&fit=crop', emoji:'\ud83c\udfaf' },\n    { id:'vip', num:'03', name:'Obrona VIP-a', tagline:'Jeden kr\u00f3l. Ca\u0142a dru\u017cyna rozb\u00f3jnik\u00f3w.', desc:'W \u015brodku stoi VIP (jubilat, szef, pan m\u0142ody). Reszta grupy dzieli si\u0119 na ochron\u0119 i napastnik\u00f3w. Zadanie ochrony: utrzyma\u0107 VIP-a na nogach. Napastnik\u00f3w: przewr\u00f3ci\u0107.', players:'10\u201316', duration:'8\u201312 min', intensity:3, img:'https:\/\/images.unsplash.com\/photo-1526676037777-05a232554f77?w=900&q=80&auto=format&fit=crop', emoji:'\ud83d\udc51' },\n  ];\n  const ADDONS = [\n    { id:'archery', name:'Archery Tag', desc:'\u0141uki z mi\u0119kkimi strza\u0142ami + tarcze + maski. Drugi stanowisko obok bubble.', price:450, unit:'\/ godz.', emoji:'\ud83c\udff9' },\n    { id:'footdart', name:'Foot Darts', desc:'Gigantyczna tarcza dmuchana 4\u00d74 m. Rzucasz pi\u0142k\u0105 z rzepem. Zabawa na 15 minut albo 2 godziny.', price:390, unit:'\/ godz.', emoji:'\ud83c\udfaf' },\n    { id:'goggles', name:'Alkogogle', desc:'3 pary gogli symuluj\u0105cych stan po 0.5, 1.0 i 1.5 promila + tor przeszk\u00f3d. Ulubiona atrakcja na kawalerski.', price:290, unit:'\/ event', emoji:'\ud83e\udd7d' },\n    { id:'gopro', name:'Kamera GoPro + monta\u017c', desc:'Nagramy event, zmontujemy 60-sekundowy teaser i wy\u015blemy w 48h.', price:290, unit:'\/ event', emoji:'\ud83c\udfa5' },\n    { id:'host', name:'Dodatkowy prowadz\u0105cy', desc:'Przy grupach 20+ os\u00f3b albo r\u00f3wnoleg\u0142ych atrakcjach. Drugi animator utrzymuje tempo.', price:250, unit:'\/ event', emoji:'\ud83c\udfa4' },\n  ];\n  const FAQS = [\n    { q:'Dla ilu os\u00f3b jest bubble football?', a:'Minimum 6 os\u00f3b, maksymalnie 16 jednocze\u015bnie w ramach jednego pakietu. Dla wi\u0119kszych grup (20+) uruchamiamy drugi komplet kul \u2014 daj zna\u0107 w formularzu, zrobimy indywidualn\u0105 wycen\u0119.' },\n    { q:'Gdzie w Warszawie gramy?', a:'Gdzie tylko mo\u017cna roz\u0142o\u017cy\u0107 kule: Pole Mokotowskie, Park Skaryszewski, Park Br\u00f3dnowski, pla\u017ca Poniat\u00f3wka, hale sportowe, ogrody restauracji. Dojazd w obr\u0119bie Warszawy \u2014 gratis. Poza Warszaw\u0119 \u2014 2 z\u0142\/km.' },\n    { q:'Czy trzeba mie\u0107 w\u0142asne boisko?', a:'Nie. Ustawiamy bramki dmuchane i wyznaczamy boisko na dowolnej trawiastej lub twardej przestrzeni min. 15\u00d725 m. W razie w\u0105tpliwo\u015bci \u2014 przyjedziemy obejrze\u0107 miejsce przed eventem.' },\n    { q:'Co je\u015bli b\u0119dzie pada\u0107?', a:'Gramy w lekkim deszczu bez problemu (kule s\u0105 wodoodporne). Przy ulewie lub burzy \u2014 przek\u0142adamy termin bez op\u0142at. Na wypadek kapry\u015bnej pogody proponujemy te\u017c hale partnerskie w cenie +200 z\u0142.' },\n    { q:'Jak wygl\u0105da p\u0142atno\u015b\u0107?', a:'Bez przedp\u0142aty. Po evencie wystawiamy faktur\u0119 lub bierzemy got\u00f3wk\u0105 na miejscu. Rezerwacja terminu po telefonicznym potwierdzeniu z naszej strony.' },\n    { q:'Czy mo\u017cna gra\u0107 pod wp\u0142ywem alkoholu?', a:'Na luzie \u2014 tak, ale nie na totalnej bani. Wiecz\u00f3r kawalerski z jednym piwem na g\u0142ow\u0119? Jasne. Grupa po 5 kolejkach? Dla bezpiecze\u0144stwa odmawiamy. Alkogogle to \u015bwietna alternatywa, \u017ceby poczu\u0107 si\u0119 jak po promilu \u2014 bez ryzyka.' },\n    { q:'Ile czasu trwa event?', a:'Standardowo 60 minut rozgrywki + 15 minut na rozstawienie i pakowanie. Wi\u0119kszo\u015b\u0107 grup zamawia 90 minut \u2014 to optymalny czas, \u017ceby ka\u017cdy zagra\u0142 we wszystkie 3 gry i jeszcze mia\u0142 si\u0142\u0119 si\u0119 po\u015bmia\u0107.' },\n    { q:'Czy jest jaka\u015b granica wieku?', a:'Od 14 lat (mniejsze rozmiary kul dla m\u0142odzie\u017cy). Dla dzieci 8\u201313 lat mamy mniejsze kule dzieci\u0119ce \u2014 to osobny pakiet, napisz w formularzu.' },\n    { q:'Co dostaj\u0119 w standardowym pakiecie?', a:'10 kul pneumatycznych w 2 rozmiarach, bramki dmuchane, pi\u0142ki, wyznaczenie boiska, prowadz\u0105cego przez ca\u0142\u0105 rozgrywk\u0119, 3 gry do wyboru i dojazd w Warszawie. Nie doliczamy VAT-u \u2014 ceny s\u0105 ko\u0144cowe.' },\n  ];<\/p>\n<p>  const $ = s => document.querySelector(s);\n  const esc = s => String(s).replace(\/[&<>\"']\/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','\"':'&quot;',\"'\":'&#39;'}[c]));<\/p>\n<p>  \/\/ ---------- NAV ----------\n  const nav = $('#lpb-nav'), burger = $('#lpb-burger'), mobile = $('#lpb-mobile');\n  window.addEventListener('scroll', () => nav.classList.toggle('nav--scrolled', window.scrollY > 40), { passive: true });\n  burger.addEventListener('click', () => { const open = mobile.hasAttribute('hidden'); if(open) mobile.removeAttribute('hidden'); else mobile.setAttribute('hidden',''); });\n  mobile.querySelectorAll('a').forEach(a => a.addEventListener('click', () => mobile.setAttribute('hidden','')));<\/p>\n<p>  \/\/ ---------- PARALLAX BALLS ----------\n  const balls = document.querySelectorAll('#lpb-balls [data-speed]');\n  let raf; (function loop(){ const y = window.scrollY; balls.forEach(b => { const s = parseFloat(b.dataset.speed), r = parseFloat(b.dataset.rot||0); b.style.transform = `translate3d(0,${y*s}px,0) rotate(${y*r}deg)`; }); raf = requestAnimationFrame(loop); })();<\/p>\n<p>  \/\/ ---------- GALLERY ----------\n  $('#lpb-gallery').innerHTML = PHOTOS.map((p,i)=>`<button class=\"gallery__item gallery__item--${(i%4)+1}\" data-i=\"${i}\" style=\"background-image:url(${p.src})\" aria-label=\"Otw\u00f3rz zdj\u0119cie: ${esc(p.tag)}\"><span class=\"gallery__tag\">${esc(p.tag)}<\/span><\/button>`).join('');\n  const lb = $('#lpb-lightbox'), lbImg = $('#lpb-lb-img'), lbCap = $('#lpb-lb-cap');\n  let lbIdx = -1;\n  const openLb = i => { lbIdx = i; lbImg.src = PHOTOS[i].src; lbImg.alt = PHOTOS[i].tag; lbCap.textContent = `${PHOTOS[i].tag} \u00b7 ${i+1} \/ ${PHOTOS.length}`; lb.removeAttribute('hidden'); };\n  const closeLb = () => { lb.setAttribute('hidden',''); lbIdx = -1; };\n  document.querySelectorAll('#lpb-gallery .gallery__item').forEach(b => b.addEventListener('click', () => openLb(parseInt(b.dataset.i))));\n  $('#lpb-lb-close').addEventListener('click', closeLb);\n  lb.addEventListener('click', e => { if(e.target === lb) closeLb(); });\n  $('#lpb-lb-prev').addEventListener('click', e => { e.stopPropagation(); openLb((lbIdx-1+PHOTOS.length)%PHOTOS.length); });\n  $('#lpb-lb-next').addEventListener('click', e => { e.stopPropagation(); openLb((lbIdx+1)%PHOTOS.length); });\n  document.addEventListener('keydown', e => { if(lbIdx<0) return; if(e.key==='Escape') closeLb(); if(e.key==='ArrowRight') openLb((lbIdx+1)%PHOTOS.length); if(e.key==='ArrowLeft') openLb((lbIdx-1+PHOTOS.length)%PHOTOS.length); });\n\n  \/\/ ---------- GAMES ----------\n  $('#lpb-games').innerHTML = GAMES.map((g,i)=>`<\/p>\n<article class=\"game-card${i===0?' game-card--active':''}\" data-id=\"${g.id}\" tabindex=\"0\">\n<div class=\"game-card__img\" style=\"background-image:url(${g.img})\"><span class=\"game-card__num\">${g.num}<\/span><span class=\"game-card__emoji\">${g.emoji}<\/span><\/div>\n<div class=\"game-card__body\">\n<h3 class=\"game-card__name\">${esc(g.name)}<\/h3>\n<p class=\"game-card__tag\">${esc(g.tagline)}<\/p>\n<p class=\"game-card__desc\">${esc(g.desc)}<\/p>\n<div class=\"game-card__meta\">\n<div><span>Graczy<\/span><strong>${g.players}<\/strong><\/div>\n<div><span>Runda<\/span><strong>${g.duration}<\/strong><\/div>\n<div><span>Intensywno\u015b\u0107<\/span><\/p>\n<div class=\"intensity\">${[1,2,3].map(n=>`<span class=\"intensity__dot${n<=g.intensity?' intensity__dot--on':''}\"><\/span>`).join('')}<\/div>\n<\/div><\/div>\n<\/p><\/div>\n<\/article>\n<p>`).join('');\n  document.querySelectorAll('#lpb-games .game-card').forEach(c => {\n    const act = () => { document.querySelectorAll('#lpb-games .game-card').forEach(x => x.classList.remove('game-card--active')); c.classList.add('game-card--active'); };\n    c.addEventListener('mouseenter', act); c.addEventListener('focus', act);\n  });<\/p>\n<p>  \/\/ ---------- FAQ ----------\n  $('#lpb-faq').innerHTML = FAQS.map((f,i)=>`<\/p>\n<div class=\"faq-item${i===0?' faq-item--open':''}\" data-i=\"${i}\">\n      <button class=\"faq-item__q\" type=\"button\">\n        <span class=\"faq-item__num\">${String(i+1).padStart(2,'0')}<\/span>\n        <span class=\"faq-item__text\">${esc(f.q)}<\/span>\n        <span class=\"faq-item__icon\" aria-hidden=\"true\"><span><\/span><span><\/span><\/span>\n      <\/button><\/p>\n<div class=\"faq-item__a\">\n<div class=\"faq-item__a-inner\">\n<p>${esc(f.a)}<\/p>\n<\/div>\n<\/div><\/div>\n<p>`).join('');\n  document.querySelectorAll('#lpb-faq .faq-item').forEach(it => {\n    it.querySelector('.faq-item__q').addEventListener('click', () => {\n      const wasOpen = it.classList.contains('faq-item--open');\n      document.querySelectorAll('#lpb-faq .faq-item--open').forEach(x => x.classList.remove('faq-item--open'));\n      if(!wasOpen) it.classList.add('faq-item--open');\n    });\n  });<\/p>\n<p>  \/\/ ---------- BUILDER ----------\n  const BASE = 650;\n  let mult = 1, players = 12, selected = {};\n  $('#lpb-addons').innerHTML = ADDONS.map(a=>`\n    <button class=\"addon\" data-id=\"${a.id}\" type=\"button\"><\/p>\n<div class=\"addon__emoji\">${a.emoji}<\/div>\n<div class=\"addon__body\">\n<h4>${esc(a.name)}<\/h4>\n<p>${esc(a.desc)}<\/p>\n<\/div>\n<div class=\"addon__price\"><strong>+${a.price} z\u0142<\/strong><span>${a.unit}<\/span><\/div>\n<div class=\"addon__check\" aria-hidden=\"true\"><svg viewBox=\"0 0 24 24\" width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg><\/div>\n<p>    <\/button>`).join('');<\/p>\n<p>  function recompute(){\n    const basePrice = Math.round(BASE * mult);\n    const addonsTotal = ADDONS.reduce((s,a)=> s + (selected[a.id] ? a.price : 0), 0);\n    const total = basePrice + addonsTotal;\n    const pp = Math.round(total \/ players);\n    $('#lpb-base-price').textContent = basePrice + ' z\u0142';\n    const dlabel = document.querySelector('#lpb-duration .builder__seg--on strong').textContent;\n    let lines = `<\/p>\n<div class=\"line\"><span>Bubble Football \u00b7 ${dlabel}<\/span><strong>${basePrice} z\u0142<\/strong><\/div>\n<p>`;\n    const chosen = ADDONS.filter(a => selected[a.id]);\n    chosen.forEach(a => { lines += `<\/p>\n<div class=\"line\"><span>${a.emoji} ${esc(a.name)}<\/span><strong>+${a.price} z\u0142<\/strong><\/div>\n<p>`; });\n    if(chosen.length === 0) lines += `<\/p>\n<div class=\"line line--hint\"><span>Brak dodatk\u00f3w \u2014 baza wystarczy.<\/span><\/div>\n<p>`;\n    $('#lpb-summary-lines').innerHTML = lines;\n    $('#lpb-total').textContent = total.toLocaleString('pl-PL') + ' z\u0142';\n    $('#lpb-pp').textContent = `\u2248 ${pp} z\u0142 \/ os.`;\n    $('#lpb-pp-meta').textContent = `przy ${players} osobach`;\n  }<\/p>\n<p>  document.querySelectorAll('#lpb-duration .builder__seg').forEach(b => b.addEventListener('click', () => {\n    document.querySelectorAll('#lpb-duration .builder__seg').forEach(x => x.classList.remove('builder__seg--on'));\n    b.classList.add('builder__seg--on');\n    mult = parseFloat(b.dataset.mult);\n    recompute();\n  }));\n  $('#lpb-players').addEventListener('input', e => { players = parseInt(e.target.value); $('#lpb-players-val').textContent = players; recompute(); });\n  document.querySelectorAll('#lpb-addons .addon').forEach(b => b.addEventListener('click', () => {\n    const id = b.dataset.id; selected[id] = !selected[id]; b.classList.toggle('addon--on', selected[id]); recompute();\n  }));\n  $('#lpb-reset').addEventListener('click', () => {\n    selected = {}; mult = 1; players = 12;\n    document.querySelectorAll('#lpb-addons .addon--on').forEach(x => x.classList.remove('addon--on'));\n    document.querySelectorAll('#lpb-duration .builder__seg').forEach((x,i) => x.classList.toggle('builder__seg--on', i===0));\n    $('#lpb-players').value = 12; $('#lpb-players-val').textContent = 12;\n    recompute();\n  });\n  recompute();<\/p>\n<p>  \/\/ ---------- COUNTERS ----------\n  const animateCounter = el => {\n    const target = parseFloat(el.dataset.target), suffix = el.dataset.suffix || '';\n    const isFloat = String(target).includes('.');\n    const dur = 1600, t0 = performance.now();\n    const num = el.querySelector('.counter__num');\n    const tick = t => {\n      const p = Math.min(1, (t-t0)\/dur), eased = 1 - Math.pow(1-p, 3);\n      const v = isFloat ? (target*eased).toFixed(1) : Math.round(target*eased).toLocaleString('pl-PL');\n      num.innerHTML = `${v}<span class=\"counter__suffix\">${suffix}<\/span>`;\n      if(p<1) requestAnimationFrame(tick);\n    };\n    requestAnimationFrame(tick);\n  };\n  const cobs = new IntersectionObserver(entries => entries.forEach(e => { if(e.isIntersecting){ animateCounter(e.target); cobs.unobserve(e.target); } }), { threshold: 0.4 });\n  document.querySelectorAll('#lpb-counters .counter').forEach(c => cobs.observe(c));<\/p>\n<p>  \/\/ ---------- HERO FORM ----------\n  const dateInput = document.querySelector('#hero-form input[name=\"date\"]');\n  if(dateInput) dateInput.min = new Date().toISOString().split('T')[0];\n  $('#hero-form').addEventListener('submit', e => {\n    e.preventDefault();\n    const f = e.target;\n    const data = { name: f.name.value.trim(), phone: f.phone.value.trim(), email: f.email.value.trim(), date: f.date.value };\n    const errs = {\n      name: data.name.length < 2,\n      phone: !\/^[+\\d\\s-]{9,}$\/.test(data.phone),\n      email: !\/^\\S+@\\S+\\.\\S+$\/.test(data.email),\n      date: !data.date,\n    };\n    f.querySelectorAll('.field').forEach(l => l.classList.remove('field--err'));\n    Object.entries(errs).forEach(([k,v]) => { if(v) f.querySelector(`[name=\"${k}\"]`).closest('.field').classList.add('field--err'); });\n    if(Object.values(errs).some(Boolean)) return;\n    const wrap = f.parentElement;\n    const date = new Date(data.date).toLocaleDateString('pl-PL', { day:'numeric', month:'long', year:'numeric' });\n    wrap.innerHTML = `<\/p>\n<div class=\"hero-form hero-form--success\">\n<div class=\"hero-form__check\"><svg viewBox=\"0 0 24 24\" width=\"40\" height=\"40\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg><\/div>\n<h3>Dzi\u0119ki, ${esc(data.name.split(' ')[0])}!<\/h3>\n<p>Odezwiemy si\u0119 w ci\u0105gu <strong>60 minut<\/strong> w godzinach pracy, \u017ceby dogada\u0107 szczeg\u00f3\u0142y twojego eventu na <strong>${esc(date)}<\/strong>.<\/p>\n<\/p><\/div>\n<p>`;\n  });<\/p>\n<p>  \/\/ ---------- MARQUEE ----------\n  $('#lpb-marquee').innerHTML = Array.from({length:4}).map(()=>`<span>ZAREZERWUJ TERMIN<\/span><span class=\"cta-band__ball\">\u25cf<\/span><span>GRAMY W CA\u0141EJ WARSZAWIE<\/span><span class=\"cta-band__ball\">\u25cf<\/span><span>ODPOWIED\u0179 W 60 MINUT<\/span><span class=\"cta-band__ball\">\u25cf<\/span>`).join('');\n})();\n<\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>LOOPYBALL.pl O bubble football Gry Galeria Zbuduj pakiet FAQ 506 432 150 Zarezerwuj O bubble football Gry Galeria Zbuduj pakiet FAQ Zarezerwuj termin #1 w Warszawie \u00b7 od 2019 BUBBLE FOOTBALL WARSZAWA Wynajem kul pneumatycznych z prowadz\u0105cym. Wieczory kawalerskie, integracje firmowe, pikniki rodzinne \u2014 dojedziemy w dowolne miejsce w stolicy z pe\u0142nym sprz\u0119tem. 3 gry &#8230; <a title=\"Loopyball \u2014 Home\" class=\"read-more\" href=\"https:\/\/www.loopyball.pl\/?page_id=6\" aria-label=\"Dowiedz si\u0119 wi\u0119cej o Loopyball \u2014 Home\">Dowiedz si\u0119 wi\u0119cej<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-6","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/www.loopyball.pl\/index.php?rest_route=\/wp\/v2\/pages\/6","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.loopyball.pl\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.loopyball.pl\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.loopyball.pl\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.loopyball.pl\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=6"}],"version-history":[{"count":1,"href":"https:\/\/www.loopyball.pl\/index.php?rest_route=\/wp\/v2\/pages\/6\/revisions"}],"predecessor-version":[{"id":7,"href":"https:\/\/www.loopyball.pl\/index.php?rest_route=\/wp\/v2\/pages\/6\/revisions\/7"}],"wp:attachment":[{"href":"https:\/\/www.loopyball.pl\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=6"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}