/* ---- WOW enhancement layer (non-destructive) ---- */
:root {
  --radius-xl: 1.25rem;
  --shadow-soft: 0 10px 30px rgba(0,0,0,.10);
  --accent: #00bcd4; /* fallback; will be overridden if site defines --accent */
}

html, body {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

#bg-net {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}

.container,
.wrapper,
.section,
main,
section {
  position: relative;
  z-index: 0;
}

.card {
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-soft);
  backdrop-filter: saturate(120%) blur(2px);
  transition: transform .25s ease, box-shadow .25s ease;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(0,0,0,.14);
}

.btn, .button, button[type], a.button, .cta {
  border-radius: calc(var(--radius-xl) - .25rem);
  box-shadow: 0 8px 20px rgba(0,0,0,.12);
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.btn:hover, .button:hover, a.button:hover, .cta:hover, button[type]:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0,0,0,.16);
}

/* Subtle section parallax layers (optional wrappers you might have) */
.section-hero::before,
.hero::before,
header.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(600px 200px at 10% -10%, color-mix(in oklab, var(--accent) 22%, transparent), transparent 70%),
              radial-gradient(500px 200px at 90% 0%, color-mix(in oklab, var(--accent) 16%, transparent), transparent 70%);
  opacity: .35;
  z-index: -1;
  pointer-events: none;
}

/* Scroll reveal animation */
/* Better grids (non-destructive) */
.auto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: clamp(12px, 2vw, 24px);
}

/* Responsive helpers */
img, video, canvas, svg { max-width: 100%; height: auto; }
.container-responsive { width: min(1100px, 92%); margin-inline: auto; }

/* Subtle separators */
hr {
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,0,0,.12), transparent);
}

/* prefers-reduced-motion accessibility */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}