/* ============================================
   Wedding Invitation - Rodion & Elizaveta
   Elegant Design with Roses & Red-Green Accents
   ============================================ */

/* CSS Variables */
:root {
  /* Colors - Elegant Palette */
  --color-primary: #8B2942;        /* Deep rose/burgundy */
  --color-primary-light: #A84361;
  --color-primary-dark: #6B1F33;
  --color-secondary: #2D5A3D;      /* Forest green */
  --color-secondary-light: #3D7A52;
  --color-accent-gold: #C9A962;    /* Gold accent */
  --color-accent-rose: #D4A5A5;    /* Soft rose */
  
  /* Backgrounds */
  --color-bg: #FDF9F6;             /* Warm cream/milk */
  --color-bg-alt: #F8F2ED;         /* Slightly darker cream */
  --color-bg-card: #FFFFFF;
  
  /* Text */
  --color-text: #3D3D3D;
  --color-text-light: #6B6B6B;
  --color-text-muted: #9A9A9A;
  
  /* Fonts */
  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-sans: 'Montserrat', -apple-system, sans-serif;
  
  /* Spacing */
  --section-padding: clamp(60px, 10vw, 120px);
  --container-max: 1200px;
  --container-padding: 24px;
  
  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;
  
  /* Shadows */
  --shadow-soft: 0 4px 20px rgba(139, 41, 66, 0.08);
  --shadow-card: 0 8px 40px rgba(139, 41, 66, 0.12);
}

/* Reset & Base */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: var(--font-sans);
  font-weight: 400;
  line-height: 1.6;
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Typography */
h1, h2, h3 {
  font-family: var(--font-serif);
  font-weight: 400;
  line-height: 1.2;
}

.section-title {
  font-size: clamp(2rem, 5vw, 3rem);
  color: var(--color-primary);
  text-align: center;
  margin-bottom: 1.5rem;
  letter-spacing: 0.05em;
}

/* Container */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

/* Section Base */
.section {
  padding: var(--section-padding) 0;
  position: relative;
}

/* ============================================
   Hero Section
   ============================================ */
.hero {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  background: 
    linear-gradient(135deg, 
      rgba(139, 41, 66, 0.03) 0%, 
      rgba(45, 90, 61, 0.03) 100%
    ),
    var(--color-bg);
  overflow: hidden;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(ellipse at top left, rgba(212, 165, 165, 0.15) 0%, transparent 50%),
    radial-gradient(ellipse at bottom right, rgba(45, 90, 61, 0.08) 0%, transparent 50%);
  pointer-events: none;
}

/* Rose decorations */
.hero-roses {
  position: absolute;
  width: 300px;
  height: 400px;
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.6;
  pointer-events: none;
}

.hero-roses-left {
  left: -50px;
  top: 10%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 300'%3E%3Cdefs%3E%3ClinearGradient id='rose1' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:%238B2942'/%3E%3Cstop offset='100%25' style='stop-color:%23D4A5A5'/%3E%3C/linearGradient%3E%3ClinearGradient id='leaf1' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:%232D5A3D'/%3E%3Cstop offset='100%25' style='stop-color:%233D7A52'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M60 80 Q80 60 100 80 Q120 60 140 80 Q150 100 140 120 Q120 140 100 150 Q80 140 60 120 Q50 100 60 80Z' fill='url(%23rose1)' opacity='0.7'/%3E%3Cpath d='M70 90 Q85 75 100 90 Q115 75 130 90 Q138 105 130 115 Q115 130 100 138 Q85 130 70 115 Q62 105 70 90Z' fill='%23A84361' opacity='0.8'/%3E%3Cpath d='M80 95 Q90 85 100 95 Q110 85 120 95 Q125 105 120 112 Q110 120 100 125 Q90 120 80 112 Q75 105 80 95Z' fill='%238B2942' opacity='0.9'/%3E%3Cpath d='M100 150 Q90 180 70 220 Q60 250 80 280' stroke='url(%23leaf1)' fill='none' stroke-width='3'/%3E%3Cpath d='M70 180 Q50 170 40 190 Q30 210 50 220 Q70 215 70 195' fill='url(%23leaf1)' opacity='0.8'/%3E%3Cpath d='M75 220 Q55 215 50 235 Q45 255 65 260 Q85 255 80 235' fill='url(%23leaf1)' opacity='0.7'/%3E%3C/svg%3E");
  transform: rotate(-15deg);
  animation: float 8s ease-in-out infinite;
}

