/* Branding 2.0 – dedykowane style (neon green + cyan, brutalizm Matrix) */

.br-wrap {
  position: relative;
  z-index: 2;
}

.br-hero {
  position: relative;
  overflow: hidden;
  background: #07080d;
}

/* Lava-lamp: powolnie płynące plamy kolorów (pod kratką) */
.br-hero::before {
  content: '';
  position: absolute;
  inset: -30%;
  z-index: 0;
  background:
    radial-gradient(ellipse 90% 60% at 18% 28%, rgba(0, 245, 255, 0.28), transparent 48%),
    radial-gradient(ellipse 70% 80% at 82% 72%, rgba(0, 255, 136, 0.22), transparent 48%),
    radial-gradient(ellipse 80% 70% at 52% 50%, rgba(139, 92, 246, 0.16), transparent 52%);
  background-size: 120% 120%;
  animation: br-lava 14s cubic-bezier(.36,.07,.19,.97) alternate infinite;
  pointer-events: none;
  filter: saturate(1.15) contrast(1.05);
}

@keyframes br-lava {
  0% { transform: translate(0, 0) scale(1); opacity: 1; }
  20% { transform: translate(6%, -6%) scale(1.08); opacity: 0.98; }
  40% { transform: translate(-8%, 5%) scale(0.94); opacity: 0.95; }
  60% { transform: translate(5%, 8%) scale(1.03); opacity: 0.98; }
  80% { transform: translate(-6%, -4%) scale(1.02); opacity: 0.96; }
  100% { transform: translate(0, 0) scale(1); opacity: 1; }
}

/* Dodatkowa warstwa kolorów – drugie, wolniejsze przepływy dla bogatszego efektu */
.br-hero::after {
  content: '';
  position: absolute;
  inset: -40%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 40% at 10% 70%, rgba(0, 200, 255, 0.14), transparent 48%),
    radial-gradient(ellipse 50% 60% at 90% 30%, rgba(0, 220, 120, 0.12), transparent 48%),
    radial-gradient(ellipse 70% 50% at 50% 20%, rgba(140, 80, 230, 0.10), transparent 52%);
  background-size: 140% 140%;
  mix-blend-mode: screen;
  filter: blur(22px) saturate(1.2) contrast(1.02);
  opacity: 0.9;
  animation: br-lava-2 22s ease-in-out infinite;
}

@keyframes br-lava-2 {
  0% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(-6%, 4%) scale(1.03); }
  50% { transform: translate(8%, -6%) scale(0.98); }
  75% { transform: translate(-4%, 8%) scale(1.02); }
  100% { transform: translate(0, 0) scale(1); }
}

.br-hero--glitch {
  animation: br-shake 260ms steps(1, end) both;
}

.br-hero--glitch::after {
  opacity: 0.55;
  animation: br-rgb-split 260ms steps(1, end) both;
}

@keyframes br-shake {
  0% { transform: translate(0, 0); }
  20% { transform: translate(-2px, 1px); }
  40% { transform: translate(2px, -1px); }
  60% { transform: translate(-1px, -2px); }
  80% { transform: translate(1px, 2px); }
  100% { transform: translate(0, 0); }
}

@keyframes br-rgb-split {
  0% { transform: translateX(0); filter: blur(0px); }
  35% { transform: translateX(6px); filter: blur(0.3px); }
  70% { transform: translateX(-4px); filter: blur(0.15px); }
  100% { transform: translateX(0); filter: blur(0px); }
}

.br-hero.szablon-fullscreen {
  padding-left: 0;
  padding-right: 0;
}

.br-particle-forge {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0.95;
}

