/* EverAfter Wedding - Modern Elegant Landing Page */
:root{
  --bg:#0f0f12;
  --bg-2:#15161b;
  --card:#171821;
  --text:#e9ecf1;
  --muted:#b9c0cc;
  --primary:#ffd700; /* rich gold */
  --primary-2:#b8860b; /* dark gold */
  --accent:#fff3c4; /* warm light */
  --shadow:0 20px 60px rgba(0,0,0,.35);
  --radius:20px;
}
/* Keep hero text above the ornamental overlay */
.hero-content{ position:relative; z-index:6 }
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif; color:var(--text);
  background:linear-gradient(180deg,#0d0e12 0%, #131520 60%, #0f0f12 100%);
  position:relative; /* allow decorative pseudo-elements */
}

/* Decorative background layers */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:
    /* soft gold glows */
    radial-gradient(800px 520px at 12% 8%, rgba(212,175,55,.12), transparent 62%),
    radial-gradient(900px 520px at 88% 16%, rgba(255,215,0,.10), transparent 64%),
    radial-gradient(900px 520px at 18% 110%, rgba(184,134,11,.12), transparent 60%);
  background-size:
    100% 100%, 100% 100%, 100% 100%;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: top center, top center, top center;
  mix-blend-mode: soft-light;
}
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:5;
  /* Ornamental tile (visible) + subtle noise */
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 240 240'><g fill='none' stroke='%23ffd700' stroke-opacity='0.35' stroke-width='1'><path d='M120 10 C90 10, 70 30, 70 60 C70 90, 95 100, 120 120 C145 100, 170 90, 170 60 C170 30, 150 10, 120 10 Z'/><path d='M20 120 C20 90, 40 70, 70 70 M70 70 C40 70, 20 50, 20 20'/><path d='M220 120 C220 90, 200 70, 170 70 M170 70 C200 70, 220 50, 220 20'/><path d='M20 220 C20 190, 40 170, 70 170 M70 170 C40 170, 20 150, 20 120'/><path d='M220 220 C220 190, 200 170, 170 170 M170 170 C200 170, 220 150, 220 120'/><path d='M120 230 C95 210, 70 200, 70 180 M120 230 C145 210, 170 200, 170 180'/></g></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='120' height='120' filter='url(%23n)' opacity='0.9'/></svg>");
  background-size: 200px 200px, 120px 120px;
  background-repeat: repeat, repeat;
  background-position: top center, top center;
  opacity:.32; /* toned-down visibility */
  background-blend-mode: screen; /* brighten over dark bg */
  /* Show only at the top portion */
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 50vh, rgba(0,0,0,0) 75vh);
  mask-image: linear-gradient(to bottom, #000 0, #000 50vh, rgba(0,0,0,0) 75vh);
  -webkit-mask-repeat: no-repeat; mask-repeat:no-repeat;
}

