/* --- GENERAL COMPONENT & PAGE STYLES --- */
.page-section-wrapper { 
    padding: 60px 20px; 
    width: 100%; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
}
.page-section-wrapper:first-child { 
    padding-top: 30px; 
}
.page-section-wrapper:last-child { 
    padding-bottom: 30px; 
}
.highlight-text { 
    font-weight: 600; 
    color: var(--accent-color); 
}
.component-header { 
    text-align: center; 
    max-width: 800px; 
    width: 100%; 
    margin: 0 auto 30px auto; 
}
.component-header h3 { 
    font-size: 28px; 
    font-weight: 700; 
    color: var(--heading-color); 
    margin-bottom: 10px; 
}
.component-header .subtitle { 
    font-size: 16px; 
    color: var(--text-color); 
    margin-top: -5px; 
    margin-bottom: 10px; 
}

/* --- HERO SECTION (index.html) --- */
.hero-section-rebuilt { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    padding: 60px 20px; 
    max-width: 1200px; 
    margin: 0 auto; 
    gap: 40px; 
}
.hero-left { 
    flex: 1; 
    max-width: 600px; 
}
.hero-right { 
    flex: 1; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
}
.hero-right img { 
    max-width: 100%; 
    width: 400px; 
    border-radius: 24px; 
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2), 0 0 0 10px rgba(31, 41, 55, 0.5); 
}
.hero-left .name-tag { 
    font-size: 16px; 
    font-weight: 600; 
    color: var(--accent-color); 
    margin-bottom: 10px; 
}
.hero-left h1 { 
    font-size: clamp(32px, 5vw, 48px); 
    font-weight: 700; 
    color: var(--heading-color); 
    margin: 0; 
    line-height: 1.2; 
}
.hero-left .license-tag { 
    font-size: clamp(18px, 3vw, 24px); 
    font-weight: 600; 
    color: var(--accent-color); 
    margin: 10px 0 25px 0; 
}
.hero-left .description { 
    font-size: 18px; 
    line-height: 1.7; 
    margin-bottom: 30px; 
}
.hero-buttons { 
    display: flex; 
    flex-wrap: wrap; 
    gap: 15px; 
    margin-bottom: 40px; 
}
.hero-buttons .btn { 
    padding: 15px 25px; 
    border-radius: 8px; 
    font-size: 16px; 
    font-weight: 600; 
    text-decoration: none; 
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    transition: transform 0.2s ease; 
}
.hero-buttons .btn:hover { 
    transform: translateY(-2px); 
}
.hero-buttons .btn-primary { 
    background-color: var(--accent-color); 
    color: white; 
}
.hero-buttons .btn-secondary { 
    background-color: var(--page-bg); 
    color: var(--heading-color); 
    border: 1px solid var(--border-color); 
}
.hero-metrics-grid { 
    display: grid; 
    grid-template-columns: repeat(2, 1fr); 
    gap: 30px; 
}
.metric-item { 
    display: flex; 
    align-items: center; 
    gap: 15px; 
}
.metric-item .icon { 
    width: 40px; 
    height: 40px; 
    background-color: #16a085; 
    border-radius: 50%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    color: white; 
    font-weight: bold; 
}
.metric-item .text .value { 
    font-size: 20px; 
    font-weight: 700; 
    color: var(--heading-color); 
}
.metric-item .text .label { 
    font-size: 14px; 
    color: var(--text-color); 
}
.hero-footnote { 
    font-size: 12px; 
    color: var(--text-color); 
    opacity: 0.7; 
    margin-top: 25px; 
}