.hero-roses-right {
  right: -50px;
  bottom: 15%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 300'%3E%3Cdefs%3E%3ClinearGradient id='rose2' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:%23D4A5A5'/%3E%3Cstop offset='100%25' style='stop-color:%238B2942'/%3E%3C/linearGradient%3E%3ClinearGradient id='leaf2' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:%233D7A52'/%3E%3Cstop offset='100%25' style='stop-color:%232D5A3D'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M100 50 Q80 100 100 150' stroke='url(%23leaf2)' fill='none' stroke-width='3'/%3E%3Cpath d='M95 80 Q115 70 125 90 Q135 110 115 115 Q95 110 95 90' fill='url(%23leaf2)' opacity='0.8'/%3E%3Cpath d='M105 120 Q125 115 130 135 Q135 155 115 155 Q100 150 105 130' fill='url(%23leaf2)' opacity='0.7'/%3E%3Cpath d='M60 180 Q80 160 100 180 Q120 160 140 180 Q150 200 140 220 Q120 240 100 250 Q80 240 60 220 Q50 200 60 180Z' fill='url(%23rose2)' opacity='0.7'/%3E%3Cpath d='M70 190 Q85 175 100 190 Q115 175 130 190 Q138 205 130 215 Q115 230 100 238 Q85 230 70 215 Q62 205 70 190Z' fill='%23A84361' opacity='0.8'/%3E%3Cpath d='M80 195 Q90 185 100 195 Q110 185 120 195 Q125 205 120 212 Q110 220 100 225 Q90 220 80 212 Q75 205 80 195Z' fill='%238B2942' opacity='0.9'/%3E%3C/svg%3E");
  transform: rotate(15deg) scaleX(-1);
  animation: float 8s ease-in-out infinite 2s;
}

@keyframes float {
  0%, 100% { transform: translateY(0) rotate(-15deg); }
  50% { transform: translateY(-20px) rotate(-12deg); }
}

.hero-roses-right {
  animation-name: float-right;
}

@keyframes float-right {
  0%, 100% { transform: translateY(0) rotate(15deg) scaleX(-1); }
  50% { transform: translateY(-20px) rotate(12deg) scaleX(-1); }
}

/* Hero Content */
.hero-content {
  text-align: center;
  z-index: 1;
  padding: 0 var(--container-padding);
  animation: fadeInUp 1s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-subtitle {
  font-family: var(--font-serif);
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  font-style: italic;
  color: var(--color-text-light);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.hero-names {
  font-size: clamp(2.5rem, 8vw, 5rem);
  color: var(--color-primary);
  margin-bottom: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

.hero-names .name {
  display: block;
  letter-spacing: 0.05em;
}

.hero-names .ampersand {
  font-size: 0.6em;
  color: var(--color-secondary);
  font-style: italic;
}

.hero-date {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 0.25rem;
  margin-bottom: 2.5rem;
}

.date-number {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 6vw, 3.5rem);
  color: var(--color-text);
  font-weight: 300;
}

.date-separator {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  color: var(--color-accent-gold);
}

/* Countdown Timer */
.countdown {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(0.5rem, 3vw, 1.5rem);
  flex-wrap: wrap;
}

.countdown-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 60px;
}

.countdown-number {
  font-family: var(--font-serif);
  font-size: clamp(1.75rem, 5vw, 2.5rem);
  color: var(--color-primary);
  font-weight: 500;
  line-height: 1;
  min-width: 2ch;
  text-align: center;
}

.countdown-label {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: 0.5rem;
}

.countdown-separator {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 4vw, 2rem);
  color: var(--color-accent-gold);
  margin-top: 0.25rem;
}

