/* ========================================================
   HAPPY BIRTHDAY LENA — Botanical Elegance
   Dusty Rose · Sage · Lavender · Warm Cream · Soft Gold
   ======================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&family=Jost:wght@300;400;500&family=Caveat:wght@400;600&display=swap');

/* ---- Design Tokens ---- */
:root {
  --rose:          #c4827a;
  --rose-light:    #f0d5d3;
  --rose-dark:     #9e5d56;
  --sage:          #7fa480;
  --sage-light:    #d4e5d5;
  --lavender:      #a896c0;
  --lavender-light:#e5dff0;
  --gold:          #c9a84c;
  --gold-light:    #f5ecd4;
  --cream:         #fdf9f5;
  --cream-deep:    #f5ede3;
  --dark:          #3c2f2a;
  --mid:           #7a6259;
  --light:         #b09a94;

  --ff-display:    'Cormorant Garamond', Georgia, serif;
  --ff-body:       'Jost', sans-serif;
  --ff-hand:       'Caveat', cursive;

  --max-w:         1200px;
  --radius:        16px;
  --radius-sm:     8px;
  --shadow-soft:   0 4px 24px rgba(60,47,42,.08);
  --shadow-card:   0 8px 40px rgba(60,47,42,.13);
  --shadow-hover:  0 20px 56px rgba(60,47,42,.2);
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }

body {
  font-family: var(--ff-body);
  background: var(--cream);
  color: var(--dark);
  line-height: 1.7;
  overflow-x: hidden;
}

/* Ambient gradient background */
body::before {
  content: '';
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse 60% 50% at 15% 15%, rgba(196,130,122,.07) 0%, transparent 55%),
    radial-gradient(ellipse 50% 60% at 85% 80%, rgba(127,164,128,.07) 0%, transparent 55%),
    radial-gradient(ellipse 40% 40% at 85% 15%, rgba(168,150,192,.05) 0%, transparent 45%);
}

/* ---- Typography ---- */
h1,h2,h3 { font-family: var(--ff-display); font-weight: 400; line-height: 1.15; }
h1  { font-size: clamp(3.5rem, 9vw, 9rem); letter-spacing: -.02em; }
h2  { font-size: clamp(2rem,   4vw, 3.2rem); }
h3  { font-size: clamp(1.2rem, 2vw, 1.6rem); }

/* ---- Utility ---- */
.container { max-width: var(--max-w); margin: 0 auto; padding: 0 2rem; position: relative; z-index: 1; }
.serif-italic { font-family: var(--ff-display); font-style: italic; }

/* ========================================================
   NAV
   ======================================================== */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem 2.5rem;
  background: rgba(253,249,245,.88);
  backdrop-filter: blur(16px) saturate(1.4);
  border-bottom: 1px solid rgba(196,130,122,.15);
}

.nav-logo {
  font-family: var(--ff-display); font-size: 1.35rem; font-weight: 500;
  color: var(--rose-dark); letter-spacing: .06em; text-decoration: none;
}

.nav-links { display: flex; gap: 2rem; list-style: none; }
.nav-links a {
  font-size: .78rem; font-weight: 500; letter-spacing: .1em;
  text-transform: uppercase; color: var(--mid); text-decoration: none;
  transition: color .2s;
}
.nav-links a:hover { color: var(--rose); }

/* ========================================================
   HERO
   ======================================================== */