/* --- CARD STYLES (Used across pages) --- */
.cards-container-solid { 
    display: flex; 
    justify-content: center; 
    flex-wrap: wrap; 
    gap: 20px; 
    max-width: 1200px; 
    margin: 0 auto; 
}
.solid-card { 
    background-color: var(--card-bg); 
    border: 1px solid var(--border-color); 
    border-radius: 16px; 
    padding: 35px; 
    flex: 1; 
    min-width: 280px; 
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.solid-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}
.intro-card h2 { 
    font-size: 24px; 
    font-weight: 700; 
    color: var(--heading-color); 
    margin: 0 0 20px 0; 
}
.intro-card p { 
    font-size: 16px; 
    line-height: 1.7; 
    color: var(--text-color); 
    margin: 0 0 1em 0; 
}
.intro-card p:last-child { 
    margin-bottom: 0; 
}
.services-card h2 { 
    font-size: 22px; 
    font-weight: 600; 
    color: var(--heading-color); 
    margin: 0 0 25px 0; 
    border-bottom: 1px solid var(--border-color); 
    padding-bottom: 15px; 
    text-align: left; 
}
.services-list { 
    list-style: none; 
    padding-left: 0; 
    margin: 0; 
    text-align: left; 
}
.services-list li { 
    position: relative; 
    padding-left: 25px; 
    margin-bottom: 15px; 
    font-size: 16px; 
    line-height: 1.6; 
    color: var(--text-color); 
}
.services-list li:last-child { 
    margin-bottom: 0; 
}
.services-list li::before { 
    content: ''; 
    position: absolute; 
    left: 0; 
    top: 8px; 
    width: 8px; 
    height: 8px; 
    background-color: var(--accent-color); 
    border-radius: 50%; 
}
.info-card { 
    margin-top: 20px; 
    background-color: var(--card-bg); 
    border: 1px solid var(--border-color); 
    border-left: 5px solid var(--accent-color); 
    border-radius: 8px; 
    padding: 30px; 
}
.info-card h4 { 
    margin-top: 0; 
    margin-bottom: 10px; 
    font-size: 18px; 
    color: var(--heading-color); 
    font-weight: 600; 
}
.info-card p { 
    margin-bottom: 0; 
    line-height: 1.7; 
    color: #CBD5E0; 
    font-size: 16px; 
}

/* --- CHART STYLES (index.html & profile.html) --- */
#portfolio-growth-section-rebuilt .component-header h3 { 
    font-size: clamp(24px, 5vw, 32px); 
    line-height: 1.4; 
    word-wrap: break-word; 
}
#portfolio-growth-section-rebuilt .dark-glass-container { 
    background-color: var(--card-bg); 
    border: 1px solid var(--border-color); 
    width: 100%; 
    max-width: 900px; 
    border-radius: 16px; 
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2); 
    padding: 40px; 
    overflow: hidden; 
}
#portfolio-growth-section-rebuilt .chart-legend { 
    display: flex; 
    justify-content: center; 
    flex-wrap: wrap; 
    gap: 20px; 
    margin-bottom: 40px; 
}
#portfolio-growth-section-rebuilt .legend-item { 
    display: flex; 
    align-items: center; 
    gap: 8px; 
    font-size: 14px; 
    color: var(--text-color); 
}
#portfolio-growth-section-rebuilt .legend-color-box { 
    width: 14px; 
    height: 14px; 
    border-radius: 3px; 
}
#portfolio-growth-section-rebuilt .legend-invested { 
    background-color: #4A5568; 
}
#portfolio-growth-section-rebuilt .legend-growth { 
    background-color: var(--accent-color); 
}
#portfolio-growth-section-rebuilt .desktop-chart-container { 
    display: block; 
    height: 450px; 
    position: relative; 
}
#portfolio-growth-section-rebuilt .mobile-chart-container { 
    display: none; 
}
.mobile-bar-item { 
    margin-bottom: 20px; 
}
.mobile-bar-item:last-child { 
    margin-bottom: 0; 
}
.mobile-bar-header { 
    display: flex; 
    justify-content: space-between; 
    align-items: baseline; 
    margin-bottom: 8px; 
}
.mobile-bar-label { 
    font-size: 15px; 
    color: var(--text-color); 
    font-weight: 500; 
}
.mobile-bar-percentage { 
    font-size: 14px; 
    font-weight: 600; 
    color: var(--heading-color); 
}
.mobile-bar-wrapper { 
    display: flex; 
    width: 100%; 
    height: 30px; 
    background-color: rgba(13, 17, 23, 0.5); 
    border-radius: 6px; 
    overflow: hidden; 
}
.mobile-bar-invested { 
    background-color: #4A5568; 
    height: 100%; 
}
.mobile-bar-growth { 
    background-color: var(--accent-color); 
    height: 100%; 
}
.chart-disclaimer { 
    max-width: 900px; 
    width: 100%; 
    padding: 20px; 
    text-align: center; 
    font-size: 12px; 
    font-style: italic; 
    color: var(--text-color); 
    opacity: 0.8; 
}
.interactive-chart-container {
    position: relative;
    margin: auto;
    height: 400px;
    width: 100%;
    max-width: 450px;
}
.bar-chart-container-interactive {
    position: relative;
    margin: auto;
    height: 500px;
    width: 100%;
}