.countdown-message {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  color: var(--color-primary);
  font-style: italic;
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* Scroll Indicator */
.scroll-indicator {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  animation: bounce 2s infinite;
}

.scroll-indicator span {
  display: block;
  width: 24px;
  height: 40px;
  border: 2px solid var(--color-primary-light);
  border-radius: 12px;
  position: relative;
}

.scroll-indicator span::before {
  content: '';
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 8px;
  background: var(--color-primary);
  border-radius: 2px;
  animation: scroll-down 2s infinite;
}

@keyframes bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(10px); }
}

@keyframes scroll-down {
  0% { opacity: 1; top: 8px; }
  100% { opacity: 0; top: 20px; }
}

/* ============================================
   Invitation Section
   ============================================ */
.invitation {
  background: var(--color-bg-alt);
  text-align: center;
  overflow: hidden;
}

.leaf-decoration {
  position: absolute;
  width: 150px;
  height: 200px;
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.4;
  pointer-events: none;
}

.leaf-left {
  left: -30px;
  top: 50%;
  transform: translateY(-50%);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 150'%3E%3Cpath d='M50 10 Q30 50 20 90 Q15 120 30 140' stroke='%232D5A3D' fill='none' stroke-width='2' opacity='0.6'/%3E%3Cpath d='M35 40 Q15 35 10 55 Q5 75 25 80 Q45 75 40 55' fill='%232D5A3D' opacity='0.5'/%3E%3Cpath d='M30 80 Q10 78 8 98 Q6 118 26 118 Q46 115 38 95' fill='%233D7A52' opacity='0.4'/%3E%3C/svg%3E");
}

.leaf-right {
  right: -30px;
  top: 50%;
  transform: translateY(-50%) scaleX(-1);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 150'%3E%3Cpath d='M50 10 Q30 50 20 90 Q15 120 30 140' stroke='%232D5A3D' fill='none' stroke-width='2' opacity='0.6'/%3E%3Cpath d='M35 40 Q15 35 10 55 Q5 75 25 80 Q45 75 40 55' fill='%232D5A3D' opacity='0.5'/%3E%3Cpath d='M30 80 Q10 78 8 98 Q6 118 26 118 Q46 115 38 95' fill='%233D7A52' opacity='0.4'/%3E%3C/svg%3E");
}

.invitation-text {
  max-width: 600px;
  margin: 0 auto;
}

.invitation-intro {
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  color: var(--color-text);
  line-height: 1.8;
  font-style: italic;
}

