.hero{align-items:center;min-height:calc(100vh - 4rem);padding:4rem 0;display:flex;position:relative;overflow:hidden}.hero-background{background-image:radial-gradient(circle at 50% 0%,var(--bg-tertiary)0%,transparent 70%);opacity:.5;z-index:-1;position:absolute;inset:0}.hero-container{grid-template-columns:1fr;align-items:center;gap:4rem;display:grid}@media (min-width:1024px){.hero-container{grid-template-columns:1fr 1fr}}.hero-content{flex-direction:column;align-items:flex-start;gap:1.5rem;display:flex}.hero-badge{border-radius:var(--radius-full);background-color:var(--bg-secondary);border:1px solid var(--border-color);color:var(--text-secondary);align-items:center;gap:.5rem;padding:.375rem .75rem;font-size:.75rem;font-weight:600;display:inline-flex}.badge-pulse{background-color:var(--accent-color);width:6px;height:6px;box-shadow:0 0 10px var(--accent-color);border-radius:50%;animation:2s cubic-bezier(.4,0,.6,1) infinite pulse}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.hero-title{letter-spacing:-.05em;font-size:3rem;font-weight:800;line-height:1.1}@media (min-width:768px){.hero-title{font-size:4rem}}@media (min-width:1024px){.hero-title{font-size:4.5rem}}.hero-subtitle{color:var(--text-secondary);max-width:600px;font-size:1.125rem;line-height:1.6}.hero-actions{flex-wrap:wrap;gap:1rem;margin-top:1rem;display:flex}.btn-large{padding:1rem 2rem;font-size:1rem}.hero-visual{perspective:1000px;width:100%;position:relative}.app-mockup{aspect-ratio:16/10;border-radius:var(--radius-lg);width:100%;box-shadow:var(--shadow-lg);transition:transform var(--transition-normal);z-index:10;background:var(--bg-secondary);flex-direction:column;display:flex;position:relative;overflow:hidden;transform:rotateY(-5deg)rotateX(5deg)}.app-mockup:hover{transform:rotateY(0)rotateX(0)}.mockup-header{background-color:var(--bg-tertiary);border-bottom:1px solid var(--border-color);align-items:center;height:2rem;padding:0 1rem;display:flex}.mockup-dots{gap:.375rem;display:flex}.mockup-dots span{background-color:var(--text-tertiary);opacity:.5;border-radius:50%;width:8px;height:8px}.mockup-body{flex:1;display:flex}.mockup-sidebar{border-right:1px solid var(--border-color);background-color:#00000005;width:20%}.mockup-content{flex-direction:column;flex:1;gap:1rem;padding:1.5rem;display:flex}.mockup-card{border-radius:var(--radius-md);background-color:var(--bg-primary);border:1px solid var(--border-color);height:60%;box-shadow:var(--shadow-sm)}.mockup-stats{border-radius:var(--radius-md);background-color:var(--bg-tertiary);opacity:.5;height:20%}.glow-orb{filter:blur(80px);z-index:0;opacity:.4;border-radius:50%;position:absolute}.orb-1{background-color:var(--accent-color);width:300px;height:300px;top:-10%;right:-10%}.orb-2{background-color:#8b5cf6;width:250px;height:250px;bottom:-20%;left:20%}
.features-section{padding:6rem 0;position:relative}.features-header{text-align:center;max-width:800px;margin:0 auto 4rem}.section-title{letter-spacing:-.025em;margin-bottom:1rem;font-size:2.5rem;font-weight:800}@media (min-width:768px){.section-title{font-size:3rem}}.section-subtitle{color:var(--text-secondary);font-size:1.125rem}.features-grid{grid-template-columns:1fr;gap:2rem;display:grid}@media (min-width:768px){.features-grid{grid-template-columns:repeat(3,1fr)}}.feature-card{border-radius:var(--radius-lg);transition:transform var(--transition-normal),box-shadow var(--transition-normal);flex-direction:column;height:100%;padding:2.5rem 2rem;display:flex}.feature-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-8px)}.feature-icon-wrapper{border-radius:var(--radius-md);background-color:var(--bg-secondary);width:4rem;height:4rem;color:var(--accent-color);justify-content:center;align-items:center;margin-bottom:1.5rem;display:inline-flex}.feature-title{margin-bottom:1rem;font-size:1.25rem;font-weight:700}.feature-description{color:var(--text-secondary);line-height:1.6}.feature-card-footer{margin-top:auto;padding-top:1.5rem}.feature-link{color:var(--accent-color);transition:opacity var(--transition-fast),transform var(--transition-fast);align-items:center;gap:.5rem;font-size:.9375rem;font-weight:600;display:inline-flex}.feature-link:hover{opacity:.8;transform:translate(4px)}
.comparison-section{background-color:var(--bg-secondary);padding:6rem 0}.comparison-header{text-align:center;max-width:800px;margin:0 auto 4rem}.comparison-table-wrapper{grid-template-columns:1fr;gap:2rem;max-width:1000px;margin:0 auto;display:grid}@media (min-width:768px){.comparison-table-wrapper{grid-template-columns:1fr 1fr;align-items:center;gap:0}}.comparison-column{border-radius:var(--radius-lg);border:1px solid var(--border-color);padding:2.5rem 2rem}.legacy-column{background-color:var(--bg-primary)}@media (min-width:768px){.legacy-column{border-right:none;border-top-right-radius:0;border-bottom-right-radius:0}.primary-column{z-index:10;box-shadow:var(--shadow-lg);border-color:#3b82f64d;transform:scale(1.05)}}.column-header{border-bottom:1px solid var(--border-color);margin-bottom:2rem;padding-bottom:1.5rem}.column-title{margin-bottom:.5rem;font-size:1.5rem;font-weight:700}.column-subtitle{color:var(--text-secondary);font-size:.875rem}.feature-list{flex-direction:column;gap:1.25rem;display:flex}.feature-item{align-items:center;gap:1rem;font-size:.9375rem;display:flex}.opacity-50{opacity:.5}.highlighted-item{font-weight:500}.icon{flex-shrink:0}.text-tertiary{color:var(--text-tertiary)}.text-accent{color:var(--accent-color)}
.faq-section{background-color:var(--bg-primary);padding:6rem 0;position:relative}.faq-header{text-align:center;max-width:600px;margin:0 auto 4rem}.faq-list{border-radius:var(--radius-lg);max-width:800px;margin:0 auto;overflow:hidden}.faq-item{border-bottom:1px solid var(--border-color)}.faq-item:last-child{border-bottom:none}.faq-question{text-align:left;width:100%;color:var(--text-primary);cursor:pointer;transition:background-color var(--transition-fast);background:0 0;border:none;justify-content:space-between;align-items:center;padding:1.5rem;font-size:1.125rem;font-weight:600;display:flex}.faq-question:hover{background-color:#ffffff0d}@media (prefers-color-scheme:light){.faq-question:hover{background-color:#00000005}}.faq-icon{color:var(--text-tertiary);transition:transform var(--transition-normal);flex-shrink:0;margin-left:1rem}.faq-item.open .faq-icon{color:var(--accent-color)}.faq-answer-container{overflow:hidden}.faq-answer{color:var(--text-secondary);padding:0 1.5rem 1.5rem;line-height:1.6}
