@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Playfair+Display:ital,wght@0,600;1,600&display=swap');

:root {
  --pink: #ef7894;
  --pink-deep: #de5e7e;
  --pink-soft: #fff0f4;
  --blue: #6ba4d9;
  --blue-deep: #326faa;
  --blue-soft: #edf7ff;
  --ink: #30415b;
  --muted: #708096;
  --cream: #fffdfb;
  --white: #ffffff;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: "DM Sans", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; }

.nav {
  align-items: center;
  backdrop-filter: blur(14px);
  background: rgba(255, 253, 251, .86);
  border-bottom: 1px solid rgba(239, 120, 148, .15);
  display: flex;
  height: 74px;
  justify-content: space-between;
  left: 0;
  padding: 0 clamp(24px, 5vw, 80px);
  position: fixed;
  right: 0;
  top: 0;
  z-index: 20;
}
.brand { color: var(--pink-deep); font-family: "Playfair Display", Georgia, serif; font-size: 1.16rem; font-style: italic; font-weight: 600; }
.brand span { font-family: Arial, sans-serif; margin-right: 7px; }
.navLinks { align-items: center; display: flex; gap: clamp(18px, 3vw, 38px); font-size: .84rem; font-weight: 600; }
.navLinks > a:not(.navRsvp):hover { color: var(--pink-deep); }
.navRsvp { background: var(--pink); border-radius: 99px; color: white; padding: 10px 20px; }

.hero {
  align-items: center;
  background: linear-gradient(135deg, #fff6f8 0%, #fffdfb 48%, #f1f8ff 100%);
  display: flex;
  flex-direction: column;
  min-height: 820px;
  overflow: hidden;
  padding: 170px 24px 90px;
  position: relative;
  text-align: center;
}
.hero::after { background: radial-gradient(circle, rgba(239,120,148,.12) 1.5px, transparent 1.5px); background-size: 24px 24px; bottom: 0; content: ""; height: 90px; left: 0; opacity: .5; position: absolute; right: 0; }
.eyebrow { color: var(--pink-deep); font-size: .74rem; font-weight: 600; letter-spacing: .25em; margin: 0 0 20px; text-transform: uppercase; }
.hero h1, .sectionHeading h2, .dressCode h2, .rsvpSection h2 { font-family: "Playfair Display", Georgia, serif; font-weight: 600; }
.hero h1 { color: #385577; font-size: clamp(3.3rem, 7.4vw, 6.5rem); letter-spacing: -.045em; line-height: .98; margin: 0; }
.hero h1 em { color: var(--pink); font-weight: 600; }
.intro { color: var(--muted); font-size: clamp(1rem, 1.7vw, 1.16rem); line-height: 1.8; margin: 30px 0 32px; }
.primaryButton { align-items: center; background: linear-gradient(135deg, var(--pink), var(--pink-deep)); border-radius: 99px; box-shadow: 0 12px 30px rgba(222, 94, 126, .22); color: white; display: inline-flex; font-size: .88rem; font-weight: 600; gap: 14px; padding: 15px 25px; transition: transform .2s, box-shadow .2s; }
.primaryButton:hover { box-shadow: 0 16px 35px rgba(222, 94, 126, .3); transform: translateY(-2px); }
.countdown { display: flex; gap: clamp(12px, 3vw, 32px); margin-top: 58px; position: relative; z-index: 2; }
.countdownItem { min-width: 62px; }
.countdownItem strong { color: var(--blue-deep); display: block; font-family: "Playfair Display", Georgia, serif; font-size: 1.65rem; }
.countdownItem span { color: var(--muted); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; }
.cloud { background: rgba(255,255,255,.72); border-radius: 100px; filter: blur(.5px); height: 52px; position: absolute; width: 160px; }
.cloud::before, .cloud::after { background: inherit; border-radius: 50%; content: ""; position: absolute; }
.cloud::before { height: 75px; left: 28px; top: -34px; width: 75px; }
.cloud::after { height: 58px; right: 20px; top: -22px; width: 58px; }
.cloudOne { left: 7%; top: 210px; }
.cloudTwo { right: 8%; top: 340px; transform: scale(.75); }
.sparkle { color: #f5abc0; font-size: 26px; position: absolute; }
.sparkleOne { left: 19%; top: 380px; }
.sparkleTwo { color: #a6ccec; right: 20%; top: 210px; }

.invitationSection, .detailsSection { padding: 110px 24px; }
.invitationSection { background: white; }
.sectionHeading { margin: 0 auto 50px; max-width: 660px; text-align: center; }
.sectionHeading .eyebrow { margin-bottom: 12px; }
.sectionHeading h2, .dressCode h2, .rsvpSection h2 { color: #385577; font-size: clamp(2.25rem, 5vw, 4rem); letter-spacing: -.035em; margin: 0 0 14px; }
.sectionHeading > p:last-child, .dressCode > p:not(.eyebrow), .rsvpSection > p:not(.eyebrow) { color: var(--muted); line-height: 1.7; }
.miniHeart { color: var(--pink); display: block; font-size: 2rem; margin-bottom: 14px; }
.invitationFrame { background: white; border: 1px solid #f6d9e1; box-shadow: 0 22px 60px rgba(80, 96, 120, .14); margin: 0 auto; max-width: 720px; padding: clamp(8px, 1.4vw, 16px); position: relative; }
.invitationFrame::before { border: 1px solid rgba(107,164,217,.28); content: ""; inset: -10px; pointer-events: none; position: absolute; }
.invitationFrame img { display: block; height: auto; width: 100%; }

.detailsSection { background: var(--blue-soft); }
.detailGrid { display: grid; gap: 22px; grid-template-columns: repeat(3, 1fr); margin: 0 auto; max-width: 1080px; }
.detailCard { border: 1px solid rgba(255,255,255,.9); border-radius: 24px; min-height: 265px; padding: 38px 30px; text-align: center; }
.pinkCard { background: linear-gradient(160deg, #fff, var(--pink-soft)); }
.blueCard { background: linear-gradient(160deg, #fff, #e0f1ff); }
.cardIcon { align-items: center; background: white; border-radius: 50%; box-shadow: 0 8px 22px rgba(70,90,120,.1); color: var(--pink); display: inline-flex; font-size: 1.7rem; height: 58px; justify-content: center; margin-bottom: 18px; width: 58px; }
.blueCard .cardIcon { color: var(--blue); }
.detailCard p { color: var(--pink-deep); font-size: .68rem; font-weight: 600; letter-spacing: .2em; margin: 0 0 10px; text-transform: uppercase; }
.blueCard p { color: var(--blue-deep); }
.detailCard h3 { color: #385577; font-family: "Playfair Display", Georgia, serif; font-size: 1.45rem; margin: 0 0 8px; }
.detailCard > span:last-child { color: var(--muted); font-size: .86rem; }
.actionRow { display: flex; gap: 14px; justify-content: center; margin-top: 38px; }
.secondaryButton { background: var(--blue-deep); border: 2px solid var(--blue-deep); border-radius: 99px; color: white; cursor: pointer; font-size: .84rem; font-weight: 600; padding: 13px 22px; }
.secondaryButton.outline { background: transparent; color: var(--blue-deep); }

.dressCode { background: linear-gradient(90deg, var(--pink-soft), #fff 50%, var(--blue-soft)); overflow: hidden; padding: 105px 24px; position: relative; text-align: center; }
.dressCode .eyebrow { margin-bottom: 14px; }
.swatches { display: flex; justify-content: center; margin-top: 28px; }
.swatches span { border: 4px solid white; border-radius: 50%; box-shadow: 0 5px 18px rgba(60,80,110,.12); height: 48px; margin-left: -8px; width: 48px; }
.pinkSwatch { background: #f3a1b5; }
.blueSwatch { background: #9bc8ed; }
.whiteSwatch { background: white; }
.balloon { border-radius: 50% 50% 48% 48%; height: 95px; opacity: .2; position: absolute; width: 72px; }
.balloon::after { background: currentColor; content: ""; height: 110px; left: 50%; position: absolute; top: 95px; width: 1px; }
.balloonPink { background: var(--pink); color: var(--pink); left: 9%; top: 50px; transform: rotate(-12deg); }
.balloonBlue { background: var(--blue); color: var(--blue); right: 10%; top: 80px; transform: rotate(12deg); }

.rsvpSection { align-items: center; background: #fff; display: flex; flex-direction: column; padding: 120px 24px; text-align: center; }
.rsvpSection .eyebrow { margin-bottom: 14px; }
.rsvpSection > p:not(.eyebrow) { margin: 0 0 32px; }
.emailLink { color: var(--blue-deep); font-size: .85rem; margin-top: 18px; text-decoration: underline; text-underline-offset: 4px; }
footer { align-items: center; background: #385577; color: rgba(255,255,255,.75); display: flex; font-size: .78rem; gap: 14px; justify-content: center; min-height: 95px; padding: 22px 5vw; }
footer > span { color: #ffadc1; font-size: 1.3rem; }
footer p { margin: 0; }
footer a { margin-left: auto; }

@media (max-width: 760px) {
  .nav { height: 66px; padding: 0 18px; }
  .navLinks > a:not(.navRsvp) { display: none; }
  .navRsvp { padding: 9px 17px; }
  .hero { min-height: 740px; padding-top: 150px; }
  .cloudOne { left: -70px; top: 200px; transform: scale(.7); }
  .cloudTwo { right: -70px; top: 340px; }
  .sparkle { display: none; }
  .desktopBreak { display: none; }
  .countdown { gap: 8px; margin-top: 50px; }
  .countdownItem { min-width: 54px; }
  .countdownItem strong { font-size: 1.35rem; }
  .invitationSection, .detailsSection { padding: 82px 20px; }
  .invitationFrame::before { inset: -6px; }
  .detailGrid { grid-template-columns: 1fr; }
  .detailCard { min-height: 235px; }
  .actionRow { align-items: stretch; flex-direction: column; margin-left: auto; margin-right: auto; max-width: 260px; }
  .balloon { opacity: .1; }
  footer { flex-wrap: wrap; text-align: center; }
  footer a { margin-left: 0; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}