#hero {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 10rem 2rem 7rem;
  position: relative; overflow: hidden;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cpath d='M 0,100 C 50,160 150,40 200,100' fill='none' stroke='%237fa480' stroke-width='2.5' opacity='0.7'/%3E%3Cpath d='M 0,100 C 50,40 150,160 200,100' fill='none' stroke='%237fa480' stroke-width='2.5' opacity='0.7'/%3E%3Cpath d='M 100,0 C 160,50 40,150 100,200' fill='none' stroke='%237fa480' stroke-width='2.5' opacity='0.7'/%3E%3Cpath d='M 100,0 C 40,50 160,150 100,200' fill='none' stroke='%237fa480' stroke-width='2.5' opacity='0.7'/%3E%3Cpath d='M 0,105 C 50,165 150,45 200,105' fill='none' stroke='%23c9a84c' stroke-width='0.75' opacity='0.8'/%3E%3Cpath d='M 0,95 C 50,35 150,155 200,95' fill='none' stroke='%23c9a84c' stroke-width='0.75' opacity='0.8'/%3E%3Cpath d='M 105,0 C 165,50 45,150 105,200' fill='none' stroke='%23c9a84c' stroke-width='0.75' opacity='0.8'/%3E%3Cpath d='M 95,0 C 35,50 155,150 95,200' fill='none' stroke='%23c9a84c' stroke-width='0.75' opacity='0.8'/%3E%3Cg transform='translate(50,50)'%3E%3Cpath d='M0,0 Q 15,-15 20,0 Q 15,15 0,0 Z' fill='%237fa480' opacity='0.5'/%3E%3Cpath d='M0,0 Q -15,-15 -20,0 Q -15,15 0,0 Z' fill='%237fa480' opacity='0.5'/%3E%3Ccircle cx='0' cy='0' r='3' fill='%23c9a84c' opacity='0.9'/%3E%3C/g%3E%3Cg transform='translate(150,50)'%3E%3Cpath d='M0,0 Q 15,-15 20,0 Q 15,15 0,0 Z' fill='%237fa480' opacity='0.5'/%3E%3Cpath d='M0,0 Q -15,-15 -20,0 Q -15,15 0,0 Z' fill='%237fa480' opacity='0.5'/%3E%3Ccircle cx='0' cy='0' r='3' fill='%23c9a84c' opacity='0.9'/%3E%3C/g%3E%3Cg transform='translate(50,150)'%3E%3Cpath d='M0,0 Q 15,-15 20,0 Q 15,15 0,0 Z' fill='%237fa480' opacity='0.5'/%3E%3Cpath d='M0,0 Q -15,-15 -20,0 Q -15,15 0,0 Z' fill='%237fa480' opacity='0.5'/%3E%3Ccircle cx='0' cy='0' r='3' fill='%23c9a84c' opacity='0.9'/%3E%3C/g%3E%3Cg transform='translate(150,150)'%3E%3Cpath d='M0,0 Q 15,-15 20,0 Q 15,15 0,0 Z' fill='%237fa480' opacity='0.5'/%3E%3Cpath d='M0,0 Q -15,-15 -20,0 Q -15,15 0,0 Z' fill='%237fa480' opacity='0.5'/%3E%3Ccircle cx='0' cy='0' r='3' fill='%23c9a84c' opacity='0.9'/%3E%3C/g%3E%3Cg transform='translate(100,0)'%3E%3Ccircle cx='0' cy='0' r='14' fill='%23a896c0' opacity='0.25'/%3E%3Cpath d='M0,0 C-12,-15 12,-15 0,0 Z M0,0 C-15,-6 -15,12 0,0 Z M0,0 C15,-6 15,12 0,0 Z M0,0 C-12,15 12,15 0,0 Z' fill='%23a896c0' opacity='0.9'/%3E%3Ccircle cx='0' cy='0' r='4' fill='%23c9a84c'/%3E%3C/g%3E%3Cg transform='translate(100,200)'%3E%3Ccircle cx='0' cy='0' r='14' fill='%23a896c0' opacity='0.25'/%3E%3Cpath d='M0,0 C-12,-15 12,-15 0,0 Z M0,0 C-15,-6 -15,12 0,0 Z M0,0 C15,-6 15,12 0,0 Z M0,0 C-12,15 12,15 0,0 Z' fill='%23a896c0' opacity='0.9'/%3E%3Ccircle cx='0' cy='0' r='4' fill='%23c9a84c'/%3E%3C/g%3E%3Cg transform='translate(0,100)'%3E%3Ccircle cx='0' cy='0' r='14' fill='%23a896c0' opacity='0.25'/%3E%3Cpath d='M0,0 C-12,-15 12,-15 0,0 Z M0,0 C-15,-6 -15,12 0,0 Z M0,0 C15,-6 15,12 0,0 Z M0,0 C-12,15 12,15 0,0 Z' fill='%23a896c0' opacity='0.9'/%3E%3Ccircle cx='0' cy='0' r='4' fill='%23c9a84c'/%3E%3C/g%3E%3Cg transform='translate(200,100)'%3E%3Ccircle cx='0' cy='0' r='14' fill='%23a896c0' opacity='0.25'/%3E%3Cpath d='M0,0 C-12,-15 12,-15 0,0 Z M0,0 C-15,-6 -15,12 0,0 Z M0,0 C15,-6 15,12 0,0 Z M0,0 C-12,15 12,15 0,0 Z' fill='%23a896c0' opacity='0.9'/%3E%3Ccircle cx='0' cy='0' r='4' fill='%23c9a84c'/%3E%3C/g%3E%3Cg transform='translate(100,100)'%3E%3Ccircle cx='0' cy='0' r='28' fill='%23c4827a' opacity='0.15'/%3E%3Cpath d='M0,-10 C 30,-30 40,0 25,15 C 30,-5 15,-15 0,-10 Z' fill='%237fa480' opacity='0.85'/%3E%3Cpath d='M0,-10 C -30,-30 -40,0 -25,15 C -30,-5 -15,-15 0,-10 Z' fill='%237fa480' opacity='0.85'/%3E%3Cpath d='M0,10 C 30,30 40,0 25,-15 C 30,5 15,15 0,10 Z' fill='%237fa480' opacity='0.85'/%3E%3Cpath d='M0,10 C -30,30 -40,0 -25,-15 C -30,5 -15,15 0,10 Z' fill='%237fa480' opacity='0.85'/%3E%3Cpath d='M0,-20 Q 25,-20 20,5 Q 0,15 -20,5 Q -25,-20 0,-20 Z' fill='%23c4827a' opacity='0.9'/%3E%3Cpath d='M0,20 Q 25,20 20,-5 Q 0,-15 -20,-5 Q -25,20 0,20 Z' fill='%23c4827a' opacity='0.8'/%3E%3Cpath d='M-20,0 Q -20,25 5,20 Q 15,0 5,-20 Q -20,-25 -20,0 Z' fill='%23c4827a' opacity='0.9'/%3E%3Cpath d='M20,0 Q 20,25 -5,20 Q -15,0 -5,-20 Q 20,-25 20,0 Z' fill='%23c4827a' opacity='0.8'/%3E%3Ccircle cx='0' cy='0' r='5' fill='%23c9a84c'/%3E%3Ccircle cx='0' cy='0' r='2' fill='%23fdf9f5'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 100px;
  background-color: rgba(253,249,245,0.85);
  background-blend-mode: lighten;
}