/* --- REVIEWS SECTION (index.html) --- */
.reviews-section { 
    background-color: var(--card-bg); 
}
.review-card { 
    display: flex; 
    flex-direction: column; 
    gap: 15px; 
}
.review-header { 
    display: flex; 
    align-items: center; 
    gap: 15px; 
}
.reviewer-photo { 
    width: 50px; 
    height: 50px; 
    border-radius: 50%; 
    border: 2px solid var(--border-color); 
}
.reviewer-info { 
    display: flex; 
    flex-direction: column; 
}
.reviewer-name { 
    font-weight: 600; 
    color: var(--heading-color); 
    margin: 0; 
}
.review-stars { 
    color: #FBBF24; 
    font-size: 18px; 
}
.review-text { 
    color: var(--text-color); 
    margin: 0; 
    font-size: 15px; 
    line-height: 1.7; 
    max-height: 102px; 
    overflow: hidden; 
    position: relative; 
    transition: max-height 0.3s ease-out; 
}
.review-text.is-expanded { 
    max-height: 1000px; 
}
.read-more-btn { 
    background: none; 
    border: none; 
    color: var(--accent-color); 
    font-weight: 600; 
    cursor: pointer; 
    padding: 10px 0 0 0; 
    margin-top: 10px; 
    align-self: flex-start; 
}
.reviews-summary { 
    display: inline-flex; 
    align-items: center; 
    gap: 16px; 
    background-color: var(--card-bg); 
    border: 1px solid var(--border-color); 
    border-radius: 12px; 
    padding: 12px 20px; 
    margin-bottom: 30px; 
    transition: background-color 0.2s ease; 
}
.reviews-summary:hover { 
    background-color: #374151; 
}
.summary-google-logo svg { 
    width: 24px; 
    height: 24px; 
}
.summary-rating-value { 
    font-size: 28px; 
    font-weight: 700; 
    color: var(--heading-color); 
}
.summary-details { 
    display: flex; 
    flex-direction: column; 
    align-items: flex-start; 
    gap: 2px; 
}
.summary-stars { 
    color: #FBBF24; 
    font-size: 20px; 
}
.summary-total { 
    font-size: 14px; 
    color: var(--text-color); 
}
.reviews-swiper { 
    width: 100%; 
    max-width: 1200px; 
    padding: 20px 0 50px 0; 
}
.swiper-wrapper { 
    align-items: stretch; 
}
.swiper-slide { 
    display: flex; 
    justify-content: center; 
    height: auto; 
}
.review-card { 
    width: 100%; 
    height: 100%; 
}
.swiper-button-next, .swiper-button-prev { 
    color: var(--accent-color); 
    top: 50%; 
    transform: translateY(-50%); 
}
.swiper-pagination-bullet { 
    background-color: var(--border-color); 
    opacity: 0.8; 
}
.swiper-pagination-bullet-active { 
    background-color: var(--accent-color); 
}

