/* Copied from docs Webpage to Compare - styles.css */
/* ============================================
   SynthiaX Landing Page - Main Stylesheet
   ============================================ */

:root {
    /* Brand Colors */
    --primary-yellow: #e6ac30;
    --primary-dark: #003047;
    --primary-black: #000000;
    --primary-white: #fdfdfd;
    
    /* Neutral Colors */
    --light-gray: #f5f5f5;
    --medium-gray: #888888;
    --dark-gray: #333333;
    
    /* Semantic Colors */
    --success: #4caf50;
    --warning: #ff9800;
    --error: #f44336;
    
    /* Fonts */
    --font-heading: 'Gordita', sans-serif;
    --font-body: 'Be Vietnam', sans-serif;
    
    /* Spacing */
    --spacing-xs: 8px;
    --spacing-sm: 16px;
    --spacing-md: 24px;
    --spacing-lg: 32px;
    --spacing-xl: 48px;
    --spacing-2xl: 64px;
    
    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    
    /* Shadows */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.2);
}

/* RESET & BASE */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    font-family: var(--font-body);
    color: var(--primary-black);
    background-color: var(--primary-white);
    line-height: 1.6;
    font-size: 16px;
}
a { color: var(--primary-dark); text-decoration: none; transition: color 0.3s ease; }
a:hover { color: var(--primary-yellow); }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 700; line-height: 1.2; margin-bottom: var(--spacing-md); }
h1 { font-size: 48px; }
h2 { font-size: 40px; color: var(--primary-dark); text-align: center; margin-bottom: var(--spacing-lg); }
h3 { font-size: 24px; color: var(--primary-dark); }
p { margin-bottom: var(--spacing-md); }
.container { max-width: 1200px; margin: 0 auto; padding: 0 var(--spacing-lg); }

