/* ============================================================
   Invitation Studio — showcase landing page
   Warm wedding palette · Light & romantic · Premium
   ============================================================ */
:root{
  --ink:        #1a1520;
  --ink-soft:   #3d3248;
  --muted:      #7a6d84;
  --c1:         #9b6d3e;   /* warm antique gold  */
  --c2:         #7b4f7a;   /* deep rose-violet   */
  --c3:         #4a7e6e;   /* sage-jade           */
  --c3-lt:      #a0c4b8;
  --line:       rgba(155,109,62,.18);
  --serif:     'Cormorant', Georgia, serif;
  --upright:   'Cormorant Upright', Georgia, serif;
  --display:   'Aboreto', serif;
  --sans:      'Yaldevi', system-ui, sans-serif;
  --grad-warm:  linear-gradient(135deg,#9b4f6e,#c9962f);
  --grad-jewel: linear-gradient(135deg,#4a7e6e,#7b4f7a);
  --grad-gold:  linear-gradient(120deg,#8c6d3f,#c9962f,#e8d08a,#c9962f,#8c6d3f);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--serif);
  color:var(--ink);
  line-height:1.55;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ── Warm cream-ivory background with soft blush and sage tints ── */
body::before{
  content:""; position:fixed; inset:0; z-index:-2;
  background:
    radial-gradient(60% 55% at 8% 10%,  rgba(201,150,47,.10), transparent 65%),
    radial-gradient(50% 50% at 92% 8%,  rgba(155,79,110,.09), transparent 65%),
    radial-gradient(65% 60% at 85% 92%, rgba(74,126,110,.09), transparent 65%),
    radial-gradient(50% 45% at 10% 88%, rgba(201,150,47,.08), transparent 65%),
    linear-gradient(160deg,#fdf8f0 0%,#faf3ee 40%,#f5f0f8 70%,#eef5f2 100%);
  background-size:200% 200%,200% 200%,200% 200%,200% 200%,100% 100%;
  animation:bgShift 30s ease-in-out infinite;
}
@keyframes bgShift{
  0%,100%{ background-position:0 0,100% 0,100% 100%,0% 100%,0 0; }
  50%{ background-position:30% 40%,70% 30%,60% 70%,40% 60%,0 0; }
}
/* Delicate pattern overlay */
body::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:
    radial-gradient(rgba(155,109,62,.05) 1px,transparent 1px),
    radial-gradient(rgba(123,79,122,.04) 1px,transparent 1px);
  background-size:28px 28px,44px 44px;
  background-position:0 0,14px 14px;
}

/* particles */
.petals{ position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden; }
.petal{ position:absolute; top:-8vh; animation:fall linear infinite; }
.petal.p-petal{ width:10px; height:10px; border-radius:60% 0 60% 0; }
.petal.p-spark{ border-radius:50%; box-shadow:0 0 6px currentColor; }
.petal.p-star{ line-height:1; }
@keyframes fall{
  0%{ transform:translateY(-10vh) rotate(0); opacity:0; }
  10%{ opacity:.4; }
  100%{ transform:translateY(114vh) rotate(420deg); opacity:.05; }
}

main{ position:relative; z-index:1; }

/* ── Nav ── */
.nav{
  position:sticky; top:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:.9rem clamp(1.2rem,5vw,3rem);
  background:rgba(253,248,240,.82);
  backdrop-filter:blur(20px) saturate(1.5);
  border-bottom:1px solid rgba(155,109,62,.15);
}
.brand{ font-family:var(--display); font-size:1.2rem; letter-spacing:.04em; text-decoration:none; color:var(--ink); display:inline-flex; align-items:center; gap:.55rem; }
.brand img{ width:28px; height:28px; border-radius:7px; }
.brand span{ background:var(--grad-gold); background-size:200% auto; -webkit-background-clip:text; background-clip:text; color:transparent; animation:goldShimmer 6s linear infinite; }
@keyframes goldShimmer{ to{ background-position:200% center; } }
.nav-links{ display:flex; align-items:center; gap:clamp(.8rem,2.5vw,1.8rem); font-family:var(--sans); font-size:.82rem; letter-spacing:.08em; }
.nav-links a{ text-decoration:none; color:var(--muted); transition:color .3s; }
.nav-links a:hover{ color:var(--ink); }
.nav-cta{
  padding:.5rem 1.3rem; border-radius:30px;
  background:rgba(155,109,62,.1); color:var(--c1) !important;
  border:1px solid rgba(155,109,62,.3);
  transition:all .3s ease;
}
.nav-cta:hover{ background:rgba(155,109,62,.2); color:var(--ink) !important; }

/* ── Slim hero banner ── */
.hero-slim{
  text-align:center;
  padding:clamp(3rem,8vh,5.5rem) 1.5rem clamp(1.5rem,4vh,2.8rem);
  max-width:800px; margin-inline:auto;
}
.hero-eyebrow{
  font-family:var(--sans); text-transform:uppercase; letter-spacing:.46em;
  font-size:.7rem; color:var(--c1); margin-bottom:1.2rem; padding-left:.46em;
}
.hero-title{
  font-family:var(--upright); font-weight:600;
  font-size:clamp(2.4rem,7vw,4.4rem); line-height:1.04; letter-spacing:.02em;
  color:var(--ink);
}
.hero-title em{
  font-style:italic;
  background:var(--grad-warm); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-sub{
  font-size:clamp(1rem,2vw,1.2rem); color:var(--muted); font-style:italic;
  max-width:50ch; margin:1.2rem auto 2rem;
}
.hero-actions{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }
.hero-stats{
  display:flex; gap:clamp(2rem,6vw,4rem); justify-content:center;
  margin-top:2.4rem; padding-top:2rem;
  border-top:1px solid rgba(155,109,62,.14);
}
.hero-stats div{ display:flex; flex-direction:column; align-items:center; }
.hero-stats strong{
  font-family:var(--upright); font-weight:600; font-size:2rem;
  background:var(--grad-gold); background-size:200% auto;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:goldShimmer 6s linear infinite;
}
.hero-stats span{ font-family:var(--sans); text-transform:uppercase; letter-spacing:.22em; font-size:.62rem; color:var(--muted); margin-top:.2rem; }

/* ── Buttons ── */
.btn{
  display:inline-flex; align-items:center;
  font-family:var(--sans); text-transform:uppercase; letter-spacing:.2em; font-size:.74rem;
  text-decoration:none; padding:.9rem 2rem; border-radius:40px;
  border:1px solid rgba(155,109,62,.35); color:var(--c1);
  background:rgba(155,109,62,.07);
  transition:all .32s ease;
}
.btn:hover{ background:rgba(155,109,62,.15); border-color:var(--c1); color:var(--ink); transform:translateY(-2px); }
.btn-filled{
  color:#fff; background:linear-gradient(135deg,#9b4f6e,#c9962f);
  border-color:transparent; box-shadow:0 8px 24px rgba(155,79,110,.22);
}
.btn-filled:hover{ background:linear-gradient(135deg,#c9962f,#9b4f6e); transform:translateY(-3px); color:#fff; }

/* ── Section heads ── */
.sec-head{ text-align:center; max-width:580px; margin:0 auto clamp(2rem,5vh,3rem); }
.eyebrow{
  font-family:var(--sans); text-transform:uppercase; letter-spacing:.4em;
  font-size:.68rem; color:var(--c1); margin-bottom:.9rem; padding-left:.4em;
}
.sec-title{
  font-family:var(--upright); font-weight:600;
  font-size:clamp(1.8rem,4.5vw,2.8rem); letter-spacing:.02em;
  background:var(--grad-warm); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.sec-lead{ color:var(--muted); font-style:italic; font-size:1.08rem; margin-top:.9rem; }

/* ── Template Section & Filters ── */
.templates{ padding:0 clamp(1.2rem,5vw,3rem) clamp(4rem,8vh,6rem); max-width:1200px; margin-inline:auto; }
.filters{ display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; margin-bottom:2.6rem; }
.filter{
  font-family:var(--sans); font-size:.74rem; letter-spacing:.07em;
  padding:.45rem 1.1rem; border-radius:30px;
  border:1px solid rgba(155,109,62,.2);
  background:rgba(255,255,255,.6); color:var(--muted);
  cursor:pointer; transition:all .28s ease;
}
.filter:hover{ color:var(--ink); border-color:rgba(155,109,62,.45); background:rgba(255,255,255,.9); }
.filter.active{
  background:#fff; color:var(--c1);
  border-color:rgba(155,109,62,.5);
  box-shadow:0 4px 14px rgba(155,109,62,.15);
}

/* ── Card Grid ── */
.grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:1.4rem; }
.card{
  display:flex; flex-direction:column;
  border-radius:16px; overflow:hidden;
  text-decoration:none; color:inherit;
  background:#fff;
  border:1px solid rgba(155,109,62,.14);
  box-shadow:0 6px 24px rgba(26,21,32,.08);
  transition:transform .4s ease, box-shadow .4s ease, border-color .3s ease;
}
.card:hover{
  transform:translateY(-7px);
  box-shadow:0 22px 48px rgba(26,21,32,.14), 0 0 0 1px rgba(155,109,62,.22);
  border-color:rgba(155,109,62,.25);
}
.card.hidden{ display:none; }

/* Card preview with photo */
.card-preview{
  aspect-ratio:5/4; position:relative; overflow:hidden;
  color:#fff; display:flex; flex-direction:column;
  align-items:center; justify-content:flex-end;
  padding:1.4rem; gap:.3rem;
}
.card-preview::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(10,8,18,.85) 0%, rgba(10,8,18,.25) 55%, rgba(10,8,18,.05) 100%);
  z-index:1; transition:opacity .4s ease;
}
.card:hover .card-preview::before{ opacity:.72; }
.card-preview > *{ position:relative; z-index:2; }
.cp-motif{ font-size:2rem; margin-bottom:.2rem; }
.cp-names{ font-family:var(--upright); font-weight:600; font-size:1.55rem; text-shadow:0 2px 12px rgba(0,0,0,.5); }
.cp-sub{
  font-family:var(--sans); text-transform:uppercase; letter-spacing:.26em;
  font-size:.6rem; opacity:.8; text-shadow:0 1px 6px rgba(0,0,0,.4);
}

/* ── Theme backgrounds ── */
.theme-muslim{ background:linear-gradient(to top,rgba(10,25,20,.85),rgba(15,125,99,.22)),url('assets/photos/muslim-emerald.jpg') center/cover; }
.theme-muslim-royal{ background:linear-gradient(to top,rgba(10,16,44,.85),rgba(43,58,140,.22)),url('assets/photos/muslim-royal.jpg') center/cover; }
.theme-muslim-blush{ background:linear-gradient(to top,rgba(44,18,24,.85),rgba(180,120,110,.22)),url('assets/photos/muslim-blush.jpg') center/cover; }
.theme-arabian{ background:linear-gradient(to top,rgba(8,12,30,.88),rgba(26,42,94,.28)),url('assets/photos/muslim-arabian.jpg') center/cover; position:relative; }
.theme-arabian::after{ content:"✦ ✦ ✦"; position:absolute; top:.9rem; left:50%; transform:translateX(-50%); font-size:.72rem; letter-spacing:.8em; color:rgba(201,168,76,.85); z-index:3; pointer-events:none; text-shadow:0 1px 4px rgba(0,0,0,.4); }
.theme-marrakech{ background:linear-gradient(to top,rgba(36,12,8,.88),rgba(175,78,35,.22)),url('assets/photos/muslim-marrakech.jpg') center/cover; }
.theme-dark-luxury{ background:linear-gradient(to top,rgba(8,8,18,.9),rgba(44,44,62,.28)),url('assets/photos/muslim-dark-luxury.jpg') center/cover; }
.theme-mughal{ background:linear-gradient(to top,rgba(10,30,20,.88),rgba(27,94,66,.25)),url('assets/photos/muslim-mughal.jpg') center/cover; }
.theme-celestial{ background:linear-gradient(to top,rgba(5,5,24,.9),rgba(30,27,75,.28)),url('assets/photos/muslim-celestial.jpg') center/cover; position:relative; }
.theme-celestial::after{ content:"☽ ✦ ☾"; position:absolute; top:.9rem; left:50%; transform:translateX(-50%); font-size:.9rem; letter-spacing:.55em; color:rgba(200,180,255,.85); z-index:3; pointer-events:none; }
.theme-hindu{ background:linear-gradient(to top,rgba(40,16,8,.88),rgba(200,110,12,.25)),url('assets/photos/hindu-marigold.jpg') center/cover; }
.theme-hindu-royal{ background:linear-gradient(to top,rgba(32,8,12,.88),rgba(140,24,44,.25)),url('assets/photos/hindu-royal.jpg') center/cover; }
.theme-hindu-lotus{ background:linear-gradient(to top,rgba(8,28,24,.88),rgba(12,110,100,.25)),url('assets/photos/hindu-lotus.jpg') center/cover; }
.theme-hindu-mehendi{ background:linear-gradient(to top,rgba(36,16,8,.88),rgba(200,140,28,.28)),url('assets/photos/hindu-mehendi.jpg') center/cover; }
.theme-sikh{ background:linear-gradient(to top,rgba(10,22,50,.88),rgba(26,58,110,.25)),url('assets/photos/sikh.jpg') center/cover; }
.theme-jewish{ background:linear-gradient(to top,rgba(10,28,60,.88),rgba(26,75,140,.25)),url('assets/photos/jewish.jpg') center/cover; }
.theme-christian{ background:linear-gradient(to top,rgba(16,24,20,.88),rgba(80,110,90,.25)),url('assets/photos/christian-sage.jpg') center/cover; }
.theme-christian-navy{ background:linear-gradient(to top,rgba(10,18,38,.88),rgba(30,55,90,.25)),url('assets/photos/christian-navy.jpg') center/cover; }
.theme-christian-blush{ background:linear-gradient(to top,rgba(38,16,24,.88),rgba(180,100,120,.25)),url('assets/photos/christian-blush.jpg') center/cover; }
.theme-christian-boho{ background:linear-gradient(to top,rgba(28,36,26,.88),rgba(100,140,106,.25)),url('assets/photos/christian-boho.jpg') center/cover; }
.theme-buddhist{ background:linear-gradient(to top,rgba(38,20,12,.88),rgba(155,78,46,.25)),url('assets/photos/buddhist.jpg') center/cover; }
.theme-engagement{ background:linear-gradient(to top,rgba(40,18,18,.88),rgba(175,100,86,.25)),url('assets/photos/engagement.jpg') center/cover; }
.theme-anniversary{ background:linear-gradient(to top,rgba(32,8,12,.88),rgba(90,20,35,.25)),url('assets/photos/anniversary.jpg') center/cover; }
.theme-baby{ background:linear-gradient(to top,rgba(18,36,52,.88),rgba(90,140,200,.22)),url('assets/photos/baby.jpg') center/cover; }
.theme-graduation{ background:linear-gradient(to top,rgba(10,18,38,.88),rgba(28,52,85,.25)),url('assets/photos/graduation.jpg') center/cover; }
.theme-neon{ background:linear-gradient(to top,rgba(6,0,14,.9),rgba(100,48,210,.28)),url('assets/photos/birthday-neon.jpg') center/cover; }
.theme-birthday{ background:linear-gradient(to top,rgba(30,12,40,.88),rgba(200,75,140,.25)),url('assets/photos/birthday.jpg') center/cover; }
.theme-save{ background:linear-gradient(to top,rgba(14,18,28,.88),rgba(50,62,85,.25)),url('assets/photos/save.jpg') center/cover; }
.theme-soon{
  background:linear-gradient(135deg,#f5efe8,#ede8f5);
  border:1px dashed rgba(155,109,62,.3) !important;
}
.theme-soon .cp-names, .theme-soon .cp-motif, .theme-soon .cp-sub{
  color:var(--ink) !important; text-shadow:none;
}

/* Card badge */
.card-new .card-preview{ box-shadow:0 0 0 1px rgba(201,168,76,.2) inset; }
.card-badge{
  display:inline-block; font-family:var(--sans);
  font-size:.58rem; letter-spacing:.16em; text-transform:uppercase;
  padding:.18rem .55rem; border-radius:20px; margin-left:.4rem;
  background:linear-gradient(135deg,rgba(155,79,110,.85),rgba(201,150,47,.85));
  color:#fff; vertical-align:middle;
}
.card-soon{ opacity:.8; }

/* Card body */
.card-body{
  padding:1.3rem 1.4rem 1.6rem;
  display:flex; flex-direction:column; gap:.4rem; flex:1;
  background:#fff;
}
.card-tag{
  font-family:var(--sans); text-transform:uppercase;
  letter-spacing:.22em; font-size:.62rem; color:var(--c1);
}
.card-body h3{ font-family:var(--upright); font-weight:600; font-size:1.4rem; color:var(--ink); }
.card-body p{ color:var(--muted); font-size:.95rem; flex:1; line-height:1.5; }
.card-link{
  font-family:var(--sans); text-transform:uppercase; letter-spacing:.14em;
  font-size:.7rem; color:var(--c1); text-decoration:none; margin-top:.3rem;
  display:inline-flex; align-items:center; gap:.3rem; transition:gap .2s;
}
.card:hover .card-link{ gap:.6rem; }

/* ── How It Works ── */
.how{ padding:clamp(3rem,8vh,6rem) clamp(1.2rem,5vw,3rem); max-width:1000px; margin-inline:auto; }
.steps{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1.4rem; }
.step{
  text-align:center; padding:2rem 1.5rem;
  border-radius:14px;
  background:rgba(255,255,255,.75);
  border:1px solid rgba(155,109,62,.14);
  box-shadow:0 4px 20px rgba(26,21,32,.06);
  transition:transform .3s ease, box-shadow .3s ease;
}
.step:hover{ transform:translateY(-4px); box-shadow:0 12px 32px rgba(26,21,32,.10); }
.step-num{
  display:grid; place-items:center;
  width:48px; height:48px; margin:0 auto 1rem;
  border-radius:50%; font-family:var(--display); font-size:1.2rem; color:#fff;
  background:linear-gradient(135deg,#c9962f,#e8d08a);
  box-shadow:0 4px 14px rgba(201,150,47,.3);
}
.step h3{ font-family:var(--upright); font-weight:600; font-size:1.3rem; margin-bottom:.5rem; color:var(--ink); }
.step p{ color:var(--muted); font-size:.95rem; }

/* ── CTA ── */
.cta{ padding:clamp(2rem,6vh,4rem) clamp(1.2rem,5vw,3rem) clamp(4rem,8vh,6rem); max-width:700px; margin-inline:auto; }
.cta-box{
  text-align:center; padding:clamp(2.4rem,6vw,4rem) 2rem;
  border-radius:20px;
  background:rgba(255,255,255,.85);
  border:1px solid rgba(155,109,62,.2);
  box-shadow:0 20px 60px rgba(26,21,32,.10);
  position:relative; overflow:hidden;
}
.cta-box::before{
  content:""; position:absolute; inset:0; border-radius:20px; padding:1.5px;
  background:linear-gradient(135deg,rgba(201,150,47,.5),rgba(155,79,110,.35),rgba(74,126,110,.35));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none;
}
.cta-box h2{
  font-family:var(--upright); font-weight:600;
  font-size:clamp(1.8rem,5vw,2.5rem); margin-bottom:.6rem;
  background:var(--grad-gold); background-size:200% auto;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:goldShimmer 6s linear infinite;
}
.cta-box p{ color:var(--muted); font-style:italic; font-size:1.08rem; margin-bottom:1.8rem; }
.cta-phone{ margin-top:1rem; font-family:var(--sans); letter-spacing:.2em; font-size:.8rem; color:var(--c1) !important; font-style:normal !important; }

/* ── Footer ── */
.site-foot{
  text-align:center; padding:2.5rem 1.5rem 3.5rem;
  border-top:1px solid rgba(155,109,62,.12);
}
.site-foot .brand{ font-size:1.3rem; }
.site-foot p{ color:var(--muted); margin-top:.5rem; font-style:italic; font-size:.95rem; }
.site-foot .credit{
  font-family:var(--sans); font-style:normal;
  font-size:.76rem; letter-spacing:.1em; text-transform:uppercase;
  margin-top:1.4rem; color:var(--muted);
}
.fc-spark{
  background:var(--grad-gold); background-size:200% auto;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:goldShimmer 5s linear infinite;
}

.social-links{
  display:flex; flex-wrap:wrap; justify-content:center; gap:.7rem;
  margin:1.4rem 0 0;
}
.social-btn{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.45rem .85rem; border-radius:999px;
  border:1px solid rgba(155,109,62,.28);
  background:rgba(155,109,62,.08);
  color:var(--c1); text-decoration:none;
  font-family:var(--sans); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
  transition:background .25s, color .25s, transform .25s;
}
.social-btn svg{ width:15px; height:15px; display:block; }
.social-btn:hover{ background:rgba(155,109,62,.18); color:var(--ink); transform:translateY(-1px); }

/* ── Reveal ── */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .85s cubic-bezier(.2,.7,.2,1),transform .85s cubic-bezier(.2,.7,.2,1); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s; } .reveal.d2{ transition-delay:.18s; } .reveal.d3{ transition-delay:.3s; } .reveal.d4{ transition-delay:.44s; }

@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .petal,body::before,body::after,.brand span,.hero-stats strong,.fc-spark,.cta-box h2{ animation:none; }
}
@media (max-width:560px){
  .nav-links a:not(.nav-cta){ display:none; }
  .hero-slim{ padding-top:2.5rem; }
}