/* --- FAQ SECTION (index.html) --- */
.faq-section .component-header p { 
    font-size: 16px; 
    color: var(--text-color); 
    line-height: 1.6; 
}
.faq-search-wrapper { 
    margin: 20px 0 30px 0; 
}
input#faq-search-input { 
    width: 100%; 
    background-color: var(--page-bg); 
    border: 1px solid var(--border-color); 
    color: var(--heading-color); 
    font-size: 16px; 
    padding: 15px; 
    border-radius: 8px; 
}
input#faq-search-input:focus { 
    border-color: var(--accent-color); 
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.3); 
    outline: none; 
}
.faq-hidden { 
    display: none; 
}
.faq-container { 
    max-width: 800px; 
    width: 100%; 
    margin: 0 auto; 
}
.faq-item { 
    border-bottom: 1px solid var(--border-color); 
}
.faq-item:first-child { 
    border-top: 1px solid var(--border-color); 
}
.faq-question { 
    width: 100%; 
    background: none; 
    border: none; 
    padding: 20px 0; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    text-align: left; 
    cursor: pointer; 
    color: var(--heading-color); 
    font-size: 18px; 
    font-weight: 500; 
    gap: 15px; 
}
.faq-question:hover { 
    color: var(--accent-color); 
}
.faq-question::after { 
    content: '+'; 
    font-size: 28px; 
    font-weight: 300; 
    color: var(--text-color); 
    transition: transform 0.2s ease; 
}
.faq-item.active .faq-question::after { 
    content: '−'; 
    transform: rotate(180deg); 
}
.faq-answer { 
    max-height: 0; 
    overflow: hidden; 
    transition: max-height 0.35s ease-out; 
    color: var(--text-color); 
    font-size: 16px; 
    line-height: 1.8; 
}
.faq-answer .answer-content { 
    padding: 5px 10px 30px 10px; 
}
.faq-answer p, .faq-answer ul { 
    margin: 0 0 1em 0; 
}
.faq-answer p:last-child, .faq-answer ul:last-child { 
    margin-bottom: 0; 
}
.faq-answer strong { 
    color: var(--heading-color); 
    font-weight: 600; 
}
.faq-answer a { 
    color: var(--accent-color); 
    font-weight: 500; 
}
.faq-answer ul { 
    padding-left: 20px; 
}
.faq-example { 
    background-color: var(--page-bg); 
    border: 1px solid var(--border-color); 
    padding: 20px; 
    border-radius: 8px; 
    margin: 20px 0; 
}

/* --- DISCLAIMER SECTION (index.html) --- */
#disclaimer-section .glass-container { 
    background-color: var(--card-bg); 
    border: 1px solid var(--border-color); 
    width: 100%; 
    max-width: 800px; 
    border-radius: 16px; 
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2); 
    padding: 40px; 
}
#disclaimer-section .disclaimer-text p { 
    font-size: 14px; 
    line-height: 1.8; 
    color: #A0AEC0; 
    margin-bottom: 1.5em; 
}
#disclaimer-section .disclaimer-text p:last-child { 
    margin-bottom: 0; 
}
#disclaimer-section .disclaimer-text strong { 
    color: #FFFFFF; 
    font-weight: 600; 
}
#disclaimer-section .disclaimer-text .highlight-text { 
    color: var(--accent-color) !important; 
}
#disclaimer-section .disclaimer-list { 
    list-style-type: none; 
    padding-left: 0; 
    margin-top: 30px; 
    border-top: 1px solid var(--border-color); 
    padding-top: 30px; 
}
#disclaimer-section .disclaimer-list li { 
    padding-left: 25px; 
    position: relative; 
    font-size: 15px; 
    line-height: 1.7; 
    color: #CBD5E0; 
    margin-bottom: 15px; 
}
#disclaimer-section .disclaimer-list li:last-child { 
    margin-bottom: 0; 
}
#disclaimer-section .disclaimer-list li::before { 
    content: ''; 
    position: absolute; 
    left: 0; 
    top: 8px; 
    width: 8px; 
    height: 8px; 
    background-color: var(--accent-color); 
    border-radius: 50%; 
}

