* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px;
    overflow-x: hidden; /* Prevent horizontal scroll */
    width: 100%;
}

html, body {
    max-width: 100vw;
    overflow-x: hidden; /* Prevent horizontal scroll on both html and body */
}

:root {
    /* Real platform colors */
    --primary-color: #10b981;
    --primary-dark: #059669;
    --primary-light: #34d399;
    --secondary-color: #04382e;
    --background: #ffffff;
    --surface: #f5faf7;
    --surface-light: #eefcf4;
    --surface-dark: #e6f7f1;
    --text-primary: #04382e;
    --text-secondary: #6b7280;
    --text-muted: #9ca3af;
    --border: #e5e7eb;
    --success: #10b981;
    --danger: #ef4444;
    --warning: #f59e0b;
    --neutral: #6b7280;
    --positive: #10b981;
    --negative: #ef4444;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--text-primary);
    line-height: 1.6;
    background: var(--background);
    overflow-x: hidden; /* Prevent horizontal scroll */
    width: 100%;
    position: relative;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    width: 100%;
    overflow-x: hidden; /* Prevent container overflow */
}

/* Navigation */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: linear-gradient(90deg, #10b981, #059669);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 1000;
    padding: 16px 0;
}

.navbar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 24px;
    font-weight: 700;
}

.logo {
    font-size: 32px;
}

.brand-name {
    color: white;
    font-weight: 700;
}

.nav-links {
    display: flex;
    gap: 32px;
    align-items: center;
}

.nav-links a {
    text-decoration: none;
    color: white;
    font-weight: 500;
    transition: all 0.3s;
}

.nav-links a:hover {
    color: rgba(255, 255, 255, 0.8);
}

.navbar .btn-secondary-nav {
    background: transparent;
    color: white;
    border: 2px solid white;
    padding: 10px 24px;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s;
}

.navbar .btn-secondary-nav:hover {
    background: white;
    color: #10b981;
    transform: translateY(-2px);
}

.navbar .btn-primary {
    background: white;
    color: #059669;
    font-weight: 700;
}

.navbar .btn-primary:hover {
    background: rgba(255, 255, 255, 0.95);
    color: #10b981;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Buttons */
.btn-primary {
    background: var(--primary-color);
    color: white;
    padding: 10px 24px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s;
    display: inline-block;
}

.btn-primary:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(99, 102, 241, 0.3);
}

.btn-secondary {
    background: white;
    color: var(--primary-color);
    padding: 10px 24px;
    border-radius: 8px;
    border: 2px solid var(--primary-color);
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s;
    display: inline-block;
}

.btn-secondary:hover {
    background: var(--primary-color);
    color: white;
    transform: translateY(-2px);
}

.btn-large {
    padding: 16px 40px;
    font-size: 16px;
    text-decoration: none;
    min-width: 220px;
    text-align: center;
}

.btn-survey {
    background: #8b5cf6 !important;
    color: white !important;
    border: none;
    border-radius: 50px !important;
    cursor: pointer;
    font-weight: 700;
    transition: all 0.3s;
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.4);
}

.btn-survey:hover {
    background: #7c3aed !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(139, 92, 246, 0.5);
}

.btn-survey-round {
    width: auto !important;
    height: auto !important;
    padding: 12px 30px !important;
    margin-top: 5px !important;
    margin-bottom: 20px !important;
    background: #8b5cf6 !important;
    color: white !important;
    border: none !important;
    border-radius: 50px !important;
    cursor: pointer !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    transition: all 0.3s !important;
    box-shadow: 0 6px 20px rgba(139, 92, 246, 0.5) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
}

.btn-survey-round:hover {
    background: #7c3aed !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 30px rgba(139, 92, 246, 0.6) !important;
}

.btn-survey-round:active {
    transform: translateY(-1px) !important;
}

/* Hero Section */
.hero {
    padding: 160px 0 100px;
    background: linear-gradient(180deg, #f5faf7 0%, #eefcf4 100%);
}

.hero-content {
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
}

.hero-title {
    font-size: 64px;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 24px;
}

.gradient-text {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-subtitle {
    font-size: 20px;
    color: var(--text-secondary);
    margin-bottom: 40px;
    line-height: 1.6;
}

.hero-cta {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin-bottom: 80px;
}

.hero-stats {
    display: flex;
    justify-content: center;
    gap: 80px;
    margin-top: 0px;
}

.stat-item {
    text-align: center;
}

.stat-value {
    font-size: 32px;
    font-weight: 800;
    color: var(--primary-color);
    margin-bottom: 8px;
}

.stat-label {
    font-size: 16px;
    color: var(--text-secondary);
}

/* Features Section */
.features {
    padding: 100px 0;
    background: var(--background);
}

.section-title {
    font-size: 48px;
    font-weight: 800;
    text-align: center;
    margin-bottom: 16px;
}

.section-subtitle {
    font-size: 20px;
    color: var(--text-secondary);
    text-align: center;
    margin-bottom: 40px;
}

/* Quick Navigation Buttons */
.quick-nav-buttons {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-bottom: 50px;
    flex-wrap: wrap;
}

.quick-nav-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 32px;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    color: white;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.quick-nav-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
}

.quick-nav-btn:active {
    transform: translateY(-1px);
}

.quick-nav-btn .nav-icon {
    font-size: 24px;
}

.quick-nav-btn .nav-text {
    font-size: 15px;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 32px;
}

.feature-card {
    display: block;
    background: white;
    padding: 40px;
    border-radius: 16px;
    border: 2px solid var(--border);
    transition: all 0.3s;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.feature-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    border-color: var(--primary-color);
}

.feature-card:active {
    transform: translateY(-4px);
}

.feature-icon {
    font-size: 48px;
    margin-bottom: 20px;
}

.feature-card h3 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 12px;
}

.feature-card p {
    color: var(--text-secondary);
    line-height: 1.6;
}

/* Platform Preview Section */
.platform-preview {
    padding: 60px 0;
    background: var(--surface);
}

.preview-section {
    margin-bottom: 60px;
    padding-top: 40px;
    scroll-margin-top: 20px;
}

.preview-section:first-child {
    padding-top: 0;
}

.preview-title {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 16px;
    scroll-margin-top: 100px;
    text-align: center;
}

.preview-description {
    max-width: 800px;
    margin: 0 auto 20px auto;
    text-align: center;
}

.preview-description p {
    font-size: 16px;
    line-height: 1.5;
    color: var(--text-secondary);
}

/* Mock Portfolio */
.mock-portfolio {
    background: white;
    border-radius: 16px;
    padding: 30px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

.portfolio-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
    padding-bottom: 24px;
    border-bottom: 2px solid var(--border);
}

.portfolio-value .label {
    font-size: 14px;
    color: var(--text-secondary);
    display: block;
    margin-bottom: 8px;
}

.portfolio-value .value {
    font-size: 48px;
    font-weight: 800;
    color: var(--text-primary);
}

.portfolio-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

.action-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

.action-btn:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(16, 185, 129, 0.3);
}

.btn-icon {
    font-size: 18px;
}

.currency-badge {
    background: var(--primary-color);
    color: white;
    padding: 8px 16px;
    border-radius: 8px;
    font-weight: 600;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 40px;
}

.stat-card {
    background: var(--surface);
    border: 2px solid var(--border);
    border-radius: 12px;
    padding: 20px;
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.stat-card.highlight {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border-color: var(--success);
}

.stat-card.performer.best {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border-color: var(--success);
}

.stat-card.performer.worst {
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    border-color: var(--danger);
}

.stat-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 16px;
    width: 100%;
}

.stat-header .icon {
    font-size: 20px;
}

.stat-header .label {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-card .stat-value {
    font-size: 28px;
    font-weight: 800;
    margin-bottom: 4px;
}

.stat-card .stat-value.positive {
    color: var(--success);
}

.stat-card .stat-value.negative {
    color: var(--danger);
}

.stat-card .stat-subvalue {
    font-size: 14px;
    font-weight: 600;
}

.stat-card .stat-subvalue.positive {
    color: var(--success);
}

.stat-card .stat-subvalue.negative {
    color: var(--danger);
}

.performer-symbol {
    font-size: 16px;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 8px;
}

.performer-symbol.negative {
    color: var(--danger);
}

.chart-preview {
    background: var(--surface);
    border-radius: 12px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.chart-placeholder {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.chart-placeholder svg {
    width: 100%;
    height: auto;
    margin-bottom: 12px;
}

.chart-label {
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 16px;
}

.performance-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
    width: 100%;
    max-width: 800px;
}

.perf-metric {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.perf-label {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 500;
}

.perf-value {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
}

.perf-value.positive {
    color: #10b981;
}

.perf-value.negative {
    color: #ef4444;
}

/* Mock News */
.mock-news {
    background: white;
    border-radius: 16px;
    padding: 40px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

.news-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

.column-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--border);
}

.news-item {
    background: var(--surface);
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 16px;
    transition: all 0.3s;
}

.news-item:hover {
    transform: translateX(4px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.news-sentiment {
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 8px;
}

.news-sentiment.positive {
    color: var(--success);
}

.news-sentiment.negative {
    color: var(--danger);
}

.news-sentiment.neutral {
    color: var(--neutral);
}

.news-title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 8px;
    line-height: 1.4;
}

.news-meta {
    display: flex;
    gap: 12px;
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 12px;
}

.news-source {
    font-weight: 600;
}

.news-summary {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* Mock Analytics */
.mock-analytics {
    background: white;
    border-radius: 16px;
    padding: 30px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

.analytics-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

/* Show desktop version by default, hide mobile */
.analytics-grid.analytics-desktop {
    display: grid;
}

.analytics-grid.analytics-mobile {
    display: none;
}

.risk-metrics-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
    margin-bottom: 30px;
}

.risk-metric-card {
    background: var(--surface);
    border: 2px solid var(--border);
    border-radius: 10px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: all 0.3s ease;
    position: relative;
    text-align: center;
    align-items: center;
}

.risk-metric-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-color: var(--primary-color);
}

.risk-metric-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
}

.risk-metric-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.3;
}

.info-btn {
    background: #e5e7eb;
    border: none;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: help;
    font-size: 12px;
    flex-shrink: 0;
    transition: all 0.2s;
    position: relative;
}

.info-btn:hover {
    background: var(--primary-color);
    transform: scale(1.1);
}

.info-btn::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 10px);
    right: 0;
    background: rgba(0, 0, 0, 0.9);
    color: white;
    padding: 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
    width: 280px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
    z-index: 1000;
    text-transform: none;
    letter-spacing: normal;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.info-btn:hover::after {
    opacity: 1;
}

.risk-metric-value {
    font-size: 28px;
    font-weight: 800;
    color: var(--text-primary);
}

.risk-metric-value.positive {
    color: var(--success);
}

.risk-metric-value.negative {
    color: var(--danger);
}

.risk-metric-status {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 4px 8px;
    border-radius: 4px;
    text-align: center;
}

.risk-metric-status.positive {
    background: #d1fae5;
    color: #065f46;
}

.risk-metric-status.neutral {
    background: #e0e7ff;
    color: #3730a3;
}

.risk-metric-status.warning {
    background: #fef3c7;
    color: #92400e;
}

.section-subtitle {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 20px;
    color: var(--text-primary);
}

.analytics-card {
    background: var(--surface);
    border: 2px solid var(--border);
    border-radius: 12px;
    padding: 18px;
}

/* Grouped analytics card styling */
.analytics-card.analytics-grouped {
    display: flex;
    flex-direction: column;
}

.grouped-section {
    flex: 1;
}

.grouped-divider {
    height: 1px;
    background: var(--border);
    margin: 20px 0;
}

.analytics-card h4 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 20px;
}

.metric-row {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
}

.metric-row:last-child {
    border-bottom: none;
}

.metric-label {
    font-size: 14px;
    color: var(--text-secondary);
}

.metric-value {
    font-size: 16px;
    font-weight: 700;
}

.metric-value.negative {
    color: var(--danger);
}

.sector-bar {
    display: flex;
    height: 40px;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 16px;
}

.sector-segment {
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0; /* Hide text inside segments */
    text-indent: -9999px;
    font-weight: 600;
}

.sector-segment.tech {
    background: #3b82f6; /* Blue */
}

.sector-segment.finance {
    background: #f59e0b; /* Orange */
}

.sector-segment.healthcare {
    background: #10b981; /* Green */
}

.sector-segment.other {
    background: #8b5cf6; /* Purple */
}

.sector-legend {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}

.dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.dot.tech {
    background: #3b82f6; /* Blue */
}

.dot.finance {
    background: #f59e0b; /* Orange */
}

.dot.healthcare {
    background: #10b981; /* Green */
}

.dot.other {
    background: #8b5cf6; /* Purple */
}

.correlation-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.ticker-pair {
    font-size: 13px;
    font-weight: 600;
    min-width: 100px;
}

.correlation-bar {
    flex: 1;
    height: 8px;
    background: var(--border);
    border-radius: 4px;
    overflow: hidden;
}

.correlation-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
}

.correlation-value {
    font-size: 14px;
    font-weight: 700;
    min-width: 40px;
    text-align: right;
}

.ai-insights {
    grid-column: 1 / -1;
}

.insight-item {
    display: flex;
    gap: 16px;
    padding: 16px;
    background: white;
    border-radius: 8px;
    margin-bottom: 12px;
}

.insight-icon {
    font-size: 24px;
}

.insight-item p {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-secondary);
}

/* Stock Detail Mock */
.mock-stock-detail {
    background: white;
    border-radius: 16px;
    padding: 30px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    max-width: 100%;
}

