@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&family=Righteous&display=swap');

/* ===== BASE ===== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* ===== GLOBAL BORDER-RADIUS OVERRIDE (3px) ===== */
*, *::before, *::after {
  border-radius: 3px;
}
/* Preserve circles/pills (anything explicitly using rounded-full / 9999) */
.rounded-full,
[class*="rounded-full"],
.industry-dot,
.dd-industry-dot,
.value-row-bullet {
  border-radius: 9999px;
}

/* Mobile heading sizes and alignment */
@media (max-width: 767px) {
  h1.hero-h1 { font-size: 30px !important; text-align: left !important; }
  h2.heading-section { font-size: 30px !important; }
  h3 { font-size: 20px !important; }

  /* Hero section text alignment */
  section:first-of-type p { text-align: left !important; }
}
/* Lenis overrides native scroll — remove smooth so they don't conflict */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }

body {
  background: #ffffff;
  color: #111111;
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

::selection { background: #fde68a; color: #111; }
::-moz-selection { background: #fde68a; color: #111; }

/* =====================================================================
   BOOK-A-CALL BUTTON — unified hover animation
   - Whole button lifts + soft shadow
   - Calendar icon slides up & fades, checkmark slides up to replace it
   - Arrow slides right
   - Subtle sheen sweeps left → right
   ===================================================================== */
.book-call-btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition:
    box-shadow .4s cubic-bezier(.16,1,.3,1),
    background-color .25s ease,
    color .25s ease,
    letter-spacing .35s ease;
}
.book-call-btn:hover {
  box-shadow: 0 14px 30px -14px rgba(0,0,0,0.28);
  letter-spacing: 0.005em;
}
.book-call-btn:active { transition-duration: .15s; }

/* Sheen sweep */
.book-call-btn::before {
  content: '';
  position: absolute;
  top: 0; left: -120%;
  width: 60%; height: 100%;
  background: linear-gradient(100deg,
    transparent 0%,
    rgba(255,255,255,0.55) 50%,
    transparent 100%);
  transform: skewX(-18deg);
  transition: left .7s cubic-bezier(.4,0,.2,1);
  pointer-events: none;
  z-index: 0;
}
.book-call-btn:hover::before { left: 130%; }
/* Sheen variant for dark-on-light contexts (nav scrolled / mobile drawer btn-accent) */
.book-call-btn.book-call-btn-dark::before {
  background: linear-gradient(100deg,
    transparent 0%,
    rgba(255,255,255,0.18) 50%,
    transparent 100%);
}

/* Lift content above sheen */
.book-call-btn > * { position: relative; z-index: 1; }

/* Icon swap stack: calendar -> tick */
.bcb-icon-stack {
  position: relative;
  display: inline-block;
  width: 14px; height: 14px;
  overflow: hidden;
  flex-shrink: 0;
}
.bcb-icon-cal,
.bcb-icon-tick {
  position: absolute;
  inset: 0;
  width: 14px; height: 14px;
  transition:
    transform .42s cubic-bezier(.65,0,.35,1),
    opacity .3s ease;
}
.bcb-icon-cal  { transform: translateY(0);    opacity: 1; }
.bcb-icon-tick { transform: translateY(140%); opacity: 0; }
.book-call-btn:hover .bcb-icon-cal  { transform: translateY(-140%); opacity: 0; }
.book-call-btn:hover .bcb-icon-tick { transform: translateY(0);     opacity: 1; }

/* Arrow slide */
.bcb-icon-arrow {
  transition: transform .35s cubic-bezier(.65,0,.35,1);
  flex-shrink: 0;
}
.book-call-btn:hover .bcb-icon-arrow { transform: translateX(5px); }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .book-call-btn,
  .book-call-btn::before,
  .bcb-icon-cal,
  .bcb-icon-tick,
  .bcb-icon-arrow { transition: none !important; }
  .book-call-btn:hover { transform: none; box-shadow: none; }
}
a { text-decoration: none; color: inherit; }

/* ===== BRAND LOGO ===== */
.brand-logo {
  font-family: 'Poppins', sans-serif;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #111111;
  margin: 0;
}

/* ===== TYPOGRAPHY ===== */
.heading-display {
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1em;
}

.heading-section {
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.1em;
}

.text-body { font-size: 16px; font-weight: 400; line-height: 1.3em; }
.text-body-sm { font-size: 14px; font-weight: 400; line-height: 1.3em; }
.text-body-lg { font-size: 20px; font-weight: 400; line-height: 1.2em; letter-spacing: -0.02em; }
.text-label { font-size: 12px; font-weight: 500; line-height: 1.1em; letter-spacing: -0.01em; }
.text-secondary { color: #858585; }
p.lead { font-size: 14px; color: #858585; line-height: 1.5; margin-bottom: 24px; max-width: 360px; }

/* ===== COMPONENT LABELS ===== */
.section-label {
  display: inline-block;
  font-size: 12px;
  color: #ffffff;
  font-weight: 500;
  margin-bottom: 1rem;
  padding: 0.375rem 0.75rem;
  background: #666666;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* ===== NAV DROPDOWNS ===== */
.dd-panel {
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.15s;
}
.dd-panel.open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  visibility: visible;
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0s;
}

/* ===== NAVBAR (transparent → solid on scroll) ===== */
#navbar {
  transition: background-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
}
#navbar nav { transition: color 0.3s ease; }

.nav-glass-link {
  font-size: 15px;
  font-weight: 500;
  padding: 7px 14px;
  border-radius: 4px;
  transition: color 0.2s ease, background 0.2s ease;
  white-space: nowrap;
}

/* TRANSPARENT state — over hero */
#navbar.is-transparent {
  background: transparent;
  color: #fff;
}
#navbar.is-transparent .nav-glass-link { color: rgba(255,255,255,0.75); }
#navbar.is-transparent .nav-glass-link:hover { color: #fff; background: rgba(255,255,255,0.08); }
#navbar.is-transparent #brand-logo { color: #fff; }
#navbar.is-transparent .brand-dot { color: #fff; }
#navbar.is-transparent .nav-cta {
  background: #fff;
  color: #111;
}
#navbar.is-transparent .nav-cta:hover { background: rgba(255,255,255,0.88); }
#navbar.is-transparent #mobile-menu-btn { color: rgba(255,255,255,0.85); }
#navbar.is-transparent #mobile-menu-btn:hover { background: rgba(255,255,255,0.10); }

/* SCROLLED state — solid white */
#navbar.is-scrolled {
  background: #ffffff;
  box-shadow: 0 1px 0 rgba(0,0,0,0.06), 0 8px 24px -12px rgba(0,0,0,0.08);
  color: #111;
}
#navbar.is-scrolled .nav-glass-link { color: rgba(0,0,0,0.55); }
#navbar.is-scrolled .nav-glass-link:hover { color: #111; background: rgba(0,0,0,0.06); }
#navbar.is-scrolled #brand-logo { color: #111; }
#navbar.is-scrolled .brand-dot { color: #111; }
#navbar.is-scrolled .nav-cta {
  background: #111;
  color: #fff;
}
#navbar.is-scrolled .nav-cta:hover { background: #333; }
#navbar.is-scrolled #mobile-menu-btn { color: rgba(0,0,0,0.55); }
#navbar.is-scrolled #mobile-menu-btn:hover { background: rgba(0,0,0,0.06); }

/* ===== BUTTONS ===== */
.btn-accent {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: #111111; color: #ffffff;
  font-size: 14px; font-weight: 500; letter-spacing: -0.02em;
  padding: 10px 20px; border-radius: 4px; border: none;
  cursor: pointer; transition: all 0.2s ease;
  box-shadow: none;
}
.btn-accent:hover {
  background: #333333;
  box-shadow: none;
}

.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: rgba(0,0,0,0.06); color: #111111;
  font-size: 14px; font-weight: 500; letter-spacing: -0.02em;
  padding: 10px 20px; border-radius: 4px; border: none;
  cursor: pointer; transition: all 0.2s ease;
}
.btn-ghost:hover { background: rgba(0,0,0,0.10); }

