/* ============================================================
   Lux Island™ — Singles Pool Party
   Palette: green #99cc02 · pink #f53f82 · white (white-dominant)
   Type: Playfair Display (display) · Dancing Script (script) · DM Sans (body)
   ============================================================ */

:root {
  --green: #99cc02;
  --green-deep: #6f9400;
  --green-soft: #f2f8df;
  --pink: #f53f82;
  --pink-deep: #d31f63;
  --pink-soft: #fff0f5;
  --white: #ffffff;
  --cream: #fbfdf4;
  --ink: #16170f;
  --ink-soft: #5c5f4e;
  --line: #ececdf;

  --shadow-sm: 0 2px 10px rgba(22, 23, 15, .06);
  --shadow-md: 0 18px 50px -20px rgba(22, 23, 15, .25);
  --shadow-pink: 0 16px 40px -14px rgba(245, 63, 130, .55);
  --shadow-green: 0 16px 40px -14px rgba(153, 204, 2, .5);

  --maxw: 1180px;
  --r: 22px;
  --r-lg: 30px;

  --font-display: "Playfair Display", Georgia, serif;
  --font-script: "Dancing Script", cursive;
  --font-body: "DM Sans", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* ---------- layout helpers ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.section { padding: clamp(64px, 9vw, 120px) 0; position: relative; }
.center { text-align: center; }

.eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--green-deep);
  display: inline-flex;
  align-items: center;
  gap: .6em;
  margin: 0 0 18px;
}
.eyebrow.pink { color: var(--pink-deep); }
.eyebrow .kiwi { flex: 0 0 auto; }

h1, h2, h3 { font-family: var(--font-display); font-weight: 800; line-height: 1.04; margin: 0; letter-spacing: -.01em; }
.h-sec { font-size: clamp(2.1rem, 5vw, 3.6rem); }
.script { font-family: var(--font-script); font-weight: 700; color: var(--pink); }
.mark-pink { color: var(--pink); }
.mark-green { color: var(--green-deep); }

.lead { font-size: clamp(1.02rem, 1.6vw, 1.2rem); color: var(--ink-soft); max-width: 60ch; }
.center .lead { margin-inline: auto; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .55em;
  font-family: var(--font-body); font-weight: 700; font-size: 1.02rem;
  padding: 16px 30px; border-radius: 999px; border: 0; cursor: pointer;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, background .25s;
  will-change: transform;
}
.btn-pink { background: var(--pink); color: #fff; box-shadow: var(--shadow-pink); }
.btn-pink:hover { transform: translateY(-3px); box-shadow: 0 22px 50px -14px rgba(245,63,130,.7); }
.btn-green { background: var(--green); color: var(--ink); box-shadow: var(--shadow-green); }
.btn-green:hover { transform: translateY(-3px); }
.btn .arrow { transition: transform .25s; }
.btn:hover .arrow { transform: translateX(4px); }
.btn-lg { padding: 19px 38px; font-size: 1.1rem; }

/* kiwi-slice motif (inline svg gets these via class) */
.kiwi { width: 1.1em; height: 1.1em; vertical-align: -.18em; }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: 700px;
  display: flex; align-items: center;
  padding: 120px 0 200px;
  background: #cfe0ef;
  overflow: hidden;
  isolation: isolate;
}
.hero__bg {
  position: absolute; inset: 0; z-index: -2;
  background-size: cover; background-position: center;
}
.hero::after { /* fade image into white toward bottom + readability scrim */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(10,20,12,.42) 0%, rgba(10,20,12,.12) 34%, rgba(255,255,255,0) 58%, rgba(255,255,255,.85) 88%, #fff 100%),
    linear-gradient(90deg, rgba(10,20,12,.36) 0%, rgba(10,20,12,0) 52%);
}
.hero__inner { max-width: 680px; }
.hero .eyebrow { color: #fff; text-shadow: 0 1px 12px rgba(0,0,0,.35); }
.hero .eyebrow .dot { color: var(--green); }
.hero__host {
  display: inline-flex; align-items: center; gap: .5em;
  font-weight: 600; font-size: .85rem; letter-spacing: .04em;
  color: #fff; background: rgba(255,255,255,.16); backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.3);
  padding: 7px 14px; border-radius: 999px; margin-bottom: 26px;
}
.hero h1 {
  color: #fff; font-size: clamp(3rem, 8vw, 6rem);
  text-shadow: 0 4px 30px rgba(0,0,0,.3);
}
.hero h1 .line1 { display: block; font-weight: 500; font-style: italic; font-size: .42em; letter-spacing: .02em; opacity: .96; }
.hero h1 .script { display: block; color: #fff; font-size: 1.18em; line-height: .9; margin-top: -.04em; text-shadow: 0 6px 26px rgba(245,63,130,.45); }
.hero__sub { color: #fff; font-size: clamp(1.05rem, 1.8vw, 1.3rem); font-weight: 500; margin: 22px 0 26px; max-width: 36ch; text-shadow: 0 2px 16px rgba(0,0,0,.4); }
.hero__meta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 22px; }
.pill {
  display: inline-flex; align-items: center; gap: .5em;
  background: rgba(255,255,255,.92); color: var(--ink);
  font-weight: 600; font-size: .95rem; padding: 10px 18px; border-radius: 999px;
  box-shadow: var(--shadow-sm);
}
.pill svg { width: 18px; height: 18px; color: var(--pink); }
.hero__badge {
  display: inline-flex; align-items: center; gap: .5em;
  font-weight: 700; font-size: .82rem; letter-spacing: .04em; text-transform: uppercase;
  color: #fff; background: var(--pink); padding: 9px 16px; border-radius: 999px;
  margin-bottom: 30px; box-shadow: var(--shadow-pink);
}
.hero__cta { display: flex; }

/* ============================================================
   COUNTDOWN
   ============================================================ */
.countdown { padding: clamp(40px, 6vw, 70px) 0 clamp(50px,7vw,90px); text-align: center; }
.countdown__grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(10px, 3vw, 34px); max-width: 720px; margin: 26px auto 0;
}
.cd { position: relative; }
.cd__num {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.6rem, 8vw, 4.6rem); line-height: 1; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.cd:nth-child(odd) .cd__num { color: var(--pink); }
.cd:nth-child(even) .cd__num { color: var(--green-deep); }
.cd__label { font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-soft); font-weight: 700; margin-top: 8px; }
.cd + .cd::before { content: ""; position: absolute; left: calc(-1 * clamp(5px,1.5vw,17px)); top: 12%; height: 56%; width: 1px; background: var(--line); }