.stock-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--border);
}

.stock-symbol {
    font-size: 48px;
    font-weight: 800;
    margin: 0;
    color: var(--text-primary);
}

.stock-name {
    font-size: 18px;
    color: var(--text-secondary);
    margin: 8px 0 0 0;
}

.stock-price {
    text-align: right;
}

.price-main {
    font-size: 42px;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.price-change {
    font-size: 18px;
    font-weight: 700;
}

.price-change.positive {
    color: var(--positive);
}

.price-change.negative {
    color: var(--negative);
}

.stock-content-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    scroll-margin-top: 100px;
    max-width: 100%;
}

.stock-card {
    background: var(--surface);
    border: 2px solid var(--border);
    border-radius: 12px;
    padding: 18px;
    transition: all 0.3s;
    scroll-margin-top: 100px;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.stock-card * {
    max-width: 100%;
    box-sizing: border-box;
}

.stock-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
}

.stock-card .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.stock-card h4 {
    font-size: 18px;
    font-weight: 700;
    margin: 0;
    scroll-margin-top: 100px;
}

.timeframe {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 600;
}

/* Social Sentiment */
.sentiment-score {
    display: flex;
    justify-content: center;
    margin: 20px 0;
}

.score-circle {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 8px solid;
    position: relative;
}

.score-circle.positive-sentiment {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border-color: var(--success);
}

.score-value {
    font-size: 52px;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1;
}

.score-label {
    font-size: 16px;
    font-weight: 700;
    color: var(--success);
    margin-top: 4px;
}

.sentiment-breakdown {
    margin-bottom: 16px;
}

.sentiment-bar-container {
    margin-bottom: 12px;
}

.sentiment-labels {
    display: flex;
    justify-content: space-between;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
}

.sentiment-bar {
    height: 12px;
    background: var(--border);
    border-radius: 6px;
    overflow: hidden;
}

.sentiment-fill {
    height: 100%;
    border-radius: 6px;
    transition: width 0.5s ease;
}

.sentiment-fill.positive {
    background: var(--success);
}

.sentiment-fill.neutral {
    background: var(--neutral);
}

.sentiment-fill.negative {
    background: var(--danger);
}

.sentiment-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}

.metric-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    background: white;
    border-radius: 10px;
}

.metric-icon {
    font-size: 24px;
}

.metric-info {
    flex: 1;
}

.metric-value {
    font-size: 18px;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1;
}

.metric-label {
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 4px;
}

/* X Analytics Extended */
.x-analytics-extended {
    margin: 20px 0;
    padding: 20px;
    background: var(--surface-light);
    border-radius: 12px;
    border: 1px solid var(--border);
}

.x-analytics-extended h5 {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 16px;
}

.analytics-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.analytics-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    background: white;
    border-radius: 10px;
    border: 1px solid var(--border);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.analytics-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.analytics-icon {
    font-size: 24px;
    flex-shrink: 0;
}

.analytics-content {
    flex: 1;
}

.analytics-value {
    font-size: 13px;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.2;
}

.analytics-label {
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 2px;
}

.top-tweet {
    background: white;
    padding: 16px;
    border-radius: 10px;
    border-left: 4px solid var(--primary-color);
    margin-top:20px;
}

.tweet-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
}

.tweet-author {
    font-weight: 700;
    color: var(--text-primary);
}

.tweet-time {
    font-size: 13px;
    color: var(--text-muted);
}

.tweet-text {
    font-size: 14px;
    line-height: 1.3;
    color: var(--text-primary);
    margin-bottom: 12px;
}

.tweet-stats {
    display: flex;
    gap: 20px;
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 600;
}

/* News Sentiment */
.sentiment-overview {
    margin-bottom: 28px;
}

.sentiment-gauge {
    text-align: center;
    padding: 24px;
    background: white;
    border-radius: 12px;
}

.gauge-label {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 0px;
}

.gauge-value {
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 8px;
}

.gauge-value.positive {
    color: var(--success);
}

.gauge-score {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
}

/* News Analytics Compact */
.news-analytics-compact {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin: 20px 0;
    padding: 16px;
    background: var(--surface-light);
    border-radius: 12px;
}

.news-stat-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.news-stat-icon {
    font-size: 22px;
    flex-shrink: 0;
}

.news-stat-content {
    flex: 1;
}

.news-stat-value {
    font-size: 16px;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.2;
}

.news-stat-label {
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 2px;
}

.news-items-sentiment {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
}

.news-sentiment-item {
    background: white;
    padding: 12px;
    border-radius: 10px;
    transition: all 0.2s;
}

.news-sentiment-item:hover {
    transform: translateX(4px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.news-sentiment-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.sentiment-badge {
    font-size: 12px;
    font-weight: 700;
}

.sentiment-badge.positive {
    color: var(--success);
}

.sentiment-badge.neutral {
    color: var(--neutral);
}

.sentiment-badge.negative {
    color: var(--danger);
}

.news-source-small {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 600;
}

.news-title-small {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 6px;
    line-height: 1.3;
}

.sentiment-score-small {
    font-size: 12px;
    color: var(--text-secondary);
}

.sentiment-score-small strong {
    font-weight: 800;
}

.sentiment-score-small strong.positive {
    color: var(--success);
}

.sentiment-score-small strong.neutral {
    color: var(--neutral);
}

/* Hedge Fund Activity */
.hedge-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}

.summary-stat {
    text-align: center;
    padding: 14px;
    background: white;
    border-radius: 10px;
}

.summary-stat .stat-value {
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 6px;
}

.summary-stat .stat-value.positive {
    color: var(--success);
}

.summary-stat .stat-label {
    font-size: 12px;
    color: var(--text-secondary);
}

.hedge-funds-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
}

.hedge-fund-item {
    background: white;
    padding: 16px;
    border-radius: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.2s;
}

.hedge-fund-item:hover {
    transform: translateX(4px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.fund-info {
    flex: 1;
}

.fund-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.fund-action {
    font-size: 13px;
    font-weight: 600;
}

.fund-action.positive {
    color: var(--success);
}

.fund-action.neutral {
    color: var(--neutral);
}

.fund-details {
    text-align: right;
}

.fund-shares {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.fund-change {
    font-size: 13px;
    font-weight: 700;
}

.fund-change.positive {
    color: var(--success);
}

.fund-change.neutral {
    color: var(--neutral);
}

.fund-change.new {
    background: var(--primary-color);
    color: white;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
}

.hedge-insight {
    display: flex;
    gap: 16px;
    padding: 20px;
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border-radius: 12px;
    border-left: 4px solid var(--success);
}

.hedge-insight .insight-icon {
    font-size: 24px;
}

.hedge-insight p {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-primary);
    margin: 0;
}

/* Form Messages */
.form-message {
    padding: 16px;
    border-radius: 8px;
    font-weight: 600;
    margin-bottom: 16px;
    display: none;
}

.form-message.success {
    background: var(--surface-dark);
    color: var(--success);
    border: 2px solid var(--success);
    display: block;
}

.form-message.error {
    background: #fee2e2;
    color: var(--danger);
    border: 2px solid var(--danger);
    display: block;
}

/* Feature Highlight */
.feature-highlight {
    display: flex;
    gap: 20px;
    padding: 24px;
    background: linear-gradient(135deg, var(--surface-dark), var(--surface-light));
    border-radius: 16px;
    border-left: 4px solid var(--primary-color);
    margin-top: 32px;
}

.highlight-icon {
    font-size: 32px;
    flex-shrink: 0;
}

.highlight-content h4 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--text-primary);
}

.highlight-content p {
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-secondary);
    margin: 0;
}