/* Floating botanical SVG corners */
.hero-botanical { position: absolute; pointer-events: none; }
.hero-botanical-tl { top: 0;  left: 0;  width: clamp(160px, 22vw, 280px); opacity: .22; }
.hero-botanical-tr { top: 0;  right: 0; width: clamp(160px, 22vw, 280px); opacity: .22; transform: scaleX(-1); }
.hero-botanical-bl { bottom: 0; left: 0;  width: clamp(120px, 16vw, 200px); opacity: .15; transform: scaleY(-1); }
.hero-botanical-br { bottom: 0; right: 0; width: clamp(120px, 16vw, 200px); opacity: .15; transform: scale(-1,-1); }

.hero-eyebrow {
  font-family: var(--ff-body); font-size: .75rem; font-weight: 500;
  letter-spacing: .3em; text-transform: uppercase; color: var(--rose);
  margin-bottom: 1.25rem;
  opacity: 0; animation: fadeUp .8s ease forwards .3s;
}

.hero-name {
  font-size: clamp(4.5rem, 14vw, 11rem); font-weight: 300; line-height: .85;
  color: var(--dark); margin-bottom: .6rem;
  opacity: 0; animation: fadeUp .9s ease forwards .6s;
}
.hero-name .italic-line { display: block; font-style: italic; color: var(--rose); }

.hero-date {
  font-family: var(--ff-display); font-size: 1.2rem; font-style: italic;
  color: var(--mid); margin-bottom: 2.5rem;
  opacity: 0; animation: fadeUp .8s ease forwards .95s;
}

.hero-divider {
  width: 100px; height: 1px;
  background: linear-gradient(to right, transparent, var(--rose), transparent);
  margin: 0 auto 2.5rem;
  opacity: 0; animation: fadeUp .8s ease forwards 1.15s;
}

.hero-tagline {
  font-family: var(--ff-display); font-size: 1.15rem; font-style: italic;
  color: var(--mid); max-width: 520px; margin: 0 auto 3.5rem;
  opacity: 0; animation: fadeUp .8s ease forwards 1.35s;
}

.hero-cta {
  display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;
  opacity: 0; animation: fadeUp .8s ease forwards 1.55s;
}