/* ============================================================
   SESSIONS
   ============================================================ */
.vid-frame {
  max-width: 880px; margin: clamp(28px,4vw,46px) auto 0;
  aspect-ratio: 16 / 9; border-radius: var(--r-lg); overflow: hidden;
  background: #000; border: 1px solid var(--line); box-shadow: var(--shadow-md);
}
.explainer-vid { width: 100%; height: 100%; display: block; object-fit: cover; }

.sessions__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin-top: 48px; }
.scard {
  --accent: var(--green); --accent-deep: var(--green-deep); --badge-ink: var(--ink); --tint: var(--green-soft);
  display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border-radius: var(--r-lg);
  border: 1px solid var(--line); box-shadow: var(--shadow-md);
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
.scard:nth-child(2) { --accent: var(--pink); --accent-deep: var(--pink-deep); --badge-ink: #fff; --tint: var(--pink-soft); }
.scard:hover { transform: translateY(-6px); }
.scard__media { position: relative; aspect-ratio: 3 / 2; }
.scard__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.scard__theme {
  position: absolute; top: 14px; left: 14px;
  font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--badge-ink); background: var(--accent); padding: 6px 12px; border-radius: 999px;
  box-shadow: 0 4px 14px rgba(0,0,0,.18);
}
.scard__content { padding: 24px; }
.scard__title {
  font-family: var(--font-body); font-weight: 800; letter-spacing: -.01em;
  color: var(--ink); font-size: 1.4rem; margin: 0 0 4px;
}
.scard__time {
  font-family: var(--font-body); font-weight: 800; line-height: 1;
  font-size: 1.35rem; color: var(--accent-deep); margin: 0 0 18px;
}
.scard__pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.spill {
  background: var(--tint); color: var(--ink-soft);
  font-size: .78rem; font-weight: 600; padding: 7px 13px; border-radius: 999px;
}
.scard__cta { width: 100%; justify-content: center; }

/* ============================================================
   STATS (white row)
   ============================================================ */
.stats { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stats__grid { display: grid; grid-template-columns: repeat(4,1fr); }
.stat { text-align: center; padding: 14px; position: relative; }
.stat + .stat::before { content:""; position:absolute; left:0; top:18%; height:64%; width:1px; background: var(--line); }
.stat__num { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.2rem, 5vw, 3.4rem); line-height: 1; }
.stat:nth-child(1) .stat__num, .stat:nth-child(3) .stat__num { color: var(--pink); }
.stat:nth-child(2) .stat__num, .stat:nth-child(4) .stat__num { color: var(--green-deep); }
.stat__label { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); font-weight: 700; margin-top: 10px; }