/* Kratownica – statyczna, kolory płyną pod spodem (lava) */
.br-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.75;
  mix-blend-mode: screen;
  background-image:
    repeating-linear-gradient(
      90deg,
      rgba(0, 255, 136, 0.06) 0px,
      rgba(0, 255, 136, 0.06) 2px,
      transparent 2px,
      transparent 16px
    ),
    repeating-linear-gradient(
      0deg,
      rgba(0, 245, 255, 0.05) 0px,
      rgba(0, 245, 255, 0.05) 2px,
      transparent 2px,
      transparent 20px
    ),
    linear-gradient(180deg, rgba(7, 8, 13, 0.5) 0%, rgba(7, 8, 13, 0.08) 50%, rgba(7, 8, 13, 0.75) 100%);
  background-size: 240px 160px, 180px 180px, 100% 100%;
}

.br-hero-content {
  position: relative;
  z-index: 2;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.br-hero-kicker {
  font-family: var(--font-display);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-size: 0.78rem;
  color: rgba(0, 245, 255, 0.88);
  opacity: 0.95;
  margin-bottom: 0.95rem;
  text-shadow: 0 0 12px rgba(0, 245, 255, 0.22);
}

.br-h1 {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-size: clamp(2.2rem, 6.4vw, 4.5rem);
  line-height: 1.06;
  margin: 0 0 0.85rem;
  color: #ffffff;
  text-shadow:
    0 0 18px rgba(0, 245, 255, 0.34),
    0 0 34px rgba(0, 255, 136, 0.20);
}

.br-hero-lead {
  max-width: 980px;
  margin: 0 auto 1.1rem;
  font-size: clamp(1.05rem, 2.8vw, 1.35rem);
  line-height: 1.55;
  color: rgba(203, 203, 203, 0.95);
}

.br-hero-micro {
  max-width: 860px;
  margin: 1rem auto 0;
  font-size: 0.98rem;
  line-height: 1.65;
  color: rgba(203, 203, 203, 0.80);
}

.br-cta-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  margin-top: 1.25rem;
  flex-wrap: wrap;
}

.br-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.95rem 1.15rem;
  border-radius: 12px;
  text-decoration: none;
  font-family: var(--font-display);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-weight: 700;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
  will-change: transform;
}

.br-cta--primary {
  color: rgba(255, 255, 255, 0.98);
  background: linear-gradient(90deg, rgba(0, 255, 136, 0.14), rgba(0, 245, 255, 0.10));
  border: 1px solid rgba(0, 245, 255, 0.22);
  box-shadow: 0 0 0 1px rgba(0, 255, 136, 0.10) inset, 0 0 22px rgba(0, 245, 255, 0.12);
}

.br-cta--primary:hover,
.br-cta--primary:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(0, 255, 136, 0.35);
  box-shadow: 0 0 0 1px rgba(0, 255, 136, 0.12) inset, 0 0 28px rgba(0, 255, 136, 0.18);
  outline: none;
}

.br-cta-prefix {
  color: rgba(0, 255, 136, 0.95);
  text-shadow: 0 0 14px rgba(0, 255, 136, 0.35);
}

.br-cta-cursor {
  color: rgba(0, 245, 255, 0.92);
  text-shadow: 0 0 14px rgba(0, 245, 255, 0.30);
  animation: br-cursor-blink 1.05s steps(1, end) infinite;
}

@keyframes br-cursor-blink {
  0%, 45% { opacity: 1; }
  46%, 100% { opacity: 0; }
}

.br-cta--ghost {
  color: rgba(0, 245, 255, 0.90);
  background: rgba(0, 0, 0, 0.10);
  border: 1px solid rgba(0, 245, 255, 0.16);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35) inset;
}

.br-cta--ghost:hover,
.br-cta--ghost:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(0, 245, 255, 0.28);
  box-shadow: 0 0 0 1px rgba(0, 245, 255, 0.10) inset, 0 0 20px rgba(0, 245, 255, 0.10);
  outline: none;
}

.br-section {
  position: relative;
}

.br-section-inner {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 2rem;
  padding-right: 2rem;
}