/* --- FEES PAGE (fees.html) --- */
#commission-report-section { 
    color: var(--text-color); 
    padding: 40px 20px; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    gap: 60px; 
    width: 100%; 
}
.commission-component { 
    width: 100%; 
    max-width: 900px; 
}
.commission-component .component-header h3 { 
    font-size: 32px; 
}
.commission-component .component-header .as-on-date { 
    font-size: 14px; 
    margin-top: 10px; 
    opacity: 0.8; 
}
.solid-container { 
    background-color: var(--card-bg); 
    border: 1px solid var(--border-color); 
    border-radius: 16px; 
    padding: 40px; 
}
.desktop-chart-view { 
    display: block; 
}
.svg-chart .grid-line { 
    stroke: var(--border-color); 
    stroke-width: 1; 
    stroke-dasharray: 2,3; 
}
.svg-chart .axis-label { 
    font-size: 14px; 
    fill: var(--text-color); 
    font-weight: 500; 
}
.svg-chart .data-label-text { 
    fill: var(--heading-color); 
    font-size: 14px; 
    font-weight: 600; 
    text-anchor: middle; 
}
.svg-chart .data-line { 
    stroke: var(--accent-color); 
    stroke-width: 3; 
    fill: none; 
    stroke-linecap: round; 
    stroke-linejoin: round; 
}
.svg-chart .data-point-circle { 
    fill: var(--accent-color); 
    stroke: var(--card-bg); 
    stroke-width: 3; 
}
.mobile-chart-view { 
    display: none; 
}
.metric-card { 
    text-align: center; 
}
.metric-number { 
    font-size: 52px; 
    font-weight: 700; 
    color: var(--accent-color); 
    line-height: 1.1; 
    margin-bottom: 10px; 
}
.metric-title { 
    font-size: 18px; 
    font-weight: 600; 
    color: var(--heading-color); 
    margin: 10px 0; 
}
.metric-description { 
    font-size: 15px; 
    color: var(--text-color); 
    line-height: 1.6; 
}
.metric-date { 
    font-size: 12px; 
    color: var(--text-color); 
    margin-top: 15px; 
    opacity: 0.7; 
}
.commission-table { 
    width: 100%; 
    border-collapse: collapse; 
    color: var(--text-color); 
}
.commission-table th, .commission-table td { 
    padding: 15px; 
    text-align: left; 
    font-size: 16px; 
}
.commission-table thead { 
    background-color: rgba(13, 17, 23, 0.5); 
}
.commission-table th { 
    font-size: 16px; 
    color: var(--heading-color); 
    font-weight: 600; 
}
.commission-table th:last-child, .commission-table td:last-child { 
    text-align: right; 
}
.commission-table tbody tr { 
    border-bottom: 1px solid var(--border-color); 
}
.commission-table tbody tr:last-child { 
    border-bottom: none; 
}
.commission-table td:last-child { 
    font-weight: 600; 
    white-space: nowrap; 
    color: var(--heading-color); 
}

