/* ============================================================
   VILLONE — Bridal Villa Landing Page
   Fully standalone stylesheet — intentionally isolated from
   css/style.css (Secret Ali Finds). Do not merge the two.
   ============================================================ */

:root {
  --vl-bg: #fbf8f4;
  --vl-card: #ffffff;
  --vl-champagne: #efe2d1;
  --vl-champagne-soft: #f5ece0;
  --vl-blush: #c98a72;
  --vl-blush-deep: #b06f57;
  --vl-blush-tint: #f4e4da;
  --vl-green: #3f7a5c;
  --vl-green-dark: #2c5744;
  --vl-text: #2b2622;
  --vl-text-soft: #8a7d72;
  --vl-line: rgba(43, 38, 34, 0.08);
  --vl-radius-lg: 24px;
  --vl-radius-md: 18px;
  --vl-radius-sm: 12px;
  --vl-shadow: 0 10px 30px rgba(43, 38, 34, 0.08);
  --vl-shadow-lg: 0 16px 44px rgba(43, 38, 34, 0.14);
  --vl-trans: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --vl-container: 480px;
}

.vl-page,
.vl-page *,
.vl-page *::before,
.vl-page *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.vl-page {
  background: var(--vl-bg);
  color: var(--vl-text);
  direction: rtl;
  font-family: "Assistant", "Segoe UI", Arial, sans-serif;
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.vl-page img,
.vl-page video {
  display: block;
  max-width: 100%;
}

.vl-page a {
  color: inherit;
  text-decoration: none;
}

.vl-page button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  .vl-page * {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* ── Shared bits ─────────────────────────────────────────── */

.vl-wrap {
  max-width: var(--vl-container);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.vl-section-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  text-align: center;
  font-family: "David Libre", "Frank Ruhl Libre", serif;
  font-weight: 600;
  font-size: clamp(1.25rem, 4.5vw, 1.55rem);
  color: var(--vl-text);
  margin-bottom: 1.6rem;
}

.vl-section-title .vl-dash {
  width: 28px;
  height: 1px;
  background: var(--vl-blush);
  flex: 0 0 auto;
}

.vl-heart-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: var(--vl-blush);
  margin: 1.1rem 0;
  opacity: 0.85;
}
.vl-heart-divider::before,
.vl-heart-divider::after {
  content: "";
  width: 20px;
  height: 1px;
  background: var(--vl-line);
}

/* ── Fade-up animation ───────────────────────────────────── */

.vl-fade {
  opacity: 0;
  transform: translateY(22px) scale(0.99);
  transition:
    opacity 0.7s ease,
    transform 0.7s ease;
}
.vl-fade.vl-in {
  opacity: 1;
  transform: translateY(0) scale(1);
}
@media (prefers-reduced-motion: reduce) {
  .vl-fade {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ── Hero ─────────────────────────────────────────────────── */

.vl-hero {
  position: relative;
  min-height: 100dvh;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  color: #fff;
  overflow: hidden;
  background: #2b2622;
}

.vl-hero-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: width var(--vl-trans), height var(--vl-trans);
}

/* Wraps the video (+ its pause indicator) so both can be repositioned
   together on desktop without touching their individual rules. On
   mobile this simply fills the hero, identical to the plain video. */
.vl-hero-video-wrap {
  position: absolute;
  inset: 0;
}

/* Ambient blurred backdrop — the hero video is a portrait (9:16)
   phone-shot clip, which looks great filling a tall mobile screen
   but forces a heavy crop/zoom if stretched full-bleed across a
   wide desktop viewport. On desktop we frame the video at its
   natural aspect ratio instead (see below) and use this softly
   blurred still as the ambient fill behind it. Hidden on mobile,
   where the video already covers the full hero on its own. */
.vl-hero .vl-hero-bg {
  display: none;
}

.vl-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  cursor: pointer;
  background: linear-gradient(
    100deg,
    rgba(15, 12, 10, 0.55) 0%,
    rgba(15, 12, 10, 0.32) 45%,
    rgba(15, 12, 10, 0.28) 100%
  );
}

.vl-hero-inner {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  min-height: 100vh;
  padding: 1rem;
  pointer-events: none;
}
.vl-hero-inner a,
.vl-hero-inner button {
  pointer-events: auto;
}

.vl-hero-top {
  position: relative;
  min-height: 42px;
}

.vl-logo {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.vl-logo-img {
  height: 72px;
  width: auto;
  filter: drop-shadow(0 1px 6px rgba(0, 0, 0, 0.25));
  color: white;
}
.vl-logo-mark {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.vl-logo-mark svg {
  width: 16px;
  height: 16px;
  opacity: 0.9;
}
.vl-logo-name {
  font-family: "David Libre", serif;
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: 0.14em;
}
.vl-logo-sub {
  display: block;
  font-size: 0.6rem;
  letter-spacing: 0.32em;
  opacity: 0.8;
  text-align: left;
}

.vl-hero-content {
  margin-top: auto;
  padding-top: 3rem;
  max-width: 300px;
}

.vl-hero-title {
  font-family: "David Libre", serif;
  font-weight: 600;
  font-size: clamp(1.9rem, 8vw, 2.35rem);
  line-height: 1.28;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.25);
}

.vl-hero-desc {
  margin-top: 0.9rem;
  font-size: 0.94rem;
  line-height: 1.7;
  opacity: 0.94;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.2);
}

.vl-hero-actions {
  margin-top: 1.6rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.vl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.92rem;
  padding: 0.95rem 1.7rem;
  transition:
    transform var(--vl-trans),
    box-shadow var(--vl-trans),
    background-color var(--vl-trans);
  white-space: nowrap;
}
.vl-btn:active {
  transform: scale(0.97);
}
.vl-btn svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

a.vl-btn-blush {
  background: var(--vl-blush);
  color: #fff;
  box-shadow: 0 10px 26px rgba(201, 138, 114, 0.4);
}
.vl-btn-blush:hover {
  box-shadow: 0 12px 30px rgba(201, 138, 114, 0.5);
  transform: translateY(-1px);
}

a.vl-btn-green {
  background: var(--vl-green);
  color: #fff;
  box-shadow: 0 10px 26px rgba(63, 122, 92, 0.35);
}
.vl-btn-green:hover {
  background: var(--vl-green-dark);
  box-shadow: 0 12px 30px rgba(63, 122, 92, 0.45);
  transform: translateY(-1px);
}

.vl-btn-block {
  width: 100%;
}

.vl-mute-btn {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    transform var(--vl-trans),
    background var(--vl-trans);
}
.vl-mute-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  transform: scale(1.05);
}
.vl-mute-btn svg {
  width: 18px;
  height: 18px;
}