.btn-outline-card {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: transparent; color: #333333;
  font-size: 14px; font-weight: 500;
  padding: 10px 20px; border-radius: 4px;
  border: 1px solid rgba(0,0,0,0.16);
  cursor: pointer; transition: all 0.2s ease;
}
.btn-outline-card:hover { border-color: rgba(0,0,0,0.3); color: #111; }

/* ===== SECTION WRAPPERS ===== */
.section-wrap-lg {
  max-width: 1128px;
  margin: 0 auto;
  border-radius: 4px;
  position: relative;
}

.section-wrap-sm {
  max-width: 1128px;
  margin: 0 auto;
  border-radius: 4px;
  position: relative;
}

/* ===== FEATURE CARDS (STICKY STACKING WITH DEPTH) ===== */
.feature-card {
  position: sticky;
  background: #f5f5f5;
  border-radius: 4px;
  padding: 16px;
  display: flex;
  gap: 16px;
  transform-origin: center top;
  will-change: transform, filter;
}

.feature-card-text {
  flex: 1;
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
}

.feature-card-image {
  flex: 1.5;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}
.feature-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ===== TAB PANEL CROSSFADE ===== */
.tab-panel {
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}
.tab-panel-active {
  opacity: 1;
  pointer-events: auto;
  position: relative;
  z-index: 2;
}

/* ===== USE CASE TABS ===== */
.usecase-tab {
  padding: 8px 18px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border: none;
  outline: none;
  transition: color 0.25s ease;
  white-space: nowrap;
  background: transparent;
  color: #858585;
}

.usecase-tab.active {
  color: #111111;
}

.usecase-tab:not(.active):hover {
  color: #444444;
}

/* ===== BENEFIT ITEMS ===== */
.benefit-item {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 32px 20px;
  background: #f5f5f5;
  border-radius: 4px;
}

.benefit-icon {
  width: 36px;
  height: 36px;
  border-radius: 4px;
  background: rgba(0,0,0,0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #888888;
  margin-bottom: 4px;
}

/* ===== TESTIMONIAL CARDS ===== */
.testimonial-card {
  background: #f5f5f5;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 4px;
  padding: 24px;
  display: flex;
  flex-direction: column;
}
.testimonial-grid .testimonial-card:nth-child(2) { background: #f2f2f2; }
.testimonial-grid .testimonial-card:nth-child(3) { background: #f7f7f7; }
.testimonial-grid .testimonial-card:nth-child(4) { background: #f0f0f0; }
.testimonial-grid .testimonial-card:nth-child(5) { background: #f5f5f5; }
.testimonial-grid .testimonial-card:nth-child(6) { background: #f2f2f2; }
.testimonial-grid .testimonial-card:nth-child(7) { background: #f7f7f7; }
.testimonial-grid .testimonial-card:nth-child(8) { background: #f0f0f0; }
#testimonial-collapse {
  -webkit-mask: linear-gradient(180deg, #fff 60%, transparent 100%);
  mask: linear-gradient(180deg, #fff 60%, transparent 100%);
  transition: max-height 0.5s ease-in-out, -webkit-mask 0.3s ease, mask 0.3s ease;
}
#testimonial-collapse.is-open {
  -webkit-mask: none;
  mask: none;
}

/* ===== PRICING ===== */
.pricing-toggle {
  display: inline-flex;
  align-items: center;
  background: #f0f0f0;
  border-radius: 4px;
  padding: 4px;
  gap: 4px;
}

.pricing-toggle-btn {
  padding: 6px 16px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border: none;
  outline: none;
  transition: all 0.25s ease;
  background: transparent;
  color: #858585;
}
.pricing-toggle-btn.active {
  background: #111111;
  color: #fff;
}

.pricing-card {
  flex: 1;
  background: #f5f5f5;
  border-radius: 4px;
  padding: 16px;
  display: flex;
  flex-direction: column;
}
.pricing-card.featured {
  border: 1px solid rgba(0,0,0,0.16);
}
.pricing-card-inner {
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  flex: 1;
}

/* ===== PLATFORM CARDS ===== */
.platform-card {
  flex: 1;
  background: #f5f5f5;
  border-radius: 4px;
  overflow: hidden;
  padding: 16px;
  transition: transform 0.3s ease;
}
.platform-card:hover { transform: translateY(-3px); }

.platform-card-img {
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 16px;
}
.platform-card-img img {
  width: 100%;
  display: block;
  aspect-ratio: 16/10;
  object-fit: cover;
}

/* ===== FAQ CARDS ===== */
.faq-card {
  background: #f0f0f0;
  border-radius: 4px;
}

[data-faq-content] {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.faq-icon {
  color: #888888;
  transition: transform 0.3s ease, color 0.2s ease;
}
.faq-card.open .faq-icon {
  color: #111111;
  /* Rotate 45deg to turn + into x */
  transform: rotate(45deg);
}

/* ===== CTA BANNER ===== */
.cta-banner {
  background: #f2f2f2;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}

/* Floating logo background */
.cta-logo-bg {
  position: absolute;
  width: 320px;
  height: 320px;
  opacity: 0.04;
  animation: cta-float 8s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
.cta-logo-bg.logo-1 {
  top: -40px;
  left: -60px;
  animation-delay: 0s;
}
.cta-logo-bg.logo-2 {
  bottom: -60px;
  right: -40px;
  animation-delay: -4s;
  width: 260px;
  height: 260px;
}

/* Ambient glow orbs */
.cta-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
}
.cta-orb-1 {
  width: 300px;
  height: 300px;
  background: rgba(0, 0, 0, 0.04);
  top: -80px;
  right: 10%;
  animation: cta-pulse 6s ease-in-out infinite;
}
.cta-orb-2 {
  width: 200px;
  height: 200px;
  background: rgba(0, 0, 0, 0.03);
  bottom: -60px;
  left: 15%;
  animation: cta-pulse 6s ease-in-out infinite 3s;
}

@keyframes cta-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-12px) rotate(3deg); }
}

@keyframes cta-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.15); }
}

/* ===== HERO IMAGE MASK ===== */
.hero-img-mask {
  -webkit-mask: linear-gradient(180deg, #fff 60%, transparent 100%);
  mask: linear-gradient(180deg, #fff 60%, transparent 100%);
}

/* ===== TESTIMONIAL MASK ===== */
.testimonial-mask {
  -webkit-mask: linear-gradient(180deg, #fff 50%, transparent 100%);
  mask: linear-gradient(180deg, #fff 50%, transparent 100%);
}

/* ===== SCROLL ANIMATIONS ===== */
[data-animate] {
  opacity: 0;
  transform: translateY(28px);
  filter: blur(4px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-animate].animate-in {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

[data-animate][data-delay="100"] { transition-delay: 100ms; }
[data-animate][data-delay="200"] { transition-delay: 200ms; }
[data-animate][data-delay="300"] { transition-delay: 300ms; }
[data-animate][data-delay="400"] { transition-delay: 400ms; }

/* ===== FEATURE CARD CTA ===== */
.btn-feature-card {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #111111;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  padding: 8px 18px;
  border-radius: 4px;
  transition: background 0.2s ease, gap 0.3s ease;
  width: fit-content;
}
.btn-feature-card:hover {
  background: #333333;
  gap: 12px;
}
.btn-feature-card svg { transition: transform 0.3s ease; }
.btn-feature-card:hover svg { transform: translateX(2px); }

/* ===== ARROW LINK ===== */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  color: #333333;
  transition: color 0.3s ease, gap 0.3s ease;
}
.arrow-link:hover { color: #111111; gap: 10px; }
.arrow-link svg { transition: transform 0.3s ease; }
.arrow-link:hover svg { transform: translateX(2px); }

/* ===== FOOTER ===== */
.footer-link {
  font-size: 14px;
  color: #333333;
  transition: color 0.4s cubic-bezier(.44,0,.56,1);
}
.footer-link:hover { color: #111111; }
.lang-scroll { scrollbar-width: thin; scrollbar-color: rgba(0,0,0,0.15) transparent; }
.lang-scroll::-webkit-scrollbar { width: 4px; }
.lang-scroll::-webkit-scrollbar-track { background: transparent; }
.lang-scroll::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 4px; }
.lang-scroll::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.28); }

/* ===== BLOB BACKGROUNDS ===== */
.blob-bg { position: absolute; will-change: transform; }

/* --- Workspace panel — golden yellow, 4 blobs --- */
.blob-a {
  left: -15%; top: -20%; width: 160%; height: 160%;
  background: radial-gradient(ellipse at 38% 35%, rgb(255,235,80) 0%, rgb(245,195,0) 50%, transparent 80%);
  filter: blur(65px);
  animation: ws-1 22s ease-in-out infinite;
}
.blob-b {
  left: 50%; top: 35%; width: 140%; height: 140%;
  background: radial-gradient(ellipse at 22% 68%, rgb(195,125,0) 0%, rgb(160,90,0) 50%, transparent 78%);
  filter: blur(60px);
  animation: ws-2 31s ease-in-out infinite;
}
.blob-c {
  left: 35%; top: -15%; width: 120%; height: 120%;
  background: radial-gradient(ellipse at 72% 38%, rgb(240,185,20) 0%, rgb(210,145,0) 45%, transparent 76%);
  filter: blur(62px);
  animation: ws-3 18s ease-in-out infinite;
}
.blob-d {
  left: -28%; top: 50%; width: 130%; height: 130%;
  background: radial-gradient(ellipse at 82% 15%, rgb(255,245,150) 0%, rgb(252,225,60) 45%, transparent 76%);
  filter: blur(65px);
  animation: ws-4 38s ease-in-out infinite;
}
@keyframes ws-1 {
  0%, 100% { transform: translate(0%, 0%); }
  20%       { transform: translate(12%, -14%); }
  45%       { transform: translate(-4%, 11%); }
  65%       { transform: translate(16%, 6%); }
  80%       { transform: translate(-10%, -8%); }
}
@keyframes ws-2 {
  0%, 100% { transform: translate(0%, 0%); }
  25%       { transform: translate(-14%, 8%); }
  50%       { transform: translate(6%, 13%); }
  75%       { transform: translate(10%, -10%); }
}
@keyframes ws-3 {
  0%, 100% { transform: translate(0%, 0%); }
  35%       { transform: translate(15%, 13%); }
  70%       { transform: translate(-9%, -5%); }
}
@keyframes ws-4 {
  0%, 100% { transform: translate(0%, 0%); }
  30%       { transform: translate(-7%, 6%); }
  60%       { transform: translate(5%, -9%); }
}

/* --- Studio panel — green, 3 blobs --- */
.blob-studio-a {
  left: -18%; top: -22%; width: 160%; height: 160%;
  background: radial-gradient(ellipse at 42% 38%, rgb(110,220,150) 0%, rgb(30,180,80) 50%, transparent 80%);
  filter: blur(65px);
  animation: st-1 16s ease-in-out infinite;
}
.blob-studio-b {
  left: 45%; top: 45%; width: 140%; height: 140%;
  background: radial-gradient(ellipse at 28% 65%, rgb(10,130,55) 0%, rgb(5,95,35) 50%, transparent 78%);
  filter: blur(62px);
  animation: st-2 24s ease-in-out infinite;
}
.blob-studio-c {
  left: 25%; top: 10%; width: 130%; height: 130%;
  background: radial-gradient(ellipse at 68% 42%, rgb(60,200,110) 0%, rgb(20,155,65) 45%, transparent 76%);
  filter: blur(62px);
  animation: st-3 19s ease-in-out infinite;
}
@keyframes st-1 {
  0%, 100% { transform: translate(0%, 0%); }
  30%       { transform: translate(18%, -10%); }
  55%       { transform: translate(-6%, 14%); }
  78%       { transform: translate(10%, 8%); }
}
@keyframes st-2 {
  0%, 100% { transform: translate(0%, 0%); }
  40%       { transform: translate(-16%, 12%); }
  75%       { transform: translate(12%, -6%); }
}
@keyframes st-3 {
  0%, 100% { transform: translate(0%, 0%); }
  25%       { transform: translate(10%, 15%); }
  60%       { transform: translate(-12%, -4%); }
  85%       { transform: translate(6%, -11%); }
}

/* --- Blueprint panel — blue, 5 blobs (varied light/medium) --- */
.blob-blueprint-a {
  left: -18%; top: -22%; width: 160%; height: 160%;
  background: radial-gradient(ellipse at 42% 38%, rgb(108,167,230) 0%, rgb(54,126,216) 50%, transparent 80%);
  filter: blur(65px);
  animation: bp-1 16s ease-in-out infinite;
}
.blob-blueprint-b {
  left: 45%; top: 45%; width: 140%; height: 140%;
  background: radial-gradient(ellipse at 28% 65%, rgb(18,54,158) 0%, rgb(9,36,117) 50%, transparent 78%);
  filter: blur(62px);
  animation: bp-2 24s ease-in-out infinite;
}
.blob-blueprint-c {
  left: 25%; top: 10%; width: 130%; height: 130%;
  background: radial-gradient(ellipse at 68% 42%, rgb(72,135,225) 0%, rgb(36,99,198) 45%, transparent 76%);
  filter: blur(62px);
  animation: bp-3 19s ease-in-out infinite;
}
.blob-blueprint-d {
  left: 55%; top: -18%; width: 130%; height: 130%;
  background: radial-gradient(ellipse at 55% 35%, rgb(99,149,212) 0%, rgb(63,117,189) 50%, transparent 80%);
  filter: blur(65px);
  animation: bp-4 18s ease-in-out infinite;
}
.blob-blueprint-e {
  left: -22%; top: 50%; width: 120%; height: 120%;
  background: radial-gradient(ellipse at 35% 55%, rgb(72,126,194) 0%, rgb(45,99,171) 50%, transparent 78%);
  filter: blur(62px);
  animation: bp-5 20s ease-in-out infinite;
}
@keyframes bp-1 {
  0%, 100% { transform: translate(0%, 0%); }
  33%       { transform: translate(10%, -8%); }
  66%       { transform: translate(-8%, 7%); }
}
@keyframes bp-2 {
  0%, 100% { transform: translate(0%, 0%); }
  28%       { transform: translate(-13%, 9%); }
  55%       { transform: translate(8%, 14%); }
  80%       { transform: translate(11%, -7%); }
}
@keyframes bp-3 {
  0%, 100% { transform: translate(0%, 0%); }
  40%       { transform: translate(14%, -12%); }
  70%       { transform: translate(-6%, 9%); }
}
@keyframes bp-4 {
  0%, 100% { transform: translate(0%, 0%); }
  35%       { transform: translate(-8%, -10%); }
  65%       { transform: translate(9%, 6%); }
}
@keyframes bp-5 {
  0%, 100% { transform: translate(0%, 0%); }
  50%       { transform: translate(6%, -5%); }
}

/* --- Cluster panel — orange-red, 3 blobs --- */
.blob-cluster-a {
  left: -16%; top: -20%; width: 160%; height: 160%;
  background: radial-gradient(ellipse at 38% 35%, rgb(255,150,50) 0%, rgb(240,90,20) 50%, transparent 80%);
  filter: blur(65px);
  animation: cl-1 11s ease-in-out infinite;
}
.blob-cluster-b {
  left: 48%; top: 40%; width: 140%; height: 140%;
  background: radial-gradient(ellipse at 24% 67%, rgb(185,25,25) 0%, rgb(150,10,10) 50%, transparent 78%);
  filter: blur(62px);
  animation: cl-2 14s ease-in-out infinite;
}
.blob-cluster-c {
  left: 20%; top: 5%; width: 140%; height: 140%;
  background: radial-gradient(ellipse at 70% 40%, rgb(250,160,80) 0%, rgb(235,110,35) 45%, transparent 76%);
  filter: blur(62px);
  animation: cl-3 9s ease-in-out infinite;
}
@keyframes cl-1 {
  0%, 100% { transform: translate(0%, 0%); }
  25%       { transform: translate(16%, -10%); }
  50%       { transform: translate(-5%, 12%); }
  75%       { transform: translate(-13%, -7%); }
}
@keyframes cl-2 {
  0%, 100% { transform: translate(0%, 0%); }
  45%       { transform: translate(-14%, 11%); }
  80%       { transform: translate(9%, -9%); }
}
@keyframes cl-3 {
  0%, 100% { transform: translate(0%, 0%); }
  30%       { transform: translate(12%, 14%); }
  65%       { transform: translate(-10%, -3%); }
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1199px) {
  .feature-card { flex-direction: column; position: relative; top: auto !important; }
  .feature-card-text { padding: 24px; }
  .feature-card-image { flex: none; }
  .section-wrap-lg { border-radius: 4px; }
  .section-wrap-sm { border-radius: 4px; }
}

@media (max-width: 810px) {
  .hero-h1 { font-size: 36px !important; }
  .benefit-grid { grid-template-columns: 1fr 1fr !important; }
  .testimonial-grid { grid-template-columns: 1fr !important; }
  .pricing-row { flex-direction: column !important; }
  .platform-row { flex-direction: column !important; gap: 12px !important; }
  .platform-card { flex: none; }
  .footer-inner { flex-direction: column !important; gap: 48px !important; }
  .footer-right { flex-direction: column !important; gap: 32px !important; }
  .trust-grid { grid-template-columns: repeat(2, minmax(50px, 1fr)) !important; }
}

@media (max-width: 480px) {
  .benefit-grid { grid-template-columns: 1fr !important; }
}

/* ===== MOBILE DRAWER ===== */
#mobile-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 998;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
#mobile-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

#mobile-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 90vw;
  background: #ffffff;
  border-left: 1px solid rgba(0, 0, 0, 0.07);
  z-index: 999;
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}
#mobile-drawer.open {
  transform: translateX(0);
}

/* Header animation */
#mobile-drawer > div:first-child {
  animation: menu-header-fade 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

@keyframes menu-header-fade {
  0% {
    opacity: 0;
    transform: translateY(-8px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Webkit scrollbar styling (Chrome, Safari, Edge) */
#mobile-drawer::-webkit-scrollbar {
  width: 6px;
}
#mobile-drawer::-webkit-scrollbar-track {
  background: transparent;
}
#mobile-drawer::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
}

.mobile-drawer-link {
  display: block;
  padding: 14px 14px;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.7);
  transition: color 0.2s ease, background 0.2s ease;
  background: none;
  border: none;
  cursor: pointer;
  width: 100%;
}
.mobile-drawer-link:hover {
  color: #111;
  background: rgba(0, 0, 0, 0.06);
}

.mobile-drawer-feature-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 14px;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.7);
  transition: color 0.2s ease, background 0.2s ease;
}
.mobile-drawer-feature-link svg {
  color: currentColor;
  stroke: currentColor;
}
.mobile-drawer-feature-link:hover {
  color: rgba(0, 0, 0, 0.9);
  background: rgba(0, 0, 0, 0.06);
}

/* Feature color themes */
.mobile-feature-workspace {
  color: rgba(0, 0, 0, 0.6);
}
.mobile-feature-workspace:hover {
  color: rgba(0, 0, 0, 0.8);
  background: rgba(0, 0, 0, 0.04);
}

.mobile-feature-studio {
  color: rgba(16, 185, 129, 0.7);
}
.mobile-feature-studio:hover {
  color: rgba(16, 185, 129, 0.9);
  background: rgba(16, 185, 129, 0.06);
}

.mobile-feature-blueprint {
  color: rgba(96, 165, 250, 0.55);
}
.mobile-feature-blueprint:hover {
  color: rgba(96, 165, 250, 0.75);
  background: rgba(96, 165, 250, 0.04);
}

.mobile-feature-cluster {
  color: rgba(249, 115, 22, 0.55);
}
.mobile-feature-cluster:hover {
  color: rgba(249, 115, 22, 0.75);
  background: rgba(249, 115, 22, 0.04);
}

/* ── Blueprint panel — deep navy/blue/cyan vibrant background ────────── */
.bp-blob { position: absolute; inset: -20%; border-radius: 50%; pointer-events: none; will-change: transform; }

/* Base gradient */
.bp-base { position: absolute; inset: 0; pointer-events: none; background: #1e40af; }

/* Pair 1 — upper-left: deep blue + sky blue */
.bp-p1d { background: radial-gradient(ellipse 65% 55% at 50% 50%, rgb(59,130,246) 0%, rgb(37,99,235) 55%, transparent 80%); filter: blur(90px); opacity: 0.95; animation: bp-drift-p1d 42s ease-in-out infinite; left: -10%; top: -15%; width: 70%; height: 75%; }
.bp-p1l { background: radial-gradient(ellipse 70% 65% at 50% 50%, rgb(120,184,255) 0%, rgb(59,130,246) 35%, transparent 68%); filter: blur(80px); opacity: 0.88; animation: bp-drift-p1l 21s ease-in-out infinite 1s; left: 5%; top: -10%; width: 60%; height: 70%; }

/* Pair 2 — upper-right: sky blue + cyan */
.bp-p2d { background: radial-gradient(ellipse 60% 58% at 50% 50%, rgb(96,165,250) 0%, rgb(56,189,248) 55%, transparent 80%); filter: blur(95px); opacity: 0.92; animation: bp-drift-p2d 35s ease-in-out infinite 2.1s; left: 50%; top: -20%; width: 75%; height: 75%; }
.bp-p2l { background: radial-gradient(ellipse 65% 60% at 50% 50%, rgb(120,184,255) 0%, rgb(59,130,246) 40%, transparent 70%); filter: blur(85px); opacity: 0.87; animation: bp-drift-p2l 19s ease-in-out infinite 0.4s; left: 40%; top: -5%; width: 70%; height: 70%; }

/* Pair 3 — center: bright sky blue + blue */
.bp-p3d { background: radial-gradient(ellipse 70% 65% at 50% 50%, rgb(96,165,250) 0%, rgb(59,130,246) 50%, transparent 78%); filter: blur(100px); opacity: 0.90; animation: bp-drift-p3d 30s ease-in-out infinite 0.8s; left: 15%; top: 20%; width: 80%; height: 80%; }
.bp-p3l { background: radial-gradient(ellipse 65% 62% at 50% 50%, rgb(147,197,253) 0%, rgb(96,165,250) 38%, transparent 70%); filter: blur(90px); opacity: 0.85; animation: bp-drift-p3l 18s ease-in-out infinite 2.5s; left: 30%; top: 10%; width: 75%; height: 75%; }

/* Pair 4 — lower-left: sky blue + deep blue */
.bp-p4d { background: radial-gradient(ellipse 62% 60% at 50% 50%, rgb(96,165,250) 0%, rgb(56,189,248) 55%, transparent 80%); filter: blur(92px); opacity: 0.91; animation: bp-drift-p4d 35s ease-in-out infinite 3.3s; left: -15%; top: 40%; width: 70%; height: 80%; }
.bp-p4l { background: radial-gradient(ellipse 60% 58% at 50% 50%, rgb(147,197,253) 0%, rgb(96,165,250) 38%, transparent 68%); filter: blur(85px); opacity: 0.85; animation: bp-drift-p4l 18s ease-in-out infinite 1.7s; left: 0%; top: 30%; width: 65%; height: 75%; }

/* Pair 5 — lower-right: cyan + sky blue */
.bp-p5d { background: radial-gradient(ellipse 60% 56% at 50% 50%, rgb(56,189,248) 0%, rgb(34,197,234) 55%, transparent 80%); filter: blur(95px); opacity: 0.90; animation: bp-drift-p5d 33s ease-in-out infinite 4.7s; left: 45%; top: 35%; width: 75%; height: 78%; }
.bp-p5l { background: radial-gradient(ellipse 62% 58% at 50% 50%, rgb(120,184,255) 0%, rgb(59,130,246) 38%, transparent 68%); filter: blur(88px); opacity: 0.83; animation: bp-drift-p5l 19s ease-in-out infinite 3.1s; left: 40%; top: 35%; width: 70%; height: 75%; }

/* Solo accent — sky blue wide wash */
.bp-sa { background: radial-gradient(ellipse 80% 50% at 50% 50%, rgb(120,184,255) 0%, rgb(96,165,250) 42%, transparent 72%); filter: blur(100px); opacity: 0.65; animation: bp-drift-sa 28s ease-in-out infinite 2.8s; left: 10%; top: -40%; width: 100%; height: 80%; }
/* Solo accent — bright sky blue wide wash */
.bp-sb { background: radial-gradient(ellipse 90% 60% at 50% 50%, rgb(120,184,255) 0%, rgb(96,165,250) 50%, transparent 78%); filter: blur(105px); opacity: 0.78; animation: bp-drift-sb 35s ease-in-out infinite 0.2s; left: 15%; top: 45%; width: 110%; height: 85%; }
/* Sky blue accent */
.bp-pu { background: radial-gradient(ellipse 75% 65% at 50% 50%, rgb(147,197,253) 0%, rgb(96,165,250) 38%, transparent 72%); filter: blur(100px); opacity: 0.55; animation: bp-drift-pu 29s ease-in-out infinite 5.8s; left: 5%; top: 5%; width: 85%; height: 85%; }

/* Dark Blue Blobs */
/* Dark Blue 1 — lower-left corner */
.bp-dark1 { background: radial-gradient(ellipse 55% 50% at 50% 50%, rgb(30,58,138) 0%, rgb(70,120,200) 55%, transparent 80%); filter: blur(85px); opacity: 0.70; animation: bp-drift-dark1 40s ease-in-out infinite; left: -20%; top: 50%; width: 65%; height: 70%; }

/* Dark Blue 2 — upper-left */
.bp-dark2 { background: radial-gradient(ellipse 50% 48% at 50% 50%, rgb(25,50,130) 0%, rgb(12,28,80) 55%, transparent 80%); filter: blur(80px); opacity: 0.65; animation: bp-drift-dark2 38s ease-in-out infinite 1.3s; left: -15%; top: -25%; width: 60%; height: 65%; }

/* Dark Blue 3 — center-right */
.bp-dark3 { background: radial-gradient(ellipse 58% 52% at 50% 50%, rgb(35,65,145) 0%, rgb(18,35,95) 55%, transparent 80%); filter: blur(88px); opacity: 0.68; animation: bp-drift-dark3 45s ease-in-out infinite 2.5s; left: 55%; top: 25%; width: 70%; height: 75%; }

/* Navy Blue Blobs */
/* Navy 1 — lower-right */
.bp-navy1 { background: radial-gradient(ellipse 52% 50% at 50% 50%, rgb(25,45,120) 0%, rgb(55,95,175) 55%, transparent 80%); filter: blur(82px); opacity: 0.62; animation: bp-drift-navy1 37s ease-in-out infinite 3.8s; left: 60%; top: 55%; width: 65%; height: 68%; }

/* Navy 2 — top-center */
.bp-navy2 { background: radial-gradient(ellipse 60% 55% at 50% 50%, rgb(30,55,140) 0%, rgb(15,32,85) 50%, transparent 78%); filter: blur(90px); opacity: 0.60; animation: bp-drift-navy2 42s ease-in-out infinite 4.2s; left: 25%; top: -30%; width: 75%; height: 70%; }

/* Varied Blue Blobs */
/* Varied 1 — deep indigo-blue */
.bp-vary1 { background: radial-gradient(ellipse 58% 54% at 50% 50%, rgb(66,133,244) 0%, rgb(37,99,235) 45%, transparent 75%); filter: blur(92px); opacity: 0.72; animation: bp-drift-vary1 36s ease-in-out infinite 1.1s; left: 20%; top: 35%; width: 68%; height: 72%; }

/* Varied 2 — periwinkle-blue */
.bp-vary2 { background: radial-gradient(ellipse 55% 52% at 50% 50%, rgb(79,172,254) 0%, rgb(56,189,248) 48%, transparent 76%); filter: blur(87px); opacity: 0.75; animation: bp-drift-vary2 41s ease-in-out infinite 3.4s; left: 35%; top: -15%; width: 72%; height: 68%; }

@keyframes bp-drift-p1d { 0%,100%{transform:translate(0%,0%)} 33%{transform:translate(8%,7%)} 66%{transform:translate(-6%,-5%)} }
@keyframes bp-drift-p1l { 0%,100%{transform:translate(0%,0%)} 40%{transform:translate(10%,8%)} 75%{transform:translate(-8%,-6%)} }
@keyframes bp-drift-p2d { 0%,100%{transform:translate(0%,0%)} 30%{transform:translate(-7%,9%)} 65%{transform:translate(8%,-7%)} }
@keyframes bp-drift-p2l { 0%,100%{transform:translate(0%,0%)} 45%{transform:translate(-9%,-7%)} 80%{transform:translate(7%,9%)} }
@keyframes bp-drift-p3d { 0%,100%{transform:translate(0%,0%)} 35%{transform:translate(10%,-8%)} 70%{transform:translate(-9%,7%)} }
@keyframes bp-drift-p3l { 0%,100%{transform:translate(0%,0%)} 25%{transform:translate(10%,9%)} 60%{transform:translate(-8%,-7%)} }
@keyframes bp-drift-p4d { 0%,100%{transform:translate(0%,0%)} 40%{transform:translate(9%,-10%)} 75%{transform:translate(-7%,8%)} }
@keyframes bp-drift-p4l { 0%,100%{transform:translate(0%,0%)} 30%{transform:translate(-10%,8%)} 65%{transform:translate(9%,-8%)} }
@keyframes bp-drift-p5d { 0%,100%{transform:translate(0%,0%)} 35%{transform:translate(-9%,8%)} 70%{transform:translate(8%,-7%)} }
@keyframes bp-drift-p5l { 0%,100%{transform:translate(0%,0%)} 45%{transform:translate(9%,9%)} 80%{transform:translate(-7%,-8%)} }
@keyframes bp-drift-sa  { 0%,100%{transform:translate(0%,0%)} 50%{transform:translate(14%,8%)} }
@keyframes bp-drift-sb  { 0%,100%{transform:translate(0%,0%)} 50%{transform:translate(-10%,-9%)} }
@keyframes bp-drift-pu  { 0%,100%{transform:translate(0%,0%)} 50%{transform:translate(12%,-10%)} }

/* Dark & Navy & Varied Blue Keyframes */
@keyframes bp-drift-dark1  { 0%,100%{transform:translate(0%,0%)} 35%{transform:translate(12%,-8%)} 70%{transform:translate(-10%,7%)} }
@keyframes bp-drift-dark2  { 0%,100%{transform:translate(0%,0%)} 40%{transform:translate(-11%,9%)} 75%{transform:translate(8%,-6%)} }
@keyframes bp-drift-dark3  { 0%,100%{transform:translate(0%,0%)} 30%{transform:translate(9%,10%)} 65%{transform:translate(-12%,-8%)} }
@keyframes bp-drift-navy1  { 0%,100%{transform:translate(0%,0%)} 45%{transform:translate(-8%,-7%)} 80%{transform:translate(10%,9%)} }
@keyframes bp-drift-navy2  { 0%,100%{transform:translate(0%,0%)} 33%{transform:translate(11%,8%)} 66%{transform:translate(-9%,-5%)} }
@keyframes bp-drift-vary1  { 0%,100%{transform:translate(0%,0%)} 42%{transform:translate(-10%,10%)} 78%{transform:translate(7%,-7%)} }
@keyframes bp-drift-vary2  { 0%,100%{transform:translate(0%,0%)} 38%{transform:translate(9%,-9%)} 72%{transform:translate(-11%,8%)} }

/* ── Workspace panel — golden yellow blobs ─────────────── */
.ws-blob { position: absolute; border-radius: 50%; pointer-events: none; will-change: transform; }

.ws1 { background: radial-gradient(ellipse 65% 60% at 50% 50%, rgb(250,204,21) 0%, rgb(217,119,6) 45%, transparent 72%); filter: blur(90px); opacity: 0.85; animation: ws-drift1 15s ease-in-out infinite; left: -15%; top: -20%; width: 75%; height: 70%; }
.ws2 { background: radial-gradient(ellipse 60% 58% at 50% 50%, rgb(253,224,71) 0%, rgb(250,204,21) 42%, transparent 70%); filter: blur(85px); opacity: 0.82; animation: ws-drift2 18s ease-in-out infinite 1.2s; left: 50%; top: -15%; width: 70%; height: 75%; }
.ws3 { background: radial-gradient(ellipse 70% 65% at 50% 50%, rgb(245,158,11) 0%, rgb(217,119,6) 50%, transparent 75%); filter: blur(95px); opacity: 0.80; animation: ws-drift3 20s ease-in-out infinite 2.1s; left: -10%; top: 35%; width: 80%; height: 80%; }
.ws4 { background: radial-gradient(ellipse 58% 62% at 50% 50%, rgb(251,191,36) 0%, rgb(245,158,11) 45%, transparent 72%); filter: blur(88px); opacity: 0.78; animation: ws-drift4 16s ease-in-out infinite 0.8s; left: 45%; top: 40%; width: 72%; height: 75%; }
.ws5 { background: radial-gradient(ellipse 65% 58% at 50% 50%, rgb(253,224,71) 0%, rgb(250,204,21) 48%, transparent 70%); filter: blur(92px); opacity: 0.83; animation: ws-drift5 19s ease-in-out infinite 3.2s; left: 60%; top: 55%; width: 68%; height: 70%; }
.ws6 { background: radial-gradient(ellipse 62% 60% at 50% 50%, rgb(217,119,6) 0%, rgb(245,150,35) 50%, transparent 75%); filter: blur(86px); opacity: 0.75; animation: ws-drift6 17s ease-in-out infinite 1.5s; left: 15%; top: 15%; width: 65%; height: 72%; }
.ws7 { background: radial-gradient(ellipse 60% 56% at 50% 50%, rgb(251,146,60) 0%, rgb(217,119,6) 45%, transparent 70%); filter: blur(90px); opacity: 0.79; animation: ws-drift7 21s ease-in-out infinite 2.8s; left: -20%; top: 60%; width: 75%; height: 68%; }
.ws8 { background: radial-gradient(ellipse 58% 62% at 50% 50%, rgb(250,204,21) 0%, rgb(245,158,11) 42%, transparent 72%); filter: blur(87px); opacity: 0.81; animation: ws-drift8 18s ease-in-out infinite 0.5s; left: 55%; top: 10%; width: 70%; height: 76%; }
.ws9 { background: radial-gradient(ellipse 64% 59% at 50% 50%, rgb(217,119,6) 0%, rgb(245,150,35) 48%, transparent 70%); filter: blur(91px); opacity: 0.77; animation: ws-drift9 22s ease-in-out infinite 2.3s; left: 25%; top: 55%; width: 68%; height: 74%; }
.ws10 { background: radial-gradient(ellipse 61% 61% at 50% 50%, rgb(251,191,36) 0%, rgb(217,119,6) 45%, transparent 73%); filter: blur(89px); opacity: 0.80; animation: ws-drift10 19s ease-in-out infinite 3.8s; left: 70%; top: 30%; width: 65%; height: 70%; }

@keyframes ws-drift1 { 0%,100%{transform:translate(0%,0%)} 33%{transform:translate(10%,-8%)} 66%{transform:translate(-9%,7%)} }
@keyframes ws-drift2 { 0%,100%{transform:translate(0%,0%)} 40%{transform:translate(-11%,9%)} 75%{transform:translate(8%,-6%)} }
@keyframes ws-drift3 { 0%,100%{transform:translate(0%,0%)} 30%{transform:translate(9%,10%)} 65%{transform:translate(-12%,-8%)} }
@keyframes ws-drift4 { 0%,100%{transform:translate(0%,0%)} 45%{transform:translate(-8%,-7%)} 80%{transform:translate(10%,9%)} }
@keyframes ws-drift5 { 0%,100%{transform:translate(0%,0%)} 35%{transform:translate(11%,8%)} 70%{transform:translate(-9%,-5%)} }
@keyframes ws-drift6 { 0%,100%{transform:translate(0%,0%)} 42%{transform:translate(-10%,10%)} 78%{transform:translate(7%,-7%)} }
@keyframes ws-drift7 { 0%,100%{transform:translate(0%,0%)} 38%{transform:translate(9%,-9%)} 72%{transform:translate(-11%,8%)} }
@keyframes ws-drift8 { 0%,100%{transform:translate(0%,0%)} 50%{transform:translate(-7%,8%)} 85%{transform:translate(12%,-6%)} }
@keyframes ws-drift9 { 0%,100%{transform:translate(0%,0%)} 36%{transform:translate(-12%,-9%)} 68%{transform:translate(10%,8%)} }
@keyframes ws-drift10 { 0%,100%{transform:translate(0%,0%)} 44%{transform:translate(8%,11%)} 77%{transform:translate(-9%,-7%)} }

/* ── Studio panel — vibrant green blobs ─────────────── */
.st-blob { position: absolute; border-radius: 50%; pointer-events: none; will-change: transform; }

.st1 { background: radial-gradient(ellipse 65% 60% at 50% 50%, rgb(34,197,94) 0%, rgb(16,185,129) 45%, transparent 72%); filter: blur(90px); opacity: 0.86; animation: st-drift1 15s ease-in-out infinite; left: -15%; top: -20%; width: 75%; height: 70%; }
.st2 { background: radial-gradient(ellipse 60% 58% at 50% 50%, rgb(52,211,153) 0%, rgb(34,197,94) 42%, transparent 70%); filter: blur(85px); opacity: 0.83; animation: st-drift2 18s ease-in-out infinite 1.2s; left: 50%; top: -15%; width: 70%; height: 75%; }
.st3 { background: radial-gradient(ellipse 70% 65% at 50% 50%, rgb(16,185,129) 0%, rgb(5,150,105) 50%, transparent 75%); filter: blur(95px); opacity: 0.81; animation: st-drift3 20s ease-in-out infinite 2.1s; left: -10%; top: 35%; width: 80%; height: 80%; }
.st4 { background: radial-gradient(ellipse 58% 62% at 50% 50%, rgb(110,231,183) 0%, rgb(34,197,94) 45%, transparent 72%); filter: blur(88px); opacity: 0.79; animation: st-drift4 16s ease-in-out infinite 0.8s; left: 45%; top: 40%; width: 72%; height: 75%; }
.st5 { background: radial-gradient(ellipse 65% 58% at 50% 50%, rgb(52,211,153) 0%, rgb(16,185,129) 48%, transparent 70%); filter: blur(92px); opacity: 0.84; animation: st-drift5 19s ease-in-out infinite 3.2s; left: 60%; top: 55%; width: 68%; height: 70%; }
.st6 { background: radial-gradient(ellipse 62% 60% at 50% 50%, rgb(5,150,105) 0%, rgb(5,120,95) 50%, transparent 75%); filter: blur(86px); opacity: 0.76; animation: st-drift6 17s ease-in-out infinite 1.5s; left: 15%; top: 15%; width: 65%; height: 72%; }
.st7 { background: radial-gradient(ellipse 60% 56% at 50% 50%, rgb(45,212,191) 0%, rgb(16,185,129) 45%, transparent 70%); filter: blur(90px); opacity: 0.80; animation: st-drift7 21s ease-in-out infinite 2.8s; left: -20%; top: 60%; width: 75%; height: 68%; }
.st8 { background: radial-gradient(ellipse 58% 62% at 50% 50%, rgb(34,197,94) 0%, rgb(16,185,129) 42%, transparent 72%); filter: blur(87px); opacity: 0.82; animation: st-drift8 18s ease-in-out infinite 0.5s; left: 55%; top: 10%; width: 70%; height: 76%; }
.st9 { background: radial-gradient(ellipse 64% 59% at 50% 50%, rgb(5,150,105) 0%, rgb(4,120,85) 48%, transparent 70%); filter: blur(91px); opacity: 0.78; animation: st-drift9 22s ease-in-out infinite 2.3s; left: 25%; top: 55%; width: 68%; height: 74%; }
.st10 { background: radial-gradient(ellipse 61% 61% at 50% 50%, rgb(110,231,183) 0%, rgb(34,197,94) 45%, transparent 73%); filter: blur(89px); opacity: 0.81; animation: st-drift10 19s ease-in-out infinite 3.8s; left: 70%; top: 30%; width: 65%; height: 70%; }

@keyframes st-drift1 { 0%,100%{transform:translate(0%,0%)} 33%{transform:translate(10%,-8%)} 66%{transform:translate(-9%,7%)} }
@keyframes st-drift2 { 0%,100%{transform:translate(0%,0%)} 40%{transform:translate(-11%,9%)} 75%{transform:translate(8%,-6%)} }
@keyframes st-drift3 { 0%,100%{transform:translate(0%,0%)} 30%{transform:translate(9%,10%)} 65%{transform:translate(-12%,-8%)} }
@keyframes st-drift4 { 0%,100%{transform:translate(0%,0%)} 45%{transform:translate(-8%,-7%)} 80%{transform:translate(10%,9%)} }
@keyframes st-drift5 { 0%,100%{transform:translate(0%,0%)} 35%{transform:translate(11%,8%)} 70%{transform:translate(-9%,-5%)} }
@keyframes st-drift6 { 0%,100%{transform:translate(0%,0%)} 42%{transform:translate(-10%,10%)} 78%{transform:translate(7%,-7%)} }
@keyframes st-drift7 { 0%,100%{transform:translate(0%,0%)} 38%{transform:translate(9%,-9%)} 72%{transform:translate(-11%,8%)} }
@keyframes st-drift8 { 0%,100%{transform:translate(0%,0%)} 50%{transform:translate(-7%,8%)} 85%{transform:translate(12%,-6%)} }
@keyframes st-drift9 { 0%,100%{transform:translate(0%,0%)} 36%{transform:translate(-12%,-9%)} 68%{transform:translate(10%,8%)} }
@keyframes st-drift10 { 0%,100%{transform:translate(0%,0%)} 44%{transform:translate(8%,11%)} 77%{transform:translate(-9%,-7%)} }

/* ── Core panel — vibrant violet blobs ─────────────── */
.cr-blob { position: absolute; border-radius: 50%; pointer-events: none; will-change: transform; }

.cr1  { background: radial-gradient(ellipse 65% 60% at 50% 50%, rgb(167,139,250) 0%, rgb(139,92,246) 45%, transparent 72%);  filter: blur(90px);  opacity: 0.86; animation: cr-drift1  15s ease-in-out infinite;       left: -15%; top: -20%; width: 75%; height: 70%; }
.cr2  { background: radial-gradient(ellipse 60% 58% at 50% 50%, rgb(196,181,253) 0%, rgb(167,139,250) 42%, transparent 70%); filter: blur(85px);  opacity: 0.83; animation: cr-drift2  18s ease-in-out infinite 1.2s;   left:  50%; top: -15%; width: 70%; height: 75%; }
.cr3  { background: radial-gradient(ellipse 70% 65% at 50% 50%, rgb(139,92,246)  0%, rgb(109,40,217)  50%, transparent 75%); filter: blur(95px);  opacity: 0.81; animation: cr-drift3  20s ease-in-out infinite 2.1s;   left: -10%; top:  35%; width: 80%; height: 80%; }
.cr4  { background: radial-gradient(ellipse 58% 62% at 50% 50%, rgb(167,139,250) 0%, rgb(124,58,237)  45%, transparent 72%); filter: blur(88px);  opacity: 0.79; animation: cr-drift4  16s ease-in-out infinite 0.8s;   left:  45%; top:  40%; width: 72%; height: 75%; }
.cr5  { background: radial-gradient(ellipse 65% 58% at 50% 50%, rgb(216,180,254) 0%, rgb(167,139,250) 48%, transparent 70%); filter: blur(92px);  opacity: 0.84; animation: cr-drift5  19s ease-in-out infinite 3.2s;   left:  60%; top:  55%; width: 68%; height: 70%; }
.cr6  { background: radial-gradient(ellipse 62% 60% at 50% 50%, rgb(109,40,217)  0%, rgb(91,33,182)   50%, transparent 75%); filter: blur(86px);  opacity: 0.76; animation: cr-drift6  17s ease-in-out infinite 1.5s;   left:  15%; top:  15%; width: 65%; height: 72%; }
.cr7  { background: radial-gradient(ellipse 60% 56% at 50% 50%, rgb(232,121,249) 0%, rgb(167,139,250) 45%, transparent 70%); filter: blur(90px);  opacity: 0.80; animation: cr-drift7  21s ease-in-out infinite 2.8s;   left: -20%; top:  60%; width: 75%; height: 68%; }
.cr8  { background: radial-gradient(ellipse 58% 62% at 50% 50%, rgb(139,92,246)  0%, rgb(124,58,237)  42%, transparent 72%); filter: blur(87px);  opacity: 0.82; animation: cr-drift8  18s ease-in-out infinite 0.5s;   left:  55%; top:  10%; width: 70%; height: 76%; }
.cr9  { background: radial-gradient(ellipse 64% 59% at 50% 50%, rgb(109,40,217)  0%, rgb(76,29,149)   48%, transparent 70%); filter: blur(91px);  opacity: 0.78; animation: cr-drift9  22s ease-in-out infinite 2.3s;   left:  25%; top:  55%; width: 68%; height: 74%; }
.cr10 { background: radial-gradient(ellipse 61% 61% at 50% 50%, rgb(196,181,253) 0%, rgb(139,92,246)  45%, transparent 73%); filter: blur(89px);  opacity: 0.81; animation: cr-drift10 19s ease-in-out infinite 3.8s;   left:  70%; top:  30%; width: 65%; height: 70%; }

@keyframes cr-drift1  { 0%,100%{transform:translate(0%,0%)} 33%{transform:translate(10%,-8%)}  66%{transform:translate(-9%,7%)}  }
@keyframes cr-drift2  { 0%,100%{transform:translate(0%,0%)} 40%{transform:translate(-11%,9%)} 75%{transform:translate(8%,-6%)}  }
@keyframes cr-drift3  { 0%,100%{transform:translate(0%,0%)} 30%{transform:translate(9%,10%)}  65%{transform:translate(-12%,-8%)} }
@keyframes cr-drift4  { 0%,100%{transform:translate(0%,0%)} 45%{transform:translate(-8%,-7%)} 80%{transform:translate(10%,9%)}  }
@keyframes cr-drift5  { 0%,100%{transform:translate(0%,0%)} 35%{transform:translate(11%,8%)}  70%{transform:translate(-9%,-5%)} }
@keyframes cr-drift6  { 0%,100%{transform:translate(0%,0%)} 42%{transform:translate(-10%,10%)} 78%{transform:translate(7%,-7%)} }
@keyframes cr-drift7  { 0%,100%{transform:translate(0%,0%)} 38%{transform:translate(9%,-9%)}  72%{transform:translate(-11%,8%)} }
@keyframes cr-drift8  { 0%,100%{transform:translate(0%,0%)} 50%{transform:translate(-7%,8%)}  85%{transform:translate(12%,-6%)} }
@keyframes cr-drift9  { 0%,100%{transform:translate(0%,0%)} 36%{transform:translate(-12%,-9%)} 68%{transform:translate(10%,8%)} }
@keyframes cr-drift10 { 0%,100%{transform:translate(0%,0%)} 44%{transform:translate(8%,11%)}  77%{transform:translate(-9%,-7%)} }

/* ========== VIBRANT BACKGROUNDS PAGE STYLES ========== */

/* ── Workspace Vibrant Blobs — Golden Yellow ─────────────── */
.ws-blob-vb { position: absolute; border-radius: 50%; pointer-events: none; will-change: transform; }

.ws1-vb { background: radial-gradient(ellipse at 50% 50%, rgb(253,224,71) 0%, rgb(250,204,21) 40%, transparent 70%); filter: blur(80px); opacity: 0.90; animation: ws-vb-drift1 9s ease-in-out infinite; left: 10%; top: 15%; width: 50%; height: 48%; }
.ws2-vb { background: radial-gradient(ellipse at 50% 50%, rgb(217,119,6) 0%, rgb(245,150,35) 45%, transparent 72%); filter: blur(85px); opacity: 0.85; animation: ws-vb-drift2 10s ease-in-out infinite 0.3s; left: 60%; top: 10%; width: 55%; height: 52%; }
.ws3-vb { background: radial-gradient(ellipse at 50% 50%, rgb(251,146,60) 0%, rgb(217,119,6) 42%, transparent 68%); filter: blur(78px); opacity: 0.88; animation: ws-vb-drift3 9.5s ease-in-out infinite 0.6s; left: 5%; top: 55%; width: 56%; height: 54%; }
.ws4-vb { background: radial-gradient(ellipse at 50% 50%, rgb(245,158,11) 0%, rgb(217,119,6) 45%, transparent 70%); filter: blur(82px); opacity: 0.87; animation: ws-vb-drift4 8.8s ease-in-out infinite 0.9s; left: 55%; top: 50%; width: 52%; height: 50%; }
.ws5-vb { background: radial-gradient(ellipse at 50% 50%, rgb(245,150,35) 0%, rgb(200,110,40) 50%, transparent 75%); filter: blur(86px); opacity: 0.80; animation: ws-vb-drift5 10.2s ease-in-out infinite 1.2s; left: 30%; top: 30%; width: 58%; height: 56%; }
.ws6-vb { background: radial-gradient(ellipse at 50% 50%, rgb(251,191,36) 0%, rgb(245,158,11) 48%, transparent 70%); filter: blur(79px); opacity: 0.86; animation: ws-vb-drift6 9.3s ease-in-out infinite 1.5s; left: 70%; top: 65%; width: 54%; height: 52%; }
.ws7-vb { background: radial-gradient(ellipse at 50% 50%, rgb(250,204,21) 0%, rgb(217,119,6) 42%, transparent 68%); filter: blur(84px); opacity: 0.84; animation: ws-vb-drift7 8.9s ease-in-out infinite 1.8s; left: 15%; top: 70%; width: 50%; height: 48%; }
.ws8-vb { background: radial-gradient(ellipse at 50% 50%, rgb(217,119,6) 0%, rgb(245,150,35) 45%, transparent 72%); filter: blur(81px); opacity: 0.89; animation: ws-vb-drift8 9.7s ease-in-out infinite 0.4s; left: 65%; top: 25%; width: 53%; height: 51%; }
.ws9-vb { background: radial-gradient(ellipse at 50% 50%, rgb(251,146,60) 0%, rgb(217,119,6) 48%, transparent 70%); filter: blur(83px); opacity: 0.82; animation: ws-vb-drift9 10.1s ease-in-out infinite 2.1s; left: 25%; top: 55%; width: 55%; height: 53%; }
.ws10-vb { background: radial-gradient(ellipse at 50% 50%, rgb(245,158,11) 0%, rgb(217,119,6) 42%, transparent 68%); filter: blur(80px); opacity: 0.87; animation: ws-vb-drift10 9.4s ease-in-out infinite 2.4s; left: 50%; top: 70%; width: 52%; height: 50%; }
.ws11-vb { background: radial-gradient(ellipse at 50% 50%, rgb(245,150,35) 0%, rgb(200,110,40) 50%, transparent 75%); filter: blur(85px); opacity: 0.79; animation: ws-vb-drift11 10.3s ease-in-out infinite 2.7s; left: 10%; top: 35%; width: 57%; height: 55%; }
.ws12-vb { background: radial-gradient(ellipse at 50% 50%, rgb(253,224,71) 0%, rgb(245,158,11) 40%, transparent 70%); filter: blur(79px); opacity: 0.91; animation: ws-vb-drift12 9.2s ease-in-out infinite 3s; left: 70%; top: 40%; width: 50%; height: 48%; }
.ws13-vb { background: radial-gradient(ellipse at 50% 50%, rgb(251,191,36) 0%, rgb(217,119,6) 45%, transparent 72%); filter: blur(82px); opacity: 0.85; animation: ws-vb-drift13 9.8s ease-in-out infinite 3.3s; left: 35%; top: 10%; width: 54%; height: 52%; }
.ws14-vb { background: radial-gradient(ellipse at 50% 50%, rgb(245,158,11) 0%, rgb(245,150,35) 48%, transparent 70%); filter: blur(81px); opacity: 0.88; animation: ws-vb-drift14 9.5s ease-in-out infinite 3.6s; left: 60%; top: 75%; width: 53%; height: 51%; }
.ws15-vb { background: radial-gradient(ellipse at 50% 50%, rgb(217,119,6) 0%, rgb(200,110,40) 42%, transparent 68%); filter: blur(84px); opacity: 0.81; animation: ws-vb-drift15 10s ease-in-out infinite 3.9s; left: 20%; top: 65%; width: 55%; height: 53%; }

@keyframes ws-vb-drift1 { 0%,100%{transform:translate(0%,0%)} 25%{transform:translate(35%,-28%)} 50%{transform:translate(-25%,22%)} 75%{transform:translate(28%,18%)} }
@keyframes ws-vb-drift2 { 0%,100%{transform:translate(0%,0%)} 25%{transform:translate(-32%,25%)} 50%{transform:translate(30%,-20%)} 75%{transform:translate(-25%,-15%)} }
@keyframes ws-vb-drift3 { 0%,100%{transform:translate(0%,0%)} 25%{transform:translate(28%,32%)} 50%{transform:translate(-30%,-25%)} 75%{transform:translate(20%,-18%)} }
@keyframes ws-vb-drift4 { 0%,100%{transform:translate(0%,0%)} 25%{transform:translate(-30%,-28%)} 50%{transform:translate(32%,20%)} 75%{transform:translate(-22%,25%)} }
@keyframes ws-vb-drift5 { 0%,100%{transform:translate(0%,0%)} 25%{transform:translate(33%,22%)} 50%{transform:translate(-28%,-30%)} 75%{transform:translate(25%,28%)} }
@keyframes ws-vb-drift6 { 0%,100%{transform:translate(0%,0%)} 25%{transform:translate(-25%,35%)} 50%{transform:translate(30%,-22%)} 75%{transform:translate(-28%,-20%)} }
@keyframes ws-vb-drift7 { 0%,100%{transform:translate(0%,0%)} 25%{transform:translate(30%,-25%)} 50%{transform:translate(-32%,28%)} 75%{transform:translate(22%,-28%)} }
@keyframes ws-vb-drift8 { 0%,100%{transform:translate(0%,0%)} 25%{transform:translate(-28%,-30%)} 50%{transform:translate(28%,25%)} 75%{transform:translate(-30%,22%)} }
@keyframes ws-vb-drift9 { 0%,100%{transform:translate(0%,0%)} 25%{transform:translate(32%,28%)} 50%{transform:translate(-30%,-25%)} 75%{transform:translate(25%,30%)} }
@keyframes ws-vb-drift10 { 0%,100%{transform:translate(0%,0%)} 25%{transform:translate(-30%,32%)} 50%{transform:translate(28%,-28%)} 75%{transform:translate(-25%,-25%)} }
@keyframes ws-vb-drift11 { 0%,100%{transform:translate(0%,0%)} 25%{transform:translate(28%,-28%)} 50%{transform:translate(-32%,25%)} 75%{transform:translate(30%,20%)} }
@keyframes ws-vb-drift12 { 0%,100%{transform:translate(0%,0%)} 25%{transform:translate(-32%,28%)} 50%{transform:translate(30%,-30%)} 75%{transform:translate(-28%,-20%)} }
@keyframes ws-vb-drift13 { 0%,100%{transform:translate(0%,0%)} 25%{transform:translate(30%,32%)} 50%{transform:translate(-28%,-28%)} 75%{transform:translate(25%,-25%)} }
@keyframes ws-vb-drift14 { 0%,100%{transform:translate(0%,0%)} 25%{transform:translate(-25%,-32%)} 50%{transform:translate(32%,28%)} 75%{transform:translate(-30%,22%)} }
@keyframes ws-vb-drift15 { 0%,100%{transform:translate(0%,0%)} 25%{transform:translate(25%,28%)} 50%{transform:translate(-30%,-32%)} 75%{transform:translate(28%,-28%)} }

/* ── Studio Vibrant Blobs — Green ─────────────── */
.st-blob-vb { position: absolute; border-radius: 50%; pointer-events: none; will-change: transform; }

.st1-vb { background: radial-gradient(ellipse at 50% 50%, rgb(52,211,153) 0%, rgb(34,197,94) 40%, transparent 70%); filter: blur(80px); opacity: 0.90; animation: st-vb-drift1 9s ease-in-out infinite; left: 10%; top: 15%; width: 50%; height: 48%; }
.st2-vb { background: radial-gradient(ellipse at 50% 50%, rgb(6,165,116) 0%, rgb(6,132,94) 45%, transparent 72%); filter: blur(85px); opacity: 0.85; animation: st-vb-drift2 10s ease-in-out infinite 0.3s; left: 60%; top: 10%; width: 55%; height: 52%; }
.st3-vb { background: radial-gradient(ellipse at 50% 50%, rgb(45,212,191) 0%, rgb(16,185,129) 42%, transparent 68%); filter: blur(78px); opacity: 0.88; animation: st-vb-drift3 9.5s ease-in-out infinite 0.6s; left: 5%; top: 55%; width: 56%; height: 54%; }
.st4-vb { background: radial-gradient(ellipse at 50% 50%, rgb(16,185,129) 0%, rgb(6,165,116) 45%, transparent 70%); filter: blur(82px); opacity: 0.87; animation: st-vb-drift4 8.8s ease-in-out infinite 0.9s; left: 55%; top: 50%; width: 52%; height: 50%; }
.st5-vb { background: radial-gradient(ellipse at 50% 50%, rgb(6,132,94) 0%, rgb(4,110,77) 50%, transparent 75%); filter: blur(86px); opacity: 0.80; animation: st-vb-drift5 10.2s ease-in-out infinite 1.2s; left: 30%; top: 30%; width: 58%; height: 56%; }
.st6-vb { background: radial-gradient(ellipse at 50% 50%, rgb(110,231,183) 0%, rgb(34,197,94) 48%, transparent 70%); filter: blur(79px); opacity: 0.86; animation: st-vb-drift6 9.3s ease-in-out infinite 1.5s; left: 70%; top: 65%; width: 54%; height: 52%; }
.st7-vb { background: radial-gradient(ellipse at 50% 50%, rgb(34,197,94) 0%, rgb(16,185,129) 42%, transparent 68%); filter: blur(84px); opacity: 0.84; animation: st-vb-drift7 8.9s ease-in-out infinite 1.8s; left: 15%; top: 70%; width: 50%; height: 48%; }
.st8-vb { background: radial-gradient(ellipse at 50% 50%, rgb(6,165,116) 0%, rgb(6,132,94) 45%, transparent 72%); filter: blur(81px); opacity: 0.89; animation: st-vb-drift8 9.7s ease-in-out infinite 0.4s; left: 65%; top: 25%; width: 53%; height: 51%; }
.st9-vb { background: radial-gradient(ellipse at 50% 50%, rgb(45,212,191) 0%, rgb(16,185,129) 48%, transparent 70%); filter: blur(83px); opacity: 0.82; animation: st-vb-drift9 10.1s ease-in-out infinite 2.1s; left: 25%; top: 55%; width: 55%; height: 53%; }
.st10-vb { background: radial-gradient(ellipse at 50% 50%, rgb(16,185,129) 0%, rgb(6,165,116) 42%, transparent 68%); filter: blur(80px); opacity: 0.87; animation: st-vb-drift10 9.4s ease-in-out infinite 2.4s; left: 50%; top: 70%; width: 52%; height: 50%; }
.st11-vb { background: radial-gradient(ellipse at 50% 50%, rgb(6,132,94) 0%, rgb(4,110,77) 50%, transparent 75%); filter: blur(85px); opacity: 0.79; animation: st-vb-drift11 10.3s ease-in-out infinite 2.7s; left: 10%; top: 35%; width: 57%; height: 55%; }
.st12-vb { background: radial-gradient(ellipse at 50% 50%, rgb(52,211,153) 0%, rgb(16,185,129) 40%, transparent 70%); filter: blur(79px); opacity: 0.91; animation: st-vb-drift12 9.2s ease-in-out infinite 3s; left: 70%; top: 40%; width: 50%; height: 48%; }
.st13-vb { background: radial-gradient(ellipse at 50% 50%, rgb(110,231,183) 0%, rgb(16,185,129) 45%, transparent 72%); filter: blur(82px); opacity: 0.85; animation: st-vb-drift13 9.8s ease-in-out infinite 3.3s; left: 35%; top: 10%; width: 54%; height: 52%; }
.st14-vb { background: radial-gradient(ellipse at 50% 50%, rgb(16,185,129) 0%, rgb(6,165,116) 48%, transparent 70%); filter: blur(81px); opacity: 0.88; animation: st-vb-drift14 9.5s ease-in-out infinite 3.6s; left: 60%; top: 75%; width: 53%; height: 51%; }
.st15-vb { background: radial-gradient(ellipse at 50% 50%, rgb(6,165,116) 0%, rgb(4,110,77) 42%, transparent 68%); filter: blur(84px); opacity: 0.81; animation: st-vb-drift15 10s ease-in-out infinite 3.9s; left: 20%; top: 65%; width: 55%; height: 53%; }

@keyframes st-vb-drift1 { 0%,100%{transform:translate(0%,0%)} 25%{transform:translate(35%,-28%)} 50%{transform:translate(-25%,22%)} 75%{transform:translate(28%,18%)} }
@keyframes st-vb-drift2 { 0%,100%{transform:translate(0%,0%)} 25%{transform:translate(-32%,25%)} 50%{transform:translate(30%,-20%)} 75%{transform:translate(-25%,-15%)} }
@keyframes st-vb-drift3 { 0%,100%{transform:translate(0%,0%)} 25%{transform:translate(28%,32%)} 50%{transform:translate(-30%,-25%)} 75%{transform:translate(20%,-18%)} }
@keyframes st-vb-drift4 { 0%,100%{transform:translate(0%,0%)} 25%{transform:translate(-30%,-28%)} 50%{transform:translate(32%,20%)} 75%{transform:translate(-22%,25%)} }
@keyframes st-vb-drift5 { 0%,100%{transform:translate(0%,0%)} 25%{transform:translate(33%,22%)} 50%{transform:translate(-28%,-30%)} 75%{transform:translate(25%,28%)} }
@keyframes st-vb-drift6 { 0%,100%{transform:translate(0%,0%)} 25%{transform:translate(-25%,35%)} 50%{transform:translate(30%,-22%)} 75%{transform:translate(-28%,-20%)} }
@keyframes st-vb-drift7 { 0%,100%{transform:translate(0%,0%)} 25%{transform:translate(30%,-25%)} 50%{transform:translate(-32%,28%)} 75%{transform:translate(22%,-28%)} }
@keyframes st-vb-drift8 { 0%,100%{transform:translate(0%,0%)} 25%{transform:translate(-28%,-30%)} 50%{transform:translate(28%,25%)} 75%{transform:translate(-30%,22%)} }
@keyframes st-vb-drift9 { 0%,100%{transform:translate(0%,0%)} 25%{transform:translate(32%,28%)} 50%{transform:translate(-30%,-25%)} 75%{transform:translate(25%,30%)} }
@keyframes st-vb-drift10 { 0%,100%{transform:translate(0%,0%)} 25%{transform:translate(-30%,32%)} 50%{transform:translate(28%,-28%)} 75%{transform:translate(-25%,-25%)} }
@keyframes st-vb-drift11 { 0%,100%{transform:translate(0%,0%)} 25%{transform:translate(28%,-28%)} 50%{transform:translate(-32%,25%)} 75%{transform:translate(30%,20%)} }
@keyframes st-vb-drift12 { 0%,100%{transform:translate(0%,0%)} 25%{transform:translate(-32%,28%)} 50%{transform:translate(30%,-30%)} 75%{transform:translate(-28%,-20%)} }
@keyframes st-vb-drift13 { 0%,100%{transform:translate(0%,0%)} 25%{transform:translate(30%,32%)} 50%{transform:translate(-28%,-28%)} 75%{transform:translate(25%,-25%)} }
@keyframes st-vb-drift14 { 0%,100%{transform:translate(0%,0%)} 25%{transform:translate(-25%,-32%)} 50%{transform:translate(32%,28%)} 75%{transform:translate(-30%,22%)} }
@keyframes st-vb-drift15 { 0%,100%{transform:translate(0%,0%)} 25%{transform:translate(25%,28%)} 50%{transform:translate(-30%,-32%)} 75%{transform:translate(28%,-28%)} }

/* ── Blueprint Vibrant Blobs — Blue ─────────────── */
.bp-blob-vb { position: absolute; border-radius: 50%; pointer-events: none; will-change: transform; }

.bp1-vb { background: radial-gradient(ellipse at 50% 50%, rgb(96,165,250) 0%, rgb(59,130,246) 40%, transparent 70%); filter: blur(80px); opacity: 0.90; animation: bp-vb-drift1 9s ease-in-out infinite; left: 10%; top: 15%; width: 50%; height: 48%; }
.bp2-vb { background: radial-gradient(ellipse at 50% 50%, rgb(30,58,138) 0%, rgb(70,120,200) 45%, transparent 72%); filter: blur(85px); opacity: 0.85; animation: bp-vb-drift2 10s ease-in-out infinite 0.3s; left: 60%; top: 10%; width: 55%; height: 52%; }
.bp3-vb { background: radial-gradient(ellipse at 50% 50%, rgb(147,197,253) 0%, rgb(96,165,250) 42%, transparent 68%); filter: blur(78px); opacity: 0.88; animation: bp-vb-drift3 9.5s ease-in-out infinite 0.6s; left: 5%; top: 55%; width: 56%; height: 54%; }
.bp4-vb { background: radial-gradient(ellipse at 50% 50%, rgb(56,189,248) 0%, rgb(34,197,234) 45%, transparent 70%); filter: blur(82px); opacity: 0.87; animation: bp-vb-drift4 8.8s ease-in-out infinite 0.9s; left: 55%; top: 50%; width: 52%; height: 50%; }
.bp5-vb { background: radial-gradient(ellipse at 50% 50%, rgb(25,45,120) 0%, rgb(55,95,175) 50%, transparent 75%); filter: blur(86px); opacity: 0.80; animation: bp-vb-drift5 10.2s ease-in-out infinite 1.2s; left: 30%; top: 30%; width: 58%; height: 56%; }
.bp6-vb { background: radial-gradient(ellipse at 50% 50%, rgb(120,184,255) 0%, rgb(59,130,246) 48%, transparent 70%); filter: blur(79px); opacity: 0.86; animation: bp-vb-drift6 9.3s ease-in-out infinite 1.5s; left: 70%; top: 65%; width: 54%; height: 52%; }
.bp7-vb { background: radial-gradient(ellipse at 50% 50%, rgb(59,130,246) 0%, rgb(30,58,138) 42%, transparent 68%); filter: blur(84px); opacity: 0.84; animation: bp-vb-drift7 8.9s ease-in-out infinite 1.8s; left: 15%; top: 70%; width: 50%; height: 48%; }
.bp8-vb { background: radial-gradient(ellipse at 50% 50%, rgb(30,58,138) 0%, rgb(70,120,200) 45%, transparent 72%); filter: blur(81px); opacity: 0.89; animation: bp-vb-drift8 9.7s ease-in-out infinite 0.4s; left: 65%; top: 25%; width: 53%; height: 51%; }
.bp9-vb { background: radial-gradient(ellipse at 50% 50%, rgb(147,197,253) 0%, rgb(96,165,250) 48%, transparent 70%); filter: blur(83px); opacity: 0.82; animation: bp-vb-drift9 10.1s ease-in-out infinite 2.1s; left: 25%; top: 55%; width: 55%; height: 53%; }
.bp10-vb { background: radial-gradient(ellipse at 50% 50%, rgb(96,165,250) 0%, rgb(56,189,248) 42%, transparent 68%); filter: blur(80px); opacity: 0.87; animation: bp-vb-drift10 9.4s ease-in-out infinite 2.4s; left: 50%; top: 70%; width: 52%; height: 50%; }
.bp11-vb { background: radial-gradient(ellipse at 50% 50%, rgb(25,45,120) 0%, rgb(55,95,175) 50%, transparent 75%); filter: blur(85px); opacity: 0.79; animation: bp-vb-drift11 10.3s ease-in-out infinite 2.7s; left: 10%; top: 35%; width: 57%; height: 55%; }
.bp12-vb { background: radial-gradient(ellipse at 50% 50%, rgb(96,165,250) 0%, rgb(59,130,246) 40%, transparent 70%); filter: blur(79px); opacity: 0.91; animation: bp-vb-drift12 9.2s ease-in-out infinite 3s; left: 70%; top: 40%; width: 50%; height: 48%; }
.bp13-vb { background: radial-gradient(ellipse at 50% 50%, rgb(120,184,255) 0%, rgb(59,130,246) 45%, transparent 72%); filter: blur(82px); opacity: 0.85; animation: bp-vb-drift13 9.8s ease-in-out infinite 3.3s; left: 35%; top: 10%; width: 54%; height: 52%; }
.bp14-vb { background: radial-gradient(ellipse at 50% 50%, rgb(56,189,248) 0%, rgb(30,58,138) 48%, transparent 70%); filter: blur(81px); opacity: 0.88; animation: bp-vb-drift14 9.5s ease-in-out infinite 3.6s; left: 60%; top: 75%; width: 53%; height: 51%; }
.bp15-vb { background: radial-gradient(ellipse at 50% 50%, rgb(30,58,138) 0%, rgb(70,120,200) 42%, transparent 68%); filter: blur(84px); opacity: 0.81; animation: bp-vb-drift15 10s ease-in-out infinite 3.9s; left: 20%; top: 65%; width: 55%; height: 53%; }

@keyframes bp-vb-drift1 { 0%,100%{transform:translate(0%,0%)} 25%{transform:translate(35%,-28%)} 50%{transform:translate(-25%,22%)} 75%{transform:translate(28%,18%)} }
@keyframes bp-vb-drift2 { 0%,100%{transform:translate(0%,0%)} 25%{transform:translate(-32%,25%)} 50%{transform:translate(30%,-20%)} 75%{transform:translate(-25%,-15%)} }
@keyframes bp-vb-drift3 { 0%,100%{transform:translate(0%,0%)} 25%{transform:translate(28%,32%)} 50%{transform:translate(-30%,-25%)} 75%{transform:translate(20%,-18%)} }
@keyframes bp-vb-drift4 { 0%,100%{transform:translate(0%,0%)} 25%{transform:translate(-30%,-28%)} 50%{transform:translate(32%,20%)} 75%{transform:translate(-22%,25%)} }
@keyframes bp-vb-drift5 { 0%,100%{transform:translate(0%,0%)} 25%{transform:translate(33%,22%)} 50%{transform:translate(-28%,-30%)} 75%{transform:translate(25%,28%)} }
@keyframes bp-vb-drift6 { 0%,100%{transform:translate(0%,0%)} 25%{transform:translate(-25%,35%)} 50%{transform:translate(30%,-22%)} 75%{transform:translate(-28%,-20%)} }
@keyframes bp-vb-drift7 { 0%,100%{transform:translate(0%,0%)} 25%{transform:translate(30%,-25%)} 50%{transform:translate(-32%,28%)} 75%{transform:translate(22%,-28%)} }
@keyframes bp-vb-drift8 { 0%,100%{transform:translate(0%,0%)} 25%{transform:translate(-28%,-30%)} 50%{transform:translate(28%,25%)} 75%{transform:translate(-30%,22%)} }
@keyframes bp-vb-drift9 { 0%,100%{transform:translate(0%,0%)} 25%{transform:translate(32%,28%)} 50%{transform:translate(-30%,-25%)} 75%{transform:translate(25%,30%)} }
@keyframes bp-vb-drift10 { 0%,100%{transform:translate(0%,0%)} 25%{transform:translate(-30%,32%)} 50%{transform:translate(28%,-28%)} 75%{transform:translate(-25%,-25%)} }
@keyframes bp-vb-drift11 { 0%,100%{transform:translate(0%,0%)} 25%{transform:translate(28%,-28%)} 50%{transform:translate(-32%,25%)} 75%{transform:translate(30%,20%)} }
@keyframes bp-vb-drift12 { 0%,100%{transform:translate(0%,0%)} 25%{transform:translate(-32%,28%)} 50%{transform:translate(30%,-30%)} 75%{transform:translate(-28%,-20%)} }
@keyframes bp-vb-drift13 { 0%,100%{transform:translate(0%,0%)} 25%{transform:translate(30%,32%)} 50%{transform:translate(-28%,-28%)} 75%{transform:translate(25%,-25%)} }
@keyframes bp-vb-drift14 { 0%,100%{transform:translate(0%,0%)} 25%{transform:translate(-25%,-32%)} 50%{transform:translate(32%,28%)} 75%{transform:translate(-30%,22%)} }
@keyframes bp-vb-drift15 { 0%,100%{transform:translate(0%,0%)} 25%{transform:translate(25%,28%)} 50%{transform:translate(-30%,-32%)} 75%{transform:translate(28%,-28%)} }

/* ── Cluster Vibrant Blobs — Orange ─────────────── */
.cb-blob-vb { position: absolute; border-radius: 50%; pointer-events: none; will-change: transform; }

.cb1-vb { background: radial-gradient(ellipse at 50% 50%, rgb(251,146,60) 0%, rgb(217,119,6) 40%, transparent 70%); filter: blur(80px); opacity: 0.90; animation: cb-vb-drift1 9s ease-in-out infinite; left: 10%; top: 15%; width: 50%; height: 48%; }
.cb2-vb { background: radial-gradient(ellipse at 50% 50%, rgb(200,70,20) 0%, rgb(160,50,10) 45%, transparent 72%); filter: blur(85px); opacity: 0.85; animation: cb-vb-drift2 10s ease-in-out infinite 0.3s; left: 60%; top: 10%; width: 55%; height: 52%; }
.cb3-vb { background: radial-gradient(ellipse at 50% 50%, rgb(249,115,22) 0%, rgb(217,119,6) 42%, transparent 68%); filter: blur(78px); opacity: 0.88; animation: cb-vb-drift3 9.5s ease-in-out infinite 0.6s; left: 5%; top: 55%; width: 56%; height: 54%; }
.cb4-vb { background: radial-gradient(ellipse at 50% 50%, rgb(245,158,11) 0%, rgb(217,119,6) 45%, transparent 70%); filter: blur(82px); opacity: 0.87; animation: cb-vb-drift4 8.8s ease-in-out infinite 0.9s; left: 55%; top: 50%; width: 52%; height: 50%; }
.cb5-vb { background: radial-gradient(ellipse at 50% 50%, rgb(200,70,20) 0%, rgb(160,50,10) 50%, transparent 75%); filter: blur(86px); opacity: 0.80; animation: cb-vb-drift5 10.2s ease-in-out infinite 1.2s; left: 30%; top: 30%; width: 58%; height: 56%; }
.cb6-vb { background: radial-gradient(ellipse at 50% 50%, rgb(251,191,36) 0%, rgb(245,158,11) 48%, transparent 70%); filter: blur(79px); opacity: 0.86; animation: cb-vb-drift6 9.3s ease-in-out infinite 1.5s; left: 70%; top: 65%; width: 54%; height: 52%; }
.cb7-vb { background: radial-gradient(ellipse at 50% 50%, rgb(217,119,6) 0%, rgb(245,150,35) 42%, transparent 68%); filter: blur(84px); opacity: 0.84; animation: cb-vb-drift7 8.9s ease-in-out infinite 1.8s; left: 15%; top: 70%; width: 50%; height: 48%; }
.cb8-vb { background: radial-gradient(ellipse at 50% 50%, rgb(200,70,20) 0%, rgb(160,50,10) 45%, transparent 72%); filter: blur(81px); opacity: 0.89; animation: cb-vb-drift8 9.7s ease-in-out infinite 0.4s; left: 65%; top: 25%; width: 53%; height: 51%; }
.cb9-vb { background: radial-gradient(ellipse at 50% 50%, rgb(249,115,22) 0%, rgb(217,119,6) 48%, transparent 70%); filter: blur(83px); opacity: 0.82; animation: cb-vb-drift9 10.1s ease-in-out infinite 2.1s; left: 25%; top: 55%; width: 55%; height: 53%; }
.cb10-vb { background: radial-gradient(ellipse at 50% 50%, rgb(245,158,11) 0%, rgb(217,119,6) 42%, transparent 68%); filter: blur(80px); opacity: 0.87; animation: cb-vb-drift10 9.4s ease-in-out infinite 2.4s; left: 50%; top: 70%; width: 52%; height: 50%; }
.cb11-vb { background: radial-gradient(ellipse at 50% 50%, rgb(200,70,20) 0%, rgb(160,50,10) 50%, transparent 75%); filter: blur(85px); opacity: 0.79; animation: cb-vb-drift11 10.3s ease-in-out infinite 2.7s; left: 10%; top: 35%; width: 57%; height: 55%; }
.cb12-vb { background: radial-gradient(ellipse at 50% 50%, rgb(251,146,60) 0%, rgb(217,119,6) 40%, transparent 70%); filter: blur(79px); opacity: 0.91; animation: cb-vb-drift12 9.2s ease-in-out infinite 3s; left: 70%; top: 40%; width: 50%; height: 48%; }
.cb13-vb { background: radial-gradient(ellipse at 50% 50%, rgb(251,191,36) 0%, rgb(217,119,6) 45%, transparent 72%); filter: blur(82px); opacity: 0.85; animation: cb-vb-drift13 9.8s ease-in-out infinite 3.3s; left: 35%; top: 10%; width: 54%; height: 52%; }
.cb14-vb { background: radial-gradient(ellipse at 50% 50%, rgb(245,158,11) 0%, rgb(200,70,20) 48%, transparent 70%); filter: blur(81px); opacity: 0.88; animation: cb-vb-drift14 9.5s ease-in-out infinite 3.6s; left: 60%; top: 75%; width: 53%; height: 51%; }
.cb15-vb { background: radial-gradient(ellipse at 50% 50%, rgb(217,119,6) 0%, rgb(160,50,10) 42%, transparent 68%); filter: blur(84px); opacity: 0.81; animation: cb-vb-drift15 10s ease-in-out infinite 3.9s; left: 20%; top: 65%; width: 55%; height: 53%; }

@keyframes cb-vb-drift1 { 0%,100%{transform:translate(0%,0%)} 25%{transform:translate(35%,-28%)} 50%{transform:translate(-25%,22%)} 75%{transform:translate(28%,18%)} }
@keyframes cb-vb-drift2 { 0%,100%{transform:translate(0%,0%)} 25%{transform:translate(-32%,25%)} 50%{transform:translate(30%,-20%)} 75%{transform:translate(-25%,-15%)} }
@keyframes cb-vb-drift3 { 0%,100%{transform:translate(0%,0%)} 25%{transform:translate(28%,32%)} 50%{transform:translate(-30%,-25%)} 75%{transform:translate(20%,-18%)} }
@keyframes cb-vb-drift4 { 0%,100%{transform:translate(0%,0%)} 25%{transform:translate(-30%,-28%)} 50%{transform:translate(32%,20%)} 75%{transform:translate(-22%,25%)} }
@keyframes cb-vb-drift5 { 0%,100%{transform:translate(0%,0%)} 25%{transform:translate(33%,22%)} 50%{transform:translate(-28%,-30%)} 75%{transform:translate(25%,28%)} }
@keyframes cb-vb-drift6 { 0%,100%{transform:translate(0%,0%)} 25%{transform:translate(-25%,35%)} 50%{transform:translate(30%,-22%)} 75%{transform:translate(-28%,-20%)} }
@keyframes cb-vb-drift7 { 0%,100%{transform:translate(0%,0%)} 25%{transform:translate(30%,-25%)} 50%{transform:translate(-32%,28%)} 75%{transform:translate(22%,-28%)} }
@keyframes cb-vb-drift8 { 0%,100%{transform:translate(0%,0%)} 25%{transform:translate(-28%,-30%)} 50%{transform:translate(28%,25%)} 75%{transform:translate(-30%,22%)} }
@keyframes cb-vb-drift9 { 0%,100%{transform:translate(0%,0%)} 25%{transform:translate(32%,28%)} 50%{transform:translate(-30%,-25%)} 75%{transform:translate(25%,30%)} }
@keyframes cb-vb-drift10 { 0%,100%{transform:translate(0%,0%)} 25%{transform:translate(-30%,32%)} 50%{transform:translate(28%,-28%)} 75%{transform:translate(-25%,-25%)} }
@keyframes cb-vb-drift11 { 0%,100%{transform:translate(0%,0%)} 25%{transform:translate(28%,-28%)} 50%{transform:translate(-32%,25%)} 75%{transform:translate(30%,20%)} }
@keyframes cb-vb-drift12 { 0%,100%{transform:translate(0%,0%)} 25%{transform:translate(-32%,28%)} 50%{transform:translate(30%,-30%)} 75%{transform:translate(-28%,-20%)} }
@keyframes cb-vb-drift13 { 0%,100%{transform:translate(0%,0%)} 25%{transform:translate(30%,32%)} 50%{transform:translate(-28%,-28%)} 75%{transform:translate(25%,-25%)} }
@keyframes cb-vb-drift14 { 0%,100%{transform:translate(0%,0%)} 25%{transform:translate(-25%,-32%)} 50%{transform:translate(32%,28%)} 75%{transform:translate(-30%,22%)} }
@keyframes cb-vb-drift15 { 0%,100%{transform:translate(0%,0%)} 25%{transform:translate(25%,28%)} 50%{transform:translate(-30%,-32%)} 75%{transform:translate(28%,-28%)} }

/* ── Blueprint Avatar (Mini, 10x Speed, Super Violent) ─────────────── */
.bp-blob-avatar { position: absolute; border-radius: 50%; pointer-events: none; will-change: transform; }

.bp1-avatar { background: radial-gradient(ellipse at 50% 50%, rgb(96,165,250) 0%, rgb(59,130,246) 40%, transparent 70%); filter: blur(28px); opacity: 0.92; animation: bp-avatar-drift1 0.50s ease-in-out infinite; left: 5%; top: 8%; width: 45%; height: 42%; }
.bp2-avatar { background: radial-gradient(ellipse at 50% 50%, rgb(147,197,253) 0%, rgb(96,165,250) 45%, transparent 68%); filter: blur(30px); opacity: 0.88; animation: bp-avatar-drift2 0.58s ease-in-out infinite 0.04s; left: 55%; top: 10%; width: 48%; height: 45%; }
.bp3-avatar { background: radial-gradient(ellipse at 50% 50%, rgb(56,189,248) 0%, rgb(59,130,246) 42%, transparent 70%); filter: blur(27px); opacity: 0.90; animation: bp-avatar-drift3 0.52s ease-in-out infinite 0.08s; left: 8%; top: 55%; width: 42%; height: 40%; }
.bp4-avatar { background: radial-gradient(ellipse at 50% 50%, rgb(120,184,255) 0%, rgb(96,165,250) 48%, transparent 72%); filter: blur(31px); opacity: 0.85; animation: bp-avatar-drift4 0.61s ease-in-out infinite 0.12s; left: 50%; top: 48%; width: 46%; height: 44%; }
.bp5-avatar { background: radial-gradient(ellipse at 50% 50%, rgb(30,58,138) 0%, rgb(70,120,200) 50%, transparent 75%); filter: blur(32px); opacity: 0.83; animation: bp-avatar-drift5 0.63s ease-in-out infinite 0.16s; left: 20%; top: 15%; width: 50%; height: 48%; }
.bp6-avatar { background: radial-gradient(ellipse at 50% 50%, rgb(96,165,250) 0%, rgb(56,189,248) 42%, transparent 68%); filter: blur(28px); opacity: 0.87; animation: bp-avatar-drift6 0.53s ease-in-out infinite 0.20s; left: 68%; top: 62%; width: 44%; height: 42%; }
.bp7-avatar { background: radial-gradient(ellipse at 50% 50%, rgb(59,130,246) 0%, rgb(30,58,138) 45%, transparent 70%); filter: blur(29px); opacity: 0.89; animation: bp-avatar-drift7 0.49s ease-in-out infinite 0.24s; left: 3%; top: 70%; width: 46%; height: 44%; }
.bp8-avatar { background: radial-gradient(ellipse at 50% 50%, rgb(147,197,253) 0%, rgb(96,165,250) 48%, transparent 72%); filter: blur(30px); opacity: 0.84; animation: bp-avatar-drift8 0.57s ease-in-out infinite 0.28s; left: 62%; top: 28%; width: 47%; height: 45%; }
.bp9-avatar { background: radial-gradient(ellipse at 50% 50%, rgb(120,184,255) 0%, rgb(59,130,246) 45%, transparent 70%); filter: blur(28px); opacity: 0.91; animation: bp-avatar-drift9 0.61s ease-in-out infinite 0.32s; left: 25%; top: 42%; width: 49%; height: 46%; }
.bp10-avatar { background: radial-gradient(ellipse at 50% 50%, rgb(56,189,248) 0%, rgb(30,58,138) 48%, transparent 70%); filter: blur(29px); opacity: 0.86; animation: bp-avatar-drift10 0.54s ease-in-out infinite 0.36s; left: 52%; top: 5%; width: 45%; height: 43%; }

@keyframes bp-avatar-drift1 { 0%,100%{transform:translate(0%,0%)} 25%{transform:translate(48%,-42%)} 50%{transform:translate(-45%,38%)} 75%{transform:translate(42%,40%)} }
@keyframes bp-avatar-drift2 { 0%,100%{transform:translate(0%,0%)} 25%{transform:translate(-48%,40%)} 50%{transform:translate(42%,-38%)} 75%{transform:translate(-40%,-35%)} }
@keyframes bp-avatar-drift3 { 0%,100%{transform:translate(0%,0%)} 25%{transform:translate(45%,45%)} 50%{transform:translate(-42%,-40%)} 75%{transform:translate(38%,-38%)} }
@keyframes bp-avatar-drift4 { 0%,100%{transform:translate(0%,0%)} 25%{transform:translate(-42%,-45%)} 50%{transform:translate(48%,38%)} 75%{transform:translate(-38%,42%)} }
@keyframes bp-avatar-drift5 { 0%,100%{transform:translate(0%,0%)} 25%{transform:translate(50%,35%)} 50%{transform:translate(-45%,-45%)} 75%{transform:translate(40%,45%)} }
@keyframes bp-avatar-drift6 { 0%,100%{transform:translate(0%,0%)} 25%{transform:translate(-45%,48%)} 50%{transform:translate(42%,-35%)} 75%{transform:translate(-42%,-38%)} }
@keyframes bp-avatar-drift7 { 0%,100%{transform:translate(0%,0%)} 25%{transform:translate(42%,-40%)} 50%{transform:translate(-48%,42%)} 75%{transform:translate(35%,-42%)} }
@keyframes bp-avatar-drift8 { 0%,100%{transform:translate(0%,0%)} 25%{transform:translate(-40%,-48%)} 50%{transform:translate(45%,40%)} 75%{transform:translate(-48%,38%)} }
@keyframes bp-avatar-drift9 { 0%,100%{transform:translate(0%,0%)} 25%{transform:translate(48%,40%)} 50%{transform:translate(-42%,-42%)} 75%{transform:translate(40%,-48%)} }
@keyframes bp-avatar-drift10 { 0%,100%{transform:translate(0%,0%)} 25%{transform:translate(-38%,45%)} 50%{transform:translate(45%,-45%)} 75%{transform:translate(-42%,-40%)} }

/* 8-bit Pixel Avatar Animation */
.avatar-pixel-grid {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  grid-template-rows: repeat(16, 1fr);
  gap: 0;
  pointer-events: none;
}

.avatar-pixel {
  border-radius: 1px;
  opacity: 0;
  will-change: opacity, background-color, transform;
  transition: opacity 0.08s ease-out;
  background: rgba(96, 165, 250, 0.7);
}

/* Color variations for the blobs */
.avatar-pixel.color-1 { background: rgba(96, 165, 250, 0.7); }
.avatar-pixel.color-2 { background: rgba(147, 197, 253, 0.7); }
.avatar-pixel.color-3 { background: rgba(59, 130, 246, 0.7); }
.avatar-pixel.color-4 { background: rgba(120, 184, 255, 0.7); }
.avatar-pixel.color-5 { background: rgba(56, 189, 248, 0.7); }
.avatar-pixel.color-6 { background: rgba(30, 58, 138, 0.7); }

.avatar-pixel.active { opacity: 0.95; }
.avatar-pixel.active-dim { opacity: 0.6; }
.avatar-pixel.active-bright { opacity: 1; }

/* ── Cluster panel — fire blobs (oranges, reds, yellows) ─────────────── */
.cluster-blob { position: absolute; border-radius: 50%; pointer-events: none; will-change: transform; }

/* Blob 1 — deep amber core, center-left */
.cb1 {
  width: 110%; height: 110%; left: -10%; top: -5%;
  background: radial-gradient(ellipse at 50% 50%, rgba(251,191,36,0.90) 0%, rgba(245,158,11,0.55) 40%, transparent 72%);
  filter: blur(70px);
  animation: cb-drift1 12s ease-in-out infinite;
}
/* Blob 2 — orange punch, upper-right */
.cb2 {
  width: 80%; height: 90%; left: 35%; top: -20%;
  background: radial-gradient(ellipse at 50% 50%, rgba(249,115,22,0.95) 0%, rgba(234,88,12,0.60) 42%, transparent 72%);
  filter: blur(65px);
  animation: cb-drift2 9s ease-in-out infinite 1.2s;
}
/* Blob 3 — deep red, lower-left */
.cb3 {
  width: 75%; height: 80%; left: -15%; top: 30%;
  background: radial-gradient(ellipse at 50% 50%, rgba(220,38,38,0.88) 0%, rgba(185,28,28,0.50) 45%, transparent 72%);
  filter: blur(72px);
  animation: cb-drift3 14s ease-in-out infinite 0.4s;
}
/* Blob 4 — bright yellow, top-center */
.cb4 {
  width: 65%; height: 70%; left: 20%; top: -30%;
  background: radial-gradient(ellipse at 50% 50%, rgba(253,224,71,0.85) 0%, rgba(250,204,21,0.45) 45%, transparent 72%);
  filter: blur(60px);
  animation: cb-drift4 10s ease-in-out infinite 2.5s;
}
/* Blob 5 — orange-red, bottom-right */
.cb5 {
  width: 70%; height: 75%; left: 45%; top: 35%;
  background: radial-gradient(ellipse at 50% 50%, rgba(239,68,68,0.80) 0%, rgba(220,38,38,0.42) 44%, transparent 70%);
  filter: blur(68px);
  animation: cb-drift5 11s ease-in-out infinite 0.8s;
}
/* Blob 6 — hot orange, mid-left */
.cb6 {
  width: 55%; height: 60%; left: -5%; top: 10%;
  background: radial-gradient(ellipse at 50% 50%, rgba(251,146,60,0.85) 0%, rgba(249,115,22,0.40) 44%, transparent 70%);
  filter: blur(62px);
  animation: cb-drift6 8s ease-in-out infinite 3.1s;
}
/* Blob 7 — crimson, center-bottom */
.cb7 {
  width: 60%; height: 65%; left: 25%; top: 45%;
  background: radial-gradient(ellipse at 50% 50%, rgba(239,68,68,0.75) 0%, rgba(185,28,28,0.38) 44%, transparent 70%);
  filter: blur(75px);
  animation: cb-drift7 15s ease-in-out infinite 1.8s;
}
/* Blob 8 — lemon yellow accent, right edge */
.cb8 {
  width: 50%; height: 55%; left: 60%; top: 5%;
  background: radial-gradient(ellipse at 50% 50%, rgba(253,224,71,0.70) 0%, rgba(251,191,36,0.30) 44%, transparent 70%);
  filter: blur(58px);
  animation: cb-drift8 7s ease-in-out infinite 0.6s;
}

@keyframes cb-drift1 {
  0%,100% { transform: translate(0%,0%) scale(1); }
  33%  { transform: translate(8%,12%) scale(1.06); }
  66%  { transform: translate(-10%,-8%) scale(0.96); }
}
@keyframes cb-drift2 {
  0%,100% { transform: translate(0%,0%) scale(1); }
  30%  { transform: translate(-14%,18%) scale(1.08); }
  65%  { transform: translate(10%,-14%) scale(0.94); }
}
@keyframes cb-drift3 {
  0%,100% { transform: translate(0%,0%) scale(1); }
  35%  { transform: translate(18%,-10%) scale(1.07); }
  70%  { transform: translate(-8%,16%) scale(0.95); }
}
@keyframes cb-drift4 {
  0%,100% { transform: translate(0%,0%) scale(1); }
  40%  { transform: translate(-16%,20%) scale(1.10); }
  80%  { transform: translate(14%,-12%) scale(0.93); }
}
@keyframes cb-drift5 {
  0%,100% { transform: translate(0%,0%) scale(1); }
  25%  { transform: translate(-12%,-16%) scale(1.05); }
  60%  { transform: translate(16%,10%) scale(0.97); }
}
@keyframes cb-drift6 {
  0%,100% { transform: translate(0%,0%) scale(1); }
  45%  { transform: translate(20%,14%) scale(1.09); }
  75%  { transform: translate(-10%,-18%) scale(0.94); }
}
@keyframes cb-drift7 {
  0%,100% { transform: translate(0%,0%) scale(1); }
  30%  { transform: translate(12%,-20%) scale(1.06); }
  65%  { transform: translate(-18%,8%) scale(0.96); }
}
@keyframes cb-drift8 {
  0%,100% { transform: translate(0%,0%) scale(1); }
  50%  { transform: translate(-18%,22%) scale(1.12); }
}

/* ── Testimonial Swiper ───────────────────────────────────────────────── */
.testimonial-swiper {
  overflow: visible;
  padding-bottom: 4px;
}
.testimonial-swiper .swiper-wrapper {
  align-items: stretch;
}
.testimonial-swiper .swiper-slide {
  height: auto;
  display: flex;
}
.testimonial-swiper .testimonial-card {
  width: 100%;
}

/* ===== BLOG ===== */
.blog-tag {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(0,0,0,0.06);
  color: #333;
}
.blog-tag-workspace { background: rgba(0,0,0,0.06); color: #555555; }
.blog-tag-studio    { background: rgba(52,211,153,0.12); color: #34d399; }
.blog-tag-blueprint { background: rgba(96,165,250,0.12); color: #60a5fa; }
.blog-tag-cluster   { background: rgba(251,146,60,0.12); color: #fb923c; }

.blog-featured {
  background: #f5f5f5;
  border: 1px solid rgba(0,0,0,0.06);
  transition: border-color 0.2s ease, transform 0.3s ease;
}
.blog-featured:hover {
  border-color: rgba(0,0,0,0.14);
}
.blog-featured-img {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: #f0f0f0;
}
.blog-featured-img img {
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.blog-featured:hover .blog-featured-img img {
  transform: scale(1.03);
}
.blog-featured-text {
  padding: 40px 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media (min-width: 768px) {
  .blog-featured-text { padding: 48px 48px; }
}

.blog-card {
  background: #f5f5f5;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color 0.2s ease, transform 0.3s ease;
}
.blog-card:not(.blog-card-soon):hover {
  border-color: rgba(0,0,0,0.14);
}
.blog-card-img {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #e8e8e8;
}
.blog-card-img img {
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.blog-card:not(.blog-card-soon):hover .blog-card-img img {
  transform: scale(1.04);
}
.blog-card-img-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #eeeeee 0%, #e4e4e4 100%);
}
.blog-card-body {
  padding: 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.blog-card-soon {
  cursor: default;
}
.blog-card-soon .blog-card-img-placeholder { opacity: 0.7; }
.blog-card-soon h3 { color: rgba(0,0,0,0.5); }

/* ===== BLOG POST (article pages) ===== */
.post-breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #858585;
  font-size: 13px;
  transition: color 0.2s ease;
}
.post-breadcrumb:hover { color: #111; }

.post-hero-img {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 0.6px 1.57px -1.5px rgba(0,0,0,.17),
              0 2.29px 5.95px -3px rgba(0,0,0,.14),
              0 10px 26px -4.5px rgba(0,0,0,.18);
}
.post-hero-img.vb-hero { aspect-ratio: 16 / 8; }

/* Blog vibrant background color bases (pair with ws/st/bp/cluster blobs) */
.vb-workspace { background: #fbbf24; }
.vb-studio    { background: #10b981; }
.vb-blueprint { background: #1e40af; }
.vb-cluster   { background: rgb(120,25,0); }

.post-content {
  font-size: 17px;
  line-height: 1.7;
  color: #444444;
}
.post-content > * + * { margin-top: 1.1em; }
.post-content h2 {
  font-size: 28px;
  font-weight: 400;
  letter-spacing: -0.03em;
  color: #111111;
  margin-top: 2.4em;
  margin-bottom: 0.6em;
  line-height: 1.2;
}
.post-content h3 {
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: #111111;
  margin-top: 1.8em;
  margin-bottom: 0.5em;
  line-height: 1.3;
}
.post-content p { color: #444444; }
.post-content strong { color: #111111; font-weight: 500; }
.post-content a {
  color: #333333;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.post-content a:hover { opacity: 0.85; }
.post-content ul, .post-content ol {
  padding-left: 1.4em;
  color: #444444;
}
.post-content ul { list-style: disc; }
.post-content ol { list-style: decimal; }
.post-content li + li { margin-top: 0.5em; }
.post-content li::marker { color: #888888; }
.post-content blockquote {
  border-left: 2px solid #333333;
  padding: 4px 0 4px 20px;
  color: #111111;
  font-style: normal;
  font-size: 18px;
  margin: 1.8em 0;
}
.post-content code {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14px;
  background: rgba(0,0,0,0.06);
  color: #333333;
  padding: 2px 6px;
  border-radius: 3px;
}
.post-content pre {
  background: #f0f0f0;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 4px;
  padding: 16px 18px;
  overflow-x: auto;
  font-size: 13px;
  line-height: 1.55;
  margin: 1.4em 0;
}
.post-content pre code {
  background: transparent;
  color: #444444;
  padding: 0;
  font-size: 13px;
}
.post-content img {
  border-radius: 4px;
  width: 100%;
  display: block;
  margin: 2em 0;
}
.post-content hr {
  border: none;
  border-top: 1px solid rgba(0,0,0,0.08);
  margin: 3em 0;
}
.post-callout {
  background: #f5f5f5;
  border: 1px solid rgba(0,0,0,0.06);
  border-left: 2px solid #333333;
  border-radius: 4px;
  padding: 20px 24px;
  margin: 2em 0;
  color: #444444;
  font-size: 15px;
  line-height: 1.55;
}
.post-callout strong { color: #111; }

/* ===== HOW IT WORKS — STEPS FLOW ===== */
.steps-flow {
  display: flex;
  align-items: center;
  gap: 0;
}

/* per-step color tokens */
.step-card[data-step] { --sc: #555555; --sc-bg: rgba(0,0,0,0.04); --sc-border: rgba(0,0,0,0.14); }

.step-card {
  flex: 1;
  position: relative;
  background: #f5f5f5;
  border: 1px solid rgba(0,0,0,0.07);
  border-top: 2px solid var(--sc-border, rgba(0,0,0,0.1));
  padding: 40px 32px 36px;
  overflow: hidden;
  transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.step-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.4);
}

.step-bg-number {
  position: absolute;
  top: -20px;
  right: -10px;
  font-size: 140px;
  font-weight: 200;
  line-height: 1;
  color: var(--sc-border, rgba(0,0,0,0.06));
  pointer-events: none;
  user-select: none;
  letter-spacing: -0.05em;
}

.step-icon {
  width: 48px;
  height: 48px;
  background: var(--sc-bg, rgba(0,0,0,0.04));
  border: 1px solid var(--sc-border, rgba(0,0,0,0.09));
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  color: var(--sc, rgba(0,0,0,0.5));
}

.step-title {
  font-size: 17px;
  font-weight: 600;
  color: #111;
  margin-bottom: 10px;
  letter-spacing: -0.02em;
}

.step-desc {
  font-size: 13px;
  line-height: 1.65;
  color: rgba(0,0,0,0.45);
}

.step-connector {
  flex: 0 0 60px;
  height: 24px;
  position: relative;
  z-index: 2;
}

.connector-svg {
  width: 100%;
  height: 100%;
}

.connector-line {
  stroke-dasharray: 6 5;
  stroke-dashoffset: 0;
  animation: dash-flow 1.5s linear infinite;
}

@keyframes dash-flow {
  to { stroke-dashoffset: -22; }
}

@media (max-width: 900px) {
  .steps-flow { flex-direction: column; align-items: stretch; }
  .step-connector { width: 24px; height: 48px; flex: 0 0 48px; align-self: center; }
  .connector-svg { transform: rotate(90deg); }
  .step-bg-number { font-size: 100px; }
}

/* =====================================================================
   Drew — page-specific utility classes (light/monochrome)
   ===================================================================== */

/* =====================================================================
   Lead-flow canvas — light mode, no frame
   ===================================================================== */

/* Horizontal scroll on narrow viewports */
.flow-canvas-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,0.15) transparent;
}
.flow-canvas-scroll::-webkit-scrollbar { height: 6px; }
.flow-canvas-scroll::-webkit-scrollbar-track { background: transparent; }
.flow-canvas-scroll::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.12);
  border-radius: 999px;
}

/* The workflow canvas — clean light surface, faint dotted grid */
.flow-canvas {
  position: relative;
  min-width: 760px;
  aspect-ratio: 1000 / 540;
  background-color: transparent;
  background-image:
    radial-gradient(circle, rgba(0,0,0,0.08) 1px, transparent 1px);
  background-size: 24px 24px;
  background-position: 12px 12px;
  overflow: hidden;
}

/* Zone labels */
.flow-zone {
  position: absolute;
  top: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  font-weight: 600;
  color: rgba(0,0,0,0.25);
  pointer-events: none;
  z-index: 2;
}
.flow-zone-left   { left: 4%; }
.flow-zone-center { left: 50%; transform: translateX(-50%); color: rgba(0,0,0,0.40); }
.flow-zone-right  { right: 4%; }

/* SVG fills canvas */
.flow-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}

/* Connection lines — geometric step paths with marching dashes */
.flow-line {
  fill: none;
  stroke: rgba(0,0,0,0.28);
  stroke-width: 1.25;
  stroke-dasharray: 4 4;
  stroke-linecap: butt;
  stroke-linejoin: miter;
  animation: flow-march 1.4s linear infinite;
}
@keyframes flow-march {
  to { stroke-dashoffset: -20; }
}

/* Animated data packets — dark for light bg */
.flow-packet {
  fill: #111111;
  filter: drop-shadow(0 0 4px rgba(0,0,0,0.25));
}
/* Right-side packets — color-coded by destination */
.flow-packet-email { fill: #2563eb; filter: drop-shadow(0 0 4px rgba(37,99,235,0.40)); }
.flow-packet-phone { fill: #16a34a; filter: drop-shadow(0 0 4px rgba(22,163,74,0.40)); }
.flow-packet-reply { fill: #d97706; filter: drop-shadow(0 0 4px rgba(217,119,6,0.40)); }

/* Nodes (HTML inside foreignObject) */
.flow-node {
  width: 100%;
  height: 100%;
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 3px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Poppins', sans-serif;
  transition: border-color .25s ease, box-shadow .25s ease;
  box-sizing: border-box;
}
.flow-node:hover {
  border-color: rgba(0,0,0,0.20);
  box-shadow: 0 6px 18px -8px rgba(0,0,0,0.10);
}
.flow-node-icon {
  width: 30px;
  height: 30px;
  border-radius: 3px;
  background: rgba(0,0,0,0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.flow-node-icon svg {
  width: 15px;
  height: 15px;
  color: rgba(0,0,0,0.75);
}
.flow-node-icon-lg { width: 34px; height: 34px; }
.flow-node-icon-lg svg { width: 17px; height: 17px; }
.flow-node-text { min-width: 0; }
.flow-node-title {
  font-size: 13px;
  font-weight: 600;
  color: #111111;
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.flow-node-sub {
  font-size: 10.5px;
  font-family: 'JetBrains Mono', monospace;
  color: rgba(0,0,0,0.45);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Per-source icon tinting (subtle, monochrome friendly) */
.flow-node[data-type="form"]    .flow-node-icon svg { color: #2563eb; }
.flow-node[data-type="phone"]   .flow-node-icon svg { color: #16a34a; }
.flow-node[data-type="gmb"]     .flow-node-icon svg { color: #ca8a04; }
.flow-node[data-type="sms"]     .flow-node-icon svg { color: #7c3aed; }
.flow-node[data-type="booked"]  .flow-node-icon svg { color: #16a34a; }
.flow-node[data-type="review"]  .flow-node-icon svg { color: #ca8a04; }

/* Hub — featured (light, simplified) */
.flow-node.is-hub {
  background: #ffffff;
  border: 1.5px solid rgba(0,0,0,0.20);
  color: #111111;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 18px 22px;
  box-shadow: 0 10px 28px -16px rgba(0,0,0,0.16);
}
.flow-node.is-hub .flow-node-icon {
  background: rgba(0,0,0,0.05);
  border: 1px solid rgba(0,0,0,0.06);
}
.flow-node.is-hub .flow-node-icon svg { color: #111111; }
.flow-node.is-hub .flow-node-title { color: #111111; font-size: 15px; }
.flow-node.is-hub .flow-node-sub { color: rgba(0,0,0,0.50); }

@keyframes flow-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(0.85); }
}

/* =====================================================================
   How-it-works step cards
   ===================================================================== */
.step-card {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 3px;
  padding: 36px 32px 32px;
  min-height: 240px;
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.step-card:hover {
  border-color: rgba(0,0,0,0.14);
  box-shadow: 0 12px 32px -16px rgba(0,0,0,0.10);
  transform: translateY(-2px);
}
.step-num {
  font-family: 'Poppins', sans-serif;
  font-size: 48px;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: rgba(0,0,0,0.18);
  line-height: 1;
  margin-bottom: 28px;
}
.step-title {
  font-family: 'Poppins', sans-serif;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #111;
  margin-bottom: 10px;
}
.step-desc {
  font-size: 14px;
  line-height: 1.55;
  color: #666;
  max-width: 360px;
}

/* =====================================================================
   Inline CTA strip — between sections on the landing page
   ===================================================================== */
.inline-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 28px 24px;
  text-align: center;
  background: #fafafa;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 3px;
  transition: border-color .25s ease, background-color .25s ease;
}
.inline-cta:hover {
  background: #f5f5f5;
  border-color: rgba(0,0,0,0.12);
}
@media (min-width: 768px) {
  .inline-cta {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 32px;
    padding: 26px 32px;
    text-align: left;
  }
}
.inline-cta-text {
  font-family: 'Poppins', sans-serif;
  font-size: 17px;
  font-weight: 500;
  color: #111;
  letter-spacing: -0.005em;
  line-height: 1.35;
}
.inline-cta-text strong {
  font-weight: 600;
}
.inline-cta-sub {
  display: block;
  font-size: 13.5px;
  font-weight: 400;
  color: rgba(0,0,0,0.55);
  margin-top: 4px;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.01em;
}

/* Step flow + animated arrows */
.step-flow {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  align-items: stretch;
}
@media (min-width: 768px) {
  .step-flow {
    grid-template-columns: 1fr 64px 1fr 64px 1fr;
    gap: 0;
    align-items: stretch;
  }
}
.step-arrow {
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  width: 100%;
}
@media (min-width: 768px) {
  .step-arrow { display: flex; }
}
.step-arrow svg {
  width: 100%;
  max-width: 64px;
  height: 18px;
  overflow: visible;
}
.step-arrow-line {
  stroke: rgba(0,0,0,0.22);
  stroke-width: 1.25;
  stroke-dasharray: 4 4;
  stroke-linecap: butt;
  fill: none;
  animation: flow-march 1.4s linear infinite;
}
.step-arrow-head {
  fill: none;
  stroke: rgba(0,0,0,0.50);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.step-arrow-packet {
  fill: #111;
}
@media (prefers-reduced-motion: reduce) {
  .step-arrow-line { animation: none; }
  .step-arrow-packet { display: none; }
}

/* =====================================================================
   Services Bento
   ===================================================================== */
.bento-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fafafa;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 3px;
  padding: 32px;
  transition: border-color .25s ease, background .25s ease;
  overflow: hidden;
}
.bento-card:hover {
  background: #ffffff;
  border-color: rgba(0,0,0,0.12);
}
@media (min-width: 768px) {
  .bento-card { padding: 36px; }
  .bento-card.md\:col-span-7 { padding: 44px; }
}

.bento-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 500;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 18px;
}
.bento-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: #111;
  font-weight: 600;
  padding: 3px 7px;
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 3px;
  letter-spacing: 0;
}

.bento-title {
  font-family: 'Poppins', sans-serif;
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: #111;
  margin-bottom: 12px;
  max-width: 420px;
}
.bento-title-sm {
  font-family: 'Poppins', sans-serif;
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.25;
  color: #111;
  margin-bottom: 10px;
}
.bento-desc {
  font-size: 14px;
  line-height: 1.5;
  color: #666;
  max-width: 380px;
}

/* ----- Website mockup ----- */
.bento-mockup { flex: 1; min-height: 200px; display: flex; align-items: flex-end; }
.mock-browser {
  width: 100%;
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 12px 32px -16px rgba(0,0,0,0.18);
}
.mock-browser-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  background: #f5f5f5;
}
.mock-browser-bar > span {
  width: 8px; height: 8px; border-radius: 999px;
  background: rgba(0,0,0,0.10);
}
.mock-url {
  margin-left: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: rgba(0,0,0,0.40);
  background: #ffffff;
  padding: 3px 8px;
  border-radius: 3px;
  border: 1px solid rgba(0,0,0,0.05);
}
.mock-browser-body { padding: 14px; }

/* Hook → Offer → Lead Capture sections inside the page mockup */
.mock-section {
  position: relative;
  padding: 10px 12px 12px;
  background: rgba(0,0,0,0.025);
  border-radius: 3px;
  border: 1px solid rgba(0,0,0,0.05);
}
.mock-section-tag {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 7.5px;
  font-weight: 700;
  color: rgba(0,0,0,0.55);
  letter-spacing: 0.12em;
  padding: 2px 6px;
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 3px;
  margin-bottom: 8px;
  text-transform: uppercase;
}
.mock-arrow {
  text-align: center;
  font-size: 12px;
  color: rgba(0,0,0,0.22);
  line-height: 1;
  padding: 4px 0;
  user-select: none;
}

/* Hook section content */
.mock-hero-h {
  height: 9px; width: 70%;
  background: rgba(0,0,0,0.85);
  border-radius: 3px;
  margin-bottom: 5px;
}
.mock-hero-h.short { width: 45%; height: 7px; background: rgba(0,0,0,0.25); }
.mock-hero-cta {
  display: inline-block;
  margin-top: 8px;
  font-size: 8.5px;
  font-weight: 600;
  color: #fff;
  background: #111;
  padding: 4px 8px;
  border-radius: 3px;
  letter-spacing: -0.01em;
}

/* Offer section — 3-up service tiles */
.mock-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
}
.mock-grid > div {
  height: 28px;
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 3px;
  position: relative;
}
.mock-grid > div::before {
  content: '';
  position: absolute;
  top: 6px; left: 6px;
  width: 10px; height: 10px;
  background: rgba(0,0,0,0.10);
  border-radius: 3px;
}
.mock-grid > div::after {
  content: '';
  position: absolute;
  bottom: 6px; left: 6px; right: 6px;
  height: 4px;
  background: rgba(0,0,0,0.08);
  border-radius: 3px;
}

/* Lead capture section — form */
.mock-form { display: flex; flex-direction: column; gap: 5px; }
.mock-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.mock-input {
  height: 14px;
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 3px;
}
.mock-form-cta {
  margin-top: 3px;
  padding: 5px 0;
  text-align: center;
  font-family: 'Poppins', sans-serif;
  font-size: 8.5px;
  font-weight: 600;
  color: #ffffff;
  background: #111111;
  border-radius: 3px;
  letter-spacing: -0.01em;
}

/* ----- Local pack mockup ----- */
.bento-pack {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pack-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.05);
  border-radius: 3px;
}
.pack-row-active {
  background: #fff8e1;
  border-color: rgba(202,138,4,0.2);
}
.pack-pin {
  width: 8px; height: 8px;
  background: #ca8a04;
  border-radius: 999px;
  flex-shrink: 0;
}
.pack-pin-dim { background: rgba(0,0,0,0.20); }
.pack-info { flex: 1; min-width: 0; }
.pack-name { font-size: 12px; font-weight: 600; color: #111; }
.pack-meta { font-size: 10px; color: #888; margin-top: 2px; }
.pack-badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  color: #ca8a04;
  background: rgba(202,138,4,0.10);
  padding: 2px 7px;
  border-radius: 3px;
}

/* ----- Leads list mockup ----- */
.bento-leads {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.lead-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.05);
  border-radius: 3px;
}
.lead-dot {
  width: 6px; height: 6px;
  border-radius: 999px;
  background: rgba(0,0,0,0.20);
  flex-shrink: 0;
}
.lead-dot-hot {
  background: #16a34a;
  box-shadow: 0 0 0 3px rgba(22,163,74,0.15);
}
.lead-content { flex: 1; }
.lead-source { font-size: 12px; font-weight: 600; color: #111; }
.lead-meta { font-size: 10px; color: #888; margin-top: 2px; }
.lead-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  color: #16a34a;
  background: rgba(22,163,74,0.10);
  padding: 2px 7px;
  border-radius: 3px;
  letter-spacing: 0.05em;
}

/* Hero caption wrapper — no extra padding; container px-6 handles edges (matches header/footer) */

.industry-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 18px;
  border-radius: 3px;
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.08);
  color: #1a1a1a;
  font-size: 14.5px;
  font-weight: 500;
  white-space: nowrap;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.industry-chip:hover {
  background: #fafafa;
  border-color: rgba(0,0,0,0.18);
  transform: translateY(-1px);
}
.industry-chip svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  stroke-width: 1.75;
}
.industry-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  flex-shrink: 0;
  background: #111;
}

/* Subtle per-trade icon tinting */
.industry-chip[data-trade="roofers"] svg     { color: #c2410c; }
.industry-chip[data-trade="plumbers"] svg    { color: #2563eb; }
.industry-chip[data-trade="electricians"] svg{ color: #ca8a04; }
.industry-chip[data-trade="landscapers"] svg { color: #16a34a; }
.industry-chip[data-trade="painters"] svg    { color: #be185d; }
.industry-chip[data-trade="builders"] svg    { color: #78350f; }
.industry-chip[data-trade="kitchens"] svg    { color: #7c3aed; }
.industry-chip[data-trade="bathrooms"] svg   { color: #0891b2; }
.industry-chip[data-trade="boilers"] svg     { color: #dc2626; }
.industry-chip[data-trade="driveways"] svg   { color: #525252; }

.dd-industry {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 6px;
  color: #333;
  font-size: 14px;
  transition: background .15s ease;
}
.dd-industry:hover {
  background: rgba(0,0,0,0.04);
  color: #111;
}
.dd-industry-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  flex-shrink: 0;
  background: #111;
}
.dd-industry-tag {
  margin-left: auto;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 4px;
  background: #111;
  color: #fff;
}

.value-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.value-row:last-child { border-bottom: 0; }
.value-row-name {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex: 1 1 auto;
  min-width: 0;
}
.value-row-bullet {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #111;
  margin-top: 9px;
  flex-shrink: 0;
}
.value-row-price {
  flex-shrink: 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-weight: 600;
  color: #333;
  white-space: nowrap;
  padding-top: 2px;
}
.value-row-bonus .value-row-bullet { background: #888; }
.value-row-bonus .value-row-price { color: #555; }

.input-drew {
  width: 100%;
  padding: 12px 14px;
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 6px;
  color: #111111;
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  transition: border-color .15s ease, background .15s ease;
}
.input-drew::placeholder {
  color: #a0a0a0;
}
.input-drew:focus {
  outline: none;
  border-color: #111;
  background: #fff;
}
.input-drew:hover {
  border-color: rgba(0,0,0,0.22);
}
select.input-drew {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23858585' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}

/* =====================================================================
   Reviews
   ===================================================================== */
.review-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fafafa;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 3px;
  padding: 32px;
  transition: border-color .25s ease, background .25s ease, transform .25s ease;
  overflow: hidden;
}
.review-card:hover {
  background: #ffffff;
  border-color: rgba(0,0,0,0.12);
}
@media (min-width: 768px) {
  .review-card { padding: 40px; }
}

.review-quote {
  color: rgba(0,0,0,0.10);
  margin-bottom: 20px;
}

.review-stars {
  display: inline-flex;
  gap: 3px;
  margin-bottom: 16px;
  color: #f5b400;
}
.review-stars svg {
  width: 16px;
  height: 16px;
}

.review-text {
  font-family: 'Poppins', sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: -0.01em;
  color: #222;
  margin-bottom: 28px;
  flex: 1;
}
@media (min-width: 768px) {
  .review-text { font-size: 18px; }
}

.review-author {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 20px;
  border-top: 1px solid rgba(0,0,0,0.06);
}
.review-avatar {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: #111;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.review-meta {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.review-name {
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #111;
  letter-spacing: -0.01em;
}
.review-role {
  font-size: 12.5px;
  color: #858585;
  margin-top: 2px;
}