:root{
      --brand1:#403543; --brand2:#f4cdff; --brand3:#00e0ff;
      --on-black:#f1f1f1; --muted:#d2d7dd;
      --glass: rgba(255,255,255,0.06);
    }
    body{ background:#000; color:var(--on-black); }
/* Make body a positioning context for the absolute hero bg */
body{ 
  position: relative;
  overflow-x: hidden;  /* keep x from causing sideways scroll */
  overflow-y: visible; /* allow vertical bleed */
}

/* Background image sits behind tsParticles (z-index -2 vs particles -1) */
.hero-bg{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  pointer-events: none;
  z-index: -2;
}

/* FORCE hero background to never crop */
.hero-bg{
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

.hero-bg img{
  width: 100% !important;
  height: auto !important;        /* key: prevents fixed-height crop */
  max-height: none !important;
  max-width: none !important;
  object-fit: contain !important; /* safety: if any height gets applied elsewhere */
}


    .gradient-text{
      background: linear-gradient(45deg,var(--brand1),var(--brand2),var(--brand3));
      -webkit-background-clip:text; -webkit-text-fill-color:transparent;
    }

    .btn-gradient{
      background: linear-gradient(45deg,var(--brand1),var(--brand2),var(--brand3));
      border:0; color:#fff; font-weight:700; border-radius:999px; padding:.85rem 1.25rem;
      box-shadow:0 8px 20px rgba(0,224,255,.12);
    }
    .btn-gradient:hover{ filter:brightness(1.1); }
    .chip{ display:inline-block; padding:.3rem .65rem; border-radius:999px; border:1px solid rgba(255,255,255,.15); color:var(--muted); font-size:.85rem; }


    .card-clean{
      background: var(--glass);
      border:1px solid rgba(255,255,255,.08);
      border-radius: 18px;
      backdrop-filter: blur(6px) saturate(120%);
      box-shadow: 0 10px 30px rgba(0,0,0,.35);
      transition: transform .25s ease, box-shadow .25s ease;
    }
    .card-clean:hover{ transform: translateY(-6px); box-shadow:0 18px 40px rgba(0,0,0,.5); }
    .price{ font-size: clamp(2rem, 4vw, 3rem); font-weight:800; line-height:1; }

    .hero {
      position: relative; min-height: 80vh; display:flex; align-items:center; overflow:visible !important;
      background: transparent; /* particles are full-screen black */
      z-index: 2;
    }
    /* keep tsParticles unclickable and behind everything */
    #tsparticles,
    .tsparticles-canvas-el {
      pointer-events: none !important;
      position: fixed !important;
      inset: 0 !important;
      z-index: -1 !important;
    }
    .hero__content{ position: relative; z-index: 2; margin-top: -20vh; overflow: visible !important;}

    .check{ display:flex; gap:.6rem; align-items:flex-start; }
    .check i{
      width:1.4rem; height:1.4rem; flex:0 0 1.4rem; border-radius:50%;
      background: linear-gradient(45deg,var(--brand3),var(--brand2));
      display:inline-grid; place-items:center; font-size:.85rem; color:#000; font-weight:900;
    }

    /* Mini gallery strip */
    .strip{
      display:grid; gap:1rem;     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));  padding-bottom:.25rem;
    }
    .strip figure{ margin:0; border-radius:14px; overflow:hidden; border:1px solid rgba(255,255,255,.08); }
    .strip img{ width:100%; height:auto; object-fit:cover; display:block; }

    /* Lightbox */
    .lightbox{ position: fixed; inset:0; background: rgba(0,0,0,.9); display:none; align-items:center; justify-content:center; z-index: 9999; padding:2rem; }
    .lightbox.open{ display:flex; }
    .lightbox img{ max-width: min(1200px, 90vw); max-height: 85vh; border-radius:14px; }
    .lightbox .close{ position:absolute; top:1rem; right:1rem; font-size:2rem; color:#fff; cursor:pointer; }
    .lightbox .prev, .lightbox .next{
      position:absolute; top:50%; transform:translateY(-50%); font-size:2rem; color:#fff; cursor:pointer;
      background: linear-gradient(45deg,var(--brand1),var(--brand3)); border-radius:999px; width:44px; height:44px; display:grid; place-items:center; opacity:.85;
    }
    .lightbox .prev{ left:1rem; } .lightbox .next{ right:1rem; }

    /* Sticky CTA */
    .sticky-cta{
      position: sticky; bottom: 0; z-index: 50;
      background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.7) 30%, #000 100%);
      padding: 1rem 0;
    }

    /* Room sprays section */
.spray-visual{
  position: relative;
  min-height: 360px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.spray-visual::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(60% 60% at 50% 30%, rgba(0,224,255,.14), transparent 60%),
    radial-gradient(70% 70% at 20% 80%, rgba(244,205,255,.10), transparent 60%);
  pointer-events:none;
}

.spray-img{
  position: relative;
  width: 100%;
  max-height: 520px;
  object-fit: contain;
  filter: drop-shadow(0 18px 40px rgba(0,0,0,.6));
}

.spray-placeholder{
  border-style: dashed !important;
  background: rgba(255,255,255,0.03);
}

.spray-code{
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.10);
  padding: .15rem .45rem;
  border-radius: .5rem;
  color: var(--muted);
}