/* The landing page. One fixed scene (js/skyline.js) behind everything; content sits on frosted glass.
   Defaults are the sunset; site.js overwrites the scene variables as you scroll. */

:root {
  --s0: #2f2a74; --s1: #8c4f9f; --s2: #ff8394; --s3: #ffc58c; --sun: #ffe6ae; --cloud: #ffc0b0;
  --far: #ad7aa8; --mid: #6e4a8d; --near: #3f2b5f; --palm: #1f1536; --w0: #df92ad; --w1: #2c6890;
  --p: 0; --lights: 0;
}
.site { color: var(--white); background: var(--s0); overflow-x: clip; }

/* ---------- the scene ---------- */
.scene { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
.scene svg { width: 100%; height: 100%; }
.scene .far { fill: var(--far); }
.scene .mid { fill: var(--mid); }
.scene .near { fill: var(--near); }
.scene .palm { fill: var(--palm); }
.scene .disc { fill: var(--sun); }
.scene .sun { transform: translateY(calc(var(--p) * 260px)); opacity: calc(1 - var(--p) * .85); }
.scene .clouds { opacity: calc(1 - var(--p) * .55); }
.scene .stars { fill: #fff; opacity: clamp(0, calc((var(--lights) - .45) * 1.6), .85); }
.scene .win { fill: #ffd99a; }
.scene .lit { opacity: 0; }
.scene .lit.l1 { opacity: clamp(0, calc((var(--lights) - .02) * 3), .95); }
.scene .lit.l2 { opacity: clamp(0, calc((var(--lights) - .22) * 3), .85); }
.scene .lit.l3 { opacity: clamp(0, calc((var(--lights) - .42) * 3), .9); }
.scene .lit.l4 { opacity: clamp(0, calc((var(--lights) - .62) * 3), .6); }
.scene .neon rect { opacity: clamp(0, calc((var(--lights) - .3) * 2.2), 1); }
.scene .n1 { fill: #ff5aa8; filter: drop-shadow(0 0 3px #ff5aa8); }
.scene .n2 { fill: #5ff3ff; filter: drop-shadow(0 0 3px #5ff3ff); }
.scene .refl { opacity: .3; }
.scene .ripple { animation: ripple 4s linear infinite; }
@keyframes ripple { to { transform: translateY(4px); } }
.scene .sunpath rect { fill: var(--sun); opacity: calc((1 - var(--p)) * .5); }
.scene .shore { fill: var(--sun); opacity: calc(.35 - var(--p) * .2); }

/* ---------- top bar ---------- */
.top.solid .bar { background: rgba(14, 10, 34, .62); }

/* ---------- shared pieces ---------- */
.band { padding-block: clamp(64px, 10vw, 128px); }
.head { display: grid; gap: 16px; max-width: 46rem; margin-bottom: clamp(28px, 4vw, 44px); text-shadow: 0 2px 24px rgba(10, 6, 30, .35); }
.head .lede { color: rgba(255, 255, 255, .86); }
.narrow { max-width: 900px; }
.glass { position: relative; background: var(--glass); color: var(--ink); border: 1px solid var(--glass-line); border-radius: 24px;
  backdrop-filter: blur(26px) saturate(1.4); -webkit-backdrop-filter: blur(26px) saturate(1.4);
  box-shadow: 0 40px 90px -40px rgba(6, 3, 24, .75); }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.note { font-size: .9rem; opacity: .8; }

.phone { position: relative; aspect-ratio: 9 / 16; border-radius: 20px; overflow: hidden; background: #0b0920;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .22), 0 28px 60px -24px rgba(5, 3, 20, .85); }
.phone video { width: 100%; height: 100%; object-fit: cover; }
.snd { position: absolute; right: 10px; bottom: 10px; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .35); background: rgba(10, 7, 28, .5); color: #fff; cursor: pointer;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.snd svg { width: 20px; height: 20px; }
.snd .w { opacity: 0; }
.snd[aria-pressed="true"] { background: var(--white); color: var(--ink); }
.snd[aria-pressed="true"] .w { opacity: 1; }
.snd[aria-pressed="false"]::after { content: ""; position: absolute; width: 22px; height: 2px; background: currentColor; rotate: 45deg; translate: 2px 0; }

/* ---------- hero ---------- */
.hero { min-height: calc(100svh - 70px); display: grid; align-items: center; padding-block: 40px 90px; }
.hero-grid { display: grid; gap: 48px; align-items: center; }
.hero-copy { position: relative; isolation: isolate; display: grid; gap: 22px; justify-items: start;
  text-shadow: 0 1px 2px rgba(20, 10, 50, .35), 0 2px 30px rgba(20, 10, 50, .4); }
.hero-copy::before { content: ""; position: absolute; z-index: -1; inset: -12% -18% -14% -30%;
  background: radial-gradient(closest-side, rgba(36, 18, 78, .55), rgba(36, 18, 78, 0)); }
.hero-copy .lede { color: rgba(255, 255, 255, .9); }
.chip { display: inline-flex; align-items: center; gap: 9px; padding: 7px 13px 7px 11px; border-radius: 10px; font-weight: 600; font-size: .92rem;
  background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .28); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--peach); box-shadow: 0 0 10px var(--peach); }

.fan { position: relative; height: clamp(430px, 52vw, 600px); }
.fan .phone { position: absolute; top: 50%; left: 50%; }
.fan .main { width: clamp(200px, 19vw, 268px); translate: -50% -50%; z-index: 2; }
.fan .side { width: clamp(160px, 15vw, 214px); z-index: 1; }
.fan .l { translate: -128% -46%; rotate: -7deg; }
.fan .r { translate: 28% -46%; rotate: 7deg; }
.ping { position: absolute; z-index: 3; left: 50%; bottom: 2%; translate: -50% 0; width: min(330px, 92%); display: flex; gap: 12px; align-items: center;
  padding: 12px 14px; border-radius: 16px; background: rgba(255, 255, 255, .86); color: var(--ink); border: 1px solid #fff;
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 24px 50px -20px rgba(6, 3, 24, .7);
  animation: ping-in .7s cubic-bezier(.2, .9, .3, 1.2) 1.2s both; }
.ping-icon { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; color: #fff;
  font: 400 1.5rem/1 var(--script); background: linear-gradient(160deg, var(--peach), var(--pink)); }
.ping-text { display: grid; gap: 2px; font-size: .84rem; line-height: 1.3; }
.ping-text b { font-size: .95rem; }
.ping-text span { color: var(--mute-ink); }
@keyframes ping-in { from { opacity: 0; transform: translateY(16px) scale(.96); } }

@media (min-width: 960px) {
  .hero { align-items: start; padding-top: clamp(40px, 9vh, 96px); }
  .hero-grid { grid-template-columns: 1.1fr .9fr; gap: 24px; }
}

/* ---------- clips reel ---------- */
.reel { display: grid; grid-auto-flow: column; grid-auto-columns: min(62vw, 230px); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory;
  margin-inline: calc(var(--pad) * -1); padding: 6px var(--pad) 18px; scrollbar-width: none; }
.reel::-webkit-scrollbar { display: none; }
.reel li { scroll-snap-align: start; display: grid; gap: 12px; }
.reel p { display: grid; gap: 2px; font-size: .95rem; line-height: 1.3; text-shadow: 0 1px 12px rgba(10, 6, 30, .5); }
.reel p b { font-weight: 700; }
.reel p span { opacity: .78; }
@media (min-width: 1100px) {
  .reel { grid-auto-flow: row; grid-template-columns: repeat(5, 1fr); overflow: visible; margin-inline: 0; padding-inline: 0; }
}

/* ---------- timeline ---------- */
.timeline { padding: clamp(24px, 4vw, 44px); }
.timeline ol { display: grid; gap: 26px; }
.timeline li { position: relative; display: grid; gap: 8px; padding-left: 26px; }
.timeline li::before { content: ""; position: absolute; left: 0; top: .45em; width: 11px; height: 11px; border-radius: 50%;
  background: var(--pink); box-shadow: 0 0 0 4px rgba(255, 92, 154, .2); }
.timeline li::after { content: ""; position: absolute; left: 5px; top: 1.6em; bottom: -26px; width: 1px; background: rgba(23, 18, 46, .18); }
.timeline li:last-child::after { display: none; }
.timeline time { font-weight: 700; font-size: .95rem; color: var(--pink); }
.timeline h3 { font: 700 1.2rem/1.25 var(--body); font-stretch: 112%; }
.timeline p { color: var(--mute-ink); font-size: .98rem; }
.vs { margin-top: 30px; padding-top: 22px; border-top: 1px solid rgba(23, 18, 46, .12); font-size: 1.05rem; }
@media (min-width: 960px) {
  .timeline ol { grid-template-columns: repeat(4, 1fr); gap: 28px; }
  .timeline li { padding: 30px 0 0; }
  .timeline li::before { top: 0; }
  .timeline li::after { left: 16px; right: -28px; top: 5px; bottom: auto; width: auto; height: 1px; }
}

/* ---------- cuts ---------- */
.cuts { display: grid; gap: 32px; padding: clamp(24px, 4vw, 48px); align-items: center; }
.cuts-copy { display: grid; gap: 18px; justify-items: start; }
.cuts-copy .lede { color: var(--mute-ink); }
.ticks { display: grid; gap: 8px; font-weight: 600; }
.ticks li { display: flex; gap: 10px; align-items: baseline; }
.ticks li::before { content: ""; flex: none; width: 14px; height: 8px; border-left: 2.5px solid var(--pink); border-bottom: 2.5px solid var(--pink);
  rotate: -45deg; translate: 0 -2px; }
.slots { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; font-size: .95rem; color: var(--mute-ink); }
.dots { display: inline-flex; gap: 6px; }
.dots i { width: 14px; height: 14px; border-radius: 4px; background: var(--pink); }
.dots i.free { background: transparent; border: 2px solid rgba(23, 18, 46, .28); }
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.trio .phone { border-radius: 16px; }
.trio .phone:nth-child(2) { translate: 0 -14px; }
@media (min-width: 960px) { .cuts { grid-template-columns: .9fr 1.1fr; gap: 48px; } }

/* ---------- pricing ---------- */
.plans { display: grid; gap: 16px; }
@media (min-width: 640px) { .plans { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .plans { grid-template-columns: repeat(4, 1fr); } }
.plan { display: flex; flex-direction: column; gap: 16px; padding: 26px 22px 22px; border-radius: 22px; }
.plan h3 { font: 700 1.05rem/1.2 var(--body); font-stretch: 112%; }
.plan .price { display: flex; align-items: baseline; gap: 8px; }
.plan .price b { font-size: 3rem; }
.plan .price span { color: var(--mute-ink); font-weight: 600; font-size: .95rem; }
.plan ul { display: grid; gap: 9px; flex: 1; font-size: .96rem; }
.plan li { padding-left: 18px; position: relative; }
.plan li::before { content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 7px; border-radius: 2px; background: var(--pink); }
.plan .btn { width: 100%; }
.plan.pick { position: relative; color: var(--white); border: 1px solid rgba(255, 255, 255, .25);
  background: linear-gradient(165deg, #3b2b7d 0%, #7a3d8f 55%, #d8577f 100%); box-shadow: 0 40px 90px -40px rgba(255, 92, 154, .7); }
.plan.pick .price span { color: rgba(255, 255, 255, .8); }
.plan.pick li::before { background: var(--sun); }
.tag { align-self: flex-start; padding: 5px 10px; border-radius: 8px; background: rgba(255, 255, 255, .18); font-weight: 700; font-size: .8rem; }
.fine { margin-top: 18px; font-size: .92rem; opacity: .8; }

/* ---------- affiliates ---------- */
.aff { display: grid; gap: 20px; align-items: center; padding: clamp(24px, 4vw, 40px); }
.aff .pct { font-size: clamp(4.5rem, 12vw, 7.5rem); line-height: .85; letter-spacing: -.04em;
  background: linear-gradient(170deg, var(--peach), var(--pink)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.aff p:not(.pct) { color: var(--mute-ink); margin-top: 10px; }
@media (min-width: 900px) { .aff { grid-template-columns: auto 1fr auto; gap: 36px; } }

/* ---------- faq ---------- */
#questions .h2 { margin-bottom: 28px; }
.faq { padding: 6px clamp(18px, 3vw, 32px); }
.faq details + details { border-top: 1px solid rgba(23, 18, 46, .12); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 20px 0; font-weight: 700; font-size: 1.06rem;
  cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 10px; height: 10px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  rotate: 45deg; translate: 0 -3px; transition: rotate .2s ease; }
.faq details[open] summary::after { rotate: 225deg; translate: 0 2px; }
.faq p { padding: 0 0 22px; max-width: 46em; color: var(--mute-ink); }

/* ---------- last call ---------- */
.last { text-align: center; padding-block: clamp(80px, 12vw, 150px) clamp(120px, 18vw, 220px); }
.last .wrap { display: grid; justify-items: center; gap: 22px; }
.mark.big { font-size: clamp(5rem, 16vw, 10rem); line-height: .9; padding-inline: .1em .2em; filter: drop-shadow(0 4px 0 rgba(10, 6, 30, .5)) drop-shadow(0 0 40px rgba(255, 92, 154, .45)); }

@media (max-width: 959px) {
  .hero { min-height: 0; padding-top: 28px; }
  .fan { height: 470px; margin-inline: calc(var(--pad) * -1); }
  .fan .main { width: 210px; }
  .fan .side { width: 160px; }
  .fan .l { translate: -118% -46%; }
  .fan .r { translate: 18% -46%; }
}
@media (prefers-reduced-motion: reduce) { .ping { animation: none; } }