/* ======================================== Cal AI Landing Page Styles Design System:iOS-Inspired Clean Design ======================================== */ /* ===== CSS Variables ===== */:root{/* Colors from Cal AI Design System */ --color-primary:#007AFF;--color-primary-light:#5AC8FA;--color-primary-dark:#0051D5;--color-accent:#FF6B6B;--color-success:#34C759;--color-warning:#FF9500;--color-error:#FF3B30;/* Neutral Colors */ --color-text-primary:#1C1C1E;--color-text-secondary:#8E8E93;--color-surface:#F2F2F7;--color-background:#FFFFFF;--color-border:#E5E5EA;/* Gradients */ --gradient-primary:linear-gradient(135deg,#007AFF 0%,#5AC8FA 100%);--gradient-accent:linear-gradient(135deg,#FF6B6B 0%,#FF9500 100%);/* Spacing (8px base unit) */ --space-4:4px;--space-8:8px;--space-12:12px;--space-16:16px;--space-20:20px;--space-24:24px;--space-32:32px;--space-40:40px;--space-48:48px;--space-64:64px;--space-80:80px;--space-96:96px;/* Typography */ --font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;/* Shadows */ --shadow-sm:0 1px 2px rgba(0,0,0,0.05);--shadow-md:0 4px 6px rgba(0,0,0,0.07);--shadow-lg:0 10px 15px rgba(0,0,0,0.1);--shadow-xl:0 20px 25px rgba(0,0,0,0.15);/* Border Radius */ --radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:24px;--radius-full:9999px;/* Transitions */ --transition-fast:150ms ease;--transition-base:250ms ease;--transition-slow:350ms ease}/* ===== Reset & Base Styles ===== */ *{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:var(--font-family);color:var(--color-text-primary);background-color:var(--color-background);line-height:1.6;overflow-x:hidden}img{max-width:100%;height:auto}a{text-decoration:none;color:inherit}button{border:none;background:none;cursor:pointer;font-family:inherit}/* ===== Container ===== */ .container{max-width:1200px;margin:0 auto;padding:0 var(--space-24)}@media (max-width:768px){.container{padding:0 var(--space-16)}}/* ===== Navigation ===== */ .navbar{position:fixed;top:0;left:0;right:0;background:rgba(255,255,255,0.95);backdrop-filter:blur(10px);border-bottom:1px solid var(--color-border);z-index:1000;padding:var(--space-16) 0}.nav-wrapper{display:flex;justify-content:space-between;align-items:center}.logo{display:flex;align-items:center;gap:var(--space-12);font-size:24px;font-weight:700;color:var(--color-text-primary)}.logo-img{width:40px;height:40px;border-radius:var(--radius-md)}.nav-links{display:flex;align-items:center;gap:var(--space-32)}.nav-links a{font-weight:500;color:var(--color-text-primary);transition:color var(--transition-fast)}.nav-links a:hover{color:var(--color-primary)}/* Navigation Dropdown */ .nav-dropdown{position:relative}.nav-dropdown-toggle{display:flex;align-items:center;cursor:pointer}.nav-dropdown-menu{position:absolute;top:100%;left:0;margin-top:12px;background:white;border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,0.12);min-width:220px;padding:8px;opacity:0;visibility:hidden;transform:translateY(-10px);transition:all 0.2s ease;z-index:1000}.nav-dropdown:hover .nav-dropdown-menu{opacity:1;visibility:visible;transform:translateY(0)}.nav-dropdown-menu a{display:block;padding:12px 16px;color:var(--color-text-primary);font-weight:500;border-radius:8px;transition:all 0.2s ease;white-space:nowrap}.nav-dropdown-menu a:hover{background:var(--color-surface);color:var(--color-primary)}.mobile-menu-toggle{display:none;flex-direction:column;gap:6px;padding:var(--space-8)}.mobile-menu-toggle span{width:24px;height:2px;background:var(--color-text-primary);transition:all var(--transition-fast)}.mobile-menu{display:none;position:fixed;top:72px;left:0;right:0;background:white;padding:var(--space-24);flex-direction:column;gap:var(--space-16);border-bottom:1px solid var(--color-border);z-index:999}.mobile-menu.active{display:flex}.mobile-dropdown{display:flex;flex-direction:column;gap:8px}.mobile-dropdown-toggle{display:block;padding:8px 0;font-weight:500}.mobile-dropdown-menu{display:none;flex-direction:column;gap:4px;padding-left:16px}.mobile-dropdown.active .mobile-dropdown-menu{display:flex}.mobile-dropdown-menu a{padding:8px 0;font-size:14px;color:var(--color-text-secondary)}@media (max-width:768px){.nav-links{display:none}.mobile-menu-toggle{display:flex}}/* ===== Buttons ===== */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-8);padding:var(--space-12) var(--space-24);border-radius:var(--radius-full);font-weight:600;font-size:14px;transition:all var(--transition-fast);white-space:nowrap}.btn-primary{background:var(--color-primary);color:white}.btn-primary:hover{background:var(--color-primary-dark);transform:translateY(-2px);box-shadow:var(--shadow-md)}.btn-secondary{background:var(--color-surface);color:var(--color-text-primary)}.btn-secondary:hover{background:var(--color-border);transform:translateY(-2px)}.btn-large{padding:var(--space-16) var(--space-32);font-size:16px}.btn-block{width:100%}/* ===== Hero Section ===== */ .hero{padding-top:120px;padding-bottom:24px;background:linear-gradient(180deg,var(--color-surface) 0%,var(--color-background) 100%);position:relative;overflow:hidden}.hero-content{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-64);align-items:center}.hero-text{display:flex;flex-direction:column;gap:var(--space-24)}.badge{display:inline-flex;align-items:center;gap:var(--space-8);padding:var(--space-8) var(--space-16);background:white;border:1px solid var(--color-border);border-radius:var(--radius-full);width:fit-content;font-size:14px;color:var(--color-text-secondary)}.badge-icon{font-size:16px}.hero-title{font-size:56px;font-weight:800;line-height:1.1;color:var(--color-text-primary)}.gradient-text{background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.hero-description{font-size:18px;color:var(--color-text-secondary);line-height:1.8}.hero-cta{display:flex;gap:var(--space-16);margin-top:var(--space-16)}.hero-stats{display:flex;gap:var(--space-48);margin-top:var(--space-32);padding-top:var(--space-32);border-top:1px solid var(--color-border)}.stat{display:flex;flex-direction:column;gap:var(--space-4)}.stat-value{font-size:32px;font-weight:700;color:var(--color-primary)}.stat-label{font-size:14px;color:var(--color-text-secondary)}/* Hero Visual */ .hero-visual{position:relative;display:flex;justify-content:center;align-items:center}.phone-mockup{position:relative;z-index:2}.phone-frame{width:300px;height:600px;background:var(--color-text-primary);border-radius:40px;padding:12px;box-shadow:var(--shadow-xl);position:relative}.phone-notch{position:absolute;top:0;left:50%;transform:translateX(-50%);width:120px;height:30px;background:var(--color-text-primary);border-radius:0 0 20px 20px;z-index:3}.phone-screen{width:100%;height:100%;background:var(--color-surface);border-radius:32px;overflow:hidden}/* App Screenshot in Phone */ .app-screenshot{width:100%;height:100%;object-fit:cover;object-position:top;border-radius:32px}/* Floating Cards */ .floating-card{position:absolute;animation:float 3s ease-in-out infinite}.card-1{top:10%;right:-20%;animation-delay:0s}.card-2{bottom:15%;left:-15%;animation-delay:1.5s}.mini-card{background:white;padding:var(--space-16);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);display:flex;align-items:center;gap:var(--space-12);min-width:200px}.mini-icon{font-size:32px}.mini-title{font-weight:600;color:var(--color-text-primary)}.mini-subtitle{font-size:14px;color:var(--color-text-secondary)}@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-20px)}}@media (max-width:768px){.hero{padding-top:100px;padding-bottom:var(--space-64)}.hero-content{grid-template-columns:1fr;gap:var(--space-48)}.hero-title{font-size:36px}.hero-cta{flex-direction:column}.hero-stats{gap:var(--space-32)}.stat-value{font-size:24px}.hero-visual{max-width:400px;margin:0 auto}.phone-frame{width:280px;height:560px}.floating-card{display:none}}@media (max-width:480px){.phone-frame{width:240px;height:480px}}/* ===== Section Styles ===== */ section{padding:var(--space-96) 0}.section-header{text-align:center;max-width:700px;margin:0 auto var(--space-64)}.section-title{font-size:48px;font-weight:800;margin-bottom:var(--space-16);color:var(--color-text-primary)}.section-description{font-size:18px;color:var(--color-text-secondary);line-height:1.8}@media (max-width:768px){section{padding:var(--space-64) 0}.section-title{font-size:32px}.section-header{margin-bottom:var(--space-48)}}/* ===== Features Section ===== */ .features{background:var(--color-background)}.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-32)}.feature-card{background:white;padding:var(--space-32);border-radius:var(--radius-lg);border:1px solid var(--color-border);transition:all var(--transition-base)}.feature-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg);border-color:var(--color-primary)}.feature-icon{font-size:48px;margin-bottom:var(--space-16)}.feature-title{font-size:20px;font-weight:700;margin-bottom:var(--space-12);color:var(--color-text-primary)}.feature-description{font-size:15px;color:var(--color-text-secondary);line-height:1.6}@media (max-width:1024px){.features-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width:640px){.features-grid{grid-template-columns:1fr}}/* ===== How It Works Section ===== */ .how-it-works{background:linear-gradient(180deg,var(--color-background) 0%,var(--color-surface) 100%);padding:var(--space-96) 0;position:relative}.steps-timeline{max-width:1200px;margin:0 auto;display:flex;flex-direction:column;gap:var(--space-24)}.step-card{background:white;border-radius:var(--radius-xl);padding:var(--space-48);box-shadow:var(--shadow-lg);position:relative;transition:all var(--transition-base)}.step-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-xl)}.step-badge{position:absolute;top:var(--space-32);left:var(--space-32);width:60px;height:60px;background:var(--gradient-primary);border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-lg);z-index:2}.step-number{font-size:28px;font-weight:700;color:white}.step-content-wrapper{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-48);align-items:center}.step-card-reverse .step-content-wrapper{direction:rtl}.step-card-reverse .step-text,.step-card-reverse .step-visual{direction:ltr}.step-text{display:flex;flex-direction:column;gap:var(--space-16);padding-left:var(--space-64)}.step-icon-inline{font-size:48px;margin-bottom:var(--space-8)}.step-title{font-size:28px;font-weight:700;color:var(--color-text-primary);margin:0}.step-description{font-size:16px;color:var(--color-text-secondary);line-height:1.7;margin:0}.step-features{list-style:none;padding:0;margin:var(--space-16) 0 0;display:flex;flex-direction:column;gap:var(--space-12)}.step-features li{font-size:15px;color:var(--color-text-primary);display:flex;align-items:center;gap:var(--space-8)}.step-features li::before{content:"✓";display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;background:var(--color-success);color:white;border-radius:var(--radius-full);font-weight:700;font-size:14px;flex-shrink:0}.step-visual{display:flex;justify-content:center;align-items:center}.step-visual .phone-mockup{width:280px;border-radius:24px;overflow:hidden;box-shadow:var(--shadow-xl);background:white;border:8px solid #1a1a1a;transition:all var(--transition-base)}.step-card:hover .phone-mockup{transform:scale(1.05)}.phone-mockup img{width:100%;height:auto;display:block;object-fit:cover}.step-connector{display:flex;justify-content:center;align-items:center;color:var(--color-primary);opacity:0.3}.how-it-works-cta{margin-top:var(--space-64);text-align:center;display:flex;flex-direction:column;gap:var(--space-16);align-items:center}.btn-large{padding:var(--space-20) var(--space-48);font-size:18px;display:inline-flex;align-items:center;gap:var(--space-12)}.cta-subtext{font-size:14px;color:var(--color-text-secondary);margin:0}/* Responsive Design */ @media (max-width:1024px){.step-visual .phone-mockup{width:240px}.step-text{padding-left:var(--space-48)}}@media (max-width:768px){.how-it-works{padding:var(--space-64) 0}.step-card{padding:var(--space-32)}.step-badge{top:var(--space-24);left:var(--space-24);width:50px;height:50px}.step-number{font-size:24px}.step-content-wrapper,.step-card-reverse .step-content-wrapper{grid-template-columns:1fr;direction:ltr;gap:var(--space-32)}.step-text{padding-left:0;text-align:center;align-items:center}.step-title{font-size:24px}.step-description{font-size:15px}.step-features{align-items:flex-start;max-width:300px}.step-visual .phone-mockup{width:220px}.step-connector{opacity:0.2}.btn-large{padding:var(--space-16) var(--space-32);font-size:16px}}@media (max-width:480px){.step-card{padding:var(--space-24)}.step-icon-inline{font-size:36px}.step-title{font-size:20px}.step-visual .phone-mockup{width:180px}}/* ===== Screenshots Gallery Section ===== */ .screenshots-gallery{background:var(--color-surface);padding:var(--space-96) 0;overflow:hidden}.screenshots-gallery .section-header{margin-bottom:var(--space-48);text-align:center}.screenshots-scroll-container{position:relative;width:100%;margin:0 auto}.screenshots-scroll{display:flex;gap:var(--space-24);overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding:var(--space-24) var(--space-24);cursor:grab}.screenshots-scroll:active{cursor:grabbing}/* Hide scrollbar but keep functionality */ .screenshots-scroll::-webkit-scrollbar{height:8px}.screenshots-scroll::-webkit-scrollbar-track{background:transparent}.screenshots-scroll::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:4px}.screenshots-scroll::-webkit-scrollbar-thumb:hover{background:var(--color-text-secondary)}.screenshot-card{flex:0 0 280px;scroll-snap-align:center;display:flex;flex-direction:column;gap:var(--space-16)}.screenshot-frame{background:white;border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-lg);transition:all var(--transition-base);position:relative}.screenshot-frame:hover{transform:translateY(-8px);box-shadow:var(--shadow-xl)}.screenshot-frame img{width:100%;height:auto;display:block;object-fit:cover;aspect-ratio:9 / 16}.screenshot-title{font-size:16px;font-weight:600;color:var(--color-text-primary);text-align:center;margin:0}.scroll-hint{text-align:center;margin-top:var(--space-32);opacity:0.6;font-size:14px;color:var(--color-text-secondary)}.scroll-hint span{display:inline-flex;align-items:center;gap:var(--space-8);padding:var(--space-8) var(--space-16);background:white;border-radius:var(--radius-full);box-shadow:var(--shadow-sm)}/* Responsive Design */ @media (max-width:1024px){.screenshot-card{flex:0 0 240px}}@media (max-width:768px){.screenshots-gallery{padding:var(--space-64) 0}.screenshots-scroll{padding:var(--space-16) var(--space-16);gap:var(--space-16)}.screenshot-card{flex:0 0 200px}.screenshot-title{font-size:14px}.scroll-hint{font-size:12px;margin-top:var(--space-24)}}@media (max-width:480px){.screenshot-card{flex:0 0 180px}.screenshot-title{font-size:13px}}/* ===== Benefits Section ===== */ .benefits{background:var(--color-background)}.benefits-wrapper{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-64);align-items:center}.benefits-title{font-size:40px;font-weight:800;margin-bottom:var(--space-32);color:var(--color-text-primary)}.benefits-list{display:flex;flex-direction:column;gap:var(--space-24)}.benefit-item{display:flex;gap:var(--space-16)}.check-icon{flex-shrink:0;color:var(--color-success);margin-top:4px}.benefit-item h4{font-size:18px;font-weight:600;margin-bottom:var(--space-4);color:var(--color-text-primary)}.benefit-item p{font-size:15px;color:var(--color-text-secondary);line-height:1.6}/* Stats Card */ .stats-card{background:white;padding:var(--space-32);border-radius:var(--radius-xl);box-shadow:var(--shadow-xl)}.stats-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-24)}.stats-header h4{font-size:20px;font-weight:700;color:var(--color-text-primary)}.stats-period{font-size:14px;color:var(--color-text-secondary)}.stats-chart{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-8);height:200px;margin-bottom:var(--space-24)}.chart-bar{flex:1;background:var(--gradient-primary);border-radius:var(--radius-sm) var(--radius-sm) 0 0;min-height:20px;transition:all var(--transition-base)}.chart-bar:hover{opacity:0.8}.stats-footer{display:flex;justify-content:space-around;padding-top:var(--space-24);border-top:1px solid var(--color-border)}.stats-item{text-align:center}.stats-value{display:block;font-size:24px;font-weight:700;color:var(--color-primary);margin-bottom:var(--space-4)}.stats-label{font-size:14px;color:var(--color-text-secondary)}@media (max-width:768px){.benefits-wrapper{grid-template-columns:1fr}.benefits-title{font-size:32px}}/* ===== Pricing Section ===== */ .pricing{background:var(--color-surface)}.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-32);max-width:1100px;margin:0 auto}.pricing-card{background:white;padding:var(--space-40);border-radius:var(--radius-xl);border:2px solid var(--color-border);position:relative;display:flex;flex-direction:column;transition:all var(--transition-base)}.pricing-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-xl)}.pricing-featured{border-color:var(--color-primary);box-shadow:var(--shadow-lg)}.featured-badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--gradient-primary);color:white;padding:var(--space-8) var(--space-20);border-radius:var(--radius-full);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px}.pricing-plan{font-size:24px;font-weight:700;margin-bottom:var(--space-24);color:var(--color-text-primary)}.pricing-price{margin-bottom:var(--space-32)}.price-amount{font-size:48px;font-weight:800;color:var(--color-text-primary)}.price-period{font-size:16px;color:var(--color-text-secondary);font-weight:500}.pricing-features{list-style:none;margin-bottom:var(--space-32);flex-grow:1}.pricing-features li{padding:var(--space-12) 0;font-size:15px;color:var(--color-text-primary)}.pricing-features li.disabled{color:var(--color-text-secondary);opacity:0.5}@media (max-width:1024px){.pricing-grid{grid-template-columns:1fr;max-width:400px}}/* ===== Testimonials Section ===== */ .testimonials{background:var(--color-background)}.testimonials-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-32)}.testimonial-card{background:white;padding:var(--space-32);border-radius:var(--radius-lg);border:1px solid var(--color-border);display:flex;flex-direction:column;gap:var(--space-20)}.stars{color:#FFB800;font-size:20px;letter-spacing:2px}.testimonial-text{font-size:16px;line-height:1.7;color:var(--color-text-primary);flex-grow:1}.testimonial-author{display:flex;align-items:center;gap:var(--space-12);padding-top:var(--space-16);border-top:1px solid var(--color-border)}.author-avatar{width:48px;height:48px;border-radius:var(--radius-full);background:var(--gradient-primary);color:white;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px}.author-name{font-weight:600;color:var(--color-text-primary);margin-bottom:var(--space-4)}.author-title{font-size:14px;color:var(--color-text-secondary)}@media (max-width:1024px){.testimonials-grid{grid-template-columns:1fr}}/* ===== Download Section ===== */ .download{background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-primary-light) 100%);color:white}.download-wrapper{text-align:center;max-width:800px;margin:0 auto}.download-title{font-size:48px;font-weight:800;margin-bottom:var(--space-16)}.download-description{font-size:18px;opacity:0.95;margin-bottom:var(--space-48);line-height:1.7}.download-buttons{display:flex;justify-content:center;gap:var(--space-16);margin-bottom:var(--space-24)}.store-button{background:rgba(255,255,255,0.2);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.3);padding:var(--space-16) var(--space-24);border-radius:var(--radius-md);display:flex;align-items:center;gap:var(--space-16);transition:all var(--transition-fast);color:white}.store-button:hover{background:rgba(255,255,255,0.3);transform:translateY(-4px)}.store-icon{width:40px;height:40px}.store-text{font-size:12px;opacity:0.9;text-align:left}.store-name{font-size:18px;font-weight:700;text-align:left}.download-note{font-size:16px;opacity:0.9}@media (max-width:768px){.download-title{font-size:32px}.download-buttons{flex-direction:column;align-items:center}.store-button{width:100%;max-width:300px}}/* ===== Footer ===== */ .footer{background:var(--color-text-primary);color:white;padding:var(--space-64) 0 var(--space-32)}.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--space-48);margin-bottom:var(--space-48)}.footer-logo{display:flex;align-items:center;gap:var(--space-12);margin-bottom:var(--space-16)}.footer-description{color:rgba(255,255,255,0.7);line-height:1.7;margin-bottom:var(--space-24)}.social-links{display:flex;gap:var(--space-16)}.social-links a{width:40px;height:40px;border-radius:var(--radius-full);background:rgba(255,255,255,0.1);display:flex;align-items:center;justify-content:center;transition:all var(--transition-fast)}.social-links a:hover{background:var(--color-primary);transform:translateY(-4px)}.footer-heading{font-size:16px;font-weight:700;margin-bottom:var(--space-16)}.footer-links{list-style:none;display:flex;flex-direction:column;gap:var(--space-12)}.footer-links a{color:rgba(255,255,255,0.7);transition:color var(--transition-fast)}.footer-links a:hover{color:white}.footer-bottom{text-align:center;padding-top:var(--space-32);border-top:1px solid rgba(255,255,255,0.1);color:rgba(255,255,255,0.6)}.footer-bottom p{margin:var(--space-8) 0}@media (max-width:768px){.footer-grid{grid-template-columns:1fr;gap:var(--space-32)}}/* ===== Scroll to Top Button ===== */ .scroll-top{position:fixed;bottom:var(--space-32);right:var(--space-32);width:48px;height:48px;background:var(--color-primary);color:white;border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-lg);opacity:0;visibility:hidden;transition:all var(--transition-base);z-index:999}.scroll-top.visible{opacity:1;visibility:visible}.scroll-top:hover{background:var(--color-primary-dark);transform:translateY(-4px)}/* ===== Animations ===== */ @keyframes fadeInUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.fade-in-up{animation:fadeInUp 0.6s ease-out}/* ===== Utility Classes ===== */ .text-center{text-align:center}.mt-16{margin-top:var(--space-16)}.mb-16{margin-bottom:var(--space-16)}.mt-32{margin-top:var(--space-32)}.mb-32{margin-bottom:var(--space-32)}/* ===== FAQ Section ===== */ .faq-section{padding:var(--space-96) 0;background:var(--color-background)}.faq-container{max-width:800px;margin:0 auto;margin-top:var(--space-48)}.faq-item{background:var(--color-surface);border-radius:16px;margin-bottom:var(--space-16);overflow:hidden;transition:all 0.3s ease}.faq-item:hover{box-shadow:var(--shadow-md)}.faq-question{width:100%;display:flex;align-items:center;justify-content:space-between;padding:var(--space-24);background:transparent;border:none;cursor:pointer;font-size:18px;font-weight:600;color:var(--color-text-primary);text-align:left;transition:all 0.3s ease}.faq-question:hover{color:var(--color-primary)}.faq-question span{flex:1;margin-right:var(--space-16)}.faq-icon{flex-shrink:0;transition:transform 0.3s ease;stroke:var(--color-text-secondary)}.faq-item.active .faq-icon{transform:rotate(180deg);stroke:var(--color-primary)}.faq-answer{max-height:0;overflow:hidden;transition:max-height 0.4s ease,padding 0.4s ease;padding:0 var(--space-24)}.faq-item.active .faq-answer{max-height:500px;padding:0 var(--space-24) var(--space-24)}.faq-answer p{font-size:16px;line-height:1.7;color:var(--color-text-secondary);margin:0}.faq-answer a{color:var(--color-primary);text-decoration:none;font-weight:500}.faq-answer a:hover{text-decoration:underline}.faq-cta{text-align:center;margin-top:var(--space-64);padding:var(--space-40);background:var(--color-surface);border-radius:20px}.faq-cta p{font-size:18px;font-weight:600;color:var(--color-text-primary);margin-bottom:var(--space-16)}.btn-secondary{background:var(--color-background);color:var(--color-text-primary);border:2px solid var(--color-border)}.btn-secondary:hover{background:var(--color-surface);border-color:var(--color-primary);color:var(--color-primary)}/* FAQ Responsive */ @media (max-width:768px){.faq-section{padding:var(--space-64) 0}.faq-container{margin-top:var(--space-32)}.faq-question{padding:var(--space-20);font-size:16px}.faq-answer p{font-size:15px}.faq-cta{padding:var(--space-32)}}