.vl-hero .vl-hero-pause-indicator {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(15, 12, 10, 0.35);
  border: 1.5px solid rgba(255, 255, 255, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(2px);
  transition:
    transform var(--vl-trans),
    background var(--vl-trans);
}
.vl-hero-pause-indicator:hover {
  background: rgba(15, 12, 10, 0.5);
  transform: translate(-50%, -50%) scale(1.05);
}
.vl-hero-pause-indicator svg {
  width: 20px;
  height: 20px;
  margin-inline-start: 3px;
  color: #fff;
}
.vl-hero-pause-indicator[hidden] {
  display: none;
}

/* ── Gallery ──────────────────────────────────────────────── */

.vl-section {
  padding: 3.6rem 0;
}
.vl-section-tight {
  padding-top: 2.6rem;
  padding-bottom: 2.6rem;
}

.vl-gallery-outer {
  position: relative;
}

.vl-gallery-track {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 0 1.5rem;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.vl-gallery-track::-webkit-scrollbar {
  display: none;
}

.vl-gallery-slide {
  position: relative;
  flex: 0 0 80%;
  aspect-ratio: 4 / 5;
  border-radius: var(--vl-radius-lg);
  overflow: hidden;
  scroll-snap-align: center;
  background: var(--vl-champagne-soft);
  box-shadow: var(--vl-shadow);
}
.vl-gallery-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vl-gallery-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  color: var(--vl-blush-deep);
  background: linear-gradient(
    155deg,
    var(--vl-champagne-soft),
    var(--vl-champagne)
  );
}
.vl-gallery-placeholder svg {
  width: 30px;
  height: 30px;
  opacity: 0.7;
}
.vl-gallery-placeholder span {
  font-size: 0.75rem;
  opacity: 0.75;
}

.vl-gallery-outer .vl-gallery-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--vl-shadow);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  transition: transform var(--vl-trans);
}
.vl-gallery-nav:hover {
  transform: translateY(-50%) scale(1.06);
}
.vl-gallery-nav svg {
  width: 15px;
  height: 15px;
  color: var(--vl-text);
}
.vl-gallery-prev {
  right: 8px;
}
.vl-gallery-next {
  left: 8px;
}

.vl-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 1.3rem;
}
.vl-dots .vl-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #dfcbb8;
  transition: all var(--vl-trans);
}
.vl-dot.vl-dot-active {
  width: 20px;
  background: var(--vl-blush);
}

/* ── Intro ────────────────────────────────────────────────── */

.vl-intro {
  text-align: center;
}
.vl-intro-title {
  font-family: "David Libre", serif;
  font-weight: 600;
  font-size: clamp(1.4rem, 5.5vw, 1.8rem);
  margin-bottom: 1rem;
}
.vl-intro-text {
  max-width: 340px;
  margin: 0 auto;
  color: var(--vl-text-soft);
  font-size: 0.96rem;
  line-height: 1.75;
}

/* ── Feature grid ─────────────────────────────────────────── */

.vl-grid-features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.vl-feature-card {
  background: var(--vl-card);
  border-radius: var(--vl-radius-md);
  padding: 1.5rem 1rem;
  text-align: center;
  box-shadow: var(--vl-shadow);
  border: 1px solid var(--vl-line);
}
.vl-feature-icon {
  width: 30px;
  height: 30px;
  margin: 0 auto 0.85rem;
  color: var(--vl-blush-deep);
}
.vl-feature-icon svg {
  width: 100%;
  height: 100%;
}
.vl-feature-label {
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.4;
}

