html::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 997;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='256' height='256' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  background-repeat: repeat;
  opacity: 0.022;
  mix-blend-mode: screen;
}

html::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(ellipse 65% 48% at 8% 92%, rgb(from var(--gold) r g b / 0.055) 0%, transparent 65%),
    radial-gradient(ellipse 55% 40% at 92% 10%, rgb(from var(--gold) r g b / 0.04) 0%, transparent 58%);
}

.card,
.side-card,
.review-card {
  background: linear-gradient(
    160deg,
    rgba(255, 255, 255, 0.065) 0%,
    rgba(255, 255, 255, 0.022) 100%
  );
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.16),
    inset 0 -0.5px 0 rgba(0, 0, 0, 0.28),
    0 4px 8px -2px rgba(0, 0, 0, 0.4),
    0 16px 48px -8px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.04);
}

.tool-card {
  background: linear-gradient(
    160deg,
    rgba(255, 255, 255, 0.055) 0%,
    rgba(255, 255, 255, 0.016) 100%
  );
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.13),
    inset 0 -0.5px 0 rgba(0, 0, 0, 0.22),
    0 4px 8px -2px rgba(0, 0, 0, 0.32),
    0 12px 36px -8px rgba(0, 0, 0, 0.5);
}

.pro-card {
  background: linear-gradient(
    135deg,
    rgba(26, 18, 0, 0.84) 0%,
    rgba(20, 20, 20, 0.76) 100%
  );
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  box-shadow:
    inset 0 1.5px 0 rgb(from var(--gold) r g b / 0.22),
    inset 0 -0.5px 0 rgba(0, 0, 0, 0.32),
    0 0 0 1px rgb(from var(--gold) r g b / 0.12),
    0 12px 44px -8px rgb(from var(--gold) r g b / 0.14),
    0 4px 10px rgba(0, 0, 0, 0.45);
}

.price-card-inner {
  background: linear-gradient(
    160deg,
    rgba(255, 255, 255, 0.06) 0%,
    rgba(255, 255, 255, 0.02) 100%
  );
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
}

.support-card {
  background: linear-gradient(
    160deg,
    rgba(255, 255, 255, 0.058) 0%,
    rgba(255, 255, 255, 0.018) 100%
  );
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.13),
    inset 0 -0.5px 0 rgba(0, 0, 0, 0.22),
    0 8px 28px rgba(0, 0, 0, 0.42);
}

.modal-card {
  background: linear-gradient(
    160deg,
    rgba(255, 255, 255, 0.075) 0%,
    rgba(255, 255, 255, 0.028) 100%
  );
  backdrop-filter: blur(40px) saturate(200%);
  -webkit-backdrop-filter: blur(40px) saturate(200%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.18),
    inset 0 -0.5px 0 rgba(0, 0, 0, 0.3),
    0 0 0 1px rgb(from var(--gold) r g b / 0.08),
    0 40px 100px rgba(0, 0, 0, 0.75);
}

.progress-card {
  background: linear-gradient(160deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015));
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.11),
    inset 0 -0.5px 0 rgba(0, 0, 0, 0.2),
    0 12px 40px -8px rgba(0, 0, 0, 0.55);
}

.result-card {
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.1),
    0 0 0 1px rgba(0, 230, 118, 0.14),
    0 12px 40px -8px rgba(0, 0, 0, 0.55);
}

@media (hover: hover) {
  .card:hover,
  .side-card:hover,
  .review-card:hover {
    box-shadow:
      inset 0 2px 0 rgba(255, 255, 255, 0.22),
      inset 0 -0.5px 0 rgba(0, 0, 0, 0.28),
      0 4px 8px -2px rgba(0, 0, 0, 0.45),
      0 28px 72px -8px rgba(0, 0, 0, 0.65),
      0 0 0 1px rgb(from var(--gold) r g b / 0.1);
  }

  .tool-card:hover:not(.coming-soon) {
    box-shadow:
      inset 0 2px 0 rgba(255, 255, 255, 0.2),
      inset 0 -0.5px 0 rgba(0, 0, 0, 0.25),
      0 0 0 1px rgb(from var(--gold) r g b / 0.2),
      0 28px 64px -8px rgba(0, 0, 0, 0.65),
      0 0 36px -10px rgb(from var(--gold) r g b / 0.14);
  }

  .support-card:hover {
    box-shadow:
      inset 0 2px 0 rgba(255, 255, 255, 0.2),
      inset 0 -0.5px 0 rgba(0, 0, 0, 0.25),
      0 0 0 1px rgb(from var(--gold) r g b / 0.2),
      0 28px 64px -8px rgba(0, 0, 0, 0.6);
  }
}

