/* ============================================
   SHOWROOM — Design Variants
   5 switchable visual themes with unique animations
   ============================================ */

/* === Effects Layer (shared) === */
#fx-canvas { z-index: 9999; }

#fx-cursor {
  position: fixed; top: 0; left: 0; width: 48px; height: 48px;
  border: 1px solid rgba(255,255,255,0.5); border-radius: 50%;
  pointer-events: none; z-index: 10000;
  transition: width 0.3s, height 0.3s, border-color 0.3s, background 0.3s;
  mix-blend-mode: difference;
}
#fx-cursor.hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.8);
}
#fx-cursor-dot {
  position: fixed; top: 0; left: 0; width: 6px; height: 6px;
  background: #fff; border-radius: 50%;
  pointer-events: none; z-index: 10001;
}

#fx-leaves {
  position: fixed; inset: 0; pointer-events: none; z-index: 2; overflow: hidden;
}
.fx-leaf {
  position: absolute; top: -40px;
  animation: leaf-fall linear forwards;
  pointer-events: none;
}
@keyframes leaf-fall {
  0% { transform: translateY(0) rotate(0deg) translateX(0); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateY(110vh) rotate(360deg) translateX(60px); opacity: 0; }
}

/* Noise/grain overlay — subtle film texture */
.fx-noise {
  position: fixed; inset: 0; pointer-events: none; z-index: 3; opacity: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  background-size: 256px 256px;
  mix-blend-mode: overlay;
  transition: opacity 0.5s;
}

/* Hero background image */
.fx-hero-img {
  position: fixed; inset: 0; z-index: 0; opacity: 0;
  background-size: cover; background-position: center;
  transition: opacity 0.8s;
  pointer-events: none;
}

/* Card click ripple */
.fx-ripple {
  position: absolute; border-radius: 50%; pointer-events: none;
  width: 0; height: 0;
  transform: translate(-50%, -50%);
  animation: fx-ripple-expand 0.6s ease-out forwards;
  z-index: 5;
}
[data-design="minimal-opal"] .fx-ripple { background: rgba(0,0,0,0.04); }
[data-design="yerba-fresh"] .fx-ripple { background: rgba(22,163,74,0.06); }
@keyframes fx-ripple-expand {
  0% { width: 0; height: 0; opacity: 1; }
  100% { width: 400px; height: 400px; opacity: 0; }
}

/* Noomo typing cursor */
.fx-typing-cursor {
  display: inline-block; margin-left: 4px;
  animation: fx-blink 1s step-end infinite;
  font-weight: 200; color: var(--accent, #e5e5e5);
}
@keyframes fx-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* === Design Picker UI === */
.design-picker { position: relative; z-index: 150; }
.design-picker__btn {
  display: flex; align-items: center; gap: 6px;
  min-width: 44px; min-height: 44px;
  padding: 8px 14px 8px 10px; border: 1px solid var(--border); border-radius: 100px;
  background: var(--surface); cursor: pointer; color: var(--text-muted);
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
  white-space: nowrap; font-family: inherit;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none; -webkit-user-select: none;
}
.design-picker__btn:hover { color: var(--accent); border-color: var(--border-hover); }
.design-picker__btn:active { background: var(--surface-hover, rgba(255,255,255,0.05)); }
.design-picker__btn svg { width: 16px; height: 16px; pointer-events: none; flex-shrink: 0; }
.design-picker__label { display: inline; pointer-events: none; }

.design-picker__menu {
  position: absolute; top: calc(100% + 8px); right: 0; min-width: 200px;
  background: var(--bg2, #0a0d16); border: 1px solid var(--border); border-radius: 14px; padding: 6px;
  opacity: 0; visibility: hidden; transform: translateY(-6px) scale(0.96);
  transition: opacity 0.2s, transform 0.2s, visibility 0.2s; z-index: 200;
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.3);
}
.design-picker__menu.open { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.design-picker__opt {
  display: flex; align-items: center; gap: 10px; width: 100%;
  min-height: 44px; padding: 10px 14px;
  border: none; border-radius: 10px; background: transparent; color: var(--text-muted);
  font-size: 0.82rem; font-weight: 500; cursor: pointer;
  transition: background 0.15s, color 0.15s; text-align: left; font-family: inherit;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none; -webkit-user-select: none;
}
.design-picker__opt:hover { background: var(--surface-hover, rgba(255,255,255,0.05)); color: var(--text); }
.design-picker__opt:active { background: var(--surface-hover, rgba(255,255,255,0.08)); }
.design-picker__opt.active { color: var(--accent); font-weight: 700; }
.design-picker__dot { width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0; border: 1.5px solid rgba(255,255,255,0.1); pointer-events: none; }
[data-theme="light"] .design-picker__menu { background: rgba(255,255,255,0.97); box-shadow: 0 12px 40px rgba(0,0,0,0.1); }
[data-theme="light"] .design-picker__dot { border-color: rgba(0,0,0,0.1); }

@media (max-width: 560px) {
  .design-picker__label { display: none; }
  .design-picker__btn { padding: 8px 10px; }
  .design-picker__menu { right: -40px; min-width: 190px; }
}


/* ============================================
   DESIGN 1: NEON RACER
   Lando Norris — lime neon, racing energy, glitch FX
   ============================================ */
[data-design="neon-racer"] {
  --bg: #050505; --bg2: #0a0a0a;
  --surface: rgba(200,255,0,0.02); --surface-hover: rgba(200,255,0,0.05);
  --border: rgba(200,255,0,0.08); --border-hover: rgba(200,255,0,0.18);
  --text: #f0f0f0; --text-muted: #7a7a7a;
  --accent: #c8ff00; --accent2: #00ff87;
  --glow: rgba(200,255,0,0.15); --glow2: rgba(0,255,135,0.1);
  --radius: 6px; --radius-sm: 4px;
}

/* Neon scanline background */
[data-design="neon-racer"] .bg-grid::before {
  background-image:
    linear-gradient(rgba(200,255,0,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(200,255,0,0.03) 1px, transparent 1px);
  background-size: 50px 50px;
  transform: perspective(400px) rotateX(70deg);
}
[data-design="neon-racer"] .bg-grid::after {
  content: '';
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(200,255,0,0.008) 2px,
    rgba(200,255,0,0.008) 4px
  );
  animation: neon-scanlines 8s linear infinite;
  pointer-events: none;
}
@keyframes neon-scanlines {
  0% { transform: translateY(0); }
  100% { transform: translateY(100px); }
}

[data-design="neon-racer"] .bg-orb--1 { background: rgba(200,255,0,0.06); animation: neon-orb-pulse 4s ease-in-out infinite; }
[data-design="neon-racer"] .bg-orb--2 { background: rgba(0,255,135,0.04); animation: neon-orb-pulse 5s ease-in-out infinite 1s; }
[data-design="neon-racer"] .bg-orb--3 { display: none; }
@keyframes neon-orb-pulse {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.1); }
}