/* Volatility Analysis */
.volatility-chart {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.volatility-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.vol-label {
    font-size: 14px;
    font-weight: 700;
    min-width: 60px;
}

.vol-bar-container {
    flex: 1;
    height: 12px;
    background: var(--border);
    border-radius: 6px;
    overflow: hidden;
}

.vol-bar {
    height: 100%;
    border-radius: 6px;
    transition: width 0.5s ease;
}

.vol-bar.high {
    background: var(--danger);
}

.vol-bar.medium {
    background: var(--warning);
}

.vol-bar.low {
    background: var(--success);
}

.vol-value {
    font-size: 14px;
    font-weight: 700;
    min-width: 60px;
    text-align: right;
}

.vol-value.high {
    color: var(--danger);
}

.vol-value.medium {
    color: var(--warning);
}

.vol-value.low {
    color: var(--success);
}

/* Monte Carlo Simulation */
.simulation-result {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 16px;
}

.sim-stat {
    padding: 16px;
    background: white;
    border-radius: 10px;
    text-align: center;
}

.sim-label {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.sim-value {
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 4px;
}

.sim-value.positive {
    color: var(--success);
}

.sim-value.negative {
    color: var(--danger);
}

.sim-change {
    font-size: 14px;
    font-weight: 700;
}

.sim-change.positive {
    color: var(--success);
}

.sim-change.negative {
    color: var(--danger);
}

.sim-note {
    font-size: 12px;
    color: var(--text-muted);
    text-align: center;
    font-style: italic;
}

/* Business Snapshot */
.business-overview {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.company-description {
    font-size: 15px;
    line-height: 1.8;
    color: var(--text-secondary);
    padding: 20px;
    background: var(--surface-light);
    border-radius: 12px;
    border-left: 4px solid var(--primary-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.company-description strong {
    color: var(--text-primary);
    font-size: 16px;
}

.business-metrics {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.business-metric {
    padding: 16px;
    background: white;
    border-radius: 10px;
    text-align: center;
}

.business-metric .metric-label {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.business-metric .metric-value {
    font-size: 20px;
    font-weight: 800;
    color: var(--text-primary);
}

.key-products h5,
.competitive-advantage h5 {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--text-primary);
}

.product-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.product-tag {
    padding: 6px 14px;
    background: var(--surface-dark);
    color: var(--text-primary);
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
}

.advantage-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.advantage-list li {
    padding: 10px 0 10px 28px;
    position: relative;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-secondary);
}

.advantage-list li:before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--success);
    font-weight: 700;
    font-size: 16px;
}

/* CEO Background */
.ceo-profile {
    display: flex;
    flex-direction: column;
    gap: 0px;
}

.ceo-header-info {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.ceo-avatar {
    width: 80px;
    height: 80px;
    background: var(--primary-color);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 800;
    flex-shrink: 0;
}

.ceo-basic h5 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 4px;
}

.ceo-title {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.ceo-tenure {
    font-size: 13px;
    color: var(--text-muted);
}

.ceo-stats {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ceo-stat {
    display: flex;
    gap: 16px;
    padding: 14px;
    background: white;
    border-radius: 10px;
}

.ceo-stat .stat-icon {
    font-size: 24px;
}

.ceo-stat .stat-label {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.ceo-stat .stat-value {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
}

.ceo-stat .stat-value.positive {
    color: var(--success);
}

.ceo-achievements h5 {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 12px;
}

.achievement-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.achievement-list li {
    padding: 10px 0 10px 28px;
    position: relative;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-secondary);
}

.achievement-list li:before {
    content: "🏆";
    position: absolute;
    left: 0;
    font-size: 16px;
}

.ceo-reputation {
    padding: 20px;
    background: white;
    border-radius: 12px;
    text-align: center;
}

.reputation-score {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.score-label {
    font-size: 14px;
    color: var(--text-secondary);
}

.reputation-score .score-value {
    font-size: 28px;
    font-weight: 800;
    color: var(--text-primary);
}

.score-badge {
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 700;
}

.score-badge.positive {
    background: var(--success);
    color: white;
}

/* Partnerships */
.partnerships-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
}

.partnership-item {
    background: white;
    padding: 20px;
    border-radius: 12px;
    border-left: 4px solid var(--border);
    transition: all 0.3s;
    position: relative;
}

.partnership-item:hover {
    transform: translateX(4px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.partnership-item.featured {
    border-left-color: var(--primary-color);
    background: linear-gradient(135deg, #ffffff, var(--surface-light));
}

.partnership-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
}

.partnership-badge.new {
    background: var(--primary-color);
    color: white;
}

.partnership-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

.partnership-header h5 {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    flex: 1;
    padding-right: 80px;
}

.partnership-date {
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
    padding-right: 0;
}

.partnership-description {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-secondary);
    margin-bottom: 12px;
}

.partnership-impact {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

.impact-label {
    color: var(--text-secondary);
}

.impact-value {
    font-weight: 700;
}

.impact-value.positive {
    color: var(--success);
}

.partnership-tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.partnership-tags .tag {
    padding: 4px 12px;
    background: var(--surface-dark);
    color: var(--text-primary);
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}

.notification-setup {
    display: flex;
    gap: 16px;
    padding: 24px;
    background: linear-gradient(135deg, var(--surface-dark), var(--surface-light));
    border-radius: 12px;
    border: 2px solid var(--primary-color);
}

.notification-icon {
    font-size: 32px;
}

.notification-content h5 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 8px;
}

.notification-content p {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 12px;
}

.btn-notification {
    padding: 10px 24px;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

.btn-notification:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
}

/* Smart Notifications */
.mock-notifications {
    background: white;
    border-radius: 16px;
    padding: 40px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

.notification-setup-panel h4 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 32px;
}

.alert-examples {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-bottom: 48px;
}

.alert-example-card {
    background: var(--surface);
    border: 2px solid var(--border);
    border-radius: 16px;
    padding: 24px;
    transition: all 0.3s;
}

.alert-example-card:hover {
    border-color: var(--primary-color);
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.alert-example-card .alert-icon {
    font-size: 32px;
    margin-bottom: 12px;
}

.alert-example-card h5 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 8px;
}

.alert-example-card p {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 16px;
    line-height: 1.5;
}

.alert-config {
    display: flex;
    gap: 8px;
}

.alert-select,
.alert-input {
    flex: 1;
    padding: 10px 14px;
    border: 2px solid var(--border);
    border-radius: 8px;
    font-size: 14px;
    transition: all 0.3s;
}

.alert-select:focus,
.alert-input:focus {
    outline: none;
    border-color: var(--primary-color);
}

.btn-enable-alert {
    padding: 10px 20px;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.3s;
}

.btn-enable-alert:hover {
    background: var(--primary-dark);
}

.notification-demo h5 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 24px;
}

/* Desktop: Column layout for demo notifications */
@media (min-width: 769px) {
    .demo-notifications {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }
}

.demo-notification {
    background: var(--surface);
    border: 2px solid var(--border);
    border-left: 4px solid var(--primary-color);
    border-radius: 12px;
    padding: 20px;
    transition: all 0.3s;
}

.demo-notification:hover {
    transform: translateX(4px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.notif-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.notif-icon {
    font-size: 24px;
}

.notif-title {
    flex: 1;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
}

.notif-time {
    font-size: 12px;
    color: var(--text-muted);
}

.notif-body {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-secondary);
    margin-bottom: 12px;
}

.notif-actions {
    display: flex;
    gap: 8px;
}

.notif-btn {
    padding: 8px 16px;
    background: white;
    border: 2px solid var(--border);
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.3s;
}

.notif-btn:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

/* Beta Signup Section */
.beta-signup {
    padding: 100px 0;
    background: linear-gradient(180deg, #f5faf7 0%, #eefcf4 100%);
}

/* Desktop: Grid layout for signup cards */
@media (min-width: 769px) {
    .signup-wrapper {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
        gap: 40px;
        margin-bottom: 32px;
    }
}

.signup-card {
    background: white;
    border-radius: 20px;
    padding: 48px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    border: 3px solid transparent;
    transition: all 0.3s;
    position: relative;
}

.signup-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
}

.beta-card {
    border-color: #8b5cf6;
}

.beta-card:hover {
    box-shadow: 0 20px 60px rgba(139, 92, 246, 0.2);
}

.launch-card {
    border-color: #10b981;
}

.launch-card:hover {
    box-shadow: 0 20px 60px rgba(16, 185, 129, 0.2);
}

.card-badge {
    display: inline-block;
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
    color: white;
    padding: 8px 20px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 24px;
}

.launch-card .card-badge {
    background: linear-gradient(135deg, #10b981, #059669);
}

.card-title {
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 16px;
    color: var(--text-primary);
}

.card-subtitle {
    font-size: 16px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 32px;
}

.benefits-list {
    margin-bottom: 32px;
}

.benefits-list .benefit-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
}

.benefits-list .benefit-item:last-child {
    border-bottom: none;
}

.benefits-list .benefit-icon {
    width: 24px;
    height: 24px;
    background: #8b5cf6;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
}

.launch-card .benefit-icon {
    background: #10b981;
}

.benefits-list .benefit-text {
    font-size: 15px;
    color: var(--text-primary);
    font-weight: 500;
}

.signup-form {
    margin-bottom: 24px;
}

.signup-form .form-input {
    width: 100%;
    padding: 16px 20px;
    border: 2px solid var(--border);
    border-radius: 12px;
    font-size: 16px;
    margin-bottom: 16px;
    transition: all 0.3s;
}

.signup-form .form-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.1);
}

.btn-submit {
    width: 100%;
    padding: 16px 32px;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s;
}

.btn-beta {
    background: #8b5cf6;
    color: white;
}

.btn-beta:hover {
    background: #7c3aed;
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(139, 92, 246, 0.3);
}

.btn-launch {
    background: #10b981;
    color: white;
}

.btn-launch:hover {
    background: #059669;
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(16, 185, 129, 0.3);
}

.card-note {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px;
    background: var(--surface);
    border-radius: 12px;
    font-size: 14px;
    color: var(--text-secondary);
}

.note-icon {
    font-size: 20px;
}

.privacy-note {
    text-align: center;
    font-size: 14px;
    color: var(--text-secondary);
    max-width: 600px;
    margin: 0 auto;
    padding-top: 32px;
    border-top: 1px solid var(--border);
}

/* Footer */
.footer {
    background: var(--text-primary);
    color: white;
    padding: 60px 0 24px;
}

.footer-content {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 40px;
    margin-bottom: 40px;
}

.footer-brand .logo {
    font-size: 32px;
}

.footer-brand .brand-name {
    font-size: 24px;
    font-weight: 700;
}

.footer-tagline {
    margin-top: 12px;
    opacity: 0.7;
    font-size: 14px;
}

.footer-links h4 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 16px;
}

.footer-links a {
    display: block;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    margin-bottom: 12px;
    transition: color 0.3s;
}

.footer-links a:hover {
    color: white;
}

.footer-bottom {
    text-align: center;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    opacity: 0.7;
    font-size: 14px;
}

/* Responsive Design */
@media (max-width: 768px) {
    /* ===== MOBILE HORIZONTAL SCROLLING FOR ALL CARD SECTIONS ===== */
    /* All grid sections are converted to horizontal scrollable containers on mobile */
    
    /* ===== HIDE SCROLLBAR BUT KEEP SWIPE FUNCTIONALITY ===== */
    /* Hide scrollbar for Chrome, Safari and Opera */
    .features-grid::-webkit-scrollbar,
    .stats-grid::-webkit-scrollbar,
    .analytics-grid::-webkit-scrollbar,
    .news-columns::-webkit-scrollbar,
    .x-analytics-extended::-webkit-scrollbar,
    .news-analytics-compact::-webkit-scrollbar,
    .stock-content-grid::-webkit-scrollbar,
    .sentiment-metrics::-webkit-scrollbar,
    .hedge-summary::-webkit-scrollbar,
    .business-metrics::-webkit-scrollbar,
    .ceo-stats-grid::-webkit-scrollbar,
    .geo-grid::-webkit-scrollbar,
    .initiatives-grid::-webkit-scrollbar,
    .alert-examples::-webkit-scrollbar,
    .example-queries::-webkit-scrollbar,
    .alert-list::-webkit-scrollbar,
    .demo-notifications::-webkit-scrollbar,
    .signup-wrapper::-webkit-scrollbar {
        display: none;
    }
    
    /* Hide scrollbar for IE, Edge and Firefox */
    .features-grid,
    .stats-grid,
    .analytics-grid,
    .news-columns,
    .x-analytics-extended,
    .news-analytics-compact,
    .stock-content-grid,
    .sentiment-metrics,
    .hedge-summary,
    .business-metrics,
    .ceo-stats-grid,
    .geo-grid,
    .initiatives-grid,
    .alert-examples,
    .example-queries,
    .alert-list,
    .demo-notifications,
    .signup-wrapper {
        -ms-overflow-style: none;  /* IE and Edge */
        scrollbar-width: none;  /* Firefox */
    }
    
    /* ===== CAROUSEL DOTS INDICATOR ===== */
    .carousel-dots {
        display: flex;
        justify-content: center;
        gap: 8px;
        margin-top: 5px;
        margin-bottom: 10px;
        padding: 10px 0;
    }
    
    .carousel-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #d1d5db;
        cursor: pointer;
        transition: all 0.3s ease;
    }
    
    .carousel-dot.active {
        background: #10b981;
        width: 24px;
        border-radius: 4px;
    }
    
    /* ===== SLOWER TRANSITIONS FOR ALL CARDS ON MOBILE ===== */
    .feature-card,
    .stat-card,
    .stock-card,
    .analytics-card,
    .news-card,
    .risk-card,
    .sentiment-card,
    .hedge-card,
    .business-card,
    .ceo-card,
    .geo-card,
    .initiative-card,
    .alert-card,
    .metric-compact,
    .partnership-item,
    .news-item,
    .quick-nav-btn,
    .action-btn {
        transition: all 1s ease !important;
    }
    
    /* Navigation */
    .navbar .container {
        padding: 0 20px;
    }
    
    .nav-brand {
        font-size: 20px;
    }
    
    .nav-links {
        gap: 12px;
    }
    
    .nav-links a:not(.btn-primary):not(.btn-secondary-nav) {
        display: none;
    }
    
    .navbar .btn-primary,
    .navbar .btn-secondary-nav {
        padding: 8px 16px;
        font-size: 14px;
    }
    
    /* Hero Section */
    .hero {
        padding: 100px 0 20px;
    }
    
    .hero-content {
        display: flex;
        flex-direction: column;
    }
    
    .hero-content > div:first-child {
        order: 1;
    }
    
    .hero-title {
        font-size: 40px;
        line-height: 1.2;
    }
    
    .hero-subtitle {
        font-size: 16px;
        order: 2;
        margin-bottom: 24px;
    }
    
    .hero-stats {
        flex-direction: column;
        gap: 32px;
        order: 3;
    }
    
    .hero-cta {
        flex-direction: column;
        gap: 16px;
        order: 4;
        margin-top: 24px;
        margin-bottom: 0;
    }
    
    /* Features Section */
    .features {
        padding: 40px 0;
    }
    
    /* Platform Preview Sections */
    .platform-preview {
        padding: 30px 0;
    }
    
    .preview-section {
        margin-bottom: 30px;
        padding-top: 20px;
    }
    
    .btn-large {
        width: 100%;
        text-align: center;
    }
    
    /* Hero CTA Buttons - Mobile Styling */
    .hero-cta .btn-large {
        border-radius: 50px;
        padding: 16px 24px;
        font-size: 16px;
    }
    
    /* Quick Nav Buttons */
    .quick-nav-buttons {
        flex-direction: column;
        gap: 12px;
    }
    
    .quick-nav-btn {
        width: 100%;
        border-radius: 50px;
        justify-content: center;
        text-align: center;
        padding: 18px 32px;
    }
    
    .quick-nav-btn .nav-text {
        text-align: center;
    }
    
    /* Features Grid - Auto Slideshow on Mobile */
    .features-grid {
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        gap: 20px;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 50px;
        margin: 0 0;
        padding-left: calc(50% - 50vw + 24px);
        padding-right: calc(50% - 50vw + 24px);
        position: relative;
    }
    
    .features-grid .feature-card {
        flex: 0 0 calc(100vw - 48px);
        max-width: calc(100vw - 48px);
        scroll-snap-align: center;
    }
    
    /* News Columns - Auto Slideshow on Mobile */
    .news-columns {
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        gap: 16px;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 50px;
        margin: 0 0;
        padding-left: calc(50% - 50vw + 24px);
        padding-right: calc(50% - 50vw + 24px);
    }
    
    .news-columns > * {
        flex: 0 0 calc(100vw - 48px);
        max-width: calc(100vw - 48px);
        scroll-snap-align: center;
    }

    /* Risk Metrics Grid - Compact 2x2 Grid on Mobile */
    .risk-metrics-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin-bottom: 20px;
        padding-bottom: 20px;
    }
    
    .risk-metric-card {
        padding: 12px;
        min-height: auto;
    }
    
    .risk-metric-label {
        font-size: 10px;
    }
    
    .risk-metric-value {
        font-size: 20px;
    }
    
    .risk-metric-status {
        font-size: 10px;
    }
    
    /* Hide the 5th card on mobile to keep it compact */
    .risk-metrics-grid .risk-metric-card:nth-child(5) {
        display: none;
    }
    
    /* Footer - Very compact on mobile */
    .footer {
        padding: 20px 0 12px;
    }
    
    .footer .container {
        padding: 0 20px;
    }
    
    .footer-content {
        display: flex;
        flex-direction: column;
        gap: 16px;
        margin-bottom: 16px;
    }
    
    .footer-brand {
        text-align: center;
        padding-bottom: 12px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .footer-brand .logo {
        font-size: 20px;
    }
    
    .footer-brand .brand-name {
        font-size: 18px;
    }
    
    .footer-tagline {
        margin-top: 6px;
        font-size: 11px;
    }
    
    .footer-links {
        text-align: center;
    }
    
    .footer-links h4 {
        font-size: 13px;
        margin-bottom: 6px;
    }
    
    .footer-links a {
        font-size: 11px;
        margin-bottom: 4px;
    }
    
    .footer-bottom {
        padding-top: 12px;
        font-size: 10px;
    }
    
    /* Stats Grid - Auto Slideshow on Mobile */
    .stats-grid {
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        gap: 16px;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 0;
        margin: 0;
        padding-left: calc(50% - 50vw + 40px);
        padding-right: calc(50% - 50vw + 40px);
    }
    
    .stats-grid .stat-card {
        flex: 0 0 calc(100vw - 100px);
        max-width: calc(100vw - 100px);
        scroll-snap-align: center;
        transition: all 0.8s ease !important;
        padding: 12px 16px;
        min-height: auto;
    }
    
    .stat-card .stat-icon {
        font-size: 24px;
        margin-bottom: 6px;
    }
    
    .stat-card .stat-label {
        font-size: 11px;
        margin-bottom: 4px;
    }
    
    .stat-card .stat-value {
        font-size: 22px;
        margin-bottom: 2px;
    }
    
    .stat-card .stat-subvalue {
        font-size: 12px;
    }

    /* Hide desktop version, show mobile version on mobile */
    .analytics-grid.analytics-desktop {
        display: none !important;
    }
    
    .analytics-grid.analytics-mobile {
        display: flex !important;
    }

    /* Analytics Grid - Auto Slideshow on Mobile (2 cards only) */
    .analytics-grid.analytics-mobile {
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        gap: 16px;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 20px;
        margin: 0 0;
        padding-left: calc(50% - 50vw + 40px);
        padding-right: calc(50% - 50vw + 40px);
    }
    
    /* Grouped card (first card) - same width as AI card */
    .analytics-grid .analytics-card.analytics-grouped {
        flex: 0 0 calc(100vw - 100px);
        max-width: calc(100vw - 100px);
        scroll-snap-align: center;
        padding: 16px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    
    /* AI Insights card (second card) - same width */
    .analytics-grid .analytics-card.ai-insights {
        flex: 0 0 calc(100vw - 100px);
        max-width: calc(100vw - 100px);
        scroll-snap-align: center;
        padding: 16px;
    }
    
    /* Grouped sections styling */
    .analytics-grouped .grouped-section {
        flex: 1;
    }
    
    .analytics-grouped .grouped-section h4 {
        font-size: 13px;
        margin-bottom: 10px;
        font-weight: 700;
    }
    
    .analytics-grouped .grouped-divider {
        height: 1px;
        background: var(--border);
        margin: 12px 0;
    }
    
    /* Compact content in grouped sections */
    .analytics-grouped .sector-legend {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 4px;
        font-size: 10px;
    }
    
    .analytics-grouped .legend-item {
        font-size: 10px;
    }
    
    .analytics-grouped .correlation-row,
    .analytics-grouped .volatility-item {
        font-size: 11px;
        margin-bottom: 6px;
    }
    
    .analytics-grouped .sector-bar,
    .analytics-grouped .correlation-bar,
    .analytics-grouped .vol-bar-container {
        height: 16px;
        margin: 4px 0;
    }
    
    .analytics-grouped .metric-row {
        margin-top: 8px !important;
        font-size: 11px;
        padding: 6px 0;
    }

    .x-analytics-extended {
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        gap: 16px;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 50px;
        margin: 0 0;
        padding-left: calc(50% - 50vw + 24px);
        padding-right: calc(50% - 50vw + 24px);
    }
    
    .x-analytics-extended > * {
        flex: 0 0 calc(100vw - 48px);
        max-width: calc(100vw - 48px);
        scroll-snap-align: center;
    }

    .news-analytics-compact {
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        gap: 16px;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 0px;
        margin: 0 0;
        padding-left: calc(50% - 50vw + 24px);
        padding-right: calc(50% - 50vw + 24px);
    }
    
    .news-analytics-compact > * {
        flex: 0 0 calc(100vw - 48px);
        max-width: calc(100vw - 48px);
        scroll-snap-align: center;
    }
    
    /* Beta Signup Section */
    .beta-signup {
        padding: 40px 0;
    }
    
    /* Reduce space above survey button */
    .beta-signup .container > div:first-child {
        margin-bottom: 20px;
    }
    
    /* Signup Cards Slideshow */
    .signup-wrapper {
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        gap: 16px;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 50px;
        margin: 0 -24px;
        padding-left: 40px;
        padding-right: 40px;
    }
    
    .signup-card {
        flex: 0 0 calc(100vw - 80px);
        scroll-snap-align: center;
        padding: 32px 24px;
    }
    
    /* Center and improve readability of beta spots text on mobile */
    .signup-card .card-note {
        justify-content: center;
        text-align: center;
        flex-direction: column;
        gap: 6px;
        padding: 14px 16px;
        font-size: 13px;
        line-height: 1.5;
    }
    
    .signup-card .note-icon {
        font-size: 22px;
    }
    
    .mock-stock-detail {
        padding: 20px;
        border-radius: 12px;
    }
    
    .stock-card {
        padding: 16px;
        overflow-x: hidden;
        overflow-y: hidden; /* No vertical scroll */
        height: 820px !important;
        min-height: 820px !important;
        max-height: 820px !important;
    }
    
    /* Disable hover effect on mobile for stock cards */
    .stock-card:hover {
        transform: none !important;
        box-shadow: none !important;
    }
    
    .stock-content-grid .stock-card:hover {
        transform: none !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    }
    
    /* Hide nested slideshows inside stock cards on mobile */
    .stock-card .hedge-summary,
    .stock-card .geo-grid,
    .stock-card .initiatives-grid {
        display: none !important;
    }
    
    /* Hide carousel dots inside stock cards */
    .stock-card .carousel-dots {
        display: none !important;
    }
    
    /* Fix card width and centering in stock slideshow */
    .stock-content-grid > * {
        flex: 0 0 calc(100vw - 100px);
        max-width: calc(100vw - 100px);
        scroll-snap-align: center;
        height: 820px !important;
        min-height: 820px !important;
        max-height: 820px !important;
        overflow: hidden;
    }
    
    /* Specific heights for individual card types - no internal scrolling */
    .stock-content-grid .ceo-card,
    .stock-content-grid .business-snapshot-card,
    .stock-content-grid .sentiment-card,
    .stock-content-grid .news-sentiment-card {
        height: 820px !important;
        min-height: 820px !important;
        max-height: 820px !important;
        overflow: hidden;
        border-bottom: none !important;
    }
    
    .stock-content-grid {
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        gap: 12px;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 20px;
        margin: 0 0;
        padding-left: calc(50% - 50vw + 50px);
        padding-right: calc(50% - 50vw + 50px);
    }
    
    /* Minimize stock cards on mobile - hide less important content */
    .stock-card .ceo-achievements,
    .stock-card .ceo-publications,
    .stock-card .competitive-advantage,
    .stock-card .strategic-initiatives,
    .stock-card .achievement-list li:nth-child(n+3),
    .stock-card .comparable-table tbody tr:nth-child(n+4),
    .stock-card .news-item:nth-child(n+3),
    .stock-card .partnership-item:nth-child(n+3),
    .stock-card .alert-card:nth-child(n+3),
    .stock-card .news-sentiment-item:nth-child(n+3) {
        display: none;
    }
    
    /* Show only first 2 news in news sentiment card */
    .news-sentiment-card .news-sentiment-item:nth-child(n+3) {
        display: none !important;
    }
    
    /* Hide view all news button on mobile */
    .stock-card .view-all-news,
    .news-sentiment-card .view-all-news {
        display: none !important;
    }
    
    /* Hide Previous Role stat in CEO card */
    .stock-card .ceo-stat:nth-child(2) {
        display: none;
    }
    
    /* Keep Career History visible */
    .stock-card .ceo-career-history {
        display: block;
        margin-top: 0;
        padding-top: 0;
    }
    
    /* Compact career history - remove gaps */
    .stock-card .ceo-career-history h5 {
        font-size: 11px;
        margin-bottom: 4px;
        margin-top: 0;
        padding-top: 0;
    }
    
    .stock-card .career-timeline {
        display: flex;
        flex-direction: column;
        gap: 3px;
    }
    
    .stock-card .timeline-item {
        display: flex;
        gap: 5px;
        padding: 3px 5px;
        background: var(--surface);
        border-radius: 6px;
    }
    
    .stock-card .timeline-date {
        font-size: 8px;
        color: var(--text-secondary);
        min-width: 60px;
        flex-shrink: 0;
    }
    
    .stock-card .timeline-content {
        flex: 1;
    }
    
    .stock-card .timeline-content strong {
        font-size: 9px;
        display: block;
        margin-bottom: 1px;
    }
    
    .stock-card .timeline-content p {
        font-size: 8px;
        line-height: 1.1;
        margin: 0;
    }
    
    /* Keep Leadership Score visible - compact */
    .stock-card .reputation-metrics {
        display: block;
        margin-top: 4px;
        padding-top: 0;
    }
    
    .stock-card .reputation-score-card {
        padding: 5px;
        background: var(--surface);
        border-radius: 6px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .stock-card .score-label {
        font-size: 15px;
        font-weight: 600;
    }
    
    .stock-card .score-value {
        font-size: 30px;
        font-weight: 700;
        color: var(--primary-color);
    }
    
    .stock-card .score-badge {
        font-size: 8px;
        padding: 2px 5px;
        border-radius: 4px;
    }
    
    /* Hide media buzz section if exists */
    .stock-card .media-buzz {
        display: none;
    }
    
    /* Show and compact CEO boards on mobile */
    .stock-card .ceo-boards {
        display: block;
        margin-top: 4px;
    }
    
    .stock-card .ceo-boards h5 {
        font-size: 11px;
        margin-bottom: 4px;
        margin-top: 0;
    }
    
    .stock-card .board-list {
        display: flex;
        flex-direction: column;
        gap: 3px;
    }
    
    .stock-card .board-item {
        padding: 4px 6px;
        background: var(--surface);
        border-radius: 6px;
        font-size: 9px;
    }
    
    .stock-card .board-item strong {
        font-size: 10px;
        display: block;
        margin-bottom: 1px;
    }
    
    /* Compact CEO profile - remove all gaps */
    .stock-card .ceo-header-info {
        flex-direction: row;
        gap: 6px;
        margin-bottom: 4px;
        padding-bottom: 0;
    }
    
    .stock-card .ceo-avatar {
        width: 40px;
        height: 40px;
        font-size: 14px;
    }
    
    .stock-card .ceo-basic h5 {
        font-size: 13px;
        margin-bottom: 1px;
    }
    
    .stock-card .ceo-title,
    .stock-card .ceo-tenure {
        font-size: 9px;
    }
    
    /* Compact CEO stats grid - remove gaps */
    .stock-card .ceo-stats-grid {
        grid-template-columns: 1fr;
        gap: 3px;
        margin-bottom: 0;
        padding-bottom: 0;
    }
    
    .stock-card .ceo-stat {
        padding: 3px 5px;
        display: flex;
        flex-direction: row;
        gap: 5px;
        align-items: center;
    }
    
    .stock-card .stat-icon {
        font-size: 14px;
        flex-shrink: 0;
    }
    
    .stock-card .stat-info {
        flex: 1;
    }
    
    .stock-card .stat-label {
        font-size: 8px;
        margin-bottom: 1px;
    }
    
    .stock-card .stat-value {
        font-size: 10px;
        margin-bottom: 0;
    }
    
    .stock-card .stat-detail {
        display: none;
    }
    
    /* Compact business metrics */
    .stock-card .business-card {
        padding: 10px;
        margin-bottom: 10px;
    }
    
    .stock-card .business-card h5 {
        font-size: 13px;
        margin-bottom: 6px;
    }
    
    /* Truncate company description to 3 lines on mobile */
    .stock-card .company-description {
        display: -webkit-box !important;
        -webkit-line-clamp: 6 !important;
        line-clamp: 3 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        padding: 4px !important;
        font-size: 11px !important;
        line-height: 1.6 !important;
        max-height: 200px !important;
        margin-bottom: 0 !important;
    }
    
    /* Hide specific business metrics on mobile, keep only required ones */
    .stock-card .business-metric:nth-child(4) {
        display: none; /* Operating CF */
    }
    
    .stock-card .business-metric:nth-child(8) {
        display: none; /* CEO */
    }
    
    .stock-card .business-metrics {
        margin-bottom: 0;
        gap: 6px;
        margin-top: 13px;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
    
    .stock-card .business-metric {
        padding: 8px;
        background: #ffffff;
        border: 1px solid var(--border-color);
        border-radius: 8px;
        text-align: center;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    }
    
    .stock-card .metric-label {
        font-size: 9px;
        color: var(--text-secondary);
        margin-bottom: 3px;
        display: block;
    }
    
    .stock-card .metric-value {
        font-size: 12px;
        font-weight: 700;
        color: var(--text-primary);
        display: block;
    }
    
    /* Keep revenue breakdown visible */
    .stock-card .revenue-breakdown {
        margin-top: 10;
        margin-bottom: 0;
        padding-top: 0;
    }
    
    .stock-card .revenue-breakdown h5 {
        font-size: 12px;
        margin-bottom: 6px;
        margin-top: 0;
        padding-top: 0;
    }
    
    /* Keep revenue segments visible with graphics */
    .stock-card .revenue-segments {
        display: block;
    }
    
    .stock-card .segment-item {
        margin-bottom: 6px;
    }
    
    .stock-card .segment-header {
        display: flex;
        justify-content: space-between;
        font-size: 10px;
        margin-bottom: 3px;
    }
    
    .stock-card .segment-bar {
        height: 6px;
        background: var(--surface);
        border-radius: 3px;
        overflow: hidden;
    }
    
    .stock-card .segment-fill {
        height: 100%;
        transition: width 0.3s ease;
    }
    
    /* Show and compact geographic revenue on mobile */
    .stock-card .geographic-revenue {
        display: block;
        margin-top: 4px;
        margin-bottom: 0;
    }
    
    .stock-card .geographic-revenue h5 {
        font-size: 11px;
        margin-bottom: 4px;
        margin-top: 0;
    }
    
    .stock-card .geo-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr);
        gap: 4px;
    }
    
    .stock-card .geo-item {
        padding: 4px 6px;
        background: var(--surface);
        border-radius: 6px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 9px;
    }
    
    .stock-card .geo-region {
        font-weight: 600;
    }
    
    .stock-card .geo-percent {
        color: var(--primary-color);
        font-weight: 700;
    }
    
    /* Hide key products section on mobile */
    .stock-card .key-products {
        display: none;
    }
    
    .stock-card .metric-compact {
        padding: 6px;
        margin-bottom: 4px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .stock-card .metric-compact .label {
        font-size: 10px;
    }
    
    .stock-card .metric-compact .value {
        font-size: 12px;
    }
    
    /* Compact sentiment metrics on mobile */
    .stock-card .sentiment-metrics {
        display: flex !important;
        gap: 4px;
        margin-top: 4px;
        margin-bottom: 4px;
    }
    
    .stock-card .sentiment-metrics .metric-item {
        flex: 1;
        padding: 4px;
        text-align: center;
    }
    
    /* Compact X analytics extended on mobile - remove parent div styling */
    .stock-card .x-analytics-extended {
        display: block !important;
        margin-top: 4px;
        padding: 0;
        background: none;
        border: none;
    }
    
    .stock-card .x-analytics-extended h5 {
        margin-bottom: 4px;
        margin-top: 0;
        padding: 0;
    }
    
    .stock-card .x-analytics-extended .analytics-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 4px;
        margin: 0;
        padding: 0;
    }
    
    .stock-card .x-analytics-extended .analytics-item {
        padding: 4px;
        background: var(--surface);
        border-radius: 6px;
        display: flex;
        gap: 4px;
        align-items: center;
    }
    
    /* Compact tweet display */
    .stock-card .top-tweet {
        margin-top: 4px;
    }
    
    .stock-card .tweet-header {
        margin-bottom: 3px;
    }
    
    .stock-card .tweet-stats {
        margin-top: 3px;
    }
    
    /* Compact news sentiment on mobile */
    .stock-card .sentiment-overview {
        margin-bottom: 4px;
    }
    
    .stock-card .sentiment-gauge {
        padding: 6px;
        text-align: center;
    }
    
    .stock-card .gauge-label {
        font-size: 13px;
    }
    
    .stock-card .gauge-value {
        font-size: 25px;
    }
    
    .stock-card .gauge-score {
        font-size: 12px;
    }
    
    .stock-card .sentiment-distribution {
        margin-top: 4px;
    }
    
    .stock-card .sent-dist-item {
        margin-bottom: 3px;
    }
    
    .stock-card .dist-label {
        font-size: 13px;
    }
    
    .stock-card .dist-bar {
        height: 8px;
        margin: 2px 0;
    }
    
    .stock-card .dist-percent {
        font-size: 12px;
    }
    
    /* Show news analytics stats on mobile */
    .stock-card .news-analytics-compact {
        display: flex !important;
        gap: 4px;
        margin: 4px 0;
        margin-bottom: 30px;
    }
    
    .stock-card .news-stat-item {
        flex: 1;
        padding: 4px;
        background: #ffffff;
        border: 1px solid var(--border-color);
        border-radius: 6px;
        display: flex;
        gap: 4px;
        align-items: center;
    }
    
    .stock-card .news-stat-icon {
        font-size: 14px;
        flex-shrink: 0;
    }
    
    .stock-card .news-stat-value {
        font-size: 14px;
        font-weight: 700;
    }
    
    .stock-card .news-stat-label {
        font-size: 10px;
    }
    
    /* Compact sentiment score and breakdown */
    .stock-card .sentiment-score {
        margin: 4px 0;
    }
    
    .stock-card .sentiment-breakdown {
        margin-bottom: 4px;
    }
    
    .stock-card .sentiment-bar-container {
        margin-bottom: 4px;
    }
    
    .stock-card .sentiment-labels {
        margin-bottom: 2px;
    }
    
    /* Compact institutional valuation on mobile */
    .stock-card .valuation-summary {
        margin-bottom: 6px;
        display: flex;
        gap: 6px;
    }
    
    .stock-card .valuation-rating {
        flex: 1;
        text-align: center;
        padding: 4px;
        background: var(--surface);
        border-radius: 6px;
    }
    
    .stock-card .rating-badge {
        font-size: 10px;
        padding: 3px 6px;
        margin-bottom: 3px;
    }
    
    .stock-card .rating-score {
        font-size: 14px;
        font-weight: 700;
        margin-bottom: 2px;
    }
    
    .stock-card .rating-label {
        font-size: 7px;
    }
    
    .stock-card .valuation-target {
        flex: 1;
        text-align: center;
        padding: 4px;
        background: var(--surface);
        border-radius: 6px;
    }
    
    .stock-card .target-label {
        font-size: 7px;
        margin-bottom: 2px;
    }
    
    .stock-card .target-value {
        font-size: 14px;
        font-weight: 700;
        margin-bottom: 2px;
    }
    
    .stock-card .target-upside {
        font-size: 9px;
    }
    
    /* Hide comparable analysis on mobile */
    .stock-card .comparable-analysis {
        display: none;
    }
    
    /* Optimize analyst consensus for mobile */
    .stock-card .analyst-consensus {
        margin-bottom: 8px;
    }
    
    .stock-card .analyst-consensus h5 {
        font-size: 11px;
        margin-bottom: 6px;
    }
    
    .stock-card .consensus-overview {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 4px;
        margin-bottom: 8px;
    }
    
    .stock-card .consensus-stat {
        padding: 6px 8px;
        background: #ffffff;
        border-radius: 6px;
        border: 1px solid var(--border);
        text-align: center;
    }
    
    .stock-card .consensus-stat .stat-label {
        font-size: 7px;
        margin-bottom: 2px;
        font-weight: 600;
    }
    
    .stock-card .consensus-stat .stat-value {
        font-size: 13px;
        font-weight: 800;
    }
    
    .stock-card .rating-breakdown {
        display: grid;
        gap: 6px;
    }
    
    .stock-card .rating-bar-item {
        display: grid;
        grid-template-columns: 60px 1fr 35px;
        gap: 6px;
        align-items: center;
    }
    
    .stock-card .rating-label {
        font-size: 8px;
        font-weight: 600;
    }
    
    .stock-card .rating-bar {
        height: 16px;
        border-radius: 4px;
    }
    
    .stock-card .rating-count {
        font-size: 8px;
        font-weight: 700;
        text-align: right;
    }
    
    /* Optimize institutional recommendation for mobile */
    .stock-card .institutional-recommendation {
        margin-top: 6px;
    }
    
    .stock-card .recommendation-badge {
        padding: 4px 6px;
        gap: 4px;
        border-radius: 4px;
    }
    
    .stock-card .badge-icon {
        font-size: 12px;
        width: 18px;
        height: 18px;
        flex-shrink: 0;
        line-height: 1;
    }
    
    .stock-card .badge-content {
        flex: 1;
        min-width: 0;
    }
    
    .stock-card .badge-title {
        font-size: 13px;
        margin-bottom: 1px;
        line-height: 1.1;
        letter-spacing: 0.2px;
    }
    
    .stock-card .badge-subtitle {
        font-size: 10px;
        line-height: 1.2;
        opacity: 0.9;
    }
    
    .stock-card .show-analysis-btn {
        padding: 10px 8px;
        font-size: 8px;
        margin-top: 4px;
        border-radius: 4px;
        gap: 3px;
    }
    
    .stock-card .btn-icon {
        font-size: 10px;
    }
    
    .stock-card .btn-text {
        font-size: 13px;
    }
    
    .stock-card .btn-arrow {
        font-size: 8px;
    }
    
    /* Compact lists */
    .stock-card .partnership-item,
    .stock-card .news-item {
        padding: 8px;
        margin-bottom: 6px;
    }
    
    .stock-card .partnership-item h6,
    .stock-card .news-item h6 {
        font-size: 11px;
        margin-bottom: 3px;
    }
    
    .stock-card .partnership-item p,
    .stock-card .news-item p {
        font-size: 10px;
        line-height: 1.3;
    }
    
    .stock-card .partnership-date,
    .stock-card .news-date {
        font-size: 9px;
    }
    
    /* Hide extra items in lists */
    .stock-card .initiative-card:nth-child(n+3),
    .stock-card .geo-card:nth-child(n+3) {
        display: none;
    }
    
    /* Reduce card header size */
    .stock-card .card-header h4 {
        font-size: 15px;
        margin-bottom: 4px;
    }
    
    .stock-card .timeframe {
        font-size: 10px;
    }
    
    /* Compact sections spacing */
    .stock-card .ceo-profile > *,
    .stock-card .business-card,
    .stock-card > section {
        margin-bottom: 10px;
    }
    
    .stock-card h5 {
        font-size: 12px;
        margin-bottom: 6px;
    }
    
    .stock-header {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        text-align: left;
    }
    
    .stock-info {
        text-align: left;
        flex: 1;
    }
    
    .stock-symbol {
        text-align: left;
        margin-bottom: 2px;
    }
    
    .stock-name {
        text-align: left;
        margin: 0;
    }
    
    /* ===== CUSTOM ALERTS SLIDESHOWS (4s timer) ===== */
    /* Example Queries Slideshow */
    .example-queries {
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        gap: 12px;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 0px;
        margin: 0 -24px;
        padding-left: calc(50% - 50vw + 24px);
        padding-right: calc(50% - 50vw + 24px);
    }
    
    .example-queries .query-example {
        flex: 0 0 calc(100vw - 80px);
        scroll-snap-align: center;
        min-height: 80px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 16px 20px;
        font-size: 14px;
        line-height: 1.5;
    }
    
    /* Active Alerts Slideshow */
    .alert-list {
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        gap: 12px;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 0px;
        margin: 0 -24px;
        padding-left: calc(50% - 50vw + 24px);
        padding-right: calc(50% - 50vw + 24px);
    }
    
    .alert-list .active-alert-item {
        flex: 0 0 calc(100vw - 80px);
        scroll-snap-align: center;
        flex-direction: column;
        align-items: flex-start;
        padding: 14px 16px;
    }
    
    .alert-list .alert-meta {
        width: 100%;
        justify-content: space-between;
        margin-top: 8px;
    }
    
    .alert-list .alert-emoji {
        font-size: 20px;
    }
    
    .alert-list .alert-text {
        font-size: 13px;
        line-height: 1.4;
    }
    
    /* Demo Notifications Slideshow */
    .demo-notifications {
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        gap: 12px;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 0px;
        margin: 0 -24px;
        padding-left: calc(50% - 50vw + 24px);
        padding-right: calc(50% - 50vw + 24px);
    }
    
    .demo-notifications .demo-notification {
        flex: 0 0 calc(100vw - 80px);
        scroll-snap-align: center;
        padding: 16px 18px;
    }
    
    .demo-notifications .notif-header {
        margin-bottom: 10px;
        gap: 10px;
    }
    
    .demo-notifications .notif-icon {
        font-size: 20px;
    }
    
    .demo-notifications .notif-title {
        font-size: 14px;
    }
    
    .demo-notifications .notif-time {
        font-size: 11px;
    }
    
    .demo-notifications .notif-body {
        font-size: 13px;
        line-height: 1.5;
        margin-bottom: 10px;
    }
    
    .demo-notifications .notif-btn {
        padding: 7px 14px;
        font-size: 12px;
    }
    
    .stock-price {
        text-align: right;
        width: auto;
    }
    
    .price-main {
        text-align: right;
        margin-bottom: 2px;
    }
    
    .price-change {
        text-align: right;
        margin: 0;
    }
    
    /* Sentiment Metrics - Auto Slideshow on Mobile */
    .sentiment-metrics {
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        gap: 16px;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 10px;
        padding-top: 10px;
        margin: 0 0;
        padding-left: calc(50% - 50vw + 24px);
        padding-right: calc(50% - 50vw + 24px);
    }
    
    .sentiment-metrics > * {
        flex: 0 0 calc(100vw - 48px);
        max-width: calc(100vw - 48px);
        scroll-snap-align: center;
    }

    /* Hedge Summary - Auto Slideshow on Mobile */
    .hedge-summary {
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        gap: 16px;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 50px;
        margin: 0 0;
        padding-left: calc(50% - 50vw + 24px);
        padding-right: calc(50% - 50vw + 24px);
    }
    
    .hedge-summary > * {
        flex: 0 0 calc(100vw - 48px);
        max-width: calc(100vw - 48px);
        scroll-snap-align: center;
    }
    
    /* Portfolio */
    .portfolio-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }
    
    .portfolio-actions {
        width: 100%;
        flex-direction: column;
    }
    
    .action-btn {
        width: 100%;
        justify-content: center;
        border-radius: 50px;
    }
    
    /* Hide EUR currency badge on mobile */
    .portfolio-currency {
        display: none;
    }
    
    /* Business Metrics - Auto Slideshow on Mobile */
    .business-metrics {
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        gap: 12px;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 0px;
        margin: 0 0;
        padding-left: calc(50% - 50vw + 24px);
        padding-right: calc(50% - 50vw + 24px);
    }
    
    .business-metrics > * {
        flex: 0 0 calc(50vw - 30px);
        max-width: calc(50vw - 30px);
        scroll-snap-align: center;
    }
    
    /* CEO Profile */
    .ceo-header-info {
        flex-direction: column;
        text-align: center;
    }
    
    /* CEO Stats Grid - Auto Slideshow on Mobile */
    .ceo-stats-grid {
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        gap: 16px;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 50px;
        margin: 0 0;
        padding-left: calc(50% - 50vw + 24px);
        padding-right: calc(50% - 50vw + 24px);
    }
    
    .ceo-stats-grid > * {
        flex: 0 0 calc(100vw - 48px);
        max-width: calc(100vw - 48px);
        scroll-snap-align: center;
    }

    /* Geographic Grid - Auto Slideshow on Mobile */
    .geo-grid {
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        gap: 12px;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 50px;
        margin: 0 0;
        padding-left: calc(50% - 50vw + 24px);
        padding-right: calc(50% - 50vw + 24px);
    }
    
    .geo-grid > * {
        flex: 0 0 calc(50vw - 30px);
        max-width: calc(50vw - 30px);
        scroll-snap-align: center;
    }

    /* Initiatives Grid - Auto Slideshow on Mobile */
    .initiatives-grid {
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        gap: 16px;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 50px;
        margin: 0 0;
        padding-left: calc(50% - 50vw + 24px);
        padding-right: calc(50% - 50vw + 24px);
    }
    
    .initiatives-grid > * {
        flex: 0 0 calc(100vw - 48px);
        max-width: calc(100vw - 48px);
        scroll-snap-align: center;
    }
    
    /* Revenue Segments */
    .revenue-segments {
        gap: 12px;
    }
    
    /* Alert Examples - Auto Slideshow on Mobile */
    .alert-examples {
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        gap: 16px;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 50px;
        margin: 0 0;
        padding-left: calc(50% - 50vw + 24px);
        padding-right: calc(50% - 50vw + 24px);
    }
    
    .alert-examples > * {
        flex: 0 0 calc(100vw - 48px);
        max-width: calc(100vw - 48px);
        scroll-snap-align: center;
    }
    
    .alert-config {
        flex-direction: column;
    }
    
    /* Container Padding */
    .container {
        padding: 0 20px;
    }
    
    /* Section Titles */
    .section-title {
        font-size: 32px;
    }
    
    .preview-title {
        font-size: 24px;
    }
    
    /* Cards */
    .stock-card {
        padding: 20px;
    }
    
    .feature-card {
        padding: 24px;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    /* Feature card title with icon inline */
    .feature-card .feature-icon {
        display: inline;
        font-size: 24px;
        margin-bottom: 0;
        margin-right: 8px;
    }
    
    .feature-card h3 {
        display: inline;
        font-size: 18px;
        text-align: center;
    }
    
    .feature-card p {
        text-align: center;
        margin-top: 12px;
        font-size: 14px;
    }
    
    /* Institutional Valuation - Mobile Optimization */
    .comparable-table {
        border: none;
        overflow: visible;
    }
    
    .comp-row.header {
        display: none;
    }
    
    .comp-row {
        display: block;
        padding: 16px;
        margin-bottom: 12px;
        border: 2px solid var(--border);
        border-radius: 8px;
        background: white;
    }
    
    .comp-row.highlight {
        border-left: 4px solid var(--primary-color);
        background: linear-gradient(135deg, #f0fdf4 0%, white 100%);
    }
    
    .comp-row.footer {
        border-top: 2px solid var(--border);
        background: var(--surface-light);
    }
    
    .comp-row span {
        display: flex;
        justify-content: space-between;
        padding: 8px 0;
        border-bottom: 1px solid #f0f0f0;
    }
    
    .comp-row span:last-child {
        border-bottom: none;
    }
    
    .comp-row span::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--text-secondary);
        font-size: 13px;
    }
    
    .comp-name {
        font-size: 18px;
        font-weight: 700;
        display: block;
        margin-bottom: 12px;
        padding-bottom: 12px;
        border-bottom: 2px solid var(--border);
    }
    
    .comp-name::before {
        content: '';
    }
    
    .comparable-analysis,
    .analyst-consensus,
    .dcf-valuation {
        margin-bottom: 24px;
    }
    
    .valuation-summary {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .consensus-overview {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }
    
    .consensus-stat {
        padding: 12px;
    }
    
    /* Sensitivity Table - Mobile */
    .sensitivity-analysis {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .sensitivity-table {
        font-size: 11px;
        max-width: 100%; /* Remove min-width to prevent overflow */
    }
    
    .sensitivity-table th,
    .sensitivity-table td {
        padding: 6px 4px;
        font-size: 10px;
    }
    
    /* Metrics Grid Compact - Auto Slideshow on Mobile */
    .metrics-grid-compact {
        display: flex;
        flex-direction: row;
        overflow-x: hidden;
        overflow-y: hidden;
        gap: 8px;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 50px;
        margin: 0 -24px;
        padding-left: 24px;
        padding-right: 24px;
    }
    
    .metrics-grid-compact .metric-compact {
        flex: 0 0 calc(100% - 48px);
        scroll-snap-align: center;
    }
    
    .metric-compact {
        padding: 10px 12px;
        font-size: 13px;
    }
    
    /* Partnerships - Mobile Fix */
    .partnership-item {
        padding-top: 40px;
    }
    
    .partnership-badge {
        top: 12px;
        right: 12px;
    }
    
    .partnership-header {
        flex-direction: column;
        gap: 8px;
    }
    
    .partnership-header h5 {
        padding-right: 0;
        margin-bottom: 4px;
    }
    
    .partnership-date {
        align-self: flex-start;
    }
}

@media (max-width: 480px) {
    /* Typography */
    .hero-title {
        font-size: 32px;
    }
    
    .section-title {
        font-size: 28px;
    }
    
    .preview-title {
        font-size: 20px;
    }
    
    /* Navigation */
    .nav-brand {
        font-size: 18px;
    }
    
    .navbar .btn-primary,
    .navbar .btn-secondary-nav {
        padding: 6px 12px;
        font-size: 13px;
    }
    
    /* Signup */
    .signup-wrapper {
        min-width: unset;
    }
    
    .signup-card {
        padding: 24px 16px;
    }
    
    .card-title {
        font-size: 22px;
    }
    
    .card-subtitle {
        font-size: 14px;
    }
    
    /* Portfolio */
    .portfolio-value .value {
        font-size: 32px;
    }
    
    .portfolio-value .label {
        font-size: 13px;
    }
    
    /* Stock */
    .stock-symbol {
        font-size: 32px;
    }
    
    .stock-name {
        font-size: 14px;
    }
    
    .price-main {
        font-size: 28px;
    }
    
    .price-change {
        font-size: 14px;
    }
    
    /* Cards */
    .stock-card {
        padding: 12px;
        overflow-x: hidden;
    }
    
    .mock-stock-detail {
        padding: 16px;
        border-radius: 8px;
    }
    
    .card-header h4 {
        font-size: 15px;
    }
    
    /* Business Metrics */
    .business-metrics {
        grid-template-columns: 1fr;
    }
    
    .business-metric {
        padding: 12px;
    }
    
    /* Institutional Valuation - Extra Small Screens */
    .comp-row {
        grid-template-columns: 1fr 0.7fr 0.7fr 0.7fr 0.8fr;
        gap: 6px;
        padding: 8px 10px;
        font-size: 11px;
    }
    
    .sensitivity-table {
        font-size: 9px;
        max-width: 100%; /* Remove min-width to prevent overflow */
    }
    
    .sensitivity-table th,
    .sensitivity-table td {
        padding: 4px 2px;
        font-size: 9px;
    }
    
    .consensus-overview {
        grid-template-columns: 1fr;
    }
    
    .valuation-target,
    .valuation-rating {
        padding: 12px;
    }
    
    /* Remove unnecessary borders and padding */
    .comparable-table,
    .analyst-consensus > div,
    .dcf-valuation > div {
        border: none;
    }
    
    .comp-insight {
        padding: 10px;
        font-size: 12px;
    }
}
    
    /* Geo Grid */
    .geo-grid {
        grid-template-columns: 1fr;
    }
    
    /* Hero CTA */
    .hero-cta {
        gap: 12px;
    }
    
    .btn-large {
        padding: 14px 24px;
        font-size: 15px;
    }
    
    /* Stats */
    .stat-value {
        font-size: 28px;
    }
    
    .stat-label {
        font-size: 14px;
    }
    
    /* Feature Cards */
    .feature-card {
        padding: 20px;
    }
    
    .feature-icon {
        font-size: 36px;
    }
    
    /* Container */
    .container {
        padding: 0 16px;
    }
    
    /* Sentiment Score */
    .score-circle {
        width: 120px;
        height: 120px;
    }
    
    .score-value {
        font-size: 36px;
    }

/* Tablet Styles */
@media (min-width: 769px) and (max-width: 1024px) {
    .container {
        padding: 0 32px;
    }
    
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .stock-content-grid {
        grid-template-columns: 1fr;
    }
    
    .hero-title {
        font-size: 52px;
    }
    
    .business-metrics {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .analytics-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Risk Metrics optimized for tablet */
    .risk-metrics-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }
    
    .risk-metric-card {
        padding: 18px;
    }
    
    .risk-metric-card .metric-icon {
        font-size: 28px;
        margin-bottom: 10px;
    }
    
    .risk-metric-card h5 {
        font-size: 13px;
        margin-bottom: 10px;
    }
    
    .risk-metric-card .metric-value {
        font-size: 24px;
        margin-bottom: 6px;
    }
    
    .risk-metric-card .metric-label {
        font-size: 11px;
    }
    
    .risk-metric-card .metric-change {
        font-size: 11px;
    }
}

/* ===== NEW TOOLTIP & INFO STYLES ===== */

/* Tooltip Container */
.card-title-with-info {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.info-tooltip, .info-icon, .sim-info {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    font-size: 14px;
    cursor: help;
    color: var(--primary-color);
    transition: all 0.2s;
}

.info-tooltip:hover, .info-icon:hover, .sim-info:hover {
    transform: scale(1.1);
    color: var(--primary-dark);
}

.tooltip-text {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    width: 280px;
    padding: 12px 16px;
    background: var(--secondary-color);
    color: white;
    font-size: 13px;
    line-height: 1.5;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    z-index: 1000;
    transition: all 0.3s ease;
    pointer-events: none;
    font-weight: 400;
}

.tooltip-text::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--secondary-color);
}

.info-tooltip:hover .tooltip-text,
.info-icon:hover .tooltip-text,
.sim-info:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
    bottom: 130%;
}

/* Metric Label with Info */
.metric-label-with-info {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Updated Risk Metrics Card */
.risk-metrics-card .metrics-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.risk-metrics-card .metric-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
}

.risk-metrics-card .metric-row:last-child {
    border-bottom: none;
}

.risk-metrics-card .metric-value.warning {
    color: var(--warning);
    font-weight: 600;
}

/* Improved Correlation Card */
.correlation-card .correlation-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.correlation-card .correlation-fill.high {
    background: linear-gradient(90deg, #ef4444, #dc2626);
}

.correlation-card .correlation-fill.medium {
    background: linear-gradient(90deg, #f59e0b, #d97706);
}

.correlation-card .correlation-fill.low {
    background: linear-gradient(90deg, #10b981, #059669);
}

.correlation-card .correlation-value.high {
    color: #ef4444;
    font-weight: 600;
}

.correlation-card .correlation-value.medium {
    color: #f59e0b;
    font-weight: 600;
}

.correlation-card .correlation-value.low {
    color: #10b981;
    font-weight: 600;
}

.card-note {
    margin-top: 16px;
    font-size: 13px;
    color: var(--text-muted);
    font-style: italic;
}

/* Enhanced Volatility Card */
.volatility-card .volatility-item {
    display: grid;
    grid-template-columns: 60px 1fr 80px 70px;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.vol-badge {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    text-align: center;
}

.vol-badge.high {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
}

.vol-badge.medium {
    background: rgba(245, 158, 11, 0.1);
    color: #d97706;
}

.vol-badge.low {
    background: rgba(16, 185, 129, 0.1);
    color: #059669;
}

/* Enhanced Monte Carlo Card */
.monte-carlo-card .simulation-result {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.sim-stat {
    padding: 20px;
    border-radius: 12px;
    background: var(--surface-light);
    border-left: 4px solid var(--border);
}

.sim-stat.best {
    border-left-color: var(--success);
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.05), rgba(16, 185, 129, 0.02));
}

.sim-stat.expected {
    border-left-color: var(--primary-color);
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.03), rgba(255, 255, 255, 0.5));
}

.sim-stat.worst {
    border-left-color: var(--danger);
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.05), rgba(239, 68, 68, 0.02));
}

.sim-stat .sim-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 8px;
    font-weight: 500;
}

