/* Enzi "Nova" look for the website — same mood as the client: graphite, silver aurora, glass, white accents. */
:root {
  --bg: #0b0b0e; --panel: #141418; --panel-2: #18181d; --panel-3: #1f1f25;
  --text: #f2f2f4; --muted: #9a9aa2; --muted-2: #6e6e76;
  --accent: #e9e9ee; --accent-2: #ffffff; --accent-3: #cfd3e6; --accent-rgb: 225, 228, 240;
  --line: #ffffff0d; --line-strong: #ffffff1c; --ok: #7dffc4;
}
html, body { background-color: var(--bg); }

/* Animated silver aurora + film grain behind everything */
.bg { background: var(--bg); overflow: hidden; }
.bg__img, .bg__tint { display: none !important; }
.bg::before, .bg::after { content: ''; position: absolute; inset: -20%; pointer-events: none; }
.bg::before {
  background:
    radial-gradient(40% 30% at 20% 20%, rgba(170, 185, 255, .16), transparent 70%),
    radial-gradient(35% 28% at 80% 15%, rgba(220, 200, 255, .12), transparent 70%),
    radial-gradient(45% 35% at 60% 85%, rgba(140, 200, 230, .10), transparent 70%);
  filter: blur(30px);
  animation: nova-drift 28s ease-in-out infinite alternate;
}
.bg::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.06'/></svg>");
  opacity: .9; mix-blend-mode: overlay;
}
@keyframes nova-drift {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(-3%, 2%, 0) scale(1.05); }
  100% { transform: translate3d(3%, -2%, 0) scale(1.02); }
}
.stage { background: transparent; border-color: var(--line-strong); }
.stage::after, .site-body::after { content: none !important; }

/* Glass top bar */
.topbar-wrapper {
  background: rgba(11, 11, 14, .72) !important;
  backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid var(--line) !important;
}
@media (min-width: 901px) { .topbar__nav { background: none !important; border: 0 !important; box-shadow: none !important; } }
@media (max-width: 900px) { .topbar__nav { background: rgba(17, 17, 19, .96) !important; border: 1px solid var(--line-strong) !important; border-radius: 16px; } }
.topbar__link { transition: color .2s ease, background .2s ease; }
.topbar__link { position: relative; }
.topbar__link:hover { color: #ffffff !important; }
.topbar__link.active { color: #ffffff !important; background: none !important; border: 0 !important; }
.topbar__link.active::after { content: '; position: absolute; left: 50%; bottom: 2px; width: 18px; height: 2px; border-radius: 2px;
  transform: translateX(-50%); background: #ffffff; box-shadow: 0 0 10px rgba(255, 255, 255, .75); }

/* Hero */
.landing-copy h1 { text-shadow: 0 8px 40px rgba(0, 0, 0, .6); letter-spacing: -.02em; }
.landing-copy h1 em {
  font-style: normal;
  background: linear-gradient(100deg, #ffffff 0%, #c9cfe6 40%, #ffffff 60%, #aab3d6 100%);
  background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: nova-shine 6s linear infinite;
}
@keyframes nova-shine { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.landing-lead { color: var(--muted); }
.release-note { color: var(--accent-3); }
.release-note > span:first-child { background: var(--ok); box-shadow: 0 0 16px rgba(125, 255, 196, .7); }

/* Buttons */
.action-primary, .topbar__download, .btn:not(.btn--ghost) {
  background: #f1f1f3 !important; color: #111113 !important; border-color: transparent !important;
  box-shadow: 0 10px 34px rgba(255, 255, 255, .12), inset 0 -1px 0 rgba(0, 0, 0, .08);
  transition: transform .2s ease, box-shadow .25s ease, background .2s ease;
}
.action-primary:hover, .topbar__download:hover, .btn:not(.btn--ghost):hover {
  background: #ffffff !important; transform: translateY(-2px);
  box-shadow: 0 14px 44px rgba(255, 255, 255, .22), 0 0 0 4px rgba(255, 255, 255, .06);
}
.action-secondary {
  background: rgba(255, 255, 255, .05) !important; color: var(--text) !important;
  border: 1px solid var(--line-strong) !important; backdrop-filter: blur(10px);
  transition: background .2s ease, transform .2s ease;
}
.action-secondary:hover { background: rgba(255, 255, 255, .09) !important; transform: translateY(-2px); }
.field input:focus, .modal-input:focus { border-color: rgba(255, 255, 255, .45) !important; box-shadow: 0 0 0 4px rgba(255, 255, 255, .06); }

/* Showcase & cards */
.showcase-scenery { background-image: radial-gradient(60% 60% at 70% 20%, rgba(170, 185, 255, .18), transparent 70%), linear-gradient(160deg, #15151b, #0d0d11) !important; }
.loader-showcase::before { content: none !important; }
.showcase-window { border-color: var(--line-strong) !important; box-shadow: 0 30px 90px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .04), 0 0 60px rgba(170, 185, 255, .08) !important; }
.client-facts, .world-card { border-color: var(--line-strong) !important; }
.world-card, .product-card, .profile-card, .card {
  transition: transform .3s cubic-bezier(.2, .8, .2, 1), border-color .3s ease, box-shadow .3s ease;
}
.world-card:hover, .product-card:hover, .profile-card:hover, .card:hover {
  transform: translateY(-4px); border-color: rgba(255, 255, 255, .22) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .45), 0 0 40px rgba(170, 185, 255, .07);
}
::selection { background: rgba(255, 255, 255, .25); color: #fff; }
::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-thumb { background: #2a2a31; border-radius: 10px; border: 2px solid var(--bg); }

@media (prefers-reduced-motion: reduce) { .bg::before, .landing-copy h1 em { animation: none; } }