.tool-card.coming-soon {
  opacity: 1;
  filter: saturate(0.45) brightness(0.66);
  border-color: rgba(123, 97, 255, 0.24);
  animation: comingSoonGlow 4s ease-in-out infinite;
}

.tool-card.coming-soon:hover {
  filter: saturate(0.45) brightness(0.66);
  border-color: rgba(123, 97, 255, 0.4);
}

.coming-badge {
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 0 14px -4px rgba(123, 97, 255, 0.45);
}

@keyframes comingSoonGlow {
  0%, 100% {
    box-shadow:
      inset 0 1.5px 0 rgba(255, 255, 255, 0.1),
      0 0 0 1px rgba(123, 97, 255, 0.1),
      0 8px 28px rgba(0, 0, 0, 0.42);
  }
  50% {
    box-shadow:
      inset 0 1.5px 0 rgba(255, 255, 255, 0.13),
      0 0 0 1px rgba(123, 97, 255, 0.28),
      0 8px 28px rgba(0, 0, 0, 0.42),
      0 0 24px -6px rgba(123, 97, 255, 0.32);
  }
}

nav {
  background: rgba(8, 8, 8, 0.76);
  backdrop-filter: blur(40px) saturate(200%);
  -webkit-backdrop-filter: blur(40px) saturate(200%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    inset 0 -0.5px 0 rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.03),
    0 20px 60px -16px rgba(0, 0, 0, 0.85);
}

.hero-icon-box {
  background: linear-gradient(160deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.02) 100%);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.16),
    inset 0 -0.5px 0 rgba(0, 0, 0, 0.22),
    0 0 0 1px rgb(from var(--gold) r g b / 0.08),
    0 28px 80px -16px rgba(0, 0, 0, 0.8),
    0 0 70px -24px rgb(from var(--gold) r g b / 0.14);
}

.stat-item {
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.18),
    inset 0 -0.5px 0 rgba(0, 0, 0, 0.28),
    0 8px 32px -6px rgb(from var(--gold) r g b / 0.1),
    0 4px 20px rgba(0, 0, 0, 0.42);
}

@media (hover: hover) {
  .stat-item:hover {
    box-shadow:
      inset 0 2px 0 rgba(255, 255, 255, 0.24),
      inset 0 -0.5px 0 rgba(0, 0, 0, 0.28),
      0 0 0 1px rgb(from var(--gold) r g b / 0.22),
      0 18px 52px -6px rgb(from var(--gold) r g b / 0.26),
      0 6px 24px rgba(0, 0, 0, 0.52);
  }
}

.price-card.featured {
  box-shadow:
    inset 0 1.5px 0 rgb(from var(--gold) r g b / 0.2),
    0 0 0 1px rgb(from var(--gold) r g b / 0.45),
    0 0 0 5px rgb(from var(--gold) r g b / 0.06),
    0 36px 90px -16px rgb(from var(--gold) r g b / 0.18);
}

@media (hover: hover) {
  .price-card.featured:hover {
    box-shadow:
      inset 0 2px 0 rgb(from var(--gold) r g b / 0.25),
      0 0 0 1px rgb(from var(--gold) r g b / 0.6),
      0 0 0 5px rgb(from var(--gold) r g b / 0.1),
      0 44px 100px -16px rgb(from var(--gold) r g b / 0.28);
  }
}

.upload-zone {
  background: rgb(from var(--gold) r g b / 0.016);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow:
    inset 0 0 80px rgb(from var(--gold) r g b / 0.018),
    0 0 0 5px rgb(from var(--gold) r g b / 0.025);
}

.upload-zone:hover {
  box-shadow:
    inset 0 0 80px rgb(from var(--gold) r g b / 0.04),
    0 0 0 5px rgb(from var(--gold) r g b / 0.06),
    0 0 44px -10px rgb(from var(--gold) r g b / 0.28);
}