/* ── Info cards row ───────────────────────────────────────── */

.vl-info-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.vl-info-card {
  background: var(--vl-card);
  border-radius: var(--vl-radius-md);
  padding: 1.1rem 0.6rem;
  text-align: center;
  box-shadow: var(--vl-shadow);
  border: 1px solid var(--vl-line);
}
.vl-info-icon {
  width: 20px;
  height: 20px;
  margin: 0 auto 0.6rem;
  color: var(--vl-blush-deep);
}
.vl-info-icon svg {
  width: 100%;
  height: 100%;
}
.vl-info-title {
  font-size: 0.78rem;
  font-weight: 700;
  margin-bottom: 0.35rem;
}
.vl-info-desc {
  font-size: 0.68rem;
  color: var(--vl-text-soft);
  line-height: 1.55;
}

@media (max-width: 360px) {
  .vl-info-title {
    font-size: 0.72rem;
  }
  .vl-info-desc {
    font-size: 0.62rem;
  }
}

/* ── Final CTA ────────────────────────────────────────────── */

.vl-final {
  position: relative;
  padding: 4.5rem 1.5rem;
  text-align: center;
  overflow: hidden;
}
.vl-final-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.vl-final-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(251, 248, 244, 0.6),
    rgba(251, 248, 244, 0.82)
  );
}
.vl-final-inner {
  position: relative;
  z-index: 2;
  max-width: 340px;
  margin: 0 auto;
}
.vl-final-title {
  font-family: "David Libre", serif;
  font-weight: 600;
  font-size: clamp(1.5rem, 6vw, 1.9rem);
  color: var(--vl-text);
  margin-bottom: 0.9rem;
}
.vl-final-desc {
  font-size: 0.94rem;
  line-height: 1.7;
  color: var(--vl-text-soft);
  margin-bottom: 1.8rem;
}
.vl-final-note {
  margin-top: 1.1rem;
  font-size: 0.78rem;
  color: var(--vl-text-soft);
  font-style: italic;
  font-family: "David Libre", serif;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}
.vl-final-note svg {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
}

/* ── Floating WhatsApp button ─────────────────────────────── */

.vl-float-wa {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--vl-green);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 28px rgba(63, 122, 92, 0.4);
  z-index: 60;
  opacity: 0;
  transform: translateY(10px) scale(0.9);
  pointer-events: none;
  transition:
    transform var(--vl-trans),
    box-shadow var(--vl-trans),
    background-color var(--vl-trans),
    opacity var(--vl-trans);
}
.vl-float-wa.vl-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.vl-float-wa:hover {
  background: var(--vl-green-dark);
  transform: scale(1.08);
  box-shadow: 0 14px 34px rgba(63, 122, 92, 0.5);
}
.vl-float-wa svg {
  width: 26px;
  height: 26px;
  color: #fff;
}

/* ── Desktop scaling ──────────────────────────────────────── */

@media (min-width: 860px) {
  :root {
    --vl-container: 1100px;
  }

  .vl-hero-inner {
    padding: 2.2rem 3.5rem 3.5rem;
  }
  .vl-logo-img {
    height: 44px;
  }

  /* The hero video is a portrait (9:16) clip — full-bleed cover on a
     wide desktop viewport would force a heavy crop/zoom to fill the
     frame. Instead: frame it at its natural aspect ratio as a
     floating panel, and fill the rest of the hero with a softly
     blurred still of the same scene for an ambient backdrop. */
  .vl-hero .vl-hero-bg {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(34px) brightness(0.55) saturate(1.15);
    transform: scale(1.15);
  }
  .vl-hero-video-wrap {
    inset: auto;
    left: 3.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: auto;
    height: 82%;
    max-height: 720px;
    aspect-ratio: 9 / 16;
    border-radius: var(--vl-radius-lg);
    overflow: hidden;
    box-shadow: var(--vl-shadow-lg);
    cursor: pointer;
    z-index: 2;
  }
  .vl-hero-content {
    max-width: 460px;
    padding-top: 4rem;
  }
  .vl-hero-actions {
    gap: 1.6rem;
  }

  .vl-section {
    padding: 5.5rem 0;
  }

  .vl-gallery-track {
    padding: 0 3.5rem;
  }
  .vl-gallery-slide {
    flex-basis: 34%;
  }

  .vl-grid-features {
    grid-template-columns: repeat(4, 1fr);
    max-width: 900px;
    margin: 0 auto;
  }

  .vl-info-row {
    max-width: 780px;
    margin: 0 auto;
    gap: 1.25rem;
  }
  .vl-info-card {
    padding: 1.6rem 1rem;
  }
  .vl-info-title {
    font-size: 0.92rem;
  }
  .vl-info-desc {
    font-size: 0.78rem;
  }

  .vl-final-inner {
    max-width: 460px;
  }
}