:root{--color-sage-light: #F1F8F4;--color-sage-bg: #E8F5E9;--color-mint-muted: #C8E6C9;--color-cream: #FAFAFA;--color-white: #FFFFFF;--color-coral: #FFCCBC;--color-coral-hover: #FFAB91;--color-blue-gray: #B0BEC5;--color-text-primary: #2C3E50;--color-text-secondary: #607D8B;--color-text-subtle: #90A4AE;--spacing-xs: .5rem;--spacing-sm: 1rem;--spacing-md: 2rem;--spacing-lg: 4rem;--spacing-xl: 6rem;--spacing-xxl: 8rem;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-full: 9999px;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);--shadow-md: 0 4px 20px rgba(0, 0, 0, .05);--shadow-lg: 0 10px 30px rgba(0, 0, 0, .08);--transition-fast: .2s ease;--transition-normal: .3s ease}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;font-size:16px}body{font-family:Inter,sans-serif;background-color:var(--color-cream);color:var(--color-text-primary);line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}h1,h2,h3,h4,h5,h6{font-family:DM Sans,sans-serif;font-weight:700;line-height:1.2;color:var(--color-text-primary);margin-bottom:var(--spacing-sm)}p{margin-bottom:var(--spacing-sm);color:var(--color-text-secondary)}a{text-decoration:none;color:inherit;transition:var(--transition-fast)}ul{list-style:none}img{max-width:100%;display:block}.text-center{text-align:center}.text-gradient{background:linear-gradient(135deg,var(--color-text-primary),var(--color-text-secondary));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.container{width:100%;max-width:1200px;margin:0 auto;padding:0 var(--spacing-sm)}.section{padding:var(--spacing-xl) 0}.section-header{text-align:center;max-width:800px;margin:0 auto var(--spacing-lg)}.eyebrow{display:block;font-size:.875rem;text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-secondary);font-weight:600;margin-bottom:var(--spacing-xs)}.btn{display:inline-flex;align-items:center;justify-content:center;padding:.75rem 1.5rem;border-radius:var(--radius-full);font-weight:600;font-size:1rem;cursor:pointer;transition:transform var(--transition-fast),box-shadow var(--transition-fast);border:none}.btn:hover{transform:scale(1.02)}.btn-primary{background-color:var(--color-coral);color:var(--color-text-primary);box-shadow:var(--shadow-sm)}.btn-primary:hover{background-color:var(--color-coral-hover);box-shadow:var(--shadow-md)}.btn-outline{background-color:transparent;border:2px solid var(--color-coral);color:var(--color-text-primary)}.btn-outline:hover{background-color:#ffccbc1a}.btn-lg{padding:1rem 2rem;font-size:1.125rem}.navbar{position:sticky;top:0;z-index:1000;background-color:#fafafae6;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:var(--spacing-sm) 0;border-bottom:1px solid rgba(0,0,0,.03)}.nav-container{display:flex;justify-content:space-between;align-items:center}.logo{display:flex;align-items:center}.logo img{height:40px;width:auto;display:block}.nav-links{display:flex;gap:var(--spacing-md);align-items:center}.nav-link{font-weight:500;color:var(--color-text-secondary)}.nav-link:hover{color:var(--color-text-primary)}.hero{padding:var(--spacing-xl) 0 var(--spacing-xxl);background:linear-gradient(180deg,var(--color-cream) 0%,var(--color-sage-light) 100%);text-align:center}.hero-content{max-width:900px;margin:0 auto}.hero-title{font-size:3.5rem;margin-bottom:var(--spacing-sm);letter-spacing:-.02em}.hero-subtitle{font-size:1.5rem;font-weight:400;color:var(--color-text-secondary);margin-bottom:var(--spacing-sm)}.hero-text{font-size:1.125rem;color:var(--color-text-subtle);margin-bottom:var(--spacing-md)}.hero-actions{display:flex;gap:var(--spacing-sm);justify-content:center;margin-bottom:var(--spacing-lg)}.hero-visual{margin-top:var(--spacing-lg)}.code-window{width:100%;max-width:700px;margin:0 auto;border-radius:var(--radius-lg);overflow:hidden;position:relative;box-shadow:var(--shadow-lg),0 0 0 1px #fff3;background:#fff9;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);text-align:left;transition:transform var(--transition-normal)}.code-window:hover{transform:translateY(-5px)}.window-header{background:#fff6;padding:12px 20px;display:flex;align-items:center;border-bottom:1px solid rgba(0,0,0,.05)}.window-controls{display:flex;gap:8px}.control{width:12px;height:12px;border-radius:50%}.control.red{background-color:#ff5f56}.control.yellow{background-color:#ffbd2e}.control.green{background-color:#27c93f}.window-title{flex:1;text-align:center;font-family:Inter,monospace;font-size:.8rem;opacity:.7;font-size:.75rem;color:var(--color-text-secondary)}.window-body{display:flex;flex-direction:row;padding:0;position:relative;font-family:JetBrains Mono,Fira Code,monospace;font-size:.9rem;line-height:1.6;color:var(--color-text-primary)}.editor-sidebar{width:60px;flex-shrink:0;background:#0000000d;border-right:1px solid rgba(0,0,0,.08);display:flex;flex-direction:column;align-items:center;padding-top:20px;gap:20px;z-index:20}.sidebar-icon{color:var(--color-text-subtle);opacity:.6;cursor:pointer;transition:all .2s}.sidebar-icon i{width:24px;height:24px}.active-extension{opacity:1;animation:pulse-trigger 20s infinite}.editor-content{flex:1;padding:32px 32px 40px;position:relative;overflow:hidden}.cursor{position:absolute;top:100%;left:100%;z-index:100;filter:drop-shadow(0 2px 4px rgba(0,0,0,.2));animation:cursor-move 20s infinite}.editor-status-bar{position:absolute;bottom:0;left:0;width:100%;height:32px;background:var(--color-primary);display:flex;align-items:center;padding:0 16px;gap:16px;font-size:.75rem;color:#fff;z-index:20}.status-item{display:flex;align-items:center;gap:6px;opacity:.8}.build-status{margin-left:auto;padding:2px 8px;border-radius:4px;transition:all .3s;animation:build-status-anim 20s infinite}.scan-line{position:absolute;top:0;left:0;width:100%;height:4px;background:linear-gradient(90deg,transparent,var(--color-primary),transparent);box-shadow:0 0 15px var(--color-primary);opacity:0;z-index:10;animation:scan-code 20s infinite}.code-block{transition:all .5s ease}.bad-code{animation:fade-out-code 20s infinite}.good-code{position:absolute;top:100px;left:32px;opacity:0;animation:fade-in-code 20s infinite}.expert-badge{opacity:0;transform:translateY(20px);animation:slide-in-expert 20s infinite}.connection-badge{opacity:0;transform:translateY(20px);animation:connection-sequence 20s infinite;z-index:30}.connection-badge .badge-title:after{content:"Connecting...";animation:text-swap-title 20s infinite}.connection-badge .badge-subtitle:after{content:"Finding companion";animation:text-swap-subtitle 20s infinite}.connection-badge .badge-title,.connection-badge .badge-subtitle{font-size:0}.connection-badge .badge-title:after,.connection-badge .badge-subtitle:after{font-size:.875rem}.connection-badge .badge-subtitle:after{font-size:.75rem}.spin-icon{animation:spin 1s linear infinite;display:block}.check-icon{display:none}.connection-badge .badge-icon i{animation:icon-swap 20s infinite}.meter-badge{opacity:0;transform:translateY(20px);animation:slide-in-meter 20s infinite;position:absolute;bottom:50px;right:30px;background:#fff;padding:12px 16px;border-radius:12px;box-shadow:0 10px 40px #0000001a;display:flex;align-items:center;gap:12px;border:1px solid rgba(0,0,0,.05);z-index:30}@keyframes cursor-move{0%{top:110%;left:110%;opacity:1}10%{top:40px;left:30px;transform:scale(1)}12%{transform:scale(.8)}14%{transform:scale(1)}20%{top:110%;left:110%;opacity:0}to{top:110%;left:110%;opacity:0}}@keyframes pulse-trigger{0%,10%{transform:scale(1);filter:drop-shadow(0 0 0 transparent)}12%{transform:scale(.85)}15%{transform:scale(1.1);filter:drop-shadow(0 0 8px var(--color-coral))}20%{transform:scale(1);filter:drop-shadow(0 0 0 transparent)}}@keyframes scan-code{0%,15%{opacity:0;top:0}16%{opacity:1}25%{top:100%;opacity:1}26%,to{opacity:0;top:100%}}@keyframes connection-sequence{0%,14%{opacity:0;transform:translateY(20px)}15%,60%{opacity:1;transform:translateY(0)}65%,to{opacity:0;transform:translateY(-10px)}}@keyframes text-swap-title{0%,29%{content:"Connecting..."}30%,to{content:"Expert Connected"}}@keyframes text-swap-subtitle{0%,29%{content:"Finding companion"}30%,to{content:"Fixing your vibe..."}}@keyframes build-status-anim{0%,60%{background:transparent;color:#fff}61%,70%{background:#f59e0b;color:#fff}71%,to{background:#10b981;color:#fff}}.status-text:after{content:"Ready";animation:status-text-change 20s infinite}.status-text{font-size:0}.status-text:after{font-size:.75rem}@keyframes status-text-change{0%,60%{content:"Ready"}61%,70%{content:"Building..."}71%,to{content:"Build Passed"}}@keyframes slide-in-expert{0%,35%{opacity:0;transform:translateY(20px)}40%,65%{opacity:1;transform:translateY(0)}70%,to{opacity:0;transform:translateY(-10px)}}@keyframes fade-out-code{0%,40%{opacity:1}45%,to{opacity:0}}@keyframes fade-in-code{0%,40%{opacity:0}45%,to{opacity:1}}@keyframes slide-in-meter{0%,75%{opacity:0;transform:translateY(20px)}80%,95%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(20px)}}.code-line{min-height:1.5em}.indent{padding-left:20px}.double-indent{padding-left:40px}.keyword{color:#ba68c8}.function{color:#42a5f5}.string{color:#66bb6a}.comment{color:#90a4ae;font-style:italic}.component{color:#ffca28}.badge-icon{color:var(--color-coral)}.badge-content{display:flex;flex-direction:column}.badge-title{font-weight:700;font-size:.9rem;color:var(--color-text-primary)}.badge-subtitle{font-size:.75rem;color:var(--color-text-secondary)}.tech-tag{background-color:transparent;color:var(--color-text-primary)!important;padding:8px 12px;border-radius:0;font-family:DM Sans,sans-serif;font-size:1.1rem!important;font-weight:600;letter-spacing:-.01em;box-shadow:none;transition:all .2s ease;display:inline-flex;align-items:center;gap:10px;opacity:.8}.tech-tag img{width:28px;height:28px;object-fit:contain;opacity:1}.tech-tag:hover{transform:translateY(-2px);box-shadow:none;background-color:transparent;opacity:1}.link-arrow{font-weight:600;color:var(--color-text-primary);display:inline-flex;align-items:center;gap:4px;transition:gap .2s ease;text-decoration:none}.link-arrow:hover{gap:8px;color:var(--color-coral)}.no-judgment-badge{background-color:var(--color-sage-bg);padding:6px 12px;border-radius:20px;border:1px solid var(--color-mint-muted);color:var(--color-text-secondary);font-size:.85rem;font-weight:500;display:inline-flex;align-items:center;gap:6px}.problem-section{background-color:var(--color-white)}.problem-body{font-size:1.125rem;max-width:700px;margin:0 auto var(--spacing-md);color:var(--color-text-secondary)}.pain-points{display:flex;flex-direction:column;gap:var(--spacing-xs);max-width:600px;margin:0 auto;text-align:left}.pain-point{display:flex;align-items:center;gap:var(--spacing-sm);font-size:1.125rem;color:var(--color-text-primary)}.solution-section{background-color:#f8fbf9}.steps-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--spacing-md)}.step-card{background-color:var(--color-white);padding:var(--spacing-md);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);transition:transform var(--transition-normal);position:relative;overflow:hidden}.step-card:hover{transform:translateY(-5px)}.step-number{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;background-color:var(--color-coral);color:var(--color-text-primary);border-radius:50%;font-weight:700;margin-bottom:var(--spacing-sm);font-size:.875rem}.step-icon{margin-bottom:var(--spacing-sm);color:var(--color-text-secondary)}.stats-bar{margin-top:var(--spacing-lg);text-align:center;font-size:1rem;color:var(--color-text-secondary);padding:var(--spacing-sm);background-color:#ffffff80;border-radius:var(--radius-full);display:inline-block}.audience-section{background-color:var(--color-white)}.audience-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--spacing-md)}.audience-card{padding:var(--spacing-md);border-radius:var(--radius-lg);background-color:var(--color-sage-light);height:100%}.audience-card.accent-coral{background-color:#ffccbc33}.audience-card.accent-mint{background-color:#c8e6c933}.audience-card.accent-blue{background-color:#b0bec533}.audience-card h3{font-size:1.25rem;margin-bottom:var(--spacing-xs)}.testimonials-section{background-color:var(--color-sage-light)}.testimonials-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--spacing-md)}.testimonial-card{background-color:var(--color-white);padding:var(--spacing-md);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}.quote{font-style:italic;font-size:1.125rem;margin-bottom:var(--spacing-sm);color:var(--color-text-primary)}.author{display:flex;align-items:center;gap:var(--spacing-sm)}.author-info h4{font-size:1rem;margin-bottom:0}.author-info span{font-size:.875rem;color:var(--color-text-subtle)}.experts-section{background:linear-gradient(135deg,var(--color-cream),#FFF3E0)}.experts-layout{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-lg);align-items:center}.benefits-list{display:flex;flex-direction:column;gap:var(--spacing-sm)}.benefit-item{display:flex;align-items:center;gap:var(--spacing-sm);font-size:1.125rem}.expert-form-card{background-color:var(--color-white);padding:var(--spacing-md);border-radius:var(--radius-lg);box-shadow:var(--shadow-md)}.form-group{margin-bottom:var(--spacing-sm)}.form-input{width:100%;padding:.75rem;border:1px solid #E0E0E0;border-radius:var(--radius-sm);font-family:inherit;font-size:1rem}.pricing-section{background-color:var(--color-white)}.pricing-card{background-color:var(--color-white);padding:var(--spacing-lg);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);max-width:600px;margin:0 auto;text-align:center;border:1px solid rgba(0,0,0,.03)}.price-display{font-size:3rem;font-weight:700;color:var(--color-text-primary);margin-bottom:var(--spacing-sm)}.pricing-features{text-align:left;max-width:300px;margin:0 auto var(--spacing-md)}.pricing-feature{display:flex;align-items:center;gap:var(--spacing-sm);margin-bottom:var(--spacing-xs)}.faq-section{background-color:var(--color-sage-light)}.faq-container{max-width:800px;margin:0 auto}.faq-item{background-color:var(--color-white);border-radius:var(--radius-md);margin-bottom:var(--spacing-sm);overflow:hidden;box-shadow:var(--shadow-sm)}.faq-question{padding:1.25rem;width:100%;text-align:left;background:none;border:none;font-size:1.125rem;font-weight:600;color:var(--color-text-primary);cursor:pointer;display:flex;justify-content:space-between;align-items:center}.faq-answer{padding:0 1.25rem;max-height:0;overflow:hidden;transition:max-height .3s ease,padding .3s ease}.faq-item.active .faq-answer{padding-bottom:1.25rem;max-height:200px}.faq-icon{transition:transform .3s ease}.faq-item.active .faq-icon{transform:rotate(180deg)}.footer{background-color:var(--color-white);padding:var(--spacing-lg) 0 var(--spacing-md);border-top:1px solid rgba(0,0,0,.05)}.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:var(--spacing-lg);margin-bottom:var(--spacing-lg)}.footer-col h4{font-size:1rem;margin-bottom:var(--spacing-sm);color:var(--color-text-primary)}.footer-links-list{display:flex;flex-direction:column;gap:var(--spacing-xs)}.footer-links-list a{color:var(--color-text-secondary);font-size:.95rem}.footer-links-list a:hover{color:var(--color-text-primary)}.copyright{text-align:center;color:var(--color-text-subtle);font-size:.875rem;padding-top:var(--spacing-md);border-top:1px solid rgba(0,0,0,.05)}@media (max-width: 768px){:root{--spacing-xl: 4rem;--spacing-xxl: 5rem}.hero-title{font-size:2.5rem}.hero-actions{flex-direction:column}.steps-grid,.audience-grid,.testimonials-grid,.experts-layout,.footer-grid{grid-template-columns:1fr}.nav-links{display:none}.mobile-menu-btn{display:block}}.fade-in{opacity:0;transform:translateY(20px);transition:opacity .6s ease-out,transform .6s ease-out}.fade-in.visible{opacity:1;transform:translateY(0)}.tools-section{padding:var(--spacing-lg) 0;background-color:var(--color-white);border-bottom:1px solid rgba(0,0,0,.03)}.tools-grid{display:flex;justify-content:center;gap:var(--spacing-xl);flex-wrap:wrap;align-items:center;opacity:.7}.tool-item{font-family:DM Sans,sans-serif;font-weight:700;font-size:1.5rem;color:var(--color-text-secondary);display:flex;align-items:center;gap:.5rem}.tool-item:hover{color:var(--color-text-primary);transform:translateY(-2px);transition:var(--transition-fast)}@media (max-width: 768px){.tools-grid{gap:var(--spacing-md)}.tool-item{font-size:1.25rem}}