/* NAVBAR */
.navbar { position: fixed; top:0; left:0; right:0; background: var(--primary-white); box-shadow: var(--shadow-sm); z-index: 1000; height: 80px; }
.nav-container { 
    max-width:1200px; 
    margin:0 auto; 
    padding:0 var(--spacing-lg); 
    height:100%; 
    display:flex; 
    align-items:center; 
    gap: var(--spacing-lg);
}
.nav-logo { flex-shrink: 0; margin-right: var(--spacing-lg); }
.logo-img { height: 40px; width: auto; }
.nav-menu { display:flex; gap: var(--spacing-xl); justify-content:center; flex: 1 1 auto; min-width: 0; margin: 0 auto; }
.nav-link { font-family: var(--font-heading); font-weight:600; color: var(--primary-dark); transition: color .3s; }
.nav-link:hover { color: var(--primary-yellow); }
.nav-cta { padding:12px 24px; background: var(--primary-yellow); color: var(--primary-dark); border:none; border-radius: var(--radius-md); font-family: var(--font-heading); font-weight:600; cursor:pointer; transition: all .3s; white-space:nowrap; margin-left: auto; flex-shrink: 0; }
.nav-cta:hover { background:#d49a1f; transform: translateY(-2px); box-shadow: var(--shadow-md); }
.hamburger { display:none; flex-direction:column; cursor:pointer; }
.hamburger span { width:25px; height:3px; background: var(--primary-dark); margin:5px 0; transition:.3s; }

/* BUTTONS */
.btn { padding:14px 32px; border:none; border-radius: var(--radius-md); font-family: var(--font-heading); font-weight:600; font-size:16px; cursor:pointer; transition: all .3s; display:inline-block; text-align:center; }
.btn-primary { background: var(--primary-yellow); color: var(--primary-dark); box-shadow: var(--shadow-md); }
.btn-primary:hover { background:#d49a1f; transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.btn-secondary { background: transparent; color: var(--primary-yellow); border:2px solid var(--primary-yellow); }
.btn-secondary:hover { background: var(--primary-yellow); color: var(--primary-dark); }
.btn-white { background: var(--primary-white); color: var(--primary-dark); box-shadow: var(--shadow-md); }
.btn-white:hover { background: var(--light-gray); transform: translateY(-2px); box-shadow: var(--shadow-lg); }

/* HERO */
.hero { margin-top:80px; padding: var(--spacing-2xl) var(--spacing-lg); background: linear-gradient(135deg, var(--primary-white) 0%, #f9f9f9 100%); display:grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-2xl); align-items:center; min-height: calc(100vh - 80px); }
.hero-content h1 { font-size:48px; color: var(--primary-dark); margin-bottom: var(--spacing-md); line-height:1.2; }
.hero-subtitle { font-size:18px; color: var(--medium-gray); margin-bottom: var(--spacing-lg); line-height:1.8; }
.hero-buttons { display:flex; gap: var(--spacing-md); }
.hero-visual { display:flex; justify-content:center; align-items:center; }
.hero-placeholder { width:100%; max-width:400px; aspect-ratio: 4/3; background: linear-gradient(135deg, #f0f0f0 0%, #e8e8e8 100%); border-radius: var(--radius-lg); display:flex; align-items:center; justify-content:center; box-shadow: var(--shadow-lg); overflow:hidden; padding: var(--spacing-md); }
.hero-placeholder img { width:100%; height:100%; object-fit:cover; border-radius: var(--radius-md); }

/* SECTIONS */
section { padding: var(--spacing-2xl) var(--spacing-lg); }
.section-intro { font-size:18px; color: var(--medium-gray); text-align:center; max-width:800px; margin:0 auto var(--spacing-xl); line-height:1.8; }

/* PROBLEM */
.problem-section { background: var(--primary-white); }
.pain-points { display:grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--spacing-lg); margin-top: var(--spacing-xl); }
.pain-point-card { padding: var(--spacing-lg); background: var(--light-gray); border-left:4px solid var(--primary-yellow); border-radius: var(--radius-md); transition: all .3s; }
.pain-point-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.pain-point-icon { width:48px; height:48px; margin-bottom: var(--spacing-md); }
.pain-point-icon svg { width:100%; height:100%; }
.pain-point-card h3 { font-size:18px; margin-bottom: var(--spacing-sm); }
.pain-point-card p { font-size:14px; color: var(--medium-gray); margin-bottom:0; }

/* MARKET */
.market-section { background: linear-gradient(135deg, #f0f7ff 0%, var(--primary-white) 100%); }
.decision-factors { display:grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--spacing-lg); margin-top: var(--spacing-xl); }
.factor-card { padding: var(--spacing-lg); background: var(--primary-white); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); text-align:center; transition: all .3s; }
.factor-card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); }
.factor-card h3 { font-size:18px; margin-bottom: var(--spacing-sm); color: var(--primary-dark); }
.factor-card p { font-size:14px; color: var(--medium-gray); margin-bottom:0; }

/* COMPARISON */
.comparison-section { background: var(--primary-white); }
.comparison-table-wrapper { overflow-x:auto; margin: var(--spacing-xl) 0; border-radius: var(--radius-md); box-shadow: var(--shadow-md); }
.comparison-table { width:100%; border-collapse:collapse; background: var(--primary-white); }
.comparison-table thead { background: var(--light-gray); }
.comparison-table th { padding: var(--spacing-md); text-align:left; font-family: var(--font-heading); font-weight:600; color: var(--primary-dark); border-bottom:2px solid #e0e0e0; }
.comparison-table td { padding: var(--spacing-md); border-bottom:1px solid #f0f0f0; }
.comparison-table tbody tr:hover { background:#fafafa; }
.feature-name { font-weight:600; color: var(--primary-dark); min-width:150px; }
.synthiax-col { background:#fffbf0; font-weight:600; }
.synthiax-col.advantage { color: var(--primary-yellow); }
.check { color: var(--success); font-weight:bold; }
.cross { color: var(--error); font-weight:bold; }
.limited { color: var(--warning); }

/* CHARTS */
.chart-section { margin: var(--spacing-2xl) 0; padding: var(--spacing-xl); background: var(--light-gray); border-radius: var(--radius-md); }
.chart-section h3 { text-align:center; margin-bottom: var(--spacing-lg); color: var(--primary-dark); }
.chart-container { position:relative; height:400px; margin-bottom: var(--spacing-md); }
.chart-note { text-align:center; font-size:12px; color: var(--medium-gray); margin-bottom:0; }

/* ADVANTAGES */
.advantages-section { background: linear-gradient(135deg, var(--primary-white) 0%, #f9f9f9 100%); }
.advantages-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--spacing-lg); margin: var(--spacing-xl) 0; }
.advantage-card { padding: var(--spacing-lg); background: var(--primary-white); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); transition: all .3s; text-align:center; }
.advantage-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.advantage-icon { width:48px; height:48px; margin:0 auto var(--spacing-md); }
.advantage-icon svg { width:100%; height:100%; }
.advantage-card h3 { font-size:18px; margin-bottom: var(--spacing-sm); color: var(--primary-dark); }
.advantage-card p { font-size:14px; color: var(--medium-gray); margin-bottom:0; }

/* PARTNERS */
.partners-section { margin-top: var(--spacing-2xl); padding-top: var(--spacing-2xl); border-top:1px solid #e0e0e0; }
.partners-section h3 { text-align:center; margin-bottom: var(--spacing-lg); }
.partners-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--spacing-lg); align-items:center; }
.partner-logo { display:flex; align-items:center; justify-content:center; height:80px; background: var(--light-gray); border-radius: var(--radius-md); opacity:.7; transition: opacity .3s; }
.partner-logo:hover { opacity:1; }
.logo-placeholder { font-family: var(--font-heading); font-weight:600; color: var(--primary-dark); font-size:12px; text-align:center; }

/* ROI CTA */
.roi-cta-section { background: linear-gradient(135deg, var(--primary-dark) 0%, #004d6d 100%); color: var(--primary-white); text-align:center; padding: var(--spacing-2xl) var(--spacing-lg); }
.roi-cta-section h2 { color: var(--primary-white); margin-bottom: var(--spacing-md); }
.roi-cta-section > .container > p { font-size:18px; color: rgba(255,255,255,.95); max-width:800px; margin:0 auto var(--spacing-xl); }
.roi-benefits { display:grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--spacing-md); margin: var(--spacing-xl) 0; max-width:800px; margin-left:auto; margin-right:auto; }
.benefit-item { display:flex; align-items:center; gap: var(--spacing-md); color: rgba(255,255,255,.95); font-size:14px; }
.benefit-item svg { width:24px; height:24px; flex-shrink:0; }
.roi-cta-section .btn-white { margin: var(--spacing-lg) auto; }
.trust-signals { font-size:12px; color: rgba(255,255,255,.8); margin-top: var(--spacing-md); margin-bottom:0; }

/* FAQ */
.faq-section { background: var(--primary-white); }
.faq-container { max-width:800px; margin: var(--spacing-xl) auto; }
.faq-item { margin-bottom: var(--spacing-md); border:1px solid #e0e0e0; border-radius: var(--radius-md); overflow:hidden; }
.faq-header { width:100%; padding: var(--spacing-lg); background: var(--light-gray); border:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; font-family: var(--font-heading); font-weight:600; color: var(--primary-dark); font-size:16px; transition: all .3s; }
.faq-header:hover { background:#efefef; }
.faq-header.active { background: var(--primary-yellow); color: var(--primary-dark); }
.faq-icon { font-size:20px; transition: transform .3s; }
.faq-header.active .faq-icon { transform: rotate(45deg); }
.faq-body { padding: var(--spacing-lg); background: var(--primary-white); display:none; color: var(--medium-gray); line-height:1.8; }
.faq-body.active { display:block; }
.faq-body p { margin-bottom:0; }

/* FOOTER */
.footer { background: var(--primary-dark); color: var(--primary-white); padding: var(--spacing-2xl) var(--spacing-lg); }
.footer-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--spacing-xl); margin-bottom: var(--spacing-xl); }
.footer-column h4 { color: var(--primary-white); font-size:16px; margin-bottom: var(--spacing-md); }
.footer-column ul { list-style:none; }
.footer-column ul li { margin-bottom: var(--spacing-sm); }
.footer-column a { color: rgba(255,255,255,.8); transition: color .3s; }
.footer-column a:hover { color: var(--primary-yellow); }
.footer-logo { height:40px; width:auto; margin-bottom: var(--spacing-md); }
.footer-column p { font-size:14px; color: rgba(255,255,255,.8); margin-bottom: var(--spacing-sm); }
.footer-bottom { border-top:1px solid rgba(255,255,255,.1); padding-top: var(--spacing-lg); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap: var(--spacing-md); }
.footer-bottom p { font-size:12px; color: rgba(255,255,255,.6); margin-bottom:0; }
.footer-links { display:flex; gap: var(--spacing-lg); }
.footer-links a { font-size:12px; color: rgba(255,255,255,.6); }

/* STICKY CTA */
.sticky-cta { position:fixed; bottom:30px; right:30px; padding:14px 28px; background: var(--primary-yellow); color: var(--primary-dark); border:none; border-radius:50px; font-family: var(--font-heading); font-weight:600; font-size:14px; cursor:pointer; box-shadow: var(--shadow-lg); z-index:999; opacity:0; visibility:hidden; transition: all .3s; white-space:nowrap; }
.sticky-cta.visible { opacity:1; visibility:visible; }
.sticky-cta:hover { background:#d49a1f; transform: translateY(-4px); box-shadow: 0 12px 32px rgba(230,172,48,.4); }

/* ANIMATIONS */
@keyframes fadeInUp { from { opacity:0; transform: translateY(30px); } to { opacity:1; transform: translateY(0); } }
@keyframes slideInLeft { from { opacity:0; transform: translateX(-30px); } to { opacity:1; transform: translateX(0); } }
.fade-in { animation: fadeInUp .6s ease-out; }
.slide-in { animation: slideInLeft .6s ease-out; }

/* UTIL */
.text-center { text-align:center; }
.mt-lg { margin-top: var(--spacing-lg); }
.mb-lg { margin-bottom: var(--spacing-lg); }
.py-xl { padding-top: var(--spacing-xl); padding-bottom: var(--spacing-xl); }