/* ============================================================
   WHAT'S INCLUDED
   ============================================================ */
.incl__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(30px, 5vw, 64px); align-items: center; margin-top: 44px; }
.incl__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.incl__list li { display: flex; align-items: flex-start; gap: 13px; font-weight: 500; font-size: 1.02rem; }
.incl__check { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; background: var(--green-soft); display: grid; place-items: center; margin-top: 1px; }
.incl__check svg { width: 15px; height: 15px; color: var(--green-deep); }
.incl__media { position: relative; }
.incl__media .img-main { border-radius: var(--r-lg); box-shadow: var(--shadow-md); aspect-ratio: 4/5; object-fit: cover; width: 100%; }
.incl__media .img-float {
  position: absolute; bottom: -26px; left: -26px; width: 46%;
  border-radius: var(--r); border: 6px solid #fff; box-shadow: var(--shadow-md);
  aspect-ratio: 1/1; object-fit: cover;
}
.incl__tag {
  position: absolute; top: 18px; right: -14px; z-index: 3;
  background: var(--pink); color:#fff; font-weight:700; font-size:.8rem;
  padding: 9px 16px; border-radius: 999px; box-shadow: var(--shadow-pink);
  display: inline-flex; align-items: center; gap: .4em;
}

/* ============================================================
   PRICING
   ============================================================ */
.pricing { background: var(--cream); }
.price-card {
  max-width: 720px; margin: 44px auto 0; background: #fff; border-radius: var(--r-lg);
  border: 1px solid var(--line); box-shadow: var(--shadow-md); overflow: hidden;
  text-align: center;
}
.price-card__top { padding: 30px 24px 8px; position: relative; }
.price-badge {
  display:inline-flex; align-items:center; gap:.4em; background: var(--pink); color:#fff;
  font-weight: 800; font-size: .8rem; letter-spacing:.08em; text-transform: uppercase;
  padding: 8px 16px; border-radius: 999px; margin-bottom: 16px;
}
.price-was { color: var(--ink-soft); font-size: .9rem; letter-spacing: .12em; text-transform: uppercase; }
.price-was s { color: var(--pink); text-decoration-thickness: 2px; font-size: 1.5rem; font-family: var(--font-display); }
.price-disc { color: var(--green-deep); font-weight: 700; margin-top: 6px; }
.price-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding: 22px clamp(20px,4vw,40px) 8px; }
.ptier { border-radius: var(--r); padding: 24px 16px; border: 2px solid var(--line); }
.ptier.men { background: var(--green-soft); border-color: rgba(153,204,2,.4); }
.ptier.women { background: var(--pink-soft); border-color: rgba(245,63,130,.3); }
.ptier__label { font-weight: 800; letter-spacing: .18em; text-transform: uppercase; font-size: .8rem; color: var(--ink-soft); }
.ptier__price { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.6rem,7vw,3.6rem); line-height: 1; margin: 6px 0; }
.ptier.men .ptier__price { color: var(--green-deep); }
.ptier.women .ptier__price { color: var(--pink); }
.ptier__note { font-size: .82rem; color: var(--ink-soft); }
.price-card__foot { padding: 14px 24px 30px; }
.price-foot-note { font-size: .85rem; color: var(--ink-soft); margin: 14px 0 0; display:flex; gap:.5em; align-items:center; justify-content:center; }

/* ============================================================
   FULL-BLEED LEAD-IN BAND (fades into the white section below)
   ============================================================ */
.fullbleed {
  position: relative;
  height: 460px;
  overflow: hidden;
  isolation: isolate;
  margin-top: 0;
}
.fullbleed__bg {
  position: absolute; inset: 0; z-index: -2;
  background-size: cover; background-position: center;
}
.fullbleed::after { /* readability/atmosphere top + fade to white at the bottom */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg,
    rgba(10,20,12,.18) 0%,
    rgba(255,255,255,0) 42%,
    rgba(255,255,255,.85) 86%,
    #fff 100%);
}
/* the lead-in already supplies top spacing, so tighten the section that follows */
.exp-section { padding-top: clamp(20px,3vw,34px); }