/* Buttons */
.btn {
  font-family: var(--ff-body); font-size: .8rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
  padding: .85rem 2.2rem; border-radius: 100px; border: none;
  cursor: pointer; display: inline-block; transition: all .28s ease;
}
.btn-primary {
  background: var(--rose); color: white;
  box-shadow: 0 4px 18px rgba(196,130,122,.35);
}
.btn-primary:hover { background: var(--rose-dark); transform: translateY(-3px); box-shadow: 0 8px 28px rgba(196,130,122,.45); }
.btn-secondary {
  background: transparent; color: var(--dark);
  border: 1.5px solid rgba(60,47,42,.2);
}
.btn-secondary:hover { border-color: var(--rose); color: var(--rose); transform: translateY(-3px); }

/* Scroll hint */
.scroll-hint {
  position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  opacity: 0; animation: fadeUp .8s ease forwards 2.1s;
}
.scroll-hint span { font-size: .65rem; letter-spacing: .18em; text-transform: uppercase; color: var(--light); }
.scroll-line { width: 1px; height: 44px; background: linear-gradient(to bottom, var(--rose), transparent); animation: scrollPulse 2.2s ease infinite; }

/* ========================================================
   PHOTO FRAME SECTION
   ======================================================== */
#photos { padding: 5rem 2rem 7rem; }

.photos-inner { display: flex; flex-direction: column; align-items: center; gap: 2rem; }

.photo-frame-wrapper { position: relative; display: inline-block; }

/* Frame corners */
.frame-corner { position: absolute; width: 80px; pointer-events: none; z-index: 3; }
.frame-corner-tl { top: -24px; left: -24px; }
.frame-corner-tr { top: -24px; right: -24px; transform: scaleX(-1); }
.frame-corner-bl { bottom: -24px; left: -24px; transform: scaleY(-1); }
.frame-corner-br { bottom: -24px; right: -24px; transform: scale(-1,-1); }

.photo-frame {
  width: min(560px, 92vw); height: min(400px, 60vw);
  border-radius: 20px; overflow: hidden; position: relative;
  box-shadow:
    0 0 0 6px var(--cream),
    0 0 0 8px var(--gold),
    0 0 0 14px var(--cream),
    var(--shadow-card);
}

/* Blurred backdrop — fills frame, any aspect ratio */
.photo-slide-bg {
  position: absolute; inset: -8px;
  width: calc(100% + 16px); height: calc(100% + 16px);
  object-fit: cover;
  filter: blur(18px) saturate(.7) brightness(.85);
  opacity: 0; transition: opacity 1.4s ease;
  transform: scale(1.05);
}
.photo-slide-bg.active { opacity: 1; }

/* Sharp foreground image — contained so nothing is cropped */
.photo-slide {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: contain;
  opacity: 0; transition: opacity 1.4s ease;
}
.photo-slide.active { opacity: 1; }

/* When no photos: show placeholder gradient */
.photo-placeholder {
  position: absolute; inset: 0;
  background: linear-gradient(145deg, var(--rose-light), var(--lavender-light), var(--sage-light));
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1rem; color: var(--mid);
}
.photo-placeholder .placeholder-icon { font-size: 3rem; }
.photo-placeholder p { font-family: var(--ff-display); font-style: italic; font-size: 1.1rem; }

/* Dots */
.frame-dots { display: flex; gap: .5rem; justify-content: center; }
.dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--rose-light); border: none; padding: 0; cursor: pointer;
  transition: all .3s;
}
.dot.active { background: var(--rose); width: 22px; border-radius: 3px; }

/* ========================================================
   ABOUT SECTION
   ======================================================== */
#about {
  padding: 7rem 2rem;
  background: linear-gradient(160deg, var(--cream-deep) 0%, var(--cream) 60%);
}

.about-inner {
  display: grid; grid-template-columns: 1fr 1.6fr;
  gap: 6rem; align-items: center;
  max-width: 1020px; margin: 0 auto;
}

.about-quote-block { position: relative; padding-left: 2rem; }

.about-quote-block::before {
  content: '"'; font-family: var(--ff-display); font-size: 10rem; line-height: 1;
  color: var(--rose-light); position: absolute; top: -3rem; left: -1.5rem;
  pointer-events: none;
}

.about-quote {
  font-family: var(--ff-display); font-size: clamp(1.6rem, 2.5vw, 2.2rem);
  font-style: italic; font-weight: 300; color: var(--rose-dark); line-height: 1.45;
}
.about-quote-attr { font-size: .8rem; color: var(--light); letter-spacing: .1em; margin-top: 1.2rem; }

.about-body { display: flex; flex-direction: column; gap: .9rem; }
.about-body h2 { margin-bottom: .3rem; }
.about-body p { color: var(--mid); font-size: 1.02rem; }

.tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
.tag {
  font-size: .75rem; font-weight: 500; letter-spacing: .06em;
  padding: .3rem .85rem; border-radius: 100px; background: white; border: 1.5px solid;
}
.tag-rose     { color: var(--rose);     border-color: var(--rose-light); }
.tag-sage     { color: var(--sage);     border-color: var(--sage-light); }
.tag-lavender { color: var(--lavender); border-color: var(--lavender-light); }
.tag-gold     { color: var(--gold);     border-color: var(--gold-light); }

/* ========================================================
   BOTANICAL DIVIDER
   ======================================================== */
.section-divider {
  display: flex; align-items: center; justify-content: center;
  gap: 1.5rem; padding: 0 2rem;
}
.divider-line {
  flex: 1; max-width: 280px; height: 1px;
  background: linear-gradient(to right, transparent, var(--rose-light), transparent);
}
.divider-center { color: var(--rose); opacity: .6; }

/* ========================================================
   SECTION HEADER (shared)
   ======================================================== */
.section-header { text-align: center; margin-bottom: 3.5rem; }
.section-header .eyebrow {
  font-size: .72rem; font-weight: 500; letter-spacing: .28em;
  text-transform: uppercase; color: var(--rose); margin-bottom: .75rem;
}
.section-header h2 { margin-bottom: .8rem; }
.section-header .sub { color: var(--mid); max-width: 500px; margin: 0 auto; font-size: 1rem; }

/* ========================================================
   LEAVE A MESSAGE FORM
   ======================================================== */
#leave-message { padding: 7rem 2rem; }

.form-card {
  max-width: 700px; margin: 0 auto; background: white;
  border-radius: 24px; padding: 3.5rem;
  box-shadow: var(--shadow-card);
  border: 1px solid rgba(196,130,122,.1);
}

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }

.form-group { display: flex; flex-direction: column; gap: .45rem; margin-bottom: 1.35rem; }
.form-group label {
  font-size: .72rem; font-weight: 500; letter-spacing: .1em;
  text-transform: uppercase; color: var(--mid);
}

.form-group input,
.form-group select,
.form-group textarea {
  font-family: var(--ff-body); font-size: .98rem; color: var(--dark);
  background: var(--cream); border: 1.5px solid rgba(60,47,42,.1);
  border-radius: var(--radius-sm); padding: .8rem 1rem;
  transition: border-color .2s, box-shadow .2s, background .2s;
  outline: none; resize: vertical;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--rose); background: white;
  box-shadow: 0 0 0 3px rgba(196,130,122,.12);
}
.form-group textarea { min-height: 140px; }
.form-group select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237a6259' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.5rem; }

/* Upload zone */
.upload-zone {
  border: 2px dashed rgba(196,130,122,.3); border-radius: var(--radius-sm);
  padding: 1.75rem; text-align: center; cursor: pointer; transition: all .2s;
  background: var(--cream);
}
.upload-zone:hover, .upload-zone.over { border-color: var(--rose); background: rgba(196,130,122,.04); }
.upload-zone input[type="file"] { display: none; }
.upload-zone .icon { font-size: 1.6rem; margin-bottom: .5rem; }
.upload-zone .label { font-size: .9rem; color: var(--mid); }
.upload-zone .label strong { color: var(--rose); text-decoration: underline; cursor: pointer; }
.upload-zone .hint { font-size: .75rem; color: var(--light); margin-top: .3rem; }

.upload-preview {
  display: none; max-width: 100%; max-height: 160px; border-radius: var(--radius-sm);
  margin-top: 1rem; object-fit: cover;
}
.upload-name { font-size: .8rem; color: var(--sage); margin-top: .5rem; display: none; }

.form-actions { display: flex; justify-content: flex-end; margin-top: .5rem; }
.btn-submit { font-size: .9rem; padding: .95rem 2.8rem; position: relative; overflow: hidden; }

.spinner { display: none; width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.35); border-top-color: white; border-radius: 50%; animation: spin .7s linear infinite; margin-left: .6rem; vertical-align: middle; }

/* Success */
#form-success {
  display: none; text-align: center; padding: 2.5rem 1rem;
}
#form-success .success-icon { font-size: 3.5rem; margin-bottom: 1rem; }
#form-success h3 { font-family: var(--ff-display); font-size: 2.2rem; margin-bottom: .6rem; }
#form-success p { color: var(--mid); }

/* ========================================================
   MESSAGE WALL
   ======================================================== */
#message-wall { padding: 7rem 2rem; background: var(--cream-deep); }