/* Fallback if mask-image isn't supported */
@supports not (mask-image: linear-gradient(#000, transparent)){
  body::after{ clip-path: polygon(0 0, 100% 0, 100% 60vh, 0 45vh); }
}
img{max-width:100%; display:block}
.container{width:min(1120px, 92%); margin-inline:auto}

/* Utilities */
.section{padding:96px 0}
.section-alt{padding:96px 0; background:radial-gradient(1000px 600px at 100% -100%, rgba(255,255,255,.06), transparent 60%),
  linear-gradient(180deg, #12131a, #12131a)}
.section-head{ text-align:center; margin-bottom:36px}
.section-head.left{text-align:left}
.section-head .sub{color:var(--muted)}
.eyebrow{letter-spacing:.2em; text-transform:uppercase; color:var(--primary); font-weight:600; font-size:.85rem}
h1,h2,h3,h4{margin:0 0 12px 0; font-family:"Playfair Display", Georgia, serif}
h1.display{font-size: clamp(40px, 6vw, 72px); line-height:1.05; text-shadow: 0 12px 40px rgba(246,193,207,.2)}
h2{font-size: clamp(28px, 3.5vw, 44px)}
.lead{color:var(--muted); font-size: clamp(16px, 1.5vw, 18px)}

/* Romantic divider under section titles */
.section-head h2::after{
  content:"\2764"; /* heart */
  display:block; margin:8px auto 0; width:40px; text-align:center; color:var(--primary);
  filter: drop-shadow(0 6px 16px rgba(255,122,168,.35));
}

/* Header */
.site-header{ position:sticky; top:0; z-index:20; backdrop-filter:saturate(180%) blur(8px); background:rgba(18,19,26,.6); border-bottom:1px solid rgba(255,255,255,.06)}
.header-inner{ display:flex; align-items:center; justify-content:space-between; padding:16px 0}
.logo{ font-weight:800; color:#fff; text-decoration:none; letter-spacing:.02em; font-size:1.3rem}
.logo span{color:var(--primary)}
.nav{ display:flex; align-items:center; gap:24px}
.nav a{ color:#dbe1ea; text-decoration:none; font-weight:500; opacity:.9}
.nav a:hover{ color:#fff}
.nav .btn-sm{ padding:10px 14px; border-radius:999px}
.hamburger{display:none; background:none; border:0; color:#fff; width:40px; height:40px; border-radius:10px; position:relative}
.hamburger span{position:absolute; left:10px; right:10px; height:2px; background:#fff; transition:.3s}
.hamburger span:nth-child(1){top:12px}
.hamburger span:nth-child(2){top:19px}
.hamburger span:nth-child(3){top:26px}

/* Buttons */
.btn{ display:inline-flex; align-items:center; gap:10px; border:1px solid rgba(255,255,255,.12); color:#fff; padding:14px 22px; border-radius:999px; text-decoration:none; font-weight:700; transition:.25s; box-shadow:none; position:relative; overflow:hidden}
.btn:hover{ transform:translateY(-2px)}
.btn-primary{ background:linear-gradient(135deg, var(--primary), var(--primary-2)); border-color:transparent; color:#1a1b22; box-shadow: 0 12px 36px rgba(212,175,55,.28)}
.btn-primary::after{ content:""; position:absolute; inset:-20% -60%; background: linear-gradient(120deg, rgba(255,255,255,.0) 0%, rgba(255,255,255,.35) 50%, rgba(255,255,255,.0) 100%); transform: translateX(-120%) rotate(18deg); transition: transform .6s ease }
.btn-primary:hover::after{ transform: translateX(120%) rotate(18deg) }
.btn-outline{ background:transparent}
.btn-link{ color:var(--primary); border:0; padding:0 2px}

/* Hero */
.hero{ position:relative; min-height:84vh; display:grid; place-items:center; overflow:hidden}
.hero-media{ position:absolute; inset:0; z-index:-1}
.hero-media img{ width:100%; height:100%; object-fit:cover; filter:brightness(.45) saturate(1.1)}
.romance-overlay{ position:absolute; inset:0; pointer-events:none; background:
  radial-gradient(900px 460px at 18% -12%, rgba(184,134,11,.32), transparent 62%),
  radial-gradient(700px 360px at 82% 112%, rgba(255,215,0,.26), transparent 62%);
}
.hero-content{ text-align:center; padding:120px 0 80px}
.romance-title{ font-family:"Great Vibes", cursive; font-weight:400; line-height:1.05; letter-spacing:.02em; text-shadow:0 14px 40px rgba(212,175,55,.28), 0 2px 0 rgba(0,0,0,.2)}
.hero-cta{ margin-top:24px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap}
.hero-badges{ display:flex; gap:14px; justify-content:center; margin-top:28px; flex-wrap:wrap}
.hero-badges>div{ background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.1); padding:10px 14px; border-radius:999px; color:#fff; font-weight:600}
.scroll-indicator{ position:absolute; bottom:18px; left:50%; transform:translateX(-50%); color:#fff; opacity:.8; font-size:1.2rem}

/* Grid */
.grid{ display:grid; gap:28px}
.grid.two{ grid-template-columns: repeat(2, 1fr)}
.grid.three{ grid-template-columns: repeat(3, 1fr)}
.grid.stretch > *{ height:100%}

/* About */
.about-media{ position:relative}
.about-media img{ border-radius:var(--radius); box-shadow: var(--shadow)}
.about-stats{ position:absolute; right:-12px; bottom:-12px; background:var(--card); border:1px solid rgba(255,255,255,.08); border-radius:16px; display:flex; gap:22px; padding:14px 18px; box-shadow:var(--shadow)}
.about-stats div{ text-align:center}
.about-stats span{ display:block; font-weight:800; font-size:1.4rem; color:var(--primary)}
.checklist{ list-style:none; padding:0; margin:16px 0 0}
.checklist li{ padding-left:28px; position:relative; margin:10px 0; color:#d7dde7}
.checklist li::before{ content:"\f00c"; font-family:"Font Awesome 6 Free"; font-weight:900; position:absolute; left:0; top:2px; color:var(--accent)}
.about-actions{ margin-top:16px; display:flex; gap:12px; flex-wrap:wrap}

/* Services */
.card{ background:var(--card); border:1px solid rgba(255,255,255,.06); border-radius:16px; padding:22px; box-shadow: var(--shadow), 0 0 0 1px rgba(212,175,55,.18) inset}
.service .icon{ width:56px; height:56px; border-radius:14px; display:grid; place-items:center; background:linear-gradient(135deg, rgba(212,175,55,.28), rgba(255,255,255,.06)); color:var(--primary-2); margin-bottom:12px; font-size:1.25rem}
.service h3{ margin:6px 0 8px}
.service p{ color:var(--muted)}

/* Masonry Portfolio */
.masonry{ columns:3 280px; column-gap:16px}
.masonry-item{ break-inside:avoid; display:block; margin:0 0 16px; position:relative}
.masonry-item img{ border-radius:14px; width:100%; height:auto; transition: .25s transform ease, .25s filter ease; filter:saturate(1.05) contrast(1.02)}
.masonry-item:hover img{ transform: translateY(-4px); filter:brightness(1.05)}
.masonry-item.tall img{ aspect-ratio:3/4; object-fit:cover}
.masonry-item.wide img{ aspect-ratio:16/9; object-fit:cover}

/* Petals */
#petals{ position:fixed; inset:0; pointer-events:none; z-index:10; overflow:hidden }
.petal{ position:absolute; top:-10vh; width:14px; height:18px; background: radial-gradient(circle at 30% 30%, #fff 0, #fff3bf 25%, #ffd66b 60%, #b8860b 100%); border-radius:60% 60% 60% 60%/70% 70% 40% 40%; opacity:.85; filter: blur(.2px) }
.petal.p2{ width:12px; height:15px; opacity:.75 }
.petal.p3{ width:10px; height:12px; opacity:.7 }
@keyframes fall{ to{ transform: translateY(110vh) } }
@keyframes sway{ 0%{ transform: translateX(0) rotate(0) } 50%{ transform: translateX(40px) rotate(12deg) } 100%{ transform: translateX(-10px) rotate(-8deg) } }

/* Slider */
.slider{ position:relative; overflow:hidden; --per:1 }
.slides{ display:flex; gap:0; overflow:visible; transition: transform .6s ease }
.slide{ flex:0 0 100%; min-width:100%; background:var(--card); border:1px solid rgba(255,255,255,.06); border-radius:16px; padding:28px; box-shadow:var(--shadow)}
.slide p{ font-size:1.1rem; color:#e6e9ef}
.author{ display:flex; gap:12px; align-items:center; margin-top:14px}
.author img{ width:48px; height:48px; border-radius:50%; border:2px solid rgba(212,175,55,.6); box-shadow:0 0 0 3px rgba(212,175,55,.12)}
.slider-controls{ position:absolute; inset:0; display:flex; justify-content:space-between; align-items:center; pointer-events:none}
.slider-controls button{ pointer-events:auto; width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,.12); background:rgba(18,19,26,.6); color:#fff}

/* Quote decoration */
.slide p::before{ content:"\201C"; color:var(--primary); font-size:2rem; line-height:0; margin-right:6px; vertical-align:middle; text-shadow:0 6px 20px rgba(212,175,55,.25)}

/* Pagination dots */
.slider-dots{ display:flex; gap:8px; justify-content:center; margin-top:14px }
.slider-dots button{ width:10px; height:10px; border-radius:50%; border:0; background:rgba(255,255,255,.25); cursor:pointer; transition:.25s; box-shadow:0 4px 12px rgba(0,0,0,.2) }
.slider-dots button[aria-selected="true"], .slider-dots button.active{ background: linear-gradient(135deg, var(--primary), var(--primary-2)) }

/* Pricing */
.price{ text-align:left}
.price .price-tag{ font-size:2rem; font-weight:800; color:#fff}
.price ul{ list-style:none; padding:0; margin:12px 0 18px}
.price li{ color:#cfd6e3; margin:8px 0; padding-left:22px; position:relative}
.price li::before{ content:"\f058"; font-family:"Font Awesome 6 Free"; font-weight:900; position:absolute; left:0; color:var(--primary)}
.price .badge{ display:inline-block; background:linear-gradient(135deg, var(--primary), var(--primary-2)); color:#111420; font-weight:800; padding:6px 10px; border-radius:999px; margin-bottom:8px}
.price.featured{ border:1px solid rgba(212,175,55,.6); box-shadow: 0 20px 60px rgba(212,175,55,.22)}

/* Contact */
.contact-form{ display:grid; grid-template-columns: repeat(2, 1fr); gap:14px; background:var(--card); border:1px solid rgba(255,255,255,.06); padding:18px; border-radius:16px; box-shadow:var(--shadow)}
.contact-form .form-group{ display:flex; flex-direction:column; gap:6px}
.contact-form .form-group.full{ grid-column:1/-1}
.contact-form label{ color:#dbe1ea; font-size:.9rem}
.contact-form input, .contact-form textarea{ background:#0f1016; color:#e9ecf1; border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:12px 14px; font: inherit}
.form-note{ color:#aab3c2; margin-left:8px}
.map-wrap{ border-radius:16px; overflow:hidden; box-shadow:var(--shadow)}
.map{ width:100%; height:100%; min-height:360px; filter:saturate(1.1)}

/* Footer */
.footer{ background:#0e0f14; border-top:1px solid rgba(255,255,255,.06); margin-top:48px}
.footer-inner{ display:grid; grid-template-columns:2fr 1fr 1.2fr; gap:28px; padding:36px 0}
.footer .brand p{ color:#b7becb}
.footer .links a{ display:block; color:#cfd6e3; text-decoration:none; margin:6px 0}
.socials{ display:flex; gap:12px; margin-top:8px}
.socials a{ width:40px; height:40px; display:grid; place-items:center; border-radius:10px; background:#151722; color:#fff; border:1px solid rgba(255,255,255,.06)}

/* Back to top */
.back-to-top{ position:fixed; right:20px; bottom:22px; width:44px; height:44px; border-radius:50%; display:grid; place-items:center; background:linear-gradient(135deg, var(--primary), var(--primary-2)); color:#181a22; border:0; box-shadow: 0 10px 30px rgba(255,143,177,.25); opacity:0; visibility:hidden; transform:translateY(10px); transition:.25s}
.back-to-top.show{ opacity:1; visibility:visible; transform:translateY(0)}

/* Responsive */
@media (max-width: 960px){
  .grid.two{ grid-template-columns:1fr}
  .grid.three{ grid-template-columns:1fr}
  .about-stats{ position:static; margin-top:12px}
}
@media (max-width:880px){
  .nav{ position:fixed; inset:64px 16px auto 16px; background:rgba(18,19,26,.96); border:1px solid rgba(255,255,255,.06); border-radius:14px; padding:14px; display:none; flex-direction:column}
  .nav.show{ display:flex}
  .hamburger{display:inline-block}
}

/* AOS subtle override */
[data-aos]{ transition: transform .6s ease, opacity .6s ease}

/* Testimonials per viewport: 2 on large screens */
@media (min-width: 1024px){
  .slider{ --per:2 }
  /* add spacing between two testimonial cards while keeping total = 100% */
  .slides{ gap:18px }
  .slide{ flex:0 0 calc((100% - 18px)/2); min-width:calc((100% - 18px)/2) }
}