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&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.