.sim-stat .sim-value {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 4px;
}

.sim-stat .sim-change.neutral {
    color: var(--text-secondary);
}

.sim-note {
    margin-top: 16px;
    padding: 12px;
    background: var(--surface);
    border-radius: 8px;
    font-size: 13px;
    color: var(--text-secondary);
    text-align: center;
}

/* Enhanced AI Insights Card */
.ai-insights-card .insights-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.insight-item {
    padding: 16px;
    border-radius: 12px;
    border: 1px solid var(--border);
}

.insight-item.warning {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.05), rgba(239, 68, 68, 0.02));
    border-color: rgba(239, 68, 68, 0.2);
}

.insight-item.info {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.05), rgba(16, 185, 129, 0.02));
    border-color: rgba(16, 185, 129, 0.2);
}

.insight-item.alert {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.05), rgba(245, 158, 11, 0.02));
    border-color: rgba(245, 158, 11, 0.2);
}

.insight-item.positive {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.08), rgba(16, 185, 129, 0.03));
    border-color: rgba(16, 185, 129, 0.3);
}

.insight-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.insight-icon {
    font-size: 18px;
}

.insight-priority {
    padding: 3px 10px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

.insight-priority.high {
    background: rgba(239, 68, 68, 0.15);
    color: #dc2626;
}

.insight-priority.medium {
    background: rgba(245, 158, 11, 0.15);
    color: #d97706;
}

.insight-priority.low {
    background: rgba(16, 185, 129, 0.15);
    color: #059669;
}

.insight-item p {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-primary);
}

