/* SuperDoggo — sd-hero-fx.css
   Moderne hero-effecten voor de homepage (index.html / app.html): aurora-mesh, grain,
   glimmer-sweep op de CTA, gradient-glow accenttekst, een verfijnde dark mode (volgt de
   OS-voorkeur) en mobiele afwerking. Geladen ná de inline <style>, dus dit wint.
   Respecteert prefers-reduced-motion. */

/* ---------- 1) Aurora / mesh-gradient achter de hero ---------- */
.hero{position:relative;isolation:isolate}
.hero::before{
  content:"";position:absolute;inset:-32% -15% auto -15%;height:155%;z-index:0;pointer-events:none;
  background:
    radial-gradient(38% 46% at 18% 26%, rgba(79,140,255,.40), transparent 70%),
    radial-gradient(34% 42% at 82% 15%, rgba(9,66,182,.32), transparent 70%),
    radial-gradient(46% 54% at 63% 84%, rgba(125,176,255,.36), transparent 70%),
    radial-gradient(30% 38% at 38% 60%, rgba(37,99,235,.22), transparent 70%);
  filter:blur(16px) saturate(1.12);
  animation:sdfx-aura 22s ease-in-out infinite alternate;
}
@keyframes sdfx-aura{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(2.5%,-1.6%,0) scale(1.09)}
  100%{transform:translate3d(-2.5%,1.6%,0) scale(1.05)}
}

/* ---------- 2) Grain / noise-overlay (CSS-only, geen bestand) ---------- */
.hero::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero > .wrap{position:relative;z-index:3}

/* ---------- 3) Glimmer-sweep op de primaire CTA ---------- */
.knop.glow{overflow:hidden;box-shadow:0 0 0 1px rgba(79,140,255,.35),0 14px 30px -12px rgba(9,66,182,.55)}
.knop.glow::after{display:none} /* oude buiten-halo uit (zou weggeknipt worden door overflow) */
.knop.glow::before{
  content:"";position:absolute;top:0;left:-70%;width:48%;height:100%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-18deg);
  animation:sdfx-glim 3.6s ease-in-out 1.1s 2; /* twee vegen, dan stil */
}
@keyframes sdfx-glim{0%{left:-70%}22%{left:140%}100%{left:140%}}

/* ---------- 4) Gradient-tekst + glow op de accentwoorden ---------- */
.hero h1 em,.hero h1 .shimmer{
  background:linear-gradient(92deg,#2563eb 0%,#4f8cff 45%,#8ab6ff 68%,#2563eb 100%);
  background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 16px rgba(37,99,235,.38));
  animation:sdfx-grad 6.5s linear infinite;
}
@keyframes sdfx-grad{to{background-position:220% 0}}

/* ---------- 5) Verfijnde dark mode (volgt OS-voorkeur) ---------- */
@media (prefers-color-scheme: dark){
  :root{--wit:#0f1830;--wolk:#0e1526;--hemel:#0b1220;--inkt:#eaf0ff;--demp:#a3b4d8;--lijn:#1f2c49}
  body{background:#0b1220;color:#eaf0ff}
  nav{background:rgba(11,18,32,.72)!important;border-bottom-color:#1f2c49}
  nav .logo{color:#eaf0ff}
  nav .links a{color:#a3b4d8}
  .hero{background:linear-gradient(180deg,#0e1526,#0b1220);border-bottom-color:#1f2c49}
  .hero::after{opacity:.09}
  .badge{background:#111a30;border-color:#22304f;color:#8ab6ff}
  .beta-form input{background:#111a30;border-color:#26324f;color:#eaf0ff}
  .strook{box-shadow:inset 0 0 0 1px rgba(125,176,255,.12)}
  .merkbanner,.strip{background:#0e1526;border-color:#1f2c49}
  .kaartje,.seckaart{background:#111a30;border-color:#1f2c49}
  .kaartje h3,.seckaart b{color:#eaf0ff}
  .kaartje p,.seckaart span{color:#a3b4d8}
  .waarom{background:linear-gradient(180deg,#0b1220,#0e1526)}
  .vinkjes .v{background:#16213c;color:#8ab6ff}
  .ontdek{background:#0b1220}
  details{background:#111a30;border-color:#1f2c49}
  .faq h2,.kop h2{color:#eaf0ff}
  footer{background:#0e1526;border-top-color:#1f2c49}
  .knop.glow{box-shadow:0 0 0 1px rgba(79,140,255,.45),0 12px 34px -8px rgba(37,99,235,.6)}
  .badge-store{background:#0a1024}
}

/* ---------- 6) Mobiele afwerking (Android + iOS) ---------- */
@media (max-width:640px){
  .hero .wrap{padding-top:32px;padding-bottom:44px;gap:26px}
  .hero h1{font-size:clamp(2rem,8.5vw,2.6rem)}
  .hero p.sub{font-size:1.02rem}
  .beta-form{flex-direction:column;gap:10px}
  .beta-form button{width:100%}
  .stores{gap:10px}
  .badge-store{flex:1 1 44%}
  .strook .wrap{gap:12px 18px}
  .strook b{font-size:1.35rem}
  .merkbanner img{max-height:230px}
  .strip img{width:180px;height:180px}
  .strip figure{width:180px}
  .held{border-radius:20px}
  /* mobiele hero-foto (portret) als die bestaat; anders blijft de landscape-img */
  .hero .podium .held-desktop{display:none}
  .hero .podium .held-mobile{display:block}
}
@media (min-width:641px){
  .hero .podium .held-mobile{display:none}
}

@media (prefers-reduced-motion: reduce){
  .hero::before,.knop.glow::before,.hero h1 em,.hero h1 .shimmer{animation:none}
  .hero h1 em,.hero h1 .shimmer{filter:none}
}