/* Table of Contents: 1. CSS Variables & Design Tokens 2. Global Reset & Base 
Styles 3. Typography & Text Utilities 4. Layout Components 5. Header & Navigation 
6. Tab System 7. Content Components 8. Interactive Elements (Buttons, CTAs) 9. 
Grid & Image Components 10. Slideshow Components 11. Footer 12. Media Queries 
=============================================================================== 
*/ /* =============================================================================== 
1. CSS VARIABLES & DESIGN TOKENS =============================================================================== 
*/ :root { /* Colors */ --color-primary: #000099; --color-primary-light: #0000FF; 
--color-primary-lighter: #e5ccff; --color-secondary: #ff0000; --color-secondary-light: 
#CCFFFF; --color-secondary-dark: #990000; --color-accent: #990099; --color-accent-alt: 
#0033FF; --color-highlight: #66FFFF; --color-white: #ffffff; /* Typography */ 
--font-primary: Roboto, Arial, Helvetica, sans-serif; --font-secondary: Verdana, 
Arial, Helvetica, sans-serif; --text-xs: 9pt; --text-sm: 9.75pt; --text-base: 
12pt; --text-md: 13.5pt; --text-lg: 18pt; --text-xl: 24pt; --text-2xl: 30pt; /* 
Font size on mobile device starts */ --text-base-mobile: 10.5pt; --text-lg-mobile: 
15.75pt; /* Spacing */ --space-xs: 4px; --space-sm: 8px; --space-md: 12px; --space-lg: 
16px; --space-xl: 24px; --space-2xl: 32px; /* Layout */ --border-radius: 5px; 
--transition: 0.3s ease; /* Component Specific */ --tab-bg: #0000FF; --tab-bg-active: 
#0099CC; } /* =============================================================================== 
2. GLOBAL RESET & BASE STYLES =============================================================================== 
*/ * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: var(--font-primary); 
color: var(--color-primary); font-size: var(--text-base); margin: var(--space-sm); 
} img { max-width: 100%; height: auto; display: block; } a { text-decoration: 
none; } /* =============================================================================== 
3. TYPOGRAPHY & TEXT UTILITIES =============================================================================== 
*/ /* Text Highlighting and Colors */ .text--highlight { color: var(--color-accent); 
font-weight: bold; } /* Font Sizes */ .text--lg { font-size: var(--text-lg); } 
/* Links */ .content__link { text-decoration: underline; color: var(--color-primary); 
} .content__link:hover { color: var(--color-secondary); } .content__link--underline 
{ text-decoration: underline; } /* Special Symbols */ .genius-symbol { font-size: 
var(--text-md); color: var(--color-accent); } .step__arrow { font-size: var(--text-lg); 
color: var(--color-accent); margin-right: var(--space-xs); } .method__checkmark, 
.requirement__checkmark, .factor__checkmark, .checklist__checkmark, .trading-requirement__checkmark 
{ color: var(--color-accent); font-size: var(--text-lg); } .info__chevron, .category__chevron, 
.requirement__chevron { margin-right: var(--space-sm); } .detail__bullet { margin-right: 
var(--space-sm); } /* =============================================================================== 
4. LAYOUT COMPONENTS =============================================================================== 
*/ .main-content { width: 100%; } .content__section { margin: var(--space-lg) 
0; } .content__introduction { margin-bottom: var(--space-xl); } .introduction__text, 
.introduction__paragraph { margin: var(--space-lg) 0; } .section__title { background-color: 
var(--color-primary-lighter); padding-right: var(--space-md); display: inline-block; 
margin-bottom: var(--space-xl); } .section__title--sm-padding { background-color: 
var(--color-primary-lighter); padding-right: var(--space-xs); display: inline-block; 
} .track-record__title { margin-top: var(--space-lg); } .track-record__link { 
color: var(--color-accent); } /* =============================================================================== 
5. HEADER & NAVIGATION =============================================================================== 
*/ /* Site Header */ .site-header { position: relative; width: 100%; } /* Header 
Hero */ .header__hero { width: 100%; } .header__hero-image { width: 100%; } /* 
Primary Navigation */ .header__navigation { display: flex; align-items: center; 
gap: var(--space-md); position: absolute; top: 0; left: 0; z-index: 100; padding: 
10px; } /* Mobile Navigation */ .navigation__mobile-menu { position: relative; 
display: inline-block; } .mobile-menu__toggle { border: none; background-color: 
transparent; cursor: pointer; padding: var(--space-xs); border-radius: var(--border-radius); 
font-size: var(--text-lg); color: var(--color-primary-light); font-weight: bold; 
} .mobile-menu__dropdown { z-index: 1000; position: absolute; left: 0; display: 
none; background-color: var(--color-secondary-light); padding: var(--space-md) 
var(--space-xs); min-width: 220px; } .navigation__mobile-menu:hover .mobile-menu__dropdown, 
.navigation__mobile-menu:focus-within .mobile-menu__dropdown { display: block; 
} .dropdown__item { padding: var(--space-sm) 0; } .dropdown__link { color: var(--color-primary); 
font-family: var(--font-secondary); font-weight: bold; display: block; } .dropdown__link:hover 
{ color: var(--color-secondary); } .dropdown__link--highlight { color: #ff0033; 
font-weight: bold; display: block; } /* Desktop Navigation */ .navigation__desktop-menu 
{ list-style: none; padding: 0; margin: 0; display: flex; align-items: center; 
gap: var(--space-xs); font-size: var(--text-sm); font-weight: bold; } .desktop-menu__item 
{ padding: var(--space-xs); } .desktop-menu__link { color: var(--color-primary); 
} .desktop-menu__link:hover { color: var(--color-secondary); } /* =============================================================================== 
6. TAB SYSTEM =============================================================================== 
*/ /* Tab Container */ .tabs__container { display: flex; flex-wrap: wrap; justify-content: 
center; width: 100%; margin-top: var(--space-lg); gap: var(--space-sm); } .tab__button 
{ padding: 0.5rem 0.25rem; background-color: var(--tab-bg); color: #ffffff; font-size: 
11pt; font-weight: bold; transition: background-color 0.3s ease; white-space: 
nowrap; overflow: hidden; border-radius: 0; border: none; cursor: pointer; margin: 
0; outline: none; box-sizing: border-box; flex: 1; min-width: 85px; max-width: 
25%; text-align: center; } .tab__button:hover, .tab__button:focus, .tab__button--active 
{ background-color: var(--tab-bg-active); } .tab__content { display: none; margin-top: 
16px; background-color: #ffffff; min-height: 300px; } .tab__content--active { 
display: block; } /* =============================================================================== 
7. CONTENT COMPONENTS =============================================================================== 
*/ /* Process Steps */ .process-steps { margin-bottom: var(--space-lg); } /* Delivery 
Methods */ .delivery-methods { margin: var(--space-xl) 0; } .delivery-method__item 
{ color: var(--color-accent); margin-bottom: var(--space-xl); } /* News Information 
*/ .news-information { margin: var(--space-xl) 0; } .info__description { margin-bottom: 
var(--space-xl); } .info-list { margin: var(--space-lg) 0; } .info-list__item 
{ margin: var(--space-sm) 0; } /* Stock Details */ .stock-details { margin-top: 
var(--space-lg); margin-left: var(--space-xl); } .stock-detail__item { margin: 
var(--space-sm) 0; } /* Benefits List */ .benefits-list { margin: var(--space-lg) 
0; } .benefit__item { margin-bottom: var(--space-sm); } /* Success Quote */ .success-quote 
{ margin: var(--space-xl) 0; } .quote__text { color: var(--color-accent); } /* 
Getting Started */ .getting-started { margin: var(--space-xl) 0; } .started__intro 
{ margin-bottom: var(--space-lg); } .requirements-list, .trading-requirements-list 
{ margin: var(--space-lg) 0; } .requirement__item, .trading-requirement__item 
{ margin-bottom: var(--space-lg); } .trading-requirement__checkmark, .checklist__checkmark 
{ margin-right: var(--space-sm); } .trading-requirement__item:first-child .trading-requirement__checkmark 
{ font-size: var(--text-md); } .trading-requirement__item { color: var(--color-accent); 
font-size: var(--text-md); } .trading-requirement__item .content__link { color: 
var(--color-accent); } .started__description { margin: var(--space-lg) 0; } .started__description 
.content__link--underline { text-decoration-color: var(--color-primary); } .started__description 
.content__link--underline:hover { text-decoration-color: var(--color-secondary); 
} .started__description .content__link { color: var(--color-secondary); } .started__final 
{ margin-top: var(--space-lg); } /* Trading Guide */ .trading-guide { margin: 
var(--space-xl) 0; } .guide__highlight { margin-bottom: var(--space-xl); } .guide__highlight 
.text--highlight { font-size: var(--text-lg); } .guide__content { margin: var(--space-lg) 
0; } .guide__paragraph { margin-bottom: var(--space-xl); } /* Trading Requirements 
*/ .trading-requirements { margin: var(--space-xl) 0; } .requirements__intro { 
margin-bottom: var(--space-lg); } .trading-checklist { margin: var(--space-lg) 
0; } .checklist__item { color: var(--color-accent); margin-bottom: var(--space-lg); 
} .requirements__conclusion { margin: var(--space-lg) 0; } /* Recession Trading 
*/ .recession-trading { margin: var(--space-xl) 0; } .overview__question { margin-bottom: 
var(--space-lg); color: var(--color-accent); } .overview__content { margin: var(--space-lg) 
0; } .overview__paragraph { margin-bottom: var(--space-lg); } /* Track Record 
Section */ .track-record-section { margin: var(--space-xl) 0; } .track-record__title 
{ margin-bottom: var(--space-xl); } .track-record__content { margin: var(--space-lg) 
0; } .track-record__paragraph { margin-bottom: var(--space-lg); } .track-record__paragraph 
.terms-of-use__link { text-decoration-color: var(--color-primary); } /* System 
Quote */ .system-quote { margin: var(--space-xl) 0; } /* Earnings Section */ .earnings-section 
{ margin-bottom: var(--space-xl); margin-top: 2.5rem; } .earnings__intro { margin-bottom: 
var(--space-lg); } .earnings-factors { margin: var(--space-xl) 0; } .factor__item 
{ color: var(--color-accent); margin-bottom: var(--space-lg); } .factor__checkmark 
{ margin-right: var(--space-lg); } .earnings__description { margin: var(--space-lg) 
0; } /* Profitability Proof */ .profitability-proof { margin: var(--space-xl) 
0; } .proof__description { margin-bottom: var(--space-xl); } .proof__track-record-link 
{ margin-bottom: var(--space-xl); color: var(--color-accent); } .proof__track-record-link 
a { color: var(--color-accent); } .proof__conclusion { margin-bottom: var(--space-xl); 
} /* Tax Information */ .tax-information { margin: var(--space-xl) 0; } .tax__description 
{ margin-bottom: var(--space-lg); } .tax__international { margin: var(--space-lg) 
0; } /* Tax Optimization */ .tax-optimization { margin: var(--space-2xl) 0; } 
.optimization__basic { margin-bottom: var(--space-xl); } .optimization__advanced 
{ margin: var(--space-lg) 0; } .optimization__advanced .text--highlight { color: 
#cc0066; } .delivery__question { margin-bottom: var(--space-lg); } .delivery__explanation 
{ margin-bottom: var(--space-lg); } /* Value Proposition */ .value-proposition 
{ margin: var(--space-xl) 0; } .proposition__content { margin-bottom: var(--space-lg); 
} .proposition__main { margin-bottom: var(--space-xl); } .proposition__distinction 
{ margin-bottom: var(--space-lg); } .proposition__categories { margin-bottom: 
var(--space-lg); } .news-categories { margin: var(--space-lg) 0; } .proposition__advantage 
{ margin-bottom: var(--space-lg); } /* Trading Complexity */ .trading-complexity 
{ margin-top: var(--space-2xl); } .complexity__intro { margin-bottom: var(--space-lg); 
} .complexity__explanation { margin-bottom: var(--space-lg); } .complexity__requirements-intro 
{ margin-bottom: var(--space-lg); } .complexity__solution { margin: var(--space-lg) 
0; } /* Risk Assessment */ .risk-assessment { margin-bottom: var(--space-xl); 
} .risk__description { margin-bottom: var(--space-lg); } /* Premarket Focus */ 
.premarket-focus { margin: var(--space-xl) 0; } /* =============================================================================== 
8. INTERACTIVE ELEMENTS (BUTTONS, CTAs) =============================================================================== 
*/ /* Call to Action */ .cta { width: 80%; margin: var(--space-xl) auto; text-align: 
center; } .cta__link { display: inline-block; } .cta__image { max-width: 300px; 
width: 100%; margin: 0 auto; } .cta__title { color: #cc0066; } .cta__text { font-weight: 
bold; } .cta__highlight { color: #ff3333; font-weight: bold; } /* Feature Card 
Buttons */ .feature-card__button { position: absolute; top: 80%; left: 50%; transform: 
translate(-50%, -50%); background-color: var(--color-accent); color: var(--color-white); 
padding: var(--space-xs) var(--space-sm); font-family: var(--font-secondary); 
font-size: var(--text-md); border: none; cursor: pointer; } /* Service Feature 
Buttons */ .service-feature__button { border: none; background-color: var(--color-accent-alt); 
cursor: pointer; padding: var(--space-xs); border-radius: var(--border-radius); 
font-size: var(--text-base); color: var(--color-white); position: absolute; top: 
80%; left: 50%; transform: translate(-50%, -50%); } .service-feature__button:hover 
{ background-color: blue; } .service-feature__link { color: var(--color-white); 
} /* Feature Showcase */ .feature-showcase__button { border: none; background-color: 
var(--color-accent-alt); cursor: pointer; padding: var(--space-xs); border-radius: 
var(--border-radius); font-size: var(--text-base); color: var(--color-white); 
position: absolute; top: 80%; left: 50%; transform: translate(-50%, -50%); max-width: 
440px; width: 80%; } .feature-showcase__button:hover { background-color: blue; 
} .feature-showcase__link { color: var(--color-white); } /* Testing Feature Button 
*/ .testing-feature__button { color: var(--color-white); background-color: var(--color-accent); 
font-family: var(--font-secondary); font-size: var(--text-md); cursor: pointer; 
position: absolute; top: 80%; left: 50%; transform: translate(-50%, -50%); } /* 
Tooltips */ .profit-stat__tooltip, .feature-showcase__tooltip, .luxury-dreams__tooltip 
{ position: relative; display: inline-block; cursor: pointer; text-align: center; 
margin: var(--space-xl) auto; } .profit-stat__tooltip-text, .feature-showcase__tooltip-text, 
.luxury-dreams__tooltip-text { visibility: hidden; opacity: 0; position: absolute; 
bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: var(--space-sm); 
background-color: magenta; color: var(--color-white); text-align: center; border-radius: 
var(--border-radius); padding: var(--space-xs); white-space: nowrap; z-index: 
1000; transition: opacity var(--transition), visibility var(--transition); } .profit-stat__tooltip:hover 
.profit-stat__tooltip-text, .feature-showcase__tooltip:hover .feature-showcase__tooltip-text, 
.luxury-dreams__tooltip:hover .luxury-dreams__tooltip-text { visibility: visible; 
opacity: 1; } .profit-stat__caption { font-size: var(--text-lg); font-weight: 
bold; color: #cc0066; } /* =============================================================================== 
9. GRID & IMAGE COMPONENTS =============================================================================== 
*/ /* Feature Cards Grid */ .features__grid { display: flex; margin: var(--space-xl) 
0; gap: var(--space-xs); } .feature-card { position: relative; width: 100%; } 
.feature-card__image { width: 100%; transition: opacity 700ms ease; } .feature-card:hover 
.feature-card__image { opacity: 0.6; } /* Service Features Grid */ .service-features__grid 
{ display: flex; margin-top: var(--space-lg); margin-bottom: var(--space-2xl); 
} .service-feature { width: 100%; position: relative; } .service-feature__image 
{ width: 100%; } /* Profit Statistics Grid */ .profit-stats__grid { display: flex; 
margin: var(--space-xl) 0; gap: var(--space-xs); } .profit-stat { width: 100%; 
} .profit-stat__image { width: 100%; transition: opacity 700ms ease; } .profit-stat:hover 
.profit-stat__image { opacity: 0.6; } /* Profit Statistics */ .profit-statistics 
{ text-align: center; margin: var(--space-xl) auto; } .profit-stat__image { width: 
100%; height: auto; border: none; } /* How-To Guides Grid */ .howto-guides__grid 
{ display: flex; gap: var(--space-xs); margin: var(--space-xl) 0; width: 100%; 
} .howto-guide { width: 100%; } .howto-guide__container { position: relative; 
width: 100%; overflow: hidden; border-radius: var(--border-radius); } .howto-guide__image 
{ width: 100%; height: auto; display: block; } .howto-guide__overlay { position: 
absolute; bottom: 0; left: 0; right: 0; background: rgba(255, 0, 153, 0.6); color: 
var(--color-white); font-size: var(--text-base); padding: var(--space-xs); text-align: 
center; opacity: 0; transition: opacity var(--transition); } .howto-guide__container:hover 
.howto-guide__overlay { opacity: 1; } /* Feature Showcase */ .feature-showcase 
{ text-align: center; margin: 0 auto; position: relative; max-width: 800px; } 
.feature-showcase__image { width: 100%; height: auto; display: block; margin: 
0 auto; } .feature-showcase:hover .feature-showcase__image { opacity: 1; } .feature-showcase 
.feature-showcase__tooltip-text { margin-bottom: 0; left: 20%; transform: translateX(-20%); 
} /* Testing Feature */ .testing-feature { position: relative; text-align: center; 
margin: var(--space-xl) 0; } .testing-feature__image { width: 100%; height: auto; 
display: block; transition: opacity 700ms ease; } .testing-feature__image:hover 
{ opacity: 0.6; } /* Luxury Dreams */ .luxury-dreams { position: relative; text-align: 
center; } .luxury-dreams__image { width: 100%; height: auto; display: block; } 
.luxury-dreams__overlay { position: absolute; top: 50%; left: 50%; transform: 
translate(-50%, -50%); text-align: center; } .luxury-dreams__title { color: var(--color-white); 
font-size: var(--text-lg); font-weight: bold; margin-bottom: 3rem; } .luxury-dreams__subtitle 
{ color: var(--color-white); font-size: var(--text-lg); } .luxury-dreams .luxury-dreams__tooltip-text 
{ margin-bottom: 0; left: 20%; transform: translateX(-20%); } /* Recession Proof 
Section */ .recession-proof { width: 100%; background-color: #0000FF; margin: 
var(--space-xl) 0; padding: var(--space-lg); } .recession-proof__header { text-align: 
center; padding: 0; } .recession-proof__title { color: var(--color-white); font-size: 
var(--text-xl); font-weight: bold; margin-bottom: var(--space-lg); } .recession-proof__content 
{ position: relative; text-align: center; } .recession-proof__image img { max-width: 
480px; width: 100%; margin: 0 auto; display: block; } .recession-proof__text { 
position: absolute; top: 8px; left: 8px; text-align: left; color: var(--color-white); 
line-height: 1.4; } .recession-proof__paragraph { color: var(--color-white); font-size: 
var(--text-md); margin-bottom: var(--space-2xl); } .recession-proof__link { color: 
var(--color-white); font-size: var(--text-md); text-decoration: underline; text-decoration-color: 
var(--color-primary); } .recession-proof__link:hover { text-decoration-color: 
var(--color-accent); } .recession-proof__footer { text-align: center; padding-top: 
16px; } .recession-proof__subtitle { color: var(--color-white); font-size: var(--text-xl); 
font-weight: bold; margin: 0; padding: 0; } /* =============================================================================== 
10. SLIDESHOW COMPONENTS =============================================================================== 
*/ .slideshow { max-width: 500px; position: relative; margin: auto; margin-top: 
var(--space-xl); margin-bottom: var(--space-xl); } .slideshow__slide { position: 
relative; display: none; max-width: 500px; } .slideshow__image { width: 100%; 
max-width: 500px; display: inline-block; } .slideshow__caption { color: var(--color-white); 
font-size: var(--text-xl); padding: 8px 12px; position: absolute; bottom: 8px; 
left: 0; width: 100%; text-align: center; } .slideshow__navigation { text-align: 
center; margin-top: var(--space-lg); } .slideshow__dot { height: 15px; width: 
15px; margin: 0 2px; background-color: #99FFFF; border-radius: 50%; display: inline-block; 
transition: background-color 0.1s ease; } .slideshow__dot--active { background-color: 
#0033FF; } .slideshow__slide--fade { animation-name: fade; animation-duration: 
4s; } @keyframes fade { from { opacity: 0.2; } to { opacity: 1; } } /* =============================================================================== 
11. FOOTER =============================================================================== 
*/ .site-footer { position: relative; width: 100%; margin: 0 auto; } .footer__background 
{ width: 100%; height: 415px; padding-bottom: var(--space-lg); } .footer__content 
{ display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); 
width: 95%; margin: 0 auto; position: absolute; top: 0; left: 0; margin: var(--space-md) 
var(--space-xl); } .footer__section-title { color: var(--color-highlight); margin-bottom: 
var(--space-2xl); font-size: var(--text-md); font-weight: normal; } .footer__links 
{ list-style: none; padding: 0; margin: 0; margin-bottom: var(--space-2xl); } 
.footer__link-item { padding: 5px 0; } .footer__link-item--special { padding: 
var(--space-xs); margin-top: var(--space-lg); } .footer__link { color: var(--color-white); 
} .footer__link:hover { color: var(--color-secondary-light); } .footer__link--highlight 
{ color: var(--color-secondary-light); } .footer__copyright { text-align: center; 
} /* =============================================================================== 
12. MEDIA QUERIES =============================================================================== 
*/ /* Tablet and Mobile */ @media screen and (max-width: 768px) { /* Font size 
on mobile device starts here */ body { font-size: var(--text-base-mobile); } .trading-requirement__item 
{ font-size: var(--text-base); } .method__checkmark, .requirement__checkmark, 
.factor__checkmark, .checklist__checkmark, .trading-requirement__checkmark { color: 
var(--color-accent); font-size: var(--text-lg-mobile); } .guide__highlight .text--highlight 
{ font-size: var(--text-lg-mobile); } .guide__paragraph { font-size: var(--text-base-mobile); 
} .feature-showcase__tooltip-text, .feature-showcase__link { font-size: var(--text-base-mobile); 
} .luxury-dreams__title { font-size: var(--text-lg-mobile); } .luxury-dreams__subtitle 
{ font-size: var(--text-lg-mobile); } .desktop-menu__item, .tab__button { font-size: 
11pt; } /* Font size on mobile device ends */ .slideshow__caption { font-size: 
var(--text-lg); } .recession-proof__title { font-size: var(--text-lg); } .recession-proof__paragraph 
{ font-size: var(--text-base); } .recession-proof__link { font-size: var(--text-base); 
} .recession-proof__subtitle { font-size: var(--text-lg); } } /* Small Screens 
*/ @media screen and (max-width: 600px) { .navigation__desktop-menu { display: 
none; } .recession-proof__text { position: relative; } } /* Extra Small Screens 
*/ @media screen and (max-width: 540px) { .tabs__container { gap: 6px; } } @media 
screen and (max-width: 400px) { .luxury-dreams__title { font-size: var(--text-md); 
margin-bottom: var(--space-2xl); } .luxury-dreams__subtitle { font-size: var(--text-md); 
} } /* Mobile Devices */ @media (max-width: 360px) { .mobile-menu__toggle { font-size: 
var(--text-md); } .header__navigation { padding: var(--space-xs); } }