/* ===== CUSTOM NOTIFICATIONS STYLES ===== */

.custom-alert-creator {
    margin-bottom: 32px;
    padding: 24px;
    background: var(--surface-light);
    border-radius: 16px;
    border: 2px solid var(--primary-color);
}

.alert-input-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
}

.input-icon {
    font-size: 24px;
    padding-top: 8px;
}

.custom-alert-input {
    flex: 1;
    padding: 16px;
    font-size: 15px;
    font-family: 'Inter', sans-serif;
    border: 2px solid var(--border);
    border-radius: 12px;
    resize: vertical;
    transition: all 0.3s;
    background: white;
}

.custom-alert-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

.alert-actions {
    display: flex;
    gap: 12px;
}

.btn-create-alert {
    padding: 12px 24px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    transition: all 0.3s;
}

.btn-create-alert.primary {
    background: var(--primary-color);
    color: white;
}

.btn-create-alert.primary:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.btn-create-alert.secondary {
    background: var(--surface);
    color: var(--text-primary);
    border: 1px solid var(--border);
}

.btn-create-alert.secondary:hover {
    background: var(--surface-dark);
}

.alert-examples-section {
    margin-bottom: 32px;
}

.alert-examples-section h5 {
    font-size: 16px;
    margin-bottom: 16px;
    color: var(--text-primary);
}

