/* Shared styles voor SEO landing pages (vertical hubs, pillars, use-cases) */

* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { font-family: 'Inter', sans-serif; }
.mono { font-family: 'JetBrains Mono', monospace; }

/* Mesh gradient hero */
.mesh-bg {
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(120, 119, 198, 0.4), transparent),
    radial-gradient(ellipse 60% 50% at 80% 80%, rgba(255, 119, 198, 0.15), transparent),
    radial-gradient(ellipse 60% 50% at 20% 80%, rgba(120, 219, 226, 0.15), transparent),
    #0a0a0f;
}

/* Subtle grid overlay */
.grid-bg {
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black 30%, transparent 80%);
}

/* Gradient text */
.gradient-text {
  background: linear-gradient(135deg, #c4b5fd 0%, #fbbf24 35%, #f472b6 70%, #818cf8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% 200%;
  animation: gradient-shift 8s ease infinite;
}
@keyframes gradient-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* Glow */
.glow { box-shadow: 0 0 80px rgba(139, 92, 246, 0.3), 0 0 200px rgba(236, 72, 153, 0.15); }

/* Glass card */
.glass-card {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(10px);
  transition: border-color 0.2s ease, background 0.2s ease;
}
.glass-card:hover {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
}

/* Smooth scroll */
html { scroll-behavior: smooth; }

/* Details/summary marker reset */
summary { list-style: none; }
summary::-webkit-details-marker { display: none; }