PageSourceSearch

https://playfulnights-home.vercel.app/

html playfulnights-home.vercel.app collected 2026-10-03 07:29:51 UTC 104,064 bytes, 1,476 lines download raw bytes

1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="UTF-8" />
5<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6<meta name="theme-color" content="#af4bed" />
7<title>Playful Nights — Sexual Wellness &amp; Vitality for Couples · Clinician-Prescribed Care</title>
8<meta name="description" content="Playful Nights is premium sexual wellness and vitality for couples — clinician-prescribed ED protocols, testosterone (TRT), bioidentical HRT, GLP-1 weight loss, libido support, blood labs and recovery stacks. US-licensed clinicians. Compounded in the USA. Discreet, unmarked shipping. No insurance required." />
9
10<!-- Favicons — Playful Nights brand mark (matches subpages) -->
11<link rel="icon" href="/favicon.ico?v=3" sizes="any" />
12<link rel="icon" type="image/png" href="/icon.png?v=3" />
13<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png?v=3" />
14<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png?v=3" />
15<link rel="icon" type="image/png" sizes="192x192" href="/icon-192.png?v=3" />
16<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon.png?v=3" />
17
18<!-- Open Graph -->
19<meta property="og:type" content="website" />
20<meta property="og:site_name" content="Playful Nights" />
21<meta property="og:title" content="Playful Nights — Performance, Drive &amp; Desire." />
22<meta property="og:description" content="Sexual wellness &amp; vitality for couples. ED, TRT, HRT, GLP-1 &amp; blood labs — clinician-prescribed, discreetly delivered." />
23<meta property="og:url" content="https://www.playfulnights.com/" />
24<meta property="og:image" content="https://playfulnights-home.vercel.app/og-image.png" />
25<meta property="og:image:width" content="1200" />
26<meta property="og:image:height" content="630" />
27<meta property="og:image:alt" content="Playful Nights — sexual wellness & vitality for couples" />
28
29<meta name="twitter:card" content="summary_large_image" />
30<meta name="twitter:image" content="https://playfulnights-home.vercel.app/og-image.png" />
31<meta name="twitter:title" content="Playful Nights — Performance, Drive &amp; Desire." />
32<meta name="twitter:description" content="Sexual wellness &amp; vitality for couples. Clinician-prescribed. Discreetly delivered." />
33
34<link rel="preconnect" href="https://fonts.googleapis.com" />
35<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
36
37<style>
38  :root {
39    /* Playful Nights brand — matches mens/womens/sexual-health/hair-loss subpages */
40    --bg: #ffffff;
41    --soft: #fbf5fe;          /* lavender-50 */
42    --soft-2: #f4eefb;
43    --lavender-100: #E9D9F2;
44    --lavender-200: #D185FF;
45    --ink: #111111;
46    --muted: #333333;
47    --line: rgba(40,26,49,0.08);
48    --brand: #af4bed;
49    --brand-deep: #9043bf;
50    --brand-darker: #762ba4;
51    --brand-text: #44215A;
52    --green: #14983A;
53    --bad: #d04545;
54    --gold: #d99b1f;
55    --rose: #e3477a;
56    --rose-deep: #c12860;
57    --plum: #4b1d52;
58    --dark: #1a0f24;
59    --dark-2: #2a1a3c;
60
61    --radius: 18px;
62    --radius-lg: 28px;
63    --radius-xl: 40px;
64    --shadow-soft: 0 18px 50px -16px rgba(118,43,164,0.22);
65    --shadow-lg: 0 30px 70px -20px rgba(118,43,164,0.30);
66  }
67  * { box-sizing: border-box; }
68  html { scroll-behavior: smooth; }
69  body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); font-family: Helvetica, Arial, sans-serif; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
70  a { color: inherit; text-decoration: none; }
71  img { max-width: 100%; display: block; }
72  h1, h2, h3, h4, h5 { font-family: Helvetica, Arial, sans-serif; font-weight: 800; letter-spacing: -0.025em; margin: 0; line-height: 1.05; color: var(--ink); }
73  h1 { font-size: clamp(2.6rem, 7vw, 5.4rem); }
74  h2 { font-size: clamp(2rem, 4.2vw, 3.4rem); }
75  h3 { font-size: clamp(1.2rem, 2vw, 1.55rem); }
76  h5 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--brand-deep); }
77
78  /* Playful Nights wordmark (replaces image logo) */
79  .pn-wordmark { display: inline-flex; align-items: baseline; gap: 0; font-family: Helvetica, Arial, sans-serif; font-weight: 900; font-size: 1.32rem; letter-spacing: -0.02em; line-height: 1.3; padding-bottom: 2px; }
80  .pn-wordmark .pn-playful { color: var(--brand-darker); }
81  .pn-wordmark .pn-amp { color: var(--rose); font-style: italic; font-weight: 800; padding: 0 4px; transform: translateY(-0.5px); }
82  .pn-wordmark .pn-nights { background: linear-gradient(135deg, var(--rose) 0%, var(--brand-darker) 70%, var(--brand-text) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
83  .pn-wordmark .pn-moon { display: inline-block; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #fff5d9 0%, var(--gold) 60%, #b07d10 100%); margin-right: 8px; box-shadow: 0 0 0 2px rgba(217,155,31,0.18), 0 4px 10px -2px rgba(217,155,31,0.40); align-self: center; }
84  .pn-wordmark-footer { font-size: 1.5rem; }
85  .pn-wordmark-footer .pn-moon { width: 16px; height: 16px; }
86  p { margin: 0; color: var(--muted); }
87  .container { max-width: 1280px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 64px); }
88  .section { padding: clamp(34px, 4.2vw, 58px) 0; position: relative; }
89  .section.soft { background: linear-gradient(180deg, var(--soft) 0%, #ffffff 100%); }
90  .section.lavender { background: var(--soft); }
91  .section.dark { background: var(--dark); color: white; }
92  .section.dark h2, .section.dark h3 { color: white; }
93  .section.dark p { color: rgba(255,255,255,0.78); }
94
95  /* Animations */
96  @keyframes rise { 0% { opacity: 0; transform: translateY(16px); } 100% { opacity: 1; transform: translateY(0); } }
97  .rise { animation: rise 900ms cubic-bezier(0.22, 1, 0.36, 1) both; }
98  .rise.d1 { animation-delay: 120ms; }
99  .rise.d2 { animation-delay: 240ms; }
100  .rise.d3 { animation-delay: 360ms; }
101  .rise.d4 { animation-delay: 480ms; }
102  .reveal { opacity: 0; transform: translateY(28px); transition: opacity 850ms cubic-bezier(0.22, 1, 0.36, 1), transform 850ms cubic-bezier(0.22, 1, 0.36, 1); }
103  .reveal.is-visible { opacity: 1; transform: translateY(0); }
104  @keyframes float-y { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
105  .float-y { animation: float-y 4.5s ease-in-out infinite; }
106  @keyframes pulse-glow {
107    0%, 100% { box-shadow: 0 10px 28px -6px rgba(175,75,237,0.45); }
108    50% { box-shadow: 0 12px 36px -4px rgba(175,75,237,0.65); }
109  }
110  .pulse-glow { animation: pulse-glow 3s ease-in-out infinite; }
111  @media (prefers-reduced-motion: reduce) {
112    .rise, .reveal, .float-y, .pulse-glow { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; }
113    .reveal.is-visible { opacity: 1 !important; transform: none !important; }
114  }
115
116  .eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px; border-radius: 999px; background: rgba(175,75,237,0.10); color: var(--brand-deep); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; border: 1px solid rgba(175,75,237,0.20); }
117  .eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--brand); }
118  .eyebrow.on-dark { background: rgba(255,255,255,0.10); color: #f7e8ff; border-color: rgba(255,255,255,0.20); }
119
120  /* ============== NAV ============== */
121  .nav { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(12px); background: rgba(255,255,255,0.85); border-bottom: 1px solid var(--lavender-100); }
122  .nav-inner { display: flex; align-items: center; justify-content: space-between; height: 68px; max-width: 1320px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 64px); }
123  .nav-logo img { height: 30px; width: auto; }
124  .nav-links { display: flex; gap: 28px; align-items: center; }
125  .nav-link { font-size: 0.92rem; color: rgba(40,26,49,0.85); font-weight: 500; padding: 6px 0; transition: color .15s ease; cursor: pointer; }
126  .nav-link:hover { color: var(--brand); }
127  .nav-dropdown { position: relative; }
128  .nav-dropdown > .nav-link { display: inline-flex; align-items: center; gap: 4px; }
129  .nav-dropdown > .nav-link::after { content: "▾"; font-size: 0.7em; opacity: 0.7; }
130  .nav-menu { position: absolute; top: calc(100% + 6px); left: 0; min-width: 220px; background: white; border: 1px solid var(--lavender-100); border-radius: 16px; padding: 8px 0; box-shadow: 0 18px 40px -10px rgba(118,43,164,0.20); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: all .18s ease; z-index: 60; }
131  .nav-dropdown:hover .nav-menu, .nav-dropdown:focus-within .nav-menu { opacity: 1; visibility: visible; transform: translateY(0); }
132  .nav-menu a { display: block; padding: 10px 20px; font-size: 0.88rem; color: rgba(40,26,49,0.80); }
133  .nav-menu a:hover { background: var(--soft); color: var(--brand); }
134  .nav-right { display: flex; align-items: center; gap: 14px; }
135  .portal-btn { display: inline-flex; align-items: center; justify-content: center; height: 40px; width: 40px; border-radius: 50%; background: var(--soft); color: var(--brand-deep); border: 1px solid var(--lavender-100); }
136  .portal-btn:hover { background: var(--lavender-100); }
137  .mobile-toggle { display: none; height: 40px; width: 40px; border-radius: 50%; background: var(--soft); border: 1px solid var(--lavender-100); cursor: pointer; align-items: center; justify-content: center; color: var(--ink); }
138  @media (max-width: 980px) {
139    .nav-links { display: none; }
140    .mobile-toggle { display: inline-flex; }
141  }
142  .mobile-drawer { position: fixed; top: 68px; left: 0; right: 0; bottom: 0; background: white; z-index: 49; padding: 24px 24px 120px; display: none; overflow-y: auto; flex-direction: column; gap: 4px; }
143  .mobile-drawer.open { display: flex; }
144  .mobile-drawer a { display: block; padding: 14px 8px; border-bottom: 1px solid var(--lavender-100); font-size: 1.05rem; color: var(--ink); font-weight: 600; }
145  .mobile-drawer details { border-bottom: 1px solid var(--lavender-100); }
146  .mobile-drawer details summary { padding: 14px 8px; cursor: pointer; font-size: 1.05rem; font-weight: 700; color: var(--ink); list-style: none; }
147  .mobile-drawer details summary::-webkit-details-marker { display: none; }
148  .mobile-drawer details summary::after { content: "▾"; float: right; opacity: 0.6; }
149  .mobile-drawer details[open] summary::after { transform: rotate(180deg); }
150  .mobile-drawer details a { padding-left: 22px; font-weight: 500; font-size: 0.95rem; color: var(--muted); }
151  .drawer-cta { margin-top: 20px; }
152
153  /* ============== BUTTONS ============== */
154  .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 16px 28px; border-radius: 999px; font-weight: 600; font-size: 1rem; letter-spacing: -0.005em; transition: transform .15s ease, box-shadow .2s ease, background .2s ease; cursor: pointer; border: none; }
155  .btn-primary { background: var(--brand); color: white; box-shadow: 0 10px 28px -6px rgba(175,75,237,0.45); }
156  .btn-primary:hover { background: var(--brand-deep); transform: translateY(-2px); box-shadow: 0 16px 36px -6px rgba(144,67,191,0.55); }
157  .btn-primary-xl { padding: 20px 38px; font-size: 1.08rem; }
158  .btn-ghost { background: rgba(40,26,49,0.04); color: var(--ink); border: 1px solid var(--line); }
159  .btn-ghost:hover { background: rgba(40,26,49,0.08); }
160  .btn-ghost-light { background: rgba(255,255,255,0.08); color: white; border: 1px solid rgba(255,255,255,0.25); backdrop-filter: blur(8px); }
161  .btn-ghost-light:hover { background: rgba(255,255,255,0.16); }
162  .btn-on-image { background: rgba(255,255,255,0.95); color: var(--ink); }
163  .btn-on-image:hover { background: white; transform: translateY(-2px); }
164
165  /* ============== HERO ============== */
166  .hero { position: relative; overflow: hidden; padding: clamp(34px, 4.2vw, 58px) 0 clamp(40px, 5vw, 64px); isolation: isolate; background: linear-gradient(180deg, #ffffff 0%, #fbf5fe 100%); }
167  .hero-bg-orbs { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
168  .orb { position: absolute; border-radius: 50%; filter: blur(110px); }
169  .orb.a { width: 460px; height: 460px; background: radial-gradient(circle, rgba(209,133,255,0.28) 0%, transparent 70%); top: -200px; right: -120px; }
170  .orb.b { width: 380px; height: 380px; background: radial-gradient(circle, rgba(175,75,237,0.18) 0%, transparent 70%); bottom: -200px; left: -160px; }
171  .hero-grid { position: relative; z-index: 2; display: block; }
172  .hero-copy { max-width: 760px; margin: 0 auto; text-align: center; }
173  .hero-copy h1 { margin-top: 18px; font-size: clamp(2.2rem, 4.4vw, 3.6rem); }
174  .hero-copy h1 .accent { background: linear-gradient(135deg, #af4bed 0%, #762ba4 70%, #44215A 
174100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
175  .hero-sub { font-size: clamp(0.98rem, 1.2vw, 1.10rem); max-width: 620px; margin: 18px auto 26px; color: var(--muted); line-height: 1.55; }
176  .hero-sub strong { color: var(--ink); font-weight: 700; }
177  .hero-cta-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; justify-content: center; }
178  .hero-trust { display: flex; gap: 22px; flex-wrap: wrap; align-items: center; justify-content: center; margin-top: 24px; font-size: 0.82rem; color: var(--muted); }
179  .hero-trust-item { display: inline-flex; align-items: center; gap: 8px; }
180  .hero-trust-item svg { color: var(--brand); flex-shrink: 0; }
181  .hero-trust-divider { width: 1px; height: 16px; background: var(--line); }
182
183  /* Quick-category boxes under the hero text */
184  /* Product-tile quick categories — image fills, white text over gradient */
185  .hero-quick-cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 40px; position: relative; z-index: 2; }
186  @media (max-width: 900px) { .hero-quick-cats { grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 28px; } }
187  @media (max-width: 540px) { .hero-quick-cats { grid-template-columns: 1fr; gap: 12px; } }
188  .hero-quick-cat { position: relative; display: block; aspect-ratio: 4/5; border-radius: 20px; overflow: hidden; text-decoration: none; color: white; isolation: isolate; box-shadow: 0 16px 40px -16px rgba(40,26,49,0.30); transition: transform .35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow .35s ease; }
189  @media (max-width: 900px) { .hero-quick-cat { aspect-ratio: 5/4; } }
190  .hero-quick-cat:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -18px rgba(118,43,164,0.50); }
191  .hero-quick-cat img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(0.22, 1, 0.36, 1); z-index: 0; }
192  .hero-quick-cat:hover img { transform: scale(1.08); }
193  .hero-quick-cat::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(40,26,49,0.05) 0%, rgba(40,26,49,0.20) 45%, rgba(118,43,164,0.85) 100%); z-index: 1; transition: opacity .3s ease; }
194  .hero-quick-cat:hover::after { background: linear-gradient(180deg, rgba(40,26,49,0.05) 0%, rgba(118,43,164,0.40) 40%, rgba(118,43,164,0.92) 100%); }
195  .hero-quick-cat-body { position: relative; z-index: 2; display: flex; flex-direction: column; height: 100%; padding: 20px; }
196  .hero-quick-cat .cat-tag { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,0.92); color: var(--brand-darker); font-family: Helvetica, Arial, sans-serif; font-size: 0.66rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.10em; padding: 5px 12px; border-radius: 999px; backdrop-filter: blur(8px); box-shadow: 0 4px 12px -4px rgba(0,0,0,0.15); }
197  .hero-quick-cat .cat-tag.green { color: #0d7a2e; }
198  .hero-quick-cat .cat-tag.hot { background: linear-gradient(135deg, #ff4d2e 0%, #d61f5a 100%); color: white; box-shadow: 0 8px 20px -6px rgba(214,31,90,0.55); animation: hot-pulse 2.2s ease-in-out infinite; }
199  @keyframes hot-pulse { 0%,100% { box-shadow: 0 8px 20px -6px rgba(214,31,90,0.55); } 50% { box-shadow: 0 10px 28px -4px rgba(214,31,90,0.85); } }
200  .hero-quick-cat .cat-content { margin-top: auto; }
201  .hero-quick-cat .cat-title { font-family: Helvetica, Arial, sans-serif; font-size: clamp(1.25rem, 2vw, 1.7rem); font-weight: 900; line-height: 1.05; letter-spacing: -0.02em; color: white; margin: 0 0 6px; text-shadow: 0 2px 12px rgba(0,0,0,0.20); }
202  .hero-quick-cat .cat-sub { font-size: 0.84rem; line-height: 1.35; color: rgba(255,255,255,0.92); margin: 0 0 14px; text-shadow: 0 1px 8px rgba(0,0,0,0.30); }
203  .hero-quick-cat .cat-cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 18px; background: white; color: var(--brand-darker); border-radius: 999px; font-family: Helvetica, Arial, sans-serif; font-size: 0.86rem; font-weight: 800; transition: gap .2s ease, transform .2s ease, background .2s ease; box-shadow: 0 6px 18px -4px rgba(0,0,0,0.25); }
204  .hero-quick-cat:hover .cat-cta { gap: 12px; background: #fbf5fe; transform: translateY(-1px); }
205  .hero-quick-cat .cat-cta svg { transition: transform .25s ease; }
206  .hero-quick-cat:hover .cat-cta svg { transform: translateX(3px); }
207  .hero-card { position: absolute; background: rgba(255,255,255,0.95); backdrop-filter: blur(12px); border-radius: 18px; padding: 16px 20px; box-shadow: 0 20px 40px -16px rgba(40,26,49,0.25); }
208  .hero-card-tl { top: 24px; left: 24px; display: flex; align-items: center; gap: 12px; }
209  .hero-card-br { bottom: 24px; left: 24px; right: 24px; }
210  .hero-card-tl .star { color: var(--gold); font-size: 1rem; line-height: 1; }
211  .hero-card-tl .meta { font-size: 0.78rem; color: var(--muted); }
212  .hero-card-tl .meta strong { color: var(--ink); font-weight: 800; display: block; font-size: 0.92rem; }
213  .hero-card-br h4 { font-family: Helvetica, Arial, sans-serif; font-size: 1rem; margin-bottom: 6px; }
214  .hero-card-br p { font-size: 0.84rem; color: var(--muted); line-height: 1.4; }
215
216  /* ============== TRUST SEAL BAR ============== */
217  .trust-seal-bar { padding: 28px 0; background: white; border-bottom: 1px solid var(--lavender-100); }
218  .trust-seal-inner { display: flex; gap: 14px 40px; flex-wrap: wrap; justify-content: center; align-items: center; }
219  .seal { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); }
220  .seal-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--soft); border: 1px solid var(--lavender-100); color: var(--brand); }
221  .seal-text { display: flex; flex-direction: column; line-height: 1.2; }
222  .seal-text strong { font-family: Helvetica, Arial, sans-serif; font-size: 0.86rem; font-weight: 800; color: var(--ink); letter-spacing: -0.01em; }
223  .seal-text span { font-size: 0.74rem; color: var(--muted); font-weight: 500; }
224  @media (max-width: 760px) {
225    .trust-seal-inner { gap: 18px 24px; justify-content: space-around; }
226    .seal-icon { width: 34px; height: 34px; }
227    .seal-text strong { font-size: 0.78rem; }
228    .seal-text span { font-size: 0.68rem; }
229  }
230
231  /* ============== GENDER SPLIT (Big Editorial Cards) ============== */
232  .split-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
233  @media (max-width: 900px) { .split-grid { grid-template-columns: 1fr; } }
234  .split-card { position: relative; border-radius: var(--radius-xl); overflow: hidden; aspect-ratio: 4/5; box-shadow: var(--shadow-soft); transition: transform .25s ease, box-shadow .25s ease; cursor: pointer; }
235  .split-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
236  .split-card img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.62) saturate(0.85); transition: transform .6s cubic-bezier(0.22, 1, 0.36, 1), filter .35s ease; }
237  .split-card:hover img { transform: scale(1.04); filter: brightness(0.72) saturate(0.95); }
238  .split-card .scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(40,26,49,0.45) 0%, rgba(40,26,49,0.70) 50%, rgba(40,26,49,0.96) 100%), linear-gradient(180deg, rgba(118,43,164,0.30) 0%, rgba(118,43,164,0.55) 100%); }
239  @media (max-width: 900px) { .split-card img { filter: brightness(0.55) saturate(0.8); } .split-card .scrim { background: linear-gradient(180deg, rgba(40,26,49,0.55) 0%, rgba(40,26,49,0.80) 45%, rgba(40,26,49,0.98) 100%), linear-gradient(180deg, rgba(118,43,164,0.40) 0%, rgba(118,43,164,0.65) 100%); } }
240  .split-card .content { position: absolute; bottom: 0; left: 0; right: 0; padding: 36px clamp(24px, 4vw, 48px); color: white; z-index: 2; }
241  .split-card .label { display: inline-block; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.85); margin-bottom: 12px; }
242  .split-card h2 { color: white; font-size: clamp(2rem, 3.6vw, 3rem); margin-bottom: 14px; }
243  .split-card p { color: rgba(255,255,255,0.92); margin-bottom: 20px; font-size: 1rem; max-width: 420px; }
244  .split-card .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
245  .split-card .chip { font-size: 0.78rem; padding: 6px 14px; border-radius: 999px; background: rgba(255,255,255,0.18); border: 1px solid rgba(255,255,255,0.35); backdrop-filter: blur(8px); color: white; font-weight: 600; }
246
247  /* ============== OFFERING GRID ============== */
248  .offer-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 24px; }
249  .offer-grid .offer-card { grid-column: span 2; }
250  /* Center the orphan last row (8 cards in a 3-col grid leaves 2 at the bottom) */
251  .offer-grid .offer-card:nth-last-child(2):nth-child(7) { grid-column: 2 / span 2; }
252  @media (max-width: 980px) {
253    .offer-grid { grid-template-columns: repeat(2, 1fr); }
254    .offer-grid .offer-card { grid-column: auto; }
255    .offer-grid .offer-card:nth-last-child(2):nth-child(7) { grid-column-start: auto; }
256  }
257  @media (max-width: 600px) {
258    .offer-grid { grid-template-columns: 1fr; }
259  }
260  .offer-card { background: white; border: 1px solid var(--lavender-100); border-radius: var(--radius-lg); overflow: hidden; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; display: flex; flex-direction: column; box-shadow: 0 8px 24px -10px rgba(118,43,164,0.08); scroll-margin-top: 84px; }
261  .offer-card:hover { transform: translateY(-6px); border-color: rgba(175,75,237,0.4); box-shadow: var(--shadow-soft); }
262  .offer-img-wrap { aspect-ratio: 4/3; overflow: hidden; position: relative; background: var(--soft); }
263  .offer-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(0.22, 1, 0.36, 1); }
264  .offer-card:hover .offer-img-wrap img { transform: scale(1.05); }
265  .offer-tag { position: absolute; top: 14px; left: 14px; background: rgba(255,255,255,0.95); backdrop-filter: blur(8px); padding: 5px 12px; border-radius: 999px; font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: var(--brand-deep); }
266  .offer-tag.green { color: var(--green); }
267  /* Highlight variants */
268  .offer-tag.hot { background: linear-gradient(135deg, #ff4d2e 0%, #d61f5a 100%); color: white; box-shadow: 0 8px 20px -6px rgba(214,31,90,0.55); animation: offer-tag-pulse 2.2s ease-in-out infinite; }
269  .offer-tag.trending { background: linear-gradient(135deg, var(--brand) 0%, var(--brand-darker) 100%); color: white; box-shadow: 0 8px 20px -6px rgba(118,43,164,0.50); }
270  .offer-tag.new { background: linear-gradient(135deg, #14983A 0%, #0a6e29 100%); color: white; box-shadow: 0 8px 20px -6px rgba(20,152,58,0.45); }
271  .offer-tag.popular { background: linear-gradient(135deg, #d99b1f 0%, #b8810e 100%); color: white; box-shadow: 0 8px 20px -6px rgba(217,155,31,0.50); }
272  @keyframes offer-tag-pulse { 0%,100% { box-shadow: 0 8px 20px -6px rgba(214,31,90,0.55); } 50% { box-shadow: 0 10px 28px -4px rgba(214,31,90,0.85); } }
273  .offer-body { padding: 24px 26px 26px; display: flex; flex-direction: column; flex: 1; }
274  .offer-body h3 { font-size: 1.3rem; margin-bottom: 8px; }
275  .offer-body p { font-size: 0.94rem; line-height: 1.5; flex: 1; margin-bottom: 18px; }
276  .offer-meta { display: flex; flex-direction: column; gap: 14px; padding-top: 18px; border-top: 1px solid var(--lavender-100); }
277  /* Big standout price — gradient brand text */
278  .offer-price { font-family: Helvetica, Arial, sans-serif; font-weight: 900; font-size: 1.65rem; line-height: 1; letter-spacing: -0.02em;     display: inline-flex; align-items: baseline; gap: 4px; color: #111111;}
279  .offer-price small { font-family: Helvetica, Arial, sans-serif; font-weight: 600; font-size: 0.78rem; color: var(--muted); background: none; -webkit-text-fill-color: var(--muted); letter-spacing: 0; }
280  /* Real CTA pill button — solid brand gradient, full-width */
281  .offer-cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 20px; border-radius: 999px; background: linear-gradient(135deg, var(--brand) 0%, var(--brand-darker) 100%); color: white; font-family: Helvetica, Arial, sans-serif; font-weight: 800; font-size: 0.92rem; letter-spacing: -0.005em; transition: gap .2s ease, transform .2s ease, box-shadow .25s ease; box-shadow: 0 10px 24px -8px rgba(175,75,237,0.45); }
282  .offer-card:hover .offer-cta { gap: 12px; transform: translateY(-1px); box-shadow: 0 16px 32px -6px rgba(118,43,164,0.55); }
283  .offer-cta::after { content: "→"; font-size: 1.05rem; line-height: 1; transition: transform .25s ease; }
284  .offer-card:hover .offer-cta::after { transform: translateX(3px); }
285
286  /* ============== HOW IT WORKS ============== */
287  .how-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
288  @media (max-width: 900px) { .how-grid { grid-template-columns: 1fr; } }
289  .how-card { background: white; border: 1px solid var(--lavender-100); border-radius: var(--radius-lg); padding: 36px 32px; position: relative; transition: transform .2s ease; }
290  .how-card:hover { transform: translateY(-4px); }
291  .how-num { font-family: Helvetica, Arial, sans-serif; font-size: 3.5rem; font-weight: 900; line-height: 1;     margin-bottom: 18px; color: #111111;}
292  .how-card h3 { font-size: 1.4rem; margin-bottom: 12px; }
293  .how-card p { font-size: 0.98rem; }
294  .how-card .icon-row { margin-top: 24px; display: flex; align-items: center; gap: 10px; padding-top: 18px; border-top: 1px solid var(--lavender-100); color: var(--brand-deep); font-size: 0.84rem; font-weight: 700; }
295
296  /* ============== STATS / SOCIAL PROOF ============== */
297  .stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
298  @media (max-width: 900px) { .stats-row { grid-template-columns: repeat(2, 1fr); } }
299  .stat { text-align: center; padding: 28px 20px; background: white; border: 1px solid var(--lavender-100); border-radius: var(--radius); }
300  .stat-num { font-family: Helvetica, Arial, sans-serif; font-size: clamp(2.4rem, 4vw, 3.4rem); font-weight: 900; line-height: 1; color: #111111;}
301  .stat-label { margin-top: 10px; font-size: 0.9rem; color: var(--muted); font-weight: 500; }
302
303  /* ============== WHY DIRECTCARE (Comparison) ============== */
304  .why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
305  @media (max-width: 900px) { .why-grid { grid-template-columns: 1fr; } }
306  .why-card { background: white; border-radius: var(--radius-lg); padding: 36px 32px; border: 1px solid var(--lavender-100); }
307  .why-card.dc { background: linear-gradient(160deg, var(--soft) 0%, white 100%); border-color: rgba(175,75,237,0.30); box-shadow: var(--shadow-soft); }
308  .why-card h3 { font-size: 1.4rem; margin-bottom: 22px; }
309  .why-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
310  .why-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 0.96rem; line-height: 1.5; color: var(--ink); }
311  .why-card.dc .why-list li { color: var(--ink); }
312  .why-card:not(.dc) .why-list li { color: var(--muted); }
313  .why-mark { flex: 0 0 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 0.78rem; font-weight: 800;
313 margin-top: 1px; }
314  .why-mark.yes { background: rgba(20,152,58,0.12); color: var(--green); }
315  .why-mark.no { background: rgba(208,69,69,0.12); color: var(--bad); }
316  .why-tag { display: inline-block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.14em; font-weight: 800; margin-bottom: 6px; }
317  .why-card.dc .why-tag { color: var(--brand); }
318  .why-card:not(.dc) .why-tag { color: var(--muted); }
319  @media (max-width: 620px) {
320    .why-grid { gap: 16px; }
321    .why-card { padding: 24px 20px; border-radius: 20px; }
322    .why-card h3 { font-size: 1.18rem; margin-bottom: 16px; }
323    .why-list { gap: 11px; }
324    .why-list li { font-size: 0.9rem; line-height: 1.45; gap: 10px; }
325    .why-mark { flex: 0 0 20px; height: 20px; font-size: 0.72rem; }
326    .why-tag { font-size: 0.66rem; letter-spacing: 0.12em; }
327  }
328
329  /* ============== TESTIMONIALS ============== */
330  .testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
331  @media (max-width: 900px) { .testi-grid { grid-template-columns: 1fr; } }
332  .testi { background: white; border: 1px solid var(--lavender-100); border-radius: var(--radius-lg); padding: 32px 28px; box-shadow: 0 8px 24px -10px rgba(118,43,164,0.10); }
333  .testi .stars { color: var(--gold); font-size: 1rem; line-height: 1; margin-bottom: 16px; letter-spacing: 2px; }
334  .testi blockquote { font-family: Helvetica, Arial, sans-serif; font-size: 1.05rem; font-weight: 600; line-height: 1.45; color: var(--ink); margin: 0 0 22px; }
335  .testi .who { display: flex; align-items: center; gap: 12px; padding-top: 18px; border-top: 1px solid var(--lavender-100); }
336  .testi .who img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; }
337  .testi .who-name { font-weight: 700; color: var(--ink); font-size: 0.92rem; line-height: 1.2; }
338  .testi .who-meta { font-size: 0.78rem; color: var(--muted); }
339
340  /* ============== FAQ ============== */
341  .faq-section { background: linear-gradient(180deg, #ffffff 0%, var(--soft) 100%); padding-bottom: clamp(32px, 4vw, 48px); }
342  .faq-layout { display: grid; grid-template-columns: minmax(260px, 320px) 1fr; gap: clamp(36px, 5vw, 80px); align-items: flex-start; }
343  @media (max-width: 900px) { .faq-layout { grid-template-columns: 1fr; gap: 32px; } }
344  .faq-side { position: sticky; top: 96px; }
345  @media (max-width: 900px) { .faq-side { position: static; } }
346  .faq-side h2 { font-size: clamp(1.9rem, 3.2vw, 2.6rem); margin: 16px 0 18px; line-height: 1.05; }
347  .faq-side h2 .accent { color: #111111; font-style: italic; }
348  .faq-side p { font-size: 0.96rem; color: var(--muted); line-height: 1.6; margin-bottom: 28px; }
349  .faq-contact-card { background: white; border: 1px solid var(--lavender-100); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow-soft); }
350  .faq-contact-card h4 { font-family: Helvetica, Arial, sans-serif; font-size: 1.0rem; font-weight: 800; margin: 0 0 6px; color: var(--ink); }
351  .faq-contact-card p { font-size: 0.88rem; color: var(--muted); margin: 0 0 16px; line-height: 1.5; }
352  .faq-contact-card .btn { padding: 12px 22px; font-size: 0.92rem; }
353  .faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
354  @media (max-width: 760px) { .faq-grid { grid-template-columns: 1fr; } }
355  .faq { background: white; border: 1px solid var(--lavender-100); border-radius: 14px; overflow: hidden; transition: border-color .2s ease, box-shadow .2s ease; align-self: start; }
356  .faq:hover { border-color: rgba(175,75,237,0.30); box-shadow: 0 12px 28px -12px rgba(118,43,164,0.18); }
357  .faq[open] { border-color: rgba(175,75,237,0.40); box-shadow: 0 14px 32px -14px rgba(118,43,164,0.22); }
358  .faq summary { padding: 16px 20px; cursor: pointer; font-weight: 700; font-size: 0.95rem; color: var(--ink); list-style: none; display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; font-family: Helvetica, Arial, sans-serif; line-height: 1.3; }
359  .faq summary::-webkit-details-marker { display: none; }
360  .faq summary::after { content: "+"; font-size: 1.3rem; line-height: 1; color: var(--brand); font-weight: 400; transition: transform .2s ease; flex-shrink: 0; padding-top: 2px; }
361  .faq[open] summary::after { content: "−"; }
362  .faq .faq-body { padding: 0 20px 18px; color: var(--muted); font-size: 0.88rem; line-height: 1.55; }
363
364  /* ============== RX CARD SECTION (transparent, blended) ============== */
365  .rxcard-section { position: relative; padding-top: clamp(48px, 7vw, 88px); padding-bottom: clamp(48px, 7vw, 88px); }
366  .rxcard-layout { position: relative; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
367  @media (max-width: 900px) { .rxcard-layout { grid-template-columns: 1fr; gap: 36px; } }
368  .rxcard-copy { position: relative; z-index: 2; }
369  .rxcard-copy h2 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); margin: 14px 0 14px; line-height: 1.05; }
370  .rxcard-copy h2 .accent { color: #111111; font-style: italic; }
371  .rxcard-copy p.lead { font-size: 1.0rem; color: var(--muted); margin: 0 0 22px; max-width: 540px; line-height: 1.55; }
372
373  /* TAB pills */
374  .rxcard-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; padding: 0; list-style: none; }
375  .rxcard-tab { background: rgba(255,255,255,0.65); border: 1px solid var(--lavender-100); border-radius: 999px; padding: 9px 16px; font-family: Helvetica, Arial, sans-serif; font-size: 0.84rem; font-weight: 700; color: var(--ink); cursor: pointer; transition: all .2s ease; display: inline-flex; align-items: center; gap: 8px; backdrop-filter: blur(8px); }
376  .rxcard-tab:hover { border-color: rgba(175,75,237,0.35); transform: translateY(-1px); }
377  .rxcard-tab[aria-selected="true"] { background: linear-gradient(135deg, var(--brand) 0%, var(--brand-darker) 100%); border-color: transparent; color: white; box-shadow: 0 10px 24px -8px rgba(175,75,237,0.45); }
378  .rxcard-tab .tab-icon { width: 18px; height: 18px; display: grid; place-items: center; }
379
380  /* TAB body */
381  .rxcard-panel { min-height: 130px; padding: 22px 24px; background: rgba(255,255,255,0.55); backdrop-filter: blur(12px); border: 1px solid var(--lavender-100); border-radius: 18px; transition: all .35s cubic-bezier(0.22, 1, 0.36, 1); }
382  .rxcard-panel-content { display: none; opacity: 0; animation: rxcard-fade .45s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
383  .rxcard-panel-content.is-active { display: block; }
384  @keyframes rxcard-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
385  .rxcard-panel h3 { font-family: Helvetica, Arial, sans-serif; font-size: 1.15rem; font-weight: 800; color: var(--ink); margin: 0 0 8px; letter-spacing: -0.01em; }
386  .rxcard-panel p { font-size: 0.94rem; color: var(--muted); line-height: 1.55; margin: 0; }
387  .rxcard-panel p strong { color: var(--ink); font-weight: 700; }
388
389  .rxcard-cta-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin-top: 22px; }
390  .rxcard-disclaimer { margin-top: 16px; font-size: 0.74rem; color: var(--muted); line-height: 1.5; max-width: 580px; }
391
392  /* Visual — no frame, blended */
393  .rxcard-visual { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; }
394  .rxcard-image-frame { position: relative; transform: rotate(-4deg); transition: transform .6s cubic-bezier(0.22, 1, 0.36, 1); }
395  .rxcard-image-frame:hover { transform: rotate(-1deg) scale(1.04); }
396  .rxcard-image-frame img { width: 100%; max-width: 460px; height: auto; border-radius: 18px; filter: drop-shadow(0 30px 50px rgba(118,43,164,0.30)) drop-shadow(0 8px 16px rgba(40,26,49,0.15)); }
397  .rxcard-savings-badge { position: absolute; top: -18px; right: -14px; background: white; border-radius: 999px; padding: 12px 20px; box-shadow: 0 18px 40px -10px rgba(40,26,49,0.25); display: flex; flex-direction: column; align-items: center; text-align: center; line-height: 1; font-family: Helvetica, Arial, sans-serif; border: 2px solid var(--brand); transform: rotate(8deg); animation: badge-bounce 4s ease-in-out infinite; }
398  @keyframes badge-bounce { 0%,100% { transform: rotate(8deg) translateY(0); } 50% { transform: rotate(8deg) translateY(-6px); } }
399  .rxcard-savings-badge .pct { font-size: 1.35rem; font-weight: 900; color: #111111;}
400  .rxcard-savings-badge .lbl { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); margin-top: 2px; }
401  @media (max-width: 540px) {
402    .rxcard-image-frame img { max-width: 320px; }
403    .rxcard-savings-badge { top: -14px; right: -6px; padding: 9px 14px; }
404    .rxcard-savings-badge .pct { font-size: 1.05rem; }
405  }
406
407  /* ============== FINAL CTA ============== */
408  .final-cta { position: relative; background: linear-gradient(135deg, var(--brand-darker) 0%, var(--brand) 50%, var(--brand-deep) 100%); color: white; border-radius: var(--radius-xl); padding: clamp(48px, 8vw, 96px) clamp(28px, 6vw, 80px); text-align: center; overflow: hidden; }
409  .final-cta::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 50% at 20% 20%, rgba(255,255,255,0.18), transparent 60%), radial-gradient(ellipse 50% 50% at 80% 80%, rgba(255,255,255,0.10), transparent 60%); pointer-events: none; }
410  .final-cta > * { position: relative; z-index: 2; }
411  .final-cta h2 { color: white; max-width: 760px; margin: 22px auto 24px; }
412  .final-cta p { color: rgba(255,255,255,0.88); max-width: 620px; margin: 0 auto 36px; font-size: 1.1rem; }
413
414  /* ============== FOOTER ============== */
415  .social-row { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
416  .social-row a { width: 36px; height: 36px; border-radius: 50%; background: var(--soft); border: 1px solid var(--lavender-100); display: grid; place-items: center; color: var(--brand-deep); transition: transform .15s ease, background .15s ease, color .15s ease; }
417  .social-row a:hover { background: var(--brand); color: white; transform: translateY(-2px); }
418  footer { background: var(--soft); border-top: 1px solid var(--lavender-100); padding: 64px 0 28px; }
419  .foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; gap: 40px; }
420  @media (max-width: 980px) { .foot-grid { grid-template-columns: 1fr 1fr; } .foot-brand { grid-column: 1 / -1; } }
421  @media (max-width: 540px) { .foot-grid { grid-template-columns: 1fr; } }
422  .foot-brand img { height: 30px; margin-bottom: 18px; }
423  .foot-brand p { font-size: 0.92rem; line-height: 1.6; max-width: 360px; }
424  .foot-col h5 { font-family: Helvetica, Arial, sans-serif; font-size: 0.82rem; font-weight: 800; color: var(--ink); text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 18px; }
425  .foot-col a { display: block; padding: 6px 0; color: var(--muted); font-size: 0.92rem; transition: color .15s ease; }
426  .foot-col a:hover { color: var(--brand); }
427  .legal { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; padding-top: 32px; margin-top: 48px; border-top: 1px solid var(--lavender-100); font-size: 0.82rem; color: var(--muted); }
428  .legal-disclaimer { margin-top: 24px; font-size: 0.76rem; color: var(--muted); line-height: 1.55; }
429  .legal-disclaimer strong { color: rgba(91,77,101,0.95); }
430
431  /* ============== UTIL ============== */
432  .section-head { text-align: center; max-width: 760px; margin: 0 auto 56px; }
433  .section-head p { margin-top: 18px; font-size: 1.06rem; }
434  .section-head h2 { margin-top: 22px; }
435
436  @media (max-width: 760px) {
437    .section { padding: 64px 0; }
438    .section-head { margin-bottom: 40px; }
439    .hero { padding: 48px 0 64px; }
440    footer { padding: 48px 0 24px; }
441    .btn-primary-xl { padding: 18px 30px; font-size: 1rem; }
442  }
443
444  /* ============== SCROLL PROGRESS BAR ============== */
445  .scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; background: transparent; z-index: 100; pointer-events: none; }
446  .scroll-progress-bar { height: 100%; width: 0%; background: linear-gradient(90deg, var(--brand) 0%, var(--brand-darker) 100%); box-shadow: 0 0 12px rgba(175,75,237,0.6); transition: width 60ms linear; }
447
448  /* ============== ANIMATED ORBS (drifting in hero) ============== */
449  @keyframes drift-a { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(40px, -30px) scale(1.08); } }
450  @keyframes drift-b { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-50px, 40px) scale(1.1); } }
451  .orb.a { animation: drift-a 14s ease-in-out infinite; }
452  .orb.b { animation: drift-b 17s ease-in-out infinite; }
453
454  /* ============== KINETIC HERO WORD ROTATOR ============== */
455  .hero-rotator { display: block; position: relative; min-height: 1.05em; }
456  .hero-rotator-word { position: absolute; top: 0; left: 0; right: 0; white-space: nowrap; font-size: clamp(2.2rem, 5.8vw, 4.6rem); letter-spacing: -0.03em; background: linear-gradient(135deg, #af4bed 0%, #762ba4 70%, #44215A 
456100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
457
458  /* ============== HERO FLOATING SHAPES ============== */
459  .hero-shapes { display: none !important; }
460  .hero-shape { display: none !important; }
461  .hero-shape svg { display: none; }
462  @keyframes float-rotate { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-14px) rotate(8deg); } }
463  @keyframes float-rotate-rev { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(12px) rotate(-10deg); } }
464  .hero-shape.s1 { top: 18%; left: 6%; animation: float-rotate 7s ease-in-out infinite; opacity: 0.4; }
465  .hero-shape.s2 { top: 70%; left: 3%; animation: float-rotate-rev 9s ease-in-out infinite; opacity: 0.3; }
466  .hero-shape.s3 { top: 12%; right: 48%; animation: float-rotate 11s ease-in-out infinite; opacity: 0.5; }
467  .hero-shape.s4 { bottom: 14%; left: 44%; animation: float-rotate-rev 8s ease-in-out infinite; opacity: 0.35; }
468  @media (max-width: 980px) { .hero-shape.s3, .hero-shape.s4 { display: none; } .hero-shape.s1 { left: -2%; top: 4%; opacity: 0.25; } .hero-shape.s2 { left: -3%; opacity: 0.2; } }
469
470  /* ============== MARQUEE BAND ============== */
471  .marquee-band { background: var(--soft); border-top: 1px solid var(--lavender-100); border-bottom: 1px solid var(--lavender-100); overflow: hidden; padding: 22px 0; position: relative; }
472  .marquee-band::before, .marquee-band::after { content: ""; position: absolute; top: 0; bottom: 0; width: 80px; z-index: 2; pointer-events: none; }
473  .marquee-band::before { left: 0; background: linear-gradient(90deg, var(--soft) 0%, transparent 100%); }
474  .marquee-band::after { right: 0; background: linear-gradient(-90deg, var(--soft) 0%, transparent 100%); }
475  .marquee-track { display: inline-flex; gap: 44px; white-space: nowrap; animation: marquee-scroll 38s linear infinite; font-family: Helvetica, Arial, sans-serif; font-size: 1.02rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brand-darker); align-items: center; }
476  .marquee-track .dot { color: var(--brand); opacity: 0.55; font-size: 1.4rem; }
477  .marquee-track .star { color: var(--brand); font-size: 0.85rem; }
478  @keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
479  .marquee-band:hover .marquee-track { animation-play-state: paused; }
480
481  /* ============== 3D TILT OFFERING CARDS ============== */
482  .offer-card { transform-style: preserve-3d; will-change: transform; perspective: 800px; }
483  .offer-img-wrap { transform: translateZ(0); transition: transform .5s cubic-bezier(0.22, 1, 0.36, 1); }
484  .offer-card:hover .offer-img-wrap { transform: translateZ(20px); }
485  .offer-card .offer-body h3, .offer-card .offer-body p, .offer-card .offer-meta { transition: transform .5s cubic-bezier(0.22, 1, 0.36, 1); }
486  .offer-card:hover .offer-body h3 { transform: translateZ(14px); }
487  .offer-card:hover .offer-body p { transform: translateZ(8px); }
488
489  /* ============== HOW IT WORKS — SVG CONNECTOR ============== */
490  .how-section { position: relative; }
491  .how-grid { position: relative; z-index: 2; }
492  .how-grid > .how-card { z-index: 2; }
493  .how-connector { position: absolute; top: 16px; left: 4%; right: 4%; height: 100px; z-index: 1; pointer-events: none; opacity: 0.55; overflow: visible; }
494  @media (max-width: 900px) { .how-connector { display: none; } }
495  .how-connector path { stroke-dasharray: 1400; stroke-dashoffset: 1400; }
496  .how-connector.is-visible path { animation: how-draw 2.2s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
497  @keyframes how-draw { to { stroke-dashoffset: 0; } }
498
499  /* ============== AURORA FINAL CTA ============== */
500  .final-cta.aurora { background: linear-gradient(135deg, #4a1071 0%, #762ba4 30%, #af4bed 60%, #9043bf 100%); background-size: 280% 280%; animation: aurora-shift 14s ease-in-out infinite; }
501  @keyframes aurora-shift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
502  .final-cta.aurora::before { background: radial-gradient(ellipse 50% 50% at 20% 30%, rgba(231,176,255,0.4), transparent 60%), radial-gradient(ellipse 50% 50% at 80% 70%, rgba(208,133,255,0.30), transparent 60%), radial-gradient(ellipse 60% 50% at 50% 100%, rgba(118,43,164,0.45), transparent 60%); animation: aurora-glow 11s ease-in-out infinite; }
503  @keyframes aurora-glow { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } }
504  .final-cta-sparkle { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: white; box-shadow: 0 0 12px 2px rgba(255,255,255,0.9); pointer-events: none; opacity: 0; }
505  @keyframes sparkle-twinkle { 0%, 100% { opacity: 0; transform: scale(0.5); } 50% { opacity: 1; transform: scale(1); } }
506
507  /* ============== MAGNETIC CTA ============== */
508  @media (hover: hover) and (pointer: fine) { .magnetic { transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1); } }
509
510  /* ============== TICKER ============== */
511  .ticker { font-variant-numeric: tabular-nums; }
512
513  /* ============== GENDER SPLIT — SHIMMER ON HOVER ============== */
514  .split-card { position: relative; }
515  .split-card::after { content: ""; position: absolute; top: 0; left: -75%; height: 100%; width: 50%; background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.35) 50%, transparent 100%); transform: skewX(-22deg); pointer-events: none; transition: left .9s cubic-bezier(0.22, 1, 0.36, 1); z-index: 3; }
516  .split-card:hover::after { left: 130%; }
517
518  /* ============== TESTIMONIAL SPOTLIGHT ============== */
519  .testi { position: relative; overflow: hidden; }
520  .testi::before { content: ""; position: absolute; inset: -2px; background: radial-gradient(circle 180px at var(--mx, 50%) var(--my, 50%), rgba(175,75,237,0.10), transparent 70%); opacity: 0; transition: opacity .3s ease; pointer-events: none; z-index: 0; border-radius: var(--radius-lg); }
521  .testi:hover::before { opacity: 1; }
522  .testi > * { position: relative; z-index: 1; }
523
524  /* ============== FAQ ANIMATED ICON ============== */
525  .faq summary::after { transform: rotate(0deg); transition: transform .25s ease, color .25s ease; }
526  .faq[open] summary::after { transform: rotate(180deg); }
527
528  @media (prefers-reduced-motion: reduce) {
529    .orb.a, .orb.b, .hero-shape, .marquee-track, .final-cta.aurora, .final-cta.aurora::before { animation: none !important; }
530  }
531</style>
532<style>
533/* ===== REDESIGN: cinematic motion hero + scroll system ===== */
534.hero { position: relative; min-height: 92vh; display: flex; align-items: center; justify-content: center; overflow: hidden; isolation: isolate; padding: 80px 0; background: #1a0f24; }
535.hero-bg-orbs, .hero-shapes { display: none !important; }
536.hero-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; will-change: transform; }
537.hero-media img, .hero-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
538.hero-media img { animation: kenburns 24s ease-in-out infinite alternate; }
539@keyframes kenburns { from { transform: scale(1.08); } to { transform: scale(1.20); } }
540.hero::after { content:""; position:absolute; inset:0; z-index:1; background: linear-gradient(180deg, rgba(26,15,36,0.55) 0%, rgba(26,15,36,0.50) 45%, rgba(26,15,36,0.88) 100%); }
541.hero .container { position: relative; z-index: 2; }
542.hero-copy { max-width: 840px; margin: 0 auto; text-align: center; }
543.hero-copy .eyebrow { background: rgba(255,255,255,0.12); color:#f3e3ff; border-color: rgba(255,255,255,0.25); }
544.hero-copy h1 { color:#fff; margin-top: 18px; font-size: clamp(2.6rem, 6vw, 4.6rem); line-height: 1.03; }
545.hero-copy .hero-sub { color: rgba(255,255,255,0.9); max-width: 600px; }
546.hero-copy .hero-sub strong { color:#fff; }
547.hero-copy .hero-trust { color: rgba(255,255,255,0.82); }
548.hero-copy .hero-trust-item svg { color:#d185ff; }
549.hero-copy .hero-trust-divider { background: rgba(255,255,255,0.25); }
550.hero .btn-ghost { background: rgba(255,255,255,0.12); color:#fff; border:1px solid rgba(255,255,255,0.35); }
551.hero-rotator-word { background: linear-gradient(135deg,#f7c2ff 0%, #d185ff 55%, #ffffff 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
552.scroll-cue { position:absolute; left:50%; bottom:24px; transform:translateX(-50%); z-index:3; display:flex; flex-direction:column; align-items:center; gap:8px; color:rgba(255,255,255,0.7); font-size:0.66rem; letter-spacing:0.2em; text-transform:uppercase; }
553.scroll-cue .mouse { width:24px; height:38px; border:2px solid rgba(255,255,255,0.55); border-radius:14px; position:relative; }
554.scroll-cue .mouse::after { content:""; position:absolute; top:7px; left:50%; transform:translateX(-50%); width:3px; height:7px; border-radius:2px; background:rgba(255,255,255,0.85); animation: scrollwheel 1.6s ease-in-out infinite; }
555@keyframes scrollwheel { 0%{opacity:0;transform:translate(-50%,0);} 35%{opacity:1;} 100%{opacity:0;transform:translate(-50%,12px);} }
556.reveal { opacity:0; transform: translateY(48px); transition: opacity .85s cubic-bezier(0.22,1,0.36,1), transform .85s cubic-bezier(0.22,1,0.36,1); }
557.reveal.in { opacity:1; transform:none; }
558.stack { position: relative; }
559.stack-panel { position: sticky; top: 0; min-height: 100vh; display:flex; align-items:center; overflow:hidden; isolation:isolate; }
560.stack-panel img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
561.stack-panel::after { content:""; position:absolute; inset:0; z-index:1; }
562.stack-panel.p-her::after { background: linear-gradient(90deg, rgba(160,39,100,0.88) 0%, rgba(160,39,100,0.35) 62%, rgba(26,15,36,0.15) 100%); }
563.stack-panel.p-him::after { background: linear-gradient(90deg, rgba(62,40,100,0.88) 0%, rgba(62,40,100,0.35) 62%, rgba(26,15,36,0.15) 100%); }
564.stack-panel.p-couples::after { background: linear-gradient(90deg, rgba(118,43,164,0.88) 0%, rgba(118,43,164,0.35) 62%, rgba(26,15,36,0.15) 100%); }
565.stack-panel .container { position:relative; z-index:2; }
566.stack-copy { max-width: 540px; color:#fff; }
567.stack-copy .eyebrow { background: rgba(255,255,255,0.16); color:#fff; border-color: rgba(255,255,255,0.3); }
568.stack-copy h2 { color:#fff; font-size: clamp(2rem,4.4vw,3.4rem); margin-top:14px; }
569.stack-copy p { color: rgba(255,255,255,0.92); font-size:1.08rem; margin:16px 0 26px; }
570@media (max-width:700px){ .stack-panel{ min-height: 86vh; } }
571@media (prefers-reduced-motion: reduce){ .hero-media img{animation:none!important;} .reveal{opacity:1!important;transform:none!important;} }
572</style>
573<style>.eyebrow{display:none!important}.section{padding-top:clamp(34px,4.2vw,58px)!important;padding-bottom:clamp(34px,4.2vw,58px)!important}</style>
574<style>
575/* OFFERINGS -> horizontal carousel */
576#offerings .offer-grid{ display:flex!important; grid-template-columns:none!important; gap:18px; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; padding:4px 2px 20px; scroll-padding-left:2px; scrollbar-width:thin; }
577#offerings .offer-grid .offer-card{ grid-column:auto!important; flex:0 0 clamp(258px,80vw,320px); scroll-snap-align:start; }
578#offerings .offer-grid::-webkit-scrollbar{ height:8px; }
579#offerings .offer-grid::-webkit-scrollbar-track{ background:transparent; }
580#offerings .offer-grid::-webkit-scrollbar-thumb{ background:var(--lavender-100); border-radius:8px; }
581.carousel-ctrls{ display:flex; gap:10px; justify-content:flex-end; margin:-8px 0 16px; }
582.carousel-ctrls button{ width:46px; height:46px; border-radius:50%; border:1px solid var(--lavender-100); background:#fff; color:#762ba4; font-size:1.5rem; line-height:1; cursor:pointer; display:grid; place-items:center; transition:background .15s ease, transform .15s ease, box-shadow .15s ease; box-shadow:0 6px 16px -8px rgba(118,43,164,0.25); }
583.carousel-ctrls button:hover{ background:#fbf5fe; transform:translateY(-1px); }
584.carousel-ctrls button:active{ transform:translateY(0); }
585.carousel-dots{ display:none; }
586.carousel-swipe-hint{ display:none; }
587@media (max-width:700px){
588  .carousel-ctrls{ display:none; }
589  .carousel-swipe-hint{ display:flex; align-items:center; justify-content:center; gap:8px; margin:-2px 0 14px; font-size:0.9rem; font-weight:700; color:#762ba4; transition:opacity .4s ease; }
590  .carousel-swipe-hint svg{ animation:swipenudge 1.5s ease-in-out infinite; }
591  .carousel-dots{ display:flex; gap:8px; justify-content:center; align-items:center; margin:18px 0 0; }
592  .carousel-dots button{ width:8px; height:8px; padding:0; border:none; border-radius:50%; background:var(--lavender-100); cursor:pointer; transition:width .25s ease, background .25s ease; }
593  .carousel-dots button.active{ width:26px; border-radius:8px; background:linear-gradient(135deg,#af4bed,#762ba4); }
594}
595@keyframes swipenudge{ 0%,100%{ transform:translateX(0);} 50%{ transform:translateX(7px);} }
596</style>
597<style>
598/* ===== MOBILE READABILITY OVERRIDES ===== */
599@media (max-width: 760px){
600  body { font-size: 1.07rem; }
601  p { font-size: 1.05rem; line-height: 1.62; }
602  /* hero: bigger rotating heading, less empty space above it */
603  .hero { min-height: 72vh !important; padding-top: 34px !important; padding-bottom: 50px !important; }
604  .hero h1, .hero-copy h1 { font-size: clamp(3.1rem, 12.5vw, 4rem) !important; margin-top: 4px !important; line-height: 1.05 !important; }
605  .hero-sub, .hero-copy .hero-sub, .hero p.lead, .hero .lead { font-size: 1.16rem !important; line-height: 1.6 !important; }
606  .hero-trust, .hero-trust-item { font-size: 1rem !important; }
607  .scroll-cue { display: none !important; }
608  /* headings + body copy bigger everywhere */
609  h2 { font-size: clamp(2.1rem, 7.6vw, 2.7rem) !important; }
610  .stack-copy h2 { font-size: clamp(2.2rem, 8.4vw, 3rem) !important; }
611  .stack-copy p { font-size: 1.1rem !important; }
612  .offer-card h3 { font-size: 1.3rem !important; }
613  .offer-card p, .addon-card p, .need-card p, .how-card p, .faq .faq-body,
614  .pair-card .pair-sub, .pair-card ul li, .discreet-list li p, .section-head p,
615  .foot-brand p { font-size: 1.05rem !important; line-height: 1.6 !important; }
616  .offer-cta, .offer-price, .addon-tag, .foot-col a, .nav-link, .faq summary { font-size: 1.02rem !important; }
617}
618</style>
619<link href="https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,600;1,700&display=swap" rel="stylesheet"/>
620<link rel="stylesheet" href="/luxe.css"/>
621</head>
622<body>
623
624<!-- ============ SCROLL PROGRESS BAR ============ -->
625<div class="scroll-progress" aria-hidden="true"><div class="scroll-progress-bar" id="scroll-progress-bar"></div></div>
626
627<!-- ============ NAV ============ -->
628<nav class="nav">
629  <div class="nav-inner">
630    <a class="nav-logo" href="/" aria-label="Playful Nights Home">
631      <span class="pn-wordmark"><span class="pn-moon" aria-hidden="true"></span><span class="pn-playful">Playful</span><span class="pn-amp">·</span><span class="pn-nights">Nights</span></span>
632    </a>
633    <div class="nav-links">
634      <a class="nav-link" href="/for-her">For Her</a>
635      <a class="nav-link" href="/for-him">For Him</a>
636      <a class="nav-link" href="/events">Events</a>
637    </div>
638    <div class="nav-right">
639      <a class="portal-btn" href="https://directcareai.portal.tellescope.com/" aria-label="Patient portal">
640        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
641      </a>
642      <button class="mobile-toggle" aria-label="Open menu" aria-expanded="false" id="mobile-toggle">
643        <svg class="icon-open" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
644        <svg class="icon-close" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display:none;"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
645      </button>
646    </div>
647  </div>
648</nav>
649
650<div class="mobile-drawer" id="mobile-drawer" aria-hidden="true">
651  <a href="/for-her">For Her</a>
652  <a href="/for-him">For Him</a>
653  <a href="/events">Events</a>
654  <a href="https://directcareai.portal.tellescope.com/" style="color: var(--brand-deep); font-weight: 700;">Patient portal &rarr;</a>
655</div>
656
657<!-- ============ HERO ============ -->
658<header class="hero">
659  <div class="hero-media" aria-hidden="true">
660    <!-- video-ready: drop <video autoplay muted loop playsinline poster="..."> here; the motion <img> is the fallback -->
661    <img src="https://crsurakhmbalgxim.public.blob.vercel-storage.com/Morning%20bed%2C%20foreheads%20touching.png" alt="" />
662  </div>
663  <div class="container">
664    <div class="hero-copy">
665      <h1 class="rise d1">Better nights,<br/><span class="accent hero-rotator" id="hero-rotator" data-words="better sex.|more energy.|stronger drive.|real confidence."><span class="hero-rotator-word is-visible">better sex.</span></span></h1>
666      <p class="hero-sub rise d2">Clinician-prescribed wellness for couples — ED, testosterone, HRT, GLP-1 and labs. <strong>Shipped plain. No insurance, no judgment.</strong></p>
667      <div class="hero-cta-row rise d3">
668        <a href="#offerings" class="btn btn-primary btn-primary-xl pulse-glow magnetic">Find your treatment →</a>
669        <a href="#how" class="btn btn-ghost btn-primary-xl magnetic">How it works</a>
670      </div>
671      <div class="hero-trust rise d4">
672        <span class="hero-trust-item"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg> US-licensed clinicians</span>
673        <span class="hero-trust-divider"></span>
674        <span class="hero-trust-item"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg> HIPAA-compliant</span>
675        <span class="hero-trust-divider"></span>
676        <span class="hero-trust-item"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 21h18"/><path d="M5 21V8l7-5 7 5v13"/></svg> Compounded in the USA</span>
677      </div>
678    </div>
679  </div>
680  <div class="scroll-cue" aria-hidden="true"><span class="mouse"></span><span>Scroll</span></div>
681</header>
682
683<!-- ============ PINNED AUDIENCE STACK ============ -->
684<section class="stack" aria-label="Choose your path">
685  <div class="stack-panel p-her">
686    <img src="https://crsurakhmbalgxim.public.blob.vercel-storage.com/Warm%20%26%20confident.png" alt="" />
687    <div class="container"><div class="stack-copy">
688      <span class="eyebrow"><span class="dot"></span> For her</span>
689      <h2>Hormones, libido &amp; confidence.</h2>
690      <p>HRT &amp; female testosterone, GLP-1, hair, labs and supplements — tuned to you, shipped plain.</p>
691      <a class="btn btn-primary-xl" style="background:#fff;color:#a02764;" href="/for-her">Explore her care →</a>
692    </div></div>
693  </div>
694  <div class="stack-panel p-him">
695    <img src="https://crsurakhmbalgxim.public.blob.vercel-storage.com/%20Testosterone%20%E2%80%94%20lifestyleImage.png" alt="" />
696    <div class="container"><div class="stack-copy">
697      <span class="eyebrow"><span class="dot"></span> For him</span>
698      <h2>Performance, drive &amp; stamina.</h2>
699      <p>Sexual health, testosterone, GLP-1, hair and labs — tuned to your bloodwork, shipped plain.</p>
700      <a class="btn btn-primary-xl" style="background:#fff;color:#3e2864;" href="/for-him">Explore his care →</a>
701    </div></div>
702  </div>
703</section>
704<!-- ============ MARQUEE BAND — All categories ============ -->
705<div class="marquee-band" aria-hidden="true">
706  <div class="marquee-track" id="marquee-track">
707    <span>Sexual Health · ED</span><span class="dot">·</span>
708    <span>Testosterone · TRT</span><span class="dot">·</span>
709    <span>GLP-1 Weight Loss</span><span class="dot">·</span>
710    <span>HRT &amp; Female T</span><span class="dot">·</span>
711    <span>Hair Regrowth</span><span class="dot">·</span>
712    <span>Blood Labs</span><span class="dot">·</span>
713    <span>Supplements</span><span class="dot">·</span>
714    <span>US-Licensed Clinicians</span><span class="dot">·</span>
715    <span>Compounded in the USA</span><span class="dot">·</span>
716    <span>Discreet Shipping</span><span class="dot">·</span>
717    <span>Sexual Health · ED</span><span class="dot">·</span>
718    <span>Testosterone · TRT</span><span class="dot">·</span>
719    <span>GLP-1 Weight Loss</span><span class="dot">·</span>
720    <span>HRT &amp; Female T</span><span class="dot">·</span>
721    <span>Hair Regrowth</span><span class="dot">·</span>
722    <span>Blood Labs</span><span class="dot">·</span>
723    <span>Supplements</span><span class="dot">·</span>
724    <span>US-Licensed Clinicians</span><span class="dot">·</span>
725    <span>Compounded in the USA</span><span class="dot">·</span>
726    <span>Discreet Shipping</span><span class="dot">·</span>
727  </div>
728</div>
729
730<!-- ============ HOW IT WORKS ============ -->
731<section class="section how-section" id="how">
732  <div class="container">
733    <div class="section-head">
734      <span class="eyebrow"><span class="dot"></span> How it works</span>
735      <h2>Three steps. Zero waiting rooms.</h2>
736      <p>From assessment to your doorstep in days — not weeks. A US-licensed clinician reviews every prescription. You only pay if you qualify and decide to start.</p>
737    </div>
738    <div class="how-grid">
739      <svg class="how-connector" id="how-connector" viewBox="0 0 1200 100" fill="none" preserveAspectRatio="none" aria-hidden="true">
740        <defs>
741          <linearGradient id="howConnectorGrad" x1="0%" y1="0%" x2="100%" y2="0%">
742            <stop offset="0%" stop-color="#af4bed" stop-opacity="0"/>
743            <stop offset="20%" stop-color="#af4bed" stop-opacity="0.9"/>
744            <stop offset="80%" stop-color="#762ba4" stop-opacity="0.9"/>
745            <stop offset="100%" stop-color="#762ba4" stop-opacity="0"/>
746          </linearGradient>
747        </defs>
748        <path d="M 40 50 C 240 10, 460 90, 600 50 S 960 10, 1160 50" stroke="url(#howConnectorGrad)" stroke-width="3" stroke-linecap="round"/>
749      </svg>
750      <div class="how-card">
751        <div class="how-num">01</div>
752        <h3>Free evaluation</h3>
753        <p>Take a quick medical assessment. Share your goals, symptoms, and history. Our intake is HIPAA-encrypted and reviewed only by US-licensed clinicians.</p>
754        <div class="icon-row">
755          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg>
756          Quick &amp; private intake
757        </div>
758      </div>
759      <div class="how-card">
760        <div class="how-num">02</div>
761        <h3>Clinician review</h3>
762        <p>A board-certified clinician reviews your file, may order labs, and prescribes the protocol that fits — or tells you honestly if you're not a fit. No charge if you don't qualify.</p>
763        <div class="icon-row">
764          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
765          US-licensed, board-certified
766        </div>
767      </div>
768      <div class="how-card">
769        <div class="how-num">03</div>
770        <h3>Delivered to your door</h3>
771        <p>Your protocol is compounded by a US pharmacy and shipped in discreet, unmarked packaging. Refills auto-arrive. Cancel anytime, message your clinician anytime.</p>
772        <div class="icon-row">
773          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><rect x="1" y="3" width="15" height="13" rx="2"/><polygon points="16 8 20 8 23 11 23 16 16 16 16 8"/><circle cx="5.5" cy="18.5" r="2.5"/><circle cx="18.5" cy="18.5" r="2.5"/></svg>
774          Free shipping · Cancel anytime
775        </div>
776      </div>
777    </div>
778  </div>
779</section>
780
781<!-- ============ OFFERING GRID (All Treatments with Photos) ============ -->
782<section class="section soft" id="offerings">
783  <div class="container">
784    <div class="section-head">
785      <span class="eyebrow"><span class="dot"></span> Every protocol</span>
786      <h2>Built for the way you actually want to live.</h2>
787      <p>Nine clinician-prescribed protocols — every one reviewed by a US-licensed clinician, compounded by a US pharmacy, and shipped in plain, unmarked packaging. Free evaluation. No charge if you don't qualify.</p>
788    </div>
789
790    <div class="offer-grid">
791
792      <!-- SEXUAL HEALTH — leading product for Playful Nights -->
793      <a class="offer-card" id="offer-surge" href="/start/ed">
794        <div class="offer-img-wrap">
795          <img src="https://crsurakhmbalgxim.public.blob.vercel-storage.com/Bathrobe%20hotel%20suite.png" alt="Sexual health and ED treatment" loading="lazy" />
796          <span class="offer-tag hot">Signature</span>
797        </div>
798        <div class="offer-body">
799          <h3>Sexual Health · ED</h3>
800          <p>On-demand and daily ED protocols — sildenafil, tadalafil, and our 4-in-1 performance formula <strong>SURGE MAX</strong>. Stay ready. Stay confident. Discreet, unmarked shipping.</p>
801          <div class="offer-meta">
802            <span class="offer-price">From $12<small> /dose</small></span>
803            <span class="offer-cta">Be ready tonight</span>
804          </div>
805        </div>
806      </a>
807
808      <!-- TRT (men) -->
809      <a class="offer-card" id="offer-trt" href="/testosterone-replacement-therapy">
810        <div class="offer-img-wrap">
811          <img src="https://crsurakhmbalgxim.public.blob.vercel-storage.com/%20Testosterone%20%E2%80%94%20lifestyleImage.png" alt="Testosterone optimization for men" loading="lazy" />
812          <span class="offer-tag hot">Drive &amp; Libido</span>
813        </div>
814        <div class="offer-body">
815          <h3>Testosterone (TRT)</h3>
816          <p>Injectable, oral, and natural-pathway protocols (enclomiphene). The hormone behind drive, libido, mood, recovery and muscle — restored to where you remember it. Full lab panel included.</p>
817          <div class="offer-meta">
818            <span class="offer-price">$169&ndash;$189<small> /mo</small></span>
819            <span class="offer-cta">Restore your T</span>
820          </div>
821        </div>
822      </a>
823
824      <!-- WEIGHT LOSS -->
825      <a class="offer-card" id="offer-weight-loss" href="/start/weight-loss">
826        <div class="offer-img-wrap">
827          <img src="https://crsurakhmbalgxim.public.blob.vercel-storage.com/Weight%20Loss%20%E2%80%94%20lifestyleImage.png" alt="Weight loss program — GLP-1" loading="lazy" />
828          <span class="offer-tag popular">Most Loved</span>
829        </div>
830        <div class="offer-body">
831          <h3>Weight Loss (GLP-1)</h3>
832          <p>Compounded semaglutide and tirzepatide — weekly injection. Look the way you want naked. Lose the weight, keep the energy.</p>
833          <div class="offer-meta">
834            <span class="offer-price">From $269<small> /mo</small></span>
835            <span class="offer-cta">See if you qualify</span>
836          </div>
837        </div>
838      </a>
839
840      <!-- HRT (women) — re-positioned for libido / desire -->
841      <a class="offer-card" id="offer-hrt" href="/hormone-replacement-therapy">
842        <div class="offer-img-wrap">
843          <img src="https://crsurakhmbalgxim.public.blob.vercel-storage.com/Vibrant%20%26%20energetic%20%28younger%2040s%2C%20more%20uplift%29.png" alt="Hormone replacement therapy for women" loading="lazy" />
844          <span class="offer-tag trending">Sought-After</span>
845        </div>
846        <div class="offer-body">
847          <h3>HRT &amp; Female Testosterone</h3>
848          <p>Bioidentical estradiol, progesterone <em>and</em> female testosterone — the protocol most clinics ignore. Built around libido, energy, sleep and skin. Lab-driven, physician-titrated.</p>
849          <div class="offer-meta">
850            <span class="offer-price">From $89<small> /mo</small></span>
851            <span class="offer-cta">Feel like you again</span>
852          </div>
853        </div>
854      </a>
855
856      <!-- HAIR LOSS MEN -->
857      <a class="offer-card" href="/start/mens-hair-loss">
858        <div class="offer-img-wrap">
859          <img src="https://crsurakhmbalgxim.public.blob.vercel-storage.com/Hair%20Regrowth%20%E2%80%94%20lifestyleImage.png" alt="Men's hair regrowth protocol" loading="lazy" />
860          <span class="offer-tag">Men</span>
861        </div>
862        <div class="offer-body">
863          <h3>Hair Regrowth (Men)</h3>
864          <p>Personalized topical and oral protocols — Finasteride, Dutasteride, Minoxidil, Tretinoin, Fluocinolone. Stop loss. Regrow.</p>
865          <div class="offer-meta">
866            <span class="offer-price">From $59<small> /mo</small></span>
867            <span class="offer-cta">Stop the thinning</span>
868          </div>
869        </div>
870      </a>
871
872      <!-- HAIR LOSS WOMEN -->
873      <a class="offer-card" href="/start/womans-hair-loss">
874        <div class="offer-img-wrap">
875          <img src="https://crsurakhmbalgxim.public.blob.vercel-storage.com/woman%20tying%20hair%20up%20confidently.png" alt="Women's hair regrowth protocol" loading="lazy" />
876          <span class="offer-tag">Women</span>
877        </div>
878        <div class="offer-body">
879          <h3>Hair Regrowth (Women)</h3>
880          <p>Spironolactone, low-dose oral Minoxidil, topical combos and clinical-strength shampoo — built around female pattern thinning.</p>
881          <div class="offer-meta">
882            <span class="offer-price">From $59<small> /mo</small></span>
883            <span class="offer-cta">Reclaim your hair</span>
884          </div>
885        </div>
886      </a>
887
888      <!-- BLOOD LABS -->
889      <a class="offer-card" href="https://www.directcare.ai/blood-test" target="_blank" rel="noopener noreferrer">
890        <div class="offer-img-wrap">
891          <img src="https://crsurakhmbalgxim.public.blob.vercel-storage.com/Health%20Check%20%E2%80%94%20lifestyleImage.png" alt="At-home blood labs panel" loading="lazy" />
892          <span class="offer-tag new">Via DirectCare AI</span>
893        </div>
894        <div class="offer-body">
895          <h3>Blood Labs</h3>
896          <p>A full panel covering hormones, metabolic health, cardiovascular and inflammation markers. Mailed to your door, reviewed by a clinician.</p>
897          <div class="offer-meta">
898            <span class="offer-price">From $196<small> one-time</small></span>
899            <span class="offer-cta">Order via DirectCare AI &rarr;</span>
900          </div>
901        </div>
902      </a>
903
904      <!-- SUPPLEMENTS -->
905      <a class="offer-card" href="https://www.directcare.ai/supplements" target="_blank" rel="noopener noreferrer">
906        <div class="offer-img-wrap">
907          <img src="https://crsurakhmbalgxim.public.blob.vercel-storage.com/flatlay%20of%20women%27s%20protocol%20bottles.png" alt="Playful Nights supplements and nutraceuticals" loading="lazy" />
908          <span class="offer-tag">Via DirectCare AI</span>
909        </div>
910        <div class="offer-body">
911          <h3>Supplements</h3>
912          <p>Physician-formulated nutraceuticals — magnesium, creatine, recovery and sleep stacks.</p>
913          <div class="offer-meta" style="justify-content:flex-end;">
914            <span class="offer-cta">Shop via DirectCare AI &rarr;</span>
915          </div>
916        </div>
917      </a>
918
919    </div>
920  </div>
921</section>
922
923<!-- ============ WHY DIRECTCARE (Comparison) ============ -->
924<section class="section">
925  <div class="container">
926    <div class="section-head">
927      <span class="eyebrow"><span class="dot"></span> Why Playful Nights</span>
928      <h2>Built different. Built for the way you live.</h2>
929      <p>Clinician-led, US-compounded, lab-driven — built to actually move the needle, not just write a script.</p>
930    </div>
931    <div class="cmp-wrap">
932      <div class="cmp-graph">
933        <div class="cmp-legend"><span><i class="dot-pn"></i> Playful Nights</span><span><i class="dot-them"></i> Most online clinics</span></div>
934        <div class="cmp-row"><div class="cmp-label">Clinician oversight</div><div class="cmp-bars"><div class="cmp-track"><span class="cmp-fill pn" style="width:100%"></span></div><div class="cmp-track"><span class="cmp-fill them" style="width:34%"></span></div></div></div>
935        <div class="cmp-row"><div class="cmp-label">Personalized dosing</div><div class="cmp-bars"><div class="cmp-track"><span class="cmp-fill pn" style="width:100%"></span></div><div class="cmp-track"><span class="cmp-fill them" style="width:30%"></span></div></div></div>
936        <div class="cmp-row"><div class="cmp-label">Lab-driven care</div><div class="cmp-bars"><div class="cmp-track"><span class="cmp-fill pn" style="width:96%"></span></div><div class="cmp-track"><span class="cmp-fill them" style="width:22%"></span></div></div></div>
937        <div class="cmp-row"><div class="cmp-label">Clinician reply speed</div><div class="cmp-bars"><div class="cmp-track"><span class="cmp-fill pn" style="width:92%"></span></div><div class="cmp-track"><span class="cmp-fill them" style="width:40%"></span></div></div></div>
938        <div class="cmp-row"><div class="cmp-label">Discretion</div><div class="cmp-bars"><div class="cmp-track"><span class="cmp-fill pn" style="width:100%"></span></div><div class="cmp-track"><span class="cmp-fill them" style="width:46%"></span></div></div></div>
939      </div>
940      <div class="cmp-feats">
941        <h3>What you get with us</h3>
942        <ul>
943          <li>Every prescription reviewed by a US board-certified clinician</li>
944          <li>US-pharmacy compounded, personalized dosing</li>
945          <li>Labs built in &mdash; free evaluation, no charge if you don't qualify</li>
946          <li>Direct clinician messaging &amp; plain, discreet shipping</li>
947        </ul>
948      </div>
949    </div>
950  </div>
951</section>
952
953<!-- ============ FAQ ============ -->
954<section class="section faq-section" id="faq">
955  <div class="container">
956    <div class="faq-layout">
957      <aside class="faq-side">
958        <span class="eyebrow"><span class="dot"></span> Common questions</span>
959        <h2>Everything you'd ask a <span class="accent">clinician.</span></h2>
960        <p>Honest answers, before you start. Six of the questions we hear most — and what our team would tell you on a call.</p>
961      </aside>
962
963      <div class="faq-grid">
964        <details class="faq" open>
965          <summary>Is Playful Nights a real medical platform?</summary>
966          <div class="faq-body">Yes. Playful Nights is a brand operated by DirectCare AI, a HIPAA-compliant telehealth platform. Every prescription is reviewed and authorized by a US-licensed, board-certified clinician. We don't generate prescriptions with AI — we use technology to streamline intake, clinician workflow, and refills, but a human clinician makes every clinical decision.</div>
967        </details>
968        <details class="faq">
969          <summary>Do I need insurance?</summary>
970          <div class="faq-body">No. Every Playful Nights program is direct-pay — typically less than what insurance copays cost on the same medications. No claims, no diagnosis on file, no awkward EOBs to your house.</div>
971        </details>
972        <details class="faq">
973          <summary>What happens if I don't qualify?</summary>
974          <div class="faq-body">You're not charged. The free evaluation is genuinely free. If a clinician decides a protocol isn't safe or appropriate for you, we'll tell you why — and we'll often recommend a better alternative (different protocol, lab workup first, or referral to in-person care).</div>
975        </details>
976        <details class="faq">
977          <summary>Are the medications FDA-approved?</summary>
978          <div class="faq-body">Active ingredients in every protocol are individually FDA-approved (e.g. Finasteride, Minoxidil, semaglutide, tirzepatide, estradiol, testosterone cypionate). Compounded formulations are made by US-licensed pharmacies at clinician-specified strengths — a regulated practice but not "FDA-approved as a finished product."</div>
979        </details>
980        <details class="faq">
981          <summary>How fast does it ship?</summary>
982          <div class="faq-body">After a clinician approves your protocol, your order ships in plain, unmarked packaging within a few business days. Refills auto-renew on your schedule — you can pause, adjust, or cancel anytime from your patient portal.</div>
983        </details>
984        <details class="faq">
985          <summary>Can I message my clinician?</summary>
986          <div class="faq-body">Yes — direct, async messaging with your assigned clinician is included in every program. Replies typically arr
986ive the next business day. For TRT and HRT, we re-titrate based on labs at regular intervals once you're started.</div>
987        </details>
988      </div>
989    </div>
990  </div>
991</section>
992
993<!-- ============ FOOTER ============ -->
994<!-- SDC COMMUNITY -->
995<section style="padding: clamp(34px, 4.2vw, 58px) 0; background: linear-gradient(180deg, #fbf5fe 0%, #ffffff 100%);">
996  <div class="container" style="max-width: 720px; margin: 0 auto; text-align: center;">
997    <span class="eyebrow"><span class="dot"></span> For adventurous couples</span>
998    <h2 style="margin-top: 18px;">Meet your people<br/><span class="h-italic">on SDC.</span></h2>
999    <p style="font-size: 1.05rem; max-width: 600px; margin: 18px auto 28px; color: var(--muted);">A trusted, discreet community for open-minded, adventurous couples.</p>
1000    <a href="https://www.sdc.com/?ref=38873" target="_blank" rel="noopener noreferrer" style="display: inline-block; border-radius: 14px; overflow: hidden; box-shadow: 0 18px 50px -16px rgba(118,43,164,0.22); line-height: 0;">
1001      <img src="https://www2.sdc.com/affiliate/banners3/en/sdc-6-22.gif" border="0" alt="Join SDC — a community for adventurous couples" style="display: block; max-width: 100%; height: auto;" />
1002    </a>
1003  </div>
1004</section>
1005
1006<footer>
1007  <div class="container">
1008    <div class="foot-grid">
1009      <div class="foot-brand">
1010        <span class="pn-wordmark pn-wordmark-footer"><span class="pn-moon" aria-hidden="true"></span><span class="pn-playful">Playful</span><span class="pn-amp">·</span><span class="pn-nights">Nights</span></span>
1011        <p style="margin-top:14px;">Playful Nights is premium sexual wellness and vitality for couples. Clinician-prescribed protocols for libido, drive, performance, energy and confidence — ED, testosterone, bioidentical hormones, GLP-1 weight loss, recovery stacks and at-home blood labs. Compounded in the USA. Delivered discreetly.</p>
1012        <div class="powered-by">Powered by <strong>DirectCare AI</strong></div>
1013        <div class="social-row" aria-label="Follow Playful Nights">
1014          <a href="https://www.instagram.com/playfulnights/" target="_blank" rel="noopener noreferrer" aria-label="Instagram"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="0.8" fill="currentColor"/></svg></a>
1015          <a href="https://twitter.com/playfulnights" target="_blank" rel="noopener noreferrer" aria-label="X / Twitter"><svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2H21l-6.523 7.452L22.5 22h-6.84l-4.97-6.456L4.9 22H2.14l6.978-7.973L1.5 2h7.005l4.5 5.94L18.244 2zm-1.197 18.18h1.598L7.05 3.74H5.328L17.047 20.18z"/></svg></a>
1016          <a href="https://www.tiktok.com/@playfulnights" target="_blank" rel="noopener noreferrer" aria-label="TikTok"><svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-5.2 1.74 2.89 2.89 0 0 1 2.31-4.64 2.93 2.93 0 0 1 .88.13V9.4a6.84 6.84 0 0 0-1-.05A6.33 6.33 0 0 0 5.8 20.1a6.34 6.34 0 0 0 10.86-4.43V9.01a8.16 8.16 0 0 0 4.77 1.52V7.08a4.85 4.85 0 0 1-1.84-.39z"/></svg></a>
1017        </div>
1018      </div>
1019      <div class="foot-col">
1020        <h5>Explore</h5>
1021        <a href="/for-her">For Her</a>
1022        <a href="/for-him">For Him</a>
1023      </div>
1024      <div class="foot-col">
1025        <h5>Treatments</h5>
1026        <a href="/start/ed">Sexual Health</a>
1027        <a href="/testosterone-replacement-therapy">Testosterone</a>
1028        <a href="/hormone-replacement-therapy">Hormone Therapy</a>
1029        <a href="/start/weight-loss">Weight Loss</a>
1030        <a href="/start/mens-hair-loss">Hair Regrowth</a>
1031        <a href="https://www.directcare.ai/blood-test" target="_blank" rel="noopener noreferrer">Blood Labs</a>
1032      </div>
1033      <div class="foot-col">
1034        <h5>Company</h5>
1035        <a href="/terms-and-conditions">Terms</a>
1036        <a href="/privacy-policy">Privacy</a>
1037        <a href="/safety">Safety</a>
1038        <a href="/ccpa">CCPA</a>
1039        <a href="/medical-consent">
1039Medical Consent</a>
1040      </div>
1041    </div>
1042    <div class="footer-trust" style="display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 20px 28px; padding: 36px 0 8px;">
1043      <a href="https://apps.apple.com/us/app/directcareai/id6744840922" target="_blank" rel="noopener noreferrer" title="Download Playful Nights on the App Store" style="display: inline-block; transition: opacity .2s ease;" onmouseover="this.style.opacity='0.85'" onmouseout="this.style.opacity='1'">
1044        <img src="https://developer.apple.com/assets/elements/badges/download-on-the-app-store.svg" alt="Download on the App Store" style="display: block; height: 48px; width: auto;" />
1045      </a>
1046      <a href="https://play.google.com/store/apps/details?id=com.directcareai.app" target="_blank" rel="noopener noreferrer" title="Get Playful Nights on Google Play" style="display: inline-block; transition: opacity .2s ease;" onmouseover="this.style.opacity='0.85'" onmouseout="this.style.opacity='1'">
1047        <img src="https://play.google.com/intl/en_us/badges/static/images/badges/en_badge_web_generic.png" alt="Get it on Google Play" style="display: block; height: 64px; width: auto;" />
1048      </a>
1049    </div>
1050    <div class="legal">
1051      <div>© 2026 DirectCare AI. All rights reserved.</div>
1052      <div>HIPAA Compliant · US Licensed Clinicians · US Compounding Pharmacy</div>
1053    </div>
1054    <div class="legal-disclaimer">
1055      <strong>Image disclaimer:</strong> All photographs, illustrations, diagrams, video, and model imagery on this site are for representation and illustrative purposes only. They do not depict actual patients and are not a guarantee of any specific outcome. Individual results vary.
1056      <br/><br/>
1057      Medical evaluations and prescriptions are provided by US-licensed clinicians affiliated with DirectCare AI, and compounded medications are prescribed based on an individual medical evaluation. Compounded medications are not FDA-approved as finished products, although the active ingredients (e.g., Finasteride, Dutasteride, Minoxidil, Tretinoin, Fluocinolone, semaglutide, tirzepatide, estradiol, progesterone, testosterone) are individually FDA-approved. Not all patients will qualify. Treatment is only available where state law permits. This site is for informational purposes and does not constitute medical advice. The statements herein have not been evaluated by the FDA. Consult your clinician before starting any new medication. Women who are pregnant, may become pregnant, or are breastfeeding should not handle crushed or broken Finasteride or Dutasteride tablets or topical formulations. Stop use and seek medical advice if you experience persistent side effects.
1058    </div>
1059      <div class="legal-disclaimer">
1060      <strong>Partner pharmacies &amp; image disclaimer:</strong> DirectCare AI does not manufacture or compound medications. DirectCare AI partners with multiple US-licensed compounding pharmacies to deliver personalized care, and our clinical team meets regularly with them to review product availability, shipping timelines, and medication testing reports. Because we work with multiple pharmacies, the medication you receive — including its packaging, label, vial shape, and color — may differ from the imagery shown on this site. All product photography, model photography, and lifestyle imagery is for illustrative purposes only; models depicted are not actual patients.
1061    </div>
1062  </div>
1063</footer>
1064
1065<script>
1066  /* === Mobile drawer === */
1067  (function() {
1068    var t = document.getElementById('mobile-toggle');
1069    var d = document.getElementById('mobile-drawer');
1070    if (!t || !d) return;
1071    var openIco = t.querySelector('.icon-open');
1072    var closeIco = t.querySelector('.icon-close');
1073    function setOpen(open) {
1074      d.classList.toggle('open', open);
1075      t.setAttribute('aria-expanded', open ? 'true' : 'false');
1076      t.setAttribute('aria-label', open ? 'Close menu' : 'Open menu');
1077      d.setAttribute('aria-hidden', open ? 'false' : 'true');
1078      if (openIco) openIco.style.display = open ? 'none' : '';
1079      if (closeIco) closeIco.style.display = open ? '' : 'none';
1080      document.body.style.overflow = open ? 'hidden' : '';
1081    }
1082    t.addEventListener('click', function() { setOpen(!d.classList.contains('open')); });
1083    d.addEventListener('click', function(e) {
1084      if (e.target.tagName === 'A') setOpen(false);
1085    });
1086    window.addEventListener('resize', function() {
1087      if (window.innerWidth > 980 && d.classList.contains('open')) setOpen(false);
1088    });
1089  })();
1090
1091  /* === Scroll-triggered reveal === */
1092  (function() {
1093    if (!('IntersectionObserver' in window)) {
1094      document.querySelectorAll('.reveal').forEach(function(el) { el.classList.add('is-visible'); });
1095      return;
1096    }
1097    var TARGETS = ['.section .section-head', '.split-card', '.offer-card', '.how-card', '.stat', '.why-card', '.testi', '.faq', '.final-cta'];
1098    TARGETS.forEach(function(sel) {
1099      document.querySelectorAll(sel).forEach(function(el) {
1100        if (!el.classList.contains('reveal')) el.classList.add('reveal');
1101      });
1102    });
1103    var io = new IntersectionObserver(function(entries) {
1104      entries.forEach(function(e) {
1105        if (e.isIntersecting) {
1106          e.target.classList.add('is-visible');
1107          io.unobserve(e.target);
1108        }
1109      });
1110    }, { threshold: 0.12, rootMargin: '0px 0px -40px 0px' });
1111    document.querySelectorAll('.reveal').forEach(function(el) { io.observe(el); });
1112  })();
1113
1114  /* === Scroll progress bar === */
1115  (function() {
1116    var bar = document.getElementById('scroll-progress-bar');
1117    if (!bar) return;
1118    var ticking = false;
1119    function update() {
1120      var h = document.documentElement;
1121      var max = (h.scrollHeight - h.clientHeight) || 1;
1122      var p = Math.min(100, Math.max(0, (h.scrollTop / max) * 100));
1123      bar.style.width = p + '%';
1124      ticking = false;
1125    }
1126    window.addEventListener('scroll', function() {
1127      if (!ticking) { requestAnimationFrame(update); ticking = true; }
1128    }, { passive: true });
1129    update();
1130  })();
1131
1132  /* === Hero word rotator (inline styles — bypass class-based transition) === */
1133  (function() {
1134    var el = document.getElementById('hero-rotator');
1135    if (!el) return;
1136    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
1137    var words = (el.dataset.words || '').split('|').filter(Boolean);
1138    if (words.length < 2) return;
1139    var TRANS = 'opacity 520ms cubic-bezier(0.22, 1, 0.36, 1), transform 520ms cubic-bezier(0.22, 1, 0.36, 1)';
1140    // Make the initial word use inline styles too, so cycle handoff is consistent
1141    var current = el.querySelector('.hero-rotator-word');
1142    if (current) {
1143      current.style.opacity = '1';
1144      current.style.transform = 'translateY(0)';
1145      current.style.transition = TRANS;
1146      current.style.display = 'inline-block';
1147    }
1148    var i = 0;
1149    function rotate() {
1150      i = (i + 1) % words.length;
1151      var next = document.createElement('span');
1152      next.className = 'hero-rotator-word';
1153      next.textContent = words[i];
1154      next.style.opacity = '0';
1155      next.style.transform = 'translateY(20px)';
1156      next.style.transition = TRANS;
1157      next.style.display = 'inline-block';
1158      el.appendChild(next);
1159      // Small delay lets the browser commit the initial state before we change it
1160      setTimeout(function() {
1161        next.style.opacity = '1';
1162        next.style.transform = 'translateY(0)';
1163      }, 30);
1164      if (current) {
1165        current.style.opacity = '0';
1166        current.style.transform = 'translateY(-20px)';
1167      }
1168      var stale = current;
1169      setTimeout(function() { if (stale && stale.parentNode) stale.parentNode.removeChild(stale); }, 620);
1170      current = next;
1171    }
1172    setInterval(rotate, 2800);
1173  })();
1174
1175  /* === Number tickers === */
1176  (function() {
1177    var tickers = document.querySelectorAll('.ticker[data-ticker]');
1178    if (!tickers.length) return;
1179    function format(n, decimals) {
1180      return decimals > 0 ? n.toFixed(decimals) : Math.round(n).toString();
1181    }
1182    function animate(el) {
1183      if (el.dataset.played === '1') return;
1184      el.dataset.played = '1';
1185      var target = parseFloat(el.dataset.ticker);
1186      var decimals = parseInt(el.dataset.decimals || '0', 10);
1187      var suffix = el.dataset.suffix || '';
1188      var dur = 1500, steps = 60, s = 0;
1189      var id = setInterval(function() {
1190        s++;
1191        var p = Math.min(1, s / steps);
1192        var eased = 1 - Math.pow(1 - p, 3);
1193        el.textContent = format(target * eased, decimals) + suffix;
1194        if (p >= 1) { el.textContent = format(target, decimals) + suffix; clearInterval(id); }
1195      }, dur / steps);
1196    }
1197    if (!('IntersectionObserver' in window)) { tickers.forEach(animate); return; }
1198    var io = new IntersectionObserver(function(entries) {
1199      entries.forEach(function(e) {
1200        if (e.isIntersecting) { animate(e.target); io.unobserve(e.target); }
1201      });
1202    }, { threshold: 0.4 });
1203    tickers.forEach(function(t) { io.observe(t); });
1204  })();
1205
1206  /* === Magnetic CTAs === */
1207  (function() {
1208    if (!window.matchMedia('(hover: hover) and (pointer: fine)').matches) return;
1209    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
1210    var MAX = 14, STRENGTH = 0.26;
1211    document.querySelectorAll('.magnetic').forEach(function(btn) {
1212      btn.addEventListener('mousemove', function(e) {
1213        var r = btn.getBoundingClientRect();
1214        var dx = (e.clientX - (r.left + r.width / 2)) * STRENGTH;
1215        var dy = (e.clientY - (r.top + r.height / 2)) * STRENGTH;
1216        dx = Math.max(-MAX, Math.min(MAX, dx));
1217        dy = Math.max(-MAX, Math.min(MAX, dy));
1218        btn.style.transform = 'translate(' + dx + 'px, ' + dy + 'px)';
1219      });
1220      btn.addEventListener('mouseleave', function() { btn.style.transform = ''; });
1221    });
1222  })();
1223
1224  /* === 3D tilt on offering cards === */
1225  (function() {
1226    if (!window.matchMedia('(hover: hover) and (pointer: fine)').matches) return;
1227    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
1228    var MAX_TILT = 6;
1229    document.querySelectorAll('.offer-card').forEach(function(card) {
1230      card.addEventListener('mousemove', function(e) {
1231        var r = card.getBoundingClientRect();
1232        var px = ((e.clientX - r.left) / r.width - 0.5) * 2;
1233        var py = ((e.clientY - r.top) / r.height - 0.5) * 2;
1234        var rx = (-py * MAX_TILT).toFixed(2);
1235        var ry = (px * MAX_TILT).toFixed(2);
1236        card.style.transform = 'translateY(-6px) perspective(800px) rotateX(' + rx + 'deg) rotateY(' + ry + 'deg)';
1237      });
1238      card.addEventListener('mouseleave', function() { card.style.transform = ''; });
1239    });
1240  })();
1241
1242  /* === Testimonial spotlight cursor === */
1243  (function() {
1244    if (!window.matchMedia('(hover: hover) and (pointer: fine)').matches) return;
1245    document.querySelectorAll('.testi').forEach(function(t) {
1246      t.addEventListener('mousemove', function(e) {
1247        var r = t.getBoundingClientRect();
1248        t.style.setProperty('--mx', (e.clientX - r.left) + 'px');
1249        t.style.setProperty('--my', (e.clientY - r.top) + 'px');
1250      });
1251    });
1252  })();
1253
1254  /* === How It Works SVG connector — draw on view === */
1255  (function() {
1256    var c = document.getElementById('how-connector');
1257    if (!c || !('IntersectionObserver' in window)) return;
1258    var io = new IntersectionObserver(function(entries) {
1259      entries.forEach(function(e) {
1260        if (e.isIntersecting) { c.classList.add('is-visible'); io.unobserve(c); }
1261      });
1262    }, { threshold: 0.3 });
1263    io.observe(c);
1264  })();
1265
1266  /* === Rx Card tabbed benefits === */
1267  (function() {
1268    var tabs = document.querySelectorAll('.rxcard-tab');
1269    var panels = document.querySelectorAll('.rxcard-panel-content');
1270    if (!tabs.length || !panels.length) return;
1271
1272    function activate(idx) {
1273      tabs.forEach(function(t, i) { t.setAttribute('aria-selected', i === idx ? 'true' : 'false'); });
1274      panels.forEach(function(p, i) {
1275        if (i === idx) { p.classList.add('is-active'); p.hidden = false; }
1276        else { p.classList.remove('is-active'); p.hidden = true; }
1277      });
1278    }
1279
1280    tabs.forEach(function(tab, idx) {
1281      tab.addEventListener('click', function() { activate(idx); });
1282      tab.addEventListener('keydown', function(e) {
1283        if (e.key === 'ArrowRight') { activate((idx + 1) % tabs.length); tabs[(idx + 1) % tabs.length].focus(); }
1284        if (e.key === 'ArrowLeft') { activate((idx - 1 + tabs.length) % tabs.length); tabs[(idx - 1 + tabs.length) % tabs.length].focus(); }
1285      });
1286    });
1287
1288    // Auto-rotate every 5s, pause on hover/focus
1289    var rxIdx = 0; var rxTimer = null; var paused = false;
1290    var container = document.getElementById('rxcard');
1291    function start() {
1292      if (rxTimer) return;
1293      rxTimer = setInterval(function() {
1294        if (paused) return;
1295        rxIdx = (rxIdx + 1) % tabs.length;
1296        activate(rxIdx);
1297      }, 5000);
1298    }
1299    function stop() { if (rxTimer) { clearInterval(rxTimer); rxTimer = null; } }
1300    if (container) {
1301      container.addEventListener('mouseenter', function() { paused = true; });
1302      container.addEventListener('mouseleave', function() { paused = false; });
1303      container.addEventListener('focusin', function() { paused = true; });
1304      container.addEventListener('focusout', function() { paused = false; });
1305      // Click on a tab resets the index so auto-rotate continues from user's pick
1306      tabs.forEach(function(t, i) { t.addEventListener('click', function() { rxIdx = i; }); });
1307      // Start auto-rotate only after the section enters view
1308      if ('IntersectionObserver' in window) {
1309        var io = new IntersectionObserver(function(entries) {
1310          entries.forEach(function(e) { if (e.isIntersecting) { start(); io.unobserve(container); } });
1311        }, { threshold: 0.3 });
1312        io.observe(container);
1313      } else { start(); }
1314    }
1315  })();
1316
1317  /* === Affiliate click-ID capture + propagation ===
1318     Reads ?clickid=, ?clickId=, ?utm_clickId=, ?aff_id=, ?cid= or ?flex_id=
1319     from incoming URL (FlexOffers and compatible networks), persists in
1320     sessionStorage + 7-day localStorage, then rewrites every outbound link
1321     that points to a DCAI / Tellescope domain to include &utm_clickId=<id>.
1322     Tellescope's S2S postback fires with that value, which FlexOffers uses
1323     to attribute the conversion back to the affiliate. */
1324  (function() {
1325    var STORAGE_KEY = 'dcai_clickId';
1326    var STORAGE_TS = 'dcai_clickId_ts';
1327    var TTL_MS = 7 * 24 * 60 * 60 * 1000;
1328    var INCOMING_PARAMS = ['utm_clickId', 'utm_clickid', 'clickid', 'clickId', 'cid', 'aff_id', 'flex_id'];
1329    var DCAI_HOSTS = [
1330      'playfulnights.com', 'www.playfulnights.com',
1331      'playfulnights-home.vercel.app',
1332      'mens-hair-loss.vercel.app', 'womens-hair-loss.vercel.app',
1333      'sexual-health-mocha.vercel.app', 'directcare-weight-loss.vercel.app',
1334      'business.tellescope.com', 'directcareai.portal.tellescope.com'
1335    ];
1336
1337    function getURL(href) { try { return new URL(href, window.location.href); } catch (e) { return null; } }
1338
1339    function readClickIdFromQuery() {
1340      var url = getURL(window.location.href);
1341      if (!url) return null;
1342      for (var i = 0; i < INCOMING_PARAMS.length; i++) {
1343        var v = url.searchParams.get(INCOMING_PARAMS[i]);
1344        if (v) return v;
1345      }
1346      return null;
1347    }
1348
1349    function persist(id) {
1350      try {
1351        sessionStorage.setItem(STORAGE_KEY, id);
1352        localStorage.setItem(STORAGE_KEY, id);
1353        localStorage.setItem(STORAGE_TS, String(Date.now()));
1354      } catch (e) {}
1355    }
1356
1357    function load() {
1358      try {
1359        var s = sessionStorage.getItem(STORAGE_KEY);
1360        if (s) return s;
1361        var l = localStorage.getItem(STORAGE_KEY);
1362        var ts = parseInt(localStorage.getItem(STORAGE_TS) || '0', 10);
1363        if (l && Date.now() - ts < TTL_MS) {
1364          sessionStorage.setItem(STORAGE_KEY, l);
1365          return l;
1366        }
1367        if (l) {
1368          localStorage.removeItem(STORAGE_KEY);
1369          localStorage.removeItem(STORAGE_TS);
1370        }
1371      } catch (e) {}
1372      return null;
1373    }
1374
1375    var clickId = readClickIdFromQuery();
1376    if (clickId) persist(clickId);
1377    else clickId = load();
1378    if (!clickId) return;
1379
1380    function shouldRewrite(href) {
1381      if (!href) return false;
1382      var first = href.charAt(0);
1383      if (first === '#' || href.indexOf('mailto:') === 0 || href.indexOf('tel:') === 0 || href.indexOf('javascript:') === 0) return false;
1384      var u = getURL(href);
1385      return !!(u && DCAI_HOSTS.indexOf(u.hostname) > -1);
1386    }
1387
1388    function withClickId(href) {
1389      var u = getURL(href);
1390      if (!u) return href;
1391      if (!u.searchParams.has('utm_clickId')) u.searchParams.set('utm_clickId', clickId);
1392      return u.toString();
1393    }
1394
1395    function rewriteAll() {
1396      document.querySelectorAll('a[href]').forEach(function(a) {
1397        var raw = a.getAttribute('href');
1398        if (shouldRewrite(raw)) a.href = withClickId(a.href);
1399      });
1400    }
1401
1402    rewriteAll();
1403
1404    // Catch any links injected dynamically (mobile drawer, etc.)
1405    if ('MutationObserver' in window) {
1406      var mo = new MutationObserver(rewriteAll);
1407      mo.observe(document.body, { childList: true, subtree: true });
1408      setTimeout(function() { mo.disconnect(); }, 4000);
1409    }
1410
1411    // Expose for debugging
1412    try { window.__dcaiClickId = clickId; } catch (e) {}
1413  })();
1414
1415  /* === Final CTA sparkles (twinkling stars in aurora) === */
1416  (function() {
1417    var cta = document.getElementById('final-cta');
1418    if (!cta) return;
1419    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
1420    var positions = [
1421      [12, 18], [28, 70], [58, 22], [82, 78], [88, 32], [22, 88], [68, 54], [42, 12], [76, 14], [16, 48]
1422    ];
1423    positions.forEach(function(p, i) {
1424      var s = document.createElement('span');
1425      s.className = 'final-cta-sparkle';
1426      s.style.left = p[0] + '%';
1427      s.style.top = p[1] + '%';
1428      s.style.animation = 'sparkle-twinkle ' + (2.5 + (i % 4) * 0.7) + 's ease-in-out infinite';
1429      s.style.animationDelay = (i * 0.4) + 's';
1430      cta.appendChild(s);
1431    });
1432  })();
1433</script>
1433
1434
1435<script>
1436(function(){
1437  if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
1438  var media=document.querySelector('.hero-media');
1439  if(media){ window.addEventListener('scroll', function(){ var y=window.scrollY; if(y<window.innerHeight){ media.style.transform='translateY('+(y*0.28)+'px)'; } }, {passive:true}); }
1440  if(!('IntersectionObserver' in window)) return;
1441  var obs=new IntersectionObserver(function(es){ es.forEach(function(e){ if(e.isIntersecting){ e.target.classList.add('in'); obs.unobserve(e.target); } }); }, {threshold:0, rootMargin:'0px 0px -10% 0px'});
1442  document.querySelectorAll('section').forEach(function(sec){
1443    if(sec.classList.contains('stack')||sec.classList.contains('stack-panel')||sec.closest('.stack')) return;
1444    var r=sec.getBoundingClientRect();
1445    if(r.top < window.innerHeight*0.85){ sec.classList.add('reveal','in'); }
1446    else { sec.classList.add('reveal'); obs.observe(sec); }
1447  });
1448})();
1449</script>
vendor: 1 bytes, line 1449
1449
1450<script>
1451(function(){
1452  var grid=document.querySelector('#offerings .offer-grid'); if(!grid) return;
1453  var c=document.createElement('div'); c.className='carousel-ctrls';
1454  c.innerHTML='<button type="button" aria-label="Scroll left" data-dir="-1">\u2039</button><button type="button" aria-label="Scroll right" data-dir="1">\u203A</button>';
1455  grid.parentNode.insertBefore(c, grid);
1456  function step(){ var card=grid.querySelector('.offer-card'); return (card?card.getBoundingClientRect().width:320)+18; }
1457  c.addEventListener('click', function(e){ var b=e.target.closest('button'); if(!b) return; grid.scrollBy({left: step()*parseInt(b.dataset.dir,10), behavior:'smooth'}); });
1458
1459  var cards=[].slice.call(grid.querySelectorAll('.offer-card'));
1460  // swipe hint (mobile) — sits above the carousel
1461  var hint=document.createElement('div'); hint.className='carousel-swipe-hint';
1462  hint.innerHTML='Swipe to explore <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>';
1463  grid.parentNode.insertBefore(hint, grid);
1464  // pagination dots (mobile) — below the carousel
1465  var dots=document.createElement('div'); dots.className='carousel-dots';
1466  function offsetOf(card){ return grid.scrollLeft + (card.getBoundingClientRect().left - grid.getBoundingClientRect().left); }
1467  cards.forEach(function(card,i){ var b=document.createElement('button'); b.type='button'; b.setAttribute('aria-label','Go to item '+(i+1)); if(i===0) b.className='active'; b.addEventListener('click', function(){ grid.scrollTo({left: offsetOf(card), behavior:'smooth'}); }); dots.appendChild(b); });
1468  grid.parentNode.appendChild(dots);
1469  var dl=dots.children;
1470  function update(){ var gl=grid.getBoundingClientRect().left, best=0, bd=1e9; cards.forEach(function(card,i){ var d=Math.abs(card.getBoundingClientRect().left-gl); if(d<bd){ bd=d; best=i; } }); for(var i=0;i<dl.length;i++){ dl[i].className=(i===best?'active':''); } }
1471  grid.addEventListener('scroll', function(){ window.requestAnimationFrame(update); }, {passive:true});
1472  grid.addEventListener('scroll', function(){ hint.style.opacity='0'; }, {once:true, passive:true});
1473})();
1474</script>
1474
1475</body>
1476</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.