/* Desktop: Grid layout for example queries */
@media (min-width: 769px) {
    .example-queries {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 12px;
    }
}

.query-example {
    padding: 14px 18px;
    background: white;
    border: 2px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s;
    font-size: 14px;
    line-height: 1.5;
}

.query-example:hover {
    border-color: var(--primary-color);
    background: var(--surface-light);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.1);
}

.active-alerts h5 {
    font-size: 18px;
    margin-bottom: 16px;
    color: var(--text-primary);
}

/* Desktop: Column layout for alert list */
@media (min-width: 769px) {
    .alert-list {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
}

.active-alert-item {
    padding: 16px 20px;
    background: white;
    border: 1px solid var(--border);
    border-radius: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    transition: all 0.3s;
}

.active-alert-item:hover {
    border-color: var(--primary-color);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.1);
}

.alert-query {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
}

.alert-emoji {
    font-size: 24px;
}

.alert-text {
    font-size: 15px;
    line-height: 1.5;
    color: var(--text-primary);
}

.alert-meta {
    display: flex;
    align-items: center;
    gap: 16px;
}

.alert-status {
    padding: 4px 12px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}

.alert-status.active {
    background: rgba(16, 185, 129, 0.15);
    color: var(--success);
}

.alert-matches {
    font-size: 13px;
    color: var(--text-muted);
}

