:root {
  --ink: #f9f7ff;
  --muted: #c6c1d7;
  --night: #050511;
  --violet: #7a3fff;
  --pink: #ec3ba8;
  --green: #65e18f;
  --display: "Playfair Display", Georgia, serif;
  --sans: "Montserrat", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; background: var(--night); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }

.hero { position: relative; min-height: 100svh; display: grid; place-items: center; isolation: isolate; overflow: hidden; padding: 5.5rem 1.25rem 5rem; }
.hero-image, .hero-shade, .hero-grid { position: absolute; inset: 0; pointer-events: none; }
.hero-image { z-index: -3; background: #000 url("../assets/images/hero-sofi.png") center top / cover no-repeat; transform: scale(1.02); }
.hero-shade { z-index: -2; background: linear-gradient(180deg, rgba(3,3,14,.28), rgba(4,2,17,.08) 36%, rgba(5,5,17,.98) 94%), radial-gradient(circle at 50% 42%, transparent 0 16%, rgba(2,2,12,.12) 54%, rgba(2,2,12,.7)); }
.hero-grid { z-index: -1; opacity: .12; background-image: linear-gradient(rgba(255,255,255,.14) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.14) 1px, transparent 1px); background-size: 52px 52px; mask-image: linear-gradient(to bottom, transparent, black 14%, black 55%, transparent 90%); }
.hero-content { width: 100%; max-width: 760px; min-width: 0; text-align: center; margin-top: 14vh; }
.eyebrow { margin: 0 0 1rem; color: #e6d8ff; font-size: .67rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; }
h1, h2 { margin-top: 0; font-family: var(--display); font-weight: 500; font-feature-settings: "lnum" 1; }
h1 { margin-bottom: 0; max-width: 100%; line-height: .82; font-size: clamp(5rem, 25vw, 10rem); letter-spacing: -.06em; text-shadow: 0 0 35px rgba(255,255,255,.32); }
h1 > span:first-child { display: block; margin: 0 0 1.25rem .5em; font-family: var(--sans); font-size: .14em; line-height: 1; letter-spacing: .5em; text-transform: uppercase; }
h1 .name { display: block; }
.intro { max-width: 30rem; margin: 1.8rem auto 1.6rem; color: #e8e5f2; font-size: .96rem; line-height: 1.65; }
.countdown { display: grid; width: 100%; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .45rem; max-width: 31rem; margin: auto; }
.count-unit { min-width: 0; padding: .8rem .2rem .72rem; border: 1px solid rgba(255,255,255,.22); border-radius: .8rem; background: rgba(9,7,30,.5); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 12px 30px rgba(0,0,0,.14); backdrop-filter: blur(10px); }
.count-unit strong { display: block; font-family: var(--display); font-size: clamp(1.55rem, 8vw, 2.65rem); line-height: 1; font-weight: 500; font-variant-numeric: lining-nums tabular-nums; }
.count-unit span { display: block; margin-top: .4rem; color: #d7d2e8; font-size: .52rem; letter-spacing: .11em; text-transform: uppercase; }
.countdown-loading { min-height: 4.7rem; }
.big-day { margin: .5rem 0 0; font-family: var(--display); font-size: 2.4rem; }
.scroll-cue { position: absolute; bottom: 1.15rem; display: grid; place-items: center; gap: .35rem; color: #d9d5e7; font-size: .57rem; letter-spacing: .15em; text-transform: uppercase; }
.scroll-cue b { display: grid; place-items: center; width: 2rem; height: 2rem; border: 1px solid rgba(255,255,255,.3); border-radius: 50%; font-size: 1rem; font-weight: 400; animation: bob 1.8s ease-in-out infinite; }
.spark { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: white; box-shadow: 0 0 18px 6px rgba(255,255,255,.8); animation: glint 3s ease-in-out infinite; }
.spark-one { left: 15%; top: 32%; }
.spark-two { right: 12%; top: 43%; animation-delay: 1.3s; }

.section { position: relative; padding: 6.5rem 1.25rem; text-align: center; overflow: hidden; }
.section h2, .closing h2 { margin: 0; font-size: clamp(3.2rem, 14vw, 6.5rem); line-height: .95; letter-spacing: -.04em; }
.date-section { background: linear-gradient(180deg, var(--night), #100824 70%, #14072a); }
.date-section::before { content: ""; position: absolute; width: 20rem; height: 20rem; left: -11rem; top: 4rem; border-radius: 50%; background: #6f1da0; filter: blur(120px); opacity: .33; }
.date-layout { max-width: 48rem; margin: auto; display: grid; gap: 2.2rem; place-items: center; }
.date-display { margin: 1rem 0 0; font-family: var(--display); font-size: clamp(6rem, 30vw, 12rem); line-height: .78; color: #fff; font-variant-numeric: lining-nums tabular-nums; }
.date-number, .date-month { display: block; }
.date-month { margin-top: .8rem; font-family: var(--sans); font-size: .13em; letter-spacing: .16em; text-transform: uppercase; }
.year { margin: .9rem 0 0; color: #bc9bff; letter-spacing: .6em; font-size: .75rem; }
.time-card { min-width: 13rem; padding: 1.6rem 2rem; border-left: 1px solid #9b72e8; border-right: 1px solid #9b72e8; }
.time-card strong { display: block; font-family: var(--display); font-size: 4.5rem; line-height: 1; font-weight: 500; font-variant-numeric: lining-nums tabular-nums; }
.time-card > span:not(.tiny-label) { font-size: .65rem; letter-spacing: .24em; text-transform: uppercase; }
.tiny-label { display: block; margin-bottom: .7rem; color: var(--muted); font-size: .6rem; }

.button { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: .65rem; margin-top: 2rem; padding: .9rem 1.5rem; border: 1px solid transparent; border-radius: 999px; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; transition: transform .25s ease, box-shadow .25s ease, background .25s ease; cursor: pointer; }
.button:hover { transform: translateY(-2px); }
.button:focus-visible, .alias-card button:focus-visible, .floating-rsvp:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.button-secondary { background: transparent; color: white; border-color: rgba(255,255,255,.38); }
.button-secondary:hover { background: rgba(255,255,255,.08); }
.button-primary { color: white; background: linear-gradient(110deg, #7b3df3, #d32693); box-shadow: 0 10px 34px rgba(198,33,146,.28); }
.icon-mark { display: inline-grid; place-items: center; font-size: 1.05rem; line-height: 1; }

.venue-section { min-height: 38rem; display: grid; place-items: center; background: radial-gradient(circle at 50% 50%, rgba(55,80,255,.25), transparent 35%), linear-gradient(155deg, #09071d, #08051a 55%, #18071e); }
.venue-section::before, .venue-section::after { content: ""; position: absolute; border: 1px solid rgba(255,255,255,.09); border-radius: 50%; width: 28rem; height: 28rem; }
.venue-section::after { width: 21rem; height: 21rem; border-color: rgba(115,109,255,.14); }
.section-heading { position: relative; z-index: 1; }
.section-heading > p:last-of-type { color: #c7c1d7; letter-spacing: .12em; text-transform: uppercase; font-size: .74rem; }
.line-icon { display: inline-grid; place-items: center; width: 2.8rem; height: 2.8rem; margin-bottom: 1rem; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; color: #dc9cf8; font-size: 1.2rem; }
.dress-section { background: #f3eff6; color: #16111f; }
.dress-card { max-width: 52rem; margin: auto; text-align: left; }
.dress-card .eyebrow { color: #7b3ca9; }
.dress-card p:not(.eyebrow) { max-width: 34rem; margin-bottom: 0; color: #5a5362; line-height: 1.8; font-size: .92rem; }
.swatches-area { margin-top: 2.5rem; }
.swatches-note { display: flex; align-items: center; gap: .5rem; margin: 0 0 1rem; color: #9d1f2a; font-size: .67rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.swatches-note span { display: grid; place-items: center; width: 1.25rem; height: 1.25rem; border: 1px solid currentColor; border-radius: 50%; font-size: 1rem; line-height: 1; }
.swatches { display: flex; gap: 1.3rem; }
.swatches div { display: grid; justify-items: center; gap: .65rem; color: #625b69; font-size: .63rem; letter-spacing: .08em; text-transform: uppercase; }
.swatches i { position: relative; display: block; width: 3.4rem; height: 3.4rem; overflow: hidden; border-radius: 50%; border: 1px solid rgba(0,0,0,.07); box-shadow: 0 5px 18px rgba(44,29,55,.15); }
.swatches i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 125%; height: 4px; border-radius: 999px; background: #d51f2e; box-shadow: 0 0 0 1px rgba(255,255,255,.78), 0 2px 5px rgba(95,0,8,.32); transform: translate(-50%, -50%) rotate(-45deg); }
.gift-section { background: linear-gradient(145deg, #12091f, #070713); }
.gift-section::before { content: ""; position: absolute; inset: 10% 0 auto 58%; width: 14rem; height: 14rem; background: #d22496; filter: blur(120px); opacity: .2; }
.gift-section > div { max-width: 40rem; margin: auto; position: relative; }
.section-copy { max-width: 34rem; margin: 1.5rem auto; color: var(--muted); line-height: 1.8; font-size: .9rem; }
.alias-card { max-width: 30rem; margin: 2.2rem auto 0; padding: 1rem 1rem 1rem 1.25rem; display: flex; align-items: center; justify-content: space-between; gap: .8rem; border: 1px solid rgba(255,255,255,.16); border-radius: 1rem; background: rgba(255,255,255,.045); }
.alias-card code { min-width: 0; color: white; font-family: var(--sans); font-size: .84rem; overflow-wrap: anywhere; }
.alias-card button { flex: 0 0 auto; min-height: 42px; padding: .65rem .8rem; border: 0; border-radius: .65rem; color: white; background: #6f39d8; font-size: .68rem; font-weight: 700; cursor: pointer; }
.alias-card button:hover { background: #824de8; }
.rsvp-section { min-height: 38rem; display: grid; place-items: center; background: radial-gradient(circle at top, rgba(204,35,144,.35), transparent 50%), #12071b; }
.rsvp-section > div { max-width: 45rem; }
.rsvp-section p:not(.eyebrow) { max-width: 30rem; margin: 1.5rem auto; color: var(--muted); line-height: 1.7; }
.rsvp-section .deadline-note { margin: 1rem auto 0; color: #f2c7ff; font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.button-whatsapp { color: #07110b; background: var(--green); box-shadow: 0 12px 34px rgba(37,211,102,.2); }
.button-whatsapp:hover { background: #7ef0a3; }
.closing { padding: 7rem 1.25rem 4rem; text-align: center; background-color: #050511; background-image: linear-gradient(rgba(5,5,17,.88), rgba(5,5,17,.97)), url("../assets/images/hero-sofi.png"); background-position: center; background-size: cover; background-repeat: no-repeat; }
.closing > div { max-width: 47rem; margin: auto; }
.closing-date { margin: 2rem auto 0; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .75rem; color: #d3cddd; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; }
.closing-date i { width: 4px; height: 4px; border-radius: 50%; background: #e89bff; }
.signature { margin: 5rem 0 0; font-family: var(--display); font-size: 2.8rem; color: #d9bcff; }
.studio-credit { min-height: 88px; display: flex; align-items: center; justify-content: center; gap: clamp(.75rem, 3vw, 1.35rem); padding: 1rem max(1.25rem, env(safe-area-inset-right)) 1rem max(1.25rem, env(safe-area-inset-left)); border-top: 1px solid rgba(20,16,28,.12); background: #f5f2f6; color: #15111b; transition: background-color .25s ease, color .25s ease; }
.studio-credit:hover { background: #fff; color: #000; }
.studio-credit:focus-visible { outline: 3px solid var(--violet); outline-offset: -4px; }
.studio-credit__text { font-size: clamp(.58rem, 2.6vw, .7rem); font-weight: 700; line-height: 1.45; letter-spacing: .12em; text-transform: uppercase; }
.studio-credit img { width: clamp(5.5rem, 22vw, 7.6rem); height: auto; flex: 0 0 auto; }
.studio-credit__arrow { display: grid; place-items: center; width: 2rem; height: 2rem; flex: 0 0 auto; border: 1px solid rgba(21,17,27,.25); border-radius: 50%; font-size: .9rem; transition: transform .25s ease; }
.studio-credit:hover .studio-credit__arrow { transform: translate(2px, -2px); }
.floating-rsvp { position: fixed; z-index: 20; right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom)); min-height: 48px; display: flex; align-items: center; gap: .5rem; padding: .75rem 1rem; border-radius: 999px; background: var(--green); color: #07110b; box-shadow: 0 10px 35px rgba(0,0,0,.4); transform: translateY(7rem); opacity: 0; pointer-events: none; transition: .35s ease; }
.floating-rsvp.shown { transform: translateY(0); opacity: 1; pointer-events: auto; }
.floating-rsvp b { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; }
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }

@keyframes bob { 50% { transform: translateY(5px); } }
@keyframes glint { 0%, 100% { opacity: .15; transform: scale(.6); } 50% { opacity: 1; transform: scale(1); } }
@media (min-width: 720px) {
  .section { padding: 8rem 2rem; }
  .hero { min-height: 100vh; }
  .hero-content { margin-top: 20vh; }
  .date-layout { grid-template-columns: 1fr 1fr; gap: 3rem; text-align: left; }
  .date-section .button { margin-top: 4rem; }
  .dress-card { display: grid; grid-template-columns: 1.5fr 1fr; gap: 4rem; align-items: end; }
  .swatches-area { margin-top: 0; }
  .swatches-note, .swatches { justify-content: flex-end; }
}
@media (max-width: 719px) {
  .studio-credit { min-height: 112px; flex-direction: column; align-items: flex-start; justify-content: center; gap: .35rem; padding: .85rem calc(9.5rem + env(safe-area-inset-right)) .85rem max(.9rem, env(safe-area-inset-left)); }
  .studio-credit__text { max-width: 8.5rem; font-size: .58rem; }
  .studio-credit img { width: 5rem; }
  .studio-credit__arrow { display: none; }
}
@media (max-width: 419px) {
  .hero { padding-inline: .9rem; }
  h1 { font-size: clamp(4.3rem, 22vw, 7rem); }
  .intro { font-size: .88rem; }
  .countdown { gap: .28rem; }
  .count-unit { padding-inline: .1rem; }
  .count-unit strong { font-size: clamp(1.3rem, 7.6vw, 2rem); }
  .count-unit span { font-size: .46rem; letter-spacing: .08em; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}