:root{--primary-blue:#3B82F6;
--primary-purple:#8B5CF6;
--primary-pink:#FF1B8D;
--hover-blue:#2563EB;
--hover-purple:#7C3AED;
--hover-pink:#E6007A;
--gradient-primary:linear-gradient(135deg, #FF1B8D 0%, #8B5CF6 50%, #3B82F6 100%);
--gradient-hover:linear-gradient(135deg, #E6007A 0%, #7C3AED 50%, #2563EB 100%);
--white:#ffffff;
--gray-50:#f9fafb;
--gray-100:#f3f4f6;
--gray-200:#e5e7eb;
--gray-300:#d1d5db;
--gray-400:#9ca3af;
--gray-500:#6b7280;
--gray-600:#4b5563;
--gray-700:#374151;
--gray-800:#1f2937;
--gray-900:#111827;
--success:#10b981;
--warning:#f59e0b;
--error:#ef4444;
--glass-bg:rgba(255, 255, 255, 0.08);
--glass-bg-strong:rgba(255, 255, 255, 0.12);
--glass-border:rgba(255, 255, 255, 0.16);
--glass-shadow:0 8px 32px rgba(0, 0, 0, 0.08);
--glass-shadow-strong:0 20px 40px rgba(0, 0, 0, 0.12);
--font-system:-apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
--font-mono:'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
--space-1:0.25rem;
--space-2:0.5rem;
--space-3:0.75rem;
--space-4:1rem;
--space-5:1.25rem;
--space-6:1.5rem;
--space-8:2rem;
--space-10:2.5rem;
--space-12:3rem;
--space-16:4rem;
--space-20:5rem;
--space-24:6rem;
--radius-sm:0.375rem;
--radius-md:0.5rem;
--radius-lg:0.75rem;
--radius-xl:1rem;
--radius-2xl:1.5rem;
--radius-3xl:2rem;
--transition-fast:150ms cubic-bezier(0.4, 0, 0.2, 1);
--transition-normal:300ms cubic-bezier(0.4, 0, 0.2, 1);
--transition-slow:500ms cubic-bezier(0.4, 0, 0.2, 1);
}
.mobile-text{display:none !important;
}
.desktop-text{display:inline !important;
}
@media screen and (min-width:1921px){html{zoom:1.0;
}
}
@media screen and (max-width:1920px){html{zoom:0.92;
}
}
@media screen and (max-width:1600px){html{zoom:0.80;
}
}
@media screen and (max-width:1400px){html{zoom:0.70;
}
}
@media screen and (max-width:1200px){html{zoom:0.60;
}
}
@media screen and (max-width:992px){html{zoom:0.52;
}
}
@media screen and (max-width:768px){html{zoom:0.46;
}
}
@media screen and (max-width:576px){html{zoom:0.42;
}
}
@media screen and (max-width:480px){html{zoom:0.37;
}
}
@media screen and (max-width:360px){html{zoom:0.32;
}
}
@media (max-width:1600px){.hero{padding-top:calc(4rem + var(--space-8)) !important; }
}
@media (max-width:1400px){.hero{padding-top:calc(6rem + var(--space-8)) !important; }
}
@media (max-width:1200px){.hero{padding-top:calc(8rem + var(--space-8)) !important; }
}
@media (max-width:992px){.hero{padding-top:calc(10rem + var(--space-8)) !important; }
}
@media (max-width:768px){.hero{padding-top:calc(12rem + var(--space-8)) !important; }
}
@media (max-width:576px){.hero{padding-top:calc(14rem + var(--space-8)) !important; }
}
@media (max-width:480px){.hero{padding-top:calc(16rem + var(--space-8)) !important; }
}
@media (max-width:360px){.hero{padding-top:calc(18rem + var(--space-8)) !important; }
}
@media (max-width:1600px){.demo-panel{min-height:34rem; }
.demo-content{min-height:420px; }
}
@media (max-width:1400px){.demo-panel{min-height:36rem; }
.demo-content{min-height:440px; }
}
@media (max-width:1200px){.demo-panel{min-height:38rem; }
.demo-content{min-height:460px; }
}
@media (max-width:992px){.demo-panel{min-height:40rem; }
.demo-content{min-height:480px; }
}
@media (max-width:768px){.demo-panel{min-height:42rem; }
.demo-content{min-height:500px; }
}
@media (max-width:576px){.demo-panel{min-height:44rem; }
.demo-content{min-height:520px; }
}
@media (max-width:480px){.demo-panel{min-height:46rem; }
.demo-content{min-height:540px; }
}
@media (max-width:360px){.demo-panel{min-height:48rem; }
.demo-content{min-height:560px; }
}
@media (max-width:768px){html{zoom:1 !important;
}
#how-it-works,
section.how-it-works{display:none !important;
visibility:hidden !important;
height:0 !important;
overflow:hidden !important;
margin:0 !important;
padding:0 !important;
}
#analysis-methods,
section.analysis-methods{display:none !important;
visibility:hidden !important;
height:0 !important;
overflow:hidden !important;
margin:0 !important;
padding:0 !important;
}
.hero{padding-top:7.5rem !important;
}
html, body{overflow-x:hidden;
width:100%;
max-width:100%;
}
.mobile-menu-btn{display:flex !important;
align-items:center;
gap:6px;
background:#f5f5f7;
border:1px solid #e0e0e0;
border-radius:8px;
padding:11px 16px;
cursor:pointer;
font-size:1.0rem;
font-weight:600;
color:#333;
}
.mobile-menu-btn span{display:none;
}
.mobile-menu-btn::before{content:"☰ Menu";
}
.nav-menu{display:none !important;
}
.nav-menu.active{display:flex !important;
position:absolute;
top:100%;
left:0;
right:0;
flex-direction:column;
background:white;
padding:1.5rem;
box-shadow:0 4px 20px rgba(0,0,0,0.1);
gap:0.75rem;
align-items:stretch;
}
.nav-menu.active .nav-link{padding:0.75rem 1rem;
text-align:center;
border-radius:8px;
transition:background-color 0.2s;
}
.nav-menu.active .nav-link:hover{background:#f5f5f7;
}
.nav-menu.active .nav-auth{display:flex !important;
flex-direction:column;
gap:0.75rem;
margin:0.5rem 0 0 0;
padding-top:0.75rem;
border-top:1px solid #e0e0e0;
}
.nav-menu.active .nav-login{width:100%;
text-align:center;
box-sizing:border-box;
}
.nav-menu.active .nav-cta{width:100%;
box-sizing:border-box;
justify-content:center;
text-align:center;
}
.logo-icon-modern img{width:28px !important;
height:28px !important;
}
.logo-text{font-size:1.1rem !important;
}
.logo-modern{gap:0.4rem !important;
margin-left:0.5rem !important;
}
.hero-container{display:flex !important;
flex-direction:column !important;
align-items:center !important;
padding:0 1rem !important;
}
.hero-content{order:1;
text-align:center;
width:100%;
display:flex;
flex-direction:column;
}
.hero-content .hero-actions{display:contents;
}
.hero-content .hero-title{order:1;
}
.hero-content .hero-subtitle{order:2;
}
.hero-content .hero-description{order:3;
}
.hero-content .hero-actions .main-cta{order:4;
margin-bottom:0.5rem !important;
}
.hero-content .hero-actions a[href="#demo"]{order:5;
margin-bottom:1.5rem !important;
}
.hero-content .market-support{order:6;
margin-bottom:0.5rem !important;
}
.hero-content .hero-actions .hero-trust{order:7;
margin-top:0 !important;
}
.hero-visual{order:2;
width:100%;
display:flex;
justify-content:center;
}
.hero-title{white-space:nowrap !important;
font-size:2.97rem !important;
text-align:center !important;
margin-bottom:1.25rem !important;
}
.hero-subtitle{white-space:normal !important;
font-size:1.13rem !important;
text-align:center !important;
margin-bottom:1rem !important;
}
.hero-description{font-size:1rem !important;
margin-bottom:1.75rem !important;
}
.market-support{flex-direction:column;
align-items:center;
gap:1rem !important;
margin-bottom:1.75rem !important;
}
.market-support-label{display:none !important;
}
.hero-cta{justify-content:center;
margin-bottom:0.5rem !important;
}
.hero-cta .btn-primary,
.hero-cta a,
.hero-cta button{white-space:nowrap !important;
font-size:0.8rem !important;
padding:0.75rem 1.5rem !important;
width:auto !important;
min-width:0 !important;
max-width:none !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
}
.hero-cta .btn-primary svg,
.hero-cta a svg{width:14px !important;
height:14px !important;
margin-right:4px !important;
flex-shrink:0 !important;
}
.desktop-text{display:none !important;
}
.mobile-text{display:inline !important;
}
.hero-trust,
body:not(.no-transition) .hero-trust,
body .hero-trust{justify-content:center;
margin-top:-12px !important;
opacity:0.7 !important;
transform:scale(1) !important;
transition:none !important;
animation:none !important;
}
.trust-badge{padding:var(--space-3) var(--space-5) !important;
}
.trust-text{font-size:0.85rem !important;
}
.trust-stars svg{width:14px !important;
height:14px !important;
}
.market-badges{flex-wrap:nowrap !important;
justify-content:center;
overflow-x:auto;
-webkit-overflow-scrolling:touch;
scrollbar-width:none;
-ms-overflow-style:none;
}
.market-badges::-webkit-scrollbar{display:none;
}
.market-badge{font-size:0.7rem !important;
padding:0.35rem 0.65rem !important;
}
.market-badge:last-child{display:none !important;
}
.market-support{flex-direction:column;
align-items:center;
gap:0.75rem;
}
.hero-trust{justify-content:center;
}
.hero-cta{justify-content:center;
}
.demo-panel{width:95% !important;
max-width:95% !important;
}
.trust-logos{flex-wrap:wrap;
justify-content:center;
gap:0.5rem;
}
.trust-logos img{max-width:70px;
height:auto;
}
.demo-panel{width:100% !important;
max-width:100% !important;
margin:-1rem 0 0 0 !important;
border-radius:16px !important;
overflow:hidden !important;
}
.demo-header{padding:10px 14px !important;
}
.demo-badge{font-size:0.75rem !important;
padding:3px 10px !important;
}
.demo-badge .live-dot{width:6px !important;
height:6px !important;
}
.control-dot{width:10px !important;
height:10px !important;
}
.demo-content,
#demoContent{height:auto !important;
min-height:480px !important;
max-height:none !important;
overflow:visible !important;
padding:0 !important;
display:flex !important;
align-items:flex-start !important;
justify-content:center !important;
padding-top:20px !important;
}
.demo-panel{max-height:none !important;
overflow:visible !important;
}
.upload-state,
#uploadState{padding:1.5rem 1.25rem 1.25rem !important;
padding-top:3rem !important;
margin-top:0 !important;
min-height:420px !important;
}
.result-state,
#resultState{max-height:none !important;
height:auto !important;
overflow:visible !important;
padding:12px !important;
}
.upload-state .upload-icon svg{width:48px !important;
height:48px !important;
}
.upload-state h3{font-size:1.4rem !important;
margin:0.75rem 0 0.5rem !important;
font-weight:700 !important;
}
.upload-state p{font-size:0.95rem !important;
margin-bottom:1.1rem !important;
}
.upload-btn{padding:0.88rem 1.9rem !important;font-size:1rem !important;font-weight:600 !important;}
.demo-chart-btn{padding:0.62rem 1.35rem !important;font-size:0.85rem !important;font-weight:600 !important;}
.demo-divider{margin:0.85rem 0 !important;
}
.demo-divider span{font-size:0.85rem !important;
}
.demo-selection-state{padding:0 !important;
}
.demo-selection-state > div{padding:12px 16px 16px !important;
gap:12px !important;
}
.demo-selection-state h2{font-size:1.4rem !important;
margin-bottom:0 !important;
}
.demo-selection-state > div > div:nth-child(2){gap:10px !important;
}
.demo-selection-state button[onclick^="selectDemoChart"]{min-height:140px !important;
border-radius:12px !important;
}
.demo-selection-state button[onclick^="selectDemoChart"] img{width:40px !important;
height:40px !important;
}
.demo-selection-state button[onclick^="selectDemoChart"] > div:last-child{padding:10px 12px !important;
}
.demo-selection-state button[onclick^="selectDemoChart"] > div:last-child > div:first-child{font-size:0.7rem !important;
}
.demo-selection-state button[onclick^="selectDemoChart"] > div:last-child > div:last-child{font-size:0.85rem !important;
}
.demo-selection-state > div > div:last-child{gap:8px !important;
margin-top:4px !important;
}
.demo-selection-state > div > div:last-child button{padding:10px 14px !important;
font-size:0.8rem !important;
border-radius:10px !important;
}
.image-preview-state,
#imagePreviewState{padding:1rem !important;
padding-top:2.5rem !important;
margin-top:0 !important;
}
.preview-container{gap:14px !important;
}
.uploaded-image-container{margin-bottom:10px !important;
}
.image-wrapper{max-width:280px !important;
}
#uploadedImage{height:150px !important;
border-radius:8px !important;
}
.image-action-btn{width:28px !important;
height:28px !important;
}
.image-action-btn svg{width:13px !important;
height:13px !important;
}
.analysis-options-title{font-size:1.1rem !important;
}
.image-info{max-width:100% !important;
width:100% !important;
}
.inputs-row{gap:8px !important;
margin-bottom:10px !important;
}
.chart-input,
.analysis-select{padding:10px 12px !important;
font-size:0.85rem !important;
height:42px !important;
}
.preview-actions{max-width:100% !important;
width:100% !important;
gap:8px !important;
}
.action-btn.primary.large{padding:12px 20px !important;
font-size:0.9rem !important;
border-radius:8px !important;
}
.trials-counter{font-size:0.75rem !important;
}
.loading-state{min-height:400px !important;
padding:30px 20px !important;
}
.loading-state h3{font-size:1.25rem !important;
}
.loading-state p{font-size:0.9rem !important;
}
.result-state{padding:10px 10px 16px 10px !important;
gap:8px !important;
}
.chart-result-preview{height:120px !important;
border-radius:10px !important;
}
.result-action-btn{padding:10px 16px !important;
font-size:0.85rem !important;
border-radius:10px !important;
white-space:nowrap !important;
}
.upload-hint-container{position:relative !important;
padding:14px 16px !important;
margin-top:8px !important;
background:transparent !important;
border-top:1px solid rgba(0, 0, 0, 0.06) !important;
}
.upload-hint{font-size:0.8rem !important;
color:#6B7280 !important;
font-weight:500 !important;
}
.premium-blur-price,
.premium-blur-price *{-webkit-user-select:none !important;
-moz-user-select:none !important;
-ms-user-select:none !important;
user-select:none !important;
-webkit-touch-callout:none !important;
pointer-events:none !important;
}
.premium-blur-price .premium-tooltip{pointer-events:auto !important;
}
.scroll-arrow{display:none !important;
}
.container{padding:0 1rem !important;
max-width:100% !important;
}
.section-header{text-align:center !important;
margin-bottom:1.5rem !important;
}
.section-header h2{font-size:1.5rem !important;
line-height:1.3 !important;
margin-bottom:0.75rem !important;
}
.section-header p{font-size:0.9rem !important;
}
#features,
.features{padding:3rem 0 !important;
}
.features-grid{display:flex !important;
flex-direction:column !important;
gap:1rem !important;
}
.feature-card{padding:1.25rem !important;
border-radius:12px !important;
}
.feature-header{gap:0.75rem !important;
margin-bottom:0.5rem !important;
}
.feature-header h3{font-size:1rem !important;
}
.feature-icon{width:40px !important;
height:40px !important;
}
.feature-icon svg{width:20px !important;
height:20px !important;
}
.feature-card p{font-size:0.85rem !important;
line-height:1.5 !important;
}
.mockup-preview{display:none !important;
}
#use-cases{padding:3rem 0 !important;
}
#signals-predict,
.signals-predict{padding:3rem 0 !important;
}
#signals-predict > .container > div:nth-child(2){display:flex !important;
flex-direction:column !important;
gap:2rem !important;
}
#signals-predict > .container > div:nth-child(2) > div{max-width:100% !important;
}
#signals-predict > .container > div:nth-child(2) > div h3{font-size:1.1rem !important;
}
#signals-predict > .container > div:nth-child(2) > div p{font-size:0.85rem !important;
max-width:100% !important;
}
#pricing,
.pricing{padding:3rem 0 !important;
}
#pricing .section-header h2{font-size:1.5rem !important;
line-height:1.25 !important;
text-align:center !important;
margin-bottom:0.5rem !important;
}
#pricing .section-header{margin-bottom:1.25rem !important;
padding:0 0.5rem !important;
}
#pricing > .container > div:nth-child(2){margin:0 0 1.25rem 0 !important;
display:flex !important;
justify-content:center !important;
}
#pricing > .container > div:nth-child(2) > div{padding:4px !important;
border-radius:12px !important;
}
#pricing > .container > div:nth-child(2) button,
#monthlyBtn,
#yearlyBtn{padding:0.65rem 1.1rem !important;
font-size:0.9rem !important;
font-weight:600 !important;
border-radius:9px !important;
}
#discountBadge,
#saveBadge{font-size:0.6rem !important;
padding:2px 6px !important;
top:-8px !important;
right:-8px !important;
}
.pricing-cards{display:flex !important;
flex-direction:column !important;
gap:1.25rem !important;
max-width:100% !important;
padding:0 0.25rem !important;
margin:0 !important;
}
.pricing-card{width:100% !important;
max-width:100% !important;
padding:1.25rem 1rem !important;
margin:0 !important;
border-radius:16px !important;
box-shadow:0 2px 12px rgba(0, 0, 0, 0.08) !important;
}
.pricing-card.featured{padding:1.5rem 1rem !important;
box-shadow:0 4px 20px rgba(102, 126, 234, 0.2) !important;
margin:0 !important;
}
.popular-badge{font-size:0.62rem !important;
padding:0.35rem 0.75rem !important;
}
.plan-header{padding-bottom:0.9rem !important;
margin-bottom:1rem !important;
padding-top:0 !important;
}
.plan-header h3{font-size:1.35rem !important;
font-weight:700 !important;
margin-bottom:0.35rem !important;
}
#starterSubtext,
#proSubtext,
.plan-header > p:first-of-type{font-size:0.82rem !important;
margin-bottom:0.75rem !important;
color:#6b7280 !important;
}
.plan-price{display:flex !important;
align-items:baseline !important;
justify-content:flex-start !important;
}
.plan-price .currency{font-size:1.9rem !important;
font-weight:700 !important;
line-height:1 !important;
}
.plan-price .amount{font-size:2.5rem !important;
font-weight:700 !important;
line-height:1 !important;
}
.plan-price .period{font-size:0.95rem !important;
font-weight:600 !important;
margin-left:4px !important;
margin-bottom:5px !important;
}
#starterSaving,
#proSaving{font-size:0.88rem !important;
padding:6px 10px !important;
border-radius:8px !important;
margin-top:8px !important;
}
.plan-features{margin-bottom:1rem !important;
}
.feature-item{gap:8px !important;
margin-bottom:0.75rem !important;
}
.feature-item svg{width:18px !important;
height:18px !important;
}
.feature-item span{font-size:0.88rem !important;
line-height:1.35 !important;
}
.plan-cta{font-size:0.98rem !important;
font-weight:700 !important;
padding:0.85rem 1.25rem !important;
border-radius:10px !important;
margin-top:0.35rem !important;
}
.pricing-card > p:last-child{font-size:0.75rem !important;
margin-top:0.75rem !important;
}
.pricing-card > p:last-child svg{width:13px !important;
height:13px !important;
}
#pricing img[alt="Customer Testimonials"]{max-width:100% !important;
margin-top:1.5rem !important;
}
#faq,
.faq-section{padding:3rem 0 !important;
}
.faq-title{font-size:1.75rem !important;
margin-bottom:1.5rem !important;
}
.faq-container{gap:0.75rem !important;
}
.faq-item{border-radius:10px !important;
}
.faq-question{padding:1rem !important;
font-size:0.9rem !important;
}
.faq-question span{font-size:0.9rem !important;
line-height:1.4 !important;
}
.faq-arrow{width:20px !important;
height:20px !important;
flex-shrink:0 !important;
}
.faq-answer{padding:0 1rem 1rem !important;
}
.faq-answer p{font-size:0.85rem !important;
line-height:1.5 !important;
}
.testimonials-container{flex-direction:column !important;
gap:1rem !important;
margin-top:2rem !important;
}
.testimonial-card{padding:1.25rem !important;
border-radius:12px !important;
}
.testimonial-avatar{width:40px !important;
height:40px !important;
margin-right:0.75rem !important;
}
.avatar-placeholder{font-size:0.9rem !important;
}
.testimonial-text{font-size:0.85rem !important;
line-height:1.5 !important;
}
.testimonial-author{font-size:0.8rem !important;
margin-top:0.5rem !important;
}
.footer{padding:2.5rem 1rem 1.5rem !important;
background:#1a1a2e !important;
}
.footer .container{padding:0 !important;
}
.footer-content{display:flex !important;
flex-direction:column !important;
gap:2rem !important;
align-items:center !important;
}
.footer-brand{text-align:center !important;
margin-bottom:0.5rem !important;
width:100% !important;
display:flex !important;
flex-direction:column !important;
align-items:center !important;
}
.footer-brand .logo-modern{display:flex !important;
align-items:center !important;
justify-content:center !important;
gap:0.5rem !important;
margin-bottom:0.75rem !important;
}
.footer-brand .logo-icon-modern{width:32px !important;
height:32px !important;
}
.footer-brand .logo-icon-modern svg{width:28px !important;
height:28px !important;
}
.footer-brand .logo-text{font-size:1.25rem !important;
font-weight:700 !important;
}
.footer-brand .logo-ai{font-size:0.75rem !important;
padding:2px 6px !important;
}
.footer-brand > p{font-size:0.85rem !important;
color:rgba(255, 255, 255, 0.6) !important;
max-width:280px !important;
line-height:1.5 !important;
margin:0 auto !important;
}
.footer-links{display:grid !important;
grid-template-columns:repeat(2, 1fr) !important;
gap:1.5rem 2rem !important;
width:100% !important;
max-width:320px !important;
margin:0 auto !important;
text-align:center !important;
}
.footer-column{display:flex !important;
flex-direction:column !important;
align-items:center !important;
}
.footer-column h4{font-size:0.9rem !important;
font-weight:700 !important;
margin-bottom:0.75rem !important;
color:#ffffff !important;
text-transform:uppercase !important;
letter-spacing:0.05em !important;
}
.footer-column a{font-size:0.85rem !important;
color:rgba(255, 255, 255, 0.6) !important;
margin-bottom:0.5rem !important;
display:block !important;
transition:color 0.2s ease !important;
text-decoration:none !important;
}
.footer-column a:hover{color:#ffffff !important;
}
.footer-bottom{display:flex !important;
flex-direction:column !important;
align-items:center !important;
gap:1rem !important;
text-align:center !important;
padding-top:1.5rem !important;
margin-top:1.5rem !important;
border-top:1px solid rgba(255, 255, 255, 0.1) !important;
width:100% !important;
}
.footer-bottom p{font-size:0.8rem !important;
color:rgba(255, 255, 255, 0.5) !important;
margin:0 !important;
}
.social-links{display:flex !important;
justify-content:center !important;
align-items:center !important;
gap:1rem !important;
}
.social-links a{display:flex !important;
align-items:center !important;
justify-content:center !important;
width:40px !important;
height:40px !important;
background:rgba(255, 255, 255, 0.1) !important;
border-radius:50% !important;
transition:all 0.2s ease !important;
}
.social-links a:hover{background:rgba(255, 255, 255, 0.2) !important;
transform:translateY(-2px) !important;
}
.social-links a svg{width:18px !important;
height:18px !important;
color:rgba(255, 255, 255, 0.8) !important;
fill:rgba(255, 255, 255, 0.8) !important;
}
.main-cta,
.cta-button,
a[href="#pricing"].cta-button{font-size:0.85rem !important;
padding:0.875rem 1.5rem !important;
width:100% !important;
max-width:320px !important;
display:flex !important;
justify-content:center !important;
margin-left:auto !important;
margin-right:auto !important;
}
.testimonials-container + div img,
img[alt="Customer Testimonials"]{max-width:100% !important;
height:auto !important;
}
.upgrade-modal{padding:0 !important;
align-items:flex-start !important;
}
.upgrade-modal .modal-content{width:100% !important;
max-width:100% !important;
min-height:100vh !important;
max-height:100vh !important;
margin:0 !important;
border-radius:0 !important;
padding:1.5rem 1rem !important;
overflow-y:auto !important;
-webkit-overflow-scrolling:touch !important;
}
.upgrade-modal .modal-content.pricing-modal-content{background:#f5f7ff !important;
padding:1rem 0.75rem 2rem !important;
}
.upgrade-modal .modal-close{position:fixed !important;
top:12px !important;
right:12px !important;
width:36px !important;
height:36px !important;
z-index:10001 !important;
background:rgba(255, 255, 255, 0.95) !important;
border:1px solid rgba(0, 0, 0, 0.1) !important;
border-radius:50% !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
box-shadow:0 2px 8px rgba(0, 0, 0, 0.15) !important;
}
.upgrade-modal .modal-close svg{width:18px !important;
height:18px !important;
}
.modal-pricing-container{padding:0.5rem 0 !important;
min-height:auto !important;
overflow-y:visible !important;
}
.modal-pricing-container > div:first-child,
.pricing-modal-content > .modal-pricing-container > div:first-child{margin-bottom:1.25rem !important;
padding:0 0.5rem !important;
}
.modal-pricing-container h2,
.pricing-modal-content h2{font-size:1.5rem !important;
line-height:1.25 !important;
text-align:center !important;
margin-bottom:0.5rem !important;
}
.modal-pricing-container > div:nth-child(2),
.pricing-modal-content > .modal-pricing-container > div:nth-child(2){margin:0 0 1.25rem 0 !important;
display:flex !important;
justify-content:center !important;
}
.modal-pricing-container > div:nth-child(2) > div{padding:4px !important;
border-radius:12px !important;
}
#modalMonthlyBtn,
#modalYearlyBtn{padding:0.65rem 1.1rem !important;
font-size:0.9rem !important;
font-weight:600 !important;
border-radius:9px !important;
}
#modalDiscountBadge,
#modalSaveBadge{font-size:0.6rem !important;
padding:2px 6px !important;
top:-8px !important;
right:-8px !important;
}
.modal-pricing-cards{display:flex !important;
flex-direction:column !important;
gap:1.25rem !important;
max-width:100% !important;
padding:0 0.25rem !important;
margin:0 !important;
}
.modal-pricing-cards .pricing-card{width:100% !important;
max-width:100% !important;
padding:1.25rem 1rem !important;
margin:0 !important;
border-radius:16px !important;
box-shadow:0 2px 12px rgba(0, 0, 0, 0.08) !important;
}
.modal-pricing-cards .pricing-card.featured{padding:1.5rem 1rem !important;
box-shadow:0 4px 20px rgba(102, 126, 234, 0.2) !important;
}
.modal-pricing-cards .plan-header{padding-bottom:0.9rem !important;
margin-bottom:1rem !important;
padding-top:0 !important;
}
.modal-pricing-cards .plan-header h3{font-size:1.35rem !important;
font-weight:700 !important;
margin-bottom:0.35rem !important;
}
#modalStarterSubtext,
#modalProSubtext,
.modal-pricing-cards .plan-header > p:first-of-type{font-size:0.82rem !important;
margin-bottom:0.75rem !important;
color:#6b7280 !important;
}
.modal-pricing-cards .plan-price{display:flex !important;
align-items:baseline !important;
justify-content:flex-start !important;
}
.modal-pricing-cards .plan-price .currency{font-size:1.9rem !important;
font-weight:700 !important;
line-height:1 !important;
}
.modal-pricing-cards .plan-price .amount,
#modalStarterPrice,
#modalProPrice{font-size:2.5rem !important;
font-weight:700 !important;
line-height:1 !important;
}
.modal-pricing-cards .plan-price .period,
#modalStarterPeriod,
#modalProPeriod{font-size:0.95rem !important;
font-weight:600 !important;
margin-left:4px !important;
margin-bottom:5px !important;
}
#modalStarterSaving,
#modalProSaving{font-size:0.88rem !important;
padding:6px 10px !important;
border-radius:8px !important;
margin-top:8px !important;
}
.modal-pricing-cards .plan-features{margin-bottom:1rem !important;
}
.modal-pricing-cards .feature-item{gap:8px !important;
margin-bottom:0.75rem !important;
}
.modal-pricing-cards .feature-item svg{width:18px !important;
height:18px !important;
}
.modal-pricing-cards .feature-item span{font-size:0.88rem !important;
line-height:1.35 !important;
}
.modal-pricing-cards .plan-cta{font-size:0.98rem !important;
font-weight:700 !important;
padding:0.85rem 1.25rem !important;
border-radius:10px !important;
margin-top:0.35rem !important;
}
.modal-pricing-cards .popular-badge{font-size:0.62rem !important;
padding:0.35rem 0.75rem !important;
}
.modal-pricing-cards .pricing-card > p:last-child{font-size:0.75rem !important;
margin-top:0.75rem !important;
}
.modal-pricing-cards .pricing-card > p:last-child svg{width:13px !important;
height:13px !important;
}
.modal-pricing-container img[alt="Customer Testimonials"],
.pricing-modal-content img[alt="Customer Testimonials"]{display:none !important;
}
#upgradeModal{padding:1rem !important;
}
#upgradeModal[style*="flex"]{align-items:center !important;
justify-content:center !important;
}
#upgradeModal .modal-content{width:95% !important;
max-width:400px !important;
min-height:auto !important;
max-height:85vh !important;
margin:auto !important;
border-radius:20px !important;
padding:2rem 1.5rem !important;
position:relative !important;
top:auto !important;
transform:none !important;
}
#upgradeModal .modal-header{margin-bottom:1.5rem !important;
}
#upgradeModal .modal-icon{font-size:40px !important;
margin-bottom:12px !important;
}
#upgradeModal .modal-header h2{font-size:1.5rem !important;
margin-bottom:8px !important;
}
#upgradeModal .modal-header p{font-size:0.9rem !important;
line-height:1.5 !important;
}
#upgradeModal .modal-features{margin-bottom:1.5rem !important;
gap:0 !important;
}
#upgradeModal .modal-feature{padding:6px 0 !important;
gap:10px !important;
}
#upgradeModal .modal-feature svg{width:20px !important;
height:20px !important;
}
#upgradeModal .modal-feature span{font-size:0.95rem !important;
font-weight:500 !important;
}
#upgradeModal .modal-cta{font-size:1rem !important;
padding:0.9rem 1.5rem !important;
width:100% !important;
border-radius:12px !important;
}
#upgradeModal .modal-note{font-size:0.8rem !important;
margin-top:0.75rem !important;
}
}
@media (max-width:480px){.hero-title{font-size:2.1rem !important;
text-align:center !important;
}
}
body.no-transition,
body.no-transition *,
body.no-transition *::before,
body.no-transition *::after{animation-duration:0s !important;
animation-delay:0s !important;
transition-duration:0s !important;
transition-delay:0s !important;
animation:none !important;
transition:none !important;
}
body.no-transition *{opacity:1 !important;
transform:none !important;
visibility:visible !important;
}
@keyframes bounce-arrow{0%, 20%, 50%, 80%, 100%{transform:translateY(0);
}
40%{transform:translateY(-8px);
}
60%{transform:translateY(-4px);
}
}
@keyframes pulse{0%, 100%{opacity:1; }
50%{opacity:0.5; }
}
@keyframes fadeIn{from{opacity:0; transform:translateY(10px); }
to{opacity:1; transform:translateY(0); }
}
@keyframes brain-pulse{0%, 100%{transform:translate(-50%, -50%) scale(1); }
50%{transform:translate(-50%, -50%) scale(1.1); }
}
@keyframes brain-wave{0%{transform:translate(-50%, -50%) scale(0.5);
opacity:1;
}
100%{transform:translate(-50%, -50%) scale(1.2);
opacity:0;
}
}
@keyframes progress-fill{0%{width:0%; }
25%{width:35%; }
50%{width:65%; }
75%{width:85%; }
100%{width:100%; }
}
*{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-system);
line-height:1.6;
color:var(--gray-900);
position:relative;
overflow-x:hidden;
}
body::before{content:'';
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
pointer-events:none;
background:linear-gradient(135deg, #fafbfc 0%, #f4f6f8 100%);
background-size:cover;
background-position:0 0;
z-index:-1;
opacity:1;
}
.container{max-width:1200px;
margin:0 auto;
padding:0 var(--space-6);
position:relative;
z-index:1;
}
svg#glassGradients{position:absolute;
width:0;
height:0;
}
.sr-only{position:absolute;
width:1px;
height:1px;
padding:0;
margin:-1px;
overflow:hidden;
clip:rect(0, 0, 0, 0);
white-space:nowrap;
border:0;
}
.cta-button{display:inline-flex;
align-items:center;
gap:var(--space-2);
padding:var(--space-3) var(--space-6);
background:var(--gradient-primary);
color:white;
border-radius:var(--radius-md);
text-decoration:none;
font-size:0.75rem;
font-weight:700;
letter-spacing:0.05em;
text-transform:uppercase;
box-shadow:0 8px 24px rgba(139, 92, 246, 0.4);
white-space:nowrap;
border:none;
cursor:pointer;
transition:all var(--transition-normal);
}
.cta-button:hover{background:var(--gradient-hover);
transform:translateY(-1px);
box-shadow:0 4px 16px rgba(139, 92, 246, 0.3);
}
.glass-card{background:transparent;
backdrop-filter:none;
-webkit-backdrop-filter:none;
border:none;
border-radius:20px;
padding:var(--space-5);
box-shadow:none;
transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position:relative;
overflow:hidden;
}
.glass-card::before{display:none;
}
.glass-card:hover{transform:translateY(-2px);
box-shadow:none;
}
.glass-button{flex:1;
display:flex;
align-items:center;
justify-content:center;
gap:var(--space-2);
padding:var(--space-4) var(--space-5);
border-radius:16px;
font-weight:600;
font-size:0.95rem;
cursor:pointer;
transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
border:none;
position:relative;
overflow:hidden;
}
.glass-button::before{content:'';
position:absolute;
top:0;
left:-100%;
width:100%;
height:100%;
background:linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
transition:left 0.5s ease;
}
.glass-button:hover::before{left:100%;
}
.glass-button svg{width:18px;
height:18px;
transition:transform 0.3s ease;
}
.glass-button:hover svg{transform:translateY(-2px);
}
.glass-button.primary{background:linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color:white;
box-shadow:0 8px 20px rgba(102, 126, 234, 0.25);
}
.glass-button.primary:hover{transform:translateY(-2px);
box-shadow:0 12px 28px rgba(102, 126, 234, 0.35);
}
.glass-button.secondary{background:transparent;
backdrop-filter:none;
-webkit-backdrop-filter:none;
border:1px solid rgba(0, 0, 0, 0.15);
color:var(--gray-700);
}
.glass-button.secondary:hover{transform:translateY(-2px);
background:transparent;
box-shadow:none;
border-color:rgba(0, 0, 0, 0.25);
}
.nav-glass{position:fixed;
top:0;
left:0;
right:0;
z-index:1000;
background:rgba(255, 255, 255, 0.72);
backdrop-filter:blur(20px);
-webkit-backdrop-filter:blur(20px);
border-bottom:2px solid rgba(0, 0, 0, 0.12);
transition:all var(--transition-normal);
transform:translateY(0);
}
.nav-glass.scrolled{background:rgba(255, 255, 255, 0.85);
box-shadow:var(--glass-shadow);
border-bottom:2px solid rgba(0, 0, 0, 0.18);
}
.nav-container{max-width:1400px;
margin:0 auto;
padding:0 var(--space-4);
display:flex;
align-items:center;
justify-content:space-between;
height:clamp(4rem, 5vw, 4.9375rem);
}
.logo-modern{display:flex;
align-items:center;
gap:var(--space-2);
text-decoration:none;
transition:transform var(--transition-fast);
transform:scale(1.15);
margin-left:calc(var(--space-4) * -1);
}
.logo-modern:hover{transform:scale(1.122);
}
.logo-icon-modern{display:flex;
align-items:center;
justify-content:center;
filter:drop-shadow(0 2px 8px rgba(59, 130, 246, 0.25));
}
.logo-icon-modern img{width:36px;
height:36px;
object-fit:contain;
}
.logo-text{font-size:1.575rem;
font-weight:700;
color:var(--gray-900);
letter-spacing:-0.02em;
line-height:1.1;
}
.logo-ai{font-size:1.625rem;
font-weight:800;
background:var(--gradient-primary);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background-clip:text;
margin-left:-2px;
}
.nav-menu{display:flex;
align-items:center;
gap:calc(var(--space-6) * 1.3);
flex:1;
justify-content:center;
padding:0 var(--space-8);
margin-left:calc(var(--space-16) * 2);
}
.nav-auth{display:flex;
align-items:center;
gap:var(--space-3);
margin-left:auto;
margin-right:var(--space-2);
}
.nav-link{color:var(--gray-700);
text-decoration:none;
font-weight:500;
font-size:1.05rem;
transition:color var(--transition-fast);
position:relative;
}
.nav-link:hover{color:var(--gray-900);
}
.nav-link::after{content:'';
position:absolute;
bottom:-4px;
left:0;
width:0;
height:2px;
background:var(--gradient-primary);
transition:width var(--transition-fast);
}
.nav-link:hover::after{width:100%;
}
.nav-login{background:transparent;
border:1.5px solid var(--gray-300);
color:var(--gray-700) !important;
font-weight:600;
font-size:1rem;
padding:calc(var(--space-2) * 1.1) calc(var(--space-4) * 1.1);
border-radius:var(--radius-lg);
transition:all var(--transition-fast);
text-decoration:none;
display:inline-block;
}
.nav-login:hover{border-color:var(--gray-400);
color:var(--gray-900) !important;
transform:translateY(-1px);
}
.nav-cta{background:var(--gradient-primary);
color:white !important;
padding:calc(var(--space-2) * 1.1) calc(var(--space-4) * 1.1);
border-radius:var(--radius-lg);
text-decoration:none;
font-weight:600;
font-size:1rem;
transition:all var(--transition-fast);
box-shadow:0 4px 16px rgba(59, 130, 246, 0.25);
white-space:nowrap;
display:inline-flex;
align-items:center;
}
.nav-cta:hover{background:var(--gradient-hover);
transform:translateY(-1px);
box-shadow:0 8px 24px rgba(59, 130, 246, 0.35);
}
.mobile-menu-btn{display:none;
flex-direction:column;
gap:4px;
background:none;
border:none;
cursor:pointer;
padding:var(--space-2);
}
.mobile-menu-btn span{width:24px;
height:2px;
background:var(--gray-700);
transition:all var(--transition-fast);
}
.hero{min-height:100vh;
display:flex;
align-items:center;
position:relative;
overflow:hidden;
padding:calc(1rem + var(--space-8)) 0 var(--space-12);
}
.hero-background{position:absolute;
top:0;
left:0;
right:0;
bottom:0;
pointer-events:none;
}
.floating-shapes{position:absolute;
width:100%;
height:100%;
display:none;
}
.shape{position:absolute;
border-radius:50%;
filter:blur(60px);
opacity:0;
}
.grid-pattern{position:absolute;
top:0;
left:0;
right:0;
bottom:0;
}
.hero-container{max-width:min(1260px, 95vw);
margin:0 auto;
padding:0 var(--space-6);
display:grid;
grid-template-columns:1fr 1fr;
gap:calc(var(--space-16) * 1.05);
align-items:center;
position:relative;
z-index:1;
}
.hero-content{max-width:min(630px, 100%);
}
.hero-badge{display:inline-flex;
align-items:center;
gap:var(--space-2);
background:var(--glass-bg);
backdrop-filter:blur(12px);
-webkit-backdrop-filter:blur(12px);
padding:var(--space-2) var(--space-4);
border-radius:var(--radius-2xl);
font-size:0.8rem;
font-weight:600;
color:var(--gray-700);
margin-bottom:var(--space-6);
}
.badge-dot{width:6px;
height:6px;
background:var(--primary-blue);
border-radius:50%;
}
.hero-title{font-size:3.2rem;
font-weight:700;
line-height:1.1;
color:var(--gray-900);
margin-bottom:var(--space-3);
white-space:nowrap;
}
.gradient-text{background:var(--gradient-primary);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background-clip:text;
display:inline-block;
}
.hero-subtitle{font-size:1.18rem;
font-weight:500;
color:var(--primary-blue);
margin-bottom:var(--space-4);
white-space:nowrap;
}
.hero-description{font-size:1.18rem;
line-height:1.6;
color:var(--gray-600);
margin-bottom:var(--space-6);
}
.market-support{display:flex;
align-items:center;
gap:var(--space-4);
margin-bottom:var(--space-6);
}
.market-support-label{font-size:0.79rem;
font-weight:600;
color:var(--gray-500);
text-transform:uppercase;
letter-spacing:0.08em;
white-space:nowrap;
}
.market-badges{display:flex;
flex-wrap:nowrap;
gap:var(--space-2);
overflow-x:auto;
-webkit-overflow-scrolling:touch;
scrollbar-width:none;
-ms-overflow-style:none;
}
.market-badges::-webkit-scrollbar{display:none;
}
.market-badge{background:rgba(59, 130, 246, 0.08);
backdrop-filter:blur(8px);
-webkit-backdrop-filter:blur(8px);
border:1px solid rgba(59, 130, 246, 0.12);
color:var(--primary-blue);
padding:6px 13px;
border-radius:6px;
font-size:0.79rem;
font-weight:600;
transition:all var(--transition-fast);
box-shadow:0 1px 3px rgba(0, 0, 0, 0.05);
flex-shrink:0;
white-space:nowrap;
}
.market-badge:hover{background:rgba(59, 130, 246, 0.12);
border-color:rgba(59, 130, 246, 0.2);
transform:translateY(-1px);
box-shadow:0 2px 8px rgba(59, 130, 246, 0.15);
}
.hero-actions{display:flex;
flex-direction:column;
align-items:center;
gap:var(--space-4);
}
.main-cta{display:inline-flex;
align-items:center;
gap:var(--space-2);
background:var(--gradient-primary) !important;
color:#ffffff !important;
padding:calc(var(--space-3) * 1.15) calc(var(--space-6) * 1.15);
border-radius:var(--radius-lg);
text-decoration:none;
font-weight:600;
font-size:1.18rem;
transition:all var(--transition-normal);
box-shadow:0 8px 24px rgba(59, 130, 246, 0.25);
border:none;
cursor:pointer;
text-shadow:0 1px 2px rgba(0, 0, 0, 0.1);
}
.main-cta:hover{background:var(--gradient-hover) !important;
transform:translateY(-2px);
box-shadow:0 12px 32px rgba(59, 130, 246, 0.35);
}
.main-cta.large{padding:var(--space-4) var(--space-8);
font-size:1.125rem;
}
.main-cta.full-width{width:100%;
justify-content:center;
}
.demo-btn{display:inline-flex;
align-items:center;
gap:var(--space-2);
background:var(--glass-bg);
backdrop-filter:blur(12px);
-webkit-backdrop-filter:blur(12px);
border:1px solid var(--glass-border);
color:var(--gray-700);
padding:var(--space-3) var(--space-5);
border-radius:var(--radius-lg);
text-decoration:none;
font-weight:600;
font-size:1rem;
transition:all var(--transition-normal);
cursor:pointer;
}
.demo-btn:hover{background:var(--glass-bg-strong);
transform:translateY(-1px);
box-shadow:var(--glass-shadow);
}
.hero-trust{display:flex;
margin-top:-8px;
}
.trust-badge{display:flex;
align-items:center;
gap:var(--space-2);
background:transparent;
padding:var(--space-3) var(--space-5);
}
.trust-stars{display:inline-flex;
gap:1px;
align-items:center;
margin-left:6px;
position:relative;
top:2px;
}
.trust-stars svg{width:15px;
height:15px;
}
.trust-stars svg path{fill:#FFD700;
stroke:#000000;
stroke-width:0.8px;
stroke-linejoin:round;
stroke-linecap:round;
}
.trust-text{font-size:0.95rem;
font-weight:600;
color:var(--gray-600);
white-space:nowrap;
}
.hero-visual{display:flex;
justify-content:center;
align-items:flex-start;
margin-top:1rem;
}
.scroll-arrow{position:absolute;
bottom:40px;
left:50%;
transform:translateX(-50%);
color:var(--gray-400);
cursor:pointer;
transition:color var(--transition-fast);
z-index:10;
}
.scroll-arrow:hover{color:var(--primary-blue);
}
.scroll-arrow svg{filter:drop-shadow(0 2px 8px rgba(0, 0, 0, 0.1));
}
.trust-stars{display:inline-flex;
gap:1px;
align-items:center;
margin-left:6px;
position:relative;
top:2px;
}
.trust-stars svg{width:0.9375rem;
height:0.9375rem;
}
.trust-stars svg path{fill:#FFD700;
stroke:#000000;
stroke-width:0.8px;
stroke-linejoin:round;
stroke-linecap:round;
}
svg#glassGradients{position:absolute;
width:0;
height:0;
}
.demo-window,
.demo-content,
.upload-state,
.loading-state,
.result-state,
.image-preview-state,
.demo-selection-state{opacity:1 !important;
visibility:visible !important;
}
.demo-content{position:relative;
overflow:hidden;
height:calc(100% - calc(var(--base-unit) * 7.5));
min-height:calc(100% - calc(var(--base-unit) * 7.5));
max-height:calc(100% - calc(var(--base-unit) * 7.5));
display:flex !important;
align-items:center !important;
justify-content:center !important;
}
.demo-content.reset-state{align-items:flex-start !important;
padding-top:6.25rem !important;
}
.upload-state{margin-top:-2.5rem !important;
}
.demo-content.reset-state .upload-state{margin-top:0 !important;
}
.image-preview-state{margin-top:0.625rem !important;
}
.demo-content.reset-state .image-preview-state{margin-top:-3.75rem !important;
}
.upload-state h3,
.upload-state p,
.upload-actions,
.demo-options{opacity:1 !important;
visibility:visible !important;
color:var(--text-primary, #1a1a2e) !important;
}
#resultState{padding:1.25rem;
background:#f8f9fa;
min-height:100%;
}
.analysis-results{padding:1.25rem;
background:white;
border-radius:0.75rem;
min-height:31.25rem;
box-shadow:0 1px 3px rgba(0,0,0,0.1);
}
.result-header{display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:1.5rem;
}
.result-header h4{font-size:1.25rem;
margin:0;
font-weight:600;
color:#111827;
}
.sentiment-card{background:linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
border-radius:1rem;
padding:1.5rem;
margin-bottom:1.5rem;
}
.sentiment-indicator{display:flex;
align-items:center;
gap:1rem;
margin-bottom:1rem;
}
.sentiment-icon{font-size:3rem;
}
.sentiment-details{flex:1;
}
.sentiment-label{font-size:0.875rem;
color:#6B7280;
display:block;
margin-bottom:0.25rem;
}
.sentiment-value{font-size:1.5rem;
font-weight:700;
display:block;
}
.sentiment-value.bullish{color:#10B981;
}
.sentiment-value.bearish{color:#EF4444;
}
.sentiment-value.neutral{color:#F59E0B;
}
.confidence-meter{background:white;
border-radius:0.5rem;
overflow:hidden;
}
.confidence-bar{height:0.5rem;
background:#E5E7EB;
position:relative;
}
.confidence-fill{position:absolute;
left:0;
top:0;
height:100%;
background:#0066FF;
transition:width 1s ease;
}
.confidence-text{display:block;
text-align:center;
padding:0.5rem;
font-size:0.875rem;
color:#6B7280;
}
.analysis-details{margin-bottom:1.5rem;
}
.detail-section{margin-bottom:1.25rem;
}
.detail-section h5{display:flex;
align-items:center;
gap:0.5rem;
font-size:1rem;
font-weight:600;
margin-bottom:0.75rem;
color:#111827;
}
.section-icon{font-size:1.125rem;
}
.recommendation-text,
.analysis-text{color:#6B7280;
line-height:1.6;
font-size:0.875rem;
}
.trade-levels-demo{display:flex;
gap:1.25rem;
margin-top:0.75rem;
padding:0.75rem;
background:rgba(59, 130, 246, 0.05);
border-radius:0.5rem;
font-size:0.875rem;
flex-wrap:nowrap;
}
.level-item{display:flex;
gap:0.5rem;
}
.level-label{color:#6B7280;
font-size:0.8125rem;
}
.level-value{font-weight:600;
color:#111827;
}
.level-value.stop-loss{color:#EF4444;
}
.level-value.take-profit{color:#10B981;
}
.patterns-list{display:flex;
flex-wrap:nowrap;
gap:0.5rem;
}
.pattern-chip{background:#F9FAFB;
padding:0.375rem 0.75rem;
border-radius:1.25rem;
font-size:0.8125rem;
color:#111827;
border:1px solid #E5E7EB;
}
.key-levels-container{display:flex;
flex-direction:column;
gap:1rem;
}
.level-group-demo{display:flex;
flex-direction:column;
gap:0.5rem;
}
.level-group-demo h6{font-size:0.8125rem;
font-weight:600;
color:#6B7280;
margin:0;
}
.level-tag{display:inline-block;
padding:0.25rem 0.75rem;
border-radius:0.375rem;
font-size:0.8125rem;
font-weight:500;
margin-right:0.375rem;
}
.level-tag.support{background:#dcfce7;
color:#15803d;
}
.level-tag.resistance{background:#fee2e2;
color:#991b1b;
}
.result-actions{display:flex;
gap:0.75rem;
}
.action-btn{flex:1;
padding:0.75rem;
border-radius:0.5rem;
font-size:0.875rem;
font-weight:600;
cursor:pointer;
border:none;
display:flex;
align-items:center;
justify-content:center;
gap:0.375rem;
transition:all 0.3s;
}
.action-btn.primary{background:#0066FF;
color:white;
}
.action-btn.primary:hover{background:#0052CC;
transform:translateY(-2px);
box-shadow:0 8px 20px rgba(0, 102, 255, 0.3);
}
.action-btn.secondary{background:#F9FAFB;
color:#111827;
border:1px solid #E5E7EB;
}
.action-btn.secondary:hover{background:white;
border-color:#0066FF;
color:#0066FF;
}
.upload-icon svg{opacity:1 !important;
stroke:currentColor !important;
}
.upload-btn,
.demo-chart-btn{opacity:1 !important;
visibility:visible !important;
}
.upload-btn:focus,
.demo-chart-btn:focus{outline:none;
}
.demo-window{background:#1a1a2e !important;
}
.demo-header{position:relative;
z-index:10;
display:flex;
justify-content:space-between;
align-items:center;
padding:0.75rem 1rem;
border-bottom:1px solid rgba(255, 255, 255, 0.08);
}
.demo-controls{display:flex;
gap:0.5rem;
}
.control-dot{width:0.75rem;
height:0.75rem;
border-radius:50%;
}
.control-dot.red{background:#ff5f57; }
.control-dot.yellow{background:#ffbd2e; }
.control-dot.green{background:#28ca42; }
.demo-badge{display:flex;
align-items:center;
gap:0.375rem;
background:rgba(59, 130, 246, 0.1);
padding:0.25rem 0.75rem;
border-radius:1.25rem;
font-size:0.85rem;
font-weight:600;
color:#3B82F6;
}
.live-dot{width:0.5rem;
height:0.5rem;
background:#10B981;
border-radius:50%;
animation:pulse 2s infinite;
}
@keyframes pulse{0%, 100%{opacity:1; }
50%{opacity:0.5; }
}
.demo-badge span{color:#3B82F6;
}
.image-preview-state{padding:1.25rem;
animation:fadeIn 0.3s ease;
height:100%;
display:flex;
flex-direction:column;
justify-content:center;
}
@keyframes fadeIn{from{opacity:0; transform:translateY(0.625rem); }
to{opacity:1; transform:translateY(0); }
}
.preview-container{display:flex;
flex-direction:column;
align-items:center;
gap:1.125rem;
}
.uploaded-image-container{width:100%;
text-align:center;
display:flex;
flex-direction:column;
align-items:center;
margin-bottom:0.9375rem;
}
.image-wrapper{position:relative;
width:100%;
max-width:min(320px, 90%);
}
#uploadedImage{width:100%;
height:11.25rem;
object-fit:cover;
border-radius:0.625rem;
box-shadow:0 6px 20px rgba(0, 0, 0, 0.3);
border:1px solid rgba(255, 255, 255, 0.08);
background:#252538;
}
.image-action-btn{position:absolute;
top:0.625rem;
width:1.875rem;
height:1.875rem;
border-radius:50%;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
transition:all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
border:none;
padding:0;
backdrop-filter:blur(12px);
-webkit-backdrop-filter:blur(12px);
}
.image-action-btn:hover{transform:scale(1.1);
}
.image-action-btn:active{transform:scale(0.95);
}
.image-action-btn svg{width:0.9375rem;
height:0.9375rem;
stroke-width:2.5;
color:white;
}
.back-btn{left:0.625rem;
background:rgba(255, 95, 87, 0.9);
box-shadow:0 0 0 0.5px rgba(255, 255, 255, 0.2) inset,
0 2px 8px rgba(255, 95, 87, 0.3),
0 4px 12px rgba(0, 0, 0, 0.1);
}
.back-btn:hover{background:rgba(255, 59, 48, 0.95);
box-shadow:0 0 0 0.5px rgba(255, 255, 255, 0.25) inset,
0 4px 12px rgba(255, 95, 87, 0.4),
0 6px 16px rgba(0, 0, 0, 0.15);
}
.retry-btn{right:0.625rem;
background:rgba(59, 130, 246, 0.9);
box-shadow:0 0 0 0.5px rgba(255, 255, 255, 0.2) inset,
0 2px 8px rgba(59, 130, 246, 0.3),
0 4px 12px rgba(0, 0, 0, 0.1);
}
.retry-btn:hover{background:rgba(37, 99, 235, 0.95);
box-shadow:0 0 0 0.5px rgba(255, 255, 255, 0.25) inset,
0 4px 12px rgba(59, 130, 246, 0.4),
0 6px 16px rgba(0, 0, 0, 0.15);
}
.retry-btn:hover svg{animation:rotate-smooth 0.4s ease;
}
@keyframes rotate-smooth{from{transform:rotate(0deg); }
to{transform:rotate(180deg); }
}
.trials-counter{margin-top:-0.3125rem;
font-size:1.0625rem;
color:#64748b;
text-align:center;
font-weight:500;
letter-spacing:0.01em;
}
.loading-state{display:flex;
align-items:center;
justify-content:center;
min-height:25rem;
padding:2.5rem;
width:100%;
position:relative;
background:transparent;
}
.loading-content{text-align:center;
width:100%;
}
.loading-spinner{width:3.75rem;
height:3.75rem;
margin:0 auto 1.5rem;
position:relative;
}
.spinner-ring{width:100%;
height:100%;
border:0.1875rem solid rgba(255, 27, 141, 0.1);
border-top-color:#FF1B8D;
border-radius:50%;
animation:spin 1s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg); }
}
.loading-state h3{font-size:1.25rem;
font-weight:600;
color:#1f2937;
margin:0 0 0.5rem 0;
}
.loading-state p{font-size:0.875rem;
color:#6b7280;
margin:0 0 1.5rem 0;
}
.loading-progress{max-width:min(200px, 80%);
margin:0 auto;
}
.progress-bar{height:0.25rem;
background:rgba(75, 85, 99, 0.1);
border-radius:0.125rem;
overflow:hidden;
}
.progress-fill{height:100%;
background:linear-gradient(135deg, #FF1B8D 0%, #8B5CF6 50%, #3B82F6 100%);
border-radius:0.125rem;
animation:progress 4s ease-in-out;
}
@keyframes progress{0%{width:0%; }
25%{width:30%; }
50%{width:60%; }
75%{width:85%; }
100%{width:100%; }
}
.result-state{width:100%;
padding:0.625rem;
height:100%;
display:flex;
flex-direction:column;
background:rgba(255, 255, 255, 0.72);
backdrop-filter:blur(20px);
-webkit-backdrop-filter:blur(20px);
overflow-y:hidden !important;
}
.result-header{display:grid;
grid-template-columns:1fr 1fr 1fr;
gap:0.625rem;
margin-bottom:0.75rem;
}
.sentiment-indicator{display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:0.625rem;
padding:1rem;
background:linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(250, 251, 252, 0.95) 100%);
backdrop-filter:blur(20px);
-webkit-backdrop-filter:blur(20px);
border-radius:1rem;
border:1px solid rgba(255, 255, 255, 0.8);
box-shadow:0 8px 20px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.04);
text-align:center;
}
.sentiment-icon{width:3.5rem;
height:3.5rem;
display:flex;
align-items:center;
justify-content:center;
font-size:2rem;
background:linear-gradient(135deg, rgba(248, 250, 252, 1) 0%, rgba(241, 245, 249, 1) 100%);
border-radius:1rem;
box-shadow:0 4px 12px rgba(0, 0, 0, 0.08);
flex-shrink:0;
}
.sentiment-details{display:flex;
flex-direction:column;
align-items:center;
gap:0.375rem;
}
.sentiment-label{font-size:0.7rem;
color:#94a3b8;
font-weight:600;
text-transform:uppercase;
letter-spacing:0.08em;
}
.sentiment-value{font-size:1.5rem;
font-weight:700;
letter-spacing:-0.03em;
text-transform:uppercase;
}
.sentiment-value.bullish{background:linear-gradient(135deg, #10b981 0%, #059669 100%);
-webkit-background-clip:text;
background-clip:text;
-webkit-text-fill-color:transparent;
}
.sentiment-value.bearish{background:linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
-webkit-background-clip:text;
background-clip:text;
-webkit-text-fill-color:transparent;
}
.sentiment-value.neutral{background:linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
-webkit-background-clip:text;
background-clip:text;
-webkit-text-fill-color:transparent;
}
.confidence-display{display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:0.625rem;
}
.confidence-circle{position:relative;
width:5rem;
height:5rem;
}
.confidence-ring{transform:rotate(-90deg);
}
.confidence-ring circle{fill:none;
stroke-width:6;
}
.confidence-ring circle:first-child{stroke:rgba(0, 0, 0, 0.05);
}
.confidence-ring circle:last-child{stroke:url(#confidenceGradient);
stroke-dasharray:226;
stroke-dashoffset:calc(226 - (226 * var(--percentage)) / 100);
stroke-linecap:round;
transition:stroke-dashoffset 1s cubic-bezier(0.4, 0, 0.2, 1);
}
.confidence-value{position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);
font-size:1.25rem;
font-weight:700;
color:var(--gray-800);
text-align:center;
line-height:1;
}
.confidence-value span{font-size:1.5rem;
}
.confidence-label{font-size:0.7rem;
color:var(--gray-500);
font-weight:500;
text-transform:uppercase;
letter-spacing:0.08em;
}
.confidence-meter{display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:0.625rem;
padding:1rem;
background:linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(250, 251, 252, 0.95) 100%);
backdrop-filter:blur(20px);
-webkit-backdrop-filter:blur(20px);
border-radius:1rem;
border:1px solid rgba(255, 255, 255, 0.8);
box-shadow:0 8px 20px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.04);
text-align:center;
}
.confidence-label{font-size:0.7rem;
color:#94a3b8;
font-weight:600;
text-transform:uppercase;
letter-spacing:0.08em;
}
.confidence-bar{width:6.25rem;
height:0.5rem;
background:linear-gradient(135deg, rgba(226, 232, 240, 0.8) 0%, rgba(226, 232, 240, 0.5) 100%);
border-radius:6.25rem;
overflow:hidden;
margin:0.5rem 0;
box-shadow:inset 0 2px 4px rgba(0, 0, 0, 0.06);
}
.confidence-fill{height:100%;
background:linear-gradient(90deg, #FF1B8D 0%, #8B5CF6 50%, #3B82F6 100%);
border-radius:0.625rem;
transition:width 1.2s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow:0 0 12px rgba(139, 92, 246, 0.5);
}
.confidence-text{font-size:1.5rem;
font-weight:700;
background:linear-gradient(135deg, #FF1B8D 0%, #8B5CF6 50%, #3B82F6 100%);
-webkit-background-clip:text;
background-clip:text;
-webkit-text-fill-color:transparent;
letter-spacing:-0.03em;
}
.action-indicator{display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:0.625rem;
padding:1rem;
background:linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(250, 251, 252, 0.95) 100%);
backdrop-filter:blur(20px);
-webkit-backdrop-filter:blur(20px);
border-radius:1rem;
border:1px solid rgba(255, 255, 255, 0.8);
box-shadow:0 8px 20px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.04);
text-align:center;
}
.action-label{font-size:0.7rem;
color:#94a3b8;
font-weight:600;
text-transform:uppercase;
letter-spacing:0.08em;
}
.action-value{font-size:1.5rem;
font-weight:700;
letter-spacing:-0.03em;
text-transform:uppercase;
}
.action-value.buy{background:linear-gradient(135deg, #10b981 0%, #059669 100%);
-webkit-background-clip:text;
background-clip:text;
-webkit-text-fill-color:transparent;
}
.action-value.sell{background:linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
-webkit-background-clip:text;
background-clip:text;
-webkit-text-fill-color:transparent;
}
.action-value.wait{background:linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
-webkit-background-clip:text;
background-clip:text;
-webkit-text-fill-color:transparent;
}
.recommendation{background:linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 250, 252, 0.9) 100%);
backdrop-filter:blur(15px);
-webkit-backdrop-filter:blur(15px);
border-radius:0.75rem;
border:1px solid rgba(255, 255, 255, 0.6);
box-shadow:0 4px 12px rgba(0, 0, 0, 0.06);
padding:0.75rem;
margin-bottom:0.625rem;
}
.recommendation h4{font-size:0.75rem;
font-weight:700;
background:linear-gradient(135deg, #FF1B8D 0%, #8B5CF6 50%, #3B82F6 100%);
-webkit-background-clip:text;
background-clip:text;
-webkit-text-fill-color:transparent;
margin-bottom:0.375rem;
text-transform:uppercase;
letter-spacing:0.08em;
display:flex;
align-items:center;
gap:0.375rem;
}
.recommendation h4::before{content:'�Y'�';
font-size:0.9rem;
filter:none;
-webkit-text-fill-color:initial;
}
.recommendation p{color:#475569;
line-height:1.5;
font-size:0.85rem;
margin:0;
}
.analysis-section{margin-bottom:0.625rem;
background:linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 250, 252, 0.9) 100%);
backdrop-filter:blur(15px);
-webkit-backdrop-filter:blur(15px);
border-radius:0.75rem;
border:1px solid rgba(255, 255, 255, 0.6);
box-shadow:0 4px 12px rgba(0, 0, 0, 0.06);
padding:0.75rem;
}
.analysis-section h4{font-size:0.75rem;
font-weight:700;
background:linear-gradient(135deg, #FF1B8D 0%, #8B5CF6 50%, #3B82F6 100%);
-webkit-background-clip:text;
background-clip:text;
-webkit-text-fill-color:transparent;
margin-bottom:0.375rem;
text-transform:uppercase;
letter-spacing:0.08em;
}
.analysis-text{color:#475569;
line-height:1.5;
font-size:0.85rem;
margin:0;
}
.result-state::-webkit-scrollbar{width:0.5rem;
}
.result-state::-webkit-scrollbar-track{background:rgba(0, 0, 0, 0.02);
border-radius:0.625rem;
}
.result-state::-webkit-scrollbar-thumb{background:linear-gradient(135deg, #FF1B8D 0%, #8B5CF6 50%, #3B82F6 100%);
border-radius:0.625rem;
}
.result-state::-webkit-scrollbar-thumb:hover{background:linear-gradient(135deg, #E6007A 0%, #7C3AED 50%, #2563EB 100%);
}
.action-buttons{display:flex;
gap:0.625rem;
margin-top:auto;
padding-top:0.5rem;
}
.action-btn{flex:1;
padding:0.875rem 1.25rem;
border-radius:0.75rem;
font-weight:600;
font-size:0.95rem;
cursor:pointer;
transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
border:none;
position:relative;
overflow:hidden;
display:flex;
align-items:center;
justify-content:center;
gap:0.5rem;
}
.action-btn.primary{background:linear-gradient(135deg, #FF1B8D 0%, #8B5CF6 50%, #3B82F6 100%);
color:white;
box-shadow:0 4px 14px rgba(255, 27, 141, 0.3);
}
.action-btn.primary:hover{transform:translateY(-2px);
box-shadow:0 6px 20px rgba(255, 27, 141, 0.4);
background:linear-gradient(135deg, #E6007A 0%, #7C3AED 50%, #2563EB 100%);
}
.action-btn.primary:active{transform:translateY(-1px);
}
.action-btn.secondary{background:rgba(255, 255, 255, 0.9);
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
border:0.125rem solid rgba(139, 92, 246, 0.2);
color:#1d1d1f;
box-shadow:0 2px 8px rgba(0, 0, 0, 0.08);
}
.action-btn.secondary:hover{background:white;
border-color:rgba(139, 92, 246, 0.4);
color:#8B5CF6;
transform:translateY(-2px);
box-shadow:0 4px 12px rgba(139, 92, 246, 0.15);
}
.action-btn.secondary:active{transform:translateY(-1px);
}
.chart-result-preview{width:100%;
height:10rem;
margin-bottom:0.375rem;
overflow:hidden;
background:linear-gradient(135deg, rgba(248, 249, 250, 1) 0%, rgba(241, 245, 249, 0.95) 100%);
position:relative;
border-radius:0.875rem;
border:none;
box-shadow:0 4px 16px rgba(0, 0, 0, 0.08);
display:flex;
align-items:center;
justify-content:center;
}
.result-chart-image{width:100%;
height:100%;
object-fit:cover;
opacity:0.95;
display:block;
}
.chart-overlay-gradient{position:absolute;
bottom:0;
left:0;
right:0;
height:3.75rem;
background:linear-gradient(180deg, transparent 0%, rgba(255,255,255,0.8) 60%, rgba(255,255,255,0.95) 100%);
pointer-events:none;
}
.result-state-apple{display:flex;
flex-direction:column;
height:100%;
background:#ffffff;
}
.chart-preview-section{position:relative;
width:100%;
height:12.5rem;
background:#f5f5f7;
overflow:hidden;
border-bottom:1px solid rgba(0,0,0,0.08);
}
.analyzed-chart-image{width:100%;
height:100%;
object-fit:cover;
opacity:0.95;
}
.chart-overlay-badge{position:absolute;
top:0.75rem;
right:0.75rem;
background:rgba(255,255,255,0.95);
backdrop-filter:blur(20px);
-webkit-backdrop-filter:blur(20px);
padding:0.375rem 0.75rem;
border-radius:1.25rem;
box-shadow:0 2px 8px rgba(0,0,0,0.1);
}
.analysis-complete-badge{font-size:0.75rem;
font-weight:600;
color:#34C759;
display:flex;
align-items:center;
gap:0.25rem;
}
.results-content-apple{flex:1;
padding:1.25rem;
overflow-y:auto;
background:#ffffff;
}
.sentiment-card-apple{background:#f5f5f7;
border-radius:0.75rem;
padding:1rem;
margin-bottom:1rem;
}
.sentiment-header-apple{display:flex;
align-items:center;
gap:0.75rem;
}
.sentiment-indicator-apple{width:2.5rem;
height:2.5rem;
border-radius:0.75rem;
display:flex;
align-items:center;
justify-content:center;
}
.sentiment-icon-apple{font-size:1.25rem;
font-weight:700;
}
.sentiment-info-apple{flex:1;
display:flex;
flex-direction:column;
gap:0.125rem;
}
.sentiment-label-apple{font-size:0.6875rem;
font-weight:600;
color:#86868b;
text-transform:uppercase;
letter-spacing:0.05em;
}
.sentiment-value-apple{font-size:1.0625rem;
font-weight:600;
letter-spacing:-0.01em;
}
.confidence-badge-apple{text-align:center;
padding:0.5rem 0.75rem;
background:white;
border-radius:0.625rem;
box-shadow:0 1px 3px rgba(0,0,0,0.08);
}
.confidence-value-apple{display:block;
font-size:1.125rem;
font-weight:700;
color:#1d1d1f;
letter-spacing:-0.02em;
}
.confidence-label-apple{display:block;
font-size:0.625rem;
font-weight:600;
color:#86868b;
text-transform:uppercase;
letter-spacing:0.05em;
margin-top:0.125rem;
}
.insights-section-apple{margin-bottom:1.25rem;
}
.section-title-apple{font-size:0.8125rem;
font-weight:600;
color:#86868b;
text-transform:uppercase;
letter-spacing:0.05em;
margin-bottom:0.625rem;
}
.insight-text-apple{font-size:0.9375rem;
line-height:1.5;
color:#1d1d1f;
margin-bottom:0.75rem;
font-weight:500;
}
.insight-divider{width:100%;
height:1px;
background:rgba(0,0,0,0.06);
margin:0.75rem 0;
}
.technical-text-apple{font-size:0.875rem;
line-height:1.5;
color:#6e6e73;
margin:0;
}
.action-buttons-apple{display:flex;
gap:0.625rem;
margin-top:auto;
padding-top:0.75rem;
}
.btn-apple{flex:1;
padding:0.75rem;
border-radius:0.625rem;
font-size:0.9375rem;
font-weight:600;
border:none;
cursor:pointer;
transition:all 0.2s ease;
display:flex;
align-items:center;
justify-content:center;
letter-spacing:-0.01em;
}
.btn-apple.primary{background:#007AFF;
color:white;
}
.btn-apple.primary:hover{background:#0051D5;
transform:scale(1.02);
}
.btn-apple.secondary{background:#f5f5f7;
color:#1d1d1f;
}
.btn-apple.secondary:hover{background:#e8e8ed;
}
#confidenceText{font-size:0.875rem;
font-weight:600;
color:#374151;
}
.result-details{margin-bottom:1.5rem;
}
.detail-section{margin-bottom:1rem;
}
.detail-section h4{font-size:0.875rem;
font-weight:600;
color:#374151;
margin:0 0 0.5rem 0;
}
.detail-section p{font-size:0.8125rem;
color:#6b7280;
line-height:1.5;
margin:0;
}
.upgrade-btn{width:100%;
padding:0.75rem;
background:linear-gradient(135deg, #FF1B8D 0%, #8B5CF6 50%, #3B82F6 100%);
color:white;
border:none;
border-radius:0.5rem;
font-size:0.875rem;
font-weight:600;
cursor:pointer;
transition:transform 0.2s ease, box-shadow 0.2s ease;
}
.upgrade-btn:hover{transform:translateY(-1px);
box-shadow:0 4px 12px rgba(255, 27, 141, 0.3);
}
.analysis-options-title{font-size:1.75rem;
font-weight:600;
color:#4b5563;
margin:0;
letter-spacing:-0.02em;
}
.image-info{width:100%;
max-width:min(320px, 90%);
}
.inputs-row{display:flex;
gap:0.625rem;
margin-bottom:0.75rem;
}
.chart-input, .analysis-select{flex:1;
padding:1rem 1.125rem;
border:1px solid rgba(75, 85, 99, 0.2);
border-radius:0.5rem;
font-size:1.0625rem;
background:rgba(75, 85, 99, 0.05);
color:#4b5563;
transition:background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
font-weight:500;
letter-spacing:-0.01em;
line-height:1.5;
}
.chart-input::placeholder{color:#9ca3af;
font-size:1rem;
}
.chart-input:focus, .analysis-select:focus{outline:none;
border-color:rgba(255, 27, 141, 0.5);
background:rgba(255, 255, 255, 0.12);
box-shadow:0 0 0 2px rgba(255, 27, 141, 0.1);
}
.chart-input:not(:placeholder-shown){font-weight:600;
background:rgba(75, 85, 99, 0.08);
color:#374151;
}
.analysis-select.has-value{font-weight:600;
background:rgba(75, 85, 99, 0.08);
color:#374151;
background-image:url('data:image/svg+xml;charset=UTF-8,%3csvg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"%3e%3cpath d="M7 9L3.5 5.5H10.5L7 9Z" fill="%23374151"/%3e%3c/svg%3e');
background-repeat:no-repeat;
background-position:right 12px center;
}
.analysis-select{width:100%;
cursor:pointer;
appearance:none;
-webkit-appearance:none;
-moz-appearance:none;
background:rgba(75, 85, 99, 0.05);
background-image:url('data:image/svg+xml;charset=UTF-8,%3csvg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"%3e%3cpath d="M7 9L3.5 5.5H10.5L7 9Z" fill="%234b5563"/%3e%3c/svg%3e');
background-repeat:no-repeat;
background-position:right 0.75rem center;
padding-right:2rem;
}
.analysis-select option{background:white;
color:#4b5563;
padding:0.5rem;
font-size:0.8125rem;
font-weight:500;
}
.preview-actions{width:100%;
max-width:min(320px, 90%);
display:flex;
flex-direction:column;
gap:0.625rem;
}
.action-btn.primary.large{width:100%;
background:linear-gradient(135deg, #FF1B8D 0%, #8B5CF6 50%, #3B82F6 100%);
color:white;
border:none;
padding:1.125rem 1.75rem;
border-radius:0.625rem;
font-size:1.125rem;
font-weight:600;
cursor:pointer;
transition:all 0.3s ease;
box-shadow:0 4px 14px rgba(255, 27, 141, 0.25);
letter-spacing:0.02em;
}
.action-btn.primary.large:hover{transform:translateY(-2px);
box-shadow:0 6px 20px rgba(255, 27, 141, 0.35);
background:linear-gradient(135deg, #E6007A 0%, #7C3AED 50%, #2563EB 100%);
}
.modal-content{animation:slideUp 0.3s ease;
}
@keyframes slideUp{from{transform:translateY(1.875rem); opacity:0; }
to{transform:translateY(0); opacity:1; }
}
.modal-close{position:absolute;
top:1.25rem;
right:1.25rem;
font-size:1.75rem;
color:#94a3b8;
cursor:pointer;
transition:all 0.3s ease;
background:rgba(255, 255, 255, 0.05);
width:2.1875rem;
height:2.1875rem;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
box-shadow:0 2px 8px rgba(0,0,0,0.2);
}
.modal-close:hover{color:#f1f5f9;
transform:rotate(90deg);
background:rgba(255, 255, 255, 0.08);
}
.analysis-loader{text-align:center;
margin:1.875rem 0;
}
.loader-spinner{width:3.75rem;
height:3.75rem;
border:0.25rem solid rgba(255, 255, 255, 0.1);
border-top-color:#FF1B8D;
border-radius:50%;
margin:0 auto 1.25rem;
animation:spin 1s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg); }
}
.analysis-steps{margin-top:1.875rem;
}
.analysis-steps .step{padding:0.625rem;
margin:0.5rem 0;
background:rgba(255, 255, 255, 0.03);
border-radius:0.5rem;
opacity:0.5;
transition:all 0.3s ease;
color:#94a3b8;
}
.analysis-steps .step.active{opacity:1;
background:linear-gradient(135deg, rgba(255, 27, 141, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
border-left:0.25rem solid #FF1B8D;
color:#f1f5f9;
}
.result-header{display:flex;
gap:0.625rem;
margin:1.25rem 0;
flex-wrap:nowrap;
}
.result-badge{background:linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color:white;
padding:0.375rem 1rem;
border-radius:1.25rem;
font-size:0.75rem;
font-weight:600;
}
.analysis-section{margin:1.5625rem 0;
padding:1.25rem;
background:#f8f9fa;
border-radius:0.75rem;
}
.analysis-section h3{font-size:1.125rem;
margin-bottom:0.9375rem;
color:#2d3748;
}
.analysis-section ul{list-style:none;
padding:0;
}
.analysis-section li{padding:8px 0;
padding-left:25px;
position:relative;
}
.analysis-section li:before{content:"�o"";
position:absolute;
left:0;
color:#48bb78;
font-weight:bold;
}
.levels-grid{display:grid;
grid-template-columns:repeat(2, 1fr);
gap:15px;
margin-top:15px;
}
.level-item{background:white;
padding:12px;
border-radius:8px;
border:1px solid #e2e8f0;
}
.level-label{font-size:12px;
color:#718096;
display:block;
margin-bottom:4px;
}
.level-value{font-size:18px;
font-weight:700;
color:#2d3748;
}
.recommendation-box{background:linear-gradient(135deg, #48bb7820 0%, #38b2ac20 100%);
border:2px solid #48bb78;
border-radius:12px;
padding:20px;
display:flex;
gap:15px;
align-items:start;
}
.recommendation-box.bullish{background:linear-gradient(135deg, #48bb7820 0%, #38b2ac20 100%);
border-color:#48bb78;
}
.rec-icon{font-size:1.5rem;
}
.modal-footer{text-align:center;
margin-top:1.875rem;
padding-top:1.25rem;
border-top:1px solid #e2e8f0;
}
.demo-success{color:#48bb78;
font-weight:600;
margin-bottom:0.9375rem;
}
.modal-cta{background:linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color:white;
border:none;
padding:0.75rem 1.875rem;
border-radius:1.5625rem;
font-size:1rem;
font-weight:600;
cursor:pointer;
transition:all 0.3s ease;
}
.modal-cta:hover{transform:translateY(-0.125rem);
box-shadow:0 8px 20px rgba(102, 126, 234, 0.3);
}
.modal-note{font-size:0.75rem;
color:#718096;
margin-top:0.625rem;
}
.section-header{text-align:center;
margin-bottom:var(--space-16);
}
.section-header h2{font-size:clamp(2rem, 3.5vw, 2.75rem);
font-weight:800;
color:var(--gray-900);
margin-bottom:var(--space-4);
letter-spacing:-0.02em;
}
.section-header p{font-size:1.125rem;
color:var(--gray-600);
max-width:600px;
margin:0 auto;
}
.features{padding:var(--space-20) 0;
position:relative;
background:transparent;
}
.features-grid{display:grid;
grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));
gap:var(--space-6);
}
.feature-card{background:var(--glass-bg);
backdrop-filter:blur(20px);
-webkit-backdrop-filter:blur(20px);
border:1px solid var(--gray-300);
border-radius:var(--radius-xl);
padding:var(--space-5);
transition:all var(--transition-normal);
text-align:left;
display:flex;
flex-direction:column;
height:100%;
}
.feature-card:hover{transform:translateY(-6px);
box-shadow:var(--glass-shadow-strong);
border-color:var(--gray-400);
}
.feature-header{display:flex;
align-items:center;
gap:var(--space-3);
margin-bottom:var(--space-3);
min-height:48px;
}
.feature-icon{width:40px;
height:40px;
background:linear-gradient(135deg, rgba(255, 27, 141, 0.1) 0%, rgba(139, 92, 246, 0.1) 50%, rgba(59, 130, 246, 0.1) 100%);
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
border:1px solid var(--glass-border);
border-radius:var(--radius-lg);
display:flex;
align-items:center;
justify-content:center;
transition:transform var(--transition-fast);
position:relative;
flex-shrink:0;
}
.feature-icon svg{width:24px;
height:24px;
z-index:2;
}
.feature-card:hover .feature-icon{transform:scale(1.1) rotate(5deg);
}
.feature-card h3{font-size:1.15rem;
font-weight:700;
color:var(--gray-900);
margin:0;
line-height:1.2;
}
.feature-card p{color:var(--gray-600);
line-height:1.6;
font-size:0.95rem;
flex-grow:1;
}
.testimonials-container{margin-top:var(--space-16);
display:flex;
flex-direction:column;
gap:var(--space-6);
max-width:900px;
margin-left:auto;
margin-right:auto;
}
.testimonial-card{display:flex;
gap:var(--space-5);
align-items:flex-start;
padding:var(--space-6);
background:rgba(255, 255, 255, 0.6);
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
border:1px solid var(--gray-200);
border-radius:var(--radius-xl);
transition:all var(--transition-normal);
}
.testimonial-card:hover{transform:translateY(-2px);
box-shadow:0 8px 24px rgba(0, 0, 0, 0.08);
border-color:var(--gray-300);
}
.testimonial-avatar{flex-shrink:0;
}
.avatar-placeholder{width:56px;
height:56px;
border-radius:50%;
background:var(--gradient-primary);
display:flex;
align-items:center;
justify-content:center;
color:white;
font-weight:700;
font-size:1.25rem;
}
.testimonial-content{flex:1;
}
.testimonial-text{font-size:1.05rem;
line-height:1.7;
color:var(--gray-700);
margin-bottom:var(--space-3);
font-style:italic;
}
.testimonial-author{font-size:0.95rem;
color:var(--gray-500);
font-weight:500;
}
.how-it-works{padding:var(--space-20) 0;
background:#eef2ff;
}
.section-label{color:var(--gray-500);
font-size:1rem;
font-weight:500;
text-transform:capitalize;
margin-bottom:var(--space-3);
}
.how-it-works-content{display:grid;
grid-template-columns:1fr 1fr;
gap:var(--space-16);
margin-top:var(--space-12);
align-items:start;
}
.steps-accordion{max-width:600px;
}
.accordion-item{background:white;
border:1px solid var(--gray-200);
border-radius:var(--radius-lg);
margin-bottom:var(--space-4);
transition:all var(--transition-normal);
cursor:pointer;
}
.accordion-item:hover{border-color:var(--gray-300);
box-shadow:0 4px 12px rgba(0, 0, 0, 0.05);
}
.accordion-item.active{border-color:var(--primary-blue);
box-shadow:0 8px 24px rgba(59, 130, 246, 0.15);
}
.accordion-header{display:flex;
align-items:center;
padding:var(--space-4) var(--space-5);
gap:var(--space-3);
}
.step-number-inline{color:var(--primary-blue);
font-weight:700;
font-size:1.1rem;
min-width:25px;
}
.accordion-header h3{flex:1;
font-size:1rem;
font-weight:600;
color:var(--gray-900);
margin:0;
}
.accordion-icon{font-size:1.5rem;
color:var(--gray-400);
font-weight:300;
transition:transform var(--transition-fast);
}
.accordion-content{padding:0 var(--space-5) 0 calc(var(--space-5) + 25px + var(--space-3));
max-height:0;
overflow:hidden;
transition:all var(--transition-normal);
}
.accordion-item.active .accordion-content{max-height:200px;
padding-bottom:var(--space-4);
}
.accordion-content p{color:var(--gray-600);
line-height:1.6;
font-size:0.9rem;
}
.mockup-preview{display:flex;
align-items:center;
justify-content:center;
}
.mockup-container{width:100%;
max-width:400px;
}
.mockup-screen{background:white;
border:1px solid var(--gray-200);
border-radius:var(--radius-xl);
padding:var(--space-6);
box-shadow:0 20px 40px rgba(0, 0, 0, 0.1);
}
.chart-preview-box{background:var(--gray-50);
border-radius:var(--radius-lg);
overflow:hidden;
}
.preview-header{display:flex;
justify-content:space-between;
align-items:center;
padding:var(--space-3) var(--space-4);
background:white;
border-bottom:1px solid var(--gray-200);
}
.preview-time{font-size:0.85rem;
color:var(--gray-600);
font-weight:500;
}
.preview-indicators{display:flex;
gap:var(--space-2);
}
.indicator-dot{width:8px;
height:8px;
border-radius:50%;
}
.preview-chart{padding:var(--space-4);
background:white;
}
.preview-results{padding:var(--space-4);
background:white;
border-top:1px solid var(--gray-200);
}
.result-item{display:flex;
justify-content:space-between;
align-items:center;
padding:var(--space-2) 0;
font-size:0.9rem;
}
.result-label{color:var(--gray-500);
font-weight:500;
}
.result-value{color:var(--gray-900);
font-weight:600;
}
.how-it-works-cta{text-align:center;
margin-top:var(--space-16);
}
.pricing{padding:var(--space-20) 0;
background:linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
position:relative;
overflow:hidden;
}
.pricing::before{content:'';
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background:linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
radial-gradient(circle at 20% 50%, rgba(100, 116, 139, 0.15) 0%, transparent 50%),
radial-gradient(circle at 80% 80%, rgba(71, 85, 105, 0.15) 0%, transparent 50%);
background-size:50px 50px, 50px 50px, 100% 100%, 100% 100%;
pointer-events:none;
}
.pricing .container{position:relative;
z-index:1;
}
.pricing .section-header h2{color:white;
}
.pricing .section-header p{color:rgba(255, 255, 255, 0.7);
}
.pricing-toggle-container{display:flex;
align-items:center;
justify-content:center;
margin:1rem 0 var(--space-8);
}
.pricing-toggle{background:rgba(255, 255, 255, 0.9);
border:1px solid rgba(0, 0, 0, 0.08);
border-radius:16px;
padding:6px;
display:inline-flex;
box-shadow:0 2px 8px rgba(0, 0, 0, 0.04),
0 1px 0 rgba(255, 255, 255, 0.9) inset;
}
.toggle-btn{padding:14px 32px;
background:transparent;
border:2px solid transparent;
border-radius:12px;
font-weight:600;
color:#6b7280;
cursor:pointer;
transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
font-size:1rem;
position:relative;
}
.toggle-btn.active{background:white;
border:2px solid transparent;
background-image:linear-gradient(white, white),
linear-gradient(135deg, #71717a 0%, #52525b 50%, #3f3f46 100%);
background-origin:border-box;
background-clip:padding-box, border-box;
color:#111827;
box-shadow:0 2px 8px rgba(82, 82, 91, 0.15),
0 0 0 1px rgba(255, 255, 255, 0.8) inset;
}
.toggle-btn:hover:not(.active){background:rgba(255, 255, 255, 0.5);
color:#374151;
}
.save-badge{position:absolute;
top:-10px;
right:-10px;
background:linear-gradient(135deg, #71717a 0%, #52525b 100%);
color:white;
padding:3px 8px;
border-radius:8px;
font-size:0.7rem;
font-weight:700;
box-shadow:0 2px 8px rgba(82, 82, 91, 0.4),
0 0 0 2px rgba(255, 255, 255, 0.9);
}
.pricing-cards{display:flex;
justify-content:center;
gap:var(--space-8);
max-width:1100px;
margin:0 auto;
flex-wrap:wrap;
}
.pricing-card{background:rgba(255, 255, 255, 0.05);
backdrop-filter:blur(20px);
-webkit-backdrop-filter:blur(20px);
border:1px solid rgba(255, 255, 255, 0.1);
border-radius:var(--radius-xl);
padding:var(--space-6);
position:relative;
transition:all var(--transition-normal);
min-height:clamp(32rem, 40vw, 36.25rem);
display:flex;
flex-direction:column;
box-shadow:0 10px 40px rgba(0, 0, 0, 0.3),
0 0 1px rgba(255, 255, 255, 0.1) inset;
width:100%;
max-width:min(380px, 95%);
box-sizing:border-box;
}
.pricing-card:hover{transform:translateY(-6px);
box-shadow:0 20px 60px rgba(0, 0, 0, 0.4),
0 0 1px rgba(255, 255, 255, 0.2) inset;
border-color:rgba(255, 255, 255, 0.2);
}
.pricing-card.featured{position:relative;
border:2px solid transparent;
background:rgba(255, 255, 255, 0.08);
background-image:linear-gradient(rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.08)),
linear-gradient(135deg, #71717a 0%, #52525b 50%, #3f3f46 100%);
background-origin:border-box;
background-clip:padding-box, border-box;
box-shadow:0 20px 60px rgba(82, 82, 91, 0.4),
0 0 80px rgba(82, 82, 91, 0.2);
}
.popular-badge{position:absolute;
top:-10px;
left:50%;
transform:translateX(-50%);
background:var(--gradient-primary);
color:white;
padding:var(--space-1) var(--space-4);
border-radius:var(--radius-2xl);
font-size:0.8rem;
font-weight:600;
box-shadow:0 4px 16px rgba(59, 130, 246, 0.25);
}
.plan-header{text-align:center;
margin-bottom:var(--space-5);
}
.plan-header h3{font-size:1.35rem;
font-weight:700;
color:white;
margin-bottom:var(--space-1);
}
.plan-header p{color:rgba(255, 255, 255, 0.7);
font-size:0.9rem;
}
.plan-icon{width:48px;
height:48px;
margin:0 auto var(--space-3);
display:flex;
align-items:center;
justify-content:center;
background:linear-gradient(135deg, rgba(113, 113, 122, 0.1) 0%, rgba(82, 82, 91, 0.1) 50%, rgba(63, 63, 70, 0.1) 100%);
border-radius:var(--radius-lg);
border:1px solid var(--glass-border);
}
.plan-icon svg{width:24px;
height:24px;
}
.plan-name{font-size:1.5rem;
font-weight:700;
color:var(--gray-900);
margin-bottom:var(--space-2);
}
.plan-description{font-size:0.95rem;
color:var(--gray-600);
line-height:1.5;
margin-bottom:var(--space-4);
}
.plan-price{display:flex;
align-items:baseline;
justify-content:center;
gap:var(--space-1);
margin-bottom:var(--space-3);
}
.price-display{display:flex;
align-items:baseline;
gap:var(--space-1);
}
.currency{font-size:1.1rem;
font-weight:600;
color:rgba(255, 255, 255, 0.7);
}
.amount{font-size:2.5rem;
font-weight:800;
color:white;
line-height:1;
}
.period{font-size:0.95rem;
color:rgba(255, 255, 255, 0.7);
}
.plan-features{margin-bottom:var(--space-6);
flex-grow:1;
}
.feature-item{display:flex;
align-items:flex-start;
gap:var(--space-2);
margin-bottom:var(--space-3);
padding-left:var(--space-1);
}
.feature-item svg{color:#71717a;
flex-shrink:0;
margin-top:2px;
}
.feature-item span{color:rgba(255, 255, 255, 0.85);
font-weight:500;
font-size:0.95rem;
line-height:1.4;
}
.plan-cta{width:100%;
background:var(--gradient-primary);
color:white;
border:none;
padding:12px var(--space-4);
border-radius:var(--radius-lg);
font-weight:600;
font-size:0.95rem;
cursor:pointer;
transition:all var(--transition-fast);
}
.plan-cta:hover{background:var(--gradient-hover);
transform:translateY(-1px);
}
.plan-cta.featured{box-shadow:0 8px 24px rgba(59, 130, 246, 0.35);
}
.pricing-trust{margin-top:var(--space-8);
text-align:center;
}
.trust-item{display:flex;
align-items:center;
justify-content:center;
gap:var(--space-2);
margin-top:var(--space-4);
}
.trust-item svg{width:16px;
height:16px;
color:var(--success);
}
.trust-item span{font-size:0.9rem;
color:var(--gray-600);
font-weight:500;
}
.hero-trust{display:flex;
margin-top:calc(var(--space-2) * 0.5);
}
.trust-badge{display:flex;
align-items:center;
gap:var(--space-2);
background:transparent;
padding:var(--space-3) var(--space-5);
}
.trust-stars{display:flex;
gap:2px;
}
.trust-stars .star{position:relative;
display:inline-block;
font-size:1.1rem;
color:#FFD700;
text-shadow:-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000,
0 0 1px #000;
letter-spacing:2px;
}
.trust-stars .star::before{content:'★';
}
.trust-text{font-size:0.95rem;
font-weight:600;
color:var(--gray-600);
white-space:nowrap;
}
.faq-section{padding:var(--space-20) 0;
background:#eef2ff;
}
.faq-title{font-size:3rem;
font-weight:700;
text-align:center;
margin-bottom:var(--space-12);
color:var(--gray-900);
letter-spacing:0.05em;
}
.faq-container{max-width:800px;
margin:0 auto;
}
.faq-item{margin-bottom:var(--space-3);
background:white;
border:1px solid var(--gray-200);
border-radius:var(--radius-lg);
overflow:hidden;
transition:all var(--transition-normal);
}
.faq-item:hover{box-shadow:0 4px 12px rgba(0, 0, 0, 0.05);
}
.faq-question{width:100%;
padding:var(--space-5) var(--space-6);
background:white;
border:none;
display:flex;
justify-content:space-between;
align-items:center;
cursor:pointer;
font-size:1.05rem;
font-weight:500;
color:var(--gray-900);
text-align:left;
transition:all var(--transition-fast);
}
.faq-question:hover{background:var(--gray-50);
}
.faq-arrow{flex-shrink:0;
transition:transform var(--transition-normal);
color:var(--gray-500);
}
.faq-answer{max-height:0;
overflow:hidden;
transition:max-height var(--transition-normal);
background:var(--gray-50);
border-top:1px solid var(--gray-200);
}
.faq-answer p{padding:var(--space-5) var(--space-6);
margin:0;
color:var(--gray-700);
line-height:1.7;
}
.faq-item.active{border-color:var(--primary-500);
box-shadow:0 0 0 1px var(--primary-500);
}
.faq-item.active .faq-question{background:var(--gray-50);
color:var(--primary-600);
}
.faq-item.active .faq-arrow{color:var(--primary-600);
}
.upgrade-modal{position:fixed;
top:0;
left:0;
right:0;
bottom:0;
z-index:10000;
display:flex;
align-items:center;
justify-content:center;
}
.modal-overlay{position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background:rgba(0, 0, 0, 0.5);
backdrop-filter:blur(8px);
-webkit-backdrop-filter:blur(8px);
}
.modal-content{background:white;
backdrop-filter:blur(24px);
-webkit-backdrop-filter:blur(24px);
border-radius:var(--radius-2xl);
padding:var(--space-6);
max-width:420px;
width:90%;
position:relative;
z-index:1;
box-shadow:0 32px 64px rgba(0, 0, 0, 0.15);
animation:slideUp 0.3s ease;
}
@keyframes slideUp{from{transform:translateY(30px); opacity:0; }
to{transform:translateY(0); opacity:1; }
}
.modal-close{position:absolute;
top:var(--space-3);
right:var(--space-3);
width:36px;
height:36px;
border:none;
background:rgba(0, 0, 0, 0.15);
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
transition:all var(--transition-fast);
color:var(--gray-700);
font-size:28px;
z-index:10;
}
.modal-close:hover{background:rgba(0, 0, 0, 0.25);
transform:rotate(90deg);
color:var(--gray-900);
}
.modal-header{text-align:center;
margin-bottom:var(--space-6);
}
.modal-icon{font-size:3rem;
margin-bottom:var(--space-4);
}
.modal-header h2{font-size:1.75rem;
font-weight:800;
color:var(--gray-900);
margin-bottom:var(--space-3);
}
.modal-header p{color:var(--gray-600);
font-size:1rem;
}
.modal-features{margin-bottom:var(--space-6);
}
.modal-feature{display:flex;
align-items:center;
gap:var(--space-3);
margin-bottom:var(--space-3);
}
.modal-feature svg{color:var(--success);
flex-shrink:0;
}
.modal-feature span{color:var(--gray-700);
font-weight:500;
}
.modal-cta{width:100%;
background:var(--gradient-primary);
color:white;
border:none;
padding:var(--space-4) var(--space-6);
border-radius:var(--radius-lg);
font-weight:600;
font-size:1rem;
cursor:pointer;
transition:all var(--transition-fast);
margin-bottom:var(--space-3);
}
.modal-cta:hover{background:var(--gradient-hover);
transform:translateY(-1px);
box-shadow:0 8px 20px rgba(102, 126, 234, 0.3);
}
.modal-note{text-align:center;
color:var(--gray-500);
font-size:0.8rem;
}
.modal-footer{text-align:center;
margin-top:30px;
padding-top:20px;
border-top:1px solid #e2e8f0;
}
@media (max-width:768px){.modal-content{padding:var(--space-6);
margin:var(--space-4);
}
}
.cta{padding:var(--space-20) 0;
background:linear-gradient(135deg, rgba(59, 130, 246, 0.04) 0%, rgba(236, 72, 153, 0.04) 100%);
text-align:center;
}
.cta-content h2{font-size:clamp(2rem, 3.5vw, 2.75rem);
font-weight:800;
color:var(--gray-900);
margin-bottom:var(--space-4);
}
.cta-content > p{font-size:1.125rem;
color:var(--gray-600);
margin-bottom:var(--space-8);
max-width:600px;
margin-left:auto;
margin-right:auto;
}
.cta-note{font-size:0.8rem;
color:var(--gray-500);
margin-top:var(--space-4);
}
.footer{background:var(--gray-900);
color:white;
padding:var(--space-16) 0 var(--space-8);
}
.footer-content{display:grid;
grid-template-columns:1fr 2fr;
gap:var(--space-16);
margin-bottom:var(--space-12);
}
.footer-brand{max-width:300px;
}
.footer-brand .logo-text,
.footer-brand .logo-ai{color:white;
}
.footer-brand p{color:var(--gray-400);
margin-top:var(--space-4);
line-height:1.6;
}
.footer-links{display:grid;
grid-template-columns:repeat(4, 1fr);
gap:var(--space-8);
}
.footer-column h4{font-weight:600;
margin-bottom:var(--space-4);
color:white;
}
.footer-column a{display:block;
color:var(--gray-400);
text-decoration:none;
margin-bottom:var(--space-2);
transition:color var(--transition-fast);
font-size:0.9rem;
}
.footer-column a:hover{color:white;
}
.footer-bottom{display:flex;
justify-content:space-between;
align-items:center;
padding-top:var(--space-8);
border-top:1px solid var(--gray-800);
}
.footer-bottom p{color:var(--gray-400);
font-size:0.9rem;
}
.social-links{display:flex;
gap:var(--space-4);
}
.social-links a{color:var(--gray-400);
transition:color var(--transition-fast);
}
.social-links a:hover{color:white;
}
*{margin:0;
padding:0;
box-sizing:border-box;
}:root{--primary-blue:#3B82F6;
--primary-purple:#8B5CF6;
--primary-pink:#FF1B8D;
--hover-blue:#2563EB;
--hover-purple:#7C3AED;
--hover-pink:#E6007A;
--gradient-primary:linear-gradient(135deg, #FF1B8D 0%, #8B5CF6 50%, #3B82F6 100%);
--gradient-hover:linear-gradient(135deg, #E6007A 0%, #7C3AED 50%, #2563EB 100%);
--white:#ffffff;
--gray-50:#f9fafb;
--gray-100:#f3f4f6;
--gray-200:#e5e7eb;
--gray-300:#d1d5db;
--gray-400:#9ca3af;
--gray-500:#6b7280;
--gray-600:#4b5563;
--gray-700:#374151;
--gray-800:#1f2937;
--gray-900:#111827;
--success:#10b981;
--warning:#f59e0b;
--error:#ef4444;
--glass-bg:rgba(255, 255, 255, 0.08);
--glass-bg-strong:rgba(255, 255, 255, 0.12);
--glass-border:rgba(255, 255, 255, 0.16);
--glass-shadow:0 8px 32px rgba(0, 0, 0, 0.08);
--glass-shadow-strong:0 20px 40px rgba(0, 0, 0, 0.12);
--font-system:-apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
--font-mono:'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
--space-1:0.25rem;
--space-2:0.5rem;
--space-3:0.75rem;
--space-4:1rem;
--space-5:1.25rem;
--space-6:1.5rem;
--space-8:2rem;
--space-10:2.5rem;
--space-12:3rem;
--space-16:4rem;
--space-20:5rem;
--space-24:6rem;
--radius-sm:0.375rem;
--radius-md:0.5rem;
--radius-lg:0.75rem;
--radius-xl:1rem;
--radius-2xl:1.5rem;
--radius-3xl:2rem;
--transition-fast:150ms cubic-bezier(0.4, 0, 0.2, 1);
--transition-normal:300ms cubic-bezier(0.4, 0, 0.2, 1);
--transition-slow:500ms cubic-bezier(0.4, 0, 0.2, 1);
}
body.no-transition,
body.no-transition *,
body.no-transition *::before,
body.no-transition *::after{animation-duration:0s !important;
animation-delay:0s !important;
transition-duration:0s !important;
transition-delay:0s !important;
animation:none !important;
transition:none !important;
}
body.no-transition *{opacity:1 !important;
transform:none !important;
visibility:visible !important;
}
html{scroll-behavior:smooth;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
}
body{font-family:var(--font-system);
line-height:1.6;
color:var(--gray-900);
position:relative;
overflow-x:hidden;
}
body::before{content:'';
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
pointer-events:none;
background:url('../images/Muster.png') repeat,
linear-gradient(135deg, #fafbfc 0%, #f4f6f8 100%);
background-size:150px 150px, cover;
background-position:0 0, 0 0;
z-index:-1;
opacity:1;
}
.container{max-width:1200px;
margin:0 auto;
padding:0 var(--space-6);
position:relative;
z-index:1;
}
.nav-glass{position:fixed;
top:0;
left:0;
right:0;
z-index:1000;
background:rgba(255, 255, 255, 0.72);
backdrop-filter:blur(20px);
-webkit-backdrop-filter:blur(20px);
border-bottom:2px solid rgba(0, 0, 0, 0.12);
transition:all var(--transition-normal);
transform:translateY(0);
}
.nav-glass.scrolled{background:rgba(255, 255, 255, 0.85);
box-shadow:var(--glass-shadow);
border-bottom:2px solid rgba(0, 0, 0, 0.18);
}
.nav-container{max-width:min(1400px, 95vw);
margin:0 auto;
padding:0 var(--space-4);
display:flex;
align-items:center;
justify-content:space-between;
height:clamp(4rem, 5vw, 4.9375rem);
}
.logo-modern{display:flex;
align-items:center;
gap:var(--space-2);
text-decoration:none;
transition:transform var(--transition-fast);
margin-left:calc(var(--space-4) * -1);
}
.logo-modern:hover{transform:scale(1.05);
}
.logo-icon-modern{display:flex;
align-items:center;
justify-content:center;
filter:drop-shadow(0 2px 8px rgba(59, 130, 246, 0.25));
}
.logo-icon-modern img{width:clamp(2rem, 2.5vw, 2.25rem);
height:clamp(2rem, 2.5vw, 2.25rem);
object-fit:contain;
}
.logo-text{font-size:1.575rem;
font-weight:700;
color:var(--gray-900);
letter-spacing:-0.02em;
line-height:1.1;
}
.logo-ai{font-size:1.625rem;
font-weight:800;
background:var(--gradient-primary);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background-clip:text;
margin-left:-2px;
}
.nav-menu{display:flex;
align-items:center;
gap:calc(var(--space-6) * 1.3);
flex:1;
justify-content:center;
padding:0 var(--space-8);
margin-left:calc(var(--space-16) * 2);
}
.nav-auth{display:flex;
align-items:center;
gap:var(--space-3);
margin-left:auto;
margin-right:var(--space-2);
}
.nav-link{color:var(--gray-700);
text-decoration:none;
font-weight:500;
font-size:1.05rem;
transition:color var(--transition-fast);
position:relative;
}
.nav-link:hover{color:var(--gray-900);
}
.nav-link::after{content:'';
position:absolute;
bottom:-4px;
left:0;
width:0;
height:2px;
background:var(--gradient-primary);
transition:width var(--transition-fast);
}
.nav-link:hover::after{width:100%;
}
.nav-login{background:transparent;
border:1.5px solid var(--gray-300);
color:var(--gray-700) !important;
font-weight:600;
font-size:1rem;
padding:calc(var(--space-2) * 1.1) calc(var(--space-4) * 1.1);
border-radius:var(--radius-lg);
transition:all var(--transition-fast);
text-decoration:none;
display:inline-block;
}
.nav-login:hover{border-color:var(--gray-400);
color:var(--gray-900) !important;
transform:translateY(-1px);
}
.nav-cta{background:var(--gradient-primary);
color:white !important;
padding:calc(var(--space-2) * 1.1) calc(var(--space-4) * 1.1);
border-radius:var(--radius-lg);
text-decoration:none;
font-weight:600;
font-size:1rem;
transition:all var(--transition-fast);
box-shadow:0 4px 16px rgba(59, 130, 246, 0.25);
white-space:nowrap;
display:inline-flex;
align-items:center;
}
.nav-cta:hover{background:var(--gradient-hover);
transform:translateY(-1px);
box-shadow:0 8px 24px rgba(59, 130, 246, 0.35);
}
.mobile-menu-btn{display:none;
flex-direction:column;
gap:4px;
background:none;
border:none;
cursor:pointer;
padding:var(--space-2);
}
.mobile-menu-btn span{width:1.5rem;
height:0.125rem;
background:var(--gray-700);
transition:all var(--transition-fast);
}
.hero{min-height:100vh;
display:flex;
align-items:center;
position:relative;
overflow:hidden;
padding:calc(1rem + var(--space-8)) 0 var(--space-12);
}
.hero-background{position:absolute;
top:0;
left:0;
right:0;
bottom:0;
pointer-events:none;
}
.floating-shapes{position:absolute;
width:100%;
height:100%;
display:none;
}
.shape{position:absolute;
border-radius:50%;
filter:blur(60px);
opacity:0;
}
.shape-1{width:clamp(18rem, 28vw, 25rem);
height:clamp(18rem, 28vw, 25rem);
background:radial-gradient(circle, rgba(59, 130, 246, 0.3) 0%, transparent 70%);
top:10%;
}
.shape-2{width:clamp(14rem, 22vw, 18.75rem);
height:clamp(14rem, 22vw, 18.75rem);
background:radial-gradient(circle, rgba(139, 92, 246, 0.25) 0%, transparent 70%);
top:50%;
}
.shape-3{width:clamp(16rem, 25vw, 21.875rem);
height:clamp(16rem, 25vw, 21.875rem);
background:radial-gradient(circle, rgba(236, 72, 153, 0.2) 0%, transparent 70%);
bottom:15%;
}
.shape-4{width:clamp(12rem, 18vw, 15.625rem);
height:clamp(12rem, 18vw, 15.625rem);
background:radial-gradient(circle, rgba(59, 130, 246, 0.15) 0%, transparent 70%);
right:10%;
top:30%;
}
.grid-pattern{position:absolute;
top:0;
left:0;
right:0;
bottom:0;
}
.hero-container{max-width:min(1260px, 95vw);
margin:0 auto;
padding:0 var(--space-6);
display:grid;
grid-template-columns:1fr 1fr;
gap:calc(var(--space-16) * 1.05);
align-items:center;
position:relative;
z-index:1;
}
.hero-content{max-width:min(630px, 100%);
}
.hero-badge{display:inline-flex;
align-items:center;
gap:var(--space-2);
background:var(--glass-bg);
backdrop-filter:blur(12px);
-webkit-backdrop-filter:blur(12px);
padding:var(--space-2) var(--space-4);
border-radius:var(--radius-2xl);
font-size:0.8rem;
font-weight:600;
color:var(--gray-700);
margin-bottom:var(--space-6);
}
.badge-dot{width:0.375rem;
height:0.375rem;
background:var(--primary-blue);
border-radius:50%;
}
.hero-title{font-size:3.2rem;
font-weight:700;
line-height:1.1;
color:var(--gray-900);
margin-bottom:var(--space-3);
white-space:nowrap;
}
.gradient-text{background:var(--gradient-primary);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background-clip:text;
display:inline-block;
}
.hero-subtitle{font-size:1.18rem;
font-weight:500;
color:var(--primary-blue);
margin-bottom:var(--space-4);
white-space:nowrap;
}
.hero-description{font-size:1.18rem;
line-height:1.6;
color:var(--gray-600);
margin-bottom:var(--space-6);
}
.market-support{display:flex;
align-items:center;
gap:var(--space-4);
margin-bottom:var(--space-6);
}
.market-support-label{font-size:0.79rem;
font-weight:600;
color:var(--gray-500);
text-transform:uppercase;
letter-spacing:0.08em;
white-space:nowrap;
}
.market-badges{display:flex;
flex-wrap:nowrap;
gap:var(--space-2);
}
.market-badge{background:rgba(59, 130, 246, 0.08);
backdrop-filter:blur(8px);
-webkit-backdrop-filter:blur(8px);
border:1px solid rgba(59, 130, 246, 0.12);
color:var(--primary-blue);
padding:0.375rem 0.8125rem;
border-radius:var(--radius-sm);
font-size:0.79rem;
font-weight:600;
transition:all var(--transition-fast);
box-shadow:0 1px 3px rgba(0, 0, 0, 0.05);
}
.market-badge:hover{background:rgba(59, 130, 246, 0.12);
border-color:rgba(59, 130, 246, 0.2);
transform:translateY(-1px);
box-shadow:0 2px 8px rgba(59, 130, 246, 0.15);
}
.hero-actions{display:flex;
flex-direction:column;
align-items:center;
gap:var(--space-4);
}
.main-cta{display:inline-flex;
align-items:center;
gap:var(--space-2);
background:var(--gradient-primary) !important;
color:#ffffff !important;
padding:calc(var(--space-3) * 1.15) calc(var(--space-6) * 1.15);
border-radius:var(--radius-lg);
text-decoration:none;
font-weight:600;
font-size:1.18rem;
transition:all var(--transition-normal);
box-shadow:0 8px 24px rgba(59, 130, 246, 0.25);
border:none;
cursor:pointer;
text-shadow:0 1px 2px rgba(0, 0, 0, 0.1);
}
.main-cta:hover{background:var(--gradient-hover) !important;
transform:translateY(-2px);
box-shadow:0 12px 32px rgba(59, 130, 246, 0.35);
}
.main-cta.large{padding:var(--space-4) var(--space-8);
font-size:1.125rem;
}
.main-cta.full-width{width:100%;
justify-content:center;
}
.demo-btn{display:inline-flex;
align-items:center;
gap:var(--space-2);
background:var(--glass-bg);
backdrop-filter:blur(12px);
-webkit-backdrop-filter:blur(12px);
border:1px solid var(--glass-border);
color:var(--gray-700);
padding:var(--space-3) var(--space-5);
border-radius:var(--radius-lg);
text-decoration:none;
font-weight:600;
font-size:1rem;
transition:all var(--transition-normal);
cursor:pointer;
}
.demo-btn:hover{background:var(--glass-bg-strong);
transform:translateY(-1px);
box-shadow:var(--glass-shadow);
}
.hero-trust{display:flex;
margin-top:calc(var(--space-2) * 0.5);
}
.trust-badge{display:flex;
align-items:center;
gap:var(--space-2);
background:transparent;
padding:var(--space-3) var(--space-5);
}
.trust-stars{display:flex;
gap:2px;
}
.trust-stars .star{position:relative;
display:inline-block;
font-size:1.1rem;
color:#FFD700;
text-shadow:-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000,
0 0 1px #000;
letter-spacing:2px;
}
.trust-stars .star::before{content:'★';
}
.trust-text{font-size:0.95rem;
font-weight:600;
color:var(--gray-600);
white-space:nowrap;
}
.hero-visual{display:flex;
justify-content:center;
align-items:flex-start;
margin-top:1rem;
}
.demo-panel{background:var(--glass-bg);
backdrop-filter:blur(24px);
-webkit-backdrop-filter:blur(24px);
border:2px solid rgba(0, 0, 0, 0.15);
border-radius:var(--radius-2xl);
box-shadow:var(--glass-shadow-strong);
overflow:visible;
width:100%;
max-width:min(483px, 95vw);
transition:all var(--transition-normal);
height:auto;
min-height:32rem;
max-height:none;
display:flex;
flex-direction:column;
}
.demo-panel:hover{box-shadow:0 32px 64px rgba(0, 0, 0, 0.12);
border-color:rgba(0, 0, 0, 0.2);
}
.demo-header{display:flex;
align-items:center;
justify-content:space-between;
padding:var(--space-4) var(--space-5);
background:rgba(255, 255, 255, 0.08);
border-bottom:1px solid var(--glass-border);
}
.demo-controls{display:flex;
gap:var(--space-2);
}
.control-dot{width:0.625rem;
height:0.625rem;
border-radius:50%;
}
.control-dot.red{background:#ff5f57; }
.control-dot.yellow{background:#ffbd2e; }
.control-dot.green{background:#28ca42; }
.demo-badge{display:flex;
align-items:center;
gap:var(--space-1);
background:rgba(59, 130, 246, 0.08);
padding:var(--space-1) var(--space-3);
border-radius:var(--radius-lg);
font-size:0.9rem;
font-weight:600;
color:var(--primary-blue);
}
.demo-badge span{opacity:1;
}
.live-dot{width:0.5rem;
height:0.5rem;
background:#10B981;
border-radius:50%;
}
.upload-actions{margin-bottom:var(--space-6);
}
.upload-hint-container{padding:var(--space-3) var(--space-5) var(--space-4);
background:transparent;
position:absolute;
bottom:0;
left:0;
right:0;
z-index:10;
}
.demo-counter{display:flex;
align-items:center;
gap:var(--space-1);
background:rgba(59, 130, 246, 0.08);
padding:var(--space-1) var(--space-3);
border-radius:var(--radius-lg);
font-size:0.8rem;
font-weight:600;
color:var(--primary-blue);
}
.scan-counter-inline{display:flex;
align-items:center;
gap:var(--space-1);
}
.counter-text{font-size:0.75rem;
color:var(--gray-600);
}
.counter-number{font-weight:700;
color:var(--primary-blue);
}
.scan-counter-inline.warning .counter-number{color:var(--warning);
}
.scan-counter-inline.exhausted .counter-number{color:var(--error);
}
.scan-counter-inline.dev-mode .counter-number{color:var(--success);
}
.demo-content{padding:var(--space-4) var(--space-8) var(--space-2);
height:auto;
min-height:400px;
display:flex;
align-items:center;
justify-content:center;
flex:1;
overflow:visible;
position:relative;
}
.upload-state{text-align:center;
width:100%;
margin-top:-20px;
}
.upload-icon{margin-bottom:var(--space-5);
color:var(--gray-400);
}
.upload-icon svg{width:clamp(3.5rem, 4.5vw, 4rem);
height:clamp(3.5rem, 4.5vw, 4rem);
}
.upload-state h3{font-size:1.6rem;
font-weight:700;
color:var(--gray-800);
margin-bottom:var(--space-2);
}
.upload-state p{color:var(--gray-600);
margin-bottom:var(--space-5);
font-size:1.2rem;
}
.upload-btn{background:var(--gradient-primary);
color:white;
border:none;
padding:calc(var(--space-3) * 1.25) calc(var(--space-6) * 1.25);
border-radius:var(--radius-lg);
font-weight:600;
cursor:pointer;
box-shadow:0 4px 16px rgba(59, 130, 246, 0.25);
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
border:1px solid rgba(255, 255, 255, 0.2);
position:relative;
overflow:hidden;
font-size:1.2rem;
}
.upload-btn:hover{background:var(--gradient-hover);
transform:translateY(-1px);
}
@keyframes pulse-button{0%{transform:scale(1); }
50%{transform:scale(1.05); }
100%{transform:scale(1); }
}
.upload-btn{animation:pulse-button 1.5s ease-in-out infinite;
animation-fill-mode:both;
will-change:transform;
box-shadow:0 4px 15px rgba(139, 92, 246, 0.3);
}
.upload-btn:hover{cursor:pointer;
}
.demo-options{margin-top:var(--space-4);
display:flex;
flex-direction:column;
align-items:center;
gap:var(--space-3);
}
.demo-divider{position:relative;
width:100%;
text-align:center;
margin:var(--space-2) 0;
}
.demo-divider::before{content:'';
position:absolute;
top:50%;
left:0;
right:0;
height:1px;
background:var(--gray-300);
z-index:1;
}
.demo-divider span{background:white;
padding:0 var(--space-3);
color:var(--gray-500);
font-size:0.8rem;
font-weight:500;
position:relative;
z-index:2;
}
.demo-chart-btn{background:rgba(59, 130, 246, 0.08);
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
border:1px solid rgba(59, 130, 246, 0.12);
color:var(--primary-blue);
padding:var(--space-3) var(--space-5);
border-radius:var(--radius-lg);
font-weight:600;
cursor:pointer;
transition:all var(--transition-fast);
font-size:1.05rem;
box-shadow:0 1px 3px rgba(59, 130, 246, 0.1);
}
.demo-chart-btn:hover{background:rgba(59, 130, 246, 0.12);
border-color:rgba(59, 130, 246, 0.2);
transform:translateY(-1px);
box-shadow:0 2px 8px rgba(59, 130, 246, 0.15);
}
.upload-hint{display:flex;
align-items:center;
justify-content:center;
font-size:1rem;
color:var(--gray-600);
font-weight:500;
margin-top:var(--space-2);
}
.upload-hint svg{width:18px;
height:18px;
color:var(--primary-blue);
animation:bounce-arrow 3s ease-in-out infinite;
}
@keyframes bounce-arrow{0%, 20%, 50%, 80%, 100%{transform:translateY(0);
}
40%{transform:translateY(-8px);
}
60%{transform:translateY(-4px);
}
}
.image-preview-state{text-align:center;
width:100%;
}
.preview-container{display:flex;
flex-direction:column;
align-items:center;
}
.image-info{width:100%;
margin-bottom:var(--space-4);
}
.chart-input{width:100%;
margin-bottom:var(--space-3);
padding:clamp(0.75rem, 1.5vw, 1rem) clamp(0.875rem, 1.75vw, 1.125rem);
border:1px solid var(--gray-300);
border-radius:var(--radius-lg);
font-size:1.125rem;
transition:border-color var(--transition-fast);
}
.chart-input:focus{outline:none;
border-color:var(--primary-blue);
box-shadow:0 0 0 3px rgba(59, 130, 246, 0.1);
}
.chart-textarea{width:100%;
height:clamp(4rem, 6vw, 4.375rem);
margin-bottom:var(--space-4);
padding:var(--space-3);
border:1px solid var(--gray-300);
border-radius:var(--radius-lg);
font-size:0.95rem;
resize:vertical;
font-family:inherit;
transition:border-color var(--transition-fast);
}
.chart-textarea:focus{outline:none;
border-color:var(--primary-blue);
box-shadow:0 0 0 3px rgba(59, 130, 246, 0.1);
}
.uploaded-image-container{position:relative;
display:inline-block;
margin-bottom:var(--space-4);
}
.change-image-btn{position:absolute;
top:var(--space-2);
right:var(--space-2);
background:rgba(255, 255, 255, 0.9);
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
border:1px solid rgba(0, 0, 0, 0.1);
border-radius:var(--radius-md);
padding:var(--space-1) var(--space-3);
font-size:0.8rem;
font-weight:600;
color:var(--gray-700);
cursor:pointer;
transition:all var(--transition-fast);
box-shadow:0 2px 8px rgba(0, 0, 0, 0.1);
}
.change-image-btn:hover{background:rgba(255, 255, 255, 1);
transform:translateY(-1px);
box-shadow:0 4px 12px rgba(0, 0, 0, 0.15);
}
.analysis-options-title{font-size:1.75rem;
font-weight:700;
color:var(--gray-800);
margin-bottom:var(--space-4);
text-align:left;
}
.analysis-type-selector{margin-top:var(--space-3);
}
.selector-label{display:block;
font-size:0.95rem;
font-weight:600;
color:var(--gray-700);
margin-bottom:var(--space-2);
}
.analysis-select{width:100%;
padding:clamp(0.75rem, 1.5vw, 1rem) clamp(0.875rem, 1.75vw, 1.125rem);
border:1px solid var(--gray-300);
border-radius:var(--radius-lg);
font-size:1.125rem;
background:white;
color:var(--gray-700);
cursor:pointer;
transition:border-color var(--transition-fast);
}
.analysis-select:focus{outline:none;
border-color:var(--primary-blue);
box-shadow:0 0 0 3px rgba(59, 130, 246, 0.1);
}
.action-btn.large{padding:clamp(0.875rem, 1.75vw, 1.125rem) clamp(1.5rem, 2.5vw, 1.75rem);
font-size:1.25rem;
font-weight:700;
}
.demo-note{text-align:center;
font-size:0.9rem;
color:var(--gray-600);
margin-top:var(--space-4);
padding:var(--space-2);
background:rgba(16, 185, 129, 0.05);
border-radius:var(--radius-md);
border:1px solid rgba(16, 185, 129, 0.1);
}
.preview-actions{display:flex;
justify-content:center;
width:100%;
margin-top:var(--space-4);
}
.demo-selection-state{text-align:center;
width:100%;
}
.demo-selection-state h3{font-size:1.375rem;
font-weight:700;
color:var(--gray-800);
margin-bottom:var(--space-2);
}
.demo-selection-state p{color:var(--gray-600);
margin-bottom:var(--space-5);
font-size:1.05rem;
}
.demo-charts-grid{display:grid;
grid-template-columns:1fr;
gap:var(--space-3);
margin-bottom:var(--space-4);
}
.demo-chart-option{background:var(--glass-bg);
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
border:1px solid var(--glass-border);
border-radius:var(--radius-lg);
padding:var(--space-3);
cursor:pointer;
transition:all var(--transition-fast);
text-align:left;
}
.demo-chart-option:hover{background:var(--glass-bg-strong);
border-color:rgba(59, 130, 246, 0.2);
transform:translateY(-1px);
box-shadow:0 4px 12px rgba(59, 130, 246, 0.1);
}
.demo-chart-option img{width:100%;
height:clamp(7rem, 10vw, 8.125rem);
object-fit:cover;
border-radius:var(--radius-md);
margin-bottom:var(--space-2);
}
.chart-label{display:flex;
flex-direction:column;
gap:var(--space-1);
}
.chart-label strong{font-size:1.05rem;
color:var(--gray-800);
font-weight:600;
}
.chart-label span{font-size:0.95rem;
color:var(--gray-600);
}
.ai-brain{position:relative;
width:clamp(6rem, 8vw, 6.875rem);
height:clamp(6rem, 8vw, 6.875rem);
margin:0 auto var(--space-5);
}
.brain-core{position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);
width:clamp(1.875rem, 2.5vw, 2.1875rem);
height:clamp(1.875rem, 2.5vw, 2.1875rem);
background:var(--gradient-primary);
border-radius:50%;
}
.brain-wave{position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);
border:0.15625rem solid rgba(59, 130, 246, 0.25);
border-radius:50%;
}
.wave-1{width:clamp(3rem, 4vw, 3.4375rem); height:clamp(3rem, 4vw, 3.4375rem); }
.wave-2{width:clamp(4.5rem, 6vw, 5rem); height:clamp(4.5rem, 6vw, 5rem); }
.wave-3{width:clamp(6rem, 7.5vw, 6.5625rem); height:clamp(6rem, 7.5vw, 6.5625rem); }
.loading-state h3{font-size:1.375rem;
font-weight:700;
color:var(--gray-800);
margin-bottom:var(--space-2);
}
.loading-state p{color:var(--gray-600);
margin-bottom:var(--space-5);
font-size:1.05rem;
}
.progress-bar{width:clamp(12rem, 16vw, 13.75rem);
height:0.21875rem;
background:var(--gray-200);
border-radius:var(--radius-sm);
overflow:hidden;
margin:0 auto;
}
.progress-fill{height:100%;
background:var(--gradient-primary);
border-radius:var(--radius-sm);
width:0;
}
.result-state{width:100%;
}
.result-header{display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:var(--space-5);
gap:var(--space-4);
}
.sentiment-indicator{display:flex;
align-items:center;
gap:var(--space-3);
}
.sentiment-icon{font-size:1.75rem;
}
.sentiment-details{display:flex;
flex-direction:column;
}
.sentiment-label{font-size:0.8rem;
color:var(--gray-500);
text-transform:uppercase;
letter-spacing:0.05em;
font-weight:600;
}
.sentiment-value{font-size:1.1rem;
font-weight:700;
}
.sentiment-value.bullish{color:var(--success); }
.sentiment-value.bearish{color:var(--error); }
.sentiment-value.neutral{color:var(--warning); }
.confidence-meter{text-align:right;
}
.confidence-label{font-size:0.8rem;
color:var(--gray-500);
text-transform:uppercase;
letter-spacing:0.05em;
font-weight:600;
margin-bottom:var(--space-1);
}
.confidence-bar{width:clamp(4rem, 5vw, 4.375rem);
height:0.3125rem;
background:var(--gray-200);
border-radius:var(--radius-sm);
overflow:hidden;
margin-bottom:var(--space-1);
}
.confidence-fill{height:100%;
background:var(--gradient-primary);
border-radius:var(--radius-sm);
}
.confidence-text{font-size:0.95rem;
font-weight:600;
color:var(--gray-700);
}
.analysis-meta{display:flex;
flex-direction:column;
gap:var(--space-3);
}
.analysis-badges{display:flex;
flex-wrap:wrap;
gap:var(--space-2);
}
.result-badge{padding:var(--space-1) var(--space-3);
background:rgba(139, 92, 246, 0.1);
border:1px solid rgba(139, 92, 246, 0.3);
border-radius:var(--radius-sm);
font-size:0.85rem;
font-weight:600;
color:var(--gray-700);
}
.sentiment-overview{display:flex;
justify-content:space-between;
align-items:center;
padding:var(--space-5);
background:transparent;
border-radius:var(--radius-xl);
border:1px solid rgba(139, 92, 246, 0.15);
margin-bottom:var(--space-5);
}
.sentiment-display{display:flex;
align-items:center;
gap:var(--space-4);
}
.sentiment-info{display:flex;
flex-direction:column;
gap:var(--space-1);
}
.confidence-display{display:flex;
flex-direction:column;
align-items:flex-end;
gap:var(--space-1);
}
.analysis-section{margin-bottom:var(--space-5);
padding:var(--space-5);
border-radius:var(--radius-lg);
border:1px solid rgba(255, 255, 255, 0.2);
background:transparent;
}
.analysis-section.key-findings{background:transparent;
border-color:rgba(16, 185, 129, 0.15);
}
.analysis-section.critical-levels{background:transparent;
border-color:rgba(59, 130, 246, 0.15);
}
.analysis-section.technical-analysis{background:transparent;
border-color:rgba(139, 92, 246, 0.15);
}
.analysis-section.recommendation{background:transparent;
border-color:rgba(139, 92, 246, 0.15);
}
.analysis-section.pattern-recognition{background:transparent;
border-color:rgba(251, 191, 36, 0.15);
}
.section-header{margin-bottom:var(--space-4);
}
.section-header h4{font-size:1.1rem;
font-weight:600;
color:var(--gray-800);
margin:0;
}
.findings-list{display:flex;
flex-direction:column;
gap:var(--space-3);
}
.finding-item{display:flex;
align-items:center;
gap:var(--space-3);
}
.finding-icon{font-weight:bold;
font-size:1rem;
}
.finding-icon.success{color:var(--success);
}
.finding-icon.warning{color:var(--warning);
}
.finding-icon.error{color:var(--error);
}
.finding-text{color:var(--gray-700);
line-height:1.5;
}
.levels-grid{display:grid;
grid-template-columns:1fr 1fr;
gap:var(--space-4);
}
.level-item{display:flex;
justify-content:space-between;
align-items:center;
padding:var(--space-3);
background:white;
border-radius:var(--radius-md);
box-shadow:0 1px 3px rgba(0, 0, 0, 0.1);
}
.level-label{font-weight:500;
color:var(--gray-600);
font-size:0.9rem;
}
.level-value{font-weight:700;
font-size:0.95rem;
}
.level-item.resistance .level-value{color:var(--error);
}
.level-item.support .level-value{color:var(--success);
}
.level-item.target .level-value{color:var(--primary-blue);
}
.level-item.stop-loss .level-value{color:var(--warning);
}
.technical-content{color:var(--gray-700);
line-height:1.6;
font-size:1rem;
}
.recommendation-content{display:flex;
flex-direction:column;
gap:var(--space-4);
}
.recommendation-text{color:var(--gray-700);
line-height:1.6;
font-size:1rem;
}
.risk-warning{display:flex;
align-items:center;
gap:var(--space-2);
padding:var(--space-3);
background:rgba(251, 191, 36, 0.1);
border-radius:var(--radius-md);
border:1px solid rgba(251, 191, 36, 0.3);
}
.warning-icon{font-size:1rem;
color:var(--warning);
}
.warning-text{font-size:0.9rem;
color:var(--gray-700);
font-weight:500;
}
.patterns-list{display:flex;
flex-direction:column;
gap:var(--space-3);
}
.pattern-item{display:flex;
justify-content:space-between;
align-items:center;
padding:var(--space-3);
background:white;
border-radius:var(--radius-md);
box-shadow:0 1px 3px rgba(0, 0, 0, 0.1);
}
.pattern-name{font-weight:600;
color:var(--gray-800);
}
.pattern-reliability{font-size:0.85rem;
color:var(--success);
font-weight:500;
}
.upgrade-btn{width:100%;
padding:18px 32px;
background:var(--gradient-primary);
color:white;
border:none;
border-radius:var(--radius-lg);
font-weight:600;
font-size:1.0625rem;
cursor:pointer;
transition:all var(--transition-fast);
margin-top:var(--space-5);
display:flex;
align-items:center;
justify-content:center;
gap:11px;
}
.upgrade-btn:hover{background:var(--gradient-hover);
transform:translateY(-1px);
box-shadow:0 8px 25px rgba(0, 0, 0, 0.15);
}
.upgrade-btn .upgrade-icon{width:20px;
height:20px;
}
.recommendation{background:rgba(59, 130, 246, 0.04);
border:1px solid rgba(59, 130, 246, 0.08);
border-radius:var(--radius-lg);
padding:var(--space-5);
margin-bottom:var(--space-5);
}
.recommendation h4{font-size:0.9rem;
font-weight:600;
color:var(--primary-blue);
margin-bottom:var(--space-2);
text-transform:uppercase;
letter-spacing:0.05em;
}
.recommendation p{color:var(--gray-700);
line-height:1.5;
font-size:1.05rem;
}
.patterns-section{margin-bottom:var(--space-4);
}
.patterns-section h4{font-size:0.9rem;
font-weight:600;
color:var(--gray-700);
margin-bottom:var(--space-2);
text-transform:uppercase;
letter-spacing:0.05em;
}
.patterns-list{display:flex;
flex-wrap:wrap;
gap:var(--space-3);
}
.pattern-chip{background:var(--gray-100);
padding:var(--space-1) var(--space-3);
border-radius:var(--radius-2xl);
font-size:0.75rem;
color:var(--gray-700);
font-weight:500;
}
.analysis-section{margin-bottom:var(--space-5);
}
.analysis-section h4{font-size:0.9rem;
font-weight:600;
color:var(--gray-700);
margin-bottom:var(--space-2);
text-transform:uppercase;
letter-spacing:0.05em;
}
.analysis-text{color:var(--gray-600);
line-height:1.5;
font-size:1.05rem;
}
.action-buttons{display:flex;
gap:var(--space-2);
}
.action-btn{flex:1;
padding:var(--space-3);
border-radius:var(--radius-lg);
font-weight:600;
font-size:0.95rem;
cursor:pointer;
transition:all var(--transition-fast);
border:none;
}
.action-btn.primary{background:var(--gradient-primary);
color:white;
}
.action-btn.primary:hover{background:var(--gradient-hover);
transform:translateY(-1px);
}
.action-btn.secondary{background:var(--glass-bg);
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
border:1px solid var(--glass-border);
color:var(--gray-700);
}
.action-btn.secondary:hover{background:var(--glass-bg-strong);
transform:translateY(-1px);
}
.scroll-arrow{position:absolute;
bottom:clamp(2rem, 3vw, 2.5rem);
left:50%;
transform:translateX(-50%);
color:var(--gray-400);
cursor:pointer;
transition:color var(--transition-fast);
z-index:10;
opacity:1;
}
.scroll-arrow:hover{color:var(--primary-blue);
}
.scroll-arrow svg{filter:drop-shadow(0 2px 8px rgba(0, 0, 0, 0.1));
}
.section-header{text-align:center;
margin-bottom:var(--space-16);
}
.section-header h2{font-size:clamp(2rem, 3.5vw, 2.75rem);
font-weight:800;
color:var(--gray-900);
margin-bottom:var(--space-4);
letter-spacing:-0.02em;
}
.section-header p{font-size:1.125rem;
color:var(--gray-600);
max-width:600px;
margin:0 auto;
}
.features{padding:var(--space-20) 0;
position:relative;
background:transparent;
}
.features-grid{display:grid;
grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));
gap:var(--space-6);
}
.feature-card{background:var(--glass-bg);
backdrop-filter:blur(20px);
-webkit-backdrop-filter:blur(20px);
border:1px solid var(--gray-300);
border-radius:var(--radius-xl);
padding:var(--space-5);
transition:all var(--transition-normal);
text-align:left;
display:flex;
flex-direction:column;
height:100%;
}
.feature-card:hover{transform:translateY(-6px);
box-shadow:var(--glass-shadow-strong);
border-color:var(--gray-400);
}
.feature-header{display:flex;
align-items:center;
gap:var(--space-3);
margin-bottom:var(--space-3);
min-height:clamp(2.5rem, 3.5vw, 3rem);
}
.feature-icon{width:clamp(2.25rem, 3vw, 2.5rem);
height:clamp(2.25rem, 3vw, 2.5rem);
background:linear-gradient(135deg, rgba(255, 27, 141, 0.1) 0%, rgba(139, 92, 246, 0.1) 50%, rgba(59, 130, 246, 0.1) 100%);
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
border:1px solid var(--glass-border);
border-radius:var(--radius-lg);
display:flex;
align-items:center;
justify-content:center;
transition:transform var(--transition-fast);
position:relative;
flex-shrink:0;
}
.feature-icon svg{width:clamp(1.25rem, 1.75vw, 1.5rem);
height:clamp(1.25rem, 1.75vw, 1.5rem);
z-index:2;
}
.feature-card:hover .feature-icon{transform:scale(1.1) rotate(5deg);
}
.feature-card h3{font-size:1.15rem;
font-weight:700;
color:var(--gray-900);
margin:0;
line-height:1.2;
}
.feature-card p{color:var(--gray-600);
line-height:1.6;
font-size:0.95rem;
flex-grow:1;
}
.testimonials-container{margin-top:var(--space-16);
display:flex;
flex-direction:column;
gap:var(--space-6);
max-width:min(900px, 95vw);
margin-left:auto;
margin-right:auto;
}
.testimonial-card{display:flex;
gap:var(--space-5);
align-items:flex-start;
padding:var(--space-6);
background:rgba(255, 255, 255, 0.6);
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
border:1px solid var(--gray-200);
border-radius:var(--radius-xl);
transition:all var(--transition-normal);
}
.testimonial-card:hover{transform:translateY(-2px);
box-shadow:0 8px 24px rgba(0, 0, 0, 0.08);
border-color:var(--gray-300);
}
.testimonial-avatar{flex-shrink:0;
}
.avatar-placeholder{width:clamp(3rem, 4vw, 3.5rem);
height:clamp(3rem, 4vw, 3.5rem);
border-radius:50%;
background:var(--gradient-primary);
display:flex;
align-items:center;
justify-content:center;
color:white;
font-weight:700;
font-size:1.25rem;
}
.testimonial-content{flex:1;
}
.testimonial-text{font-size:1.05rem;
line-height:1.7;
color:var(--gray-700);
margin-bottom:var(--space-3);
font-style:italic;
}
.testimonial-author{font-size:0.95rem;
color:var(--gray-500);
font-weight:500;
}
.faq-section{padding:var(--space-20) 0;
background:#eef2ff;
}
.faq-title{font-size:3rem;
font-weight:700;
text-align:center;
margin-bottom:var(--space-12);
color:var(--gray-900);
letter-spacing:0.05em;
}
.faq-container{max-width:min(800px, 95vw);
margin:0 auto;
}
.faq-item{margin-bottom:var(--space-3);
background:white;
border:1px solid var(--gray-200);
border-radius:var(--radius-lg);
overflow:hidden;
transition:all var(--transition-normal);
}
.faq-item:hover{box-shadow:0 4px 12px rgba(0, 0, 0, 0.05);
}
.faq-question{width:100%;
padding:var(--space-5) var(--space-6);
background:white;
border:none;
display:flex;
justify-content:space-between;
align-items:center;
cursor:pointer;
font-size:1.05rem;
font-weight:500;
color:var(--gray-900);
text-align:left;
transition:all var(--transition-fast);
}
.faq-question:hover{background:var(--gray-50);
}
.faq-arrow{flex-shrink:0;
transition:transform var(--transition-normal);
color:var(--gray-500);
}
.faq-answer{max-height:0;
overflow:hidden;
transition:max-height var(--transition-normal);
background:var(--gray-50);
border-top:1px solid var(--gray-200);
}
.faq-answer p{padding:var(--space-5) var(--space-6);
margin:0;
color:var(--gray-700);
line-height:1.7;
}
.faq-item.active{border-color:var(--primary-500);
box-shadow:0 0 0 1px var(--primary-500);
}
.faq-item.active .faq-question{background:var(--gray-50);
color:var(--primary-600);
}
.faq-item.active .faq-arrow{color:var(--primary-600);
}
.how-it-works{padding:var(--space-20) 0;
background:#eef2ff;
}
.section-label{color:var(--gray-500);
font-size:1rem;
font-weight:500;
text-transform:capitalize;
margin-bottom:var(--space-3);
}
.how-it-works-content{display:grid;
grid-template-columns:1fr 1fr;
gap:var(--space-16);
margin-top:var(--space-12);
align-items:start;
}
.steps-accordion{max-width:min(600px, 95vw);
}
.accordion-item{background:white;
border:1px solid var(--gray-200);
border-radius:var(--radius-lg);
margin-bottom:var(--space-4);
transition:all var(--transition-normal);
cursor:pointer;
}
.accordion-item:hover{border-color:var(--gray-300);
box-shadow:0 4px 12px rgba(0, 0, 0, 0.05);
}
.accordion-item.active{border-color:var(--primary-blue);
box-shadow:0 8px 24px rgba(59, 130, 246, 0.15);
}
.accordion-header{display:flex;
align-items:center;
padding:var(--space-4) var(--space-5);
gap:var(--space-3);
}
.step-number-inline{color:var(--primary-blue);
font-weight:700;
font-size:1.1rem;
min-width:clamp(1.375rem, 2vw, 1.5625rem);
}
.accordion-header h3{flex:1;
font-size:1rem;
font-weight:600;
color:var(--gray-900);
margin:0;
}
.accordion-icon{font-size:1.5rem;
color:var(--gray-400);
font-weight:300;
transition:transform var(--transition-fast);
}
.accordion-content{padding:0 var(--space-5) 0 calc(var(--space-5) + 25px + var(--space-3));
max-height:0;
overflow:hidden;
transition:all var(--transition-normal);
}
.accordion-item.active .accordion-content{max-height:200px;
padding-bottom:var(--space-4);
}
.accordion-content p{color:var(--gray-600);
line-height:1.6;
font-size:0.9rem;
}
.mockup-preview{display:flex;
align-items:center;
justify-content:center;
}
.mockup-container{width:100%;
max-width:min(400px, 90vw);
}
.mockup-screen{background:white;
border:1px solid var(--gray-200);
border-radius:var(--radius-xl);
padding:var(--space-6);
box-shadow:0 20px 40px rgba(0, 0, 0, 0.1);
}
.chart-preview-box{background:var(--gray-50);
border-radius:var(--radius-lg);
overflow:hidden;
}
.preview-header{display:flex;
justify-content:space-between;
align-items:center;
padding:var(--space-3) var(--space-4);
background:white;
border-bottom:1px solid var(--gray-200);
}
.preview-time{font-size:0.85rem;
color:var(--gray-600);
font-weight:500;
}
.preview-indicators{display:flex;
gap:var(--space-2);
}
.indicator-dot{width:0.5rem;
height:0.5rem;
border-radius:50%;
}
.preview-chart{padding:var(--space-4);
background:white;
}
.preview-results{padding:var(--space-4);
background:white;
border-top:1px solid var(--gray-200);
}
.result-item{display:flex;
justify-content:space-between;
align-items:center;
padding:var(--space-2) 0;
font-size:0.9rem;
}
.result-label{color:var(--gray-500);
font-weight:500;
}
.result-value{color:var(--gray-900);
font-weight:600;
}
.how-it-works-cta{text-align:center;
margin-top:var(--space-16);
}
.pricing{padding:var(--space-20) 0;
background:#eef2ff;
position:relative;
}
.pricing::before{content:'';
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background:#eef2ff;
z-index:0;
}
.pricing .container{position:relative;
z-index:1;
}
.pricing-cards{display:flex;
justify-content:center;
gap:var(--space-8);
max-width:min(1100px, 95vw);
margin:0 auto;
flex-wrap:wrap;
}
.pricing-card{background:white;
backdrop-filter:blur(20px);
-webkit-backdrop-filter:blur(20px);
border:1px solid rgba(139, 92, 246, 0.2);
border-radius:var(--radius-xl);
padding:var(--space-8);
position:relative;
transition:all var(--transition-normal);
min-height:clamp(35rem, 45vw, 40.625rem);
display:flex;
flex-direction:column;
box-shadow:0 10px 30px rgba(0, 0, 0, 0.1);
width:100%;
box-sizing:border-box;
}
.pricing-card:hover{transform:translateY(-6px);
box-shadow:var(--glass-shadow-strong);
}
.pricing-card.featured{position:relative;
border:2px solid transparent;
background-image:linear-gradient(white, white),
linear-gradient(135deg, #FF1B8D 0%, #8B5CF6 50%, #3B82F6 100%);
background-origin:border-box;
background-clip:padding-box, border-box;
background-color:white;
box-shadow:0 20px 40px rgba(139, 92, 246, 0.15);
}
.popular-badge{position:absolute;
top:-10px;
left:50%;
transform:translateX(-50%);
background:var(--gradient-primary);
color:white;
padding:var(--space-1) var(--space-4);
border-radius:var(--radius-2xl);
font-size:0.8rem;
font-weight:600;
box-shadow:0 4px 16px rgba(59, 130, 246, 0.25);
}
.plan-header{text-align:center;
margin-bottom:var(--space-8);
padding-bottom:var(--space-4);
border-bottom:1px solid rgba(0, 0, 0, 0.08);
}
.plan-header h3{font-size:1.25rem;
font-weight:700;
color:var(--gray-900);
margin-bottom:var(--space-2);
}
.plan-price{display:flex;
align-items:baseline;
justify-content:center;
gap:var(--space-1);
margin-bottom:var(--space-4);
}
.currency{font-size:1.25rem;
font-weight:600;
color:var(--gray-600);
}
.amount{font-size:3rem;
font-weight:800;
color:var(--gray-900);
line-height:1;
}
.period{font-size:1rem;
color:var(--gray-600);
}
.plan-header p{color:var(--gray-600);
}
.plan-features{margin-bottom:var(--space-8);
flex-grow:1;
padding-top:var(--space-2);
}
.feature-item{display:flex;
align-items:flex-start;
gap:var(--space-3);
margin-bottom:var(--space-4);
padding-left:var(--space-1);
}
.feature-item svg{color:var(--success);
flex-shrink:0;
margin-top:2px;
}
.feature-item span{color:var(--gray-700);
font-weight:500;
font-size:1rem;
line-height:1.5;
}
.plan-cta{width:100%;
background:var(--gradient-primary);
color:white;
border:none;
padding:var(--space-3) var(--space-5);
border-radius:var(--radius-lg);
font-weight:600;
font-size:1rem;
cursor:pointer;
transition:all var(--transition-fast);
}
.plan-cta:hover{background:var(--gradient-hover);
transform:translateY(-1px);
}
.plan-cta.featured{box-shadow:0 8px 24px rgba(59, 130, 246, 0.35);
}
.cta{padding:var(--space-20) 0;
background:linear-gradient(135deg, rgba(59, 130, 246, 0.04) 0%, rgba(236, 72, 153, 0.04) 100%);
text-align:center;
}
.cta-content h2{font-size:clamp(2rem, 3.5vw, 2.75rem);
font-weight:800;
color:var(--gray-900);
margin-bottom:var(--space-4);
}
.cta-content > p{font-size:1.125rem;
color:var(--gray-600);
margin-bottom:var(--space-8);
max-width:600px;
margin-left:auto;
margin-right:auto;
}
.cta-note{font-size:0.8rem;
color:var(--gray-500);
margin-top:var(--space-4);
}
.footer{background:var(--gray-900);
color:white;
padding:var(--space-16) 0 var(--space-8);
}
.footer-content{display:grid;
grid-template-columns:1fr 2fr;
gap:var(--space-16);
margin-bottom:var(--space-12);
}
.footer-brand{max-width:min(300px, 100%);
}
.footer-brand .logo-text,
.footer-brand .logo-ai{color:white;
}
.footer-brand p{color:var(--gray-400);
margin-top:var(--space-4);
line-height:1.6;
}
.footer-links{display:grid;
grid-template-columns:repeat(4, 1fr);
gap:var(--space-8);
}
.footer-column h4{font-weight:600;
margin-bottom:var(--space-4);
color:white;
}
.footer-column a{display:block;
color:var(--gray-400);
text-decoration:none;
margin-bottom:var(--space-2);
transition:color var(--transition-fast);
font-size:0.9rem;
}
.footer-column a:hover{color:white;
}
.footer-bottom{display:flex;
justify-content:space-between;
align-items:center;
padding-top:var(--space-8);
border-top:1px solid var(--gray-800);
}
.footer-bottom p{color:var(--gray-400);
font-size:0.9rem;
}
.social-links{display:flex;
gap:var(--space-4);
}
.social-links a{color:var(--gray-400);
transition:color var(--transition-fast);
}
.social-links a:hover{color:white;
}
.upgrade-modal{position:fixed;
top:0;
left:0;
right:0;
bottom:0;
z-index:10000;
display:flex;
align-items:center;
justify-content:center;
}
.modal-overlay{position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background:rgba(0, 0, 0, 0.5);
backdrop-filter:blur(8px);
-webkit-backdrop-filter:blur(8px);
}
.modal-content{background:white;
backdrop-filter:blur(24px);
-webkit-backdrop-filter:blur(24px);
border-radius:var(--radius-2xl);
padding:var(--space-8);
max-width:min(500px, 90vw);
width:90%;
position:relative;
z-index:1;
box-shadow:0 32px 64px rgba(0, 0, 0, 0.15);
}
.modal-close{position:absolute;
top:var(--space-4);
right:var(--space-4);
width:2rem;
height:2rem;
border:none;
background:rgba(0, 0, 0, 0.08);
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
transition:all var(--transition-fast);
color:var(--gray-600);
}
.modal-close:hover{background:rgba(0, 0, 0, 0.12);
transform:rotate(90deg);
}
.modal-header{text-align:center;
margin-bottom:var(--space-6);
}
.modal-icon{font-size:3rem;
margin-bottom:var(--space-4);
}
.modal-header h2{font-size:1.75rem;
font-weight:800;
color:var(--gray-900);
margin-bottom:var(--space-3);
}
.modal-header p{color:var(--gray-600);
font-size:1rem;
}
.modal-features{margin-bottom:var(--space-6);
}
.modal-feature{display:flex;
align-items:center;
gap:var(--space-3);
margin-bottom:var(--space-3);
}
.modal-feature svg{color:var(--success);
flex-shrink:0;
}
.modal-feature span{color:var(--gray-700);
font-weight:500;
}
.modal-cta{width:100%;
background:var(--gradient-primary) !important;
color:#ffffff !important;
border:none;
padding:var(--space-4) var(--space-6);
border-radius:var(--radius-lg);
font-weight:600;
font-size:1rem;
cursor:pointer;
transition:all var(--transition-normal);
margin-bottom:var(--space-3);
box-shadow:0 8px 24px rgba(59, 130, 246, 0.25);
text-shadow:0 1px 2px rgba(0, 0, 0, 0.1);
}
.modal-cta:hover{background:var(--gradient-hover) !important;
transform:translateY(-2px);
box-shadow:0 12px 32px rgba(59, 130, 246, 0.35);
}
.modal-note{text-align:center;
color:var(--gray-500);
font-size:0.8rem;
}
.sr-only{position:absolute;
width:1px;
height:1px;
padding:0;
margin:-1px;
overflow:hidden;
clip:rect(0, 0, 0, 0);
white-space:nowrap;
border:0;
}
.method-card:hover{transform:translateY(-4px);
box-shadow:0 8px 24px rgba(0, 0, 0, 0.1);
border-color:var(--primary-blue) !important;
}
.method-card h3{transition:color var(--transition-fast);
}
.method-card:hover h3{color:var(--primary-blue);
}