@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700&display=swap');
@font-face{font-family:"Vasek";src:url("https://raw.githubusercontent.com/ZaydAbdullayev/hand-text/main/fonts/Vasek%20Italic.ttf") format("truetype");font-style:normal;font-weight:400;font-display:swap}



:root { font-family: 'Manrope', sans-serif; color: #1A2F3D; background: #fff; font-synthesis: none; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; min-height: 100vh; overflow-x: hidden; background: #fff; }
button, input, textarea { font: inherit; }
button, label, input[type='radio'], input[type='checkbox'] { cursor: pointer; }

.wedding-page { width: 100%; max-width: 390px; margin: 0 auto; overflow: hidden; background: #fff; }
.wedding-page section { position: relative; }
.hero-section { position: relative; min-height: 100svh; display: grid; place-items: center; overflow: hidden; background: linear-gradient(180deg, #C8E6F5 0%, #E8F5FF 58%, #F0F8FF 100%); }
.hero-section::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to bottom, rgba(10,25,40,0.1) 0%, transparent 50%, rgba(5,15,30,0.45) 100%); pointer-events: none; }
.hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; object-position: center center; transform: none; transform-origin: center center; filter: none; }
.hero-content { position: relative; z-index: 2; text-align: center; margin-top: -2vh; }
.hero-fade { opacity: 0; animation: fadeUp .9s cubic-bezier(.16,1,.3,1) forwards; }
.hero-delay-1 { animation-delay: 0ms; }.hero-delay-2 { animation-delay: 300ms; }.hero-delay-3 { animation-delay: 600ms; }.hero-delay-4 { animation-delay: 900ms; }
.eyebrow { margin: 0 0 16px; color: #9BBFCC; font-size: 11px; font-weight: 600; letter-spacing: .19em; line-height: 1.4; text-transform: uppercase; }
.couple-name, h2, .countdown-grid strong, .modal-heading, .modal-names { font-family: 'Vasek', cursive; font-style: normal; font-weight: 400; }
.couple-name { display: flex; flex-direction: column; margin: 0; color: #fff; font-size: 54px; line-height: .88; letter-spacing: -.04em; text-shadow: 0 2px 18px rgba(10,25,40,.26); }
h2 { font-weight: 400; }
.hero-section .eyebrow { color: rgba(255,255,255,.78); text-shadow: 0 1px 12px rgba(10,25,40,.22); }
.short-rule, .final-rule { width: 40px; height: 1px; margin: 27px auto 18px; background: #6BAED6; }
.hero-section .short-rule { background: rgba(255,255,255,.82); }
.hero-place { margin: 0; color: rgba(255,255,255,.86); font-size: 14px; text-shadow: 0 1px 12px rgba(10,25,40,.3); }
.scroll-cue { position: absolute; z-index: 3; bottom: 30px; left: 50%; width: 1px; height: 32px; background: rgba(255,255,255,.7); animation: pulse 2.2s infinite; }
.scroll-cue span { position: absolute; bottom: 0; left: -3px; width: 7px; height: 7px; border-right: 1px solid rgba(255,255,255,.7); border-bottom: 1px solid rgba(255,255,255,.7); transform: rotate(45deg); }
.hero-wave { position: absolute; z-index: 2; right: 0; bottom: -1px; left: 0; width: 100%; height: 50px; }
.section-reveal { opacity: 0; transform: translateY(30px); transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); }
.section-reveal.visible { opacity: 1; transform: none; }
.invitation-section, .venue-section, .program-section, .dress-section, .gifts-section, .countdown-section { padding: 64px 28px; }
h2 { margin: 0 0 14px; color: #1A2F3D; font-size: 42px; line-height: 1.05; }
.body-copy { margin: 0; font-family: 'Manrope', sans-serif; color: #3A4F5C; font-size: 15px; font-weight: 400; line-height: 1.72; }
.invitation-section { padding-top: 70px; text-align: center; background: linear-gradient(180deg, #F5FAFD 0%, #fff 32%); }.invitation-section h2 { font-size: 40px; }.invitation-section .body-copy { text-align: left; }.wave-line { width: 80px; height: 14px; margin: 30px auto 0; fill: none; stroke: #D6EBF5; stroke-width: 1.2; }
.venue-section { background: linear-gradient(145deg, #F0F8FF, #E8F4FA); }.venue-subtitle { margin: -4px 0 23px; color: #6BAED6; font-size: 14px; }.venue-photo { display: block; width: 100%; aspect-ratio: 16 / 10; margin: 0 0 26px; overflow: hidden; border-radius: 16px; object-fit: cover; object-position: center 40%; filter: saturate(0.85) hue-rotate(4deg) brightness(1.03); }
.program-section { overflow: hidden; background: #EBF6FC; }.ripple-graphic { position: absolute; top: 26px; right: -20px; width: 140px; height: 140px; fill: none; stroke: #B8D9EE; stroke-width: 1; }.timeline-list { position: relative; margin: 34px 0 0; padding: 0 0 0 32px; list-style: none; }.timeline-list::before { content: ''; position: absolute; top: 12px; bottom: 12px; left: 7px; width: 1px; background: #6BAED6; }.timeline-item { position: relative; display: flex; gap: 16px; align-items: flex-start; padding-bottom: 32px; }.timeline-item:last-child { padding-bottom: 0; }.timeline-item time { min-width: 56px; flex-shrink: 0; color: #3A7FB5; font-size: 15px; font-weight: 700; line-height: 1.55; }.timeline-item p { margin: 0; color: #1A2F3D; font-size: 15px; font-weight: 400; line-height: 1.55; }.timeline-dot { position: absolute; left: -31.5px; top: 8px; z-index: 1; width: 13px; height: 13px; border: 1.5px solid #6BAED6; border-radius: 50%; background: #fff; }
.emotional-section { padding: 48px 0; background: linear-gradient(#EBF6FC, #fff); }.emotional-photo { width: 88%; margin: 0 auto; padding: 0; color: #9BBFCC; text-align: center; }.emotional-photo img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 20%; border-radius: 12px; box-shadow: 0 8px 32px rgba(26, 47, 61, 0.12); filter: saturate(0.88) hue-rotate(-4deg) brightness(1) contrast(1.02); }.emotional-photo figcaption { margin: 15px 0 0; font-family: 'Manrope', sans-serif; color: #9BBFCC; font-size: 13px; font-style: italic; font-weight: 400; line-height: 1.5; }
.dress-section { text-align: center; }.dress-section .body-copy { margin-bottom: 30px; }.swatches-list { display: flex; justify-content: space-between; gap: 7px; margin: 0; padding: 0; list-style: none; }.swatches-list li { display: flex; flex: 1; flex-direction: column; align-items: center; gap: 9px; color: #5B7280; font-size: 10px; font-weight: 600; }.swatch { width: 42px; height: 42px; border-radius: 50%; }.swatch-bordered { border: 1px solid #E0EEF5; }.dress-note { margin: 28px 0 0; color: #7A8FA0; font-size: 13px; font-style: italic; line-height: 1.6; }
.gifts-section { text-align: center; background: #F5FBFE; }.gift-rule { width: 48px; height: 1px; margin: 0 auto 24px; background: #6BAED6; }.gifts-section h2 { font-size: 38px; }
.countdown-section { text-align: center; }.countdown-grid { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 29px; }.countdown-grid > div { position: relative; display: flex; flex-direction: column; gap: 4px; }.countdown-grid > div + div::before { content: ''; position: absolute; top: 12px; left: 0; width: 1px; height: 55px; background: #E8F4FA; }.countdown-grid strong { color: #3A7FB5; font-size: 52px; line-height: .9; }.countdown-grid span { color: #9BBFCC; font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.rsvp-section { padding: 60px 24px 64px; background: linear-gradient(160deg, #3A7FB5, #6BAED6); }.rsvp-section h2 { color: #fff; font-size: 42px; }.rsvp-intro { margin: 0 0 27px; color: rgba(255,255,255,.82); font-size: 14px; }.rsvp-card { padding: 28px 20px; border: 1px solid rgba(255,255,255,.25); border-radius: 20px; background: rgba(255,255,255,.12); backdrop-filter: blur(20px); }.rsvp-card label, .rsvp-card legend { display: block; margin-bottom: 14px; color: #fff; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }.rsvp-card input[type='text'], .rsvp-card textarea { width: 100%; margin-top: 7px; padding: 14px 16px; border: 2px solid transparent; border-radius: 10px; outline: none; color: #1A2F3D; font-size: 15px; background: rgba(255,255,255,.92); }.rsvp-card textarea { resize: vertical; }.rsvp-card input:focus, .rsvp-card textarea:focus { border-color: #fff; }.rsvp-card fieldset { min-width: 0; margin: 0 0 14px; padding: 0; border: 0; }.rsvp-card legend { padding: 0; }.pill-group { display: flex; flex-wrap: wrap; gap: 8px; }.pill { position: relative; display: inline-block !important; margin: 0 !important; color: #fff !important; font-size: 12px !important; font-weight: 500 !important; letter-spacing: 0 !important; text-transform: none !important; }.pill input { position: absolute; opacity: 0; }.pill span { display: block; padding: 9px 12px; border: 1px solid rgba(255,255,255,.7); border-radius: 999px; }.pill input:checked + span { color: #3A7FB5; background: rgba(255,255,255,.92); }.rsvp-card button { width: 100%; margin-top: 5px; padding: 16px; border: 0; border-radius: 12px; color: #3A7FB5; font-weight: 700; background: #fff; }.rsvp-card button:hover { background: #E8F4F0; }.success-message { padding: 25px; border: 1px solid rgba(255,255,255,.3); border-radius: 16px; color: #fff; font-size: 15px; line-height: 1.7; background: rgba(255,255,255,.12); }
.final-section { padding: 72px 28px; text-align: center; color: #fff; background: linear-gradient(180deg, #1A2F3D, #3A7FB5); }.final-photo { position: relative; aspect-ratio: 3 / 4; display: grid; place-items: center; overflow: hidden; border-radius: 16px; color: rgba(255,255,255,.66); font-size: 12px; letter-spacing: .12em; background: linear-gradient(180deg, #2A4A65, #6BAED6 60%, #C8E6F5); }.final-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.88) hue-rotate(5deg) brightness(0.9) contrast(1.04); }.final-photo::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, transparent 48%, rgba(10,25,40,.44)); }.final-photo span { position: relative; z-index: 2; }.final-rule { margin: 32px auto 24px; }.final-section h2 { display: flex; flex-direction: column; margin-bottom: 20px; color: #fff; font-size: 48px; line-height: .86; }.final-section > p { margin: 0 auto 22px; font-family: 'Manrope', sans-serif; color: rgba(255,255,255,.76); font-size: 14px; line-height: 1.7; }.final-section time { color: #6BAED6; font-size: 11px; font-weight: 600; letter-spacing: .18em; }
.modal-overlay { display: flex; position: fixed; inset: 0; z-index: 9999; background: rgba(10, 20, 35, 0.6); backdrop-filter: blur(4px); align-items: flex-end; justify-content: center; animation: fadeIn 0.4s ease; }.modal-inner { position: relative; width: 100%; max-width: 390px; height: 92vh; border-radius: 20px 20px 0 0; overflow: hidden; background: #0A1520; }.modal-photo-wrap { position: absolute; inset: 0; }.modal-photo { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; filter: saturate(0.92) brightness(0.82) contrast(1.08); }.modal-photo-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(5,10,20,0.05) 0%, rgba(5,10,20,0.0) 30%, rgba(5,10,20,0.72) 100%); }.modal-close { position: absolute; top: 20px; right: 20px; z-index: 10; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.25); color: #fff; font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(8px); }.modal-content { position: absolute; bottom: 0; left: 0; right: 0; padding: 0 28px 52px; text-align: center; z-index: 5; }.modal-label { display: block; font-family: 'Manrope', sans-serif; font-size: 11px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.55); margin-bottom: 16px; }.modal-heading { font-size: 48px; color: #ffffff; line-height: 1.1; margin-bottom: 0; }.modal-rule { width: 48px; height: 1px; background: rgba(255,255,255,0.3); margin: 20px auto; }.modal-text { font-family: 'Manrope', sans-serif; font-size: 14px; color: rgba(255,255,255,0.75); line-height: 1.65; margin: 0 0 20px; }.modal-names { margin: 0; font-size: 26px; color: rgba(255,255,255,0.88); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@media (min-width: 700px) { body { background: #F0F8FF; } .wedding-page { box-shadow: 0 4px 20px rgba(0,0,0,.06); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* Переопределения для надёжной мобильной версии */
:root,html,body,button,input,textarea,select{font-family:"Manrope",Arial,sans-serif}
.body-copy,.final-section>p,.modal-label,.modal-text,.rsvp-section p,.timeline-item p{font-family:"Manrope",Arial,sans-serif}
.couple-name,h2,.countdown-grid strong,.modal-heading,.modal-names{font-family:"Vasek",cursive;font-synthesis:none}
.hero-photo{height:100%;object-fit:cover;object-position:50% 50%;transform:none;filter:none}
.hero-section{min-height:660px;min-height:100svh}
.modal-overlay[hidden],[hidden]{display:none!important}
.modal-overlay:not([hidden]){display:flex}
.modal-inner{height:min(92dvh,820px)}
.modal-overlay{overscroll-behavior:contain}
.hp-field{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(100%);white-space:nowrap}
.consent-label{display:flex!important;align-items:flex-start;gap:10px;margin-top:18px!important;font-weight:400!important;letter-spacing:0!important;text-transform:none!important;line-height:1.5;color:#fff!important;font-size:11px!important}
.consent-label input{width:16px;height:16px;flex:none;margin-top:2px;accent-color:#fff}
.consent-label span{display:inline-block!important;padding:0!important;background:transparent!important;border:0!important;color:#fff!important}
.rsvp-error{margin-top:16px;padding:12px 14px;background:#fff0f0;color:#8a2929;border-radius:9px;font-size:13px;line-height:1.55}
.success-message{margin-top:22px}
button:disabled{opacity:.55;cursor:wait}
.pill:focus-within span{outline:2px solid #fff;outline-offset:2px}
.rsvp-card input[type='radio'],.rsvp-card input[type='checkbox']{cursor:pointer}
.modal-close:focus-visible,.rsvp-card button:focus-visible{outline:3px solid #fff;outline-offset:3px}
.final-photo>img{position:absolute;inset:0}
@media(max-width:365px){.countdown-grid strong{font-size:43px}.swatch{width:35px;height:35px}.wedding-page{max-width:100%}.hero-content{padding:0 14px}.couple-name{font-size:49px}}
@media(min-width:430px){.wedding-page{max-width:430px}}
@media(prefers-reduced-motion:reduce){.section-reveal,.section-reveal.visible{opacity:1;transform:none}}

/* Hidden elements must not display even when authored classes define flex/block. */
[hidden], .modal-overlay[hidden] { display: none !important; }