[data-design="neon-racer"] .header { background: rgba(5,5,5,0.88); border-bottom: 1px solid rgba(200,255,0,0.06); }

/* Glitch H1 */
[data-design="neon-racer"] .hero h1 {
  background: linear-gradient(160deg, #fff 10%, #c8ff00 60%, #00ff87 100%);
  -webkit-background-clip: text; background-clip: text;
  font-weight: 900; text-transform: uppercase; letter-spacing: -0.06em;
  position: relative;
  animation: neon-text-glow 3s ease-in-out infinite;
}
@keyframes neon-text-glow {
  0%, 100% { filter: drop-shadow(0 0 8px rgba(200,255,0,0)); }
  50% { filter: drop-shadow(0 0 20px rgba(200,255,0,0.3)); }
}

[data-design="neon-racer"] .hero__badge {
  border-color: rgba(200,255,0,0.2); color: #c8ff00; background: rgba(200,255,0,0.05);
  text-transform: uppercase; letter-spacing: 0.2em;
}
[data-design="neon-racer"] .hero__badge .pulse { background: #c8ff00; animation: neon-blink 0.8s step-end infinite; }
@keyframes neon-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* Speed-stripe card hover */
[data-design="neon-racer"] .card {
  border-radius: 6px; border-color: rgba(200,255,0,0.06); background: rgba(200,255,0,0.015);
  overflow: hidden;
}
[data-design="neon-racer"] .card::after {
  content: '';
  position: absolute; top: 0; left: -100%; width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(200,255,0,0.04), transparent);
  transition: left 0.6s ease;
  pointer-events: none;
}
[data-design="neon-racer"] .card:hover::after { left: 150%; }
[data-design="neon-racer"] .card:hover {
  border-color: rgba(200,255,0,0.3);
  box-shadow: 0 0 60px rgba(200,255,0,0.08), 0 0 2px rgba(200,255,0,0.6);
}
[data-design="neon-racer"] .card__bar { height: 2px; }
[data-design="neon-racer"] .card__badge { border-radius: 4px; text-transform: uppercase; letter-spacing: 0.08em; }
[data-design="neon-racer"] .card__badge--web { color: #c8ff00; border-color: rgba(200,255,0,0.2); background: rgba(200,255,0,0.06); }
[data-design="neon-racer"] .card__badge--app { color: #00ff87; border-color: rgba(0,255,135,0.2); background: rgba(0,255,135,0.06); }
[data-design="neon-racer"] .card__link { color: #c8ff00; transition: text-shadow 0.3s, gap 0.25s; }
[data-design="neon-racer"] .card__link:hover { text-shadow: 0 0 12px rgba(200,255,0,0.5); }

/* Reveal: slide in from left with neon trail */
[data-design="neon-racer"] .card { transform: translateX(-60px) translateY(0); opacity: 0; }
[data-design="neon-racer"] .card.vis { animation: neon-card-in 0.5s ease forwards; }
@keyframes neon-card-in {
  0% { opacity: 0; transform: translateX(-60px); box-shadow: -20px 0 40px rgba(200,255,0,0.1); }
  60% { box-shadow: -5px 0 20px rgba(200,255,0,0.05); }
  100% { opacity: 1; transform: translateX(0); box-shadow: none; }
}

[data-design="neon-racer"] .section__tag { color: #c8ff00; border-color: rgba(200,255,0,0.15); background: rgba(200,255,0,0.05); border-radius: 4px; }
[data-design="neon-racer"] .section__tag--purple { color: #00ff87; border-color: rgba(0,255,135,0.15); background: rgba(0,255,135,0.05); }
[data-design="neon-racer"] .stat__num { color: #c8ff00; font-variant-numeric: tabular-nums; }
[data-design="neon-racer"] .stat { border-radius: 4px; border-color: rgba(200,255,0,0.06); position: relative; overflow: hidden; }
[data-design="neon-racer"] .stat::before {
  content: ''; position: absolute; top: -1px; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, #c8ff00, transparent);
  animation: neon-stat-scan 3s linear infinite;
}
@keyframes neon-stat-scan { 0% { opacity: 0; } 45% { opacity: 0; } 50% { opacity: 1; } 55% { opacity: 0; } 100% { opacity: 0; } }

[data-design="neon-racer"] .cta-btn { background: #c8ff00; color: #000; border-radius: 4px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; }
[data-design="neon-racer"] .cta-btn:hover { box-shadow: 0 0 50px rgba(200,255,0,0.4), 0 0 100px rgba(200,255,0,0.15); transform: translateY(-2px); }
[data-design="neon-racer"] .cta-btn--leads { background: linear-gradient(135deg, #00ff87, #c8ff00); }
[data-design="neon-racer"] .cta-box::before { background: linear-gradient(90deg, transparent, #c8ff00 50%, transparent); animation: neon-line-pulse 2s ease-in-out infinite; }
[data-design="neon-racer"] .cta-box--leads::before { background: linear-gradient(90deg, transparent, #00ff87 50%, transparent); }
@keyframes neon-line-pulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }
[data-design="neon-racer"] .scroll-progress { background: #c8ff00; box-shadow: 0 0 12px rgba(200,255,0,0.5); }
[data-design="neon-racer"] .usp::before { background: #c8ff00; box-shadow: 0 0 6px rgba(200,255,0,0.4); }
[data-design="neon-racer"] ::selection { background: rgba(200,255,0,0.3); color: #000; }

/* Hero image + noise */
[data-design="neon-racer"] .fx-hero-img {
  opacity: 0.15;
  background-image: url('../img/hero-neon.webp');
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.6) 0%, transparent 70%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.6) 0%, transparent 70%);
}
[data-design="neon-racer"] .fx-noise { opacity: 0.04; }

/* Glitch H1 on hover */
[data-design="neon-racer"] .hero h1.glitching {
  animation: neon-glitch 0.4s step-end;
}
@keyframes neon-glitch {
  0% { clip-path: inset(40% 0 0 0); transform: translate(-3px, 2px); }
  10% { clip-path: inset(0 0 60% 0); transform: translate(3px, -1px); }
  20% { clip-path: inset(20% 0 40% 0); transform: translate(-2px, 3px); }
  30% { clip-path: inset(60% 0 10% 0); transform: translate(1px, -2px); }
  40% { clip-path: inset(10% 0 30% 0); transform: translate(4px, 1px); }
  50% { clip-path: inset(50% 0 20% 0); transform: translate(-3px, -3px); }
  60% { clip-path: inset(0 0 80% 0); transform: translate(2px, 2px); }
  70% { clip-path: inset(70% 0 5% 0); transform: translate(-1px, -1px); }
  80% { clip-path: inset(30% 0 50% 0); transform: translate(3px, 0); }
  90% { clip-path: inset(5% 0 70% 0); transform: translate(0, 3px); }
  100% { clip-path: none; transform: none; }
}

/* Animated gradient border on CTA */
[data-design="neon-racer"] .cta-btn {
  position: relative; overflow: hidden;
}
[data-design="neon-racer"] .cta-btn::before {
  content: ''; position: absolute; inset: -2px;
  background: conic-gradient(from 0deg, #c8ff00, #00ff87, #c8ff00);
  border-radius: inherit; z-index: -2;
  animation: neon-rotate-border 3s linear infinite;
}
[data-design="neon-racer"] .cta-btn::after {
  content: ''; position: absolute; inset: 2px;
  background: #050505; border-radius: inherit; z-index: -1;
}
@keyframes neon-rotate-border {
  to { transform: rotate(360deg); }
}

/* Animated stat numbers glow */
[data-design="neon-racer"] .stat__num {
  text-shadow: 0 0 20px rgba(200,255,0,0.3);
  animation: neon-num-flicker 4s ease-in-out infinite;
}
@keyframes neon-num-flicker {
  0%, 100% { text-shadow: 0 0 20px rgba(200,255,0,0.3); }
  50% { text-shadow: 0 0 40px rgba(200,255,0,0.6), 0 0 80px rgba(200,255,0,0.2); }
}


/* ============================================
   DESIGN 2: MINIMAL OPAL
   Opal Camera — ultra-clean, smooth parallax, subtle float
   ============================================ */
[data-design="minimal-opal"] {
  --bg: #ffffff; --bg2: #f9fafb;
  --surface: rgba(0,0,0,0.02); --surface-hover: rgba(0,0,0,0.04);
  --border: rgba(0,0,0,0.06); --border-hover: rgba(0,0,0,0.12);
  --text: #111827; --text-muted: #6b7280;
  --accent: #111827; --accent2: #6b7280;
  --glow: rgba(0,0,0,0.04); --glow2: rgba(0,0,0,0.02);
  --radius: 16px; --radius-sm: 10px;
}
[data-design="minimal-opal"] .bg-grid,
[data-design="minimal-opal"] .bg-orb--1,
[data-design="minimal-opal"] .bg-orb--2,
[data-design="minimal-opal"] .bg-orb--3 { display: none; }
[data-design="minimal-opal"] body { font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif; }
[data-design="minimal-opal"] .header { background: rgba(255,255,255,0.88); border-bottom-color: rgba(0,0,0,0.05); }
[data-design="minimal-opal"] .header__nav a:hover { color: #111827; }

/* Elegant fade-up with slight scale */
[data-design="minimal-opal"] .hero h1 {
  background: none; -webkit-background-clip: unset; background-clip: unset;
  -webkit-text-fill-color: #111827;
  font-weight: 700; letter-spacing: -0.05em;
}
[data-design="minimal-opal"] .hero__badge { color: #6b7280; border-color: rgba(0,0,0,0.08); background: rgba(0,0,0,0.03); }
[data-design="minimal-opal"] .hero__badge .pulse { background: #111827; }

/* Smooth float reveal for hero elements */
[data-design="minimal-opal"] .hero__badge.vis { transition: opacity 1s ease, transform 1s ease; transition-delay: 0.2s; }
[data-design="minimal-opal"] .hero h1.vis { transition: opacity 1.2s ease, transform 1.2s ease; transition-delay: 0.4s; }
[data-design="minimal-opal"] .hero__sub.vis { transition: opacity 1s ease, transform 1s ease; transition-delay: 0.7s; }
[data-design="minimal-opal"] .stats.vis { transition: opacity 0.8s ease, transform 0.8s ease; transition-delay: 1s; }

/* Cards: clean with subtle hover float + shadow bloom */
[data-design="minimal-opal"] .card {
  background: #fff; border-color: rgba(0,0,0,0.06);
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  transition: transform 0.5s cubic-bezier(.2,.8,.2,1), box-shadow 0.5s cubic-bezier(.2,.8,.2,1), border-color 0.3s;
}
[data-design="minimal-opal"] .card:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 64px rgba(0,0,0,0.08), 0 8px 24px rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.08);
}
[data-design="minimal-opal"] .card__bar { height: 0; }

/* Reveal: graceful scale-up from 0.95 */
[data-design="minimal-opal"] .card { transform: translateY(30px) scale(0.97); }
[data-design="minimal-opal"] .card.vis { animation: opal-card-in 0.7s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes opal-card-in {
  to { opacity: 1; transform: translateY(0) scale(1); }
}

[data-design="minimal-opal"] .card__badge { border-radius: 6px; }
[data-design="minimal-opal"] .card__badge--web,
[data-design="minimal-opal"] .card__badge--app,
[data-design="minimal-opal"] .card__badge--plugin { color: #374151; border-color: rgba(0,0,0,0.1); background: rgba(0,0,0,0.03); }
[data-design="minimal-opal"] .card__link { color: #111827; transition: gap 0.4s cubic-bezier(.2,.8,.2,1); }
[data-design="minimal-opal"] .card__link:hover { gap: 14px; }
[data-design="minimal-opal"] .card__tag { background: rgba(0,0,0,0.04); }
[data-design="minimal-opal"] .card__loc { background: rgba(0,0,0,0.03); }
[data-design="minimal-opal"] .section__tag,
[data-design="minimal-opal"] .section__tag--purple { color: #374151; border-color: rgba(0,0,0,0.08); background: rgba(0,0,0,0.03); }
[data-design="minimal-opal"] .section__line { background: linear-gradient(90deg, rgba(0,0,0,0.06), transparent); }
[data-design="minimal-opal"] .section__line--r { background: linear-gradient(90deg, transparent, rgba(0,0,0,0.06)); }

/* Stat counter: subtle border animation */
[data-design="minimal-opal"] .stat {
  background: #fff; border-color: rgba(0,0,0,0.06);
  transition: border-color 0.3s, box-shadow 0.3s;
}
[data-design="minimal-opal"] .stat:hover { border-color: rgba(0,0,0,0.12); box-shadow: 0 4px 20px rgba(0,0,0,0.05); }
[data-design="minimal-opal"] .stat__num { color: #111827; }

[data-design="minimal-opal"] .cta-box { background: #fff; }
[data-design="minimal-opal"] .cta-box::before { background: linear-gradient(90deg, transparent, rgba(0,0,0,0.12), transparent); height: 1px; }
[data-design="minimal-opal"] .cta-btn { background: #111827; color: #fff; transition: box-shadow 0.4s, transform 0.3s, background 0.3s; }
[data-design="minimal-opal"] .cta-btn:hover { box-shadow: 0 12px 40px rgba(0,0,0,0.15); background: #000; transform: translateY(-2px); }
[data-design="minimal-opal"] .cta-btn--leads { background: #374151; }
[data-design="minimal-opal"] .cta-box--leads::before { background: linear-gradient(90deg, transparent, rgba(0,0,0,0.1), transparent); }
[data-design="minimal-opal"] .cta-box--leads strong { color: #111827; }
[data-design="minimal-opal"] .scroll-progress { background: #111827; height: 1px; }
[data-design="minimal-opal"] .usp::before { background: #111827; }
[data-design="minimal-opal"] .footer__links a:hover { color: #111827; }
[data-design="minimal-opal"] .burger span { background: #111827; }
[data-design="minimal-opal"] ::selection { background: rgba(17,24,39,0.12); }
/* Theme toggle hidden via JS for non-original designs */

/* Hero image */
[data-design="minimal-opal"] .fx-hero-img {
  opacity: 0.06;
  background-image: url('../img/hero-opal.webp');
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.4) 0%, transparent 50%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.4) 0%, transparent 50%);
}
[data-design="minimal-opal"] .fx-noise { opacity: 0.02; }

/* Animated underline on section tags */
[data-design="minimal-opal"] .section__tag {
  position: relative; overflow: hidden;
}
[data-design="minimal-opal"] .section__tag::after {
  content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px;
  background: #111827; transform: scaleX(0); transform-origin: right;
  transition: transform 0.6s cubic-bezier(.2,.8,.2,1);
}
[data-design="minimal-opal"] .section__head.vis .section__tag::after {
  transform: scaleX(1); transform-origin: left;
}

/* Smooth card inner content reveal */
[data-design="minimal-opal"] .card__desc {
  transition: opacity 0.6s 0.2s, transform 0.6s 0.2s;
}
[data-design="minimal-opal"] .card .card__desc {
  opacity: 0.6; transform: translateY(4px);
}
[data-design="minimal-opal"] .card:hover .card__desc {
  opacity: 1; transform: translateY(0);
}

/* CTA button micro-interaction */
[data-design="minimal-opal"] .cta-btn { transition: box-shadow 0.4s, transform 0.3s, background 0.3s, padding 0.3s; }
[data-design="minimal-opal"] .cta-btn:hover { padding-left: 36px; padding-right: 36px; }

/* Stat number count-up feel */
[data-design="minimal-opal"] .stat__num { transition: color 0.3s; }
[data-design="minimal-opal"] .stat:hover .stat__num { color: #000; }

@media (max-width: 768px) {
  [data-design="minimal-opal"] .header__nav { background: rgba(255,255,255,0.97); }
}


/* ============================================
   DESIGN 3: LUSION STUDIO
   Lusion — cinematic B&W, text reveal, magnetic hover, dramatic scale
   ============================================ */
[data-design="lusion-studio"] {
  --bg: #000; --bg2: #080808;
  --surface: rgba(255,255,255,0.03); --surface-hover: rgba(255,255,255,0.06);
  --border: rgba(255,255,255,0.05); --border-hover: rgba(255,255,255,0.12);
  --text: #fff; --text-muted: #888;
  --accent: #fff; --accent2: #aaa;
  --glow: rgba(255,255,255,0.05); --glow2: rgba(255,255,255,0.03);
  --radius: 0px; --radius-sm: 0px;
}
[data-design="lusion-studio"] .bg-grid { display: none; }
[data-design="lusion-studio"] .bg-orb--1 { background: rgba(255,255,255,0.02); filter: blur(200px); animation: lusion-orb-drift 20s ease-in-out infinite; }
[data-design="lusion-studio"] .bg-orb--2,
[data-design="lusion-studio"] .bg-orb--3 { display: none; }
@keyframes lusion-orb-drift {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(5%, -8%); }
  50% { transform: translate(-3%, 5%); }
  75% { transform: translate(8%, 3%); }
}

[data-design="lusion-studio"] .header { background: rgba(0,0,0,0.8); border-bottom-color: rgba(255,255,255,0.04); }

/* Cinematic H1 — slow reveal with clip-path */
[data-design="lusion-studio"] .hero h1 {
  background: none; -webkit-background-clip: unset; background-clip: unset;
  -webkit-text-fill-color: #fff;
  font-size: clamp(3.5rem, 10vw, 8rem);
  font-weight: 200; letter-spacing: -0.06em; line-height: 0.92;
  text-transform: uppercase;
}
[data-design="lusion-studio"] .hero h1.vis {
  animation: lusion-h1-reveal 1.2s cubic-bezier(.16,1,.3,1) forwards;
  transition: none;
}
@keyframes lusion-h1-reveal {
  0% { opacity: 0; transform: translateY(80px); letter-spacing: 0.1em; }
  100% { opacity: 1; transform: translateY(0); letter-spacing: -0.06em; }
}

[data-design="lusion-studio"] .hero__badge {
  border-radius: 0; border-color: rgba(255,255,255,0.1); color: #888;
  background: transparent; letter-spacing: 0.25em;
}
[data-design="lusion-studio"] .hero__badge .pulse { background: #fff; }
[data-design="lusion-studio"] .hero__sub { letter-spacing: 0.02em; font-weight: 300; }

/* Cards: dramatic border-reveal on hover */
[data-design="lusion-studio"] .card {
  border-radius: 0; border-color: rgba(255,255,255,0.04); background: rgba(255,255,255,0.02);
  position: relative; overflow: hidden;
}
[data-design="lusion-studio"] .card::before {
  content: ''; position: absolute; inset: 0;
  border: 1px solid rgba(255,255,255,0.15);
  opacity: 0; transition: opacity 0.6s;
  pointer-events: none; z-index: 2;
}
[data-design="lusion-studio"] .card:hover::before { opacity: 1; }
[data-design="lusion-studio"] .card::after {
  content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(255,255,255,0.03), transparent 60%);
  opacity: 0; transition: opacity 0.4s; pointer-events: none;
}
[data-design="lusion-studio"] .card:hover::after { opacity: 1; }
[data-design="lusion-studio"] .card:hover {
  border-color: rgba(255,255,255,0.08); box-shadow: 0 40px 80px rgba(0,0,0,0.5);
}

/* Reveal: cinematic clip from bottom */
[data-design="lusion-studio"] .card { transform: translateY(60px); }
[data-design="lusion-studio"] .card.vis { animation: lusion-card-in 0.8s cubic-bezier(.16,1,.3,1) forwards; }
@keyframes lusion-card-in {
  to { opacity: 1; transform: translateY(0); }
}

[data-design="lusion-studio"] .card__bar { height: 1px; background: rgba(255,255,255,0.06) !important; }
[data-design="lusion-studio"] .card__badge { border-radius: 0; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 500; }
[data-design="lusion-studio"] .card__badge--web,
[data-design="lusion-studio"] .card__badge--app,
[data-design="lusion-studio"] .card__badge--plugin { color: #888; border-color: rgba(255,255,255,0.08); background: transparent; }
[data-design="lusion-studio"] .card__name { font-weight: 400; letter-spacing: -0.02em; font-size: 1.3rem; }
[data-design="lusion-studio"] .card__link {
  color: #fff; font-weight: 400; letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.72rem;
  position: relative; overflow: hidden;
}
[data-design="lusion-studio"] .card__link::after {
  content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 1px;
  background: #fff; transition: width 0.4s cubic-bezier(.16,1,.3,1);
}
[data-design="lusion-studio"] .card__link:hover::after { width: 100%; }
[data-design="lusion-studio"] .card__icon { border-radius: 0; }

[data-design="lusion-studio"] .section__tag { border-radius: 0; color: #888; border-color: rgba(255,255,255,0.06); background: transparent; letter-spacing: 0.2em; }
[data-design="lusion-studio"] .section__tag--purple { color: #aaa; border-color: rgba(255,255,255,0.06); background: transparent; }

/* Section reveal: horizontal line expansion */
[data-design="lusion-studio"] .section__head.vis .section__line {
  animation: lusion-line-expand 0.8s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes lusion-line-expand {
  from { transform: scaleX(0); } to { transform: scaleX(1); }
}
[data-design="lusion-studio"] .section__line { transform-origin: right; transform: scaleX(0); }
[data-design="lusion-studio"] .section__line--r { transform-origin: left; }

[data-design="lusion-studio"] .stat { border-radius: 0; }
[data-design="lusion-studio"] .stat__num { color: #fff; font-weight: 200; font-size: 2.4rem; }
[data-design="lusion-studio"] .stat__label { letter-spacing: 0.2em; }
[data-design="lusion-studio"] .cta-box { border-radius: 0; }
[data-design="lusion-studio"] .cta-box h2 { font-weight: 300; letter-spacing: -0.03em; text-transform: uppercase; }
[data-design="lusion-studio"] .cta-box::before { background: rgba(255,255,255,0.06); }
[data-design="lusion-studio"] .cta-btn {
  background: #fff; color: #000; border-radius: 0;
  font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.78rem;
  transition: box-shadow 0.4s, transform 0.3s, letter-spacing 0.4s;
}
[data-design="lusion-studio"] .cta-btn:hover { box-shadow: 0 0 60px rgba(255,255,255,0.15); letter-spacing: 0.18em; }
[data-design="lusion-studio"] .cta-btn--leads { background: #ccc; }
[data-design="lusion-studio"] .cta-box--leads::before { background: rgba(255,255,255,0.04); }
[data-design="lusion-studio"] .cta-box--leads strong { color: #fff; }
[data-design="lusion-studio"] .scroll-progress { background: #fff; height: 1px; }
[data-design="lusion-studio"] .usp::before { background: #fff; }
[data-design="lusion-studio"] .usp { letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.68rem; }
[data-design="lusion-studio"] ::selection { background: rgba(255,255,255,0.2); }

/* Hero image */
[data-design="lusion-studio"] .fx-hero-img {
  opacity: 0.12;
  background-image: url('../img/hero-lusion.webp');
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, transparent 60%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, transparent 60%);
  filter: grayscale(1) contrast(1.2);
}
[data-design="lusion-studio"] .fx-noise { opacity: 0.05; }

/* Dramatic hero sub reveal */
[data-design="lusion-studio"] .hero__sub.vis {
  animation: lusion-sub-reveal 1s cubic-bezier(.16,1,.3,1) 0.6s forwards;
  opacity: 0;
}
@keyframes lusion-sub-reveal {
  0% { opacity: 0; transform: translateY(30px); filter: blur(4px); }
  100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}

/* Stats dramatic count reveal */
[data-design="lusion-studio"] .stats.vis {
  animation: lusion-stats-reveal 0.8s cubic-bezier(.16,1,.3,1) 1s forwards;
  opacity: 0;
}
@keyframes lusion-stats-reveal {
  0% { opacity: 0; transform: translateY(40px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Card name hover reveal */
[data-design="lusion-studio"] .card__name {
  transition: letter-spacing 0.4s cubic-bezier(.16,1,.3,1);
}
[data-design="lusion-studio"] .card:hover .card__name {
  letter-spacing: 0.02em;
}

/* Section dividers pulse */
[data-design="lusion-studio"] .section__line { background: rgba(255,255,255,0.06); }

/* Dramatic CTA section */
[data-design="lusion-studio"] .cta-box h2 {
  font-size: clamp(1.8rem, 4vw, 3.5rem);
  line-height: 1.1;
}

/* Footer minimal */
[data-design="lusion-studio"] .footer { border-top: 1px solid rgba(255,255,255,0.04); }

@media (max-width: 768px) {
  [data-design="lusion-studio"] .header__nav { background: rgba(0,0,0,0.97); }
  [data-design="lusion-studio"] #fx-cursor,
  [data-design="lusion-studio"] #fx-cursor-dot { display: none !important; }
}


/* ============================================
   DESIGN 4: YERBA FRESH
   MANA Yerba Maté — bouncy, playful, organic warmth
   ============================================ */
[data-design="yerba-fresh"] {
  --bg: #fefdf8; --bg2: #f7f5ed;
  --surface: rgba(134,239,172,0.06); --surface-hover: rgba(134,239,172,0.1);
  --border: rgba(22,101,52,0.08); --border-hover: rgba(22,101,52,0.16);
  --text: #1a2e1a; --text-muted: #5c7a5c;
  --accent: #16a34a; --accent2: #d97706;
  --glow: rgba(22,163,74,0.1); --glow2: rgba(217,119,6,0.08);
  --radius: 24px; --radius-sm: 14px;
}
[data-design="yerba-fresh"] .bg-grid { display: none; }
/* Floating organic blobs */
[data-design="yerba-fresh"] .bg-orb--1 {
  background: rgba(134,239,172,0.12); filter: blur(180px);
  animation: yerba-float-1 12s ease-in-out infinite;
}
[data-design="yerba-fresh"] .bg-orb--2 {
  background: rgba(251,191,36,0.1); filter: blur(160px);
  animation: yerba-float-2 15s ease-in-out infinite;
}
[data-design="yerba-fresh"] .bg-orb--3 {
  background: rgba(134,239,172,0.08); filter: blur(140px);
  animation: yerba-float-3 18s ease-in-out infinite;
}
@keyframes yerba-float-1 {
  0%, 100% { transform: translate(0,0) rotate(0deg); }
  33% { transform: translate(30px, -40px) rotate(5deg); }
  66% { transform: translate(-20px, 20px) rotate(-3deg); }
}
@keyframes yerba-float-2 {
  0%, 100% { transform: translate(0,0); }
  50% { transform: translate(-40px, 30px); }
}
@keyframes yerba-float-3 {
  0%, 100% { transform: translate(0,0) scale(1); }
  50% { transform: translate(25px, -15px) scale(1.15); }
}

[data-design="yerba-fresh"] body { font-family: 'Nunito', 'DM Sans', system-ui, -apple-system, sans-serif; }
[data-design="yerba-fresh"] .header { background: rgba(254,253,248,0.88); border-bottom-color: rgba(22,101,52,0.06); border-radius: 0 0 20px 20px; }
[data-design="yerba-fresh"] .header__nav a:hover { color: #16a34a; }

[data-design="yerba-fresh"] .hero h1 {
  background: linear-gradient(140deg, #1a2e1a 10%, #16a34a 50%, #d97706 100%);
  -webkit-background-clip: text; background-clip: text;
  font-weight: 800; letter-spacing: -0.03em;
}
[data-design="yerba-fresh"] .hero__badge { color: #16a34a; border-color: rgba(22,163,74,0.15); background: rgba(22,163,74,0.06); }
[data-design="yerba-fresh"] .hero__badge .pulse { background: #16a34a; }

/* Bouncy spring reveal for hero */
[data-design="yerba-fresh"] .hero__badge.vis { transition: opacity 0.5s, transform 0.8s cubic-bezier(.34,1.56,.64,1); transition-delay: 0.15s; }
[data-design="yerba-fresh"] .hero h1.vis { transition: opacity 0.5s, transform 0.8s cubic-bezier(.34,1.56,.64,1); transition-delay: 0.35s; }
[data-design="yerba-fresh"] .hero__sub.vis { transition: opacity 0.5s, transform 0.8s cubic-bezier(.34,1.56,.64,1); transition-delay: 0.55s; }
[data-design="yerba-fresh"] .stats.vis { transition: opacity 0.5s, transform 0.8s cubic-bezier(.34,1.56,.64,1); transition-delay: 0.75s; }

/* Cards: playful hover bounce + wobble */
[data-design="yerba-fresh"] .card {
  background: rgba(255,255,255,0.7); border-color: rgba(22,101,52,0.06);
  border-radius: 24px; box-shadow: 0 2px 8px rgba(22,101,52,0.04);
  transition: transform 0.4s cubic-bezier(.34,1.56,.64,1), box-shadow 0.4s, border-color 0.3s;
}
[data-design="yerba-fresh"] .card:hover {
  transform: translateY(-6px) rotate(-0.5deg);
  border-color: rgba(22,163,74,0.2);
  box-shadow: 0 20px 48px rgba(22,101,52,0.1), 0 4px 12px rgba(22,101,52,0.06);
}

/* Reveal: spring-bounce from below */
[data-design="yerba-fresh"] .card { transform: translateY(50px) scale(0.95); }
[data-design="yerba-fresh"] .card.vis { animation: yerba-card-in 0.7s cubic-bezier(.34,1.56,.64,1) forwards; }
@keyframes yerba-card-in {
  to { opacity: 1; transform: translateY(0) scale(1); }
}

[data-design="yerba-fresh"] .card__bar { height: 4px; border-radius: 24px 24px 0 0; }
[data-design="yerba-fresh"] .card__badge { border-radius: 100px; }
[data-design="yerba-fresh"] .card__badge--web { color: #16a34a; border-color: rgba(22,163,74,0.18); background: rgba(22,163,74,0.08); }
[data-design="yerba-fresh"] .card__badge--app { color: #d97706; border-color: rgba(217,119,6,0.18); background: rgba(217,119,6,0.08); }
[data-design="yerba-fresh"] .card__badge--plugin { color: #b45309; border-color: rgba(180,83,9,0.18); background: rgba(180,83,9,0.06); }
[data-design="yerba-fresh"] .card__icon { border-radius: 14px; }
[data-design="yerba-fresh"] .card__link { color: #16a34a; }
[data-design="yerba-fresh"] .card__link:hover { gap: 14px; }
[data-design="yerba-fresh"] .card__tag { background: rgba(22,163,74,0.06); border-radius: 8px; }
[data-design="yerba-fresh"] .card__loc { background: rgba(22,163,74,0.05); border-radius: 8px; }
[data-design="yerba-fresh"] .section__tag { color: #16a34a; border-color: rgba(22,163,74,0.12); background: rgba(22,163,74,0.05); }
[data-design="yerba-fresh"] .section__tag--purple { color: #d97706; border-color: rgba(217,119,6,0.12); background: rgba(217,119,6,0.05); }

/* Stat: wobble on hover */
[data-design="yerba-fresh"] .stat {
  background: rgba(255,255,255,0.6); border-color: rgba(22,101,52,0.06); border-radius: 14px;
  transition: transform 0.3s cubic-bezier(.34,1.56,.64,1);
}
[data-design="yerba-fresh"] .stat:hover { transform: scale(1.05) rotate(-1deg); }
[data-design="yerba-fresh"] .stat__num { color: #16a34a; }

[data-design="yerba-fresh"] .cta-box { background: rgba(255,255,255,0.6); border-radius: 24px; }
[data-design="yerba-fresh"] .cta-box::before { background: linear-gradient(90deg, transparent, #16a34a 40%, #d97706 60%, transparent); border-radius: 24px 24px 0 0; }
[data-design="yerba-fresh"] .cta-btn {
  background: linear-gradient(135deg, #16a34a, #22c55e); border-radius: 100px;
  transition: transform 0.3s cubic-bezier(.34,1.56,.64,1), box-shadow 0.3s;
}
[data-design="yerba-fresh"] .cta-btn:hover { box-shadow: 0 8px 32px rgba(22,163,74,0.25); transform: translateY(-3px) scale(1.03); }
[data-design="yerba-fresh"] .cta-btn--leads { background: linear-gradient(135deg, #d97706, #f59e0b); }
[data-design="yerba-fresh"] .cta-box--leads::before { background: linear-gradient(90deg, transparent, #d97706 40%, #f59e0b 60%, transparent); }
[data-design="yerba-fresh"] .cta-box--leads strong { color: #16a34a; }
[data-design="yerba-fresh"] .scroll-progress { background: linear-gradient(90deg, #16a34a, #d97706); border-radius: 0 2px 2px 0; height: 3px; }
[data-design="yerba-fresh"] .usp::before { background: linear-gradient(135deg, #16a34a, #d97706); width: 8px; height: 8px; }
[data-design="yerba-fresh"] .footer__links a:hover { color: #16a34a; }
[data-design="yerba-fresh"] .burger span { background: #1a2e1a; }
[data-design="yerba-fresh"] ::selection { background: rgba(22,163,74,0.15); }

/* Hero image */
[data-design="yerba-fresh"] .fx-hero-img {
  opacity: 0.1;
  background-image: url('../img/hero-yerba.webp');
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, transparent 60%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, transparent 60%);
}

/* Animated gradient background */
[data-design="yerba-fresh"] body::before {
  content: ''; position: fixed; inset: 0; z-index: -1;
  background: linear-gradient(
    135deg,
    rgba(134,239,172,0.05) 0%,
    rgba(251,191,36,0.03) 25%,
    rgba(134,239,172,0.05) 50%,
    rgba(251,191,36,0.03) 75%,
    rgba(134,239,172,0.05) 100%
  );
  background-size: 400% 400%;
  animation: yerba-gradient-shift 15s ease infinite;
  pointer-events: none;
}
@keyframes yerba-gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Badge bounce in */
[data-design="yerba-fresh"] .hero__badge.vis {
  animation: yerba-badge-pop 0.6s cubic-bezier(.34,1.56,.64,1) 0.2s forwards;
  opacity: 0;
}
@keyframes yerba-badge-pop {
  0% { opacity: 0; transform: scale(0.5) rotate(-5deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}

/* Card tags jiggle on hover */
[data-design="yerba-fresh"] .card:hover .card__tag {
  animation: yerba-tag-jiggle 0.4s cubic-bezier(.34,1.56,.64,1);
}
@keyframes yerba-tag-jiggle {
  0% { transform: rotate(0); }
  25% { transform: rotate(-2deg); }
  75% { transform: rotate(2deg); }
  100% { transform: rotate(0); }
}

/* CTA confetti-like hover shimmer */
[data-design="yerba-fresh"] .cta-btn { position: relative; overflow: hidden; }
[data-design="yerba-fresh"] .cta-btn::before {
  content: ''; position: absolute; top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: conic-gradient(
    transparent 0deg,
    rgba(255,255,255,0.15) 60deg,
    transparent 120deg,
    rgba(255,255,255,0.1) 180deg,
    transparent 240deg,
    rgba(255,255,255,0.15) 300deg,
    transparent 360deg
  );
  animation: yerba-shimmer 4s linear infinite;
  opacity: 0; transition: opacity 0.3s;
}
[data-design="yerba-fresh"] .cta-btn:hover::before { opacity: 1; }
@keyframes yerba-shimmer { to { transform: rotate(360deg); } }

/* Section head fun enter */
[data-design="yerba-fresh"] .section__head.vis .section__tag {
  animation: yerba-tag-bounce 0.6s cubic-bezier(.34,1.56,.64,1);
}
@keyframes yerba-tag-bounce {
  0% { transform: scale(0.8) translateY(10px); opacity: 0; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}

@media (max-width: 768px) {
  [data-design="yerba-fresh"] .header__nav { background: rgba(254,253,248,0.97); }
}


/* ============================================
   DESIGN 5: NOOMO MONO
   Noomo Agency — dark sophisticated, text-mask reveal, award-slide feel
   ============================================ */
[data-design="noomo-mono"] {
  --bg: #0e0e0e; --bg2: #141414;
  --surface: rgba(255,255,255,0.025); --surface-hover: rgba(255,255,255,0.045);
  --border: rgba(255,255,255,0.06); --border-hover: rgba(255,255,255,0.1);
  --text: #e5e5e5; --text-muted: #737373;
  --accent: #e5e5e5; --accent2: #a3a3a3;
  --glow: rgba(255,255,255,0.03); --glow2: rgba(255,255,255,0.02);
  --radius: 12px; --radius-sm: 8px;
}

/* Subtle grid — no perspective, flat like a drawing board */
[data-design="noomo-mono"] .bg-grid::before {
  background-image:
    linear-gradient(rgba(255,255,255,0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.015) 1px, transparent 1px);
  background-size: 80px 80px;
  transform: none;
  mask-image: none; -webkit-mask-image: none;
  opacity: 0.5;
  animation: noomo-grid-fade 6s ease-in-out infinite;
}
@keyframes noomo-grid-fade {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.6; }
}
[data-design="noomo-mono"] .bg-orb--1,
[data-design="noomo-mono"] .bg-orb--2,
[data-design="noomo-mono"] .bg-orb--3 { display: none; }
[data-design="noomo-mono"] body { font-family: 'Inter', system-ui, -apple-system, sans-serif; letter-spacing: -0.01em; }
[data-design="noomo-mono"] .header { background: rgba(14,14,14,0.85); border-bottom-color: rgba(255,255,255,0.04); }
[data-design="noomo-mono"] .header__logo span { letter-spacing: 0.12em; }

/* H1: slow text-shadow reveal */
[data-design="noomo-mono"] .hero h1 {
  background: none; -webkit-background-clip: unset; background-clip: unset;
  -webkit-text-fill-color: #e5e5e5;
  font-weight: 600; letter-spacing: -0.05em;
}
[data-design="noomo-mono"] .hero h1.vis {
  animation: noomo-h1-reveal 1.5s cubic-bezier(.16,1,.3,1) forwards;
  transition: none;
}
@keyframes noomo-h1-reveal {
  0% { opacity: 0; transform: translateY(40px); filter: blur(8px); }
  100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}

[data-design="noomo-mono"] .hero__badge { color: #737373; border-color: rgba(255,255,255,0.06); background: rgba(255,255,255,0.02); }
[data-design="noomo-mono"] .hero__badge .pulse { background: #e5e5e5; }
[data-design="noomo-mono"] .hero__sub { font-size: clamp(0.9rem, 2vw, 1.05rem); }

/* Cards: smooth stagger with subtle blur-in */
[data-design="noomo-mono"] .card {
  background: rgba(255,255,255,0.02); border-color: rgba(255,255,255,0.05);
  transition: border-color 0.5s, box-shadow 0.5s, transform 0.4s;
}
[data-design="noomo-mono"] .card:hover {
  border-color: rgba(255,255,255,0.12);
  box-shadow: 0 30px 70px rgba(0,0,0,0.4);
  transform: translateY(-4px);
}
/* Horizontal line sweep on hover */
[data-design="noomo-mono"] .card::after {
  content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
  transition: width 0.6s cubic-bezier(.16,1,.3,1); pointer-events: none;
}
[data-design="noomo-mono"] .card:hover::after { width: 100%; }

/* Reveal: blur-in from opacity */
[data-design="noomo-mono"] .card { transform: translateY(30px); }
[data-design="noomo-mono"] .card.vis { animation: noomo-card-in 0.6s cubic-bezier(.16,1,.3,1) forwards; }
@keyframes noomo-card-in {
  0% { opacity: 0; transform: translateY(30px); filter: blur(4px); }
  100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}

[data-design="noomo-mono"] .card__bar { height: 1px; opacity: 0.5; }
[data-design="noomo-mono"] .card__badge--web,
[data-design="noomo-mono"] .card__badge--app,
[data-design="noomo-mono"] .card__badge--plugin { color: #a3a3a3; border-color: rgba(255,255,255,0.07); background: rgba(255,255,255,0.02); }
[data-design="noomo-mono"] .card__link { color: #e5e5e5; font-weight: 500; }
[data-design="noomo-mono"] .card__name { font-weight: 600; }

/* Section head: staggered word reveal */
[data-design="noomo-mono"] .section__head.vis {
  animation: noomo-section-reveal 0.8s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes noomo-section-reveal {
  0% { opacity: 0; transform: translateY(20px); filter: blur(4px); }
  100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}

[data-design="noomo-mono"] .section__tag,
[data-design="noomo-mono"] .section__tag--purple { color: #a3a3a3; border-color: rgba(255,255,255,0.06); background: rgba(255,255,255,0.02); }
[data-design="noomo-mono"] .stat { border-color: rgba(255,255,255,0.04); transition: border-color 0.4s; }
[data-design="noomo-mono"] .stat:hover { border-color: rgba(255,255,255,0.1); }
[data-design="noomo-mono"] .stat__num { color: #e5e5e5; font-weight: 700; }
[data-design="noomo-mono"] .cta-box::before { background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent); }
[data-design="noomo-mono"] .cta-btn { background: #e5e5e5; color: #0e0e0e; font-weight: 600; transition: box-shadow 0.4s, transform 0.3s, background 0.3s; }
[data-design="noomo-mono"] .cta-btn:hover { box-shadow: 0 0 50px rgba(255,255,255,0.1); background: #fff; transform: translateY(-2px); }
[data-design="noomo-mono"] .cta-btn--leads { background: #a3a3a3; }
[data-design="noomo-mono"] .cta-box--leads::before { background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent); }
[data-design="noomo-mono"] .cta-box--leads strong { color: #e5e5e5; }
[data-design="noomo-mono"] .scroll-progress { background: #e5e5e5; }
[data-design="noomo-mono"] .usp::before { background: #e5e5e5; }
[data-design="noomo-mono"] ::selection { background: rgba(255,255,255,0.15); }

/* Hero image */
[data-design="noomo-mono"] .fx-hero-img {
  opacity: 0.08;
  background-image: url('../img/hero-noomo.webp');
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.4) 0%, transparent 50%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.4) 0%, transparent 50%);
}
[data-design="noomo-mono"] .fx-noise { opacity: 0.035; }

/* Animated border on header */
[data-design="noomo-mono"] .header::after {
  content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 1px;
  background: rgba(255,255,255,0.1);
  animation: noomo-header-line 2s cubic-bezier(.16,1,.3,1) 0.5s forwards;
}
@keyframes noomo-header-line { to { width: 100%; } }

/* USP strip stagger */
[data-design="noomo-mono"] .usp-strip.vis .usp {
  animation: noomo-usp-in 0.5s cubic-bezier(.16,1,.3,1) forwards;
  opacity: 0;
}
[data-design="noomo-mono"] .usp-strip.vis .usp:nth-child(1) { animation-delay: 0.1s; }
[data-design="noomo-mono"] .usp-strip.vis .usp:nth-child(2) { animation-delay: 0.2s; }
[data-design="noomo-mono"] .usp-strip.vis .usp:nth-child(3) { animation-delay: 0.3s; }
[data-design="noomo-mono"] .usp-strip.vis .usp:nth-child(4) { animation-delay: 0.4s; }
[data-design="noomo-mono"] .usp-strip.vis .usp:nth-child(5) { animation-delay: 0.5s; }
@keyframes noomo-usp-in {
  0% { opacity: 0; transform: translateY(10px) scaleX(0.9); filter: blur(2px); }
  100% { opacity: 1; transform: translateY(0) scaleX(1); filter: blur(0); }
}

/* Card hover: glow line + expand */
[data-design="noomo-mono"] .card:hover .card__name {
  letter-spacing: 0.01em;
  transition: letter-spacing 0.4s;
}

/* CTA glow pulse */
[data-design="noomo-mono"] .cta-btn { position: relative; }
[data-design="noomo-mono"] .cta-btn::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(229,229,229,0.3);
  animation: noomo-btn-pulse 2.5s ease-in-out infinite;
}
@keyframes noomo-btn-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(229,229,229,0.3); }
  50% { box-shadow: 0 0 0 8px rgba(229,229,229,0); }
}

/* Smooth reveal for stats */
[data-design="noomo-mono"] .stat {
  animation: noomo-stat-in 0.6s cubic-bezier(.16,1,.3,1) forwards;
  opacity: 0;
}
[data-design="noomo-mono"] .stats.vis .stat:nth-child(1) { animation-delay: 0.2s; }
[data-design="noomo-mono"] .stats.vis .stat:nth-child(2) { animation-delay: 0.35s; }
[data-design="noomo-mono"] .stats.vis .stat:nth-child(3) { animation-delay: 0.5s; }
[data-design="noomo-mono"] .stats.vis .stat:nth-child(4) { animation-delay: 0.65s; }
@keyframes noomo-stat-in {
  0% { opacity: 0; transform: translateY(20px); filter: blur(4px); }
  100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}

@media (max-width: 768px) {
  [data-design="noomo-mono"] .header__nav { background: rgba(14,14,14,0.97); }
}