.wall-grid {
  columns: 3; column-gap: 1.5rem;
  max-width: var(--max-w); margin: 0 auto;
}

.message-card {
  break-inside: avoid; margin-bottom: 1.5rem; background: white;
  border-radius: var(--radius); padding: 1.8rem; position: relative;
  overflow: hidden; box-shadow: var(--shadow-soft);
  transform: rotate(var(--tilt, 0deg));
  transition: transform .3s ease, box-shadow .3s ease;
  animation: cardAppear .5s ease backwards;
}
.message-card:hover {
  transform: rotate(0deg) translateY(-5px);
  box-shadow: var(--shadow-hover); z-index: 2;
}
.message-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 3px; background: var(--card-color, var(--rose));
}

/* Notecard textures — cycle through 3 per Gemini designs */
.message-card:nth-child(3n+1)::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: var(--radius); z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M0,100 Q50,50 100,0' fill='none' stroke='%23c4827a' stroke-width='2'/%3E%3Ccircle cx='50' cy='50' r='15' fill='%23a896c0'/%3E%3Cpath d='M50,50 Q20,30 30,10 Z' fill='%237fa480'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: top right; background-size: 60%; opacity: .07;
}
.message-card:nth-child(3n+2)::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: var(--radius); z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M20,0 L40,20 L20,40 L0,20 Z' fill='none' stroke='%23c9a84c' stroke-width='1'/%3E%3C/svg%3E");
  background-repeat: repeat; opacity: .07;
}
.message-card:nth-child(3n)::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: var(--radius); z-index: 0;
  background: radial-gradient(ellipse at 30% 70%, rgba(196,130,122,.08) 0%, transparent 60%),
              radial-gradient(ellipse at 70% 20%, rgba(168,150,192,.07) 0%, transparent 50%);
}
.message-card > * { position: relative; z-index: 1; }

.card-name { font-family: var(--ff-display); font-size: 1.15rem; font-weight: 500; color: var(--dark); margin-bottom: .12rem; }
.card-relationship { font-size: .7rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--card-color, var(--rose)); margin-bottom: 1rem; }
.card-message { font-family: var(--ff-hand); font-size: 1.1rem; color: var(--mid); line-height: 1.65; }
.card-photo { width: 100%; border-radius: var(--radius-sm); margin-top: 1rem; max-height: 200px; object-fit: cover; }
.card-date { font-size: .68rem; color: var(--light); margin-top: .8rem; display: block; }

.wall-state { text-align: center; padding: 5rem 2rem; font-family: var(--ff-display); font-style: italic; font-size: 1.3rem; color: var(--mid); }

/* ========================================================
   FOOTER
   ======================================================== */
footer {
  background: var(--dark); padding: 4rem 2rem;
  text-align: center; position: relative; overflow: hidden;
}
footer::before {
  content: 'Lena'; font-family: var(--ff-display); font-size: clamp(6rem, 20vw, 16rem);
  font-weight: 300; color: rgba(255,255,255,.03); position: absolute;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  white-space: nowrap; pointer-events: none;
}
.footer-inner { position: relative; z-index: 1; }
.footer-name { font-family: var(--ff-display); font-size: 2.2rem; font-weight: 300; color: white; margin-bottom: .5rem; }
.footer-name span { font-style: italic; color: var(--rose-light); }
footer p { font-size: .82rem; color: rgba(255,255,255,.4); }
footer .footer-heart { color: var(--rose-light); }

/* ========================================================
   ANIMATIONS
   ======================================================== */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes scrollPulse {
  0%, 100% { opacity: .35; height: 44px; }
  50%       { opacity: .9;  height: 50px; }
}
@keyframes cardAppear {
  from { opacity: 0; transform: translateY(18px) rotate(var(--tilt, 0deg)); }
  to   { opacity: 1; transform: translateY(0)    rotate(var(--tilt, 0deg)); }
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ========================================================
   RESPONSIVE
   ======================================================== */
@media (max-width: 860px) {
  .about-inner { grid-template-columns: 1fr; gap: 3rem; }
  .wall-grid { columns: 2; }
  .form-row { grid-template-columns: 1fr; }
  .form-card { padding: 2.5rem 1.75rem; }
  nav { padding: 1rem 1.5rem; }
  .nav-links { gap: 1.5rem; }
}
@media (max-width: 540px) {
  .wall-grid { columns: 1; }
  .form-card { padding: 2rem 1.25rem; }
  nav .nav-links { display: none; }
}