/* --- CALCULATORS PAGE (calculators.html) --- */
.calculator-section { 
    padding: 50px 20px; 
    width: 100%; 
    box-sizing: border-box; 
    display: flex; 
    justify-content: center; 
}
.calculator-section:first-of-type { 
    padding-top: 40px; 
}
.calculator-section:last-of-type { 
    padding-bottom: 40px; 
}
.calculator-glass-container { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    grid-template-rows: auto auto auto; 
    gap: 30px 40px; 
    background-color: var(--card-bg); 
    border: 1px solid var(--border-color); 
    width: 100%; 
    max-width: 900px; 
    border-radius: 16px; 
    padding: 40px; 
}
.calculator-title { 
    grid-column: 1 / -1; 
    text-align: center; 
    color: var(--heading-color); 
    font-size: 28px; 
    font-weight: 600; 
    margin: 0; 
}
.calculator-description { 
    grid-column: 1 / -1; 
    text-align: center; 
    color: var(--text-color); 
    font-size: 16px; 
    margin-top: -15px; 
    margin-bottom: 20px; 
}
.calculator-inputs { 
    grid-column: 1; 
    grid-row: 3; 
    display: flex; 
    flex-direction: column; 
}
.calculator-results { 
    grid-column: 2; 
    grid-row: 3 / span 2; 
    display: flex; 
    flex-direction: column; 
}
.form-group { 
    display: flex; 
    flex-direction: column; 
    gap: 8px; 
    margin-bottom: 25px; 
}
.form-group:last-child { 
    margin-bottom: 0; 
}
.form-group label { 
    font-size: 15px; 
    color: var(--text-color); 
    font-weight: 500; 
}
.form-group input { 
    background-color: var(--page-bg); 
    border: 1px solid var(--border-color); 
    color: var(--heading-color); 
    font-size: 16px; 
    font-weight: 600; 
    padding: 12px; 
    border-radius: 8px; 
    outline: none; 
}
.form-group input:focus { 
    border-color: var(--accent-color); 
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.3); 
}
.fund-type-group > label { 
    font-size: 15px; 
    color: var(--text-color); 
    font-weight: 500; 
    margin-bottom: 10px; 
    display: block; 
}
.fund-buttons-container { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 15px; 
}
.fund-button-wrapper { 
    position: relative; 
}
.fund-button { 
    background-color: var(--page-bg); 
    border: 1px solid var(--border-color); 
    border-radius: 8px; 
    padding: 12px; 
    color: #CBD5E0; 
    font-size: 15px; 
    font-family: inherit; 
    cursor: pointer; 
    width: 100%; 
    text-align: center; 
}
.fund-button-wrapper.full-width { 
    grid-column: 1 / -1; 
}
.fund-button:hover { 
    background-color: rgba(255, 255, 255, 0.05); 
}
.fund-button.active { 
    background-color: rgba(16, 185, 129, 0.1); 
    border-color: var(--accent-color); 
    color: var(--heading-color); 
}
.fund-warning, .input-warning { 
    font-size: 12px; 
    color: var(--warning-color); 
    text-align: left; 
    padding-top: 8px; 
    opacity: 0; 
    height: 0; 
}
.fund-warning.visible, .input-warning.visible { 
    opacity: 1; 
    height: auto; 
}
.calculator-section .chart-wrapper { 
    width: 100%; 
    margin-bottom: 20px; 
}
.calculator-section .bar-area { 
    position: relative; 
    margin-bottom: 5px; 
}
.calculator-section .bar-top-labels { 
    display: flex; 
    position: absolute; 
    width: 100%; 
    top: -22px; 
    font-size: 13px; 
    font-weight: 500; 
}
.calculator-section .bar-chart-container { 
    display: flex; 
    width: 100%; 
    height: 30px; 
    background-color: rgba(0, 0, 0, 0.2); 
    border-radius: 6px; 
    overflow: hidden; 
}
.calculator-section .bar-segment { 
    height: 100%; 
}
.calculator-section .chart-axis { 
    display: flex; 
    justify-content: space-between; 
    font-size: 12px; 
    color: var(--text-color); 
    padding: 5px 2px 0 2px; 
}
.results-text { 
    text-align: center; 
    margin-bottom: 20px; 
}
.results-text p { 
    margin: 0; 
    color: var(--text-color); 
    font-size: 16px; 
}
.results-text .future-value { 
    font-size: 42px; 
    font-weight: 700; 
    color: var(--heading-color); 
    margin: 5px 0; 
    line-height: 1.2; 
}
.results-text .xirr-explanation { 
    font-size: 13px; 
    color: var(--text-color); 
    max-width: 300px; 
    margin: 10px auto 0 auto; 
    line-height: 1.5; 
}
.results-legend { 
    list-style: none; 
    padding: 20px 0 0 0; 
    margin: 20px 0 0 0; 
    width: 100%; 
    border-top: 1px solid var(--border-color); 
}
.legend-item { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    font-size: 15px; 
    color: #CBD5E0; 
}
.legend-item:not(:last-child) { 
    margin-bottom: 12px; 
}
.legend-label { 
    display: flex; 
    align-items: center; 
}
.legend-color-box { 
    width: 14px; 
    height: 14px; 
    border-radius: 4px; 
    margin-right: 10px; 
}
.legend-value { 
    font-weight: 600; 
    color: var(--heading-color); 
}
.delay-container .calculator-results { 
    row-gap: 20px; 
}
.delay-results-wrapper { 
    display: flex; 
    gap: 20px; 
    width: 100%; 
}
.delay-result-box { 
    flex: 1; 
    text-align: center; 
}
.delay-title { 
    font-size: 16px; 
    color: var(--heading-color); 
    font-weight: 600; 
    text-align: center; 
    margin: 0 0 15px 0; 
}
.delay-chart-wrapper { 
    margin-top: 25px; 
}
.delay-output-label { 
    font-size: 14px; 
    color: var(--text-color); 
    text-align: center; 
    margin: 8px 0; 
}
.delay-output-label span { 
    color: var(--heading-color); 
    font-weight: 600; 
}
.delay-summary { 
    font-size: 16px; 
    color: #CBD5E0; 
    text-align: center; 
    line-height: 1.6; 
    padding: 15px; 
    background-color: rgba(13, 17, 23, 0.5); 
    border-radius: 8px; 
    margin-top: 20px; 
}
.delay-summary strong { 
    color: var(--accent-color); 
}
.delay-summary .negative { 
    color: var(--warning-color); 
}
.delay-summary-note { 
    font-size: 12px; 
    text-align: center; 
    color: var(--text-color); 
    margin-top: 15px; 
}
.disclaimer-card { 
    padding: 40px; 
    grid-template-columns: 1fr; 
    gap: 15px; 
    max-width: 900px; 
}
.disclaimer-title { 
    margin-bottom: 0; 
    text-align: left; 
}
.disclaimer-text { 
    font-size: 15px; 
    color: var(--text-color); 
    font-weight: 500; 
    text-align: left; 
    line-height: 1.7; 
    margin: 0; 
}