.btn-delete-alert {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: var(--surface);
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    font-size: 16px;
}

.btn-delete-alert:hover {
    background: #fee2e2;
    color: var(--danger);
}

.setup-subtitle {
    margin-bottom: 20px;
    font-size: 15px;
    color: var(--text-secondary);
}

/* ===== CEO ENHANCED STYLES ===== */

.ceo-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.ceo-stat .stat-detail {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
}

.ceo-career-history, .ceo-boards, .ceo-publications {
    margin: 24px 0;
}

.ceo-career-history h5, .ceo-boards h5, .ceo-publications h5 {
    font-size: 16px;
    margin-bottom: 16px;
    color: var(--text-primary);
}

.career-timeline {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.timeline-item {
    display: flex;
    gap: 16px;
    padding: 12px;
    background: var(--surface-light);
    border-radius: 10px;
    border-left: 3px solid var(--primary-color);
}

.timeline-date {
    min-width: 100px;
    font-size: 13px;
    font-weight: 600;
    color: var(--primary-color);
}

.timeline-content strong {
    display: block;
    margin-bottom: 4px;
    font-size: 14px;
}

.timeline-content p {
    font-size: 13px;
    color: var(--text-secondary);
}

.board-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.board-item {
    padding: 12px 16px;
    background: white;
    border: 1px solid var(--border);
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.board-item.past {
    opacity: 0.6;
}

.board-company {
    font-weight: 600;
    font-size: 10px;
}

.board-role {
    font-size: 10px;
    color: var(--text-secondary);
}

.publication-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.publication-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--surface-light);
    border-radius: 10px;
}

.pub-icon {
    font-size: 20px;
}

.pub-content {
    flex: 1;
}

.pub-content strong {
    display: block;
    font-size: 14px;
    margin-bottom: 2px;
}

.pub-date {
    font-size: 12px;
    color: var(--text-muted);
}

.reputation-metrics {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 32px 0;
    padding: 32px 0;
    border-top: 1px solid var(--border);
}

.reputation-score-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0px;
    padding: 24px 48px;
    background: var(--surface-light);
    border-radius: 12px;
    text-align: center;
    border: 2px solid var(--border);
}

.reputation-score-card .score-label {
    display: block;
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.reputation-score-card .score-value {
    display: block;
    font-size: 40px;
    font-weight: 700;
    color: #10b981;
    line-height: 1;
}

.reputation-score-card .score-badge {
    display: inline-block;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    margin-top: 4px;
}

.reputation-score-card .score-badge.positive {
    background: #d1fae5;
    color: #065f46;
}

/* ===== BUSINESS SNAPSHOT STYLES ===== */

.revenue-breakdown,
.geographic-revenue,
.strategic-initiatives {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--border);
}

.revenue-breakdown h5,
.geographic-revenue h5,
.strategic-initiatives h5 {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 20px;
}

.revenue-segments {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.segment-item {
    display: flex;
    flex-direction: column;
    gap: 0px;
}

.segment-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.segment-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
}

.segment-value {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-secondary);
}

.segment-bar {
    width: 100%;
    height: 10px;
    background: var(--surface);
    border-radius: 5px;
    overflow: hidden;
}

.segment-fill {
    height: 100%;
    border-radius: 5px;
    transition: width 0.3s ease;
}

.geo-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.geo-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background: var(--surface-light);
    border-radius: 12px;
    border: 1px solid var(--border);
}

