@media (prefers-reduced-motion: reduce){
    *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; }
  }

  /* ===================== HERO ===================== */
  .fire-hero{
    position:relative;
    width:100%;
    min-height:100vh;
    overflow:hidden;
    display:flex;
    align-items:center;
    isolation:isolate;
  }

  .fire-hero .bg-image{
    position:absolute; inset:0; z-index:0;
    background-image:url('../images/hero-bg.jpg');
    background-size:cover;
    background-position:center 30%;
  }

  /* subtle depth vignette so the fire particles and text read clearly */
  .fire-hero .vignette{
    position:absolute; inset:0; z-index:1; pointer-events:none;
    background:
      radial-gradient(ellipse 90% 70% at 50% 100%, rgba(255,90,20,0.16), transparent 60%),
      linear-gradient(90deg, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.4) 42%, rgba(0,0,0,0.05) 68%),
      linear-gradient(0deg, rgba(0,0,0,0.55) 0%, transparent 30%);
  }

  /* warm flickering glow rising from the ground, behind the particles */
  .fire-hero .ember-glow{
    position:absolute; left:0; right:0; bottom:0; height:42%; z-index:2; pointer-events:none;
    background:radial-gradient(ellipse 70% 100% at 50% 100%, rgba(255,110,30,0.35), rgba(255,60,10,0.12) 45%, transparent 75%);
    animation:emberPulse 3.2s ease-in-out infinite;
    mix-blend-mode:screen;
  }
  @keyframes emberPulse{
    0%,100%{ opacity:0.75; transform:scale(1); }
    50%{ opacity:1; transform:scale(1.04); }
  }

  .fire-hero canvas.fire-canvas{
    position:absolute; inset:0; z-index:3;
    width:100%; height:100%;
    pointer-events:none;
    mix-blend-mode:screen;
  }

  /* ===================== CONTENT ===================== */
  .fire-hero .hero-content{
    position:relative; z-index:4;
    max-width:1280px; margin:0 auto; padding:0 48px;
    width:100%;
  }

  .fire-hero .actions{ display:flex; gap:16px; flex-wrap:wrap; }


  @media (max-width:640px){
    .fire-hero .hero-content{ padding:0 24px; }
    .fire-hero .vignette{
      background:
        radial-gradient(ellipse 90% 70% at 50% 100%, rgba(255,90,20,0.18), transparent 60%),
        linear-gradient(0deg, rgba(0,0,0,0.85) 10%, rgba(0,0,0,0.55) 55%, rgba(0,0,0,0.25) 100%);
    }
  }