/* ==========================================================
   The Bee Invites — Premium Glassmorphism UI
   ========================================================== */

:root{
  /* Brand — never change */
  --gold: #D4A017;
  --gold-2: #F2C94C;
  --gold-soft: #E8C46A;
  --gold-grad: linear-gradient(135deg, #F2C94C 0%, #D4A017 60%, #A87B0C 100%);
  --cream: #F7EFE0;
  --radius: 22px;
  --radius-lg: 28px;
  --max-w: 1240px;
  --easing: cubic-bezier(.22,.61,.36,1);

  /* Theme tokens (default = dark) */
  --bg-base: #0B0B0B;
  --bg-grad:
    radial-gradient(1200px 600px at 50% -10%, rgba(212,160,23,0.18), transparent 60%),
    radial-gradient(900px 600px at 90% 20%, rgba(212,160,23,0.08), transparent 60%),
    linear-gradient(180deg, #08080A 0%, #0B0B0B 50%, #0A0A0C 100%);
  --text-1: #FFFFFF;
  --text-2: #C9C9CE;
  --text-3: #8A8A92;
  --surface-1: rgba(255,255,255,0.04);
  --surface-2: rgba(255,255,255,0.07);
  --border-1: rgba(255,255,255,0.08);
  --border-2: rgba(255,255,255,0.16);
  --shadow-1: 0 10px 30px rgba(0,0,0,0.35);
  --shadow-2: 0 30px 80px rgba(0,0,0,0.55);
  --nav-bg: rgba(255,255,255,0.04);
  --nav-bg-scroll: rgba(11, 11, 11, 0.486);
  --menu-bg: rgba(11,11,11,0.85);
  --floating-bg: rgba(20,20,22,0.65);
  --chip-dark: rgba(0,0,0,0.55);
  --modal-shell: linear-gradient(180deg, rgba(22,22,26,0.92), rgba(14,14,18,0.95));
  --modal-backdrop: rgba(4,4,6, 0.75);
  --select-option: #131316;
  --footer-overlay: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.6) 100%);
  --orb-color: rgba(212,160,23,.18);

  /* Backward-compat aliases (existing rules use these names) */
  --black: var(--bg-base);
  --ink: var(--bg-base);
  --white: var(--text-1);
  --gray-1: var(--text-2);
  --gray-2: var(--text-3);
  --gray-3: var(--text-3);
  --surface: var(--surface-1);
  --border: var(--border-1);
  --border-strong: var(--border-2);
}

