:root{
  --burgundy:#641126;
  --burgundy-2:#2f0713;
  --gold:#d6aa4f;
  --gold-soft:#f8e8bd;
  --white:#ffffff;
  --ivory:#fffaf1;
  --ink:#241016;
  --muted:#80646a;
  --line:rgba(214,170,79,.38);
  --glass:rgba(255,255,255,.72);
  --shadow:0 30px 90px rgba(47,7,19,.22);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Inter',system-ui,sans-serif;
  color:var(--ink);
  background:#12070b;
  overflow-x:hidden;
}
.water-bg{
  position:fixed;
  inset:-4%;
  z-index:-3;
  background-image:linear-gradient(180deg,rgba(47,7,19,.38),rgba(255,255,255,.18),rgba(47,7,19,.48)),url('assets/church-bg.jpg');
  background-size:cover;
  background-position:center;
  filter:grayscale(1) contrast(1.04) brightness(.92);
  transform:scale(1.04);
}
.water-bg:before,
.water-bg:after{
  content:'';
  position:absolute;
  inset:-8%;
  background:
    radial-gradient(ellipse at 30% 20%,rgba(255,255,255,.18),transparent 28%),
    radial-gradient(ellipse at 70% 66%,rgba(214,170,79,.16),transparent 30%),
    repeating-radial-gradient(ellipse at center,rgba(255,255,255,.06) 0 2px,transparent 3px 13px);
  mix-blend-mode:soft-light;
  opacity:.55;
  animation:waterMove 14s ease-in-out infinite alternate;
}
.water-bg:after{
  filter:blur(10px);
  opacity:.38;
  animation-duration:22s;
  animation-direction:alternate-reverse;
}
.overlay-glow{
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background:
    radial-gradient(circle at 16% 18%,rgba(214,170,79,.18),transparent 32%),
    radial-gradient(circle at 84% 12%,rgba(100,17,38,.28),transparent 36%),
    linear-gradient(180deg,rgba(255,250,241,.68),rgba(255,250,241,.78) 48%,rgba(255,250,241,.9));
  backdrop-filter:blur(1.5px);
}
@keyframes waterMove{
  0%{transform:translate3d(-10px,-6px,0) scale(1.02) skewX(.2deg)}
  50%{transform:translate3d(8px,10px,0) scale(1.035) skewX(-.35deg)}
  100%{transform:translate3d(14px,-4px,0) scale(1.025) skewX(.25deg)}
}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:24px 6vw;gap:16px}
.brand{font-family:'Cormorant Garamond',serif;font-size:34px;font-weight:700;letter-spacing:1.2px;color:var(--burgundy);white-space:nowrap;text-shadow:0 1px 0 rgba(255,255,255,.45)}
.brand i{color:var(--gold);font-style:normal}
.nav-btn,.primary,.secondary,button{border:0;border-radius:999px;padding:13px 23px;font-weight:800;text-decoration:none;cursor:pointer;transition:.25s;font-family:'Inter',system-ui,sans-serif}
.nav-btn,.primary,.save{background:linear-gradient(135deg,var(--burgundy-2),var(--burgundy));color:white;box-shadow:0 16px 38px rgba(100,17,38,.24)}
.secondary{background:rgba(255,255,255,.84);color:var(--burgundy);border:1px solid var(--line)}
button:disabled{opacity:.45;cursor:not-allowed}
button:hover:not(:disabled),.primary:hover,.secondary:hover,.nav-btn:hover{transform:translateY(-2px)}
.hero{min-height:100vh;padding-bottom:56px;position:relative}
.hero:before{content:'';position:absolute;inset:88px 6vw auto;height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent)}
.hero-grid{display:grid;grid-template-columns:1fr .78fr;gap:54px;align-items:center;padding:52px 6vw 0}
.eyebrow,.section-head p{color:var(--gold);font-weight:800;letter-spacing:3px;text-transform:uppercase;font-size:13px}
.names{font-family:'Cormorant Garamond',serif;font-size:clamp(64px,10vw,140px);line-height:.9;margin:0;color:var(--burgundy);font-weight:700;letter-spacing:.5px;position:relative;display:inline-block}
.names span{position:relative;display:inline-block;background:linear-gradient(100deg,var(--burgundy-2),var(--burgundy),var(--gold),#fff1bd,var(--burgundy));background-size:320% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:nameGlow 5.2s linear infinite;filter:drop-shadow(0 10px 28px rgba(100,17,38,.12))}
.names small{font-size:.38em;color:var(--gold);margin:0 14px;vertical-align:middle}
@keyframes nameGlow{0%{background-position:0% center}100%{background-position:320% center}}
.names:after{content:'';position:absolute;top:4%;bottom:4%;width:54px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.96),transparent);transform:skewX(-18deg);animation:shineSweep 3.8s ease-in-out infinite;opacity:.8}
@keyframes shineSweep{0%,35%{left:-18%;opacity:0}50%{opacity:.9}78%,100%{left:110%;opacity:0}}
.verse{font-size:28px;line-height:1.65;font-family:'Cormorant Garamond',serif;font-weight:700;margin:26px 0 6px;color:#4b202a;max-width:720px}
.ref{font-size:17px;color:var(--muted);margin:0 0 30px}.hero-actions{display:flex;gap:14px;flex-wrap:wrap}
.photo-card{position:relative;border-radius:34px;padding:12px;background:rgba(255,255,255,.72);box-shadow:var(--shadow);border:1px solid rgba(214,170,79,.42);backdrop-filter:blur(14px)}
.photo-card:before{content:'';position:absolute;inset:22px 22px -18px -18px;border:1px solid var(--gold);border-radius:34px;z-index:-1;opacity:.58}
.photo-card img{width:100%;display:block;border-radius:25px;aspect-ratio:4/5;object-fit:cover}
.section{padding:74px 6vw}.glass-section{margin:0 4vw;border-radius:38px;background:var(--glass);box-shadow:var(--shadow);backdrop-filter:blur(18px);border:1px solid var(--line)}
.section-head{text-align:center;max-width:840px;margin:0 auto 36px}.section-head h2{font-family:'Cormorant Garamond',serif;font-size:54px;line-height:1;margin:0 0 12px;color:var(--burgundy)}.section-head span{color:var(--muted);line-height:1.8}
.studio{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:stretch}.camera-box{min-height:430px;border-radius:30px;background:#2a0d14;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
video,canvas,#preview{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}canvas,#preview{display:none}.camera-placeholder{position:absolute;inset:0;display:grid;place-items:center;color:white;font-size:24px;font-weight:800;background:radial-gradient(circle at 50% 30%,rgba(214,170,79,.24),transparent 42%)}
.controls{display:flex;flex-direction:column;gap:14px}input,textarea{width:100%;border:1px solid var(--line);border-radius:22px;padding:17px 20px;font:700 15px 'Inter';background:rgba(255,255,255,.9);outline:2px solid transparent;box-shadow:0 12px 28px rgba(47,7,19,.06);color:var(--ink)}textarea{min-height:112px;resize:vertical}input:focus,textarea:focus{outline-color:rgba(214,170,79,.48)}
.btn-row{display:flex;gap:10px;flex-wrap:wrap}.btn-row button{background:white;color:var(--burgundy);box-shadow:0 10px 24px rgba(47,7,19,.08);border:1px solid var(--line)}.voice-panel{padding:18px;border-radius:26px;background:linear-gradient(135deg,#fff,rgba(248,232,189,.36));border:1px solid var(--line)}.voice-status{font-weight:800;margin-bottom:12px;color:var(--burgundy)}audio{width:100%;display:none;margin-top:12px}.save{font-size:17px;padding:17px 26px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(245px,1fr));gap:22px}.guest-card{background:white;border-radius:28px;padding:14px;box-shadow:0 18px 42px rgba(47,7,19,.12);position:relative;overflow:hidden;border:1px solid var(--line)}.guest-card:before{content:'';position:absolute;inset:auto -34px -42px auto;width:118px;height:118px;background:var(--gold);border-radius:50%;opacity:.16}.guest-card img{width:100%;height:230px;object-fit:cover;border-radius:20px}.guest-card h3{margin:12px 0 4px;font-size:21px;color:var(--burgundy)}.guest-card p{margin:0 0 12px;color:var(--muted);line-height:1.8}.guest-card audio{display:block}.empty{grid-column:1/-1;text-align:center;color:var(--muted);font-weight:800}footer{text-align:center;padding:35px;color:var(--muted);font-weight:800}
@media(max-width:900px){.hero-grid,.studio{grid-template-columns:1fr}.hero-grid{padding-top:30px;gap:34px}.topbar{padding:18px 20px}.section{padding:48px 20px}.glass-section{margin:0 12px;border-radius:28px}.camera-box{min-height:350px}.section-head h2{font-size:42px}.photo-card:before{display:none}.names{font-size:clamp(54px,16vw,84px)}.verse{font-size:24px}.nav-btn{display:none}.hero{min-height:auto}.photo-card{max-width:460px;margin:auto}.btn-row button,.save{flex:1 1 150px}.overlay-glow{background:linear-gradient(180deg,rgba(255,250,241,.76),rgba(255,250,241,.92))}}
@media(max-width:520px){.topbar{align-items:flex-start}.brand{font-size:26px}.hero-actions a{width:100%;text-align:center}.section-head h2{font-size:35px}.camera-box{min-height:300px}.controls input,.controls textarea{font-size:14px}.names small{margin:0 6px}.photo-card{border-radius:26px}.photo-card img{border-radius:19px}}