.br-h2 {
  font-family: var(--font-display);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: clamp(1.35rem, 3.2vw, 2.1rem);
  line-height: 1.2;
  margin: 0 0 1rem;
  color: #ffffff;
  text-shadow: 0 0 14px rgba(0, 245, 255, 0.18);
}

.br-h3 {
  font-family: var(--font-display);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-size: 1.05rem;
  margin: 0 0 0.75rem;
  color: rgba(255, 255, 255, 0.95);
}

.br-lead {
  font-size: 1.1rem;
  line-height: 1.65;
  color: rgba(203, 203, 203, 0.92);
  margin: 0 0 1rem;
}

.br-body {
  font-size: 1rem;
  line-height: 1.75;
  color: rgba(203, 203, 203, 0.90);
  margin: 0 0 0.9rem;
}

.br-body--muted {
  color: rgba(203, 203, 203, 0.75);
}

.br-callout {
  margin-top: 1.3rem;
  border-radius: 14px;
  border: 1px solid rgba(0, 255, 136, 0.20);
  background: linear-gradient(135deg, rgba(0, 255, 136, 0.08), rgba(0, 245, 255, 0.05));
  box-shadow: 0 0 0 1px rgba(0, 245, 255, 0.07) inset, 0 0 24px rgba(0, 255, 136, 0.08);
  padding: 1rem 1.1rem;
}

.br-callout-title {
  font-family: var(--font-display);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 800;
  font-size: 0.78rem;
  color: rgba(0, 255, 136, 0.95);
  margin: 0 0 0.4rem;
}

.br-callout-text {
  margin: 0;
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.55;
}

.br-table-wrap {
  margin-top: 1.15rem;
  border-radius: 16px;
  border: 1px solid rgba(0, 245, 255, 0.18);
  background: rgba(0, 0, 0, 0.20);
  box-shadow: 0 0 0 1px rgba(0, 255, 136, 0.08) inset;
  overflow: auto;
}

.br-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 880px;
}

.br-table th,
.br-table td {
  padding: 0.95rem 1rem;
  border-bottom: 1px solid rgba(0, 245, 255, 0.10);
  vertical-align: top;
}

.br-table th {
  font-family: var(--font-display);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.82rem;
  color: rgba(0, 245, 255, 0.92);
  background: rgba(0, 245, 255, 0.06);
}

.br-table tbody tr {
  transition: background 0.18s ease, box-shadow 0.18s ease;
}

.br-table tbody tr:hover {
  background: rgba(0, 255, 136, 0.05);
}

.br-channel {
  display: inline-block;
  font-family: var(--font-display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 800;
  color: rgba(0, 255, 136, 0.92);
}

.br-channel-sub {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.9rem;
  color: rgba(203, 203, 203, 0.75);
}

.br-deploy-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.2rem;
}

.br-deploy-card {
  border-radius: 16px;
  border: 1px solid rgba(0, 245, 255, 0.18);
  background: rgba(0, 0, 0, 0.20);
  box-shadow: 0 0 0 1px rgba(0, 255, 136, 0.08) inset;
  padding: 1rem 1rem;
}

.br-list {
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.6rem;
}

.br-list-item {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 0.55rem;
  align-items: start;
  color: rgba(203, 203, 203, 0.90);
  line-height: 1.55;
}

.br-list-icon {
  color: rgba(0, 255, 136, 0.95);
  text-shadow: 0 0 14px rgba(0, 255, 136, 0.25);
}

.br-final .br-cta--final {
  margin-top: 0.9rem;
  width: fit-content;
}