/* Light-theme targeted tweaks */
[data-theme="light"] .btn-glass{ background: rgba(255,255,255,.55); color: var(--text-1);}
[data-theme="light"] .btn-glass:hover{ background: rgba(255,255,255,.8);}
[data-theme="light"] .btn-outline{ color: var(--text-1); background: rgba(255,255,255,.5);}
[data-theme="light"] .tag-new{ background: #1A1410; color: #FFE08A;}
[data-theme="light"] .feature-icon{ background: rgba(212,160,23,.16); border-color: rgba(212,160,23,.32);}
[data-theme="light"] .filters{ background: rgba(255,255,255,0.55);}
[data-theme="light"] .sort-select select{ background: rgba(255,255,255,0.7);}
[data-theme="light"] .pm-features li::before{ color: #8B6B0A;}
[data-theme="light"] .pi-check{ background: rgba(212,160,23,.16); border-color: rgba(212,160,23,.4); color: #8B6B0A;}
[data-theme="light"] .gold-text, [data-theme="light"] .price-now, [data-theme="light"] .pm-now,
[data-theme="light"] .meta-item strong, [data-theme="light"] .pi-foot-price strong,
[data-theme="light"] .how-num, [data-theme="light"] .trust-num{
  background: linear-gradient(135deg, #C28A0E 0%, #8B6B0A 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
[data-theme="light"] .gold-text{ background: linear-gradient(135deg, #C28A0E 0%, #8B6B0A 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
[data-theme="light"] .price-card.featured{
  background:
    linear-gradient(180deg, rgba(242,201,76,0.18), rgba(212,160,23,0.06)),
    linear-gradient(180deg, rgba(255,255,255,0.7), rgba(255,255,255,0.55));
}
[data-theme="light"] .ambient-bg .grain{ opacity:.025;}
[data-theme="light"] .scroll-cue span{ background: #C28A0E;}
[data-theme="light"] .eyebrow-dot{ box-shadow: 0 0 8px rgba(212,160,23,.5);}

[data-theme="light"]{
  --bg-base: #FAF6EE;
  --bg-grad:
    radial-gradient(1200px 600px at 50% -10%, rgba(212,160,23,0.16), transparent 60%),
    radial-gradient(900px 600px at 90% 20%, rgba(212,160,23,0.08), transparent 60%),
    linear-gradient(180deg, #FFFBF3 0%, #F8F1E3 50%, #F4EBD7 100%);
  --text-1: #1A1410;
  --text-2: #4A443C;
  --text-3: #7A746A;
  --surface-1: rgba(255,255,255,0.6);
  --surface-2: rgba(255,255,255,0.85);
  --border-1: rgba(40,30,20,0.10);
  --border-2: rgba(40,30,20,0.18);
  --shadow-1: 0 10px 30px rgba(80,60,30,0.08);
  --shadow-2: 0 30px 60px rgba(80,60,30,0.14);
  --nav-bg: rgba(255,255,255,0.55);
  --nav-bg-scroll: rgba(255, 251, 243, 0.404);
  --menu-bg: rgba(255,251,243,0.96);
  --floating-bg: rgba(255,255,255,0.92);
  --chip-dark: rgba(255,255,255,0.92);
  --modal-shell: linear-gradient(180deg, rgba(255,253,247,0.98), rgba(248,241,227,0.98));
  --modal-backdrop: rgba(40,30,20,0.35);
  --select-option: #FFFFFF;
  --footer-overlay: linear-gradient(180deg, rgba(255,251,243,0) 0%, rgba(244,235,215,.7) 100%);
  --orb-color: rgba(212,160,23,.10);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background-color: var(--bg-base);
  background-image: var(--bg-grad);
  color: var(--text-1);
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  min-height: 100vh;
  transition: background-color .5s var(--easing), color .5s var(--easing);
}

a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
button{font:inherit; cursor:pointer; border:none; background:none; color:inherit}
ul{list-style:none}

.container{
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 24px;
}

/* ====== AMBIENT BACKGROUND ====== */
.ambient-bg{
  position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden;
}
.orb{
  position:absolute; border-radius:50%; filter: blur(80px); opacity:.55;
  mix-blend-mode: screen;
  animation: float 18s ease-in-out infinite;
}
.orb-1{ width:520px; height:520px; left:-100px; top:-120px;
  background: radial-gradient(circle, rgba(242,201,76,.45), rgba(212,160,23,0) 60%);}
.orb-2{ width:600px; height:600px; right:-160px; top:30vh;
  background: radial-gradient(circle, rgba(180,90,30,.35), rgba(212,160,23,0) 60%);
  animation-delay:-6s;}
.orb-3{ width:520px; height:520px; left:30vw; bottom:-200px;
  background: radial-gradient(circle, rgba(255,210,120,.25), rgba(0,0,0,0) 60%);
  animation-delay:-12s;}
@keyframes float{
  0%,100%{transform: translate(0,0) scale(1)}
  50%{transform: translate(40px,-30px) scale(1.06)}
}
.grain{
  position:absolute; inset:0; opacity:.05; pointer-events:none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ====== GLASS BASE ====== */
.glass{
  background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.025));
  border: 1px solid var(--border);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  box-shadow: var(--shadow-1), inset 0 1px 0 rgba(255,255,255,0.06);
  border-radius: var(--radius);
}

/* ====== TYPOGRAPHY ====== */
.serif{font-family:'Cormorant Garamond', 'Playfair Display', serif; font-weight:500;}
.italic{font-style:italic}
.gold-text{
  background: var(--gold-grad);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.heart{ color:#E94B4B; }

h1,h2,h3,h4{ font-family:'Playfair Display', serif; font-weight:600; letter-spacing:-.02em; line-height:1.1;}
h1{ font-size: clamp(2.4rem, 5.8vw, 5.2rem);}
h2{ font-size: clamp(2rem, 3.6vw, 3.4rem);}
h3{ font-size: clamp(1.4rem, 2vw, 1.8rem);}
h4{ font-size: 1.18rem; font-weight:600;}

p{ color: var(--gray-1); }

.kicker{
  font-size: .78rem; letter-spacing:.32em; text-transform:uppercase;
  color: var(--gold-soft); margin-bottom: 14px; font-weight: 500;
}
.section-head{ text-align:center; max-width: 760px; margin: 0 auto 56px;}
.section-title{ margin-bottom: 14px; }
.section-sub{ color: var(--gray-1); font-size: 1.05rem;}

/* ====== BUTTONS ====== */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding: 13px 22px; font-size: .95rem; font-weight: 600;
  border-radius: 100px; transition: all .35s var(--easing);
  letter-spacing:.01em; white-space:nowrap;
  border: 1px solid transparent;
}
.btn-lg{ padding: 16px 28px; font-size:1rem;}
.btn-block{ display:flex; justify-content:center; width:100%;}
.btn-gold{
  color: #290402;
  background: var(--gold-grad);
  box-shadow: 0 10px 30px -10px rgba(242,201,76,.55), inset 0 1px 0 rgba(255,255,255,.4);
}
.btn-gold:hover{ transform: translateY(-2px); box-shadow: 0 20px 40px -12px rgba(242,201,76,.65), inset 0 1px 0 rgba(255,255,255,.5);}
.btn-glass{
  color: var(--white);
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border-strong);
  backdrop-filter: blur(18px);
}
.btn-glass:hover{ background: rgba(255,255,255,0.1); transform: translateY(-2px);}
.btn-outline{
  border:1px solid var(--border-strong);
  color: var(--white);
  background: rgba(255,255,255,0.03);
}
.btn-outline:hover{ border-color: var(--gold); color: var(--gold-2); transform:translateY(-2px);}

/* ====== NAVBAR ====== */
.navbar{
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  transition: all .35s var(--easing);
}
.navbar.scrolled .nav-inner{
  background: var(--nav-bg-scroll);
  border-color: var(--border-strong);
  padding: 12px 22px;
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  max-width: 1320px; margin: 14px auto; padding: 16px 26px;
  border-radius: 100px;
  background: var(--nav-bg);
  border: 1px solid var(--border);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  box-shadow: var(--shadow-1), inset 0 1px 0 rgba(255,255,255,.05);
  transition: all .35s var(--easing);
}
.logo{ display:flex; align-items:center; gap:10px;}
.logo-mark{ display:grid; place-items:center;}
.logo-text{ display:flex; flex-direction:column; line-height:1; }
.logo-text strong{ font-family:'Playfair Display', serif; font-weight:700; font-size:1.05rem; letter-spacing:.01em;}
.logo-text em{ font-style:normal; font-size:.7rem; letter-spacing:.32em; color: var(--gold-soft); text-transform:uppercase;}
.logo-lg .logo-text strong{font-size:1.4rem}
.logo-lg .logo-text em{font-size:.8rem}

.nav-links{ display:flex; gap:8px; align-items:center;}
.nav-links a{
  padding: 9px 16px; border-radius: 100px; font-size: .92rem; color: var(--gray-1);
  transition: all .3s var(--easing);
}
.nav-links a:hover{ color: var(--white); background: rgba(255,255,255,0.06);}
.nav-cta{ padding: 10px 20px; font-size:.88rem;}

.nav-actions{ display:flex; align-items:center; gap: 10px;}
.theme-toggle{
  width: 38px; height: 38px; border-radius: 50%;
  display:grid; place-items:center;
  background: var(--surface-1);
  border: 1px solid var(--border);
  color: var(--text-1);
  transition: all .35s var(--easing);
  position: relative; overflow: hidden;
}
.theme-toggle:hover{ background: var(--surface-2); transform: rotate(15deg); border-color: var(--border-strong);}
.theme-toggle .t-sun, .theme-toggle .t-moon{ position:absolute; transition: opacity .35s var(--easing), transform .45s var(--easing);}
[data-theme="dark"] .theme-toggle .t-sun, html:not([data-theme="light"]) .theme-toggle .t-sun{ opacity:0; transform: rotate(90deg) scale(.5);}
[data-theme="dark"] .theme-toggle .t-moon, html:not([data-theme="light"]) .theme-toggle .t-moon{ opacity:1; transform: rotate(0) scale(1); color: var(--gold-2);}
[data-theme="light"] .theme-toggle .t-sun{ opacity:1; transform: rotate(0) scale(1); color: #C28A0E;}
[data-theme="light"] .theme-toggle .t-moon{ opacity:0; transform: rotate(-90deg) scale(.5);}

.mm-theme{
  display:flex; align-items:center; justify-content:space-between;
  width: 100%; padding: 12px 16px; border-radius:14px;
  background: var(--surface-1); border: 1px solid var(--border);
  color: var(--text-2);
  font-weight: 500;
  font-size: .9rem;
}
.mm-theme-pill{
  position:relative;
  display:grid; place-items:center;
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(212,160,23,.15); border: 1px solid rgba(212,160,23,.3);
  color: var(--gold-2);
}
.mm-theme-pill .t-sun, .mm-theme-pill .t-moon{ position:absolute; transition: opacity .35s var(--easing);}
html:not([data-theme="light"]) .mm-theme-pill .t-sun{ opacity:0;}
html:not([data-theme="light"]) .mm-theme-pill .t-moon{ opacity:1;}
[data-theme="light"] .mm-theme-pill .t-sun{ opacity:1; color: #C28A0E;}
[data-theme="light"] .mm-theme-pill .t-moon{ opacity:0;}

.menu-btn{ display:none; flex-direction:column; gap:5px; padding:8px;}
.menu-btn span{ width:24px; height:2px; background: var(--text-1); border-radius:2px; transition: all .3s var(--easing);}

.mobile-menu{
  display:none;
  position:absolute; top:80px; left:16px; right:16px;
  flex-direction:column; gap:6px;
  padding: 20px;
  background: var(--menu-bg);
  backdrop-filter: blur(24px);
  border: 1px solid var(--border-strong);
  border-radius: 24px;
}
.mobile-menu a{ padding: 12px 16px; border-radius:14px; color: var(--gray-1); font-weight: 500;}
.mobile-menu a:hover{ background: rgba(255,255,255,0.05); color: var(--white);}
/* Gold CTA inside the mobile menu needs the dark button text, not the gray link color */
.mobile-menu a.btn-gold,
.mobile-menu a.btn-gold:hover{ color: #1A1300; font-weight: 700; justify-content: center;}
.mobile-menu.open{ display:flex; animation: dropIn .35s var(--easing);}
@keyframes dropIn{ from{opacity:0; transform: translateY(-12px)} to{opacity:1; transform:translateY(0)}}

/* ====== HERO ====== */
.hero{
  position: relative;
  padding: 160px 0 120px;
  min-height: 100vh;
  display:flex; align-items:center;
}
.hero-grid{
  width:100%; max-width: var(--max-w); margin: 0 auto; padding: 0 24px;
  display:grid; grid-template-columns: 1.05fr 1fr; gap: 60px; align-items:center;
}
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  padding: 8px 14px; border-radius:100px;
  background: rgba(255,255,255,0.04); border:1px solid var(--border);
  font-size: .82rem; color: var(--gray-1); letter-spacing:.06em;
  margin-bottom: 28px;
}
.eyebrow-dot{ width:6px; height:6px; border-radius:50%; background: var(--gold-2); box-shadow:0 0 10px var(--gold-2);}

.hero-title{ margin-bottom: 24px; }
.hero-sub{ font-size: 1.12rem; color: var(--gray-1); max-width: 540px; margin-bottom: 36px;}
.hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom: 44px;}

.hero-meta{ display:flex; align-items:center; gap:24px; flex-wrap:wrap;}
.meta-item{ display:flex; flex-direction:column; gap:2px;}
.meta-item strong{ font-size:1.4rem; font-family:'Playfair Display', serif; color: var(--gold-2);}
.meta-item .stars{ color: var(--gold-2); font-size:.92rem; letter-spacing:.18em;}
.meta-item span{ color: var(--gray-2); font-size: .85rem;}
.meta-divider{ width:1px; height:42px; background: var(--border-strong);}

/* Hero visual: phones */
.hero-visual{
  position: relative;
  height: 620px;
  display:flex; justify-content:center; align-items:center;
  perspective: 1400px;
}
.phone{
  position: absolute;
  transition: transform .6s var(--easing);
  animation: phoneFloat 7s ease-in-out infinite;
}
.phone-bg{
  width: 260px; height: 540px;
  transform: translate(-90px, 30px) rotate(-8deg);
  opacity:.65;
  animation-delay:-2s;
}
.phone-front{
  width: 300px; height: 600px;
  transform: translate(60px, 0) rotate(6deg);
  z-index: 3;
  filter: drop-shadow(0 40px 80px rgba(0,0,0,.6));
}
@keyframes phoneFloat{
  0%,100%{ translate: 0 0;}
  50%{ translate: 0 -16px;}
}

.phone-frame{
  position: relative; width:100%; height:100%;
  border-radius: 46px;
  background: linear-gradient(160deg, #1f1f23, #0c0c0f);
  border: 1px solid rgba(255,255,255,.1);
  padding: 12px;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.05), 0 30px 60px rgba(0,0,0,.5);
}
.phone-notch{
  position: absolute; top: 14px; left:50%; transform: translateX(-50%);
  width: 90px; height: 22px; border-radius: 14px;
  background: #000;
  z-index: 4;
}
.phone-screen{
  position: relative; width:100%; height:100%;
  border-radius: 36px;
  overflow: hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding: 40px 24px;
}
.invite-gold{
  background:
    radial-gradient(circle at 50% 0%, rgba(255,220,140,.4), rgba(0,0,0,0) 50%),
    radial-gradient(circle at 50% 100%, rgba(180,90,30,.4), rgba(0,0,0,0) 55%),
    linear-gradient(180deg, #2a1a05, #0c0703);
  color: #FFE8B0;
}
.invite-rose{
  background:
    radial-gradient(circle at 50% 0%, rgba(255,200,210,.35), rgba(0,0,0,0) 50%),
    radial-gradient(circle at 50% 100%, rgba(160,40,80,.5), rgba(0,0,0,0) 55%),
    linear-gradient(180deg, #3a1224, #0d0408);
  color: #FBD9DD;
}
.invite-glow{
  position:absolute; inset:-20%;
  background: radial-gradient(circle, rgba(255,210,130,.18), transparent 55%);
  animation: pulse 4s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{opacity:.6} 50%{opacity:1}}
.invite-meta{ font-size:.7rem; letter-spacing:.4em; text-transform:uppercase; opacity:.7; margin-bottom:18px; z-index:1;}
.invite-name{ font-family:'Cormorant Garamond', serif; font-weight:500; font-size:2.6rem; line-height:1.05; z-index:1;}
.invite-name span{ font-size:1.2rem; font-style:italic; opacity:.85; display:block; margin: 4px 0;}
.invite-date{ font-size:.95rem; letter-spacing:.3em; margin-top: 20px; z-index:1;}
.invite-divider{ width: 60px; height:1px; background: currentColor; opacity:.35; margin: 18px auto; z-index:1;}
.invite-foot{ font-family:'Cormorant Garamond', serif; font-style:italic; font-size:1rem; opacity:.85; z-index:1;}

.floating-card{
  position:absolute;
  display:flex; align-items:center; gap:12px;
  padding: 12px 16px;
  background: var(--floating-bg);
  border: 1px solid var(--border-strong);
  border-radius: 18px;
  backdrop-filter: blur(20px);
  box-shadow: var(--shadow-2);
  z-index: 4;
  color: var(--text-1);
  animation: cardFloat 6s ease-in-out infinite;
}
.floating-card strong{ display:block; font-size:.82rem; font-weight:600; }
.floating-card span{ font-size:.74rem; color: var(--gray-2); display:block;}
.card-rsvp{ top: 14%; left: -10px;}
.card-rsvp .fc-dot{ width:8px; height:8px; border-radius:50%; background:#4CD964; box-shadow:0 0 12px #4CD964;}
.card-music{ bottom: 12%; right: -16px; animation-delay:-3s;}
@keyframes cardFloat{
  0%,100%{ transform: translateY(0);}
  50%{ transform: translateY(-10px);}
}

.scroll-cue{
  position:absolute; bottom: 30px; left: 50%; transform: translateX(-50%);
  width: 26px; height: 42px; border-radius: 14px;
  border: 1px solid var(--border-strong);
  display:flex; justify-content:center; padding-top:8px;
}
.scroll-cue span{
  width:3px; height:8px; border-radius:2px; background: var(--gold-2);
  animation: scrollCue 1.6s ease-in-out infinite;
}
@keyframes scrollCue{ 0%,100%{transform:translateY(0); opacity:1} 50%{transform:translateY(10px); opacity:.3}}

/* ====== TRUST ====== */
.trust{ padding: 60px 0; }
.trust-grid{
  display:grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
.trust-card{ padding: 28px 22px; text-align:center; transition: transform .4s var(--easing);}
.trust-card:hover{ transform: translateY(-6px); border-color: var(--gold);}
.trust-num{
  font-family:'Playfair Display', serif; font-size: 2.4rem;
  background: var(--gold-grad); -webkit-background-clip:text; color: transparent;
  font-weight: 700; margin-bottom: 6px;
}
.trust-card p{ color: var(--gray-1); font-size:.95rem; margin:0;}

/* ====== TEMPLATES ====== */
.templates{ padding: 120px 0 80px; }

.filter-bar{
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  flex-wrap:wrap;
  margin: 0 auto 50px;
}
.filters{
  display:flex; gap:8px; flex-wrap:wrap;
  padding: 8px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: 100px;
  backdrop-filter: blur(20px);
}
.sort-wrap{ display:flex; align-items:center; gap: 10px;}
.sort-label{ font-size:.78rem; letter-spacing:.24em; text-transform:uppercase; color: var(--gray-2);}
.sort-select{
  position: relative;
  display:flex; align-items:center;
}
.sort-select select{
  appearance: none; -webkit-appearance: none;
  padding: 11px 38px 11px 18px;
  font: inherit; font-size:.88rem; font-weight: 500;
  border-radius: 100px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  color: var(--white);
  cursor: pointer;
  backdrop-filter: blur(20px);
  transition: border-color .3s var(--easing);
}
.sort-select select:hover{ border-color: var(--border-strong);}
.sort-select select:focus{ outline: none; border-color: var(--gold);}
.sort-select select option{ background: var(--select-option); color: var(--text-1);}
.sort-select svg{ position:absolute; right: 16px; pointer-events:none; color: var(--gray-2);}
.filter-btn{
  padding: 10px 22px; border-radius: 100px;
  font-size:.9rem; font-weight:500; color: var(--gray-1);
  transition: all .3s var(--easing);
}
.filter-btn:hover{ color: var(--white);}
.filter-btn.active{
  color: #1A1300;
  background: var(--gold-grad);
  box-shadow: 0 8px 24px -8px rgba(242,201,76,.5);
}

.template-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 30px;
}
.template-card{
  position:relative;
  display: flex; flex-direction: column;
  padding: 18px;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border: 1px solid var(--border);
  backdrop-filter: blur(20px);
  transition: all .5s var(--easing);
  overflow: hidden;
  animation: cardIn .55s var(--easing) both;
}
.template-card .tc-actions{ margin-top: auto;}

.tc-tag{
  position:absolute; top: 12px; left: 12px; z-index: 3;
  padding: 5px 12px; border-radius: 100px;
  font-size:.66rem; font-weight: 700; letter-spacing:.18em; text-transform: uppercase;
  backdrop-filter: blur(18px);
}
.tag-new{
  background: rgba(255,255,255,0.92); color: #1A1300;
  box-shadow: 0 8px 20px rgba(0,0,0,.3);
}
.tag-featured{
  background: var(--gold-grad); color: #1A1300;
  box-shadow: 0 8px 24px -4px rgba(242,201,76,.5);
}

.tc-price{
  position:absolute; bottom: 10px; right: 10px; z-index: 3;
  display:flex; align-items: baseline; gap: 8px;
  padding: 7px 12px; border-radius: 10px;
  background: rgba(0,0,0,0.62); backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,.1);
  color: #FFE8B0;
}
.price-strike{ font-size:.74rem; color: rgba(255,255,255,.55); text-decoration: line-through;}
.price-now{ font-size: .98rem; font-weight: 700; color: var(--gold-2); font-family: 'Playfair Display', serif;}

.tc-meta-row{ display:flex; align-items:center; gap:8px; margin-top: 6px; flex-wrap:wrap;}
.tc-rating{ font-size:.78rem; color: var(--gold-2); font-weight: 600; letter-spacing: .04em;}
.tc-off{
  padding: 3px 9px; border-radius: 8px;
  background: rgba(46,204,113,.12); color: #4CD964;
  border: 1px solid rgba(46,204,113,.3);
  font-size:.7rem; font-weight: 700; letter-spacing:.06em;
}
.tc-desc{
  margin: 10px 0 16px;
  font-size: .9rem; color: var(--text-2);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.template-card::before{
  content:""; position:absolute; inset:-1px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, transparent 40%, rgba(212,160,23,.4), transparent 70%);
  opacity:0; pointer-events:none; transition: opacity .4s var(--easing); z-index:0;
}
.template-card:hover{ transform: translateY(-10px); border-color: rgba(212,160,23,.4); box-shadow: 0 30px 60px rgba(0,0,0,.5);}
.template-card:hover::before{ opacity:1;}
.template-card.hide{ display:none;}
@keyframes cardIn{ from{opacity:0; transform: translateY(20px);} to{opacity:1; transform:translateY(0);}}

.tc-banner{
  position: relative; aspect-ratio: 4/3; width: 100%;
  border-radius: 18px;
  margin-bottom: 18px;
  overflow: hidden;
  z-index: 1;
  isolation: isolate;
  transition: transform .6s var(--easing);
}
.template-card:hover .tc-banner{ transform: translateY(-2px);}
.template-card:hover .tcb-img{ transform: scale(1.04);}
.tcb-fallback{
  position: absolute; inset: 0;
  display:flex; flex-direction: column; align-items:center; justify-content:center;
  padding: 22px 18px; text-align:center;
  z-index: 0;
}
.tcb-fallback::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(circle at 50% 0%, currentColor, transparent 60%),
    radial-gradient(circle at 50% 100%, currentColor, transparent 60%);
  opacity: .12; pointer-events: none;
}
.tcb-meta{
  font-size:.62rem; letter-spacing:.34em; text-transform:uppercase;
  opacity:.7; margin-bottom: 10px; z-index: 1;
}
.tcb-name{
  font-family:'Cormorant Garamond', serif; font-weight: 500;
  font-size: 1.7rem; line-height: 1.05; z-index: 1;
}
.tcb-name i{ display:block; font-style:italic; font-size: .9rem; opacity:.85; margin: 4px 0;}
.tcb-date{
  font-size:.7rem; letter-spacing: .26em; margin-top: 12px; z-index: 1;
}
.tcb-img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 1;
  transition: transform .8s var(--easing);
}

.tc-info{ display:flex; flex-direction: column; gap: 0; margin-bottom: 0; position:relative; z-index:1;}
.tc-title{ font-family:'Playfair Display', serif; font-weight:600; font-size: 1.25rem; line-height: 1.2;}
.tc-id{ font-size:.7rem; color: var(--gray-2); letter-spacing:.12em; margin-top:4px;}
.tc-badge{
  padding: 4px 11px; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  background: rgba(212,160,23,.12); color: var(--gold-2);
  border:1px solid rgba(212,160,23,.3); border-radius: 100px; font-weight:600; white-space:nowrap;
}
.tc-actions{ display:flex; gap:10px; position:relative; z-index:1;}
.tc-actions .btn{ flex:1; padding: 12px 14px; font-size:.85rem; justify-content:center;}

/* Card screen palettes */
.palette-rose{ background: linear-gradient(180deg, #3a1224, #0d0408); color: #FBD9DD;}
.palette-gold{ background: linear-gradient(180deg, #2a1a05, #0c0703); color: #FFE8B0;}
.palette-emerald{ background: linear-gradient(180deg, #062d23, #021510); color: #C8F0E0;}
.palette-royal{ background: linear-gradient(180deg, #0f1f3d, #04081a); color: #C8D8FF;}
.palette-blush{ background: linear-gradient(180deg, #3a1a1a, #1a0a0a); color: #FAD9C8;}
.palette-noir{ background: linear-gradient(180deg, #1a1a1a, #050505); color: #E0CCA0;}
.palette-cream{ background: linear-gradient(180deg, #d6c39a, #a78a4e); color: #2b1f04;}
.palette-mint{ background: linear-gradient(180deg, #1e3a36, #06151a); color: #BFE9DD;}
.palette-plum{ background: linear-gradient(180deg, #2b0d3a, #0a0214); color: #E0C8FB;}
.palette-coral{ background: linear-gradient(180deg, #4a1a1a, #1a0808); color: #FFCBB0;}
.palette-sand{ background: linear-gradient(180deg, #4a3a20, #1d1408); color: #FFE5B8;}
.palette-ocean{ background: linear-gradient(180deg, #06324a, #02101a); color: #BFE3FF;}

.tc-screen .invite-deco{
  position:absolute; inset:0; pointer-events:none; opacity:.18;
  background:
    radial-gradient(circle at 50% 0%, currentColor, transparent 60%),
    radial-gradient(circle at 50% 100%, currentColor, transparent 60%);
}

/* ====== SHOWCASE ====== */
.showcase{ padding: 120px 0; overflow:hidden; }
.showcase-stage{ position: relative; height: 520px; }
.stage-glow{
  position:absolute; inset: 10% 0;
  background: radial-gradient(ellipse, rgba(212,160,23,.18), transparent 60%);
  pointer-events:none;
}
.showcase-track{
  display:flex; gap: 30px; align-items:center; height:100%;
  animation: marquee 38s linear infinite;
  width: max-content;
}
.showcase-track:hover{ animation-play-state: paused;}
.show-phone{
  position: relative;
  width: 230px; height: 470px; flex-shrink:0;
  border-radius: 40px;
  background: linear-gradient(160deg, #1f1f23, #0c0c0f);
  border: 1px solid rgba(255,255,255,.08);
  padding: 9px;
  box-shadow: 0 40px 80px rgba(0,0,0,.55), inset 0 0 0 2px rgba(255,255,255,.04);
}
.show-notch{
  position: absolute; top: 16px; left:50%; transform: translateX(-50%);
  width: 70px; height: 16px; border-radius: 11px;
  background: #000; z-index: 3;
}
.show-screen{
  position: relative;
  width: 100%; height: 100%;
  border-radius: 32px;
  overflow: hidden;
  background: #0a0a0c;
}
.show-screen .show-fallback{
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Cormorant Garamond', serif; font-style: italic;
  font-size: 1.4rem;
  color: rgba(255,255,255,.55);
  z-index: 0;
}
.show-screen .show-fallback::before{
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 50% 0%, currentColor, transparent 60%),
    radial-gradient(circle at 50% 100%, currentColor, transparent 60%);
  opacity: .15; pointer-events: none;
}
.show-img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  z-index: 1;
}
@keyframes marquee{ from{transform:translateX(0)} to{transform:translateX(-50%)}}

/* ====== FEATURES ====== */
.features{ padding: 120px 0; }
.features-grid{
  display:grid; grid-template-columns: repeat(5, 1fr); gap: 16px;
}
.feature{
  padding: 28px 22px;
  transition: all .4s var(--easing);
}
.feature:hover{ transform: translateY(-6px); border-color: rgba(212,160,23,.35);}
.feature-icon{
  font-size: 1.8rem; margin-bottom: 14px;
  width:54px; height:54px; border-radius:16px;
  display:grid; place-items:center;
  background: rgba(212,160,23,.1); border:1px solid rgba(212,160,23,.2);
}
.feature h4{ margin-bottom:6px; font-size:1.05rem;}
.feature p{ font-size:.88rem; color: var(--gray-2); margin:0;}

/* ====== HOW IT WORKS ====== */
.how{ padding: 60px 0 120px;}
.how-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 24px;}
.how-card{ padding: 40px 32px; position:relative; overflow:hidden;}
.how-card:hover{ border-color: rgba(212,160,23,.35);}
.how-num{
  font-family:'Playfair Display', serif; font-size: 3.4rem; font-weight: 700;
  background: var(--gold-grad); -webkit-background-clip:text; color: transparent;
  margin-bottom: 12px;
}
.how-card h4{ margin-bottom:8px;}
.how-card p{ font-size:.95rem; margin:0;}

/* ====== TESTIMONIALS ====== */
.testimonials{ padding: 100px 0; overflow:hidden;}
.testimonial-marquee{ position:relative; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);}
.testimonial-track{
  display:flex; gap: 24px; align-items:stretch;
  animation: marquee 50s linear infinite; width: max-content;
}
.testimonial-track:hover{ animation-play-state: paused;}
.t-card{
  width: 360px; flex-shrink:0;
  padding: 28px;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border: 1px solid var(--border);
  backdrop-filter: blur(20px);
}
.t-stars{ color: var(--gold-2); margin-bottom: 14px; letter-spacing:.2em;}
.t-quote{ font-size:1rem; color: var(--gray-1); margin-bottom: 22px; line-height: 1.6;}
.t-meta{ display:flex; align-items:center; gap: 14px;}
.t-avatar{
  width: 46px; height:46px; border-radius:50%;
  background: var(--gold-grad);
  display:grid; place-items:center;
  font-family:'Playfair Display', serif; font-weight:700; color:#1A1300; font-size:1.1rem;
  flex-shrink:0;
}
.t-info strong{ display:block; font-weight:600; font-size:.95rem;}
.t-info span{ font-size:.78rem; color: var(--gray-2);}

/* ====== PRICING (per-template) ====== */
.pricing{ padding: 120px 0;}
.price-included{
  padding: 44px; border-radius: var(--radius-lg);
}
.pi-head{
  display:flex; align-items:center; justify-content:space-between;
  gap: 24px; flex-wrap:wrap;
  padding-bottom: 30px; margin-bottom: 30px;
  border-bottom: 1px solid var(--border);
}
.pi-kicker{ font-size:.74rem; letter-spacing:.3em; text-transform:uppercase; color: var(--gold-soft); margin-bottom: 10px;}
.pi-title{ font-family:'Playfair Display', serif; font-size: clamp(1.4rem, 2.4vw, 1.9rem); font-weight: 600; line-height: 1.2;}
.pi-grid{
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 28px;
  margin-bottom: 30px;
}
.pi-item{
  display:flex; align-items:center; gap: 12px;
  font-size:.95rem; color: var(--gray-1);
  padding: 10px 0;
}
.pi-check{
  width: 22px; height: 22px; border-radius: 50%;
  display:grid; place-items:center;
  background: rgba(212,160,23,.16); border:1px solid rgba(212,160,23,.4);
  color: var(--gold-2); font-size: .78rem; font-weight: 700;
  flex-shrink: 0;
}
.pi-foot{
  display:flex; align-items:center; gap: 24px; flex-wrap:wrap;
  padding-top: 30px; border-top: 1px solid var(--border);
}
.pi-foot-kicker{ font-size:.74rem; letter-spacing:.28em; text-transform:uppercase; color: var(--gray-2); margin-bottom: 6px;}
.pi-foot-price{ font-family:'Playfair Display', serif; font-size: 1.05rem;}
.pi-foot-price .strike{ text-decoration: line-through; color: var(--gray-2); margin-right: 8px; font-size: 1rem;}
.pi-foot-price strong{ font-size: 1.9rem; color: var(--gold-2); font-weight: 700;}
.pi-foot-divider{ width:1px; height: 50px; background: var(--border-strong); }
.pi-foot-text{ flex:1; min-width: 240px;}
.pi-foot-text strong{ display:block; font-family:'Playfair Display', serif; font-size: 1.1rem; margin-bottom: 4px;}
.pi-foot-text p{ font-size:.9rem; color: var(--gray-2);}

/* ====== PREVIEW MODAL ====== */
body.modal-open{ overflow: hidden;}
.preview-modal{
  position: fixed; inset: 0; z-index: 100;
  display:flex; align-items:center; justify-content:center;
  padding: 20px;
  visibility: hidden; opacity: 0;
  transition: opacity .35s var(--easing), visibility .35s var(--easing);
}
.preview-modal.open{ visibility: visible; opacity: 1;}
.pm-backdrop{
  position: absolute; inset:0;
  background: var(--modal-backdrop);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
}
.pm-shell{
  position: relative;
  display:grid;
  grid-template-columns: minmax(280px, 380px) 1fr;
  gap: 0;
  width: 100%; max-width: 1080px;
  max-height: 92vh;
  border-radius: 28px;
  background: var(--modal-shell);
  border: 1px solid var(--border-strong);
  box-shadow: 0 60px 120px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.06);
  overflow: hidden;
  transform: scale(.96) translateY(20px);
  transition: transform .45s var(--easing);
  color: var(--text-1);
}
.preview-modal.open .pm-shell{ transform: scale(1) translateY(0);}

.pm-close{
  position: absolute; top: 16px; right: 16px; z-index: 10;
  width: 38px; height: 38px; border-radius: 50%;
  display:grid; place-items:center;
  background: var(--floating-bg); backdrop-filter: blur(20px);
  border: 1px solid var(--border-strong);
  color: var(--text-1);
  transition: all .3s var(--easing);
}
.pm-close:hover{ background: rgba(255,255,255,.12); transform: rotate(90deg);}

/* Left side: phone */
.pm-left{
  display:flex; flex-direction: column; align-items:center; justify-content:center;
  padding: 40px 28px 28px;
  background:
    radial-gradient(circle at 50% 0%, rgba(212,160,23,.18), transparent 55%),
    radial-gradient(circle at 50% 100%, rgba(212,160,23,.08), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0));
  border-right: 1px solid var(--border);
}
.pm-phone{
  position: relative;
  width: 290px; max-width: 100%; aspect-ratio: 9/19.5;
  border-radius: 42px;
  background: linear-gradient(160deg, #1f1f23, #0c0c0f);
  border: 1px solid rgba(255,255,255,.1);
  padding: 8px;
  box-shadow: 0 40px 80px rgba(0,0,0,.6), inset 0 0 0 2px rgba(255,255,255,.04);
}
.pm-notch{
  position:absolute; top: 14px; left:50%; transform: translateX(-50%);
  width: 84px; height: 18px; border-radius: 12px;
  background: #000; z-index: 3;
}
.pm-frame{
  position: relative;
  width:100%; height:100%;
  border-radius: 34px;
  overflow: hidden;
  background: #0a0a0c;
}
/* iframe renders at a real mobile width (390px) and is scaled down to fit
   the phone screen, so layout, fonts and spacing render correctly. */
.pm-frame iframe{
  position: absolute;
  top: 0; left: 0;
  width: 390px;
  height: 142.45%;        /* 100 / 0.7026 — compensates for the scale */
  transform: scale(0.7026); /* 274 screen-px / 390 logical-px */
  transform-origin: top left;
  border: 0;
  background: #0a0a0c;
}
.pm-hint{
  margin-top: 18px;
  display: inline-flex; align-items:center; gap: 8px;
  font-size: .78rem; color: var(--gray-2);
  letter-spacing: .02em;
}
.pm-hint-dot{
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold-2);
  box-shadow: 0 0 10px var(--gold-2);
  animation: pulseDot 1.6s ease-in-out infinite;
}
@keyframes pulseDot{ 0%,100%{opacity:1} 50%{opacity:.3}}

/* Right side: info */
.pm-right{
  padding: 44px 40px 36px;
  overflow-y: auto;
}
.pm-right::-webkit-scrollbar{ width: 8px;}
.pm-right::-webkit-scrollbar-track{ background: transparent;}
.pm-right::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.1); border-radius: 8px;}

.pm-tag{
  display:inline-block;
  padding: 5px 12px; border-radius:100px;
  font-size:.66rem; font-weight: 700; letter-spacing:.2em; text-transform: uppercase;
  margin-bottom: 16px;
}
.pm-cat{ font-size:.78rem; letter-spacing:.24em; text-transform:uppercase; color: var(--gold-soft); margin-bottom: 10px;}
.pm-title{
  font-family:'Playfair Display', serif; font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 700; line-height: 1.1; margin-bottom: 14px;
}
.pm-rating{ display:flex; align-items:center; gap: 10px; margin-bottom: 18px;}
.pm-stars{ color: var(--gold-2); letter-spacing: .14em; font-size: 1rem;}
.pm-rate-num{ font-weight: 700; color: var(--white);}
.pm-rate-rev{ color: var(--gray-2); font-size: .85rem;}

.pm-desc{ color: var(--gray-1); font-size: .96rem; line-height: 1.7; margin-bottom: 22px;}

.pm-features{
  display:flex; flex-direction:column; gap: 8px;
  margin-bottom: 26px;
}
.pm-features li{
  display:flex; align-items:flex-start; gap: 12px;
  font-size: .92rem; color: var(--gray-1);
  list-style: none;
}
.pm-features li::before{
  content: "✓";
  width: 20px; height: 20px; border-radius: 50%;
  display: inline-grid; place-items:center;
  background: rgba(212,160,23,.16); border:1px solid rgba(212,160,23,.4);
  color: var(--gold-2); font-size: .7rem; font-weight: 700;
  flex-shrink: 0; margin-top: 1px;
}

.pm-price-row{
  padding: 20px;
  border-radius: 16px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  margin-bottom: 18px;
}
.pm-price{ display:flex; align-items:baseline; gap: 12px; flex-wrap:wrap; margin-bottom: 6px;}
.pm-strike{ font-size: 1.05rem; color: var(--gray-2); text-decoration: line-through;}
.pm-now{
  font-family:'Playfair Display', serif; font-size: 2.2rem; font-weight: 700;
  color: var(--gold-2);
}
.pm-off{
  padding: 4px 10px; border-radius: 8px;
  background: rgba(46,204,113,.14); color: #4CD964;
  border: 1px solid rgba(46,204,113,.3);
  font-size:.72rem; font-weight: 700; letter-spacing:.06em;
}
.pm-price-note{ font-size:.82rem; color: var(--gray-2);}

.pm-actions{ display:flex; flex-direction: column; gap: 12px;}

.empty-state{
  grid-column: 1 / -1;
  text-align: center; padding: 60px 24px;
  color: var(--gray-2);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  background: rgba(255,255,255,.02);
}

/* ====== FAQ ====== */
.faq{ padding: 100px 0;}
.faq-wrap{ max-width: 880px;}
.faq-list{ display:flex; flex-direction:column; gap: 14px;}
.faq-item{
  padding: 0; overflow: hidden; transition: all .3s var(--easing);
}
.faq-item summary{
  list-style: none; cursor: pointer;
  padding: 22px 26px;
  display:flex; justify-content:space-between; align-items:center; gap:20px;
  font-family:'Playfair Display', serif; font-size: 1.1rem; font-weight:500;
}
.faq-item summary::-webkit-details-marker{ display:none;}
.faq-icon{
  width: 30px; height:30px; border-radius:50%;
  display:grid; place-items:center;
  background: rgba(212,160,23,.12); color: var(--gold-2); font-size: 1.2rem;
  border: 1px solid rgba(212,160,23,.25);
  transition: all .3s var(--easing);
  flex-shrink:0;
}
.faq-item[open] .faq-icon{ transform: rotate(45deg); background: var(--gold-grad); color:#1A1300; border-color: transparent;}
.faq-body{
  padding: 0 26px 24px; color: var(--gray-1); font-size:.95rem; line-height:1.7;
}
.faq-item[open]{ border-color: rgba(212,160,23,.3);}

/* ====== FOOTER ====== */
.footer{
  padding: 80px 0 30px;
  background: var(--footer-overlay);
  border-top: 1px solid var(--border);
  margin-top: 60px;
}
.footer-grid{
  display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 50px;
  margin-bottom: 60px;
}
.footer-tag{ color: var(--gray-1); margin: 18px 0 24px; max-width: 320px;}
.footer-col h5{ font-size:.78rem; letter-spacing:.3em; text-transform:uppercase; color: var(--gold-soft); margin-bottom: 18px;}
.footer-col a{ display:block; padding: 6px 0; color: var(--gray-1); font-size:.92rem;}
.footer-col a:hover{ color: var(--gold-2);}
.socials{ display:flex; gap:10px; margin-bottom: 18px;}
.social-btn{
  width:38px; height:38px; border-radius:50%;
  display:grid !important; place-items:center;
  background: var(--surface-1); border:1px solid var(--border);
  color: var(--text-1);
  transition: all .3s var(--easing); padding:0 !important;
}
.social-btn:hover{ background: rgba(212,160,23,.15); border-color: var(--gold); color: var(--gold-2); transform: translateY(-3px);}
.footer-small{ color: var(--gray-2); font-size:.85rem; line-height:1.7;}

.footer-bottom{
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  padding-top: 28px; border-top: 1px solid var(--border);
  font-size:.85rem; color: var(--gray-2);
}

/* ====== FLOAT WA ====== */
.float-wa{
  position: fixed; bottom: 24px; right: 24px;
  width: 58px; height: 58px;
  display:grid; place-items:center; border-radius:50%;
  background: #25D366; color: white;
  z-index: 30;
  box-shadow: 0 18px 40px rgba(37,211,102,.45);
  transition: all .35s var(--easing);
  animation: cardFloat 4s ease-in-out infinite;
}
.float-wa:hover{ transform: scale(1.1);}
.float-wa::before{
  content:""; position:absolute; inset:-6px; border-radius:50%;
  border: 2px solid rgba(37,211,102,.4);
  animation: ripple 2.4s ease-out infinite;
}
@keyframes ripple{
  0%{ transform: scale(.9); opacity:1;}
  100%{ transform: scale(1.6); opacity:0;}
}

/* ====== RESPONSIVE ====== */
@media (max-width: 1080px){
  .nav-links{ display:none;}
  .menu-btn{ display:flex;}
  .nav-cta{ display:none;}
  /* Keep the theme toggle visible in the header on mobile; only the CTA is hidden.
     margin-left:auto pushes it to the right so it sits next to the hamburger. */
  .nav-actions{ display:flex; margin-left:auto; margin-right: 12px;}
  .hero-grid{ grid-template-columns: 1fr; gap: 30px;}
  .hero-visual{ height: 540px;}
  .trust-grid{ grid-template-columns: repeat(2, 1fr);}
  .template-grid{ grid-template-columns: repeat(2, 1fr);}
  .features-grid{ grid-template-columns: repeat(3, 1fr);}
  .how-grid{ grid-template-columns: 1fr;}
  .pi-grid{ grid-template-columns: 1fr;}
  .pm-shell{ grid-template-columns: 1fr; max-height: 92vh; overflow-x: hidden; overflow-y: auto;}
  .pm-left{ padding: 28px 20px 14px; border-right: 0; border-bottom: 1px solid var(--border);}
  .pm-phone{ width: min(300px, calc(100vw - 56px)); }
  .pm-right{ padding: 26px 24px 30px;}
  .pm-frame iframe{
    /* phone 300px → frame 284px → scale 284/390 = 0.7282 → height 100/0.7282 = 137.31% */
    transform: scale(0.7282);
    height: 137.31%;
  }
  .footer-grid{ grid-template-columns: 1fr 1fr; gap: 36px;}
}
@media (max-width: 720px){
  .hero{ padding: 130px 0 80px;}
  h1{ font-size: 2.6rem;}
  .hero-visual{ height: 460px; transform: scale(.85);}
  .template-grid{ grid-template-columns: repeat(2, 1fr); gap: 12px;}
  .template-card{ padding: 10px; border-radius: 22px;}
  .tc-banner{ border-radius: 14px; margin-bottom: 12px;}
  .tcb-fallback{ padding: 14px 10px;}
  .tcb-meta{ font-size:.5rem; letter-spacing:.24em; margin-bottom: 6px;}
  .tcb-name{ font-size: 1.1rem;}
  .tcb-name i{ font-size:.7rem;}
  .tcb-date{ font-size:.58rem; letter-spacing:.18em; margin-top: 8px;}
  .tc-tag{ top: 8px; left: 8px; padding: 3px 8px; font-size:.54rem; letter-spacing:.14em;}
  .tc-price{ bottom: 8px; right: 8px; padding: 5px 9px; border-radius: 9px; gap: 5px;}
  .tc-price .price-strike{ font-size:.62rem;}
  .tc-price .price-now{ font-size:.82rem;}
  .tc-title{ font-size: 1rem;}
  .tc-id{ font-size:.6rem;}
  .tc-meta-row{ gap: 5px; margin-top: 4px;}
  .tc-badge{ padding: 3px 8px; font-size:.56rem; letter-spacing:.1em;}
  .tc-rating{ font-size:.66rem;}
  .tc-off{ padding: 2px 6px; font-size:.58rem;}
  .tc-desc{ font-size:.78rem; margin: 8px 0 12px; -webkit-line-clamp: 3;}
  .tc-actions{ flex-direction: column; gap: 6px;}
  .tc-actions .btn{ padding: 9px 10px; font-size:.78rem; gap: 6px;}
  .features-grid{ grid-template-columns: repeat(2, 1fr);}
  .trust-grid{ grid-template-columns: repeat(2, 1fr); gap:12px;}
  .trust-card{ padding: 20px 14px;}
  .footer-grid{ grid-template-columns: 1fr; gap:40px;}
  .nav-inner{ padding: 12px 18px; margin: 10px;}
  .filter-bar{ flex-direction: column; align-items: stretch; gap:14px;}
  .filters{ overflow-x: auto; flex-wrap: nowrap; max-width: 100%; padding:6px; justify-content:flex-start; border-radius: 80px; scrollbar-width:none;}
  .filters::-webkit-scrollbar{ display:none;}
  .filter-btn{ padding: 9px 18px; font-size: .85rem; white-space:nowrap;}
  .sort-wrap{ justify-content: space-between;}
  .price-included{ padding: 28px 22px;}
  .pi-foot{ flex-direction:column; align-items: stretch; gap: 18px;}
  .pi-foot-divider{ display: none;}
  .pm-shell{ max-height: 95vh; border-radius: 22px; overflow-x: hidden; overflow-y: auto;}
  .pm-left{ padding: 24px 16px 10px;}
  .pm-phone{ width: min(280px, calc(100vw - 48px)); }
  .pm-right{ padding: 22px 20px 26px;}
  .pm-title{ font-size: 1.6rem;}
  .pm-now{ font-size: 1.8rem;}
  .pm-frame iframe{
    /* phone 280px → frame 264px → scale 264/390 = 0.6769 → height 100/0.6769 = 147.74% */
    transform: scale(0.6769);
    height: 147.74%;
  }
  .section-head{ margin-bottom: 40px;}
  .section-title{ font-size: 2rem;}
  .templates, .features, .pricing, .how, .testimonials, .faq, .showcase{ padding: 70px 0;}
  /* ---- Showcase marquee: scale phones down so they're never cut off ---- */
  .showcase-stage{ height: 360px;}
  .showcase-track{ gap: 18px;}
  .show-phone{ width: 158px; height: 322px; border-radius: 30px; padding: 6px;}
  .show-notch{ width: 50px; height: 12px; top: 11px;}
  .show-screen{ border-radius: 24px;}
  .show-screen .show-fallback{ font-size: 1.05rem;}
  .float-wa{ width: 52px; height:52px; bottom: 16px; right:16px;}
  .floating-card{ scale: .85;}
  .card-rsvp{ left: -20px;}
  .card-music{ right: -20px;}
}

/* Very small phones — shrink showcase phones a touch more */
@media (max-width: 420px){
  .showcase-stage{ height: 320px;}
  .show-phone{ width: 140px; height: 286px;}
}

/* ==========================================================
   MULTI-PAGE ADDITIONS
   Active nav link, sub-page heroes (webtemplates / vidtemplates),
   homepage "browse more" CTA, video cards + video modal,
   and the Images "coming soon" page.
   ========================================================== */

/* Active nav link (current page) */
.nav-links a.active{ color: var(--gold-2); background: rgba(212,160,23,.12);}
.mobile-menu a.active{ color: var(--gold-2); background: rgba(212,160,23,.10);}

/* Homepage: "Browse More Templates" CTA below the teaser grid */
.browse-more{ display:flex; justify-content:center; margin-top: 50px;}

/* Sub-page hero (webtemplates.html / vidtemplates.html) */
.page-hero{ padding: 150px 0 20px; text-align:center;}
.page-hero .container{ max-width: 820px;}
.page-title{
  font-family:'Playfair Display', serif; font-weight:700;
  font-size: clamp(2.2rem, 5vw, 3.4rem); line-height: 1.08; margin-bottom: 16px;
}
.page-sub{ color: var(--gray-1); font-size: 1.05rem; max-width: 640px; margin: 0 auto; line-height: 1.7;}
.page-templates{ padding: 40px 0 90px;}

/* Back-to-home link */
.back-link{
  display:inline-flex; align-items:center; gap:8px;
  margin-bottom: 22px;
  padding: 9px 18px; border-radius: 100px;
  font-size: .86rem; font-weight: 600; letter-spacing:.02em;
  color: var(--text-2);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  transition: all .3s var(--easing);
}
.back-link:hover{ color: var(--gold-2); border-color: var(--border-strong); transform: translateX(-3px);}

/* Video card: play badge over the banner */
.tc-play{
  position:absolute; top:50%; left:50%; transform: translate(-50%, -50%);
  z-index: 3;
  width: 56px; height: 56px; border-radius: 50%;
  display:grid; place-items:center;
  color:#1A1300;
  background: var(--gold-grad);
  box-shadow: 0 12px 30px -8px rgba(242,201,76,.6), inset 0 1px 0 rgba(255,255,255,.5);
  transition: transform .35s var(--easing), box-shadow .35s var(--easing);
  pointer-events: none;
}
.tc-play svg{ margin-left: 3px;}
.video-card:hover .tc-play{ transform: translate(-50%, -50%) scale(1.12); box-shadow: 0 18px 40px -8px rgba(242,201,76,.75);}

/* Video preview modal: <video> fills the phone screen */
.pm-frame video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit: cover;
  background:#0a0a0c;
  border: 0;
}
/* Video preview — plain embed, no phone frame */
.pm-video-wrap{
  position: relative;
  width: 260px;
  max-width: 100%;
  aspect-ratio: 9/16;
  border-radius: 16px;
  overflow: hidden;
  background: #0a0a0c;
  flex-shrink: 0;
}
.pm-video-wrap iframe,
.pm-video-wrap video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* Images page — "coming soon" */
.coming-soon{
  min-height: 86vh;
  display:flex; align-items:center;
  padding: 140px 0 90px;
}
.cs-wrap{ display:flex; flex-direction:column; align-items:center; text-align:center;}
.cs-card{
  position:relative;
  max-width: 640px; width:100%;
  padding: 56px 44px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
}
.cs-icon{ font-size: 3.4rem; line-height:1; margin-bottom: 18px;}
.cs-badge{
  display:inline-block; margin-bottom: 18px;
  padding: 6px 16px; border-radius: 100px;
  font-size:.72rem; font-weight: 700; letter-spacing:.22em; text-transform: uppercase;
  color: var(--gold-2);
  background: rgba(212,160,23,.12); border: 1px solid rgba(212,160,23,.35);
}
.cs-title{
  font-family:'Playfair Display', serif; font-weight: 700;
  font-size: clamp(2rem, 5vw, 3rem); line-height: 1.1; margin-bottom: 18px;
}
.cs-sub{ color: var(--gray-1); font-size: 1.06rem; line-height: 1.75; max-width: 520px; margin: 0 auto 14px;}
.cs-note{ color: var(--gray-2); font-size: .92rem; margin-bottom: 30px;}
.cs-actions{ display:flex; gap: 14px; flex-wrap:wrap; justify-content:center;}

@media (max-width: 720px){
  .page-hero{ padding: 124px 0 10px;}
  .page-templates{ padding: 28px 0 64px;}
  .back-link{ margin-bottom: 16px; padding: 8px 14px; font-size:.8rem;}
  .browse-more{ margin-top: 34px;}
  .browse-more .btn{ width:100%; justify-content:center;}
  .coming-soon{ padding: 120px 0 70px; min-height: 70vh;}
  .cs-card{ padding: 40px 22px;}
  .cs-actions{ flex-direction: column; width:100%;}
  .cs-actions .btn{ width:100%; justify-content:center;}
}