:root{
    --pink:#e6027f;
    --blue:#159fe0;
    --bg:#141014;
    --bg-soft:#1b161b;
    --card-bg:#221c22;
    --text-muted:#b9adb3;
    --gold:#cba15a;
  }
  :root:not([data-theme="light"]){ color-scheme: dark; }

  *{box-sizing:border-box;}
  html,body{height:100%;}
  body{
    background:
      radial-gradient(circle at 12% 8%, rgba(230,2,127,.35), transparent 42%),
      radial-gradient(circle at 88% 12%, rgba(21,159,224,.35), transparent 45%),
      radial-gradient(circle at 15% 85%, rgba(21,159,224,.22), transparent 40%),
      radial-gradient(circle at 90% 90%, rgba(230,2,127,.22), transparent 42%),
      linear-gradient(160deg, #1a0f1a 0%, #101018 55%, #0d151c 100%);
    background-attachment:fixed;
    color:#f2eef1;
    font-family:'Poppins', sans-serif;
    font-weight:300;
    padding-top:env(safe-area-inset-top,0px);
    padding-bottom:env(safe-area-inset-bottom,0px);
  }
  h1,h2,.font-serif{ font-family:'Playfair Display', serif; }

  a{ text-decoration:none; }

  /* NAVBAR */
  .navbar-wedpic{
    background:linear-gradient(90deg, rgba(43,10,32,0.85), rgba(15,15,15,0.85) 50%, rgba(10,30,42,0.85));
    backdrop-filter: blur(8px);
    border-bottom:1px solid rgba(230,2,127,0.2);
    top:env(safe-area-inset-top,0px);
  }
  .navbar-wedpic .brand-logo{
    height:42px;
    width:auto;
  }
  .navbar-wedpic .brand-text{
    font-family:'Playfair Display', serif;
    font-weight:700;
    font-size:1.15rem;
    letter-spacing:.5px;
    background: linear-gradient(90deg, var(--pink), var(--blue));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }
  .nav-link-wed{
    color:#e8dfe4 !important;
    font-size:.8rem;
    letter-spacing:2px;
    font-weight:500;
    text-transform:uppercase;
    padding:.5rem 1rem !important;
    position:relative;
  }
  .nav-link-wed:hover, .nav-link-wed.active{
    color:var(--pink) !important;
  }
  .nav-link-wed.active::after{
    content:"";
    position:absolute;
    left:1rem; right:1rem; bottom:2px;
    height:2px;
    background:linear-gradient(90deg,var(--pink),var(--blue));
    border-radius:2px;
  }

  /* HERO */
  .hero{
    padding:5.5rem 1rem 3.5rem;
    text-align:center;
    background:
      radial-gradient(circle at 20% 0%, rgba(230,2,127,.18), transparent 40%),
      radial-gradient(circle at 80% 10%, rgba(21,159,224,.18), transparent 45%);
  }
  .eyebrow{
    font-size:.75rem;
    letter-spacing:4px;
    text-transform:uppercase;
    color:var(--gold);
    font-weight:500;
    margin-bottom:.75rem;
  }
  .hero h1{
    font-size:3rem;
    font-weight:700;
    margin-bottom:.75rem;
  }
  .hero p.lead{
    color:var(--text-muted);
    font-weight:300;
    font-size:1.05rem;
    max-width:520px;
    margin:0 auto 1.5rem;
  }
  .hero .divider{
    width:60px;
    height:2px;
    background:linear-gradient(90deg,var(--pink),var(--blue));
    margin:0 auto 2rem;
    border-radius:2px;
  }

  /* SEARCH */
  .search-wrap{
    max-width:480px;
    margin:0 auto;
  }
  .search-wrap input{
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.15);
    color:#fff;
    border-radius:50px;
    padding:.85rem 1.5rem;
    font-size:.95rem;
  }
  .search-wrap input::placeholder{ color:#8a808a; }
  .search-wrap input:focus{
    background:rgba(255,255,255,0.06);
    border-color:var(--pink);
    box-shadow:0 0 0 .2rem rgba(230,2,127,.15);
    color:#fff;
  }

  /* GALLERY SECTION */
  .gallery-section{
    padding:2rem 1rem 5rem;
  }

  .client-card{
    position:relative;
    border-radius:14px;
    overflow:hidden;
    aspect-ratio: 3/4;
    display:block;
    isolation:isolate;
    border:1px solid rgba(255,255,255,0.06);
    transition: transform .35s ease, box-shadow .35s ease;
  }
  .client-card::before{
    content:"";
    position:absolute; inset:0;
    background: linear-gradient(140deg, var(--c1,#3a2130), var(--c2,#1a2a38));
    z-index:-2;
  }
  .client-card::after{
    content:"";
    position:absolute; inset:0;
    background: linear-gradient(to top, rgba(0,0,0,.85) 10%, rgba(0,0,0,.15) 55%, rgba(0,0,0,.35) 100%);
    z-index:-1;
  }
  .client-card:hover{
    transform: translateY(-6px);
    box-shadow: 0 18px 34px rgba(0,0,0,.45);
  }
  .card-count{
    position:absolute;
    top:.75rem; right:.75rem;
    background:rgba(0,0,0,.55);
    border:1px solid rgba(255,255,255,.15);
    color:#fff;
    font-size:.72rem;
    padding:.25rem .55rem;
    border-radius:20px;
    display:flex;
    align-items:center;
    gap:.3rem;
    z-index:2;
  }
  .card-info{
    position:absolute;
    left:0; right:0; bottom:0;
    padding:1.1rem 1.15rem;
    z-index:2;
  }
  .card-info h3{
    font-family:'Playfair Display', serif;
    font-size:1.25rem;
    font-weight:600;
    color:#fff;
    margin-bottom:.15rem;
  }
  .card-info span{
    font-size:.7rem;
    letter-spacing:2px;
    color:var(--gold);
    text-transform:uppercase;
    font-weight:500;
  }

  /* decorative "photo" texture per card using css only */
  .heart-mark{
    position:absolute;
    inset:0;
    display:flex; align-items:center; justify-content:center;
    z-index:-1;
    opacity:.10;
    font-size:6rem;
  }

  footer{
    border-top:1px solid rgba(255,255,255,0.08);
    padding:1.5rem 1rem;
    text-align:center;
    font-size:.8rem;
    color:var(--text-muted);
    background:linear-gradient(90deg, rgba(43,10,32,0.6), rgba(10,30,42,0.6));
  }
  footer .brand-link{
    color:var(--blue);
    font-weight:500;
  }

  @media (max-width:576px){
    .hero h1{ font-size:2.15rem; }
    .hero{ padding:3.5rem 1rem 2.5rem; }
  }

  .client-card{ background:#000; }
  .client-card .card-photo{
    position:absolute; inset:0;
    width:100%; height:100%;
    object-fit:cover;
    z-index:-2;
    transition: transform .5s ease;
  }
  .client-card:hover .card-photo{ transform:scale(1.06); }