PageSourceSearch

https://oracle-astromeg-me.netlify.app/

html oracle-astromeg-me.netlify.app collected 2026-10-03 11:13:56 UTC 158,482 bytes, 5,215 lines download raw bytes

1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <!--
5    ASTROMEG ORACLE — LANDING PAGE DESIGN ONLY
6
7    Astromeg Oracle landing page.
8    Production checkout logic is connected at the bottom of this file.
9  -->
10
11  <meta charset="UTF-8" />
12  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
13
14  <title>Astromeg Oracle | Advanced Astrology Intelligence</title>
15  <meta
16    name="description"
17    content="Astromeg Oracle is advanced astrology intelligence for relationships, timing, purpose, career, wealth, healing, and life decisions."
18  />
19  <link rel="canonical" href="https://oracle-astromeg-me.netlify.app/" />
20  <meta property="og:type" content="website" />
21  <meta property="og:site_name" content="Astromeg Oracle" />
22  <meta property="og:title" content="Astromeg Oracle | Advanced Astrology Intelligence" />
23  <meta property="og:description" content="Advanced astrology intelligence that is deep, precise, personal, and always available." />
24  <meta property="og:url" content="https://oracle-astromeg-me.netlify.app/" />
25  <meta property="og:image" content="https://oracle-astromeg-me.netlify.app/assets/landing-sequence/astromeg-oracle-social-share.jpg" />
26  <meta property="og:image:secure_url" content="https://oracle-astromeg-me.netlify.app/assets/landing-sequence/astromeg-oracle-social-share.jpg" />
27  <meta property="og:image:type" content="image/jpeg" />
28  <meta property="og:image:width" content="1200" />
29  <meta property="og:image:height" content="626" />
30  <meta property="og:image:alt" content="Astromeg Oracle Advanced Astrology Intelligence preview image" />
31  <meta name="twitter:card" content="summary_large_image" />
32  <meta name="twitter:title" content="Astromeg Oracle | Advanced Astrology Intelligence" />
33  <meta name="twitter:description" content="Advanced astrology intelligence that is deep, precise, personal, and always available." />
34  <meta name="twitter:image" content="https://oracle-astromeg-me.netlify.app/assets/landing-sequence/astromeg-oracle-social-share.jpg" />
35  <meta name="twitter:image:alt" content="Astromeg Oracle Advanced Astrology Intelligence preview image" />
36  <link rel="preconnect" href="https://fonts.googleapis.com">
37  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
38  <link href="https://fonts.googleapis.com/css2?family=Alex+Brush&family=Allura&fam
38ily=Cinzel:wght@500;600;700;800;900&family=Cormorant+Garamond:wght@500;600;700&family=Great+Vibes&family=Imperial+Script&family=Libre+Baskerville:wght@400;700&family=Pinyon+Script&family=Playfair+Display:ital,wght@0,600;0,700;1,500;1,600;1,700&family=Sacramento&display=swap" rel="stylesheet">
39  <link rel="stylesheet" href="assets/affiliate-checkout.css">
40  <link rel="stylesheet" href="assets/gpt-full-light-theme.css?v=20260824-33">
41
42  <style>
43    :root {
44      --black: #030306;
45      --deep-black: #000004;
46      --midnight: #07111f;
47      --midnight-2: #0d1830;
48      --violet: #25123b;
49      --plum: #3a1b50;
50      --gold-deep: #463925;
51      --gold: #80663e;
52      --gold-2: #bda166;
53      --gold-3: #dec99a;
54      --gold-metal-top: #dec99a;
55      --gold-metal-light: #bda166;
56      --gold-metal-mid: #80663e;
57      --gold-metal-dark: #463925;
58      --gold-metal-glint: #f2e6c7;
59      --champagne-glint: #f2e6c7;
60      --champagne-top: #dec99a;
61      --champagne-mid: #bda166;
62      --champagne-deep: #80663e;
63      --cream: #fff6df;
64      --muted: rgba(255, 246, 223, 0.72);
65      --muted-2: rgba(255, 246, 223, 0.56);
66      --card: rgba(255, 255, 255, 0.065);
67      --card-strong: rgba(255, 255, 255, 0.11);
68      --border: rgba(189, 161, 102, 0.26);
69      --border-strong: rgba(189, 161, 102, 0.48);
70      --shadow-gold: 0 0 48px rgba(128, 102, 62, 0.30);
71      --shadow-deep: 0 30px 90px rgba(0, 0, 0, 0.55);
72      --radius-xl: 42px;
73      --radius-lg: 30px;
74      --radius-md: 20px;
75
76      --img-hero: url("assets/landing-sequence/astromeg-oracle-hero-pic.png");
77      --img-crossroads: url("assets/landing-sequence/opportunity-success-robot.png");
78      --img-oracle: url("assets/landing-sequence/03-oracle-advanced-astrology-intelligence.jpg");
79      --img-future-cycles: url("assets/landing-sequence/04-see-future-cycles-before-they-arrive.jpg");
80      --img-strategic: url("assets/landing-sequence/05-strategic-guidance.jpg");
81      --img-calendar: url("assets/landing-sequence/06-clear-guidance-calendar.jpg");
82      --img-layered: url("assets/landing-sequence/layered-chart-readings.png");
83      --img-teacher: url("assets/landing-sequence/08-oracle-teacher-mode.jpg");
84      --img-founder: url("assets/landing-sequence/09-meet-astromeg-signed.png");
85      --img-offer: url("assets/landing-sequence/10-enter-the-oracle-offer.jpg");
86      --img-final: url("assets/landing-sequence/11-final-oracle-meditation.jpg");
87      --img-purpose: url("assets/landing-sequence/12-method-destiny-soul-purpose.jpg");
88      --img-karma: url("assets/landing-sequence/13-method-karma-north-node-past-life.jpg");
89      --img-timing: url("assets/landing-sequence/14-method-timing-solar-return-progressions.jpg");
90      --img-wealth: url("assets/landing-sequence/15-method-wealth-empire-building.jpg");
91      --img-career: url("assets/landing-sequence/16-method-career-destiny-reputation.jpg");
92      --img-shadow: url("assets/landing-sequence/17-method-shadow-healing.jpg");
93      --img-intelligence: url("assets/landing-sequence/20-alt-advanced-astrology-intelligence.jpg");
94      --img-overview: url("assets/landing-sequence/ai-saturn-advanced-centered-no-url.png");
95    }
96
97    * {
98      box-sizing: border-box;
99    }
100
101    html {
102      scroll-behavior: smooth;
103    }
104
105    body {
106      position: relative;
107      margin: 0;
108      min-height: 100vh;
109      color: var(--cream);
110      background:
111        radial-gradient(circle at 18% 0%, rgba(216, 172, 85, 0.18), transparent 30%),
112        radial-gradient(circle at 88% 6%, rgba(108, 75, 182, 0.24), transparent 32%),
113        linear-gradient(180deg, #05050b 0%, #020206 42%, #07111f 100%);
114      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
115      line-height: 1.6;
116      overflow-x: hidden;
117    }
118
119    .page-bg-video {
120      position: fixed;
121      inset: 0;
122      z-index: 0;
123      width: 100%;
124      height: 100%;
125      object-fit: cover;
126      object-position: center;
127      pointer-events: none;
128      opacity: .86;
129      filter: saturate(1.05) contrast(1.06) brightness(.98);
130    }
131
132    .page-bg-tint {
133      position: fixed;
134      inset: 0;
135      z-index: 1;
136      pointer-events: none;
137      background:
138        radial-gradient(circle at 50% 10%, rgba(216, 172, 85, .06), transparent 38%),
139        linear-gradient(180deg, rgba(0,0,0,.20), rgba(0,0,0,.34) 48%, rgba(0,0,0,.44));
140    }
141
142    body::before {
143      content: "";
144      position: fixed;
145      inset: 0;
146      z-index: 1;
147      pointer-events: none;
148      opacity: 0.18;
149      background-image:
150        radial-gradient(circle, rgba(255,255,255,.85) 0 1px, transparent 1.5px),
151        radial-gradient(circle, rgba(216,172,85,.55) 0 1px, transparent 1.5px);
152      background-size: 150px 150px, 230px 230px;
153      background-position: 0 0, 70px 95px;
154    }
155
156    body::after {
157      content: "";
158      position: fixed;
159      inset: 0;
160      z-index: 1;
161      pointer-events: none;
162      background:
163        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
164        linear-gradient(180deg, rgba(255,255,255,.018) 1px, transparent 1px);
165      background-size: 72px 72px;
166      mask-image: linear-gradient(180deg, rgba(0,0,0,.45), transparent 70%);
167    }
168
169    .page {
170      position: relative;
171      z-index: 2;
172    }
173
174    a {
175      color: inherit;
176      text-decoration: none;
177    }
178
179    img {
180      display: block;
181      max-width: 100%;
182    }
183
184    button {
185      font: inherit;
186    }
187
188    .page {
189      position: relative;
190      overflow: hidden;
191    }
192
193    .nav {
194      position: fixed;
195      top: 18px;
196      left: 50%;
197      transform: translateX(-50%);
198      z-index: 30;
199      width: calc(100% - 32px);
200      max-width: 1180px;
201      display: flex;
202      align-items: center;
203      justify-content: space-between;
204      gap: 16px;
205      padding: 12px 14px;
206      border: 1px solid rgba(189, 161, 102, 0.30);
207      border-radius: 999px;
208      background: rgba(3, 3, 8, 0.62);
209      backdrop-filter: blur(18px);
210      box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
211    }
212
213    .brand {
214      display: inline-flex;
215      align-items: center;
216      gap: 10px;
217      color: var(--gold-metal-light);
218      font-size: 12px;
219      font-weight: 950;
220      letter-spacing: 0;
221      text-transform: uppercase;
222      white-space: nowrap;
223    }
224
225    .brand-logo {
226      display: block;
227      flex: 0 0 38px;
228      width: 38px;
229      height: 38px;
230      object-fit: contain;
231      border-radius: 50%;
232      filter: drop-shadow(0 0 10px rgba(189, 161, 102, .30));
233    }
234
235    .nav-links {
236      display: flex;
237      align-items: center;
238      gap: 4px;
239    }
240
241    .nav-links a {
242      padding: 9px 12px;
243      border-radius: 999px;
244      color: rgba(255, 246, 223, 0.72);
245      font-size: 13px;
246      font-weight: 800;
247      transition: 0.24s ease;
248    }
249
250    .nav-links a:hover {
251      color: var(--gold-metal-light);
252      background: rgba(255,255,255,.06);
253    }
254
255    .nav-links .nav-cta {
256      color: #0b0805;
257      border: 1px solid rgba(222, 201, 154, .72);
258      background: linear-gradient(135deg, #dec99a 0%, #bda166 54%, #80663e 100%);
259      box-shadow: var(--shadow-gold), inset 0 1px 0 rgba(255, 238, 196, .20);
260    }
261
262    .nav-links .nav-cta:hover {
263      color: #0b0805;
264      background: linear-gradient(135deg, #e7d6ad 0%, #c6ac76 54%, #8b7045 100%);
265    }
266
267    .scroll-arrow {
268      display: none;
269    }
270
271    .section {
272      position: relative;
273      padding: 108px 22px;
274      overflow: hidden;
275    }
276
277    .section-tight {
278      padding: 78px 22px;
279    }
280
281    .container {
282      position: relative;
283      z-index: 2;
284      width: min(1180px, 100%);
285      margin: 0 auto;
286    }
287
288    .container-narrow {
289      position: relative;
290      z-index: 2;
291      width: min(920px, 100%);
292      margin: 0 auto;
293    }
294
295    .eyebrow {
296      margin-bottom: 18px;
297      color: var(--gold-metal-light);
298      font-size: 12px;
299      font-weight: 800;
300      letter-spacing: 0;
301      text-transform: uppercase;
302      text-shadow: 0 0 14px rgba(155, 105, 40, .16);
303    }
304
305    h1,
306    h2,
307    h3 {
308      margin: 0;
309      color: var(--gold-metal-top);
310      font-family: "Cormorant Garamond", "Libre Baskerville", "Cinzel", Georgia, "Times New Roman", serif;
311      line-height: .98;
312      letter-spacing: 0;
313      font-weight: 700;
314      background:
315        linear-gradient(180deg,
316          var(--gold-metal-glint) 0%,
317          var(--gold-metal-top) 13%,
318          var(--gold-metal-light) 29%,
319          var(--gold-metal-mid) 47%,
320          var(--gold-metal-dark) 61%,
321          var(--gold-metal-light) 78%,
322          var(--gold-metal-glint) 100%);
323      -webkit-background-clip: text;
324      background-clip: text;
325      color: transparent;
326      text-shadow:
327        0 1px 0 rgba(255,255,255,.16),
328        0 2px 0 rgba(47, 25, 5, .50),
329        0 0 10px rgba(216, 172, 85, .10),
330        0 0 28px rgba(75, 42, 9, .38);
331    }
332
333    h1 {
334      max-width: 880px;
335      font-size: clamp(46px, 7vw, 96px);
336      font-weight: 700;
337    }
338
339    h2 {
340      font-size: clamp(36px, 5.2vw, 70px);
341      font-weight: 700;
342    }
343
344    h3 {
345      font-size: clamp(24px, 2.5vw, 34px);
346      letter-spacing: 0;
347      font-weight: 700;
348    }
349
350    p {
351      margin: 0;
352      color: var(--muted);
353      font-size: clamp(16px, 1.45vw, 20px);
354    }
355
356    p + p {
357      margin-top: 16px;
358    }
359
360    .lead {
361      color: rgba(255, 246, 223, 0.86);
362      font-size: clamp(19px, 2vw, 25px);
363      text-shadow: 0 0 22px rgba(0, 0, 0, .55);
364    }
365
366    .micro {
367      color: var(--muted-2);
368      font-size: 14px;
369    }
370
371    .price-equivalent {
372      margin-top: 8px;
373      color: rgba(255, 246, 223, .72);
374      font-family: Georgia, "Times New Roman", serif;
375      font-style: italic;
376    }
377
378    .gold {
379      color: var(--gold-metal-light);
380    }
381
382    .hero {
383      min-height: 100svh;
384      display: flex;
385      align-items: center;
386      padding-top: 124px;
387      padding-bottom: 32px;
388      background:
389        radial-gradient(circle at 52% 8%, rgba(216,172,85,.16), transparent 28%),
390        radial-gradient(circle at 80% 72%, rgba(179, 75, 178, .34), transparent 34%),
391        linear-gradient(90deg, rgba(3,3,8,.88) 0%, rgba(12,8,22,.58) 44%, rgba(92,38,96,.22) 100%),
392        linear-gradient(180deg, rgba(3,3,8,.06) 0%, rgba(75,36,94,.16) 48%, rgba(126,39,90,.48) 100%),
393        var(--img-hero) center 78%/cover no-repeat;
394    }
395
396    .hero::after {
397      content: "";
398      position: absolute;
399      inset: auto 0 0;
400      height: 260px;
401      background: linear-gradient(180deg, transparent, var(--black));
402      pointer-events: none;
403    }
404
405    .hero-copy {
406      max-width: 800px;
407      padding-top: 20px;
408    }
409
410    .hero-logo-mark {
411      width: clamp(220px, 22vw, 360px);
412      height: auto;
413      margin: 0 0 16px;
414      filter:
415        drop-shadow(0 0 18px rgba(216, 172, 85, .22))
416        drop-shadow(0 14px 30px rgba(0, 0, 0, .36));
417    }
418
419    .hero-gold-rule {
420      width: min(260px, 52vw);
421      height: 1px;
422      margin: 0 0 26px;
423      background: linear-gradient(90deg, transparent, rgba(216, 172, 85, .88), transparent);
424      box-shadow: 0 0 18px rgba(216, 172, 85, .28);
425    }
426
427    .hero h1 {
428      max-width: 940px;
429      font-family: "Playfair Display", "Cormorant Garamond", "Libre Baskerville", Georgia, serif;
430      font-size: clamp(58px, 7.8vw, 118px);
431      line-height: .94;
432      font-style: italic;
433      font-weight: 600;
434      text-shadow:
435        0 1px 0 rgba(255,255,255,.16),
436        0 2px 0 rgba(47, 25, 5, .44),
437        0 0 24px rgba(0, 0, 0, .62),
438        0 0 34px rgba(216, 172, 85, .16);
439    }
440
441    .hero-title-word {
442      display: inline;
443    }
444
445    .hero-copy .lead {
446      max-width: 740px;
447      margin-top: 20px;
448      font-family: "Libre Baskerville", "Cormorant Garamond", Georgia, serif;
449      font-style: normal;
450      font-weight: 400;
451      line-height: 1.46;
452      color: rgba(255, 246, 223, .86);
453    }
454
455    .hero-punch {
456      display: grid;
457      gap: 6px;
458      margin-top: 18px;
459      color: rgba(255, 246, 223, 0.86);
460      font-family: "Libre Baskerville", "Cormorant Garamond", Georgia, serif;
461      font-size: clamp(17px, 1.55vw, 21px);
462      font-style: normal;
463      font-weight: 400;
464      line-height: 1.42;
465      text-shadow: 0 0 18px rgba(0, 0, 0, .56);
466    }
467
468    .hero-support {
469      max-width: 740px;
470      margin-top: 26px;
471      color: rgba(255, 246, 223, .82);
472      font-family: "Libre Baskerville", Georgia, serif;
473      font-size: clamp(15px, 1.22vw, 18px);
474      line-height: 1.85;
475      text-shadow: 0 0 20px rgba(0, 0, 0, .62);
476    }
477
478    .hero-payment-note {
479      max-width: 760px;
480      margin-top: 18px;
481      color: rgba(255, 246, 223, .76);
482      font-size: 14px;
483      line-height: 1.55;
484    }
485
486    .hero-payment-methods {
487      justify-content: flex-start;
488      max-width: 820px;
489      margin-top: 14px;
490    }
491
492    .cta-row {
493      display: flex;
494      flex-wrap: wrap;
495      gap: 16px 18px;
496      align-items: center;
497      margin-top: 34px;
498    }
499
500    .section-demo-cta {
501      justify-content: center;
502      margin-top: 28px;
503    }
504
505    .split-copy .section-demo-cta {
506      justify-content: flex-start;
507    }
508
509    .demo-intro-strip {
510      padding: 30px 0 4px;
511      border-top: 1px solid rgba(231, 207, 138, .18);
512      background: linear-gradient(180deg, rgba(8, 8, 12, .94), rgba(10, 8, 14, .72));
513    }
514
515    .demo-intro-strip .cta-row {
516      margin-top: 0;
517    }
518
519    .btn {
520      display: inline-flex;
521      align-items: center;
522      justify-content: center;
523      gap: 10px;
524      min-height: 54px;
525      min-width: 178px;
526      padding: 16px 28px;
527      border: 1px solid transparent;
528      border-radius: 999px;
529      cursor: pointer;
530      font-weight: 950;
531      transition: transform .22s ease, box-shadow .22s ease, background .22s ease, border-color .22s ease;
532      user-select: none;
533      text-align: center;
534    }
535
536    .btn:hover {
537      transform: translateY(-2px);
538    }
539
540    .btn-primary {
541      color: #09080a;
542      border-color: rgba(189, 161, 102, .72);
543      background:
544        linear-gradient(180deg, rgba(255,255,255,.10), transparent 36%),
545        linear-gradient(135deg, var(--gold-metal-top) 0%, var(--gold-metal-light) 46%, var(--gold-metal-mid) 100%);
546      box-shadow: var(--shadow-gold), inset 0 0 0 1px rgba(75,42,9,.36);
547    }
548
549    .btn-secondary {
550      color: var(--gold-metal-light);
551      border-color: rgba(216, 172, 85, 0.22);
552      background: rgba(255,255,255,.035);
553      backdrop-filter: blur(14px);
554    }
555
556    .btn-gcash {
557      color: #f7fbff;
558      border-color: rgba(95, 198, 255, .66);
559      background:
560        linear-gradient(180deg, rgba(255,255,255,.15), transparent 38%),
561        linear-gradient(135deg, #1769aa 0%, #178ed2 52%, #36b8e7 100%);
562      box-shadow: 0 0 36px rgba(36, 157, 220, .26), inset 0 0 0 1px rgba(5, 47, 83, .34);
563    }
564
565    .btn-demo-seal {
566      position: relative;
567      isolation: isolate;
568      flex: 0 0 156px;
569      width: 156px;
570      height: 156px;
571      min-width: 156px;
572      min-height: 156px;
573      padding: 22px;
574      border-radius: 50%;
575      border: 2px solid rgba(231, 191, 93, .88);
576      color: #d9ad55;
577      background:
578        radial-gradient(circle at 50% 42%, #111014 0%, #050508 100%);
579      box-shadow:
580        0 0 42px rgba(214, 170, 79, .25),
581        0 18px 44px rgba(0, 0, 0, .42),
582        inset 0 0 28px rgba(255, 232, 151, .08);
583      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
584      font-size: 13px;
585      font-weight: 850;
586      letter-spacing: .07em;
587      line-height: 1.25;
588      text-transform: uppercase;
589      white-space: normal;
590      text-shadow:
591        0 1px 1px rgba(40, 20, 3, .84),
592        0 0 14px rgba(255, 237, 173, .38);
593    }
594
595    .btn-demo-seal::before {
596      display: none;
597    }
598
599    .btn-demo-seal::after {
600      display: none;
601    }
602
603    .proof-strip {
604      display: flex;
605      flex-wrap: wrap;
606      gap: 12px;
607      margin-top: 36px;
608    }
609
610    .proof-pill {
611      display: inline-flex;
612      align-items: center;
613      gap: 8px;
614      padding: 11px 15px;
615      border: 1px solid rgba(216, 172, 85, .28);
616      border-radius: 999px;
617      background: rgba(0,0,0,.42);
618      color: rgba(255, 246, 223, .86);
619      font-size: 14px;
620      font-weight: 850;
621      backdrop-filter: blur(12px);
622    }
623
624    .proof-pill strong {
625      color: var(--gold-metal-light);
626    }
627
628    .hero-review-proof {
629      display: grid;
630      grid-template-columns: .52fr 1fr;
631      gap: 16px;
632      max-width: 820px;
633      margin-top: 24px;
634      padding: 18px;
635      border: 1px solid rgba(216, 172, 85, .28);
636      border-radius: 24px;
637      background:
638        radial-gradient(circle at 20% 0%, rgba(216,172,85,.14), transparent 42%),
639        rgba(0,0,0,.48);
640      box-shadow: 0 20px 60px rgba(0,0,0,.34), 0 0 32px rgba(166, 111, 36, .14);
641      backdrop-filter: blur(14px);
642    }
643
644    .hero-review-score {
645      display: grid;
646      align-content: center;
647      justify-items: start;
648      gap: 4px;
649      padding-right: 12px;
650      border-right: 1px solid rgba(216, 172, 85, .18);
651    }
652
653    .hero-review-score strong {
654      color: var(--gold-metal-top);
655      font-family: "Cinzel", Georgia, serif;
656      font-size: clamp(30px, 4vw, 48px);
657      font-weight: 600;
658      line-height: 1;
659    }
660
661    .hero-review-score span,
662    .hero-review-copy span {
663      color: var(--gold-metal-light);
664      font-size: 12px;
665      font-weight: 850;
666      text-transform: uppercase;
667    }
668
669    .hero-review-copy {
670      display: grid;
671      gap: 7px;
672      align-content: center;
673    }
674
675    .hero-review-copy p {
676      font-size: clamp(15px, 1.3vw, 17px);
677      color: rgba(255, 246, 223, .82);
678    }
679
680    .grid {
681      display: grid;
682      gap: 24px;
683    }
684
685    .grid-2 {
686      grid-template-columns: repeat(2, minmax(0, 1fr));
687      align-items: center;
688    }
689
690    .grid-3 {
691      grid-template-columns: repeat(3, minmax(0, 1fr));
692    }
693
694    .grid-4 {
695      grid-template-columns: repeat(4, minmax(0, 1fr));
696    }
697
698    .split-copy {
699      display: grid;
700      gap: 20px;
701    }
702
703    .section-head {
704      max-width: 920px;
705      margin: 0 auto 44px;
706      text-align: center;
707    }
708
709    .section-head p {
710      margin-top: 18px;
711    }
712
713    .visual-frame {
714      position: relative;
715      display: grid;
716      place-items: center;
717      min-height: 560px;
718      overflow: hidden;
719      border: 1px solid rgba(216, 172, 85, .32);
720      border-radius: 34px;
721      background-position: center top;
722      background-size: contain;
723      background-repeat: no-repeat;
724      background-color: #030306;
725      box-shadow: var(--shadow-deep), var(--shadow-gold);
726    }
727
728    .visual-frame.small {
729      min-height: 430px;
730    }
731
732    .visual-frame.opportunity-frame {
733      width: min(100%, 520px);
734      min-height: 0;
735      aspect-ratio: 1 / 1;
736      justify-self: center;
737      background-size: cover;
738      background-position: center 48%;
739      box-shadow:
740        0 30px 90px rgba(0, 0, 0, .56),
741        0 0 58px rgba(240, 173, 48, .22);
742    }
743
744    .visual-frame::before {
745      content: "";
746      position: absolute;
747      inset: 0;
748      pointer-events: none;
749      background:
750        radial-gradient(circle at 50% 35%, transparent 0 34%, rgba(0,0,0,.28) 76%),
751        linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.46));
752    }
753
754    .visual-frame img {
755      position: relative;
756      z-index: 1;
757      display: block;
758      width: 100%;
759      height: 100%;
760      min-height: inherit;
761      object-fit: contain;
762      object-position: center top;
763    }
764
765    .difference-frame {
766      align-items: end;
767      padding: clamp(24px, 3vw, 40px);
768      border-color: rgba(216, 172, 85, 0.42);
769      background-color: #050406;
770      box-shadow:
771        0 26px 80px rgba(0, 0, 0, 0.48),
772        0 0 54px rgba(216, 172, 85, 0.20);
773    }
774
775    .difference-frame::before {
776      background:
777        radial-gradient(circle at 50% 32%, rgba(216, 172, 85, 0.10), transparent 38%),
778        linear-gradient(180deg, rgba(255, 211, 112, 0.04), rgba(0, 0, 0, 0.50));
779    }
780
781    .difference-frame-note {
782      position: relative;
783      z-index: 1;
784      max-width: 520px;
785      padding: clamp(22px, 3vw, 34px);
786      border: 1px solid rgba(216, 172, 85, 0.48);
787      border-radius: 26px;
788      background:
789        linear-gradient(180deg, rgba(88, 58, 14, 0.38), rgba(3, 3, 8, 0.72));
790      box-shadow:
791        0 20px 58px rgba(0, 0, 0, 0.42),
792        0 0 34px rgba(216, 172, 85, 0.14);
793      backdrop-filter: blur(12px);
794    }
795
796    .difference-frame-note p {
797      color: rgba(255, 239, 190, 0.92);
798      font-family: "Libre Baskerville", Georgia, serif;
799      font-size: clamp(16px, 1.55vw, 21px);
800      line-height: 1.72;
801    }
802
803    .difference-frame-note strong {
804      display: block;
805      margin-top: 14px;
806      color: var(--champagne-top);
807      font-family: "Playfair Display", Georgia, serif;
808      font-size: clamp(22px, 2.7vw, 34px);
809      font-style: italic;
810      font-weight: 500;
811      line-height: 1.18;
812      text-shadow: 0 0 24px rgba(216, 172, 85, 0.22);
813    }
814
815    .visual-frame.portrait-frame {
816      min-height: 0;
817      aspect-ratio: 1122 / 1402;
818      background:
819        radial-gradient(circle at 50% 0%, rgba(216,172,85,.18), transparent 42%),
820        radial-gradient(circle at 50% 50%, rgba(216,172,85,.18), transparent 62%),
821        linear-gradient(180deg, rgba(15,12,10,.94), rgba(3,3,8,.98));
822      padding: 14px;
823    }
824
825    .visual-frame.portrait-frame::before {
826      display: none;
827    }
828
829    .visual-frame.portrait-frame img {
830      height: 100%;
831      min-height: 0;
832      padding: 0;
833      border: 1px solid rgba(216,172,85,.30);
834      border-radius: 26px;
835      background: #030306;
836      box-shadow:
837        0 0 0 1px rgba(0,0,0,.32),
838        0 24px 70px rgba(0,0,0,.55),
839        0 0 62px rgba(216,172,85,.28);
840      filter: contrast(1.03) saturate(.98) brightness(1.02);
841    }
842
843    .secret-world {
844      background:
845        radial-gradient(circle at 50% 0%, rgba(216,172,85,.12), transparent 36%),
846        linear-gradient(180deg, rgba(0,0,4,.58), rgba(7, 17, 31, .42) 48%, rgba(0,0,4,.64));
847    }
848
849    .portal-gallery {
850      display: grid;
851      grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
852      gap: 16px;
853      margin-top: 42px;
854    }
855
856    .portal-card {
857      position: relative;
858      display: grid;
859      grid-template-rows: auto 1fr;
860      align-content: start;
861      min-height: 0;
862      overflow: hidden;
863      padding: clamp(10px, 1.6vw, 14px);
864      border: 1px solid rgba(216, 172, 85, .36);
865      border-radius: 26px;
866      background-position: center top;
867      background-size: contain;
868      background-repeat: no-repeat;
869      background:
870        radial-gradient(circle at 50% 0%, rgba(216,172,85,.10), transparent 45%),
871        linear-gradient(180deg, rgba(5,5,10,.96), rgba(0,0,4,.98));
872      box-shadow: var(--shadow-deep), 0 0 48px rgba(240, 173, 48, .18);
873    }
874
875    .portal-card img {
876      position: relative;
877      z-index: 1;
878      width: 100%;
879      height: auto;
880      max-height: 390px;
881      object-fit: contain;
882      object-position: center top;
883      padding: 0;
884      border: 1px solid rgba(216, 172, 85, .20);
885      border-radius: 18px;
886      background:
887        radial-gradient(circle at 50% 16%, rgba(216,172,85,.14), transparent 42%),
888        #030306;
889      opacity: .78;
890      filter: saturate(.86) contrast(.92) brightness(.9);
891    }
892
893    .portal-card.large {
894      grid-column: span 2;
895      min-height: 0;
896    }
897
898    .portal-card.large img {
899      max-height: 560px;
900    }
901
902    .portal-card.portal-headline-card {
903      grid-column: 1 / -1;
904      min-height: 0;
905    }
906
907    .portal-card.portal-headline-card img {
908      max-height: 560px;
909      opacity: .88;
910      filter: saturate(.94) contrast(.96) brightness(.94);
911    }
912
913    .portal-card.portal-text-card {
914      grid-template-rows: 1fr;
915      min-height: 190px;
916      background:
917        radial-gradient(circle at 18% 0%, rgba(216,172,85,.08), transparent 42%),
918        rgba(8, 8, 14, .48);
919      box-shadow: 0 18px 44px rgba(0,0,0,.28);
920    }
921
922    .portal-card.portal-text-card .portal-card-content {
923      display: flex;
924      flex-direction: column;
925      justify-content: flex-start;
926      height: 100%;
927      margin-top: 0;
928      padding: clamp(18px, 2vw, 24px);
929      border-color: rgba(216, 172, 85, .16);
930      background: rgba(0, 0, 4, .30);
931      box-shadow: none;
932    }
933
934    .portal-card::before {
935      display: none;
936    }
937
938    .portal-card-content {
939      position: relative;
940      z-index: 1;
941      margin-top: 10px;
942      padding: 14px 15px 16px;
943      border: 1px solid rgba(216, 172, 85, .20);
944      border-radius: 18px;
945      background:
946        radial-gradient(circle at 18% 0%, rgba(216,172,85,.11), transparent 42%),
947        rgba(0,0,4,.88);
948      box-shadow: 0 18px 44px rgba(0,0,0,.35);
949    }
950
951    .portal-card.show-full .portal-card-content {
952      margin-top: 10px;
953    }
954
955    .portal-card.portal-text-card.show-full .portal-card-content {
956      margin-top: 0;
957    }
958
959    .portal-card.genius-card {
960      grid-column: span 1;
961    }
962
963    .genius-image-pair {
964      position: relative;
965      z-index: 1;
966      display: block;
967    }
968
969    .genius-image-pair img {
970      width: 100%;
971      height: auto;
972      max-height: 390px;
973      aspect-ratio: 1 / 1;
974      object-fit: cover;
975      object-position: center;
976      opacity: .78;
977      filter: saturate(.86) contrast(.92) brightness(.9);
978      box-shadow:
979        0 16px 44px rgba(0, 0, 0, 0.36),
980        0 0 28px rgba(216, 172, 85, 0.14);
981    }
982
983    .genius-image-pair img:nth-child(2) {
984      transform: none;
985    }
986
987    .genius-card .portal-card-content {
988      order: initial;
989      margin-top: 10px;
990      margin-bottom: 0;
991      border-color: rgba(216, 172, 85, 0.30);
992      background:
993        radial-gradient(circle at 18% 0%, rgba(216,172,85,.14), transparent 42%),
994        rgba(0,0,4,.90);
995    }
996
997    .portal-card-content h3 {
998      margin-bottom: 8px;
999      color: var(--gold-metal-top);
1000      background: linear-gradient(180deg, var(--champagne-glint) 0%, var(--champagne-top) 44%, var(--champagne-deep) 100%);
1001      -webkit-background-clip: text;
1002      background-clip: text;
1003      -webkit-text-fill-color: transparent;
1004      font-family: "Playfair Display", "Cormorant Garamond", Georgia, serif;
1005      font-size: clamp(21px, 1.95vw, 28px);
1006      font-style: italic;
1007      font-weight: 400;
1008      line-height: 1.12;
1009      text-shadow: 0 0 18px rgba(216, 172, 85, .16);
1010    }
1011
1012    .portal-card-content p {
1013      color: rgba(255, 246, 223, .90);
1014      font-size: clamp(15px, 1.22vw, 17px);
1015      font-weight: 400;
1016      line-height: 1.48;
1017      text-shadow: none;
1018    }
1019
1020    .visual-caption {
1021      display: none;
1022    }
1023
1024    .visual-caption strong {
1025      display: block;
1026      margin-bottom: 6px;
1027      color: var(--gold-metal-light);
1028      font-size: 13px;
1029      font-weight: 950;
1030      letter-spacing: 0;
1031      text-transform: uppercase;
1032    }
1033
1034    .card {
1035      position: relative;
1036      min-height: 100%;
1037      overflow: hidden;
1038      padding: 28px;
1039      border: 1px solid rgba(216, 172, 85, .22);
1040      border-radius: 28px;
1041      background:
1042        radial-gradient(circle at 22% 0%, rgba(216,172,85,.12), transparent 38%),
1043        linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.035));
1044      box-shadow: 0 18px 60px rgba(0,0,0,.28);
1045    }
1046
1047    .card h3 {
1048      margin-bottom: 13px;
1049      color: var(--gold-metal-light);
1050    }
1051
1052    .icon {
1053      width: 46px;
1054      height: 46px;
1055      display: grid;
1056      place-items: center;
1057      margin-bottom: 18px;
1058      border-radius: 16px;
1059      color: var(--gold-metal-light);
1060      background:
1061        radial-gradient(circle at 50% 45%, rgba(216, 172, 85, .12), transparent 58%),
1062        linear-gradient(145deg, rgba(3, 3, 8, .88), rgba(18, 12, 24, .68));
1063      border: 1px solid rgba(216, 172, 85, .64);
1064      box-shadow:
1065        0 0 22px rgba(216, 172, 85, .20),
1066        inset 0 0 18px rgba(216, 172, 85, .07);
1067      font-size: 21px;
1068      font-weight: 700;
1069      text-shadow: 0 0 12px rgba(216, 172, 85, .32);
1070    }
1071
1072    #trust .card h3,
1073    #reviews .review-label,
1074    #reviews .google-trust-badge strong,
1075    #reviews .stars {
1076      background:
1077        linear-gradient(180deg,
1078          var(--gold-metal-glint) 0%,
1079          var(--gold-metal-top) 13%,
1080          var(--gold-metal-light) 29%,
1081          var(--gold-metal-mid) 47%,
1082          var(--gold-metal-dark) 61%,
1083          var(--gold-metal-light) 78%,
1084          var(--gold-metal-glint) 100%);
1085      -webkit-background-clip: text;
1086      background-clip: text;
1087      color: transparent;
1088      -webkit-text-fill-color: transparent;
1089      text-shadow:
1090        0 1px 0 rgba(255, 255, 255, .06),
1091        0 0 14px rgba(216, 172, 85, .18);
1092    }
1093
1094    #trust .icon {
1095      color: var(--gold-metal-top);
1096      -webkit-text-fill-color: var(--gold-metal-top);
1097      text-shadow:
1098        0 0 10px rgba(249, 234, 179, .18),
1099        0 0 18px rgba(216, 172, 85, .26);
1100    }
1101
1102    #reviews .review-actions .btn-secondary span {
1103      background:
1104        linear-gradient(180deg,
1105          var(--gold-metal-glint) 0%,
1106          var(--gold-metal-top) 13%,
1107          var(--gold-metal-light) 29%,
1108          var(--gold-metal-mid) 47%,
1109          var(--gold-metal-dark) 61%,
1110          var(--gold-metal-light) 78%,
1111          var(--gold-metal-glint) 100%);
1112      -webkit-background-clip: text;
1113      background-clip: text;
1114      color: transparent;
1115      -webkit-text-fill-color: transparent;
1116      text-shadow: 0 0 14px rgba(216, 172, 85, .16);
1117    }
1118
1119    #trust .section-head p,
1120    #trust .card p,
1121    #reviews .rating-card p,
1122    #reviews .google-trust-badge span:last-child,
1123    #reviews .review-card blockquote,
1124    #reviews .review-meta,
1125    #reviews .review-source {
1126      font-weight: 400;
1127    }
1128
1129    #trust .card h3,
1130    #reviews .google-trust-badge strong,
1131    #reviews .review-label,
1132    #reviews .review-actions .btn-secondary,
1133    #reviews .review-actions .btn-secondary span {
1134      font-weight: 500;
1135    }
1136
1137    #reviews .review-label {
1138      letter-spacing: .04em;
1139    }
1140
1141    .dark-band {
1142      border-top: 1px solid rgba(216, 172, 85, .16);
1143      border-bottom: 1px solid rgba(216, 172, 85, .16);
1144      background:
1145        radial-gradient(circle at 20% 12%, rgba(214,168,66,.14), transparent 35%),
1146        radial-gradient(circle at 78% 28%, rgba(108,83,178,.22), transparent 36%),
1147        linear-gradient(180deg, rgba(10,10,18,.74), rgba(3,3,8,.94));
1148    }
1149
1150    .oracle-band {
1151      background:
1152        radial-gradient(circle at 18% 18%, rgba(216,172,85,.16), transparent 32%),
1153        radial-gradient(circle at 82% 22%, rgba(216,172,85,.10), transparent 30%),
1154        linear-gradient(180deg, rgba(3,3,8,.98), rgba(7,17,31,.88) 52%, rgba(3,3,8,.98));
1155    }
1156
1157    .future-band {
1158      background:
1159        radial-gradient(circle at 80% 12%, rgba(216,172,85,.13), transparent 34%),
1160        linear-gradient(180deg, rgba(3,3,8,.98), rgba(7,17,31,.90) 48%, rgba(3,3,8,.98));
1161    }
1162
1163    .teacher-band {
1164      background:
1165        linear-gradient(90deg, rgba(3,3,8,.91) 0%, rgba(3,3,8,.62) 54%, rgba(3,3,8,.24) 100%),
1166        var(--img-teacher) center/cover no-repeat;
1167    }
1168
1169    .offer-band {
1170      background:
1171        radial-gradient(circle at 50% 0%, rgba(216,172,85,.20), transparent 35%),
1172        radial-gradient(circle at 15% 80%, rgba(216,172,85,.12), transparent 30%),
1173        linear-gradient(180deg, rgba(3,3,8,.98), rgba(10,10,18,.92), rgba(3,3,8,.98));
1174    }
1175
1176    .final-band {
1177      background:
1178        radial-gradient(circle at 50% 14%, rgba(216,172,85,.15), transparent 38%),
1179        linear-gradient(180deg, rgba(7,17,31,.88), rgba(3,3,8,.98));
1180    }
1181
1182    .text-panel {
1183      max-width: 720px;
1184      padding: 48px;
1185      border: 1px solid rgba(216, 172, 85, .25);
1186      border-radius: 34px;
1187      background: rgba(3,3,8,.58);
1188      backdrop-filter: blur(18px);
1189      box-shadow: var(--shadow-deep);
1190    }
1191
1192    .text-panel h2 + p {
1193      margin-top: 20px;
1194    }
1195
1196    .text-panel p {
1197      line-height: 1.68;
1198    }
1199
1200    .text-panel p + p {
1201      margin-top: 22px;
1202    }
1203
1204    .text-panel > .btn {
1205      display: flex;
1206      width: fit-content;
1207      margin-top: 30px;
1208    }
1209
1210    .check-list {
1211      display: grid;
1212      gap: 12px;
1213      margin: 22px 0 0;
1214      padding: 0;
1215      list-style: none;
1216    }
1217
1218    .check-list li {
1219      position: relative;
1220      padding: 13px 15px 13px 42px;
1221      border: 1px solid rgba(216, 172, 85, .16);
1222      border-radius: 18px;
1223      background: rgba(255,255,255,.04);
1224      color: rgba(255, 246, 223, .78);
1225    }
1226
1227    .check-list li::before {
1228      content: "✦";
1229      position: absolute;
1230      left: 16px;
1231      top: 12px;
1232      color: var(--gold-metal-light);
1233    }
1234
1235    .difference-title {
1236      max-width: 760px;
1237      color: var(--gold-metal-top);
1238      font-family: "Playfair Display", "Cormorant Garamond", Georgia, serif;
1239      font-size: clamp(32px, 4.4vw, 58px);
1240      font-style: italic;
1241      font-weight: 500;
1242      line-height: 1.14;
1243      background:
1244        linear-gradient(180deg,
1245          #ead39b 0%,
1246          #d8ac55 25%,
1247          #b99352 54%,
1248          #7b4d14 72%,
1249          #ead39b 100%);
1250      -webkit-background-clip: text;
1251      background-clip: text;
1252      -webkit-text-fill-color: transparent;
1253      text-shadow:
1254        0 1px 0 rgba(47, 25, 5, 0.48),
1255        0 0 30px rgba(216, 172, 85, 0.20);
1256    }
1257
1258    #difference {
1259      padding-bottom: 70px;
1260      background:
1261        radial-gradient(circle at 18% 14%, rgba(216, 172, 85, 0.12), transparent 32%),
1262        radial-gradient(circle at 82% 18%, rgba(216, 172, 85, 0.12), transparent 34%),
1263        linear-gradient(180deg, rgba(3, 3, 8, 0.98), rgba(14, 10, 7, 0.94), rgba(3, 3, 8, 0.98));
1264    }
1265
1266    .difference-premium-layout {
1267      max-width: 980px;
1268      display: grid;
1269      gap: 28px;
1270      padding: clamp(34px, 5vw, 64px) 0;
1271      border-top: 1px solid rgba(216, 172, 85, 0.34);
1272      border-bottom: 1px solid rgba(216, 172, 85, 0.24);
1273    }
1274
1275    .difference-kicker {
1276      color: var(--gold-metal-light);
1277      font-size: 13px;
1278      font-weight: 900;
1279      letter-spacing: 0.18em;
1280      text-transform: uppercase;
1281    }
1282
1283    .difference-training-note {
1284      max-width: 840px;
1285      margin: 0;
1286      padding-left: 24px;
1287      border-left: 2px solid rgba(216, 172, 85, 0.58);
1288      color: rgba(255, 246, 223, 0.84);
1289      font-family: inherit;
1290      font-size: clamp(16px, 1.45vw, 20px);
1291      line-height: 1.7;
1292    }
1293
1294    .difference-training-note strong {
1295      color: rgba(255, 246, 223, 0.88);
1296      font: inherit;
1297      font-weight: 400;
1298      text-shadow: none;
1299    }
1300
1301    #difference h2 {
1302      color: rgba(255, 246, 223, 0.90);
1303      background: none;
1304      -webkit-text-fill-color: currentColor;
1305      font-family: "Playfair Display", "Cormorant Garamond", Georgia, serif;
1306      font-size: clamp(30px, 3.7vw, 50px);
1307      font-style: italic;
1308      font-weight: 400;
1309      line-height: 1.16;
1310      text-shadow: 0 0 16px rgba(0, 0, 0, .46);
1311    }
1312
1313    #difference .difference-premium-layout > p:not(.difference-training-note) {
1314      color: rgba(255, 246, 223, 0.84);
1315      max-width: 820px;
1316      line-height: 1.7;
1317    }
1318
1319    #difference .check-list li {
1320      border-color: rgba(216, 172, 85, 0.28);
1321      background:
1322        radial-gradient(circle at 12% 0%, rgba(216, 172, 85, .08), transparent 42%),
1323        linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .025));
1324      color: rgba(255, 246, 223, .84);
1325      font-weight: 400;
1326    }
1327
1328    #difference .check-list li::before {
1329      color: var(--gold-metal-top);
1330      text-shadow: 0 0 10px rgba(216, 172, 85, .18);
1331    }
1332
1333    #difference .check-list-text {
1334      color: rgba(255, 246, 223, .84);
1335      background: none;
1336      -webkit-text-fill-color: currentColor;
1337      font-weight: 400;
1338      text-shadow: none;
1339    }
1340
1341    #difference + .section-tight {
1342      padding-top: 46px;
1343    }
1344
1345    .conversation-grid {
1346      align-items: stretch;
1347    }
1348
1349    .prompt-wall {
1350      display: flex;
1351      flex-wrap: wrap;
1352      gap: 10px;
1353      margin-top: 26px;
1354    }
1355
1356    .prompt-chip {
1357      display: inline-flex;
1358      align-items: center;
1359      min-height: 40px;
1360      padding: 9px 13px;
1361      border: 1px solid rgba(216, 172, 85, .23);
1362      border-radius: 999px;
1363      background: rgba(255,255,255,.045);
1364      color: rgba(255, 246, 223, .82);
1365      font-size: 14px;
1366      font-weight: 850;
1367    }
1368
1369    .prompt-chip::before {
1370      content: "•";
1371      margin-right: 8px;
1372      color: var(--gold-metal-light);
1373    }
1374
1375    .sample-answer-grid {
1376      display: grid;
1377      grid-template-columns: repeat(3, minmax(0, 1fr));
1378      gap: 16px;
1379      margin-top: 26px;
1380    }
1381
1382    .sample-answer-card {
1383      position: relative;
1384      min-height: 250px;
1385      padding: 24px;
1386      border: 1px solid rgba(216, 172, 85, .24);
1387      border-radius: 24px;
1388      background:
1389        radial-gradient(circle at 18% 0%, rgba(216,172,85,.14), transparent 42%),
1390        linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.028));
1391      box-shadow: var(--shadow-deep);
1392    }
1393
1394    #conversation .eyebrow,
1395    #conversation .split-copy h2,
1396    #conversation .card h3,
1397    #conversation .sample-answer-card h3,
1398    #conversation .sample-answer-label {
1399      background:
1400        linear-gradient(180deg,
1401          var(--champagne-glint) 0%,
1402          var(--champagne-top) 32%,
1403          var(--champagne-mid) 68%,
1404          var(--champagne-glint) 100%);
1405      -webkit-background-clip: text;
1406      background-clip: text;
1407      -webkit-text-fill-color: transparent;
1408      color: transparent;
1409      text-shadow:
1410        0 1px 0 rgba(255, 255, 255, .08),
1411        0 0 16px rgba(197, 160, 93, .18);
1412    }
1413
1414    #conversation .eyebrow {
1415      color: transparent;
1416    }
1417
1418    #conversation .split-copy h2 {
1419      line-height: .98;
1420    }
1421
1422    #conversation .card h3,
1423    #conversation .sample-answer-card h3 {
1424      font-family: "Cormorant Garamond", "Libre Baskerville", Georgia, serif;
1425      font-weight: 650;
1426    }
1427
1428    #conversation .icon,
1429    .sample-answer-icon {
1430      color: var(--gold-metal-light);
1431      background:
1432        radial-gradient(circle at 50% 45%, rgba(216, 172, 85, .12), transparent 58%),
1433        linear-gradient(145deg, rgba(3, 3, 8, .88), rgba(18, 12, 24, .68));
1434      border: 1px solid rgba(216, 172, 85, .64);
1435      box-shadow:
1436        0 0 22px rgba(216, 172, 85, .20),
1437        inset 0 0 18px rgba(216, 172, 85, .07);
1438      text-shadow: 0 0 12px rgba(216, 172, 85, .32);
1439    }
1440
1441    .sample-answer-icon {
1442      width: 42px;
1443      height: 42px;
1444      display: grid;
1445      place-items: center;
1446      margin-bottom: 16px;
1447      border-radius: 15px;
1448      font-size: 21px;
1449      font-weight: 800;
1450      line-height: 1;
1451    }
1452
1453    .sample-answer-label {
1454      margin-bottom: 12px;
1455      color: var(--gold-metal-light);
1456      font-size: 11px;
1457      font-weight: 900;
1458      letter-spacing: .08em;
1459      text-transform: uppercase;
1460    }
1461
1462    .sample-answer-card h3 {
1463      margin-bottom: 14px;
1464      font-size: clamp(21px, 2vw, 28px);
1465      line-height: 1.08;
1466    }
1467
1468    .sample-answer-card p {
1469      color: rgba(255, 246, 223, .76);
1470      font-size: clamp(14px, 1.15vw, 16px);
1471      line-height: 1.65;
1472    }
1473
1474    .conversation-samples,
1475    .conversation-sample-cta {
1476      grid-column: 1 / -1;
1477    }
1478
1479    .conversation-sample-cta {
1480      margin-top: 8px;
1481    }
1482
1483    .steps {
1484      counter-reset: step;
1485    }
1486
1487    .step-card {
1488      counter-increment: step;
1489      min-height: 250px;
1490    }
1491
1492    .step-number {
1493      width: 50px;
1494      height: 50px;
1495      display: grid;
1496      place-items: center;
1497      margin-bottom: 20px;
1498      border-radius: 50%;
1499      color: var(--champagne-top);
1500      font-family: "Cinzel", Georgia, serif;
1501      font-weight: 600;
1502      background:
1503        radial-gradient(circle at 50% 48%, rgba(216, 172, 85, .12), transparent 58%),
1504        linear-gradient(145deg, rgba(3, 3, 8, .88), rgba(18, 12, 24, .68));
1505      border: 1px solid rgba(216, 172, 85, .72);
1506      box-shadow:
1507        0 0 22px rgba(197, 160, 93, .24),
1508        inset 0 0 18px rgba(216, 172, 85, .08);
1509      text-shadow:
1510        0 0 8px rgba(216, 172, 85, .26),
1511        0 0 16px rgba(197, 160, 93, .28);
1512    }
1513
1514    .step-number::before {
1515      content: counter(step);
1516      color: var(--champagne-top);
1517      background:
1518        linear-gradient(180deg,
1519          var(--champagne-glint) 0%,
1520          var(--champagne-top) 36%,
1521          var(--champagne-mid) 72%,
1522          var(--champagne-glint) 100%);
1523      -webkit-background-clip: text;
1524      background-clip: text;
1525      -webkit-text-fill-color: transparent;
1526    }
1527
1528    .step-card h3 {
1529      color: var(--gold-metal-top);
1530      background:
1531        linear-gradient(180deg,
1532          var(--gold-metal-glint) 0%,
1533          var(--gold-metal-top) 18%,
1534          var(--gold-metal-light) 48%,
1535          var(--gold-metal-mid) 78%,
1536          var(--gold-metal-top) 100%);
1537      -webkit-background-clip: text;
1538      background-clip: text;
1539      -webkit-text-fill-color: transparent;
1540      font-weight: 500;
1541      text-shadow:
1542        0 1px 0 rgba(255,255,255,.07),
1543        0 0 16px rgba(216, 172, 85, .16);
1544    }
1545
1546    .access-flow .step-card {
1547      min-height: 220px;
1548    }
1549
1550    .feature-banner {
1551      min-height: 620px;
1552      display: flex;
1553      align-items: center;
1554    }
1555
1556    .feature-banner .container {
1557      display: flex;
1558      justify-content: flex-start;
1559    }
1560
1561    .feature-banner .container.teacher-layout {
1562      display: grid;
1563      grid-template-columns: minmax(0, .92fr) minmax(280px, .72fr);
1564      gap: 30px;
1565      align-items: center;
1566    }
1567
1568    .teacher-poster {
1569      width: 100%;
1570      margin: 0;
1571      min-height: 680px;
1572      overflow: hidden;
1573      border: 1px solid rgba(216, 172, 85, .36);
1574      border-radius: 34px;
1575      background:
1576        radial-gradient(circle at 50% 0%, rgba(216,172,85,.16), transparent 44%),
1577        rgba(3,3,8,.74);
1578      box-shadow: var(--shadow-deep), var(--shadow-gold);
1579    }
1580
1581    .teacher-poster img {
1582      display: block;
1583      width: 100%;
1584      height: 100%;
1585      min-height: 680px;
1586      object-fit: contain;
1587      object-position: center top;
1588      padding: 12px;
1589      background:
1590        radial-gradient(circle at 50% 16%, rgba(216,172,85,.14), transparent 42%),
1591        #030306;
1592    }
1593
1594    .method-card {
1595      min-height: 225px;
1596    }
1597
1598    .tag {
1599      display: inline-flex;
1600      margin-bottom: 14px;
1601      padding: 8px 11px;
1602      border-radius: 999px;
1603      background: rgba(216, 172, 85, .07);
1604      color: var(--gold-metal-light);
1605      font-size: 12px;
1606      font-weight: 950;
1607      letter-spacing: 0;
1608      text-transform: uppercase;
1609    }
1610
1611    #methods .method-card .tag,
1612    #methods .method-card h3 {
1613      background:
1614        linear-gradient(180deg,
1615          var(--gold-metal-glint) 0%,
1616          var(--gold-metal-top) 14%,
1617          var(--gold-metal-light) 31%,
1618          var(--gold-metal-mid) 48%,
1619          var(--gold-metal-dark) 62%,
1620          var(--gold-metal-light) 80%,
1621          var(--gold-metal-glint) 100%);
1622      -webkit-background-clip: text;
1623      background-clip: text;
1624      color: transparent;
1625      -webkit-text-fill-color: transparent;
1626      text-shadow:
1627        0 1px 0 rgba(255, 255, 255, .06),
1628        0 0 14px rgba(216, 172, 85, .16);
1629    }
1630
1631    .comparison-wrap {
1632      max-width: 1080px;
1633      margin: 0 auto;
1634    }
1635
1636    #comparison .section-head {
1637      max-width: 1000px;
1638    }
1639
1640    #comparison .section-head h2 {
1641      color: transparent;
1642      background:
1643        linear-gradient(180deg,
1644          var(--gold-metal-glint) 0%,
1645          var(--gold-metal-top) 13%,
1646          var(--gold-metal-light) 29%,
1647          var(--gold-metal-mid) 47%,
1648          var(--gold-metal-dark) 61%,
1649          var(--gold-metal-light) 78%,
1650          var(--gold-metal-glint) 100%);
1651      -webkit-background-clip: text;
1652      background-clip: text;
1653      font-family: "Cormorant Garamond", "Libre Baskerville", Georgia, serif;
1654      font-size: clamp(38px, 5vw, 68px);
1655      font-weight: 700;
1656      line-height: 1;
1657      text-shadow:
1658        0 1px 0 rgba(255,255,255,.16),
1659        0 2px 0 rgba(47, 25, 5, .50),
1660        0 0 10px rgba(216, 172, 85, .10),
1661        0 0 28px rgba(75, 42, 9, .38);
1662    }
1663
1664    #comparison .section-head h2 span {
1665      display: block;
1666    }
1667
1668    #comparison .section-head p {
1669      max-width: 930px;
1670      margin-right: auto;
1671      margin-left: auto;
1672      color: rgba(255, 246, 223, .78);
1673      font-size: clamp(16px, 1.42vw, 20px);
1674      line-height: 1.72;
1675    }
1676
1677    .comparison-table {
1678      overflow: hidden;
1679      border: 1px solid rgba(216, 172, 85, .28);
1680      border-radius: 30px;
1681      background:
1682        radial-gradient(circle at 77% 0%, rgba(216,172,85,.18), transparent 42%),
1683        radial-gradient(circle at 15% 18%, rgba(108, 75, 182, .20), transparent 36%),
1684        linear-gradient(180deg, rgba(3, 3, 8, .82), rgba(3, 3, 8, .62));
1685      box-shadow:
1686        var(--shadow-deep),
1687        0 0 44px rgba(216, 172, 85, .12),
1688        inset 0 0 0 1px rgba(255, 246, 223, .035);
1689      backdrop-filter: blur(4px);
1690    }
1691
1692    .comparison-row {
1693      display: grid;
1694      grid-template-columns: 1fr;
1695      border-top: 1px solid rgba(216, 172, 85, .12);
1696    }
1697
1698    .comparison-row:first-child {
1699      border-top: 0;
1700    }
1701
1702    .comparison-cell {
1703      position: relative;
1704      display: grid;
1705      align-content: center;
1706      min-height: 88px;
1707      padding: 22px 28px 22px 66px;
1708      color: rgba(255, 246, 223, .86);
1709      font-size: clamp(15px, 1.28vw, 18px);
1710      font-weight: 400;
1711      line-height: 1.58;
1712    }
1713
1714    .comparison-cell + .comparison-cell {
1715      border-left: 0;
1716    }
1717
1718    .comparison-cell p {
1719      margin: 0;
1720      color: inherit;
1721      font: inherit;
1722      line-height: inherit;
1723    }
1724
1725    .comparison-cell.astromeg-cell {
1726      color: rgba(255, 246, 223, .88);
1727      background: linear-gradient(90deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .025));
1728      font-weight: 400;
1729    }
1730
1731    .comparison-cell.astromeg-cell::before {
1732      content: "✦";
1733      position: absolute;
1734      left: 28px;
1735      top: 24px;
1736      flex: 0 0 auto;
1737      color: var(--champagne-top);
1738      font-size: 1.05em;
1739      text-shadow:
1740        0 0 10px rgba(234, 211, 155, .34),
1741        0 0 18px rgba(143, 102, 50, .20);
1742    }
1743
1744    .comparison-mobile-label {
1745      display: none;
1746    }
1747
1748    .ask-panel {
1749      margin-top: 26px;
1750      padding: clamp(22px, 3vw, 30px);
1751      border: 1px solid rgba(216, 172, 85, .22);
1752      border-radius: 28px;
1753      background:
1754        radial-gradient(circle at 12% 0%, rgba(216, 172, 85, .12), transparent 40%),
1755        linear-gradient(180deg, rgba(3, 3, 8, .72), rgba(3, 3, 8, .50));
1756      box-shadow: var(--shadow-deep), 0 0 30px rgba(216, 172, 85, .10);
1757      backdrop-filter: blur(4px);
1758    }
1759
1760    .ask-panel h3 {
1761      margin-bottom: 18px;
1762      color: var(--gold-metal-top);
1763      background:
1764        linear-gradient(180deg,
1765          var(--gold-metal-glint) 0%,
1766          var(--gold-metal-top) 18%,
1767          var(--gold-metal-light) 48%,
1768          var(--gold-metal-mid) 78%,
1769          var(--gold-metal-top) 100%);
1770      -webkit-background-clip: text;
1771      background-clip: text;
1772      -webkit-text-fill-color: transparent;
1773      font-family: "Cinzel", Georgia, serif;
1774      font-size: clamp(18px, 2vw, 25px);
1775      font-weight: 600;
1776      letter-spacing: .02em;
1777      text-transform: uppercase;
1778      text-shadow: 0 0 16px rgba(216, 172, 85, .14);
1779    }
1780
1781    .ask-prompt-grid {
1782      display: grid;
1783      grid-template-columns: repeat(4, minmax(0, 1fr));
1784      gap: 12px;
1785    }
1786
1787    .ask-prompt-pill {
1788      position: relative;
1789      display: flex;
1790      align-items: center;
1791      min-height: 58px;
1792      padding: 13px 14px 13px 34px;
1793      border: 1px solid rgba(216, 172, 85, .18);
1794      border-radius: 18px;
1795      background: rgba(255, 255, 255, .045);
1796      color: rgba(255, 246, 223, .82);
1797      font-size: clamp(13px, 1.02vw, 15px);
1798      font-weight: 650;
1799      line-height: 1.34;
1800    }
1801
1802    .ask-prompt-pill::before {
1803      content: "✦";
1804      position: absolute;
1805      left: 14px;
1806      top: 50%;
1807      color: var(--gold-metal-light);
1808      font-size: 12px;
1809      transform: translateY(-50%);
1810      text-shadow:
1811        0 0 8px rgba(216, 172, 85, .24),
1812        0 0 14px rgba(216, 172, 85, .28);
1813    }
1814
1815    .yes {
1816      color: var(--gold-metal-light) !important;
1817      font-weight: 950;
1818    }
1819
1820    .reviews-layout {
1821      display: grid;
1822      grid-template-columns: .9fr 1.4fr;
1823      gap: 26px;
1824      align-items: start;
1825    }
1826
1827    .rating-card {
1828      position: sticky;
1829      top: 110px;
1830      padding: 34px;
1831      border: 1px solid rgba(216, 172, 85, .36);
1832      border-radius: 32px;
1833      background:
1834        radial-gradient(circle at 50% 0%, rgba(216,172,85,.16), transparent 42%),
1835        rgba(3,3,8,.64);
1836      box-shadow: var(--shadow-gold);
1837      text-align: center;
1838    }
1839
1840    .google-trust-badge {
1841      display: grid;
1842      justify-items: center;
1843      gap: 6px;
1844      margin: 10px auto 6px;
1845      padding: 16px 16px;
1846      border: 1px solid rgba(216, 172, 85, .28);
1847      border-radius: 24px;
1848      background:
1849        radial-gradient(circle at 50% 0%, rgba(216,172,85,.16), transparent 46%),
1850        rgba(255,255,255,.045);
1851    }
1852
1853    .google-trust-badge strong {
1854      color: var(--gold-metal-light);
1855      font-size: 17px;
1856      font-weight: 950;
1857    }
1858
1859    .google-trust-badge span:last-child {
1860      max-width: 230px;
1861      color: rgba(255, 246, 2
186123, .58);
1862      font-size: 11px;
1863      font-weight: 620;
1864      line-height: 1.35;
1865    }
1866
1867    .rating-card p {
1868      max-width: 360px;
1869      margin-left: auto;
1870      margin-right: auto;
1871      font-size: 15px;
1872      line-height: 1.55;
1873    }
1874
1875    .rating-card .micro {
1876      font-size: 12px;
1877      line-height: 1.45;
1878    }
1879
1880    .stars {
1881      margin: 12px 0 14px;
1882      color: var(--gold-metal-light);
1883      font-size: 22px;
1884      letter-spacing: 0;
1885    }
1886
1887    .review-card {
1888      min-height: 190px;
1889    }
1890
1891    .review-card.featured {
1892      border-color: rgba(216, 172, 85, .34);
1893      background:
1894        radial-gradient(circle at 22% 0%, rgba(216,172,85,.08), transparent 42%),
1895        linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.035));
1896      box-shadow: 0 24px 80px rgba(0,0,0,.34), 0 0 40px rgba(216, 172, 85, .12);
1897    }
1898
1899    .review-label {
1900      display: inline-flex;
1901      align-items: center;
1902      gap: 7px;
1903      margin-bottom: 14px;
1904      padding: 7px 11px;
1905      border: 1px solid rgba(216, 172, 85, .18);
1906      border-radius: 999px;
1907      color: var(--gold-metal-light);
1908      background: rgba(216, 172, 85, .045);
1909      font-size: 12px;
1910      font-weight: 850;
1911      text-transform: uppercase;
1912    }
1913
1914    .review-card blockquote {
1915      margin: 0;
1916      color: rgba(255, 246, 223, .82);
1917      font-size: 17px;
1918    }
1919
1920    .google-review-card {
1921      display: grid;
1922      gap: 12px;
1923      min-height: 280px;
1924      border-color: rgba(216, 172, 85, .32);
1925      background:
1926        radial-gradient(circle at 0% 0%, rgba(216,172,85,.13), transparent 34%),
1927        linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.035));
1928    }
1929
1930    .google-review-card blockquote {
1931      font-size: 16px;
1932      line-height: 1.62;
1933    }
1934
1935    .reviewer-row {
1936      display: flex;
1937      align-items: center;
1938      gap: 12px;
1939      margin-bottom: 2px;
1940    }
1941
1942    .review-avatar {
1943      width: 48px;
1944      height: 48px;
1945      flex: 0 0 auto;
1946      display: grid;
1947      place-items: center;
1948      border: 1px solid rgba(216,172,85,.50);
1949      border-radius: 999px;
1950      color: var(--gold-metal-light);
1951      background:
1952        radial-gradient(circle at 50% 45%, rgba(216, 172, 85, .12), transparent 58%),
1953        linear-gradient(145deg, rgba(3, 3, 8, .88), rgba(18, 12, 24, .68));
1954      box-shadow:
1955        0 0 22px rgba(216, 172, 85, .20),
1956        inset 0 0 18px rgba(216, 172, 85, .07);
1957      font-family: "Cinzel", Georgia, serif;
1958      font-size: 21px;
1959      font-weight: 900;
1960    }
1961
1962    .reviewer-name {
1963      display: block;
1964      color: rgba(255, 246, 223, .92);
1965      font-weight: 900;
1966    }
1967
1968    .review-meta {
1969      display: block;
1970      color: rgba(255, 246, 223, .54);
1971      font-size: 13px;
1972      font-weight: 700;
1973    }
1974
1975    .review-card cite {
1976      display: block;
1977      margin-top: 18px;
1978      color: var(--gold-metal-light);
1979      font-style: normal;
1980      font-weight: 950;
1981    }
1982
1983    .review-source {
1984      display: block;
1985      margin-top: 6px;
1986      color: rgba(255, 246, 223, .56);
1987      font-size: 13px;
1988      font-style: normal;
1989    }
1990
1991    .review-actions {
1992      display: flex;
1993      flex-direction: column;
1994      gap: 14px;
1995      margin-top: 24px;
1996    }
1997
1998    .method-tail {
1999      max-width: 820px;
2000      margin: 24px auto 0;
2001      padding: 18px 22px;
2002      border: 1px solid rgba(216, 172, 85, .25);
2003      border-radius: 24px;
2004      background: rgba(255,255,255,.045);
2005      color: rgba(255, 246, 223, .84);
2006      text-align: center;
2007      font-family: "Cormorant Garamond", Georgia, serif;
2008      font-size: clamp(22px, 3vw, 32px);
2009      font-weight: 700;
2010      line-height: 1.2;
2011    }
2012
2013    .founder-story {
2014      background:
2015        radial-gradient(circle at 10% 10%, rgba(214,168,66,.12), transparent 35%),
2016        linear-gradient(180deg, rgba(7,17,31,.64), rgba(3,3,8,.96));
2017    }
2018
2019    .offer-card {
2020      max-width: 860px;
2021      margin: 0 auto;
2022      padding: clamp(30px, 6vw, 64px);
2023      border: 1px solid rgba(216, 172, 85, .38);
2024      border-radius: var(--radius-xl);
2025      background:
2026        radial-gradient(circle at 50% 0%, rgba(216,172,85,.20), transparent 46%),
2027        rgba(3,3,8,.72);
2028      box-shadow: var(--shadow-deep), var(--shadow-gold);
2029      backdrop-filter: blur(18px);
2030      text-align: center;
2031    }
2032
2033    .offer-card h2 {
2034      max-width: 780px;
2035      margin-right: auto;
2036      margin-left: auto;
2037      line-height: 1.14;
2038    }
2039
2040    .offer-card > p {
2041      max-width: 720px;
2042      margin-right: auto;
2043      margin-left: auto;
2044      line-height: 1.75;
2045    }
2046
2047    .offer-card h2 + p {
2048      margin-top: 26px;
2049    }
2050
2051    .offer-card > p + p {
2052      margin-top: 28px;
2053    }
2054
2055    .price {
2056      margin: 44px 0 18px;
2057      color: #c99a45;
2058      background:
2059        linear-gradient(180deg,
2060          #d8ac55 0%,
2061          #c18b37 32%,
2062          #7f4b16 62%,
2063          #c99a45 100%);
2064      -webkit-background-clip: text;
2065      background-clip: text;
2066      -webkit-text-fill-color: transparent;
2067      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
2068      font-size: clamp(58px, 7.2vw, 96px);
2069      font-weight: 300;
2070      line-height: 1;
2071      letter-spacing: 0;
2072      font-variant-numeric: tabular-nums;
2073      text-shadow: 0 0 18px rgba(153, 97, 28, .18);
2074    }
2075
2076    .price-period {
2077      font-size: .34em;
2078      font-weight: 300;
2079      white-space: nowrap;
2080    }
2081
2082    .price-amount {
2083      font-variant-numeric: proportional-nums;
2084    }
2085
2086    .offer-card .micro {
2087      color: rgba(201, 154, 69, .86);
2088      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
2089      font-size: clamp(17px, 1.35vw, 21px);
2090      font-weight: 300;
2091      letter-spacing: .01em;
2092    }
2093
2094    .offer-card .price-equivalent {
2095      color: rgba(201, 154, 69, .88);
2096      font-family: "Cormorant Garamond", Georgia, serif;
2097      font-size: clamp(18px, 1.5vw, 23px);
2098      font-style: italic;
2099      font-weight: 400;
2100      line-height: 1.35;
2101      text-shadow: 0 0 14px rgba(153, 97, 28, .16);
2102    }
2103
2104    .included {
2105      display: grid;
2106      grid-template-columns: repeat(2, minmax(0, 1fr));
2107      gap: 12px;
2108      margin: 30px 0;
2109      text-align: left;
2110    }
2111
2112    .included div {
2113      padding: 14px 15px;
2114      border: 1px solid rgba(216, 172, 85, .16);
2115      border-radius: 16px;
2116      background: rgba(255,255,255,.045);
2117      color: rgba(255, 246, 223, .78);
2118      font-weight: 500;
2119    }
2120
2121    .included div::before {
2122      content: "✦ ";
2123      color: #c99a45;
2124      text-shadow: 0 0 12px rgba(153, 97, 28, .22);
2125    }
2126
2127    .cta-placeholder {
2128      max-width: 600px;
2129      margin: 38px auto 0;
2130      padding: 0;
2131      border: 0;
2132      background: transparent;
2133    }
2134
2135    .payment-actions {
2136      display: flex;
2137      flex-wrap: wrap;
2138      justify-content: center;
2139      gap: 12px;
2140    }
2141
2142    .payment-strip,
2143    .payment-methods {
2144      display: flex;
2145      flex-wrap: wrap;
2146      justify-content: center;
2147      gap: 12px 18px;
2148      margin-top: 24px;
2149      color: rgba(255, 246, 223, .62);
2150      font-size: clamp(11px, 1.05vw, 13px);
2151      font-weight: 560;
2152      line-height: 1.55;
2153    }
2154
2155    .payment-strip span,
2156    .payment-methods span {
2157      position: relative;
2158      display: inline-flex;
2159      align-items: center;
2160      min-height: 0;
2161      padding: 0;
2162      border: 0;
2163      border-radius: 0;
2164      background: transparent;
2165      box-shadow: none;
2166    }
2167
2168    .payment-strip span + span::before,
2169    .payment-methods span + span::before {
2170      content: "·";
2171      margin-right: 12px;
2172      color: rgba(201, 154, 69, .42);
2173    }
2174
2175    .payment-strip .payment-feature,
2176    .payment-methods .payment-feature {
2177      color: #c99a45;
2178      text-shadow: 0 0 16px rgba(153, 97, 28, .12);
2179    }
2180
2181    .payment-strip .payment-feature .payment-feature-label,
2182    .payment-methods .payment-feature .payment-feature-label {
2183      display: inline-block;
2184      background:
2185        linear-gradient(180deg,
2186          var(--gold-metal-glint) 0%,
2187          var(--gold-metal-top) 13%,
2188          var(--gold-metal-light) 29%,
2189          var(--gold-metal-mid) 47%,
2190          var(--gold-metal-dark) 61%,
2191          var(--gold-metal-light) 78%,
2192          var(--gold-metal-glint) 100%);
2193      -webkit-background-clip: text;
2194      background-clip: text;
2195      color: transparent;
2196      -webkit-text-fill-color: transparent;
2197      text-shadow:
2198        0 1px 0 rgba(255, 255, 255, .05),
2199        0 0 12px rgba(216, 172, 85, .16);
2200    }
2201
2202    .secure-checkout-note {
2203      max-width: 680px;
2204      margin: 18px auto 0;
2205      color: rgba(255, 246, 223, .64);
2206      font-size: 13px;
2207      font-weight: 760;
2208      line-height: 1.65;
2209    }
2210
2211    .payment-access-note {
2212      max-width: 650px;
2213      margin: 16px auto 0;
2214      color: rgba(201, 154, 69, .84);
2215      font-family: Georgia, "Times New Roman", serif;
2216      font-size: 13px;
2217      font-style: italic;
2218      font-weight: 400;
2219      line-height: 1.65;
2220      text-align: center;
2221    }
2222
2223    .policy-inline {
2224      color: var(--gold-metal-top);
2225      text-decoration: underline;
2226      text-decoration-color: rgba(216, 172, 85, .34);
2227      text-underline-offset: 3px;
2228    }
2229
2230    .modal-overlay {
2231      position: fixed;
2232      inset: 0;
2233      z-index: 100;
2234      display: none;
2235      align-items: center;
2236      justify-content: center;
2237      padding: 20px;
2238      background: rgba(0, 0, 4, .78);
2239      backdrop-filter: blur(10px);
2240    }
2241
2242    .modal-overlay.open {
2243      display: flex;
2244    }
2245
2246    .modal-box {
2247      position: relative;
2248      width: min(520px, 100%);
2249      max-height: calc(100vh - 40px);
2250      overflow-y: auto;
2251      padding: 34px;
2252      border: 1px solid rgba(216, 172, 85, .42);
2253      border-radius: 30px;
2254      background:
2255        radial-gradient(circle at 50% 0%, rgba(216,172,85,.16), transparent 42%),
2256        #06060d;
2257      box-shadow: 0 28px 90px rgba(0, 0, 0, .72);
2258      text-align: center;
2259    }
2260
2261    .gcash-modal-box {
2262      width: min(680px, 100%);
2263    }
2264
2265    .gcash-qr-wrap {
2266      display: grid;
2267      gap: 12px;
2268      justify-items: center;
2269      margin: 18px 0 20px;
2270    }
2271
2272    .gcash-qr {
2273      width: min(300px, 100%);
2274      border-radius: 22px;
2275      border: 1px solid rgba(216, 172, 85, .3);
2276      box-shadow: 0 18px 48px rgba(0, 0, 0, .42);
2277    }
2278
2279    .gcash-price {
2280      color: var(--gold-metal-top);
2281      font-family: Georgia, "Times New Roman", serif;
2282      font-size: 28px;
2283      line-height: 1.1;
2284    }
2285
2286    .receipt-form {
2287      display: grid;
2288      gap: 12px;
2289      margin-top: 18px;
2290      text-align: left;
2291    }
2292
2293    .receipt-form label {
2294      display: grid;
2295      gap: 7px;
2296      color: rgba(255, 246, 223, .76);
2297      font-size: 13px;
2298      font-weight: 700;
2299    }
2300
2301    .receipt-form .modal-field {
2302      margin-bottom: 0;
2303    }
2304
2305    .modal-file {
2306      width: 100%;
2307      padding: 13px 14px;
2308      border: 1px solid rgba(216, 172, 85, .28);
2309      border-radius: 14px;
2310      color: rgba(255, 246, 223, .78);
2311      background: rgba(255, 255, 255, .07);
2312    }
2313
2314    .receipt-submit {
2315      margin-top: 4px;
2316    }
2317
2318    .demo-code-step[hidden] {
2319      display: none;
2320    }
2321
2322    .demo-code-label {
2323      margin: 8px 0 8px;
2324      color: rgba(255, 246, 223, .68);
2325      font-family: Georgia, "Times New Roman", serif;
2326      font-size: 13px;
2327      font-style: italic;
2328    }
2329
2330    .demo-code {
2331      display: inline-flex;
2332      justify-content: center;
2333      align-items: center;
2334      min-width: 180px;
2335      margin: 4px auto 16px;
2336      padding: 14px 20px;
2337      border: 1px solid rgba(216, 172, 85, .42);
2338      border-radius: 18px;
2339      color: var(--gold-metal-light);
2340      background: rgba(255, 255, 255, .06);
2341      font-family: Georgia, "Times New Roman", serif;
2342      font-size: 30px;
2343      letter-spacing: .12em;
2344      line-height: 1;
2345    }
2346
2347    .demo-open-link {
2348      display: block;
2349      text-decoration: none;
2350    }
2351
2352    .gcash-confirm-note {
2353      margin: 12px 0 0;
2354      color: rgba(255, 246, 223, .68);
2355      font-family: Georgia, "Times New Roman", serif;
2356      font-size: 13px;
2357      font-style: italic;
2358      line-height: 1.55;
2359      text-align: center;
2360    }
2361
2362
2363    .modal-close {
2364      position: absolute;
2365      top: 14px;
2366      right: 14px;
2367      width: 38px;
2368      height: 38px;
2369      border: 0;
2370      border-radius: 50%;
2371      color: rgba(255, 246, 223, .74);
2372      background: rgba(255, 255, 255, .08);
2373      cursor: pointer;
2374    }
2375
2376    .modal-title {
2377      color: var(--gold-metal-top);
2378      font-family: Georgia, "Times New Roman", serif;
2379      font-size: 29px;
2380      line-height: 1.1;
2381    }
2382
2383    .modal-divider {
2384      display: block;
2385      width: 92px;
2386      height: 1px;
2387      margin: 18px auto;
2388      background: linear-gradient(90deg, transparent, var(--gold-metal-light), transparent);
2389    }
2390
2391    .modal-sub,
2392    .modal-note {
2393      margin: 0 0 18px;
2394      color: rgba(255, 246, 223, .74);
2395    }
2396
2397    .modal-price-note {
2398      display: block;
2399      margin-top: 7px;
2400      color: rgba(255, 246, 223, .68);
2401      font-family: Georgia, "Times New Roman", serif;
2402      font-size: 13px;
2403      font-style: italic;
2404      font-weight: normal;
2405    }
2406
2407    .modal-note {
2408      display: grid;
2409      gap: 8px;
2410      margin: 16px 0 18px;
2411      padding: 0;
2412      list-style: none;
2413      color: rgba(255, 246, 223, .72);
2414      font-family: Georgia, "Times New Roman", serif;
2415      font-size: 14px;
2416      font-style: italic;
2417      font-weight: normal;
2418      line-height: 1.55;
2419      text-align: left;
2420    }
2421
2422    .modal-note li {
2423      position: relative;
2424      padding-left: 18px;
2425      font-weight: normal;
2426    }
2427
2428    .modal-note .policy-inline {
2429      font-weight: normal;
2430    }
2431
2432    .modal-note li::before {
2433      content: "•";
2434      position: absolute;
2435      left: 0;
2436      top: 0;
2437      color: var(--gold-metal-top);
2438      font-style: normal;
2439    }
2440
2441    .modal-field {
2442      width: 100%;
2443      margin-bottom: 12px;
2444      padding: 15px 16px;
2445      border: 1px solid rgba(216, 172, 85, .28);
2446      border-radius: 14px;
2447      color: var(--cream);
2448      background: rgba(255, 255, 255, .07);
2449      outline: 0;
2450    }
2451
2452    .modal-field:focus {
2453      border-color: var(--gold-metal-light);
2454    }
2455
2456    .modal-submit {
2457      width: 100%;
2458      margin-top: 6px;
2459      padding: 15px 18px;
2460      border: 0;
2461      border-radius: 999px;
2462      color: #080708;
2463      background: linear-gradient(135deg, var(--gold-metal-top), var(--gold-metal-light), var(--gold-metal-mid));
2464      font-weight: 950;
2465      cursor: pointer;
2466      box-shadow: var(--shadow-gold);
2467    }
2468
2469    .modal-submit:disabled {
2470      cursor: wait;
2471      opacity: .72;
2472    }
2473
2474    .faq {
2475      max-width: 920px;
2476      margin: 0 auto;
2477      display: grid;
2478      gap: 14px;
2479    }
2480
2481    #faq .eyebrow,
2482    #faq h2 {
2483      color: #c99a45;
2484      background:
2485        linear-gradient(180deg,
2486          #d0aa5f 0%,
2487          #b78335 36%,
2488          #7f4b16 70%,
2489          #c99a45 100%);
2490      -webkit-background-clip: text;
2491      background-clip: text;
2492      -webkit-text-fill-color: transparent;
2493      text-shadow: 0 0 16px rgba(153, 97, 28, .16);
2494    }
2495
2496    details {
2497      overflow: hidden;
2498      border: 1px solid rgba(201, 154, 69, .26);
2499      border-radius: 22px;
2500      background: rgba(255,255,255,.045);
2501    }
2502
2503    summary {
2504      padding: 20px 22px;
2505      list-style: none;
2506      cursor: pointer;
2507      color: #c99a45;
2508      background:
2509        linear-gradient(180deg,
2510          #d0aa5f 0%,
2511          #b78335 36%,
2512          #7f4b16 70%,
2513          #c99a45 100%);
2514      -webkit-background-clip: text;
2515      background-clip: text;
2516      -webkit-text-fill-color: transparent;
2517      font-size: 18px;
2518      font-weight: 400;
2519      text-shadow: 0 0 14px rgba(153, 97, 28, .14);
2520    }
2521
2522    summary::-webkit-details-marker {
2523      display: none;
2524    }
2525
2526    details p {
2527      padding: 0 22px 22px;
2528    }
2529
2530    .final-cta {
2531      min-height: 620px;
2532      display: flex;
2533      align-items: center;
2534      text-align: center;
2535    }
2536
2537    .final-cta .container-narrow {
2538      padding: 44px;
2539      border: 1px solid rgba(216, 172, 85, .28);
2540      border-radius: 40px;
2541      background: rgba(3,3,8,.52);
2542      backdrop-filter: blur(18px);
2543      box-shadow: var(--shadow-deep);
2544    }
2545
2546    .astromeg-note {
2547      max-width: 820px;
2548      margin: 32px auto 34px;
2549      padding: 0;
2550      border: 0;
2551      border-radius: 32px;
2552      background: transparent;
2553      box-shadow: none;
2554      text-align: center;
2555    }
2556
2557    .astromeg-note-image {
2558      display: block;
2559      width: 100%;
2560      height: auto;
2561      border-radius: 24px;
2562      box-shadow: 0 24px 80px rgba(0,0,0,.40), 0 0 34px rgba(216,172,85,.10);
2563    }
2564
2565    .astromeg-note-heading {
2566      display: grid;
2567      justify-items: center;
2568      gap: 12px;
2569      margin-bottom: 8px;
2570    }
2571
2572    .astromeg-note-heading h3 {
2573      margin: 0;
2574      color: #b99862;
2575      background: linear-gradient(180deg, #e3c591 0%, #a77d48 100%);
2576      -webkit-background-clip: text;
2577      background-clip: text;
2578      -webkit-text-fill-color: transparent;
2579      font-family: "Cormorant Garamond", "Playfair Display", Georgia, serif;
2580      font-size: clamp(34px, 4.4vw, 52px);
2581      font-weight: 400;
2582      line-height: 1.04;
2583      letter-spacing: .02em;
2584      text-shadow: 0 0 18px rgba(216, 172, 85, .10);
2585    }
2586
2587    .note-rule {
2588      position: relative;
2589      width: min(380px, 70vw);
2590      height: 18px;
2591    }
2592
2593    .note-rule::before,
2594    .note-rule::after {
2595      content: "";
2596      position: absolute;
2597      top: 50%;
2598      width: calc(50% - 14px);
2599      height: 1px;
2600      background: linear-gradient(90deg, transparent, #b89448, transparent);
2601    }
2602
2603    .note-rule::before {
2604      left: 0;
2605    }
2606
2607    .note-rule::after {
2608      right: 0;
2609    }
2610
2611    .note-rule span {
2612      position: absolute;
2613      left: 50%;
2614      top: 50%;
2615      width: 10px;
2616      height: 10px;
2617      transform: translate(-50%, -50%) rotate(45deg);
2618      background: linear-gradient(180deg, var(--gold-metal-top), var(--gold-metal-mid));
2619      box-shadow: 0 0 18px rgba(216, 172, 85, .30);
2620    }
2621
2622    .note-opening {
2623      max-width: 820px;
2624      margin: 16px auto 20px;
2625      color: var(--gold-metal-top);
2626      background: linear-gradient(180deg, var(--champagne-glint) 0%, var(--champagne-top) 45%, var(--champagne-deep) 100%);
2627      -webkit-background-clip: text;
2628      background-clip: text;
2629      -webkit-text-fill-color: transparent;
2630      font-family: "Great Vibes", "Pinyon Script", "Allura", cursive;
2631      font-size: clamp(42px, 7.1vw, 72px);
2632      font-style: normal;
2633      font-weight: 400;
2634      line-height: 1.12;
2635      letter-spacing: 0;
2636      text-shadow: 0 0 20px rgba(216, 172, 85, .16);
2637      overflow: visible;
2638    }
2639
2640    .note-body-frame {
2641      position: relative;
2642      padding: clamp(20px, 3.2vw, 30px);
2643      border: 12px solid rgba(166, 160, 145, .72);
2644      border-radius: 30px;
2645      background: rgba(0, 0, 2, .94);
2646      box-shadow:
2647        inset 0 0 0 1px rgba(216, 172, 85, .10),
2648        0 22px 70px rgba(0, 0, 0, .38);
2649      text-align: left;
2650    }
2651
2652    .note-body-frame p {
2653      margin: 0;
2654      color: rgba(255, 246, 223, .76);
2655      font-family: "Libre Baskerville", "Cormorant Garamond", Georgia, serif;
2656      font-size: clamp(15px, 1.65vw, 19px);
2657      font-weight: 400;
2658      line-height: 1.58;
2659      letter-spacing: .015em;
2660      text-shadow: none;
2661    }
2662
2663    .note-body-frame p + p {
2664      margin-top: 16px;
2665    }
2666
2667    .note-signature-row {
2668      display: grid;
2669      grid-template-columns: minmax(92px, 150px) 1fr;
2670      align-items: end;
2671      gap: clamp(14px, 3vw, 26px);
2672      margin-top: 16px;
2673    }
2674
2675    .note-portrait {
2676      width: 100%;
2677      max-width: 150px;
2678      justify-self: start;
2679      align-self: end;
2680      margin: 0 0 -30px -24px;
2681      filter: drop-shadow(0 12px 26px rgba(0, 0, 0, .45));
2682    }
2683
2684    .astromeg-note .note-signoff {
2685      margin: 0 0 8px;
2686      color: var(--gold-metal-top);
2687      background: linear-gradient(180deg, var(--champagne-glint) 0%, var(--champagne-top) 48%, var(--champagne-deep) 100%);
2688      -webkit-background-clip: text;
2689      background-clip: text;
2690      -webkit-text-fill-color: transparent;
2691      font-family: "Sacramento", "Allura", "Great Vibes", cursive;
2692      font-size: clamp(32px, 5vw, 52px);
2693      font-style: normal;
2694      font-weight: 400;
2695      line-height: 1.08;
2696      letter-spacing: .01em;
2697      text-shadow: 0 0 22px rgba(216, 172, 85, .16);
2698    }
2699
2700    .footer {
2701      padding: 46px 22px;
2702      border-top: 1px solid rgba(216, 172, 85, .18);
2703      background: #030306;
2704      text-align: center;
2705    }
2706
2707    .footer p {
2708      color: rgba(255, 246, 223, .55);
2709      font-size: 14px;
2710    }
2711
2712    .footer-links {
2713      display: flex;
2714      justify-content: center;
2715      flex-wrap: wrap;
2716      gap: 14px;
2717      margin-top: 14px;
2718    }
2719
2720    .footer-links a {
2721      color: rgba(255, 246, 223, .58);
2722      font-size: 14px;
2723    }
2724
2725    @media (max-width: 980px) {
2726      .nav {
2727        display: none;
2728      }
2729
2730      .scroll-arrow {
2731        position: fixed;
2732        right: 14px;
2733        z-index: 40;
2734        display: grid;
2735        width: 40px;
2736        height: 40px;
2737        place-items: center;
2738        border: 1px solid rgba(216, 172, 85, .78);
2739        border-radius: 999px;
2740        color: var(--gold-metal-light);
2741        background:
2742          radial-gradient(circle at 35% 22%, rgba(216, 172, 85, .16), transparent 38%),
2743          linear-gradient(145deg, rgba(10, 8, 5, .92), rgba(3, 3, 8, .88) 58%, rgba(78, 42, 8, .42));
2744        box-shadow:
2745          0 12px 30px rgba(0,0,0,.34),
2746          0 0 22px rgba(216, 172, 85, .24),
2747          inset 0 0 16px rgba(216, 172, 85, .08);
2748        text-shadow:
2749          0 0 6px rgba(216, 172, 85, .34),
2750          0 0 18px rgba(216, 172, 85, .38);
2751        font-size: 20px;
2752        font-weight: 800;
2753      }
2754
2755      .scroll-to-bottom {
2756        bottom: 66px;
2757      }
2758
2759      .back-to-top {
2760        bottom: 18px;
2761      }
2762
2763      .grid-2,
2764      .grid-3,
2765      .grid-4,
2766      .reviews-layout,
2767      .portal-gallery,
2768      .sample-answer-grid,
2769      .feature-banner .container.teacher-layout {
2770        grid-template-columns: 1fr;
2771      }
2772
2773      .ask-prompt-grid {
2774        grid-template-columns: repeat(2, minmax(0, 1fr));
2775      }
2776
2777      .comparison-row {
2778        grid-template-columns: 1fr;
2779      }
2780
2781      .comparison-head {
2782        display: none;
2783      }
2784
2785      .comparison-cell {
2786        min-height: auto;
2787        padding: 20px 22px 20px 54px;
2788      }
2789
2790      .comparison-cell + .comparison-cell {
2791        border-left: 0;
2792      }
2793
2794      .comparison-row:not(.comparison-head) {
2795        border-top: 1px solid rgba(216, 172, 85, .14);
2796      }
2797
2798      .comparison-row:not(.comparison-head):first-of-type {
2799        border-top: 0;
2800      }
2801
2802      .comparison-cell.astromeg-cell {
2803        background: linear-gradient(90deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .025));
2804      }
2805
2806      .comparison-cell.astromeg-cell::before {
2807        left: 22px;
2808        top: 22px;
2809      }
2810
2811      .portal-card.large {
2812        grid-column: auto;
2813      }
2814
2815      .rating-card {
2816        position: relative;
2817        top: auto;
2818      }
2819
2820      .hero {
2821        min-height: 920px;
2822        align-items: end;
2823        background:
2824          radial-gradient(circle at 72% 72%, rgba(179, 75, 178, .30), transparent 38%),
2825          linear-gradient(180deg, rgba(3,3,8,.22) 0%, rgba(30,18,48,.42) 44%, rgba(74,24,72,.72) 100%),
2826          var(--img-hero) center 78%/cover no-repeat;
2827      }
2828
2829      .feature-banner {
2830        min-height: auto;
2831        padding-top: 108px;
2832        padding-bottom: 108px;
2833      }
2834
2835      .btn {
2836        min-height: 48px;
2837        padding: 12px 20px;
2838        font-size: 15px;
2839        line-height: 1.25;
2840      }
2841
2842      .text-panel > .btn {
2843        max-width: 360px;
2844        margin-top: 28px;
2845        min-height: 46px;
2846        padding: 11px 18px;
2847        font-size: 14px;
2848      }
2849
2850      .teacher-poster,
2851      .teacher-poster img {
2852        min-height: 0;
2853      }
2854
2855      .teacher-poster img {
2856        height: auto;
2857      }
2858
2859      .review-actions {
2860        gap: 12px;
2861      }
2862
2863      .review-actions .btn {
2864        min-height: 46px;
2865        padding: 10px 16px;
2866      }
2867
2868      .google-review-card {
2869        min-height: 0;
2870      }
2871
2872      .text-panel {
2873        padding: 34px;
2874      }
2875
2876      .visual-frame {
2877        min-height: 460px;
2878      }
2879
2880      .portal-card,
2881      .portal-card.large {
2882        min-height: 0;
2883      }
2884
2885      .included {
2886        grid-template-columns: 1fr;
2887      }
2888    }
2889
2890    @media (max-width: 620px) {
2891      .section {
2892        padding: 78px 18px;
2893      }
2894
2895      .section-tight {
2896        padding: 62px 18px;
2897      }
2898
2899      .scroll-arrow {
2900        right: 12px;
2901        width: 36px;
2902        height: 36px;
2903        font-size: 18px;
2904      }
2905
2906      .scroll-to-bottom {
2907        bottom: 58px;
2908      }
2909
2910      .back-to-top {
2911        bottom: 14px;
2912      }
2913
2914      #comparison .section-head h2 {
2915        font-size: clamp(34px, 12vw, 46px);
2916      }
2917
2918      .comparison-table,
2919      .ask-panel {
2920        border-radius: 24px;
2921      }
2922
2923      .comparison-cell {
2924        padding: 18px 16px 18px 46px;
2925        font-size: 14px;
2926        line-height: 1.56;
2927      }
2928
2929      .comparison-cell.astromeg-cell::before {
2930        left: 16px;
2931        top: 18px;
2932      }
2933
2934      .ask-prompt-grid {
2935        grid-template-columns: 1fr;
2936      }
2937
2938      .hero {
2939        min-height: 880px;
2940        padding-bottom: 14px;
2941      }
2942
2943      .hero-copy {
2944        width: 100%;
2945        max-width: calc(100vw - 52px);
2946      }
2947
2948      .hero-logo-mark {
2949        width: 220px;
2950        margin-bottom: 12px;
2951      }
2952
2953      .hero-gold-rule {
2954        width: min(220px, 62vw);
2955        margin-bottom: 20px;
2956      }
2957
2958      .hero h1 {
2959        font-size: clamp(30px, 9.2vw, 36px);
2960        line-height: 1.04;
2961      }
2962
2963      .hero-title-word {
2964        display: block;
2965      }
2966
2967      .hero-copy .lead {
2968        max-width: calc(100vw - 52px);
2969        font-size: 18px;
2970      }
2971
2972      .hero-punch {
2973        max-width: calc(100vw - 52px);
2974        font-size: 16px;
2975      }
2976
2977      .hero-support {
2978        max-width: calc(100vw - 52px);
2979      }
2980
2981      .cta-row,
2982      .proof-strip,
2983      .hero-review-proof {
2984        max-width: calc(100vw - 52px);
2985      }
2986
2987      .cta-row {
2988        align-items: stretch;
2989      }
2990
2991      .btn {
2992        width: auto;
2993        max-width: 100%;
2994        min-width: 0;
2995        min-height: 44px;
2996        padding: 10px 18px;
2997        font-size: 14px;
2998        line-height: 1.24;
2999      }
3000
3001      .cta-row .btn,
3002      .review-actions .btn,
3003      .offer-card .btn,
3004      .modal-submit {
3005        width: 100%;
3006      }
3007
3008      .cta-row .btn-demo-seal,
3009      .offer-card .btn-demo-seal {
3010        flex: 0 0 138px;
3011        width: 138px;
3012        height: 138px;
3013        min-width: 138px;
3014        min-height: 138px;
3015        margin-right: auto;
3016        margin-left: auto;
3017        padding: 18px;
3018        font-size: 12px;
3019      }
3020
3021      .proof-strip {
3022        display: grid;
3023      }
3024
3025      .hero-review-proof {
3026        grid-template-columns: 1fr;
3027      }
3028
3029      .hero-review-score {
3030        padding-right: 0;
3031        padding-bottom: 10px;
3032        border-right: 0;
3033        border-bottom: 1px solid rgba(216, 172, 85, .18);
3034      }
3035
3036      .card {
3037        padding: 20px;
3038      }
3039
3040      .rating-card {
3041        padding: 24px;
3042        border-radius: 28px;
3043      }
3044
3045      .google-trust-badge {
3046        padding: 16px 14px;
3047      }
3048
3049      .review-actions {
3050        gap: 10px;
3051        margin-top: 18px;
3052      }
3053
3054      .review-actions .btn {
3055        min-height: 44px;
3056        padding: 10px 14px;
3057        border-radius: 999px;
3058        font-size: 14px;
3059      }
3060
3061      .google-review-card {
3062        min-height: 0;
3063        gap: 10px;
3064      }
3065
3066      .reviewer-row {
3067        gap: 10px;
3068      }
3069
3070      .review-avatar {
3071        width: 38px;
3072        height: 38px;
3073        font-size: 18px;
3074      }
3075
3076      .review-label {
3077        margin-bottom: 8px;
3078        padding: 6px 10px;
3079        font-size: 11px;
3080      }
3081
3082      .review-card blockquote,
3083      .google-review-card blockquote {
3084        font-size: 15px;
3085        line-height: 1.55;
3086      }
3087
3088      .review-card cite {
3089        margin-top: 12px;
3090      }
3091
3092      .visual-frame,
3093      .visual-frame.small {
3094        min-height: 390px;
3095        border-radius: 26px;
3096      }
3097
3098      .portal-card,
3099      .portal-card.large {
3100        min-height: 0;
3101        border-radius: 26px;
3102      }
3103
3104      .portal-card.reader-card img {
3105        aspect-ratio: 1 / 1;
3106        max-height: none;
3107        object-fit: cover;
3108        object-position: center 10%;
3109      }
3110
3111      .portal-card.genius-card {
3112        grid-column: span 1;
3113      }
3114
3115      .genius-image-pair {
3116        display: block;
3117        overflow: visible;
3118        padding: 0;
3119        scroll-snap-type: none;
3120      }
3121
3122      .genius-image-pair::-webkit-scrollbar {
3123        display: none;
3124      }
3125
3126      .genius-image-pair img {
3127        width: 100%;
3128        height: auto;
3129        aspect-ratio: 1 / 1;
3130        max-height: none;
3131        object-fit: cover;
3132        object-position: center;
3133        background: #020204;
3134      }
3135
3136      .genius-image-pair img:nth-child(2) {
3137        transform: none;
3138      }
3139
3140      .genius-card .portal-card-content {
3141        margin-top: 10px;
3142        margin-bottom: 0;
3143      }
3144
3145      .visual-caption {
3146        left: 14px;
3147        right: 14px;
3148        bottom: 14px;
3149      }
3150
3151      .text-panel {
3152        max-width: none;
3153        padding: 28px 24px;
3154        border-radius: 26px;
3155      }
3156
3157      .text-panel > .btn {
3158        width: 100%;
3159        max-width: 320px;
3160        margin-left: auto;
3161        margin-right: auto;
3162      }
3163
3164      .feature-banner .container.teacher-layout {
3165        width: min(100%, 640px);
3166        gap: 18px;
3167      }
3168
3169      .teacher-poster {
3170        width: 100%;
3171        min-height: 0;
3172        border-radius: 28px;
3173      }
3174
3175      .teacher-poster img {
3176        width: 100%;
3177        min-height: 0;
3178        padding: 8px;
3179      }
3180
3181      .offer-card,
3182      .final-cta .container-narrow {
3183        padding: 24px;
3184        border-radius: 30px;
3185      }
3186
3187      .astromeg-note {
3188        margin: 24px auto 30px;
3189        padding: 0;
3190        border-radius: 24px;
3191      }
3192
3193      .astromeg-note-heading h3 {
3194        font-size: clamp(32px, 9vw, 44px);
3195      }
3196
3197      .note-opening {
3198        font-size: clamp(36px, 10vw, 48px);
3199        line-height: 1.08;
3200      }
3201
3202      .note-body-frame {
3203        padding: 18px;
3204        border-width: 8px;
3205        border-radius: 24px;
3206      }
3207
3208      .note-body-frame p {
3209        font-size: 15px;
3210        line-height: 1.48;
3211      }
3212
3213      .note-signature-row {
3214        grid-template-columns: 88px 1fr;
3215        gap: 12px;
3216      }
3217
3218      .note-portrait {
3219        max-width: 96px;
3220        margin: 0 0 -20px -18px;
3221      }
3222
3223      .astromeg-note .note-signoff {
3224        font-size: clamp(30px, 9vw, 42px);
3225      }
3226
3227      .offer-card h2 {
3228        line-height: 1.18;
3229      }
3230
3231      .offer-card > p {
3232        line-height: 1.7;
3233      }
3234    }
3235
3236    /* Metallic gold free-reading CTA used across the page. */
3237    .btn-demo-seal,
3238    .cta-row .btn-demo-seal,
3239    .offer-card .btn-demo-seal {
3240      position: relative;
3241      isolation: isolate;
3242      flex: 0 0 var(--demo-seal-size, 156px);
3243      width: var(--demo-seal-size, 156px);
3244      height: var(--demo-seal-size, 156px);
3245      min-width: var(--demo-seal-size, 156px);
3246      min-height: var(--demo-seal-size, 156px);
3247      padding: 24px;
3248      border: 3px solid transparent;
3249      border-radius: 50%;
3250      color: transparent;
3251      background:
3252        radial-gradient(circle at 50% 42%, rgba(12, 8, 4, .98) 0%, rgba(3, 3, 5, .99) 66%, rgba(3, 3, 5, .94) 100%) padding-box,
3253        conic-gradient(from 225deg,
3254          var(--gold-metal-dark),
3255          var(--gold-metal-mid),
3256          var(--gold-metal-top),
3257          var(--gold-metal-light),
3258          var(--gold-metal-dark),
3259          var(--gold-metal-light),
3260          var(--gold-metal-glint),
3261          var(--gold-metal-mid),
3262          var(--gold-metal-dark)) border-box;
3263      box-shadow:
3264        0 0 28px rgba(216, 172, 85, .22),
3265        0 22px 52px rgba(0, 0, 0, .48),
3266        inset 0 0 30px rgba(216, 172, 85, .08);
3267      overflow: hidden;
3268      font-size: clamp(13px, 1.2vw, 16px);
3269      font-weight: 650;
3270      line-height: 1.04;
3271      letter-spacing: 0;
3272      text-shadow: none;
3273      text-transform: uppercase;
3274      white-space: normal;
3275    }
3276
3277    .btn-demo-seal::before,
3278    .cta-row .btn-demo-seal::before,
3279    .offer-card .btn-demo-seal::before {
3280      display: none;
3281    }
3282
3283    .btn-demo-seal::after,
3284    .cta-row .btn-demo-seal::after,
3285    .offer-card .btn-demo-seal::after {
3286      display: none;
3287    }
3288
3289    .btn-demo-seal:hover {
3290      transform: translateY(-2px) scale(1.02);
3291      box-shadow:
3292        0 0 34px rgba(216, 172, 85, .28),
3293        0 24px 58px rgba(0, 0, 0, .50),
3294        inset 0 0 30px rgba(216, 172, 85, .10);
3295    }
3296
3297    .btn-demo-seal span {
3298      display: block;
3299      background:
3300        linear-gradient(180deg,
3301          #d8ac55 0%,
3302          #b99352 24%,
3303          #9e6823 46%,
3304          #5b3108 58%,
3305          #b99352 74%,
3306          #d8ac55 100%);
3307      -webkit-background-clip: text;
3308      background-clip: text;
3309      color: transparent;
3310      text-shadow:
3311        0 1px 0 rgba(255,255,255,.05),
3312        0 0 10px rgba(216, 172, 85, .18);
3313    }
3314
3315    .free-reading-cta {
3316      display: grid;
3317      flex: 0 1 320px;
3318      justify-items: center;
3319      align-items: start;
3320      gap: 14px;
3321      max-width: min(340px, 100%);
3322      margin-right: auto;
3323      margin-left: auto;
3324      text-align: center;
3325    }
3326
3327    .free-reading-copy {
3328      display: grid;
3329      gap: 6px;
3330      max-width: 340px;
3331      margin: 0 auto;
3332    }
3333
3334    .free-reading-title,
3335    .free-reading-subtitle {
3336      margin: 0;
3337      background:
3338        linear-gradient(180deg,
3339          #d8ac55 0%,
3340          #b99352 24%,
3341          #9e6823 46%,
3342          #5b3108 58%,
3343          #b99352 74%,
3344          #d8ac55 100%);
3345      -webkit-background-clip: text;
3346      background-clip: text;
3347      color: transparent;
3348      text-shadow:
3349        0 1px 0 rgba(255,255,255,.05),
3350        0 0 12px rgba(216, 172, 85, .16);
3351    }
3352
3353    .free-reading-title {
3354      font-family: "Playfair Display", Georgia, serif;
3355      font-size: clamp(20px, 2.15vw, 28px);
3356      font-style: italic;
3357      font-weight: 500;
3358      line-height: 1.12;
3359    }
3360
3361    .free-reading-subtitle {
3362      font-size: clamp(12px, 1.05vw, 15px);
3363      font-weight: 560;
3364      line-height: 1.42;
3365    }
3366
3367    .payment-actions .free-reading-cta {
3368      flex-basis: 100%;
3369      margin-top: 16px;
3370    }
3371
3372    /* Keep hero proof links centered and clickable on the original palette. */
3373    .hero-copy {
3374      position: relative;
3375      z-index: 1;
3376    }
3377
3378    .hero-copy a {
3379      position: relative;
3380      z-index: 2;
3381    }
3382
3383    .hero-copy .proof-strip {
3384      display: grid;
3385      grid-template-columns: repeat(3, minmax(0, 1fr));
3386      gap: 10px;
3387      max-width: min(820px, 100%);
3388    }
3389
3390    .hero-copy .proof-pill {
3391      justify-content: center;
3392      width: 100%;
3393      min-height: 52px;
3394      padding: 12px 14px;
3395      text-align: center;
3396      line-height: 1.18;
3397      text-decoration: none;
3398      color: var(--gold-metal-light);
3399      cursor: pointer;
3400      pointer-events: auto;
3401      transition: transform 0.22s ease, border-color 0.22s ease, background 0.22s ease;
3402    }
3403
3404    .hero-copy .proof-pill:hover {
3405      transform: translateY(-2px);
3406      border-color: rgba(216, 172, 85, 0.28);
3407      background: rgba(0, 0, 0, 0.56);
3408      color: var(--gold-metal-light);
3409    }
3410
3411    /* New magic MP4 section, kept on the original dark/gold palette. */
3412    .magic-moment {
3413      position: relative;
3414      scroll-margin-top: 92px;
3415      margin-top: -1px;
3416      padding: 18px 22px 56px;
3417      overflow: hidden;
3418      background:
3419        radial-gradient(circle at 50% 42%, rgba(216, 172, 85, 0.08), transparent 36%),
3420        linear-gradient(180deg, rgba(3, 3, 8, 0.46) 0%, rgba(4, 4, 12, 0.52) 42%, rgba(3, 3, 8, 0.48) 100%);
3421    }
3422
3423    .magic-moment::before {
3424      content: "";
3425      position: absolute;
3426      inset: 0;
3427      opacity: 0.24;
3428      pointer-events: none;
3429      background-image:
3430        radial-gradient(circle, rgba(255,255,255,.92) 0 1px, transparent 1.6px),
3431        radial-gradient(circle, rgba(216,172,85,.72) 0 1px, transparent 1.7px);
3432      background-size: 92px 92px, 138px 138px;
3433      background-position: 12px 8px, 54px 42px;
3434    }
3435
3436    .magic-moment::after {
3437      content: "";
3438      position: absolute;
3439      inset: 0;
3440      z-index: 1;
3441      pointer-events: none;
3442      background:
3443        linear-gradient(180deg, rgba(3, 3, 8, 0.30) 0%, transparent 13%, transparent 84%, rgba(3, 3, 8, 0.36) 100%),
3444        radial-gradient(ellipse at center, transparent 0 56%, rgba(3, 3, 8, 0.10) 82%, rgba(3, 3, 8, 0.28) 100%);
3445    }
3446
3447    .magic-stage {
3448      position: relative;
3449      z-index: 2;
3450      display: grid;
3451      place-items: center;
3452      align-content: center;
3453      min-height: clamp(280px, 46vw, 580px);
3454      text-align: center;
3455    }
3456
3457    .magic-video-shell {
3458      position: relative;
3459      z-index: 2;
3460      display: grid;
3461      place-items: center;
3462      width: min(880px, 108vw);
3463      margin: 0 auto;
3464    }
3465
3466    .magic-video-wrap {
3467      position: relative;
3468      z-index: 2;
3469      width: 100%;
3470      margin: 0 auto;
3471      overflow: visible;
3472      background: transparent;
3473      box-shadow: none;
3474      filter:
3475        drop-shadow(0 0 18px rgba(216, 172, 85, 0.14))
3476        drop-shadow(0 26px 58px rgba(0, 0, 0, 0.26));
3477      mix-blend-mode: screen;
3478      -webkit-mask-image:
3479        linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.72) 9%, #000 20%, #000 76%, rgba(0, 0, 0, 0.72) 88%, transparent 100%),
3480        radial-gradient(ellipse at center, #000 0 60%, rgba(0, 0, 0, 0.84) 74%, transparent 94%);
3481      -webkit-mask-composite: source-in;
3482      mask-image:
3483        linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.72) 9%, #000 20%, #000 76%, rgba(0, 0, 0, 0.72) 88%, transparent 100%),
3484        radial-gradient(ellipse at center, #000 0 60%, rgba(0, 0, 0, 0.84) 74%, transparent 94%);
3485      mask-composite: intersect;
3486    }
3487
3488    .magic-video-title {
3489      position: absolute;
3490      top: 34%;
3491      left: 50%;
3492      z-index: 3;
3493      width: 94%;
3494      margin: 0;
3495      padding: 0 14px;
3496      box-sizing: border-box;
3497      transform: translateX(-50%);
3498      color: #dfc893;
3499      font-family: "Pinyon Script", "Imperial Script", "Great Vibes", cursive;
3500      font-size: clamp(54px, 6.8vw, 88px);
3501      font-style: normal;
3502      font-weight: 400;
3503      line-height: 1.14;
3504      text-align: center;
3505      text-shadow:
3506        0 2px 2px rgba(12, 6, 3, .94),
3507        0 0 16px rgba(12, 6, 3, .76),
3508        0 0 24px rgba(216, 172, 85, .12);
3509    }
3510
3511    .magic-video-title span {
3512      display: block;
3513    }
3514
3515    .magic-video {
3516      display: block;
3517      width: 100%;
3518      aspect-ratio: 1 / 1;
3519      object-fit: contain;
3520      background: transparent;
3521      transform: scale(1.03);
3522    }
3523
3524    .magic-demo-seal {
3525      --magic-demo-size: clamp(164px, 14vw, 208px);
3526      position: absolute;
3527      left: 50%;
3528      top: 88%;
3529      z-index: 4;
3530      flex: none;
3531      width: var(--magic-demo-size);
3532      height: var(--magic-demo-size);
3533      min-width: var(--magic-demo-size);
3534      min-height: var(--magic-demo-size);
3535      padding: 28px;
3536      border: 3px solid transparent;
3537      color: transparent;
3538      background:
3539        radial-gradient(circle at 50% 42%, rgba(12, 8, 4, .98) 0%, rgba(3, 3, 5, .99) 66%, rgba(3, 3, 5, .94) 100%) padding-box,
3540        conic-gradient(from 225deg,
3541          var(--gold-metal-dark),
3542          var(--gold-metal-mid),
3543          var(--gold-metal-top),
3544          var(--gold-metal-light),
3545          var(--gold-metal-dark),
3546          var(--gold-metal-light),
3547          var(--gold-metal-glint),
3548          var(--gold-metal-mid),
3549          var(--gold-metal-dark)) border-box !important;
3550      box-shadow:
3551        0 0 28px rgba(216, 172, 85, .22),
3552        0 22px 52px rgba(0, 0, 0, .48),
3553        inset 0 0 30px rgba(216, 172, 85, .08);
3554      font-size: clamp(15px, 1.25vw, 18px);
3555      font-weight: 950;
3556      line-height: 1.1;
3557      text-shadow: none;
3558      pointer-events: auto;
3559      transform: translate(-50%, -50%);
3560      filter:
3561        drop-shadow(0 0 12px rgba(216, 172, 85, 0.18))
3562        drop-shadow(0 14px 30px rgba(0, 0, 0, 0.34));
3563    }
3564
3565    .magic-demo-seal span {
3566      display: block;
3567      background:
3568        linear-gradient(180deg,
3569          #d8ac55 0%,
3570          #b99352 24%,
3571          #9e6823 46%,
3572          #5b3108 58%,
3573          #b99352 74%,
3574          #d8ac55 100%);
3575      -webkit-background-clip: text;
3576      background-clip: text;
3577      color: transparent;
3578      text-shadow:
3579        0 1px 0 rgba(255,255,255,.06),
3580        0 2px 0 rgba(47, 25, 5, .54),
3581        0 0 16px rgba(216, 172, 85, .20);
3582    }
3583
3584    .magic-demo-seal:hover {
3585      transform: translate(-50%, calc(-50% - 2px)) scale(1.02);
3586    }
3587
3588    .magic-demo-seal::before {
3589      display: none;
3590    }
3591
3592    .magic-demo-copy {
3593      position: relative;
3594      z-index: 3;
3595      display: grid;
3596      width: min(700px, 92vw);
3597      margin: clamp(34px, 4vw, 58px) auto 0;
3598      place-items: center;
3599      gap: 8px;
3600      text-align: center;
3601    }
3602
3603    .magic-demo-title {
3604      margin: 0;
3605      font-family: "Playfair Display", Georgia, serif;
3606      font-size: clamp(19px, 2.4vw, 32px);
3607      font-style: italic;
3608      font-weight: 600;
3609      line-height: 1.12;
3610      background:
3611        linear-gradient(180deg,
3612          var(--champagne-glint) 0%,
3613          var(--champagne-top) 32%,
3614          var(--champagne-mid) 68%,
3615          var(--champagne-glint) 100%);
3616      -webkit-background-clip: text;
3617      background-clip: text;
3618      -webkit-text-fill-color: transparent;
3619      color: transparent;
3620      text-shadow:
3621        0 0 18px rgba(0, 0, 0, .78),
3622        0 0 26px rgba(216, 172, 85, .20);
3623    }
3624
3625    .magic-demo-subtitle {
3626      margin: 0;
3627      max-width: 500px;
3628      background:
3629        linear-gradient(180deg,
3630          var(--gold-metal-top) 0%,
3631          var(--gold-metal-light) 36%,
3632          var(--gold-metal-mid) 68%,
3633          var(--gold-metal-light) 100%);
3634      -webkit-background-clip: text;
3635      background-clip: text;
3636      color: transparent;
3637      font-size: clamp(12px, 1.15vw, 15px);
3638      font-weight: 700;
3639      line-height: 1.35;
3640      text-shadow:
3641        0 0 16px rgba(0, 0, 0, .82),
3642        0 0 18px rgba(216, 172, 85, .16);
3643    }
3644
3645    @media (max-width: 620px) {
3646      .price {
3647        display: flex;
3648        align-items: baseline;
3649        justify-content: center;
3650        gap: 2px;
3651      }
3652
3653      .price-amount {
3654        letter-spacing: -.055em;
3655      }
3656
3657      .price-period {
3658        letter-spacing: -.02em;
3659      }
3660
3661      .hero-copy .proof-strip {
3662        grid-template-columns: 1fr;
3663      }
3664
3665      .magic-moment {
3666        padding: 8px 0 36px;
3667      }
3668
3669      .magic-stage {
3670        min-height: min(92vw, 440px);
3671      }
3672
3673      .magic-video-wrap {
3674        width: 100%;
3675      }
3676
3677      .magic-video-shell {
3678        width: min(96vw, 440px);
3679      }
3680
3681      .magic-video {
3682        transform: scale(.96);
3683      }
3684
3685      .magic-video-title {
3686        top: 29%;
3687        width: 96%;
3688        padding: 0 8px;
3689        font-size: clamp(36px, 11.5vw, 54px);
3690      }
3691
3692      .magic-demo-seal {
3693        --magic-demo-size: clamp(128px, 41.8vw, 148px);
3694        top: 104%;
3695        padding: clamp(20px, 6.7vw, 25px);
3696        font-size: clamp(11.5px, 3.6vw, 13px);
3697        line-height: 1.04;
3698      }
3699
3700      .magic-demo-copy {
3701        width: min(340px, 92vw);
3702        margin-top: clamp(100px, 30vw, 118px);
3703        gap: 6px;
3704      }
3705
3706      .magic-demo-title {
3707        max-width: 320px;
3708        font-size: clamp(19px, 6.2vw, 22px);
3709      }
3710
3711      .magic-demo-subtitle {
3712        max-width: 330px;
3713        font-size: clamp(11px, 3.2vw, 12px);
3714      }
3715    }
3716
3717    /* Final color pass: replace flat yellow/orange text with the page's metallic gold. */
3718    :where(
3719      .eyebrow,
3720      .difference-kicker,
3721      .gold,
3722      .proof-pill strong,
3723      .hero-review-score span,
3724      .hero-review-copy span,
3725      .difference-frame-note strong,
3726      .google-trust-badge strong,
3727      .stars,
3728      .review-card cite,
3729      .payment-access-note,
3730      .offer-card .micro,
3731      .offer-card .price-equivalent,
3732      .included div::before,
3733      .policy-inline,
3734      .gcash-price,
3735      .modal-title,
3736      .modal-note li::before,
3737      #difference .difference-training-note strong,
3738      #difference .check-list li::before,
3739      #faq .eyebrow,
3740      #faq h2,
3741      summary
3742    ) {
3743      color: var(--champagne-top);
3744      background:
3745        linear-gradient(180deg,
3746          var(--champagne-glint) 0%,
3747          var(--champagne-top) 24%,
3748          var(--champagne-mid) 58%,
3749          var(--champagne-deep) 78%,
3750          var(--champagne-top) 100%);
3751      -webkit-background-clip: text;
3752      background-clip: text;
3753      -webkit-text-fill-color: transparent;
3754      text-shadow:
3755        0 1px 0 rgba(255,255,255,.06),
3756        0 0 16px rgba(197, 160, 93, .18);
3757    }
3758
3759    :where(.eyebrow, .difference-kicker) {
3760      font-weight: 800;
3761    }
3762
3763    :where(#difference .check-list li) {
3764      color: var(--champagne-top);
3765      background:
3766        radial-gradient(circle at 12% 0%, rgba(216, 172, 85, .08), transparent 40%),
3767        rgba(255, 255, 255, .045);
3768    }
3769
3770    :where(
3771      .review-label,
3772      .demo-code,
3773      #conversation .icon,
3774      .sample-answer-icon
3775    ) {
3776      color: var(--champagne-top);
3777      -webkit-text-fill-color: var(--champagne-top);
3778    }
3779
3780    #comparison :where(
3781      .eyebrow,
3782      .section-head h2,
3783      .comparison-mobile-label,
3784      .comparison-cell.astromeg-cell p,
3785      .ask-panel h3,
3786      .ask-prompt-pill::before
3787    ) {
3788      color: var(--champagne-top);
3789      background:
3790        linear-gradient(180deg,
3791          var(--champagne-glint) 0%,
3792          var(--champagne-top) 24%,
3793          var(--champagne-mid) 58%,
3794          var(--champagne-deep) 78%,
3795          var(--champagne-top) 100%);
3796      -webkit-background-clip: text;
3797      background-clip: text;
3798      -webkit-text-fill-color: transparent;
3799      text-shadow:
3800        0 1px 0 rgba(255,255,255,.06),
3801        0 0 16px rgba(197, 160, 93, .18);
3802    }
3803
3804    /* Trust and reviews: keep the gold elegant, not heavy or yellow. */
3805    #trust .eyebrow,
3806    #reviews .eyebrow,
3807    #trust .card h3,
3808    #reviews .review-label,
3809    #reviews .google-trust-badge strong,
3810    #reviews .stars,
3811    #reviews .review-actions .btn-secondary span {
3812      background:
3813        linear-gradient(180deg,
3814          #f0dfb8 0%,
3815          #d2b174 46%,
3816          #aa7a3c 100%);
3817      -webkit-background-clip: text;
3818      background-clip: text;
3819      color: #d2b174;
3820      -webkit-text-fill-color: transparent;
3821      text-shadow: none;
3822    }
3823
3824    #trust .card h3 {
3825      font-size: clamp(22px, 2vw, 29px);
3826      font-weight: 400;
3827      line-height: 1.18;
3828    }
3829
3830    #trust .card p,
3831    #reviews .rating-card p,
3832    #reviews .google-trust-badge span:last-child,
3833    #reviews .review-card blockquote,
3834    #reviews .review-meta,
3835    #reviews .review-source {
3836      font-weight: 400;
3837      color: rgba(245, 237, 218, .76);
3838      text-shadow: none;
3839    }
3840
3841    #trust .icon,
3842    #reviews .stars {
3843      color: #d2b174;
3844      -webkit-text-fill-color: #d2b174;
3845      text-shadow: none;
3846    }
3847
3848    #reviews .google-trust-badge strong,
3849    #reviews .review-label,
3850    #trust .eyebrow,
3851    #reviews .eyebrow,
3852    #reviews .review-actions .btn-secondary,
3853    #reviews .review-actions .btn-secondary span {
3854      font-weight: 400;
3855    }
3856
3857    /* Difference pills: transparent cards with thin antique gold, not yellow. */
3858    #difference .check-list li {
3859      border-color: rgba(210, 177, 116, .34);
3860      background:
3861        radial-gradient(circle at 14% 0%, rgba(210, 177, 116, .07), transparent 36%),
3862        linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .012));
3863      box-shadow: none;
3864      color: inherit;
3865      font-weight: 400;
3866    }
3867
3868    #difference .check-list li::before,
3869    #difference .check-list-text {
3870      background:
3871        linear-gradient(180deg,
3872          #f0dfb8 0%,
3873          #d2b174 48%,
3874          #a87938 100%);
3875      -webkit-background-clip: text;
3876      background-clip: text;
3877      color: #d2b174;
3878      -webkit-text-fill-color: transparent;
3879      font-weight: 400;
3880      text-shadow: none;
3881    }
3882
3883    /* Layered chart cards: keep headings gold, but lighter and readable. */
3884    #methods .method-card h3 {
3885      background:
3886        linear-gradient(180deg,
3887          #f0dfb8 0%,
3888          #d2b174 50%,
3889          #a87938 100%);
3890      -webkit-background-clip: text;
3891      background-clip: text;
3892      color: #d2b174;
3893      -webkit-text-fill-color: transparent;
3894      font-weight: 400;
3895      line-height: 1.22;
3896      text-shadow: none;
3897    }
3898
3899    /* FAQ: soft gold, no orange, no heavy/chunky type. */
3900    #faq .eyebrow,
3901    #faq h2,
3902    #faq summary {
3903      background:
3904        linear-gradient(180deg,
3905          #f0dfb8 0%,
3906          #d2b174 52%,
3907          #a87938 100%);
3908      -webkit-background-clip: text;
3909      background-clip: text;
3910      color: #d2b174;
3911      -webkit-text-fill-color: transparent;
3912      text-shadow: none;
3913    }
3914
3915    #faq .eyebrow,
3916    #faq summary {
3917      font-weight: 400;
3918    }
3919
3920    #faq h2 {
3921      font-weight: 400;
3922    }
3923
3924    /* Reading Modes: antique gold only, lighter than the chunky default. */
3925    #reading-modes .eyebrow,
3926    #reading-modes .section-head h2,
3927    #reading-modes .card h3,
3928    #reading-modes .icon {
3929      background:
3930        linear-gradient(180deg,
3931          #f0dfb8 0%,
3932          #d2b174 52%,
3933          #a87938 100%);
3934      -webkit-background-clip: text;
3935      background-clip: text;
3936      color: #d2b174;
3937      -webkit-text-fill-color: transparent;
3938      text-shadow: none;
3939    }
3940
3941    #reading-modes .eyebrow,
3942    #reading-modes .card h3,
3943    #reading-modes .icon {
3944      font-weight: 400;
3945    }
3946
3947    #reading-modes .section-head h2 {
3948      font-weight: 400;
3949      line-height: 1.08;
3950    }
3951
3952  </style>
3953</head>
3954
3955<body>
3956  <video
3957    class="page-bg-video"
3958    autoplay
3959    loop
3960    muted
3961    playsinline
3962    preload="auto"
3963    aria-hidden="true"
3964    data-page-bg-video
3965  >
3966    <source src="assets/landing-sequence/pastel-clouds-loop-v1.mp4?v=20260824-4" type="video/mp4">
3967  </video>
3968  <div class="page-bg-tint" aria-hidden="true"></div>
3969
3970  <div class="page">
3971
3972    <nav class="nav" aria-label="Primary navigation">
3973      <a class="brand" href="#top" aria-label="Astromeg Oracle home">
3974        <img class="brand-logo" src="assets/landing-sequence/oracle-logo-transparent-final.png" alt="" width="38" height="38">
3975        <span>Astromeg Oracle</span>
3976      </a>
3977
3978      <div class="nav-links">
3979        <a href="#what-it-is">What It Is</a>
3980        <a href="#methods">Method</a>
3981        <a href="#reviews">Reviews</a>
3982        <a href="#faq">FAQ</a>
3983        <a class="nav-cta" href="#offer">Enter Oracle</a>
3984      </div>
3985    </nav>
3986
3987    <a class="scroll-arrow scroll-to-bottom" href="#footer" aria-label="Scroll to bottom">↓</a>
3988    <a class="scroll-arrow back-to-top" href="#top" aria-label="Back to top">↑</a>
3989
3990    <header class="section hero" id="top">
3991      <div class="container">
3992        <div class="hero-copy">
3993          <img class="hero-logo-mark" src="assets/landing-sequence/astromeg-oracle-logo-gold.png" alt="Astromeg Oracle Advanced Astrology Intelligence">
3994          <div class="hero-gold-rule" aria-hidden="true"></div>
3995          <h1>Private AI Astrology Readings, Courses, Meditations, and Spiritual Programs in One Oracle</h1>
3996
3997          <p class="lead">
3998            Ask anything. Get advanced chart-based guidance 24/7.
3999          </p>
4000
4001          <div class="hero-punch">
4002            <span>Natal, transits, synastry, timing, courses, meditations, and spiritual programs.</span>
4003            <span>Ask your exact question, clarify, follow up, and go deeper.</span>
4004            <span>Explore love, money, career, purpose, healing, relationships, and destiny.</span>
4005          </div>
4006
4007          <div class="cta-row">
4008            <a class="btn btn-primary" href="#" data-open-modal aria-label="Pay with PayPal">Pay with PayPal</a>
4009            <a class="btn btn-gcash" href="#" data-open-gcash aria-label="Pay with GCash">Pay with GCash</a>
4010            <a class="btn btn-secondary" href="#comparison">See Why It’s Different</a>
4011          </div>
4012          <div class="affiliate-referral-entry affiliate-referral-entry--hero" data-referral-entry>
4013            <label for="heroReferralCode">Affiliate Code / Referred By</label>
4014            <div class="affiliate-referral-row">
4015              <input class="modal-field" type="text" id="heroReferralCode" data-referral-input autocomplete="off" maxlength="100" placeholder="Enter affiliate code">
4016              <button class="affiliate-apply-button" type="button" data-apply-referral data-apply-label="Apply Affiliate Code">Apply Affiliate Code</button>
4017            </div>
4018            <p class="affiliate-referral-status" data-referral-status aria-live="polite"></p>
4019          </div>
4020          <p class="hero-payment-note">All major credit cards, debit cards, and Apple Pay are accepted through PayPal secured checkout.</p>
4021          <div class="payment-strip hero-payment-methods" aria-label="Accepted payment methods">
4022            <span class="payment-feature"><span class="payment-feature-label">Major Credit Cards</span></span>
4023            <span>Visa</span>
4024            <span>Mastercard</span>
4025            <span>American Express</span>
4026            <span>Discover</span>
4027            <span>JCB</span>
4028            <span>Diners Club</span>
4029            <span class="payment-feature"><span class="payment-feature-label">Apple Pay</span></span>
4030            <span class="payment-feature"><span class="payment-feature-label">PayPal Secured Checkout</span></span>
4031          </div>
4032
4033          <div class="proof-strip">
4034            <a class="proof-pill" href="#reviews">Astromeg Trusted for Decades</a>
4035            <a class="proof-pill" href="#what-it-is">24/7 Private Guidance</a>
4036            <a class="proof-pill" href="#methods">Astromeg’s Method</a>
4037          </div>
4038        </div>
4039      </div>
4040    </header>
4041
4042    <section class="section secret-world" id="secret-world">
4043      <div class="container">
4044        <div class="section-head">
4045          <h2>Enter the chamber behind the chart.</h2>
4046          <p>
4047            Astromeg Oracle is designed to feel like stepping into a private cosmic room:
4048            the map, the timing, the pattern, the lesson, and the decision all begin to speak.
4049          </p>
4050        </div>
4051
4052        <div class="portal-gallery" aria-label="Astromeg Oracle visual world">
4053          <article class="portal-card portal-headline-card">
4054            <img src="assets/landing-sequence/advanced-astrology-intelligence-welcome.png" alt="Welcome to Advanced Astrology Intelligence golden robot and Saturn">
4055          </article>
4056
4057          <article class="portal-card portal-text-card">
4058            <div class="portal-card-content">
4059              <h3>The Portal</h3>
4060              <p>Open the conversation and let your chart become a living field of guidance.</p>
4061            </div>
4062          </article>
4063
4064          <article class="portal-card portal-text-card reader-card">
4065            <div class="portal-card-content">
4066              <h3>The Reader</h3>
4067              <p>Ask about love, destiny, purpose, timing, career, money, and healing.</p>
4068            </div>
4069          </article>
4070
4071          <article class="portal-card portal-text-card">
4072            <div class="portal-card-content">
4073              <h3>The Timing</h3>
4074              <p>See when life asks you to move, wait, prepare, release, or begin again.</p>
4075            </div>
4076          </article>
4077
4078          <article class="portal-card portal-text-card genius-card">
4079            <div class="portal-card-content">
4080              <h3>The Genius</h3>
4081              <p>See how precision and speed in interpreting multi-layered charts enhances your experience.</p>
4082            </div>
4083          </article>
4084
4085          <article class="portal-card portal-text-card show-full">
4086            <div class="portal-card-content">
4087              <h3>The North Star</h3>
4088              <p>Get the guidance from the methodologies, teachings, philosophies, and the wisdom that has changed many of Astromeg's clients throughout her career.</p>
4089            </div>
4090          </article>
4091        </div>
4092
4093      </div>
4094    </section>
4095
4096    <section class="section" id="crossroads">
4097      <div class="container grid grid-2">
4098        <div class="split-copy">
4099          <div class="eyebrow">For The Questions That Won’t Leave You Alone</div>
4100          <h2>The right guidance can change the way you move.</h2>
4101          <p>
4102            People do not come to astrology because they want jargon.
4103            They come because something in life is asking for meaning.
4104          </p>
4105          <p>
4106            A relationship is shifting. A career door is opening. A money cycle is changing.
4107            A chapter is ending. A new version of you is trying to emerge.
4108          </p>
4109          <p>
4110            Astromeg Oracle helps you recognize the deeper pattern before you respond from fear,
4111            confusion, or old cycles.
4112          </p>
4113        </div>
4114
4115        <div class="visual-frame opportunity-frame" style="background-image: var(--img-crossroads);">
4116        </div>
4117      </div>
4118    </section>
4119
4120    <section class="section feature-banner oracle-band" id="what-it-is">
4121      <div class="container">
4122        <div class="text-panel">
4123          <div class="eyebrow">How The Oracle Opens</div>
4124          <h2>Your chart becomes a conversation.</h2>
4125          <p>
4126            Astromeg Oracle opens through your birth chart, then reads the architecture
4127            behind the question you bring.
4128          </p>
4129          <p>
4130            It looks at your planets, houses, aspects, timing cycles,
4131            relationship patterns, money windows, karmic lessons, and current season of life,
4132            then helps you understand what the pattern is asking from you.
4133          </p>
4134
4135          <ul class="check-list">
4136            <li>Private guidance based on your birth chart</li>
4137            <li>Timing cycles for decisions, launches, pauses, and healing</li>
4138            <li>Relationship patterns, attraction, compatibility, and separation cycles</li>
4139            <li>Money seasons, career direction, visibility, and wealth blocks</li>
4140            <li>Astrology lessons inside the Oracle, from beginner to advanced</li>
4141          </ul>
4142        </div>
4143      </div>
4144    </section>
4145
4146    <section class="section" id="conversation">
4147      <div class="container grid grid-2 conversation-grid">
4148        <div class="split-copy">
4149          <div class="eyebrow">A Live Astrology Conversation</div>
4150          <h2>It is like having a private astrology reader in your pocket.</h2>
4151          <p>
4152            Astromeg Oracle combines advanced astrology interpretation with intelligent
4153            conversational guidance.
4154          </p>
4155          <p>
4156            It can help you ask better questions, understand your cycles, prepare for decisions,
4157            and see your life from a higher perspective. Anytime. Anywhere.
4158          </p>
4159        </div>
4160
4161        <div class="grid">
4162          <article class="card">
4163            <div class="icon">↻</div>
4164            <h3>Ask, then go deeper</h3>
4165            <p>Start with one question, then ask for context, timing, patterns, strategy, or a clearer next step.</p>
4166          </article>
4167
4168          <article class="card">
4169            <div class="icon">✺</div>
4170            <h3>Return anytime</h3>
4171            <p>Come back during your access period whenever you need guidance for love, money, healing, timing, or learning.</p>
4172          </article>
4173        </div>
4174
4175        <div class="sample-answer-grid conversation-samples" aria-label="Sample Astromeg Oracle prompts and answers">
4176          <article class="sample-answer-card">
4177            <div class="sample-answer-icon" aria-hidden="true">♃</div>
4178            <div class="sample-answer-label">Sample Prompt</div>
4179            <h3>“What is my money lesson right now?”</h3>
4180            <p>The Oracle can look at your wealth houses, current timing cycles, and repeating money patterns to show where discipline, visibility, confidence, or release is being activated.</p>
4181          </article>
4182
4183          <article class="sample-answer-card">
4184            <div class="sample-answer-icon" aria-hidden="true">♀</div>
4185            <div class="sample-answer-label">Sample Prompt</div>
4186            <h3>“What transits are affecting my relationship?”</h3>
4187            <p>Ask about attraction, pressure, distance, healing, compatibility, or separation cycles, then follow up for timing, emotional patterns, and wiser next steps.</p>
4188          </article>
4189
4190          <article class="sample-answer-card">
4191            <div class="sample-answer-icon" aria-hidden="true">☉</div>
4192            <div class="sample-answer-label">Sample Prompt</div>
4193            <h3>“What should I focus on this week?”</h3>
4194            <p>The Oracle can translate your current chart weather into grounded priorities for decisions, self-care, conversations, creative work, money, and spiritual alignment.</p>
4195          </article>
4196        </div>
4197
4198      </div>
4199    </section>
4200
4201    <section class="section dark-band" id="how-it-works">
4202      <div class="container">
4203        <div class="section-head">
4204          <div class="eyebrow">How It Works</div>
4205          <h2>Simple to enter. Deep once you begin.</h2>
4206          <p>
4207            No astrology knowledge is required. You bring your birth details and the question.
4208            The Oracle reads the pattern, then stays with you as the conversation unfolds.
4209          </p>
4210        </div>
4211
4212        <div class="grid grid-4 steps">
4213          <article class="card step-card">
4214            <div class="step-number"></div>
4215            <h3>Enter your birth details</h3>
4216            <p>Start with the chart data needed for personalized astrology guidance.</p>
4217          </article>
4218
4219          <article class="card step-card">
4220            <div class="step-number"></div>
4221            <h3>Ask your real question</h3>
4222            <p>Love, timing, career, money, purpose, family, healing, or the next decision.</p>
4223          </article>
4224
4225          <article class="card step-card">
4226            <div class="step-number"></div>
4227            <h3>The Oracle analyzes layers</h3>
4228            <p>It reads beyond one placement and looks for patterns across multiple systems.</p>
4229          </article>
4230
4231          <article class="card step-card">
4232            <div class="step-number"></div>
4233            <h3>Receive guidance</h3>
4234            <p>Get interpretation, timing, reflection, learning, and next-step clarity.</p>
4235          </article>
4236        </div>
4237      </div>
4238    </section>
4239
4240    <section class="section" id="reading-modes">
4241      <div class="container">
4242        <div class="section-head">
4243          <div class="eyebrow">Reading Modes</div>
4244          <h2>Choose the insight you need.</h2>
4245          <p>
4246            The Oracle is built for real life: love, money, timing, healing, purpose,
4247            and the decisions you cannot stop thinking about.
4248          </p>
4249        </div>
4250
4251        <div class="grid grid-3">
4252          <article class="card">
4253            <div class="icon">♡</div>
4254            <h3>Life & Relationship Guidance</h3>
4255            <p>
4256              Explore compatibility, emotional patterns, repeating relationship cycles,
4257              family dynamics, soul contracts, and healing themes.
4258            </p>
4259          </article>
4260
4261          <article class="card">
4262            <div class="icon">☽</div>
4263            <h3>Timing & Future Cycles</h3>
4264            <p>
4265              Understand major turning points, opportunities, transitions, future themes,
4266              progressions, transits, Solar Returns, and timing windows.
4267            </p>
4268          </article>
4269
4270          <article class="card">
4271            <div class="icon">$</div>
4272            <h3>Wealth, Career & Success</h3>
4273            <p>
4274              Explore wealth architecture, business direction, visibility, leadership,
4275              career destiny, monetization gifts, and long-term success.
4276            </p>
4277          </article>
4278        </div>
4279      </div>
4280    </section>
4281
4282    <section class="section feature-banner future-band" id="future-cycles">
4283      <div class="container">
4284        <div class="text-panel">
4285          <div class="eyebrow">Timing Changes Everything</div>
4286          <h2>See future cycles before they arrive.</h2>
4287          <p>
4288            Career shifts. Relationship changes. Financial windows.
4289            Major turning points. Reinvention periods.
4290          </p>
4291          <p>
4292            Astromeg Oracle helps you understand when life is asking you to move,
4293            wait, prepare, release, rebuild, or begin again.
4294          </p>
4295          <a class="btn btn-primary" href="#offer">Start Reading Your Timing</a>
4296        </div>
4297      </div>
4298    </section>
4299
4300    <section class="section" id="difference">
4301      <div class="container difference-premium-layout">
4302        <div class="difference-kicker">What Makes Astromeg Different</div>
4303        <div class="difference-title">Read below and discover why Astromeg Oracle is different...</div>
4304        <p class="difference-training-note">
4305          Astromeg Oracle was trained for 1.5 years by a professional astrologer
4306          and transformational life guide, Margaret M. Sanchez. <strong>That means the guidance is designed to be practical, personal, and usable in real life.</strong>
4307        </p>
4308        <h2>Clear guidance. Easier action steps.</h2>
4309        <p>
4310          The purpose is not to make you passive.
4311          The purpose is to help you move with more awareness.
4312        </p>
4313        <p>
4314          Astrology becomes most powerful when it helps you understand the season you are in,
4315          the pattern you are repeating, and the opportunity that is actually available.
4316        </p>
4317
4318        <ul class="check-list">
4319          <li><span class="check-list-text">Understand the real theme behind the situation</span></li>
4320          <li><span class="check-list-text">Identify what timing supports or delays</span></li>
4321          <li><span class="check-list-text">Clarify what pattern is repeating</span></li>
4322          <li><span class="check-list-text">Turn insight into a wiser next move</span></li>
4323        </ul>
4324      </div>
4325    </section>
4326
4327    <section class="section section-tight">
4328      <div class="container grid grid-2">
4329        <div class="split-copy">
4330          <div class="eyebrow">Actionable Astrology</div>
4331          <h2>Guidance you can actually use.</h2>
4332          <p>
4333            The Oracle can explain the meaning of a cycle, but it can also help you ask:
4334            What is the lesson? What is the timing? What should I prepare for?
4335            What should I stop forcing?
4336          </p>
4337          <p>
4338            This is where astrology becomes practical — especially for decisions around love,
4339            career, money, healing, and reinvention.
4340          </p>
4341        </div>
4342
4343        <div class="visual-frame small" style="background-image: var(--img-calendar);">
4344        </div>
4345      </div>
4346    </section>
4347
4348    <section class="section dark-band" id="methods">
4349      <div class="container">
4350        <div class="section-head">
4351          <div class="eyebrow">Astromeg Method</div>
4352          <h2>No single chart tells the whole story.</h2>
4353          <p>
4354            Most astrology tools rely on one layer of interpretation.
4355            Astromeg Oracle is designed for layered pattern recognition —
4356            comparing multiple systems to reveal the same truth from different angles.
4357          </p>
4358        </div>
4359
4360        <div class="visual-frame small" style="background-image: var(--img-layered); margin-bottom: 26px;">
4361        </div>
4362
4363        <div class="grid grid-3">
4364          <article class="card method-card">
4365            <span class="tag">Purpose</span>
4366            <h3>Natal + Draconic + Soul Purpose</h3>
4367            <p>Reveals earthly personality, soul identity, karmic mission, and life direction.</p>
4368          </article>
4369
4370          <article class="card method-card">
4371            <span class="tag">Karma</span>
4372            <h3>Natal + North Node + Past-Life Themes</h3>
4373            <p>Identifies karmic patterns, unfinished lessons, ancestral themes, and destiny trajectory.</p>
4374          </article>
4375
4376          <article class="card method-card">
4377            <span class="tag">Forecasting</span>
4378            <h3>Solar Return + Progressions + Solar Arc</h3>
4379            <p>Reads future themes, life changes, breakthroughs, and major turning points.</p>
4380          </article>
4381
4382          <article class="card method-card">
4383            <span class="tag">Wealth</span>
4384            <h3>H5 + H11 + Wealth Architecture</h3>
4385            <p>Explores money pathways, monetization gifts, audience destiny, and influence.</p>
4386          </article>
4387
4388          <article class="card method-card">
4389            <span class="tag">Career</span>
4390            <h3>H8 + H10 + Career Destiny</h3>
4391            <p>Analyzes ambition, authority, public reputation, leadership, and legacy.</p>
4392          </article>
4393
4394          <article class="card method-card">
4395            <span class="tag">Healing</span>
4396            <h3>Chiron + Lilith + Trauma Signatures</h3>
4397            <p>Reveals wounds, rejection themes, shame patterns, emotional pain, and healing pathways.</p>
4398          </article>
4399        </div>
4400
4401        <p class="method-tail">
4402          And many more readings tailored to your specific needs.
4403        </p>
4404      </div>
4405    </section>
4406
4407    <section class="section feature-banner teacher-band" id="teacher-mode">
4408      <div class="container teacher-layout">
4409        <div class="text-panel">
4410          <div class="eyebrow">Teacher Mode</div>
4411          <h2>Your Oracle is also your astrology teacher.</h2>
4412          <p>
4413            Astromeg Oracle does not only provide readings.
4414            It can teach you astrology through lessons, examples, and explanations
4415            using Astromeg’s method.
4416          </p>
4417          <p>
4418            Ask it to explain planets, houses, aspects, transits, synastry, Solar Returns,
4419            progressions, harmonics, Draconic Astrology, wealth astrology, fixed stars,
4420            Arabic Parts, and more.
4421          </p>
4422          <a class="btn btn-primary" href="#offer">Start Learning With The Oracle</a>
4423        </div>
4424
4425        <figure class="teacher-poster">
4426          <img src="assets/landing-sequence/08-oracle-teacher-mode.jpg" alt="Astromeg Oracle teacher mode, on-demand astrology lessons" loading="lazy">
4427        </figure>
4428      </div>
4429    </section>
4430
4431    <section class="section" id="trust">
4432      <div class="container">
4433        <div class="section-head">
4434          <div class="eyebrow">Trust + Precision</div>
4435          <h2>Built on experience. Supported by calculation accuracy.</h2>
4436          <p>
4437            Every meaningful astrology reading begins with accurate chart data —
4438            then becomes valuable through interpretation, synthesis, and pattern recognition.
4439          </p>
4440        </div>
4441
4442        <div class="grid grid-3">
4443          <article class="card">
4444            <div class="icon">◎</div>
4445            <h3>Accurate Chart Foundations</h3>
4446            <p>Ephemeris-based chart calculations support the natal foundation and timing analysis.</p>
4447          </article>
4448
4449          <article class="card">
4450            <div class="icon">✦</div>
4451            <h3>Layered Interpretation</h3>
4452            <p>Astromeg Oracle is designed to synthesize patterns across multiple astrology methods.</p>
4453          </article>
4454
4455          <article class="card">
4456            <div class="icon">★</div>
4457            <h3>Astromeg Trusted for Decades</h3>
4458            <p>The Oracle is new, but the method comes from Astromeg’s long-standing astrology work, guidance, teaching, and word of mouth.</p>
4459          </article>
4460        </div>
4461      </div>
4462    </section>
4463
4464    <section class="section dark-band" id="reviews">
4465      <div class="container reviews-layout">
4466        <aside class="rating-card">
4467          <div class="eyebrow">Google Reviews</div>
4468          <div class="google-trust-badge">
4469            <strong>Trusted by Many</strong>
4470            <span>Public reviews available for verification.</span>
4471          </div>
4472          <div class="stars">★★★★★</div>
4473          <p>Public Google reviews and client experiences from Astromeg’s private astrology work.</p>
4474          <div class="review-actions">
4475            <a class="btn btn-secondary" href="https://www.google.com/maps/place/Astromeg/@12.7335786,121.8959891,5z/data=!4m8!3m7!1s0x3397b7abe78ab043:0x9d6ddf5375ebabf1!8m2!3d12.7335786!4d121.8959892!9m1!1b1!16s%2Fg%2F11yx_zfx9h?entry=ttu&amp;g_ep=EgoyMDI2MDYwMy4xIKXMDSoASAFQAw%3D%3D" target="_blank" rel="noopener" aria-label="Read Astromeg Google reviews"><span>Google Reviews</span></a>
4476            <a class="btn btn-secondary" href="https://www.astromeg.me/about" target="_blank" rel="noopener" aria-label="Read more Astromeg reviews"><span>Read More Reviews</span></a>
4477            <a class="btn btn-secondary" href="https://www.facebook.com/AstromegOfficial" target="_blank" rel="noopener" aria-label="Read Astromeg Facebook reviews"><span>Facebook Reviews</span></a>
4478          </div>
4479        </aside>
4480
4481        <div class="grid grid-2">
4482          <article class="card review-card google-review-card featured">
4483            <div class="reviewer-row">
4484              <div>
4485                <span class="reviewer-name">Ana dela Cruz</span>
4486                <span class="review-meta">Google Review</span>
4487              </div>
4488            </div>
4489            <div class="review-label">Career + Personal Growth</div>
4490            <div class="stars">★★★★★</div>
4491            <blockquote>
4492              “Ms. Meg is more than an astrologer — she is a true light worker. Her guidance has helped me navigate career decisions, leadership challenges, personal growth, and relationships with greater clarity, confidence, and intention.”
4493            </blockquote>
4494            <cite>Ana dela Cruz</cite>
4495            <span class="review-source">Excerpt from Google Review</span>
4496          </article>
4497
4498          <article class="card review-card google-review-card featured">
4499            <div class="reviewer-row">
4500              <div>
4501                <span class="reviewer-name">Sarah Jane Lee</span>
4502                <span class="review-meta">Google Review</span>
4503              </div>
4504            </div>
4505            <div class="review-label">Oracle + Daily Clarity</div>
4506            <div class="stars">★★★★★</div>
4507            <blockquote>
4508              “Now I have access to her wisdom daily, non-stop. Oracle has become my go-to for quick energetic checks, client strategy, and real-time clarity between deals or sessions.”
4509            </blockquote>
4510            <cite>Sarah Jane Lee</cite>
4511            <span class="review-source">Excerpt from Google Review</span>
4512          </article>
4513
4514          <article class="card review-card google-review-card">
4515            <div class="reviewer-row">
4516              <div>
4517                <span class="reviewer-name">Aglaiah Star</span>
4518                <span class="review-meta">Google Review</span>
4519              </div>
4520            </div>
4521            <div class="review-label">Chart + Soul Path</div>
4522            <div class="stars">★★★★★</div>
4523            <blockquote>
4524              “She’s helped me understand my chart, my life and soul path, and how to redirect when presented with a fork on the road.”
4525            </blockquote>
4526            <cite>Aglaiah Star</cite>
4527            <span class="review-source">Excerpt from Google Review</span>
4528          </article>
4529
4530          <article class="card review-card google-review-card">
4531            <div class="reviewer-row">
4532              <div>
4533                <span class="reviewer-name">Li Jen Tan</span>
4534                <span class="review-meta">Google Review</span>
4535              </div>
4536            </div>
4537            <div class="review-label">Mentorship + Transformation</div>
4538            <div class="stars">★★★★★</div>
4539            <blockquote>
4540              “If you’re looking for a professional and legitimate astrologer, I highly recommend Ms. Meg. She’s not just an astrologer — she’s a true mentor who has profou
4540ndly impacted my life.”
4541            </blockquote>
4542            <cite>Li Jen Tan</cite>
4543            <span class="review-source">Excerpt from Google Review</span>
4544          </article>
4545
4546          <article class="card review-card google-review-card">
4547            <div class="reviewer-row">
4548              <div>
4549                <span class="reviewer-name">Mischa</span>
4550                <span class="review-meta">Google Review</span>
4551              </div>
4552            </div>
4553            <div class="review-label">Timely + Realistic Guidance</div>
4554            <div class="stars">★★★★★</div>
4555            <blockquote>
4556              “With the Oracle, it has helped me tremendously! Ms. Meg’s Oracle became my guide, my mentor, and cheerleader in this season in my life, and beyond.”
4557            </blockquote>
4558            <cite>Mischa</cite>
4559            <span class="review-source">Excerpt from Google Review</span>
4560          </article>
4561
4562          <article class="card review-card google-review-card">
4563            <div class="reviewer-row">
4564              <div>
4565                <span class="reviewer-name">Gen-zel D. Habab</span>
4566                <span class="review-meta">Google Review</span>
4567              </div>
4568            </div>
4569            <div class="review-label">Planning + Future Timing</div>
4570            <div class="stars">★★★★★</div>
4571            <blockquote>
4572              “Her energy is magnetic. Now, she has her own oracle app that I’ve been using... and it has already helped me in planning my life in the present and the future.”
4573            </blockquote>
4574            <cite>Gen-zel D. Habab</cite>
4575            <span class="review-source">Excerpt from Google Review</span>
4576          </article>
4577        </div>
4578      </div>
4579    </section>
4580
4581    <section class="section founder-story" id="meet">
4582      <div class="container grid grid-2">
4583        <div class="visual-frame portrait-frame">
4584          <img
4585            src="assets/landing-sequence/09-meet-astromeg-signed.png"
4586            alt="Astromeg founder portrait with Spread the Love signature"
4587            loading="lazy"
4588          >
4589        </div>
4590
4591        <div class="split-copy">
4592          <div class="eyebrow">Meet Astromeg</div>
4593          <h2>This is not a random AI tool. It comes from a living method.</h2>
4594          <p>
4595            Astromeg Oracle is new, but Astromeg’s work is trusted for decades through astrology guidance,
4596            teaching, readings, webinars, coaching, transformational work, and word-of-mouth referrals.
4597          </p>
4598          <p>
4599            Astromeg Oracle was created to extend that work — making deeper astrology support available
4600            beyond limited appointment slots and into the moments when people need clarity most.
4601          </p>
4602          <p>
4603            The Oracle is not here to replace the astrologer.
4604            It carries the method forward.
4605          </p>
4606        </div>
4607      </div>
4608    </section>
4609
4610    <section class="section" id="comparison">
4611      <div class="container">
4612        <div class="section-head">
4613          <div class="eyebrow">Different By Design</div>
4614          <h2>
4615            THE MOST SOPHISTICATED ASTROLOGY INTELLIGENCE SYSTEM
4616          </h2>
4617          <p>
4618            Most astrology apps give you preset horoscopes, passive reports, or generic transit summaries.
4619            Astromeg Oracle lets you ask real questions, receive advanced chart-based answers, get timing guidance,
4620            create action plans, study astrology, join live sessions, and turn your readings into printable PDFs or flyers.
4621          </p>
4622        </div>
4623
4624        <div class="comparison-wrap">
4625          <div class="comparison-table" aria-label="Astromeg Oracle advanced astrology intelligence capabilities">
4626            <div class="comparison-row">
4627              <div class="comparison-cell astromeg-cell">
4628                <p>Ask exact questions about your life, chart, timing, relationships, money, purpose, karma, and healing.</p>
4629              </div>
4630            </div>
4631            <div class="comparison-row">
4632              <div class="comparison-cell astromeg-cell">
4633                <p>Reads natal charts, transits, synastry, solar returns, Draconic, Harmonic, Firdaria, Davison, Secondary Progressions, Solar Arc Directions, horary, and electional charts.</p>
4634              </div>
4635            </div>
4636            <div class="comparison-row">
4637              <div class="comparison-cell astromeg-cell">
4638                <p>Personalized action plans for the day, week, month, or year with specific dates, transits, what to do, what to avoid, and when to launch.</p>
4639              </div>
4640            </div>
4641            <div class="comparison-row">
4642              <div class="comparison-cell astromeg-cell">
4643                <p>Interactive guidance you can keep asking follow-up questions until the answer makes sense.</p>
4644              </div>
4645            </div>
4646            <div class="comparison-row">
4647              <div class="comparison-cell astromeg-cell">
4648                <p>Readings, timing, astrology courses, quizzes, meditations, hypnosis, live sessions, and community in one place.</p>
4649              </div>
4650            </div>
4651            <div class="comparison-row">
4652              <div class="comparison-cell astromeg-cell">
4653                <p>Create PDF readings, flyers, and printable guidance from your sessions.</p>
4654              </div>
4655            </div>
4656          </div>
4657
4658          <div class="ask-panel" aria-label="Questions you can ask Astromeg Oracle">
4659            <h3>Use It To Ask</h3>
4660            <div class="ask-prompt-grid">
4661              <div class="ask-prompt-pill">When should I launch?</div>
4662              <div class="ask-prompt-pill">What is happening in my money and career?</div>
4663              <div class="ask-prompt-pill">What transits are affecting me now?</div>
4664              <div class="ask-prompt-pill">What is my relationship pattern?</div>
4665              <div class="ask-prompt-pill">
4665What karma or past-life theme is showing?</div>
4666              <div class="ask-prompt-pill">What should I do this week?</div>
4667              <div class="ask-prompt-pill">What dates should I avoid?</div>
4668              <div class="ask-prompt-pill">What is the best electional timing for my plan?</div>
4669            </div>
4670          </div>
4671        </div>
4672      </div>
4673    </section>
4674
4675    <section class="section dark-band access-flow" id="access-flow">
4676      <div class="container">
4677        <div class="section-head">
4678          <div class="eyebrow">Access Flow</div>
4679          <h2>Pay once. Receive your access code. Enter the Oracle.</h2>
4680          <p>
4681            Your purchase opens a 90-day conversational astrology experience.
4682            After checkout, your access code is sent by email automatically.
4683            This is a fixed access period, not an auto-renewing or auto-deducting subscription.
4684          </p>
4685        </div>
4686
4687        <div class="grid grid-4 steps">
4688          <article class="card step-card">
4689            <div class="step-number"></div>
4690            <h3>Enter your details</h3>
4691            <p>Add your name and email so your access can be created and sent to you.</p>
4692          </article>
4693
4694          <article class="card step-card">
4695            <div class="step-number"></div>
4696            <h3>Complete checkout</h3>
4697            <p>Pay through PayPal secured checkout using all major credit cards, Apple Pay, or PayPal.</p>
4698          </article>
4699
4700          <article class="card step-card">
4701            <div class="step-number"></div>
4702            <h3>Receive your code</h3>
4703            <p>Your Oracle access key is emailed to you with the link to begin.</p>
4704          </article>
4705
4706          <article class="card step-card">
4707            <div class="step-number"></div>
4708            <h3>Start the conversation</h3>
4709            <p>Enter your code inside Astromeg Oracle and ask your first question.</p>
4710          </article>
4711        </div>
4712      </div>
4713    </section>
4714
4715    <section class="section" id="faq">
4716      <div class="container">
4717        <div class="section-head">
4718          <div class="eyebrow">FAQ</div>
4719          <h2>Questions before you enter?</h2>
4720        </div>
4721
4722        <div class="faq">
4723          <details open>
4724            <summary>What is Astromeg Oracle?</summary>
4725            <p>
4726              Astromeg Oracle is a private astrology intelligence built around
4727              Astromeg’s methodology, layered chart reading, timing work, and conversational guidance.
4728            </p>
4729          </details>
4730
4731          <details>
4732            <summary>Do I need astrology knowledge?</summary>
4733            <p>
4734              No. Beginners can ask simple questions in plain language.
4735              Advanced students can explore deeper astrology techniques and interpretations.
4736            </p>
4737          </details>
4738
4739          <details>
4740            <summary>What happens after I enter?</summary>
4741            <p>
4742              You enter your access code inside Astromeg Oracle, share your birth details,
4743              and begin a private astrology conversation you can return to during your access period.
4744            </p>
4745          </details>
4746
4747          <details>
4748            <summary>How do I receive my access code?</summary>
4749            <p>
4750              After checkout, your Oracle access key is sent to the email address you enter.
4751              Use that code inside Astromeg Oracle to begin your 90-day access period.
4752            </p>
4753          </details>
4754
4755          <details>
4756            <summary>Will I be charged again automatically?</summary>
4757            <p>
4758              No. Astromeg Oracle access is a fixed access period, not an auto-renewing
4759              or auto-deducting subscription. When your access expires, it expires without
4760              charging your account again.
4761            </p>
4762          </details>
4763
4764          <details>
4765            <summary>How Is My Privacy Protected?</summary>
4766            <p>
4767              Your details are used to create your access and support your Oracle experience.
4768              Payments are handled through secure checkout providers, and card details are not
4769              stored on this landing page. You can review the full privacy policy at the bottom
4770              of this page.
4771            </p>
4772          </details>
4773
4774          <details>
4775            <summary>Can it teach astrology?</summary>
4776            <p>
4777              Yes. Teacher Mode allows you to request lessons, explanations, walkthroughs,
4778              and deeper learning at your own pace.
4779            </p>
4780          </details>
4781
4782          <details>
4783            <summary>What can I ask about?</summary>
4784            <p>
4785              You can ask about relationships, timing, career, money, wealth, purpose,
4786              healing, family patterns, compatibility, future cycles, and astrology learning.
4787            </p>
4788          </details>
4789
4790          <details>
4791            <summary>What makes it different from astrology apps?</summary>
4792            <p>
4793              Astromeg Oracle is designed around layered analysis, follow-up questions,
4794              teaching, timing, and Astromeg’s private methodology.
4795            </p>
4796          </details>
4797        </div>
4798      </div>
4799    </section>
4800
4801    <section class="section final-cta final-band" id="answer-the-call">
4802      <div class="container-narrow">
4803        <div class="eyebrow">IT'S HIGH TIME</div>
4804        <h2>ANSWER THE CALL NOW</h2>
4805        <div class="astromeg-note">
4806          <img class="astromeg-note-image" src="assets/landing-sequence/a-note-from-astromeg.png" alt="A Note From Astromeg">
4807        </div>
4808        <div class="cta-row" style="justify-content:center;">
4809          <a class="btn btn-primary" href="#offer">Enter The Oracle</a>
4810          <a class="btn btn-secondary" href="#offer">View Payment Options</a>
4811        </div>
4812      </div>
4813    </section>
4814
4815    <section class="section offer-band" id="offer">
4816      <div class="container">
4817        <div class="offer-card">
4818          <div class="eyebrow">Enter The Oracle</div>
4819          <h2>Begin your private astrology intelligence experience.</h2>
4820          <p>
4821            Get access to Astromeg Oracle for personalized astrology guidance,
4822            timing analysis, learning support, and unlimited chart exploration.
4823          </p>
4824          <p>
4825            Step inside for 90 days of private guidance. Ask, clarify, follow up,
4826            study your cycles, and return whenever life begins speaking in symbols again.
4827          </p>
4828
4829          <div class="price"><span class="price-amount" data-price-usd>$111</span><span class="price-period">/90days</span></div>
4830          <p class="micro"><span data-price-usd-breakdown>$111 for 90 days</span></p>
4831          <p class="micro price-equivalent">Private Oracle access. No subscription. Fixed period.</p>
4832
4833          <div class="affiliate-discount-notice" data-affiliate-discount hidden aria-live="polite">
4834            <strong>Affiliate Referral Discount: <span data-discount-percent>10%</span> OFF</strong>
4835            <span class="affiliate-original-price" data-price-usd-original>$111</span>
4836          </div>
4837
4838          <div class="included">
4839            <div>Astromeg Oracle Access</div>
4840            <div>Unlimited Astrology Questions</div>
4841            <div>Relationship Guidance</div>
4842            <div>Predictive Timing</div>
4843            <div>Wealth + Career Analysis</div>
4844            <div>Teacher Mode + Astrology Lessons</div>
4845            <div>Advanced Reading Systems</div>
4846            <div>24/7 Availability</div>
4847          </div>
4848
4849          <div class="cta-placeholder">
4850            <div class="affiliate-referral-entry affiliate-referral-entry--offer" data-referral-entry>
4851              <label for="offerReferralCode">Affiliate Code / Referred By</label>
4852              <div class="affiliate-referral-row">
4853                <input class="modal-field" type="text" id="offerReferralCode" data-referral-input autocomplete="off" maxlength="100" placeholder="Enter affiliate code">
4854                <button class="affiliate-apply-button" type="button" data-apply-referral data-apply-label="Apply Affiliate Code">Apply Affiliate Code</button>
4855              </div>
4856              <p class="affiliate-referral-status" data-referral-status aria-live="polite"></p>
4857            </div>
4858            <div class="payment-actions">
4859              <a class="btn btn-primary" href="#" data-open-modal aria-label="Enter Astromeg Oracle">Pay with PayPal / Card</a>
4860              <a class="btn btn-gcash" href="#" data-open-gcash aria-label="Pay with GCash QR">Pay with GCash QR</a>
4861            </div>
4862            <p class="payment-access-note">PayPal and card payments receive instant access after checkout. GCash QR payments are reviewed manually before your access code and Oracle link are sent.</p>
4863            <div class="payment-strip" aria-label="Accepted payment methods">
4864              <span class="payment-feature"><span class="payment-feature-label">Major Credit Cards</span></span>
4865              <span>Visa</span>
4866              <span>Mastercard</span>
4867              <span>American Express</span>
4868              <span>Discover</span>
4869              <span>JCB</span>
4870              <span>Diners Club</span>
4871              <span class="payment-feature"><span class="payment-feature-label">Apple Pay</span></span>
4872              <span class="payment-feature"><span class="payment-feature-label">PayPal Secured Checkout</span></span>
4873            </div>
4874            <p class="secure-checkout-note">All major credit cards and Apple Pay are accepted through PayPal secured checkout. Fixed access period only. No automatic renewal. <a class='policy-inline' href='/refund-policy'>Refund Policy</a></p>
4875          </div>
4876        </div>
4877      </div>
4878    </section>
4879
4880    <footer class="footer" id="footer">
4881      <p>Astromeg Oracle • Advanced Astrology Intelligence</p>
4882      <div class="footer-links">
4883        <a href="#what-it-is">What It Is</a>
4884        <a href="#methods">Method</a>
4885        <a href="#reviews">Reviews</a>
4886        <a href="https://facebook.com/AstromegOfficial" target="_blank" rel="noopener">Facebook</a>
4887        <a href="/privacy-policy">Your Privacy Is Important To Us</a>
4888        <a href='/refund-policy'>Refund Policy</a>
4889        <a href="#offer">Enter Oracle</a>
4890      </div>
4891    </footer>
4892  </div>
4893
4894  <div class="modal-overlay" id="oracleModal" aria-hidden="true">
4895    <div class="modal-box" role="dialog" aria-modal="true" aria-labelledby="oracleModalTitle">
4896      <button class="modal-close" type="button" onclick="closeModal()" aria-label="Close">x</button>
4897      <div class="modal-title" id="oracleModalTitle">Claim Your Oracle Access</div>
4898      <span class="modal-divider"></span>
4899      <p class="modal-sub">90 Days · Unlimited Readings · <span data-price-usd>$111</span> USD <span class="modal-price-note">One-time payment</span></p>
4900
4901      <input class="modal-field" type="text" id="fname" placeholder="Payment Name" autocomplete="name" required>
4902      <input class="modal-field" type="email" id="femail" placeholder="Email for Your Oracle Access Code" autocomplete="email" required>
4903
4904      <div class="affiliate-referral-entry" data-referral-entry>
4905        <label for="paypalReferralCode">Affiliate Code / Referred By</label>
4906        <div class="affiliate-referral-row">
4907          <input class="modal-field" type="text" id="paypalReferralCode" data-referral-input autocomplete="off" maxlength="100" placeholder="Optional affiliate code">
4908          <button class="affiliate-apply-button" type="button" data-apply-referral>Apply</button>
4909        </div>
4910        <p class="affiliate-referral-status" data-referral-status aria-live="polite"></p>
4911      </div>
4912
4913      <div class="affiliate-discount-notice" data-affiliate-discount hidden>
4914        <strong><span data-discount-percent>10%</span> affiliate discount applied</strong>
4915        <span class="affiliate-original-price" data-price-usd-original>$111</span>
4916      </div>
4917
4918      <button class="modal-submit" id="submitBtn" type="button" onclick="submitForm()">
4919        Continue to Payment
4920      </button>
4921      <ul class="modal-note">
4922        <li>Use the same full name you will use at checkout.</li>
4923        <li>PayPal uses your PayPal account name; card or Apple Pay uses the cardholder name.</li>
4924        <li>Your access code will be sent to this email after payment is confirmed. <a class='policy-inline' href='/refund-policy'>Refund Policy</a></li>
4925      </ul>
4926      <div class="payment-methods" aria-label="Accepted payment methods">
4927        <span class="payment-feature">Major Credit Cards</span>
4928        <span>Visa</span>
4929        <span>Mastercard</span>
4930        <span>American Express</span>
4931        <span>Discover</span>
4932        <span>JCB</span>
4933        <span>Diners Club</span>
4934        <span class="payment-feature">Apple Pay</span>
4935        <span class="payment-feature">PayPal Checkout</span>
4936      </div>
4937    </div>
4938  </div>
4939
4940  <div class="modal-overlay" id="gcashModal" aria-hidden="true">
4941    <div class="modal-box gcash-modal-box" role="dialog" aria-modal="true" aria-labelledby="gcashModalTitle">
4942      <button class="modal-close" type="button" onclick="closeGcashModal()" aria-label="Close">x</button>
4943      <div class="modal-title" id="gcashModalTitle">GCash QR Payment</div>
4944      <span class="modal-divider"></span>
4945      <p class="modal-sub">Philippines Access · <span data-price-php>P5,800</span> PHP</p>
4946
4947      <div class="affiliate-referral-entry" data-referral-entry>
4948        <label for="gcashReferralInput">Affiliate Code / Referred By</label>
4949        <div class="affiliate-referral-row">
4950          <input class="modal-field" type="text" id="gcashReferralInput" data-referral-input autocomplete="off" maxlength="100" placeholder="Optional affiliate code">
4951          <button class="affiliate-apply-button" type="button" data-apply-referral>Apply</button>
4952        </div>
4953        <p class="affiliate-referral-status" data-referral-status aria-live="polite"></p>
4954      </div>
4955
4956      <div class="affiliate-discount-notice" data-affiliate-discount hidden>
4957        <strong><span data-discount-percent>10%</span> affiliate discount applied</strong>
4958        <span class="affiliate-original-price" data-price-php-original>P5,800</span>
4959      </div>
4960
4961      <div class="gcash-qr-wrap">
4962        <img class="gcash-qr" src="assets/landing-sequence/gcash-qr-astromeg.jpeg" alt="Astromeg GCash QR code for Oracle payment">
4963        <div class="gcash-price">Pay <span data-price-php>P5,800</span> to Astromeg</div>
4964      </div>
4965
4966      <ul class="modal-note">
4967        <li>Scan the QR code using GCash and complete payment for <span data-price-php>P5,800</span>.</li>
4968        <li>Take a screenshot of your successful GCash receipt.</li>
4969        <li>Upload the receipt below. Your access code is sent after payment confirmation.</li>
4970      </ul>
4971
4972      <form class="receipt-form" id="gcashReceiptForm" name="gcash-receipt" method="POST" action="/gcash-receipt-submitted.html" data-netlify="true" enctype="multipart/form-data">
4973        <input type="hidden" name="form-name" value="gcash-receipt">
4974        <input type="hidden" name="subject" value="New GCash receipt for Astromeg Oracle">
4975        <input type="hidden" name="product" value="Astromeg Oracle AI - 90-Day Access">
4976        <input type="hidden" name="payment_method" value="GCash QR">
4977        <input type="hidden" name="amount" value="5800">
4978        <input type="hidden" name="currency" value="PHP">
4979        <input type="hidden" name="order_id" value="">
4980        <input type="hidden" name="referral_code" value="">
4981        <input type="hidden" name="affiliate_id" value="">
4982        <input type="hidden" name="attribution_source" value="none">
4983        <input type="hidden" name="discount_percent" value="0">
4984        <input type="hidden" name="affiliate_status" value="Not Referred">
4985        <input type="hidden" name="status" value="Pending Review">
4986        <input type="hidden" name="source" value="Astromeg Oracle Netlify GCash form">
4987
4988        <label>
4989          Payment Name
4990          <input class="modal-field" type="text" name="name" autocomplete="name" required>
4991        </label>
4992
4993        <label>
4994          Email for Your Oracle Access Code
4995          <input class="modal-field" type="email" name="email" autocomplete="email" required>
4996        </label>
4997
4998        <label>
4999          Upload GCash Receipt
5000          <input class="modal-file" type="file" name="receipt" accept="image/*,.pdf" required>
5001        </label>
5002
5003        <button class="modal-submit receipt-submit" type="submit">Submit Receipt for Confirmation</button>
5004      </form>
5005
5006      <p class="gcash-confirm-note">GCash payments are manually verified. Please use the same name shown on your receipt so your access can be activated quickly.</p>
5007    </div>
5008  </div>
5009
5010  
5010<script src="assets/affiliate-checkout.js"></script>
5010
5011  
5011<script>
5012    document.querySelectorAll('a[href^="#"]').forEach(function(anchor) {
5013      anchor.addEventListener("click", function(event) {
5014        if (anchor.hasAttribute("data-open-modal")) {
5015          event.preventDefault();
5016          openModal();
5017          return;
5018        }
5019
5020        if (anchor.hasAttribute("data-open-gcash")) {
5021          event.preventDefault();
5022          openGcashModal();
5023          return;
5024        }
5025
5026        const targetId = anchor.getAttribute("href");
5027        if (!targetId || targetId === "#") return;
5028
5029        const target = document.querySelector(targetId);
5030        if (!target) return;
5031
5032        event.preventDefault();
5033        const navOffset = document.querySelector(".nav")?.offsetHeight || 0;
5034        const targetTop = target.getBoundingClientRect().top + window.pageYOffset - navOffset - 18;
5035        window.scrollTo({ top: Math.max(targetTop, 0), behavior: "smooth" });
5036      });
5037    });
5038
5039    document.querySelectorAll("[data-open-modal]").forEach(function(button) {
5040      button.addEventListener("click", function(event) {
5041        event.preventDefault();
5042        openModal();
5043      });
5044    });
5045
5046    document.querySelectorAll("[data-open-gcash]").forEach(function(button) {
5047      button.addEventListener("click", function(event) {
5048        event.preventDefault();
5049        openGcashModal();
5050      });
5051    });
5052
5053    function openModal() {
5054      const modal = document.getElementById("oracleModal");
5055      modal.classList.add("open");
5056      modal.setAttribute("aria-hidden", "false");
5057      document.body.style.overflow = "hidden";
5058      setTimeout(function() {
5059        const nameField = document.getElementById("fname");
5060        if (nameField) nameField.focus();
5061      }, 50);
5062    }
5063
5064    function closeModal() {
5065      const modal = document.getElementById("oracleModal");
5066      modal.classList.remove("open");
5067      modal.setAttribute("aria-hidden", "true");
5068      document.body.style.overflow = "";
5069    }
5070
5071    function openGcashModal() {
5072      const modal = document.getElementById("gcashModal");
5073      modal.classList.add("open");
5074      modal.setAttribute("aria-hidden", "false");
5075      document.body.style.overflow = "hidden";
5076      setTimeout(function() {
5077        const nameField = modal.querySelector('input[name="name"]');
5078        if (nameField) nameField.focus();
5079      }, 50);
5080    }
5081
5082    function closeGcashModal() {
5083      const modal = document.getElementById("gcashModal");
5084      modal.classList.remove("open");
5085      modal.setAttribute("aria-hidden", "true");
5086      document.body.style.overflow = "";
5087    }
5088
5089    const gcashReceiptForm = document.getElementById("gcashReceiptForm");
5090    if (gcashReceiptForm) {
5091      gcashReceiptForm.addEventListener("submit", submitGcashReceipt);
5092    }
5093
5094    async function submitGcashReceipt(event) {
5095      event.preventDefault();
5096
5097      const form = event.currentTarget;
5098      const submitButton = form.querySelector('button[type="submit"]');
5099      const emailField = form.querySelector('input[name="email"]');
5100      const receiptField = form.querySelector('input[name="receipt"]');
5101
5102      if (emailField && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(emailField.value.trim())) {
5103        alert("Please enter a valid email address.");
5104        return;
5105      }
5106
5107      if (!receiptField || !receiptField.files || receiptField.files.length === 0) {
5108        alert("Please upload your GCash receipt.");
5109        return;
5110      }
5111
5112      try {
5113        await window.AstromegAffiliateCheckout.prepareGcashSubmission(form);
5114      } catch (error) {
5115        alert(error.message || "Please check the affiliate code before submitting your receipt.");
5116        return;
5117      }
5118
5119      const formData = new FormData(form);
5120      formData.set("email", (formData.get("email") || "").toString().trim().toLowerCase());
5121      formData.set("submitted_at", new Date().toISOString());
5122
5123      submitButton.disabled = true;
5124      submitButton.textContent = "Submitting receipt...";
5125
5126      try {
5127        await fetch("https://hook.us2.make.com/2s61w0o7jikyqteny5e53zelwk46lj56", {
5128          method: "POST",
5129          mode: "no-cors",
5130          body: formData
5131        });
5132
5133        window.location.href = "/gcash-receipt-submitted.html";
5134      } catch (error) {
5135        console.error("GCash receipt submission failed", error);
5136        submitButton.disabled = false;
5137        submitButton.textContent = "Submit Receipt for Confirmation";
5138        alert("Could not submit your receipt. Please try again.");
5139      }
5140    }
5141
5142    async function submitForm() {
5143      const name = document.getElementById("fname").value.trim();
5144      const email = document.getElementById("femail").value.trim();
5145      const btn = document.getElementById("submitBtn");
5146
5147      if (!name || !email) {
5148        alert("Please enter your name and email to continue.");
5149        return;
5150      }
5151
5152      if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
5153        alert("Please enter a valid email address.");
5154        return;
5155      }
5156
5157      btn.disabled = true;
5158      btn.textContent = "Sending you to PayPal...";
5159
5160      try {
5161        await window.AstromegAffiliateCheckout.startPaypalCheckout({
5162          name: name,
5163          email: email
5164        });
5165      } catch (error) {
5166        console.error("PayPal checkout could not start", { message: error.message });
5167        btn.disabled = false;
5168        btn.textContent = "Continue to Payment";
5169        alert(error.message || "Checkout is temporarily unavailable. No payment was taken.");
5170      }
5171    }
5172
5173    document.getElementById("oracleModal").addEventListener("click", function(event) {
5174      if (event.target === this) closeModal();
5175    });
5176
5177    document.getElementById("gcashModal").addEventListener("click", function(event) {
5178      if (event.target === this) closeGcashModal();
5179    });
5180
5181    document.addEventListener("keydown", function(event) {
5182      if (event.key === "Escape") {
5183        closeModal();
5184        closeGcashModal();
5185      }
5186    });
5187
5188    const pageBackgroundVideo = document.querySelector("[data-page-bg-video]");
5189    if (pageBackgroundVideo) {
5190      const playPageBackgroundVideo = () => {
5191        pageBackgroundVideo.muted = true;
5192        pageBackgroundVideo.loop = true;
5193        const playPromise = pageBackgroundVideo.play();
5194        if (playPromise && typeof playPromise.catch === "function") {
5195          playPromise.catch(() => {});
5196        }
5197      };
5198
5199      playPageBackgroundVideo();
5200      pageBackgroundVideo.addEventListener("loadeddata", playPageBackgroundVideo, { once: true });
5201      pageBackgroundVideo.addEventListener("canplay", playPageBackgroundVideo, { once: true });
5202      pageBackgroundVideo.addEventListener("ended", () => {
5203        pageBackgroundVideo.currentTime = 0;
5204        playPageBackgroundVideo();
5205      });
5206      document.addEventListener("pointerdown", playPageBackgroundVideo, { once: true });
5207    }
5208  </script>
5208
5209
5210  
5210<script src="assets/gpt-live-enhancements.js?v=20260824-4"></script>
5210
5211
5212
5213<script async id="netlify-rum-container" src="/.netlify/scripts/rum" data-netlify-rum-site-id="0186c65c-e32d-4943-a190-0c6862a47cbf" data-netlify-deploy-branch="" data-netlify-deploy-context="production" data-netlify-cwv-token="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzaXRlX2lkIjoiMDE4NmM2NWMtZTMyZC00OTQzLWExOTAtMGM2ODYyYTQ3Y2JmIiwiYWNjb3VudF9pZCI6IjZhMTc4M2JiOTcxY2NhODhjNDhlNWM4OCIsImRlcGxveV9pZCI6IjZhOGJhZjdkYTI5OWMyNWU1NGQxMTU2MyIsImlzc3VlciI6Im5mc2VydmVyIn0.L92cNBfDBUhWFbOb5V1sohB3Qvkx8efcoXnfJCbCiHU"></script>
5213
5214</body>
5215</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.