.br-final-points {
  margin-top: 1rem;
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.br-final-point {
  border-radius: 999px;
  border: 1px solid rgba(0, 245, 255, 0.22);
  background: rgba(0, 245, 255, 0.06);
  color: rgba(0, 245, 255, 0.90);
  font-family: var(--font-display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 0.35rem 0.7rem;
}

.br-final-note {
  margin-top: 0.95rem;
}

.br-faq-list {
  margin-top: 1.1rem;
  display: grid;
  gap: 0.7rem;
}

.br-faq-item {
  border-radius: 14px;
  border: 1px solid rgba(0, 245, 255, 0.16);
  background: rgba(0, 0, 0, 0.18);
  box-shadow: 0 0 0 1px rgba(0, 255, 136, 0.06) inset;
  overflow: hidden;
}

.br-faq-q {
  width: 100%;
  text-align: left;
  padding: 0.9rem 1rem;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.92);
  font-family: var(--font-display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 800;
  cursor: pointer;
}

.br-faq-q:focus-visible {
  outline: 2px solid rgba(0, 255, 136, 0.45);
  outline-offset: -2px;
}

.br-faq-a {
  padding: 0 1rem 1rem;
  color: rgba(203, 203, 203, 0.90);
  line-height: 1.7;
}

/* Responsywność */
@media (max-width: 980px) {
  .br-deploy-grid {
    grid-template-columns: 1fr;
  }
  .br-table {
    min-width: 760px;
  }
}

@media (max-width: 560px) {
  /* Wymóg: 30px lewa, 15px prawa na telefonie (tylko treść, bez spine/badge) */
  .br-section-inner {
    padding-left: 30px;
    padding-right: 15px;
  }
  .br-hero-content {
    padding-left: 30px;
    padding-right: 15px;
  }
  .br-cta {
    width: 100%;
  }
  .br-table {
    min-width: 720px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .br-hero::before,
  .br-cta-cursor {
    animation: none !important;
  }
}

/* Mobile: wzmocniony efekt kolorów (przelewające się plamy) */
@media (max-width: 560px) {
  .br-hero::before {
    animation-duration: 10s !important;
    background-size: 140% 140% !important;
    filter: saturate(1.18) contrast(1.04) blur(1px);
    opacity: 1 !important;
  }
  .br-hero::after {
    animation-duration: 12s !important;
    background-size: 180% 180% !important;
    filter: blur(20px) saturate(1.18) contrast(1.04);
    opacity: 1 !important;
  }
  /* Delikatnie zwiększamy intensywność kolorów tekstu i CTA na telefonie */
  .br-h1 { text-shadow: 0 0 26px rgba(0,245,255,0.34); }
  .br-hero-kicker { color: rgba(0,255,136,0.98); }
}

/* Wyłącz blobs na telefonach (całkowicie) */
@media (max-width: 560px) {
  .br-blobs { display: none !important; }
}

/* Hero entry animations (staggered) */
/* Glitch reveal (hero entry) */
.br-glitch {
  position: relative;
  display: inline-block;
  isolation: isolate;
}

/* Start hidden, reveal only via animation (prevents plain flash) */
#branding-hero .br-hero-kicker,
#branding-hero .br-h1,
#branding-hero .br-hero-lead,
#branding-hero .br-cta {
  opacity: 0;
}

.br-glitch::before,
.br-glitch::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  white-space: pre-wrap;
}

.br-glitch::before {
  color: rgba(0, 245, 255, 0.95);
  mix-blend-mode: screen;
  transform: translate3d(-2px, 0, 0);
}

.br-glitch::after {
  color: rgba(0, 255, 136, 0.90);
  mix-blend-mode: screen;
  transform: translate3d(2px, 0, 0);
}

@keyframes br-glitch-base-in {
  0%   { opacity: 0; transform: translateY(18px); filter: blur(0.8px); }
  55%  { opacity: 1; transform: translateY(-8px); filter: blur(0px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes br-glitch-slice-a {
  0% { opacity: 0; clip-path: inset(0 0 0 0); transform: translate3d(-2px, 0, 0); }
  12% { opacity: 1; clip-path: inset(12% 0 72% 0); transform: translate3d(-8px, -2px, 0); }
  24% { clip-path: inset(58% 0 18% 0); transform: translate3d(6px, 2px, 0); }
  36% { clip-path: inset(22% 0 54% 0); transform: translate3d(-10px, 1px, 0); }
  48% { clip-path: inset(70% 0 10% 0); transform: translate3d(10px, -1px, 0); }
  60% { clip-path: inset(8% 0 82% 0); transform: translate3d(-6px, 0, 0); }
  72% { clip-path: inset(40% 0 36% 0); transform: translate3d(6px, 0, 0); }
  100% { opacity: 0; clip-path: inset(0 0 0 0); transform: translate3d(-2px, 0, 0); }
}

@keyframes br-glitch-slice-b {
  0% { opacity: 0; clip-path: inset(0 0 0 0); transform: translate3d(2px, 0, 0); }
  14% { opacity: 1; clip-path: inset(66% 0 8% 0); transform: translate3d(12px, 2px, 0); }
  28% { clip-path: inset(18% 0 64% 0); transform: translate3d(-10px, -2px, 0); }
  42% { clip-path: inset(44% 0 28% 0); transform: translate3d(14px, 1px, 0); }
  56% { clip-path: inset(10% 0 78% 0); transform: translate3d(-14px, 0, 0); }
  70% { clip-path: inset(72% 0 12% 0); transform: translate3d(10px, -1px, 0); }
  100% { opacity: 0; clip-path: inset(0 0 0 0); transform: translate3d(2px, 0, 0); }
}

@keyframes br-cta-pop-pro {
  0% { opacity: 0; transform: translateY(10px) scale(0.95); }
  55% { opacity: 1; transform: translateY(-8px) scale(1.06); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes br-cta-scan {
  0% { transform: translateX(-120%); opacity: 0; }
  15% { opacity: 0.9; }
  100% { transform: translateX(120%); opacity: 0; }
}

/* Staggered entry */
.br-animate .br-hero-kicker {
  animation: br-glitch-base-in 520ms cubic-bezier(.22,.95,.32,1.05) both;
  animation-delay: 0s;
}
.br-animate .br-hero-kicker.br-glitch::before {
  animation: br-glitch-slice-a 420ms steps(1, end) both;
  animation-delay: 0.02s;
}
.br-animate .br-hero-kicker.br-glitch::after {
  animation: br-glitch-slice-b 420ms steps(1, end) both;
  animation-delay: 0.02s;
}

.br-animate .br-h1 {
  animation: br-glitch-base-in 720ms cubic-bezier(.22,.95,.32,1.05) both;
  animation-delay: 0.08s;
}
.br-animate .br-h1.br-glitch::before {
  animation: br-glitch-slice-a 520ms steps(1, end) both;
  animation-delay: 0.10s;
}
.br-animate .br-h1.br-glitch::after {
  animation: br-glitch-slice-b 520ms steps(1, end) both;
  animation-delay: 0.10s;
}

.br-animate .br-hero-lead {
  animation: br-glitch-base-in 640ms cubic-bezier(.22,.95,.32,1.05) both;
  animation-delay: 0.18s;
}

.br-animate .br-cta {
  animation: br-cta-pop-pro 520ms cubic-bezier(.22,.95,.32,1.05) both;
  animation-delay: 0.28s;
  box-shadow: 0 0 0 1px rgba(0,255,136,0.08) inset, 0 0 34px rgba(0,255,136,0.10);
}

.br-animate .br-cta--primary {
  position: relative;
  overflow: hidden;
}
.br-animate .br-cta--primary::after {
  content: '';
  position: absolute;
  top: -30%;
  bottom: -30%;
  left: -40%;
  width: 50%;
  background: linear-gradient(90deg, transparent, rgba(0,245,255,0.22), rgba(0,255,136,0.18), transparent);
  transform: translateX(-120%);
  animation: br-cta-scan 720ms ease-out both;
  animation-delay: 0.34s;
  mix-blend-mode: screen;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  #branding-hero .br-hero-kicker,
  #branding-hero .br-h1,
  #branding-hero .br-hero-lead,
  #branding-hero .br-cta {
    opacity: 1 !important;
  }
  .br-animate .br-hero-kicker,
  .br-animate .br-h1,
  .br-animate .br-hero-lead,
  .br-animate .br-cta {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
  .br-glitch::before,
  .br-glitch::after,
  .br-animate .br-cta--primary::after {
    animation: none !important;
    opacity: 0 !important;
  }
}

/* BLOBS: DOM kółka, działają na wszystkich urządzeniach; wyłączone przy prefers-reduced-motion */
.br-blobs {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  display: block;
  will-change: transform, opacity;
}

.br-blob {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 35%, rgba(0,245,255,0.28), rgba(0,245,255,0.12) 40%, transparent 60%),
              radial-gradient(circle at 70% 65%, rgba(0,255,136,0.22), rgba(0,255,136,0.08) 45%, transparent 70%);
  filter: blur(28px) saturate(1.25);
  mix-blend-mode: screen;
  opacity: 0.88;
  transform: translate3d(0,0,0) scale(1);
  will-change: transform, opacity;
  /* smoother alternating movement (less abrupt loop) */
  animation-timing-function: ease-in-out;
  animation-direction: alternate;
}

/* Initial positions (spread across hero) */
.br-blob:nth-child(1){ left:6%;  top:8%;   width:160px; height:160px; animation: blob1 22s linear infinite; }
.br-blob:nth-child(2){ left:50%; top:6%;   width:110px; height:110px; animation: blob2 18s linear infinite; }
.br-blob:nth-child(3){ left:16%; top:16%;  width:170px; height:170px; animation: blob3 25s linear infinite; }
.br-blob:nth-child(4){ left:88%; top:22%;  width:200px; height:200px; animation: blob4 20s linear infinite; }
.br-blob:nth-child(5){ left:30%; top:26%;  width:90px;  height:90px;  animation: blob5 30s linear infinite; }
.br-blob:nth-child(6){ left:52%; top:62%;  width:170px; height:170px; animation: blob6 16s linear infinite; }
.br-blob:nth-child(7){ left:72%; top:88%;  width:70px;  height:70px;  animation: blob7 28s linear infinite; }
.br-blob:nth-child(8){ left:92%; top:62%;  width:180px; height:180px; animation: blob8 21s linear infinite; }
.br-blob:nth-child(9){ left:32%; top:90%;  width:170px; height:170px; animation: blob9 19s linear infinite; }
.br-blob:nth-child(10){ left:12%; top:12%; width:140px; height:140px; animation: blob10 24s linear infinite; }
.br-blob:nth-child(11){ left:60%; top:18%; width:100px; height:100px; animation: blob11 17s linear infinite; }
.br-blob:nth-child(12){ left:22%; top:40%; width:160px; height:160px; animation: blob12 26s linear infinite; }
.br-blob:nth-child(13){ left:40%; top:22%; width:180px; height:180px; animation: blob13 23s linear infinite; }
.br-blob:nth-child(14){ left:34%; top:30%; width:110px; height:110px; animation: blob14 20s linear infinite; }
.br-blob:nth-child(15){ left:80%; top:60%; width:160px; height:160px; animation: blob15 29s linear infinite; }
.br-blob:nth-child(16){ left:18%; top:10%; width:200px; height:200px; animation: blob16 15s linear infinite; }
.br-blob:nth-child(17){ left:44%; top:62%; width:150px; height:150px; animation: blob17 27s linear infinite; }
.br-blob:nth-child(18){ left:10%; top:50%; width:160px; height:160px; animation: blob18 22s linear infinite; }

/* Movement (large translates to feel like flowing) */
@keyframes blob1  { 0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(64px,128px,0) scale(1.12)}100%{transform:translate3d(0,0,0) scale(1)} }
@keyframes blob2  { 0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-96px,64px,0) scale(0.97)}100%{transform:translate3d(0,0,0) scale(1)} }
@keyframes blob3  { 0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(144px,-64px,0) scale(1.10)}100%{transform:translate3d(0,0,0) scale(1)} }
@keyframes blob4  { 0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-192px,-48px,0) scale(1.06)}100%{transform:translate3d(0,0,0) scale(1)} }
@keyframes blob5  { 0%{transform:translate3d(0,0,0)}50%{transform:translate3d(48px,96px,0) scale(1.02)}100%{transform:translate3d(0,0,0)} }
@keyframes blob6  { 0%{transform:translate3d(0,0,0)}50%{transform:translate3d(-128px,48px,0) scale(1.08)}100%{transform:translate3d(0,0,0)} }
@keyframes blob7  { 0%{transform:translate3d(0,0,0)}50%{transform:translate3d(32px,-160px,0) scale(1.12)}100%{transform:translate3d(0,0,0)} }
@keyframes blob8  { 0%{transform:translate3d(0,0,0)}50%{transform:translate3d(-144px,176px,0) scale(0.96)}100%{transform:translate3d(0,0,0)} }
@keyframes blob9  { 0%{transform:translate3d(0,0,0)}50%{transform:translate3d(124px,-54px,0) scale(1.08)}100%{transform:translate3d(0,0,0)} }
@keyframes blob10 { 0%{transform:translate3d(0,0,0)}50%{transform:translate3d(-70px,148px,0) scale(1.06)}100%{transform:translate3d(0,0,0)} }
@keyframes blob11 { 0%{transform:translate3d(0,0,0)}50%{transform:translate3d(192px,42px,0) scale(0.96)}100%{transform:translate3d(0,0,0)} }
@keyframes blob12 { 0%{transform:translate3d(0,0,0)}50%{transform:translate3d(-160px,-64px,0) scale(1.10)}100%{transform:translate3d(0,0,0)} }
@keyframes blob13 { 0%{transform:translate3d(0,0,0)}50%{transform:translate3d(64px,192px,0) scale(1.04)}100%{transform:translate3d(0,0,0)} }
@keyframes blob14 { 0%{transform:translate3d(0,0,0)}50%{transform:translate3d(-48px,-112px,0) scale(1.06)}100%{transform:translate3d(0,0,0)} }
@keyframes blob15 { 0%{transform:translate3d(0,0,0)}50%{transform:translate3d(144px,-144px,0) scale(0.98)}100%{transform:translate3d(0,0,0)} }
@keyframes blob16 { 0%{transform:translate3d(0,0,0)}50%{transform:translate3d(-224px,64px,0) scale(1.12)}100%{transform:translate3d(0,0,0)} }
@keyframes blob17 { 0%{transform:translate3d(0,0,0)}50%{transform:translate3d(105px,-35px,0) scale(1.06)}100%{transform:translate3d(0,0,0)} }
@keyframes blob18 { 0%{transform:translate3d(0,0,0)}50%{transform:translate3d(-112px,140px,0) scale(1.02)}100%{transform:translate3d(0,0,0)} }

@media (min-width: 901px) {
  /* Desktop: larger blobs, stronger blur for gooey feeling */
  .br-blob { filter: blur(36px) saturate(1.3); opacity: 0.92; }
}

@media (prefers-reduced-motion: reduce) {
  .br-blob { animation: none !important; transform: none !important; }
}

/* Mobile performance: reduce blur + number of blobs to prevent flicker */
@media (max-width: 560px) {
  .br-blob {
    /* mobile: keep movement but remove heavy filters to prevent flicker */
    filter: none !important;
    opacity: 0.82 !important;
    will-change: transform, opacity;
    backface-visibility: hidden;
    transform: translateZ(0);
    animation-timing-function: ease-in-out !important;
    animation-direction: alternate !important;
  }
  /* Limit number of blobs on low-end phones to reduce repaints (keep movement) */
  .br-blob:nth-child(n+7) { display: none !important; }
}