:root{
      --brand1:#403543; --brand2:#f4cdff; --brand3:#00e0ff;
      --on-black:#f1f1f1; --muted:#dfe3e7; --card:#0f0f12;
      --glass: rgba(255,255,255,0.06);
    }
    body{ background:#000; color:var(--on-black); }


    .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,.1);
    }
    .btn-gradient:hover{ filter:brightness(1.1); }

    /* Section chrome */
    .section{ padding: min(8vw,5rem) 0; }
    .section-muted{ background: radial-gradient(80% 120% at 50% -10%, #0a0a0f 0%, #000 60%); }
    .text-secondary {
      font-weight: 600;
      color: var(--muted) !important;
    }
    /* Cards */
    .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; }
    .chip{ 
      display:inline-block; padding:.25rem .6rem; border-radius:999px; 
      border:1px solid rgba(255,255,255,.15); color:var(--muted); font-size:.85rem;
    }

    /* Checklist */
    .check{ display:flex; gap:.6rem; align-items:flex-start; font-size: medium;}
    .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;
    }

    /* Masonry gallery */
    .gallery{
      columns: 1 280px; column-gap: 1rem;
    }
    @media (min-width:576px){ .gallery{ columns: 2 280px; } }
    @media (min-width:992px){ .gallery{ columns: 3 300px; } }
    .gallery figure{ 
      break-inside: avoid; margin:0 0 1rem; border-radius:14px; overflow:hidden; 
      border:1px solid rgba(255,255,255,.08); background:#0a0a0f;
    }
    .gallery img{ width:100%; height:auto; display:block; filter: saturate(1.05); }
    .gallery figcaption{ padding:.5rem .75rem; font-size:.9rem; color:var(--muted); }

    /* 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:.8;
    }
    .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;
    }
    .divider{
      height:1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
      margin: 2rem 0;
    }
    .accordion-button {
      background: var(--on-black) !important;
    } 
        .accordion-button:active {
      background: #f4cdff; color: #000;
    }


    .service-photo-card img{
      width:100%;
      height:auto;
      display:block;
      border-radius:14px;
      object-fit:cover;
    }


    .hero-bg{
  position: relative;
  overflow: hidden;

  /* Dark overlay + image */
  background:
    linear-gradient(180deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.88) 100%),
    url("/images/gallery/3.jpg");

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  min-height: 400px;

}

/* Optional: subtle brand glow to match your theme */
.hero-bg::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(60% 60% at 50% 10%, rgba(0,224,255,.10), transparent 60%),
    radial-gradient(70% 70% at 15% 85%, rgba(244,205,255,.08), transparent 60%);
}
.hero-bg > .container{ position: relative; z-index: 1; }