/* --- PROFILE PAGE (profile.html) --- */
.profile-page-section { 
    padding: 40px 20px; 
    width: 100%; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    gap: 40px; 
}
.profile-glass-container { 
    background-color: var(--card-bg); 
    border: 1px solid var(--border-color); 
    width: 100%; 
    max-width: 900px; 
    border-radius: 16px; 
    padding: 40px; 
}
.profile-card-header { 
    text-align: center; 
    margin-bottom: 40px; 
}
.profile-card-header h3 { 
    font-size: 28px; 
    font-weight: 600; 
    color: var(--heading-color); 
    margin: 0 0 10px 0; 
}
.profile-card-header p { 
    font-size: 16px; 
    color: var(--text-color); 
    margin: 0; 
    line-height: 1.6; 
}
.profile-page-section .bar-chart-container { 
    width: 100%; 
    display: flex; 
    flex-direction: column; 
    gap: 20px; 
}
.profile-page-section .bar-item { 
    display: flex; 
    align-items: center; 
    gap: 15px; 
}
.profile-page-section .bar-label { 
    flex-basis: 220px; 
    flex-shrink: 0; 
    text-align: right; 
    font-size: 15px; 
    color: var(--text-color); 
    font-weight: 500; 
}
.profile-page-section .bar-wrapper { 
    flex-grow: 1; 
    background-color: rgba(13, 17, 23, 0.5); 
    border-radius: 6px; 
    height: 30px; 
    display: flex; 
    align-items: center; 
}
.profile-page-section .bar { 
    height: 100%; 
    background-color: var(--accent-color); 
    border-radius: 6px; 
    display: flex; 
    align-items: center; 
    justify-content: flex-end; 
    padding-right: 10px; 
    color: var(--heading-color); 
    font-weight: 600; 
    font-size: 14px; 
    white-space: nowrap; 
}
.profile-page-section .bar-value-outside { 
    font-size: 14px; 
    font-weight: 600; 
    color: var(--text-color); 
    padding-left: 8px; 
    white-space: nowrap; 
}
.as-on-date { 
    font-size: 14px; 
    color: var(--text-color); 
    text-align: right; 
    margin-top: 30px; 
    margin-bottom: -15px; 
    opacity: 0.8; 
}
#page-disclaimer { 
    max-width: 900px; 
    width: 100%; 
    padding: 30px; 
    margin-top: 20px; 
    border-top: 1px solid var(--border-color); 
}
#page-disclaimer p { 
    font-size: 14px; 
    color: var(--text-color); 
    line-height: 1.7; 
    text-align: center; 
    margin: 0; 
}

