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

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

/* 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: #0a0908;
  color: #fff;
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

::selection { background: rgba(255,230,51,0.3); color: #fff; }
a { text-decoration: none; color: inherit; }

/* ===== 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: 13px;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 500;
  margin-bottom: 1rem;
  padding: 0.375rem 0.75rem;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(4px);
  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;
}

/* ===== FLOATING GLASS NAVBAR ===== */
#navbar nav {
  transition: border-color 0.3s ease, background 0.3s ease;
}

.nav-glass-link {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,0.55);
  padding: 6px 12px;
  border-radius: 4px;
  transition: color 0.2s ease, background 0.2s ease;
  white-space: nowrap;
}
.nav-glass-link:hover {
  color: #fff;
  background: rgba(255,255,255,0.06);
}

/* ===== BUTTONS ===== */
.btn-accent {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: #ffe633; color: #0f0f0f;
  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: 0 0 0 0 rgba(255,230,51,0.2);
}
.btn-accent:hover {
  background: #f0d82e;
  box-shadow: 0 0 20px 0 rgba(255,230,51,0.25);
}

.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: rgba(255,255,255,0.06); color: #fff;
  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(255,255,255,0.10); }

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

/* ===== 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: #121110;
  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: #0f0f0f;
}

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

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

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

/* ===== TESTIMONIAL CARDS ===== */
.testimonial-card {
  background: #121110;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 4px;
  padding: 24px;
  display: flex;
  flex-direction: column;
}
.testimonial-grid .testimonial-card:nth-child(2) { background: #141312; }
.testimonial-grid .testimonial-card:nth-child(3) { background: #101010; }
.testimonial-grid .testimonial-card:nth-child(4) { background: #151413; }
.testimonial-grid .testimonial-card:nth-child(5) { background: #131211; }
.testimonial-grid .testimonial-card:nth-child(6) { background: #161514; }
.testimonial-grid .testimonial-card:nth-child(7) { background: #111110; }
.testimonial-grid .testimonial-card:nth-child(8) { background: #141413; }
#testimonial-collapse {
  -webkit-mask: linear-gradient(180deg, #000 60%, transparent 100%);
  mask: linear-gradient(180deg, #000 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: #0a0908;
  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: #fff;
  color: #0f0f0f;
}

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

/* ===== PLATFORM CARDS ===== */
.platform-card {
  flex: 1;
  background: #121110;
  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: #161514;
  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: #858585;
  transition: transform 0.3s ease, color 0.2s ease;
}
.faq-card.open .faq-icon {
  color: #fff;
  /* Rotate 45deg to turn + into x */
  transform: rotate(45deg);
}

/* ===== CTA BANNER ===== */
.cta-banner {
  background: #0e0d0c;
  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(255, 230, 51, 0.06);
  top: -80px;
  right: 10%;
  animation: cta-pulse 6s ease-in-out infinite;
}
.cta-orb-2 {
  width: 200px;
  height: 200px;
  background: rgba(255, 230, 51, 0.04);
  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, #000 60%, transparent 100%);
  mask: linear-gradient(180deg, #000 60%, transparent 100%);
}

/* ===== TESTIMONIAL MASK ===== */
.testimonial-mask {
  -webkit-mask: linear-gradient(180deg, #000 50%, transparent 100%);
  mask: linear-gradient(180deg, #000 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: #fff;
  color: #0f0f0f;
  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: #e8e8e8;
  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: #dedede;
  transition: color 0.3s ease, gap 0.3s ease;
}
.arrow-link:hover { color: #fff; gap: 10px; }
.arrow-link svg { transition: transform 0.3s ease; }
.arrow-link:hover svg { transform: translateX(2px); }

/* ===== FOOTER ===== */
.footer-link {
  font-size: 14px;
  color: #dedede;
  transition: color 0.4s cubic-bezier(.44,0,.56,1);
}
.footer-link:hover { color: #fff; }
.lang-scroll { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.15) transparent; }
.lang-scroll::-webkit-scrollbar { width: 4px; }
.lang-scroll::-webkit-scrollbar-track { background: transparent; }
.lang-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 4px; }
.lang-scroll::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,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%); }
}

/* ===== 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: #0f0e0d;
  border-left: 1px solid rgba(255, 255, 255, 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(255, 255, 255, 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(255, 255, 255, 0.2);
}

.mobile-drawer-link {
  display: block;
  padding: 14px 14px;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  transition: color 0.2s ease, background 0.2s ease;
  background: none;
  border: none;
  cursor: pointer;
  width: 100%;
}
.mobile-drawer-link:hover {
  color: #fff;
  background: rgba(255, 255, 255, 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(255, 255, 255, 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(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.06);
}

/* Feature color themes */
.mobile-feature-workspace {
  color: rgba(250, 204, 21, 0.7);
}
.mobile-feature-workspace:hover {
  color: rgba(250, 204, 21, 0.9);
  background: rgba(250, 204, 21, 0.06);
}

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

/* ── 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%)} }

/* ── 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; }

/* ── 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(255,255,255,0.06);
  color: #fff;
}
.blog-tag-workspace { background: rgba(255,230,51,0.12); color: #ffe633; }
.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-featured {
  background: #121110;
  border: 1px solid rgba(255,255,255,0.06);
  transition: border-color 0.2s ease, transform 0.3s ease;
}
.blog-featured:hover {
  border-color: rgba(255,255,255,0.14);
}
.blog-featured-img {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: #0a0908;
}
.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: #121110;
  border: 1px solid rgba(255,255,255,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(255,255,255,0.14);
}
.blog-card-img {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #0a0908;
}
.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, #14120f 0%, #0e0d0c 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(255,255,255,0.7); }

/* ===== 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: #fff; }

.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 blobs) */
.vb-workspace { background: #fbbf24; }
.vb-studio    { background: #10b981; }
.vb-blueprint { background: #1e40af; }

.post-content {
  font-size: 17px;
  line-height: 1.7;
  color: #c9c9c9;
}
.post-content > * + * { margin-top: 1.1em; }
.post-content h2 {
  font-size: 28px;
  font-weight: 400;
  letter-spacing: -0.03em;
  color: #ffffff;
  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: #ffffff;
  margin-top: 1.8em;
  margin-bottom: 0.5em;
  line-height: 1.3;
}
.post-content p { color: #c9c9c9; }
.post-content strong { color: #ffffff; font-weight: 500; }
.post-content a {
  color: #ffe633;
  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: #c9c9c9;
}
.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: #5c5c5c; }
.post-content blockquote {
  border-left: 2px solid #ffe633;
  padding: 4px 0 4px 20px;
  color: #ffffff;
  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(255,255,255,0.06);
  color: #ffe633;
  padding: 2px 6px;
  border-radius: 3px;
}
.post-content pre {
  background: #121110;
  border: 1px solid rgba(255,255,255,0.06);
  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: #c9c9c9;
  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(255,255,255,0.08);
  margin: 3em 0;
}
.post-callout {
  background: #121110;
  border: 1px solid rgba(255,255,255,0.06);
  border-left: 2px solid #ffe633;
  border-radius: 4px;
  padding: 20px 24px;
  margin: 2em 0;
  color: #c9c9c9;
  font-size: 15px;
  line-height: 1.55;
}
.post-callout strong { color: #fff; }

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

/* per-step color tokens */
.step-card[data-step] { --sc: #ffe633; --sc-bg: rgba(255,230,51,0.05); --sc-border: rgba(255,230,51,0.18); }

.step-card {
  flex: 1;
  position: relative;
  background: #121110;
  border: 1px solid rgba(255,255,255,0.07);
  border-top: 2px solid var(--sc-border, rgba(255,255,255,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(255,255,255,0.06));
  pointer-events: none;
  user-select: none;
  letter-spacing: -0.05em;
}

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

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

.step-desc {
  font-size: 13px;
  line-height: 1.65;
  color: rgba(255,255,255,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; }
}