.upload-icon {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgb(from var(--gold) r g b / 0.2);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.2),
    0 4px 18px rgb(from var(--gold) r g b / 0.16);
}

.fps-option.engine-card {
  background: rgba(255, 255, 255, 0.035);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border: 1.5px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09);
}

.fps-option.engine-card.active {
  background: rgb(from var(--gold) r g b / 0.08);
  border-color: rgb(from var(--gold) r g b / 0.42);
  box-shadow:
    inset 0 1.5px 0 rgb(from var(--gold) r g b / 0.22),
    inset 0 -0.5px 0 rgba(0, 0, 0, 0.16),
    0 0 0 1px rgb(from var(--gold) r g b / 0.14),
    0 8px 24px -8px rgb(from var(--gold) r g b / 0.36);
}

@media (hover: hover) {
  .fps-option.engine-card:hover:not(.active):not(.method-disabled) {
    border-color: rgb(from var(--gold) r g b / 0.32);
    box-shadow:
      inset 0 1.5px 0 rgba(255, 255, 255, 0.14),
      0 0 0 1px rgb(from var(--gold) r g b / 0.08);
  }
}

.render-status-row {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

footer {
  background: rgba(6, 6, 6, 0.84);
  backdrop-filter: blur(32px) saturate(180%);
  -webkit-backdrop-filter: blur(32px) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 -28px 72px -16px rgba(0, 0, 0, 0.75);
}

.input-field {
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow:
    inset 0 1.5px 3px rgba(0, 0, 0, 0.35),
    inset 0 -0.5px 0 rgba(255, 255, 255, 0.04);
}

.input-field:focus {
  border-color: rgb(from var(--gold) r g b / 0.6);
  box-shadow:
    inset 0 1.5px 3px rgba(0, 0, 0, 0.35),
    inset 0 -0.5px 0 rgba(255, 255, 255, 0.04),
    0 0 0 3px rgb(from var(--gold) r g b / 0.13);
}

.modal-overlay {
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(10px) saturate(150%);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
}

.hero-eyebrow {
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 0 18px -6px rgb(from var(--gold) r g b / 0.35);
}

.access-badge,
.ec-tier,
.ec-tid-badge,
.ec-limit-badge {
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.access-badge-premium {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 0 18px -6px rgb(from var(--gold) r g b / 0.5);
}

.review-nav-btn {
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -0.5px 0 rgba(0, 0, 0, 0.22);
}

.review-nav-btn:hover {
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.18),
    inset 0 -0.5px 0 rgba(0, 0, 0, 0.22),
    0 0 0 1px rgb(from var(--gold) r g b / 0.3),
    0 0 16px -4px rgb(from var(--gold) r g b / 0.4);
}

.progress-log {
  background: rgba(4, 4, 4, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 1.5px 4px rgba(0, 0, 0, 0.55);
}

nav.scrolled {
  background: rgba(4, 4, 4, 0.88);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    inset 0 -0.5px 0 rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(255, 255, 255, 0.03),
    0 24px 70px -12px rgba(0, 0, 0, 0.95),
    0 0 0 1px rgb(from var(--gold) r g b / 0.05);
}

@media (max-width: 600px) {
  .card, .side-card, .review-card, .modal-card, .price-card-inner {
    backdrop-filter: blur(16px) saturate(150%);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
  }
  nav {
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tool-card.coming-soon { animation: none; }
  html::before { display: none; }
}

@keyframes blurIn {
  0%   { filter: blur(10px); opacity: 0;   transform: translateY(48px); }
  50%  { filter: blur(5px);  opacity: 0.5; transform: translateY(-5px); }
  100% { filter: blur(0px);  opacity: 1;   transform: translateY(0px);  }
}

.blur-word {
  display: inline-block;
  opacity: 0;
  margin-right: 0.28em;
  will-change: filter, opacity, transform;
}
.blur-word:last-child { margin-right: 0; }
.blur-word.go {
  animation: blurIn 0.64s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes heroHlIn {
  from { opacity: 0; filter: blur(14px); transform: translateY(30px); }
  to   { opacity: 1; filter: blur(0);    transform: translateY(0);    }
}
@keyframes heroAccIn {
  from { opacity: 0; filter: blur(8px); transform: translateY(18px); }
  to   { opacity: 1; filter: blur(0);   transform: translateY(0);    }
}

.hero-h1 {
  animation: heroHlIn 0.95s 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.hero-h1 .hero-h1-accent {
  display: inline-block;
  animation:
    accentShimmer 3.5s linear infinite,
    heroAccIn 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.58s both;
}

@keyframes heroSubIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0);    }
}
.hero p         { animation: heroSubIn 0.7s 0.55s cubic-bezier(0.16, 1, 0.3, 1) both; }
.hero-btns      { animation: heroSubIn 0.7s 0.68s cubic-bezier(0.16, 1, 0.3, 1) both; }
.hero-pills     { animation: heroSubIn 0.7s 0.80s cubic-bezier(0.16, 1, 0.3, 1) both; }

.btn-primary,
.btn-outline,
.nav-actions .btn-ghost,
.studio-topbar .btn-ghost,
.btn-browse {
  border-radius: 999px !important;
}

.btn-gold {
  border-radius: 12px !important;
}

.btn-gold,
.btn-primary,
.process-btn,
.btn-download,
.btn-browse {
  border: 1px solid rgb(from var(--gold) r g b / 0.44) !important;
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18),
    0 2px 6px -2px rgba(0, 0, 0, 0.28),
    0 8px 22px -6px rgb(from var(--gold) r g b / 0.52),
    0 28px 60px -14px rgb(from var(--gold) r g b / 0.72) !important;
}

.btn-gold:hover,
.btn-primary:hover,
.process-btn:hover:not(:disabled),
.btn-download:hover,
.btn-browse:hover {
  filter: brightness(1.07);
  transform: translateY(-3px) scale(1.02);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.42),
    inset 0 -1px 0 rgba(0, 0, 0, 0.22),
    0 2px 8px -2px rgba(0, 0, 0, 0.32),
    0 12px 30px -6px rgb(from var(--gold) r g b / 0.65),
    0 44px 80px -14px rgb(from var(--gold) r g b / 0.96) !important;
}