.divider {
  margin: 2.5rem 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.divider-rose {
  width: 40px;
  height: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M15 12 Q20 8 25 12 Q30 8 32 15 Q35 22 30 28 Q24 34 20 36 Q16 34 10 28 Q5 22 8 15 Q10 8 15 12Z' fill='%238B2942' opacity='0.8'/%3E%3Cpath d='M17 15 Q20 12 23 15 Q26 12 28 17 Q30 22 26 26 Q22 30 20 31 Q18 30 14 26 Q10 22 12 17 Q14 12 17 15Z' fill='%23A84361' opacity='0.9'/%3E%3Cpath d='M18 17 Q20 15 22 17 Q24 15 25 19 Q26 22 23 25 Q21 27 20 28 Q19 27 17 25 Q14 22 15 19 Q16 15 18 17Z' fill='%23D4A5A5'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

.invitation-details {
  font-size: 1.125rem;
  color: var(--color-text);
  margin-bottom: 0.5rem;
}

.venue-name {
  font-family: var(--font-serif);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  color: var(--color-secondary);
  margin: 1rem 0;
}

.venue-address {
  font-size: 1rem;
  color: var(--color-text-light);
  line-height: 1.8;
}

.venue-note {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  font-style: italic;
}

/* ============================================
   Buttons
   ============================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 2rem;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-decoration: none;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  transition: all var(--transition-normal);
  white-space: nowrap;
}

.btn-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.btn-outline {
  background: transparent;
  color: var(--color-secondary);
  border: 2px solid var(--color-secondary);
  margin-top: 2rem;
}

.btn-outline:hover {
  background: var(--color-secondary);
  color: white;
}

.btn-primary {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: white;
  box-shadow: 0 4px 15px rgba(139, 41, 66, 0.3);
  min-width: 180px;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(139, 41, 66, 0.4);
}

.btn-primary:active {
  transform: translateY(0);
}

.btn-primary:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

.btn-call {
  background: var(--color-secondary);
  color: white;
  margin-top: 1.5rem;
  box-shadow: 0 4px 15px rgba(45, 90, 61, 0.3);
}

.btn-call:hover {
  background: var(--color-secondary-light);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(45, 90, 61, 0.4);
}

/* ============================================
   Timeline Section
   ============================================ */
.timeline {
  background: var(--color-bg);
}

.section-date {
  text-align: center;
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 3vw, 1.5rem);
  color: var(--color-secondary);
  margin-bottom: 3rem;
  font-style: italic;
}

.timeline-wrapper {
  max-width: 500px;
  margin: 0 auto;
  position: relative;
  padding-left: 0;
}

.timeline-line {
  display: none;
}

.timeline-item {
  position: relative;
  padding-bottom: 2.5rem;
  opacity: 0;
  transform: translateX(-20px);
  animation: slideIn 0.6s ease forwards;
}

.timeline-item:nth-child(2) { animation-delay: 0.1s; }
.timeline-item:nth-child(3) { animation-delay: 0.2s; }
.timeline-item:nth-child(4) { animation-delay: 0.3s; }
.timeline-item:nth-child(5) { animation-delay: 0.4s; }

@keyframes slideIn {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.timeline-item:last-child {
  padding-bottom: 0;
}

.timeline-dot {
  display: none;
}

.timeline-item:hover .timeline-dot {
  display: none;
}

.timeline-content {
  background: var(--color-bg-card);
  padding: 1.25rem 1.5rem;
  border-radius: 12px;
  box-shadow: var(--shadow-soft);
  transition: all var(--transition-normal);
}

.timeline-item:hover .timeline-content {
  box-shadow: var(--shadow-card);
  transform: translateY(-2px);
}

.timeline-time {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  color: var(--color-primary);
  display: block;
  margin-bottom: 0.25rem;
}

.timeline-event {
  color: var(--color-text);
  font-size: 0.95rem;
}

/* ============================================
   Dresscode Section
   ============================================ */
.dresscode {
  background: 
    linear-gradient(135deg, rgba(45, 90, 61, 0.03) 0%, rgba(139, 41, 66, 0.03) 100%),
    var(--color-bg-alt);
}

.dresscode-card {
  max-width: 500px;
  margin: 0 auto;
  text-align: center;
  background: var(--color-bg-card);
  padding: 3rem 2rem;
  border-radius: 20px;
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
}

.dresscode-decoration {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
}

.dresscode-text {
  font-family: var(--font-serif);
  font-size: clamp(1.125rem, 2.5vw, 1.35rem);
  color: var(--color-text);
  line-height: 1.8;
  font-style: italic;
}

.dresscode-emoji {
  font-size: 3rem;
  margin-top: 1.5rem;
  animation: wiggle 2s ease-in-out infinite;
}

@keyframes wiggle {
  0%, 100% { transform: rotate(-5deg); }
  50% { transform: rotate(5deg); }
}

/* ============================================
   RSVP Section
   ============================================ */
.rsvp {
  background: var(--color-bg);
}

.rsvp-intro {
  text-align: center;
  font-family: var(--font-serif);
  font-size: clamp(1.1rem, 2.5vw, 1.35rem);
  color: var(--color-text);
  line-height: 1.8;
  max-width: 500px;
  margin: 0 auto 2.5rem;
}

.rsvp-form {
  max-width: 400px;
  margin: 0 auto;
}

/* Honeypot - hidden from users */
.honeypot-field {
  position: absolute;
  left: -9999px;
  top: -9999px;
  opacity: 0;
  height: 0;
  width: 0;
  overflow: hidden;
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-label {
  display: block;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: 0.5rem;
}

.form-input {
  width: 100%;
  padding: 1rem 1.25rem;
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--color-text);
  background: var(--color-bg-card);
  border: 2px solid #E8E0DA;
  border-radius: 12px;
  transition: all var(--transition-normal);
  outline: none;
}

.form-input::placeholder {
  color: var(--color-text-muted);
}

.form-input:focus {
  border-color: var(--color-primary-light);
  box-shadow: 0 0 0 4px rgba(139, 41, 66, 0.1);
}

.form-input.error {
  border-color: #E74C3C;
}

.form-error {
  display: block;
  font-size: 0.8rem;
  color: #E74C3C;
  margin-top: 0.5rem;
  min-height: 1.2em;
}

.btn-loading {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.spinner {
  width: 18px;
  height: 18px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.form-message {
  text-align: center;
  margin-top: 1.5rem;
  padding: 1rem;
  border-radius: 12px;
  font-size: 0.95rem;
  min-height: 3.5rem;
}

.form-message.success {
  background: rgba(45, 90, 61, 0.1);
  color: var(--color-secondary);
  animation: fadeIn 0.3s ease;
}

.form-message.error {
  background: rgba(231, 76, 60, 0.1);
  color: #E74C3C;
  animation: shake 0.5s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

/* ============================================
   Contacts Section
   ============================================ */
.contacts {
  background: var(--color-bg-alt);
}

.contacts-card {
  max-width: 400px;
  margin: 0 auto;
  text-align: center;
  background: var(--color-bg-card);
  padding: 3rem 2rem;
  border-radius: 20px;
  box-shadow: var(--shadow-card);
}

.contacts-intro {
  color: var(--color-text-light);
  margin-bottom: 1.5rem;
}

.coordinator {
  margin-bottom: 0.5rem;
}

.coordinator-name {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  color: var(--color-text);
  margin-bottom: 0.25rem;
}

.coordinator-role {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  margin-bottom: 0.5rem;
}

.coordinator-phone {
  font-size: 1.25rem;
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 500;
  transition: color var(--transition-fast);
}

.coordinator-phone:hover {
  color: var(--color-primary-dark);
}

/* ============================================
   Footer
   ============================================ */
.footer {
  background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
  color: white;
  padding: 3rem 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.footer-decoration {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, 
    var(--color-accent-gold), 
    var(--color-secondary-light), 
    var(--color-accent-gold)
  );
}

.footer-names {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 4vw, 2rem);
  margin-bottom: 0.5rem;
  opacity: 0.95;
}

.footer-date {
  font-size: 1rem;
  opacity: 0.8;
  letter-spacing: 0.1em;
}

/* ============================================
   Responsive Design
   ============================================ */
@media (max-width: 768px) {
  :root {
    --section-padding: 60px;
    --container-padding: 20px;
  }
  
  .hero-roses {
    width: 200px;
    height: 280px;
    opacity: 0.4;
  }
  
  .hero-roses-left {
    left: -60px;
  }
  
  .hero-roses-right {
    right: -60px;
  }
  
  .countdown {
    gap: 0.75rem;
  }
  
  .countdown-separator {
    display: none;
  }
  
  .countdown-item {
    background: rgba(255, 255, 255, 0.5);
    padding: 0.75rem;
    border-radius: 12px;
    min-width: 70px;
  }
  
  .leaf-decoration {
    display: none;
  }
  
  .timeline-wrapper {
    padding-left: 0;
  }
  
  .scroll-indicator {
    bottom: 20px;
  }
}

@media (max-width: 480px) {
  .hero-names {
    font-size: 2.25rem;
  }
  
  .hero-roses {
    width: 150px;
    height: 210px;
    opacity: 0.3;
  }
  
  .btn {
    width: 100%;
    padding: 1rem 1.5rem;
  }
  
  .dresscode-card,
  .contacts-card {
    padding: 2rem 1.5rem;
  }
}

/* ============================================
   Print Styles
   ============================================ */
@media print {
  .hero {
    min-height: auto;
    padding: 2rem;
  }
  
  .countdown,
  .scroll-indicator,
  .rsvp-form,
  .btn {
    display: none;
  }
  
  .section {
    padding: 2rem 0;
    break-inside: avoid;
  }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  html {
    scroll-behavior: auto;
  }
}