.geo-region {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.geo-percent {
    font-size: 18px;
    font-weight: 700;
    color: var(--primary-color);
}

.initiatives-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.initiative-item {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: var(--surface-light);
    border-radius: 12px;
    border: 1px solid var(--border);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.initiative-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.initiative-icon {
    font-size: 28px;
    flex-shrink: 0;
}

.initiative-content {
    flex: 1;
}

.initiative-content strong {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 6px;
}

.initiative-content p {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
}

/* ===== NEWS SENTIMENT ENHANCED STYLES ===== */

.sentiment-distribution {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sent-dist-item {
    display: grid;
    grid-template-columns: 70px 1fr 50px;
    align-items: center;
    gap: 12px;
}

.dist-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
}

.dist-bar {
    height: 24px;
    background: var(--surface);
    border-radius: 12px;
    overflow: hidden;
}

.dist-fill {
    height: 100%;
    border-radius: 12px;
    transition: width 0.5s ease;
}

.dist-fill.positive {
    background: linear-gradient(90deg, #10b981, #059669);
}

.dist-fill.neutral {
    background: linear-gradient(90deg, #6b7280, #4b5563);
}

.dist-fill.negative {
    background: linear-gradient(90deg, #ef4444, #dc2626);
}

.dist-percent {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    text-align: right;
}

.news-sentiment-item {
    padding: 16px;
    background: var(--surface-light);
    border-radius: 12px;
    margin-bottom: 12px;
    border: 1px solid var(--border);
    transition: all 0.3s;
}

.news-sentiment-item:hover {
    border-color: var(--primary-color);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.1);
}

.news-sentiment-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.news-time {
    font-size: 12px;
    color: var(--text-muted);
    margin-left: auto;
}

.sentiment-keywords {
    display: block;
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 6px;
    font-style: italic;
}

.view-all-news {
    margin-top: 20px;
    text-align: center;
}

.btn-view-all {
    padding: 12px 32px;
    background: white;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

.btn-view-all:hover {
    background: var(--primary-color);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

/* More Features Section */
.more-features-section {
    padding: 80px 0;
    background: var(--background);
}

.more-features-banner {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 40px;
    background: linear-gradient(135deg, #f0fdf4 0%, #d1fae5 100%);
    border-radius: 20px;
    border: 2px solid var(--primary-color);
    box-shadow: 0 8px 24px rgba(16, 185, 129, 0.2);
}

.more-features-banner .banner-icon {
    font-size: 56px;
    flex-shrink: 0;
}

.more-features-banner .banner-content h3 {
    font-size: 32px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 12px;
}

.more-features-banner .banner-content p {
    font-size: 18px;
    line-height: 1.7;
    color: var(--text-secondary);
    margin: 0;
}

/* Responsive adjustments for new elements */
@media (max-width: 768px) {
    .tooltip-text {
        width: 220px;
        font-size: 12px;
        padding: 10px 12px;
    }
    
    .ceo-stats-grid {
        grid-template-columns: 1fr;
    }
    
    .reputation-metrics {
        grid-template-columns: 1fr;
    }
    
    .volatility-item {
        grid-template-columns: 50px 1fr 70px 60px !important;
        font-size: 13px;
    }
    
    /* More Features Section - Reduced spacing */
    .more-features-section {
        padding: 30px 0;
    }
    
    /* More Features Banner - Mobile layout with emoji on left */
    .more-features-banner {
        flex-direction: row;
        text-align: left;
        padding: 20px 16px;
        gap: 12px;
        align-items: center;
    }
    
    .more-features-banner .banner-icon {
        font-size: 36px;
        margin-bottom: 0;
    }
    
    .more-features-banner .banner-content {
        flex: 1;
    }
    
    .more-features-banner .banner-content h3 {
        font-size: 20px;
        margin-bottom: 6px;
    }
    
    .more-features-banner .banner-content p {
        font-size: 14px;
        line-height: 1.4;
    }
    
    /* Removed: conflicts with slideshow styles */
    /* .example-queries {
        grid-template-columns: 1fr;
    }
    
    .active-alert-item {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .alert-meta {
        width: 100%;
        justify-content: space-between;
    } */
}

/* Institutional Valuation Card Styles */
.institutional-valuation-card {
    grid-column: 1 / -1;
}

.valuation-summary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 32px;
    padding: 24px;
    background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
    border-radius: 12px;
    border: 2px solid var(--primary-color);
}

.valuation-rating {
    text-align: center;
}

.rating-badge {
    display: inline-block;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 18px;
    margin-bottom: 12px;
}

.rating-badge.buy {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
}

.rating-badge.hold {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
}

.rating-badge.sell {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
}

.rating-score {
    font-size: 48px;
    font-weight: 800;
    color: var(--primary-color);
    margin-bottom: 8px;
}

.rating-label {
    font-size: 14px;
    color: var(--text-secondary);
    font-weight: 600;
}

.valuation-target {
    text-align: center;
    padding: 16px;
    background: white;
    border-radius: 10px;
    border: 1px solid var(--border);
}

.target-label {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 8px;
    font-weight: 600;
}

.target-value {
    font-size: 42px;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.target-upside {
    font-size: 16px;
    font-weight: 700;
}

.fundamental-metrics {
    margin-bottom: 32px;
}

.fundamental-metrics h5 {
    font-size: 20px;
    margin-bottom: 20px;
    color: var(--text-primary);
}

.metric-category {
    margin-bottom: 28px;
    padding: 20px;
    background: var(--surface);
    border-radius: 10px;
    border: 1px solid var(--border);
}

.metric-category h6 {
    font-size: 16px;
    color: var(--text-primary);
    margin-bottom: 16px;
    font-weight: 700;
}

.metrics-grid-compact {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 12px;
}

.metric-compact {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: white;
    border-radius: 8px;
    border: 1px solid var(--border);
    transition: all 0.3s;
}

.metric-compact:hover {
    border-color: var(--primary-color);
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.1);
}

.metric-name {
    font-size: 14px;
    color: var(--text-secondary);
    font-weight: 500;
    flex: 1;
    word-wrap: break-word;
    overflow-wrap: break-word;
    margin-right: 8px;
}

.metric-value {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    margin-right: 12px;
}

.metric-grade {
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 700;
    min-width: 40px;
    text-align: center;
}

.grade-a {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
}

.grade-b {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
}

.grade-c {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
}

.grade-d {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
}

.dcf-valuation,
.comparable-analysis,
.analyst-consensus,
.investment-thesis {
    margin-bottom: 32px;
    padding: 24px;
    background: var(--surface);
    border-radius: 12px;
    border: 1px solid var(--border);
}

.dcf-valuation h5,
.comparable-analysis h5,
.analyst-consensus h5,
.investment-thesis h5 {
    font-size: 20px;
    margin-bottom: 20px;
    color: var(--text-primary);
}

.dcf-result {
    display: grid;
    gap: 12px;
    margin-bottom: 16px;
}

.dcf-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    background: white;
    border-radius: 8px;
    border: 1px solid var(--border);
}

.dcf-item.highlight {
    border: 2px solid var(--primary-color);
    background: linear-gradient(135deg, #f0fdf4 0%, white 100%);
}

.dcf-label {
    font-size: 14px;
    color: var(--text-secondary);
    font-weight: 600;
}

.dcf-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}

.dcf-assumptions {
    margin-top: 16px;
    padding: 14px;
    background: rgba(16, 185, 129, 0.05);
    border-left: 4px solid var(--primary-color);
    border-radius: 6px;
}

.dcf-assumptions p {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0;
}

.comparable-table {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border);
}

.comp-row {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
    gap: 16px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border);
    align-items: center;
}

.comp-row:last-child {
    border-bottom: none;
}

.comp-row.header {
    background: var(--surface);
    font-weight: 700;
    font-size: 13px;
    color: var(--text-secondary);
}

.comp-row.highlight {
    background: linear-gradient(135deg, #f0fdf4 0%, white 100%);
    font-weight: 700;
    border-left: 4px solid var(--primary-color);
}

.comp-row.footer {
    background: var(--surface-light);
    font-weight: 700;
    border-top: 2px solid var(--border);
    color: var(--text-primary);
}

.comp-row.footer span {
    color: var(--text-primary);
}

.comp-name {
    font-weight: 700;
    color: var(--text-primary);
}

.comp-insight {
    margin-top: 16px;
    padding: 14px;
    background: rgba(16, 185, 129, 0.05);
    border-left: 4px solid var(--primary-color);
    border-radius: 6px;
}

.comp-insight p {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0;
}

.consensus-overview {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.consensus-stat {
    text-align: center;
    padding: 16px;
    background: white;
    border-radius: 8px;
    border: 1px solid var(--border);
}

.consensus-stat .stat-label {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 8px;
    font-weight: 600;
}

.consensus-stat .stat-value {
    font-size: 22px;
    font-weight: 800;
    color: var(--text-primary);
}

.rating-breakdown {
    display: grid;
    gap: 12px;
}

.rating-bar-item {
    display: grid;
    grid-template-columns: 100px 1fr 50px;
    gap: 16px;
    align-items: center;
}

.rating-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
}

.rating-bar {
    height: 32px;
    background: var(--surface);
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--border);
}

.rating-fill {
    height: 100%;
    transition: width 0.3s;
}

.rating-fill.strong-buy {
    background: linear-gradient(90deg, #10b981, #059669);
}

.rating-fill.buy {
    background: linear-gradient(90deg, #34d399, #10b981);
}

.rating-fill.hold {
    background: linear-gradient(90deg, #fbbf24, #f59e0b);
}

.rating-fill.sell {
    background: linear-gradient(90deg, #f87171, #ef4444);
}

.rating-count {
    text-align: center;
    font-weight: 700;
    color: var(--text-primary);
}

.thesis-section {
    margin-bottom: 24px;
    padding: 20px;
    border-radius: 10px;
    border: 1px solid var(--border);
    overflow-x: auto;
}

.thesis-section.bull {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.05) 0%, rgba(16, 185, 129, 0.02) 100%);
    border-left: 4px solid var(--primary-color);
}

.thesis-section.bear {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.05) 0%, rgba(239, 68, 68, 0.02) 100%);
    border-left: 4px solid var(--danger);
}

.thesis-section h6 {
    font-size: 16px;
    margin-bottom: 12px;
    font-weight: 700;
}

.thesis-section ul {
    margin-left: 20px;
}

.thesis-section li {
    margin-bottom: 10px;
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.institutional-recommendation {
    margin-top: 32px;
    padding: 24px;
    background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
    border-radius: 12px;
    border: 2px solid var(--primary-color);
}

.recommendation-badge {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.badge-icon {
    width: 50px;
    height: 50px;
    background: var(--primary-color);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 700;
    flex-shrink: 0;
}

.badge-content {
    flex: 1;
}

.badge-title {
    font-size: 20px;
    font-weight: 800;
    color: var(--primary-color);
    margin-bottom: 4px;
}

.badge-subtitle {
    font-size: 14px;
    color: var(--text-secondary);
}

.show-analysis-btn {
    width: 100%;
    padding: 16px 24px;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    transition: all 0.3s ease;
    margin: 16px 0;
}

.show-analysis-btn:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.3);
}

.show-analysis-btn .btn-arrow {
    transition: transform 0.3s ease;
    font-size: 12px;
}

.show-analysis-btn.active .btn-arrow {
    transform: rotate(180deg);
}

.risk-note {
    padding: 14px;
    background: white;
    border-radius: 8px;
    font-size: 14px;
    color: var(--text-secondary);
    border: 1px solid var(--border);
}

@media (max-width: 768px) {
    .risk-note {
    padding: 5px;
    background: white;
    border-radius: 8px;
    font-size: 10px;
    color: var(--text-secondary);
    border: 1px solid var(--border);
}
}

.risk-note strong {
    color: var(--text-primary);
}

.detailed-analysis-section {
    margin-top: 24px;
    padding: 24px;
    background: white;
    border-radius: 12px;
    border: 2px solid var(--border);
    animation: slideDown 0.4s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.analysis-header {
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--border);
}

.analysis-header h5 {
    font-size: 22px;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.analysis-header p {
    font-size: 14px;
    color: var(--text-secondary);
}

.detailed-analysis-section .metric-category {
    margin-bottom: 20px;
    padding: 16px;
    background: #f9fafb;
    border-radius: 8px;
}

.detailed-analysis-section .metric-category strong {
    display: block;
    font-size: 16px;
    margin-bottom: 12px;
    color: var(--text-primary);
}

.detailed-analysis-section h6 {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 24px 0 16px 0;
}

.analysis-conclusion {
    margin-top: 24px;
    padding: 20px;
    background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
    border-radius: 10px;
    border-left: 4px solid var(--primary-color);
}

.analysis-conclusion h6 {
    margin-top: 0;
    margin-bottom: 12px;
}

.analysis-conclusion p {
    font-size: 15px;
    line-height: 1.7;
    color: var(--text-primary);
}

/* DCF Scenarios */
.dcf-scenarios {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 24px;
}

.dcf-scenario {
    padding: 20px;
    border-radius: 10px;
    border: 2px solid var(--border);
    background: white;
    overflow-x: auto;
}

.dcf-scenario.bull {
    background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
    border-color: var(--success);
}

.dcf-scenario.bear {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    border-color: var(--danger);
}

.dcf-scenario h7 {
    display: block;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--text-primary);
}

.scenario-details {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
}

.scenario-assumptions ul {
    margin: 8px 0 0 0;
    padding-left: 20px;
    font-size: 14px;
    line-height: 1.8;
}

.scenario-assumptions ul li {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.scenario-result {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    background: white;
    border-radius: 8px;
}

.dcf-summary {
    padding: 20px;
    background: #f9fafb;
    border-radius: 10px;
    margin-bottom: 24px;
}

.dcf-summary h7 {
    display: block;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 16px;
}

.weighted-calculation {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.calc-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 12px;
    background: white;
    border-radius: 6px;
    font-size: 14px;
}

.calc-row.total {
    background: var(--primary-color);
    color: white;
    font-weight: 700;
    margin-top: 8px;
    font-size: 16px;
}

.dcf-item.large {
    font-size: 18px;
    padding: 16px;
}

/* Sensitivity Analysis */
.sensitivity-analysis {
    margin-top: 24px;
    padding: 20px;
    background: white;
    border: 2px solid var(--border);
    border-radius: 10px;
    overflow-x: auto;
}

.sensitivity-analysis h7 {
    display: block;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 16px;
}

.sensitivity-table {
    width: 100%;
    max-width: 100%; /* Ensure it doesn't overflow */
    border-collapse: collapse;
    margin: 16px 0;
    font-size: 14px;
    overflow-x: auto; /* Allow horizontal scroll only for the table if needed */
}

.sensitivity-table th,
.sensitivity-table td {
    padding: 10px;
    text-align: center;
    border: 1px solid var(--border);
}

.sensitivity-table th {
    background: #f9fafb;
    font-weight: 600;
}

.sensitivity-table .highlight-row {
    background: #f0fdf4;
}

.sensitivity-table .highlight-cell {
    background: var(--primary-color);
    color: white;
    font-weight: 700;
}

.sensitivity-note {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-top: 12px;
    font-style: italic;
}

@media (max-width: 768px) {
    .scenario-details {
        grid-template-columns: 1fr;
    }
    
    .dcf-scenario {
        padding: 12px;
    }
    
    .scenario-assumptions ul {
        font-size: 13px;
        padding-left: 16px;
    }
    
    .scenario-assumptions strong {
        font-size: 14px;
    }
    
    .sensitivity-analysis {
        padding: 12px;
    }
    
    .sensitivity-table {
        font-size: 11px;
        max-width: 100%; /* Remove min-width to prevent overflow */
    }
    
    .sensitivity-table th,
    .sensitivity-table td {
        padding: 4px;
    }
    
    .dcf-summary {
        padding: 12px;
    }
    
    .weighted-calculation {
        font-size: 13px;
    }
    
    .calc-row {
        padding: 6px 8px;
        font-size: 13px;
    }
    
    .dcf-item.large {
        font-size: 15px;
        padding: 12px;
    }
}

/* Responsive adjustments for institutional valuation */
@media (max-width: 768px) {
    .valuation-summary {
        grid-template-columns: 1fr;
    }
    
    .metrics-grid-compact {
        grid-template-columns: 1fr;
    }
    
    .thesis-section {
        padding: 12px;
    }
    
    .thesis-section li {
        font-size: 13px;
    }
    
    .investment-thesis {
        padding: 12px;
    }
    
    .metric-category {
        padding: 12px;
    }
    
    .fundamental-metrics {
        padding: 12px;
    }
    
    .comp-row {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    
    .comp-row span {
        display: flex;
        justify-content: space-between;
    }
    
    .comp-row span::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--text-secondary);
    }
    
    .comp-row .comp-name::before {
        content: "Company";
    }
    
    .consensus-overview {
        grid-template-columns: 1fr 1fr;
    }
    
    .rating-bar-item {
        grid-template-columns: 80px 1fr 40px;
        gap: 12px;
    }
    
    .recommendation-badge {
        flex-direction: column;
        text-align: center;
    }
}

/* Portfolio Charts Container */
.charts-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 24px;
}

.allocation-chart {
    background: white;
    padding: 24px;
    border-radius: 12px;
    border: 1px solid var(--border);
}

.pie-chart-container {
    margin-bottom: 20px;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.pie-chart {
    display: block;
    margin: 0 auto;
    max-width: 350px;
    height: auto;
}

#portfolioChart {
    max-width: 280px;
    max-height: 280px;
    margin: 0 auto;
    display: block;
}

.allocation-legend {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 20px;
}

.allocation-legend .legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    padding: 6px 0;
}

.legend-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.legend-percent {
    margin-left: auto;
    font-weight: 700;
    color: var(--text-primary);
}

@media (max-width: 768px) {
    .charts-container {
        grid-template-columns: 1fr;
    }
    
    /* Make allocation chart very compact on mobile */
    .allocation-chart {
        padding: 16px;
        margin-bottom: 16px;
    }
    
    .pie-chart-container {
        max-width: 120px;
        margin-bottom: 10px;
    }
    
    #portfolioChart {
        max-width: 120px;
        max-height: 120px;
    }
    
    .chart-label {
        font-size: 10px;
        margin-top: 4px;
    }
    
    .allocation-legend {
        grid-template-columns: 1fr;
        position: relative;
        gap: 5px;
    }
    
    .allocation-legend .legend-item {
        font-size: 11px;
        padding: 3px 0;
    }
    
    .legend-dot {
        width: 8px;
        height: 8px;
    }
    
    /* Hide items after the 3rd one on mobile */
    .allocation-legend .legend-item:nth-child(n+4) {
        display: none;
    }
    
    /* Add "and more..." indicator after visible items */
    .allocation-legend::after {
        content: '+ 7 altre azioni...';
        display: block;
        text-align: center;
        font-size: 10px;
        color: var(--text-secondary);
        font-style: italic;
        padding: 8px 0;
        margin-top: 4px;
        border-top: 1px dashed var(--border);
    }
}

/* Mobile Warning Banner */
.mobile-warning-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10000;
    display: none;
    padding: 16px;
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    transform: translateY(-100%);
    transition: transform 0.3s ease-out;
}

.mobile-warning-banner.show {
    transform: translateY(0);
}

.warning-content {
    display: flex;
    align-items: center;
    gap: 16px;
    max-width: 1200px;
    margin: 0 auto;
    background: white;
    padding: 16px 20px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.warning-icon {
    font-size: 32px;
    flex-shrink: 0;
}

.warning-text {
    flex: 1;
}

.warning-text strong {
    display: block;
    font-size: 16px;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.warning-text p {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.5;
}

.warning-close {
    background: none;
    border: none;
    font-size: 24px;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 8px;
    line-height: 1;
    border-radius: 50%;
    transition: all 0.2s;
    flex-shrink: 0;
}

.warning-close:hover {
    background: #f3f4f6;
    color: var(--text-primary);
}

/* ===== SURVEY MODAL MOBILE FIX ===== */
@media (max-width: 768px) {
    .survey-modal-overlay {
        padding: 0 !important;
    }
    
    .survey-modal {
        margin: 0 !important;
        border-radius: 0 !important;
        min-height: 100vh !important;
        padding: 20px !important;
    }
    
    #surveyForm {
        max-height: none !important;
        overflow-y: visible !important;
        padding-right: 0 !important;
    }
}

@media (max-width: 480px) {
    .mobile-warning-banner {
        padding: 12px;
    }
    
    .warning-content {
        padding: 12px 16px;
    }
    
    .warning-icon {
        font-size: 24px;
    }
    
    .warning-text strong {
        font-size: 14px;
    }
    
    .warning-text p {
        font-size: 13px;
    }
}

/* Global mobile overflow prevention */
@media (max-width: 768px) {
    * {
        max-width: 100%;
    }
    
    /* Ensure all sections and containers fit within viewport */
    section, .container, .hero, .features, .platform, .beta, .footer {
        overflow-x: hidden;
        max-width: 100vw;
    }
    
    /* Prevent tables from causing overflow */
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }
    
    /* Ensure images don't overflow */
    img, video, iframe {
        max-width: 100%;
        height: auto;
    }
    
    /* Prevent pre and code blocks from overflowing */
    pre, code {
        overflow-x: auto;
        max-width: 100%;
        word-wrap: break-word;
    }
    
    /* Hide carousel dots for risk-metrics-grid (keep only the ones below analytics-grid) */
    .mock-analytics .carousel-dots {
        display: none !important;
    }
    
    /* Only show dots after analytics-grid (the second set of dots) */
    .analytics-grid + .carousel-dots {
        display: flex !important;
    }
}