/* --- CONTACT PAGE (contact.html) --- */
.contact-section { 
    display: flex; 
    width: 100%; 
    max-width: 1400px; 
    margin: 0 auto; 
    padding: 60px 20px; 
    gap: 40px; 
}
.contact-left { 
    flex: 1; 
    max-width: 500px; 
    display: flex; 
    flex-direction: column; 
}
.contact-right { 
    flex: 1; 
    min-height: 500px; 
}
.contact-right iframe { 
    width: 100%; 
    height: 100%; 
    border: 0; 
    border-radius: 16px; 
}
.contact-left h2 { 
    font-size: 28px; 
    font-weight: 600; 
    color: var(--heading-color); 
    margin: 0 0 10px 0; 
    padding-bottom: 15px; 
    border-bottom: 1px solid var(--border-color); 
}
.contact-left .info-block { 
    margin-top: 30px; 
}
.contact-left .info-block h3 { 
    font-size: 20px; 
    font-weight: 600; 
    color: var(--heading-color); 
    margin: 0 0 15px 0; 
}
.contact-left .info-block p { 
    font-size: 16px; 
    line-height: 1.7; 
    margin: 0 0 10px 0; 
}
.contact-left .info-block a { 
    color: var(--text-color); 
    text-decoration: none; 
    transition: color 0.2s ease; 
}
.contact-left .info-block a:hover { 
    color: var(--accent-color); 
}
.contact-button { 
    display: inline-block; 
    text-decoration: none; 
    background-color: #FFFFFF; 
    color: #111827; 
    padding: 15px 30px; 
    border-radius: 50px; 
    font-weight: 600; 
    font-size: 16px; 
    text-align: center; 
    margin-top: 20px; 
    transition: transform 0.2s ease; 
}
.contact-button:hover { 
    transform: scale(1.05); 
}
.whatsapp-button { 
    background-color: #25D366; 
    color: #FFFFFF; 
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    gap: 10px; 
}
.social-media-block { 
    margin-top: 40px; 
}
.social-media-block h3 { 
    font-size: 20px; 
    font-weight: 600; 
    color: var(--heading-color); 
    margin: 0 0 10px 0; 
    padding-bottom: 15px; 
    border-bottom: 1px solid var(--border-color); 
}
.social-icons { 
    display: flex; 
    gap: 20px; 
    margin-top: 20px; 
}
.social-icon a { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    width: 44px; 
    height: 44px; 
    background-color: #FFFFFF; 
    border-radius: 50%; 
    transition: transform 0.2s ease; 
}
.social-icon a:hover { 
    transform: scale(1.1); 
}
.social-icon svg { 
    width: 24px; 
    height: 24px; 
    fill: #111827; 
}

/* --- UI ENHANCEMENTS --- */
#back-to-top-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: var(--accent-color);
    color: white;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
    z-index: 1000;
}
#back-to-top-btn.show {
    opacity: 1;
    visibility: visible;
}
#back-to-top-btn:hover {
    background-color: #059669;
}
.fade-in-on-scroll {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.fade-in-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* --- RESPONSIVE MEDIA QUERIES FOR COMPONENTS --- */
@media (max-width: 992px) { 
    .hero-section-rebuilt { flex-direction: column-reverse; text-align: center; } 
    .hero-left { max-width: 100%; } 
    .hero-buttons { justify-content: center; } 
    .hero-metrics-grid { grid-template-columns: 1fr; text-align: left; } 
    .hero-footnote { text-align: center; } 
    .review-card { flex: 0 0 50%; } 
    .contact-section { flex-direction: column; } 
    .contact-left { max-width: 100%; }
    .contact-right { min-height: 60vh; }
}

@media (max-width: 850px) {
    .calculator-glass-container { grid-template-columns: 1fr; grid-template-rows: auto; padding: 30px; }
    .calculator-title { grid-row: 1; }
    .calculator-description { grid-row: 2; }
    .calculator-inputs { grid-row: 3; grid-column: 1; }
    .calculator-results { grid-row: 4; grid-column: 1; padding-top: 30px; margin-top: 10px; }
    .delay-results-wrapper { flex-direction: column; gap: 40px; }
    .disclaimer-title, .disclaimer-text { text-align: center; }
}

@media (max-width: 768px) { 
    .page-section-wrapper { padding: 40px 20px; } 
    .component-header h3 { font-size: 24px; } 
    #portfolio-growth-section-rebuilt .dark-glass-container, #disclaimer-section .glass-container { padding: 30px; max-width: 95vw; } 
    .solid-card { max-width: none; } 
    .faq-question { font-size: 16px; } 
    #portfolio-growth-section-rebuilt .desktop-chart-container { display: none; } 
    #portfolio-growth-section-rebuilt .mobile-chart-container { display: block; } 
    .review-card { flex: 0 0 100%; } 
    #prev-btn { left: 5px; } 
    #next-btn { right: 5px; } 
    .commission-component .component-header h3 { font-size: 24px; } 
    .solid-container, .info-card { padding: 30px; } 
    .commission-table th, .commission-table td { padding: 12px; font-size: 14px; } 
    .desktop-chart-view { display: none; } 
    .mobile-chart-view { display: block; }
}

@media (max-width: 600px) { 
    .profile-glass-container { padding: 30px; } 
    .profile-page-section .bar-item { flex-direction: column; align-items: flex-start; gap: 8px; } 
    .profile-page-section .bar-label { text-align: left; flex-basis: auto; } 
    .profile-page-section .bar-wrapper { width: 100%; } 
    .profile-card-header h3 { font-size: 24px; } 
}