/* ============================================================
   EXPERIENCE (mosaic + subsections)
   ============================================================ */
.exp__badge { display:flex; justify-content:center; margin-bottom: 8px; }
.exp__cta { display:flex; flex-direction:column; align-items:center; gap:16px; margin-top: clamp(40px,6vw,64px); }
.urgency {
  display:inline-flex; align-items:center; gap:8px; margin:0;
  font-weight:700; color:var(--pink-deep); font-size:.98rem; letter-spacing:.01em;
}
.urgency svg { width:18px; height:18px; flex:0 0 auto; color:var(--pink); }
.exp__badge span {
  font-family: var(--font-display); font-style: italic; font-size: clamp(1.3rem,3vw,2rem);
  color: var(--ink); display:inline-flex; align-items:center; gap:.5em;
}
.feature { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px,5vw,60px); align-items: center; margin-top: clamp(50px,7vw,80px); }
.feature.reverse .feature__media { order: 2; }
.feature__media { position: relative; }
.feature__media .fm-1 { border-radius: var(--r-lg); box-shadow: var(--shadow-md); width: 100%; aspect-ratio: 5/4; object-fit: cover; }
.feature__media .fm-2 {
  position: absolute; width: 44%; aspect-ratio: 1/1; object-fit: cover;
  border-radius: var(--r); border: 6px solid #fff; box-shadow: var(--shadow-md);
}
.feature__media video.fm-1 { display: block; background: #11140a; }
.autoplay-vid { display: block; }
.feature.reverse .feature__media .fm-2 { bottom: -24px; left: -22px; }
.feature:not(.reverse) .feature__media .fm-2 { bottom: -24px; right: -22px; }
.feature__body h2 { font-size: clamp(1.9rem,4vw,2.8rem); margin-bottom: 16px; }
.exp-list { list-style:none; margin: 18px 0 0; padding: 0; display:grid; gap: 11px; }
.exp-list li { display:flex; gap: 11px; align-items:center; color: var(--ink-soft); font-weight: 500; }
.exp-list svg { width: 18px; height:18px; color: var(--pink); flex:0 0 auto; }
.note {
  margin-top: 20px; background: var(--green-soft);
  border-radius: 14px; padding: 14px 18px; font-size: .92rem; color: var(--ink-soft);
}
.note.pink { background: var(--pink-soft); }

/* video exchange — full width lighter card */
.video-ex {
  margin-top: clamp(50px,7vw,80px); text-align: center;
  background: #fff; border: 1px dashed rgba(245,63,130,.4); border-radius: var(--r-lg);
  padding: clamp(34px,5vw,54px); max-width: 820px; margin-inline: auto; box-shadow: var(--shadow-sm);
}
.video-ex .vx-icon { width: 56px; height: 56px; margin: 0 auto 16px; color: var(--pink); }
.video-ex h2 { font-size: clamp(1.6rem,3.4vw,2.3rem); margin-bottom: 12px; }

/* ============================================================
   PHOTO MARQUEE
   ============================================================ */
.marquee { padding: clamp(40px,6vw,70px) 0; overflow: hidden; }
.marquee__track { display: flex; gap: 16px; width: max-content; animation: scrollx 48s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee img { height: clamp(160px, 22vw, 260px); width: auto; border-radius: 18px; object-fit: cover; box-shadow: var(--shadow-sm); }
@keyframes scrollx { to { transform: translateX(-50%); } }

/* ============================================================
   WHY (features 3-up)
   ============================================================ */
.why__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; margin-top: 46px; }
.wcard {
  --glow: 22, 23, 15;
  background: #fff; border: 1px solid rgba(var(--glow), .28); border-radius: var(--r-lg);
  padding: 34px 28px; text-align: center;
  box-shadow: 0 0 22px -6px rgba(var(--glow), .28), 0 10px 30px -16px rgba(var(--glow), .35);
  transition: transform .3s, box-shadow .3s;
}
.wcard:nth-child(1), .wcard:nth-child(3) { --glow: 245, 63, 130; }   /* pink */
.wcard:nth-child(2) { --glow: 153, 204, 2; }                          /* green */
.wcard:hover {
  transform: translateY(-5px);
  box-shadow: 0 0 30px -3px rgba(var(--glow), .45), 0 18px 44px -16px rgba(var(--glow), .5);
}
.wcard__icon { width: 58px; height: 58px; border-radius: 18px; margin: 0 auto 18px; display: grid; place-items: center; }
.wcard:nth-child(1) .wcard__icon { background: var(--pink-soft); color: var(--pink); }
.wcard:nth-child(2) .wcard__icon { background: var(--green-soft); color: var(--green-deep); }
.wcard:nth-child(3) .wcard__icon { background: var(--pink-soft); color: var(--pink); }
.wcard__icon svg { width: 28px; height: 28px; }
.wcard h3 { font-size: 1.4rem; margin-bottom: 10px; }
.wcard p { color: var(--ink-soft); margin: 0; }

/* ============================================================
   FINAL CTA
   ============================================================ */
.final { position: relative; }
.final__card {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--shadow-md); border: 1px solid var(--line);
  display: grid; grid-template-columns: 1.05fr .95fr; min-height: 460px;
}
.final__media { position: relative; }
.final__media img, .final__media video { position:absolute; inset:0; width:100%; height:100%; object-fit: cover; display:block; }
.final__body { padding: clamp(34px,4vw,56px); background: #fff; display: flex; flex-direction: column; justify-content: center; }
.final__body h2 { font-size: clamp(2rem,4.4vw,3rem); margin-bottom: 14px; }
.final__prices { display: flex; gap: 26px; align-items: flex-end; margin: 18px 0 6px; }
.final__prices .fp { line-height: 1; }
.final__prices .fp small { display:block; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; font-size: .72rem; color: var(--ink-soft); margin-bottom: 6px; }
.final__prices .fp b { font-family: var(--font-display); font-size: 2.4rem; }
.final__prices .fp.men b { color: var(--green-deep); }
.final__prices .fp.women b { color: var(--pink); }
.final__prices .reg { font-size: .9rem; color: var(--ink-soft); }
.final__prices .reg s { color: var(--pink); }
.final__note { color: var(--pink-deep); font-weight: 700; margin: 0 0 24px; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background: var(--ink); color: #fff; padding: clamp(50px,7vw,80px) 0 40px; text-align: center; }
.footer .eyebrow { color: var(--green); }
.footer__ig { font-family: var(--font-display); font-size: clamp(1.6rem,4vw,2.4rem); color: #fff; display:inline-flex; align-items:center; gap:.4em; }
.footer__ig svg { width: .9em; height:.9em; color: var(--pink); }
.footer__tag { color: rgba(255,255,255,.65); margin: 10px 0 30px; }
.footer__brand { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; letter-spacing: .02em; }
.footer__host { color: var(--green); font-weight: 600; margin-top: 8px; display:inline-flex; align-items:center; gap:.45em; }
.footer__desc { color: rgba(255,255,255,.55); font-size: .92rem; margin-top: 6px; }
.footer__rule { height:1px; background: rgba(255,255,255,.14); max-width: 360px; margin: 28px auto; }
.footer__copy { color: rgba(255,255,255,.45); font-size: .82rem; }

/* ============================================================
   MOTION (load-in; iframe-safe — content ends visible, no scroll dependency)
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  .reveal { animation: fadeUp .85s cubic-bezier(.2,.8,.2,1) both; }
  .d1 { animation-delay: .08s; } .d2 { animation-delay: .16s; }
  .d3 { animation-delay: .24s; } .d4 { animation-delay: .32s; } .d5 { animation-delay: .4s; }
  @keyframes fadeUp { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 860px) {
  .sessions__grid { grid-template-columns: 1fr; }
  .incl__grid { grid-template-columns: 1fr; }
  .incl__media { order: -1; max-width: 460px; margin: 0 auto; }
  .feature, .feature.reverse .feature__media { grid-template-columns: 1fr; order: 0; }
  .feature__media { order: -1 !important; }
  .why__grid { grid-template-columns: 1fr; }
  .final__card { grid-template-columns: 1fr; }
  .final__media { min-height: 280px; }
  .fullbleed { height: 320px; }
}
@media (max-width: 560px) {
  .price-grid { grid-template-columns: 1fr; }
  .hero { min-height: 600px; padding-top: 90px; }
  .stat__label, .cd__label { letter-spacing: .12em; }
  .incl__media .img-float { width: 40%; left: -14px; bottom: -16px; }
  /* keep the hero eyebrow tight so it doesn't spread/wrap awkwardly */
  .hero .eyebrow { font-size: .68rem; letter-spacing: .14em; gap: .45em; }
}