:root{--bg-dark:rgb(0,86,146)!important;}body{background-color:var(--bg-dark)!important;}:root {--bg-dark:#050A14;--bg-card:rgba(255, 255, 255, 0.03);--primary-gold:#D4AF37;--secondary-gold:#F9D423;--text-main:#FFFFFF;--text-muted:#A0AAB5;--accent-blue:#1E3A8A;--font-heading:'Outfit', sans-serif;--font-body:'Plus Jakarta Sans', sans-serif;--glass-border:1px solid rgba(255, 255, 255, 0.1);--glass-shadow:0 8px 32px 0 rgba(0, 0, 0, 0.37)} * {margin:0;padding:0;box-sizing:border-box} body {background-color:var(--bg-dark);color:var(--text-main);font-family:var(--font-body);line-height:1.6;overflow-x:hidden} h1, h2, h3, h4, h5, h6 {font-family:var(--font-heading);font-weight:700;color:var(--text-main);margin-bottom:1rem} a {text-decoration:none;color:inherit;transition:0.3s} ul {list-style:none} .container {max-width:1200px;margin:0 auto;padding:0 20px} /* Utility Classes */ .glass-card {background:var(--bg-card);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:var(--glass-border);border-radius:16px;padding:2rem;box-shadow:var(--glass-shadow);transition:transform 0.3s ease, box-shadow 0.3s ease} .glass-card:hover {transform:translateY(-5px);box-shadow:0 12px 40px rgba(212, 175, 55, 0.15);border-color:rgba(212, 175, 55, 0.3)} .btn-primary {background:linear-gradient(135deg, var(--primary-gold), var(--secondary-gold));color:#000;padding:1rem 2rem;border:none;border-radius:8px;font-weight:700;font-family:var(--font-heading);cursor:pointer;text-transform:uppercase;letter-spacing:1px;transition:all 0.3s ease;box-shadow:0 4px 15px rgba(212, 175, 55, 0.4);display:inline-block} .btn-primary:hover {transform:scale(1.05);box-shadow:0 6px 20px rgba(212, 175, 55, 0.6)} .btn-secondary {background:transparent;border:1px solid var(--primary-gold);color:var(--primary-gold);padding:0.8rem 1.5rem;border-radius:8px;font-weight:600;cursor:pointer;text-transform:uppercase;transition:0.3s} .btn-secondary:hover {background:var(--primary-gold);color:#000} .btn-outline {background:transparent;border:1px solid rgba(255, 255, 255, 0.3);color:var(--text-main);padding:0.8rem 1.5rem;border-radius:8px;width:100%;margin-top:1rem;cursor:pointer;transition:0.3s} .btn-outline:hover {border-color:var(--primary-gold);color:var(--primary-gold)} .highlight {color:var(--primary-gold)} :root {--bg-dark:#050A14;--bg-card:rgba(255, 255, 255, 0.03);--primary-gold:#D4AF37;--secondary-gold:#F9D423;--text-main:#FFFFFF;--text-muted:#A0AAB5;--accent-blue:#1E3A8A;--font-heading:'Outfit', sans-serif;--font-body:'Plus Jakarta Sans', sans-serif;--glass-border:1px solid rgba(255, 255, 255, 0.1);--glass-shadow:0 8px 32px 0 rgba(0, 0, 0, 0.37)} * {margin:0;padding:0;box-sizing:border-box} body {background-color:var(--bg-dark);color:var(--text-main);font-family:var(--font-body);line-height:1.6;overflow-x:hidden} h1, h2, h3, h4, h5, h6 {font-family:var(--font-heading);font-weight:700;color:var(--text-main);margin-bottom:1rem} a {text-decoration:none;color:inherit;transition:0.3s} ul {list-style:none} .container {max-width:1200px;margin:0 auto;padding:0 20px} /* Utility Classes */ .glass-card {background:var(--bg-card);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:var(--glass-border);border-radius:16px;padding:2rem;box-shadow:var(--glass-shadow);transition:transform 0.3s ease, box-shadow 0.3s ease} .glass-card:hover {transform:translateY(-5px);box-shadow:0 12px 40px rgba(212, 175, 55, 0.15);border-color:rgba(212, 175, 55, 0.3)} .btn-primary {background:linear-gradient(135deg, var(--primary-gold), var(--secondary-gold));color:#000;padding:1rem 2rem;border:none;border-radius:8px;font-weight:700;font-family:var(--font-heading);cursor:pointer;text-transform:uppercase;letter-spacing:1px;transition:all 0.3s ease;box-shadow:0 4px 15px rgba(212, 175, 55, 0.4);display:inline-block} .btn-primary:hover {transform:scale(1.05);box-shadow:0 6px 20px rgba(212, 175, 55, 0.6)} .btn-secondary {background:transparent;border:1px solid var(--primary-gold);color:var(--primary-gold);padding:0.8rem 1.5rem;border-radius:8px;font-weight:600;cursor:pointer;text-transform:uppercase;transition:0.3s} .btn-secondary:hover {background:var(--primary-gold);color:#000} .btn-outline {background:transparent;border:1px solid rgba(255, 255, 255, 0.3);color:var(--text-main);padding:0.8rem 1.5rem;border-radius:8px;width:100%;margin-top:1rem;cursor:pointer;transition:0.3s} .btn-outline:hover {border-color:var(--primary-gold);color:var(--primary-gold)} .highlight {color:var(--primary-gold)} .section-title {text-align:center;font-size:2.5rem;margin-bottom:3rem;text-transform:uppercase;letter-spacing:2px;background:linear-gradient(to right, #fff, #ccc);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent} /* Hero Section */ .hero {position:relative;min-height:100vh;display:flex;align-items:center;background:url('../assets/hero-family.webp') no-repeat center center/cover;/* Fallback */ background-color:var(--bg-dark);/* Fallback color */ padding:100px 0;overflow:hidden} /* Abstract Background Shapes */ .hero::before {content:'';position:absolute;top:-20%;right:-10%;width:600px;height:600px;background:radial-gradient(circle, rgba(30, 58, 138, 0.4) 0%, rgba(5, 10, 20, 0) 70%);border-radius:50%;z-index:0} .hero-overlay {position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(to right, rgba(5, 10, 20, 0.6) 0%, rgba(5, 10, 20, 0.4) 50%, rgba(5, 10, 20, 0.2) 100%);z-index:1} .hero-content {position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:4rem;width:100%} .hero-text {flex:1} .headline {font-size:3.5rem;line-height:1.2;margin-bottom:1.5rem} .subheadline {font-size:1.2rem;color:var(--text-muted);margin-bottom:2rem;max-width:600px} .hero-badges {display:flex;gap:1.5rem;flex-wrap:wrap} .badge-item {display:flex;align-items:center;gap:0.5rem;font-size:0.9rem;color:var(--primary-gold)} .hero-form-wrapper {flex:0 0 400px;background:rgba(5, 10, 20, 0.8);/* Darker for contrast */ } .hero-form-wrapper h3 {text-align:center;margin-bottom:1.5rem;color:var(--primary-gold)} .input-group {position:relative;margin-bottom:1rem} .input-group i {position:absolute;left:15px;top:50%;transform:translateY(-50%);color:var(--primary-gold)} .input-group input, .input-group select {width:100%;padding:12px 12px 12px 40px;background:rgba(255, 255, 255, 0.05);border:1px solid rgba(255, 255, 255, 0.1);border-radius:6px;color:#fff;font-family:var(--font-body)} .input-group select {padding-left:12px;color:#fff} .input-group select option {background:var(--bg-dark)} .select-group label {display:block;margin-bottom:0.5rem;font-size:0.9rem;color:var(--text-muted)} .capture-form button {width:100%;margin-top:1rem} /* Events Section */ .events-section {padding:5rem 0} .events-grid {display:grid;grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));gap:2rem} .event-card {position:relative;display:flex;flex-direction:column;justify-content:space-between;height:100%} .event-tag {position:absolute;top:-10px;right:20px;background:var(--primary-gold);color:#000;padding:2px 10px;font-size:0.7rem;font-weight:700;border-radius:4px} .event-card h3 {font-size:1.5rem;margin-top:0.5rem} .event-desc {font-size:0.9rem;color:var(--text-muted);margin-bottom:1.5rem;flex-grow:1} .event-info {display:flex;flex-direction:column;gap:0.5rem;margin-bottom:1.5rem;font-size:0.9rem} .event-info i {color:var(--primary-gold);width:20px} /* Pillars Section */ .pillars-section {padding:4rem 0;background:linear-gradient(to right, rgba(212, 175, 55, 0.05), rgba(5, 10, 20, 0));border-top:1px solid rgba(255, 255, 255, 0.05);border-bottom:1px solid rgba(255, 255, 255, 0.05)} .pillars-grid {display:grid;grid-template-columns:repeat(3, 1fr);gap:2rem;text-align:center} .pillar-icon {font-size:2.5rem;color:var(--primary-gold);margin-bottom:1rem} .pillar-item h3 {font-size:2rem;margin-bottom:0.5rem} .pillar-item p {color:var(--text-muted);font-size:0.9rem} /* Provocative Section */ .provocative-section {padding:6rem 0;text-align:center} .provocative-content h2 {max-width:800px;margin:0 auto 3rem} .answer-box {max-width:900px;margin:0 auto;text-align:left;border-left:4px solid var(--primary-gold)} .highlight-text {margin-top:1.5rem;font-size:1.2rem;font-weight:600;color:var(--primary-gold)} /* Comparison Section */ .comparison-section {padding:5rem 0} .comparison-grid {display:grid;grid-template-columns:1fr 1fr;gap:3rem} .comparison-col {padding:2rem;border-radius:16px} .comparison-col.limited {background:rgba(255, 50, 50, 0.05);border:1px solid rgba(255, 50, 50, 0.1)} .comparison-col.epic {background:rgba(212, 175, 55, 0.05);border:1px solid rgba(212, 175, 55, 0.2);box-shadow:0 0 30px rgba(212, 175, 55, 0.05)} .comparison-col h3 {text-align:center;margin-bottom:1rem;font-size:1.8rem} .comparison-col.limited h3 {color:#ff6b6b} .comparison-col.epic h3 {color:var(--primary-gold)} .col-subtitle {text-align:center;margin-bottom:2rem;font-style:italic;opacity:0.8} .comparison-col ul li {margin-bottom:1rem;display:flex;align-items:flex-start;gap:10px} .comparison-col.limited i {color:#ff6b6b;margin-top:5px} .comparison-col.epic i {color:var(--primary-gold);margin-top:5px} .summary {margin-top:2rem;text-align:center;font-weight:600;padding-top:1rem;border-top:1px solid rgba(255, 255, 255, 0.1)} /* Scarcity Section */ .scarcity-section {padding:6rem 0} .split-layout {display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center} .text-left {text-align:left} .pain-points {margin:2rem 0;padding-left:1rem;border-left:2px solid rgba(255, 255, 255, 0.2)} .pain-points li {margin-bottom:0.8rem;position:relative;padding-left:1.5rem} .pain-points li::before {content:'•';position:absolute;left:0;color:var(--primary-gold)} .solution-highlight {font-size:1.1rem;color:var(--primary-gold);margin-top:2rem} .image-placeholder {width:100%;height:500px;background:linear-gradient(45deg, #1a2a40, #050a14);border-radius:16px;position:relative;overflow:hidden} .glow-border {box-shadow:0 0 30px rgba(30, 58, 138, 0.3);border:1px solid rgba(30, 58, 138, 0.5)} /* Programs Section */ .programs-section {padding:6rem 0;background:rgba(255, 255, 255, 0.01)} .section-header {text-align:center;margin-bottom:4rem} .section-header p {color:var(--text-muted);max-width:600px;margin:1rem auto 0} .programs-grid {display:grid;grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));gap:2rem} .program-card {display:flex;flex-direction:column} .card-header {border-bottom:1px solid rgba(255, 255, 255, 0.1);padding-bottom:1rem;margin-bottom:1rem} .card-header h4 {font-size:1.4rem;margin-bottom:0.2rem;color:var(--primary-gold)} .card-header span {font-size:0.8rem;text-transform:uppercase;letter-spacing:1px;color:var(--text-muted)} .program-card p {font-size:0.9rem;color:#ccc;margin-bottom:1.5rem;flex-grow:1} .features {margin-bottom:1.5rem} .features li {font-size:0.85rem;margin-bottom:0.5rem;color:var(--text-muted)} .features li::before {content:'✓ ';color:var(--primary-gold)} .highlight-card {border-color:var(--primary-gold);background:rgba(212, 175, 55, 0.05)} /* CTA Intermediate */ .cta-intermediate {padding:5rem 0} .cta-grid {display:grid;grid-template-columns:1fr 1fr;gap:2rem} .cta-card {background:var(--bg-card);border-radius:16px;overflow:hidden;display:flex;border:var(--glass-border)} .cta-image-placeholder {width:40%;background:#222} .cta-content {padding:2rem;width:60%} .btn-small {background:var(--primary-gold);border:none;padding:0.5rem 1rem;border-radius:4px} .bio-quote {font-style:italic;padding:1rem;border-left:3px solid var(--primary-gold);background:rgba(255, 255, 255, 0.02)} /* Articles */ .articles-section {padding:5rem 0;text-align:center} .articles-grid {display:grid;grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));gap:2rem;margin-top:3rem} .article-card {text-align:left;padding:0;overflow:hidden} .article-img {height:200px;background:#222} .article-content {padding:1.5rem} .read-more {display:inline-block;margin-top:1rem;color:var(--primary-gold);font-weight:600} /* FAQ */ .faq-section {padding:6rem 0;background:rgba(255, 255, 255, 0.01)} .faq-container {max-width:800px;margin:0 auto} .faq-item {margin-bottom:1rem;border-bottom:1px solid rgba(255, 255, 255, 0.1)} .faq-question {padding:1.5rem 0;cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-weight:600;font-size:1.1rem} .faq-answer {max-height:0;overflow:hidden;transition:max-height 0.3s ease;color:var(--text-muted);padding-bottom:0} .faq-item.active .faq-answer {max-height:300px;padding-bottom:1.5rem} .faq-item.active .faq-question i {transform:rotate(180deg)} /* Footer */ .main-footer {padding-top:6rem;background:linear-gradient(to top, #000, var(--bg-dark))} .footer-cta-box {text-align:center;margin-bottom:4rem;border:1px solid var(--primary-gold);box-shadow:0 0 40px rgba(212, 175, 55, 0.1)} .choices-grid {display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin:2rem 0} .choice-col {padding:1.5rem;border-radius:8px;background:rgba(255, 255, 255, 0.02)} .choice-col.highlight {background:rgba(212, 175, 55, 0.1);border:1px solid rgba(212, 175, 55, 0.3)} .final-form {max-width:800px;margin:2rem auto 0} .form-row {display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem} .form-row input {width:100%;padding:1rem;background:rgba(255, 255, 255, 0.05);border:1px solid rgba(255, 255, 255, 0.1);border-radius:6px;color:#fff} .footer-info {display:grid;grid-template-columns:2fr 1fr 1fr;gap:3rem;padding:4rem 0;border-top:1px solid rgba(255, 255, 255, 0.1)} .footer-col h4 {color:var(--primary-gold);margin-bottom:1.5rem} .footer-col ul li {margin-bottom:0.8rem} .footer-col ul li a:hover {color:var(--primary-gold)} .social-links {display:flex;gap:1rem} .social-links a {font-size:1.5rem} .social-links a:hover {color:var(--primary-gold)} .copyright {text-align:center;padding:2rem 0;border-top:1px solid rgba(255, 255, 255, 0.05);color:var(--text-muted);font-size:0.8rem} .footer-quote {margin-top:1rem;font-style:italic} /* Responsive */ @media (max-width:992px) {.hero-content {flex-direction:column;text-align:center} .hero-badges {justify-content:center} .hero-form-wrapper {width:100%} .split-layout {grid-template-columns:1fr;gap:2rem} .reverse-mobile {display:flex;flex-direction:column-reverse} .comparison-grid {grid-template-columns:1fr} .pillars-grid {grid-template-columns:1fr} .cta-grid {grid-template-columns:1fr} .footer-info {grid-template-columns:1fr;text-align:center} .social-links {justify-content:center} .form-row {display:inline-block;margin-top:1rem;color:var(--primary-gold);font-weight:600} /* FAQ */ .faq-section {padding:6rem 0;background:rgba(255, 255, 255, 0.01)} .faq-container {max-width:800px;margin:0 auto} .faq-item {margin-bottom:1rem;border-bottom:1px solid rgba(255, 255, 255, 0.1)} .faq-question {padding:1.5rem 0;cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-weight:600;font-size:1.1rem} .faq-answer {max-height:0;overflow:hidden;transition:max-height 0.3s ease;color:var(--text-muted);padding-bottom:0} .faq-item.active .faq-answer {max-height:300px;padding-bottom:1.5rem} .faq-item.active .faq-question i {transform:rotate(180deg)} /* Footer */ .main-footer {padding-top:6rem;background:linear-gradient(to top, #000, var(--bg-dark))} .footer-cta-box {text-align:center;margin-bottom:4rem;border:1px solid var(--primary-gold);box-shadow:0 0 40px rgba(212, 175, 55, 0.1)} .choices-grid {display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin:2rem 0} .choice-col {padding:1.5rem;border-radius:8px;background:rgba(255, 255, 255, 0.02)} .choice-col.highlight {background:rgba(212, 175, 55, 0.1);border:1px solid rgba(212, 175, 55, 0.3)} .final-form {max-width:800px;margin:2rem auto 0} .form-row {display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem} .form-row input {width:100%;padding:1rem;background:rgba(255, 255, 255, 0.05);border:1px solid rgba(255, 255, 255, 0.1);border-radius:6px;color:#fff} .footer-info {display:grid;grid-template-columns:2fr 1fr 1fr;gap:3rem;padding:4rem 0;border-top:1px solid rgba(255, 255, 255, 0.1)} .footer-col h4 {color:var(--primary-gold);margin-bottom:1.5rem} .footer-col ul li {margin-bottom:0.8rem} .footer-col ul li a:hover {color:var(--primary-gold)} .social-links {display:flex;gap:1rem} .social-links a {font-size:1.5rem} .social-links a:hover {color:var(--primary-gold)} .copyright {text-align:center;padding:2rem 0;border-top:1px solid rgba(255, 255, 255, 0.05);color:var(--text-muted);font-size:0.8rem} .footer-quote {margin-top:1rem;font-style:italic} /* Responsive */ @media (max-width:992px) {.hero-content {flex-direction:column;text-align:center} .hero-badges {justify-content:center} .hero-form-wrapper {width:100%} .split-layout {grid-template-columns:1fr;gap:2rem} .reverse-mobile {display:flex;flex-direction:column-reverse} .comparison-grid {grid-template-columns:1fr} .pillars-grid {grid-template-columns:1fr} .cta-grid {grid-template-columns:1fr} .footer-info {grid-template-columns:1fr;text-align:center} .social-links {justify-content:center} .form-row {grid-template-columns:1fr} .headline {font-size:2.5rem} } @media (max-width:600px) {.headline {font-size:2rem} .section-title {font-size:1.8rem} .hero {padding:80px 0} .glass-card {padding:1.5rem} .hero-content {gap:2rem} /* Reduce section padding on mobile */ .events-section, .scarcity-section, .provocative-section, .comparison-section, .cta-intermediate, .faq-section {padding:4rem 0} .articles-section {padding:4rem 0 1rem} .pillars-section {padding:3rem 0} .main-footer {padding-top:4rem} .footer-info {padding:3rem 0} /* Prevent iOS zoom on input focus */ .input-group input, .input-group select {font-size:16px} /* Fix Scarcity Image on Mobile */ .scarcity-image {width:100%;height:auto;max-width:100%;object-fit:cover} /* Fix Footer CTA Overflow */ .footer-cta-box {margin:0 10px 4rem;padding:1.5rem} .choices-grid {grid-template-columns:1fr;gap:1.5rem} .choice-col {width:100%;box-sizing:border-box} /* Optimize CTA Intermediate Section for Mobile */ .cta-grid {grid-template-columns:1fr;gap:1.5rem} .cta-card {flex-direction:column} .cta-image-placeholder {width:100%;height:150px} .cta-content {width:100%;padding:1.5rem} .cta-content h4 {font-size:1.3rem;margin-bottom:0.8rem} .cta-content p {font-size:0.9rem;margin-bottom:1rem} .btn-small {width:100%;padding:0.8rem 1rem;font-size:0.9rem;cursor:pointer;text-transform:uppercase;font-weight:600;transition:all 0.3s ease} .btn-small:hover {background:var(--secondary-gold);transform:scale(1.02)} }