.btn-gold:active,
.btn-primary:active,
.process-btn:active:not(:disabled),
.btn-download:active {
  filter: brightness(0.94);
  transform: scale(0.97) !important;
}

.btn-outline,
.btn-ghost {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -0.5px 0 rgba(0, 0, 0, 0.1),
    0 1px 4px rgba(0, 0, 0, 0.06),
    0 8px 28px -10px rgb(from var(--gold) r g b / 0.2) !important;
}

.btn-outline:hover,
.btn-ghost:hover {
  transform: translateY(-2px) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -0.5px 0 rgba(0, 0, 0, 0.12),
    0 2px 6px rgba(0, 0, 0, 0.1),
    0 0 0 1.5px rgb(from var(--gold) r g b / 0.38),
    0 18px 48px -10px rgb(from var(--gold) r g b / 0.44) !important;
}

@keyframes ctaBreathe {
  0%, 100% {
    box-shadow:
      inset 0 1.5px 0 rgba(255, 255, 255, 0.3),
      inset 0 -1px 0 rgba(0, 0, 0, 0.18),
      0 2px 6px -2px rgba(0, 0, 0, 0.28),
      0 8px 22px -6px rgb(from var(--gold) r g b / 0.52),
      0 28px 60px -14px rgb(from var(--gold) r g b / 0.72);
    transform: scale(1);
  }
  50% {
    box-shadow:
      inset 0 1.5px 0 rgba(255, 255, 255, 0.44),
      inset 0 -1px 0 rgba(0, 0, 0, 0.22),
      0 2px 8px -2px rgba(0, 0, 0, 0.32),
      0 14px 32px -6px rgb(from var(--gold) r g b / 0.7),
      0 48px 88px -14px rgb(from var(--gold) r g b / 1.0);
    transform: scale(1.018);
  }
}

@media (prefers-reduced-motion: reduce) {
  .blur-word.go { animation: none; opacity: 1; filter: none; transform: none; }
  .hero-h1, .hero-h1 .hero-h1-accent,
  .hero p, .hero-btns, .hero-pills {
    animation: none !important;
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }
}