.hero{background:linear-gradient(135deg,#f9fafb,#fff);padding:6rem 0 4rem;position:relative;overflow:hidden}.hero:before{content:"";position:absolute;top:-50%;right:-20%;width:100%;height:100%;background:radial-gradient(circle,rgba(124,58,237,.08) 0,transparent 70%);pointer-events:none}.hero-container{max-width:1280px;margin:0 auto;padding:0 1.5rem;display:grid;grid-template-columns:1fr 1fr;grid-gap:4rem;gap:4rem;align-items:center;position:relative;z-index:1}.hero-content{display:flex;flex-direction:column;gap:1.5rem}.hero-title{font-size:3.5rem;font-weight:800;line-height:1.1;color:var(--text-primary);margin:0;letter-spacing:-.02em}.hero-subtitle{font-size:1.25rem;line-height:1.6;color:var(--text-secondary);margin:0}.hero-actions{display:flex;gap:1rem;margin-top:1rem}.btn{display:inline-flex;align-items:center;justify-content:center;font-weight:600;text-decoration:none;border-radius:.5rem;transition:all .2s;border:none;cursor:pointer;font-family:inherit}.btn-large{padding:.875rem 2rem;font-size:1.0625rem}.btn-primary{background-color:var(--primary-color);color:#fff}.btn-primary:hover{background-color:var(--primary-hover);transform:translateY(-2px);box-shadow:0 10px 20px rgba(124,58,237,.2)}.btn-secondary{background-color:transparent;color:var(--text-primary);border:2px solid var(--border-color)}.btn-secondary:hover{border-color:var(--primary-color);background-color:rgba(124,58,237,.05)}.hero-note{color:var(--text-secondary);font-size:.9375rem;margin:0}.hero-visual{display:flex;align-items:center;justify-content:center}.code-preview{background-color:#1e1e1e;border-radius:.75rem;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.3);width:100%;max-width:550px}.code-preview-header{display:flex;align-items:center;gap:.5rem;padding:.875rem 1rem;background-color:#2d2d2d;border-bottom:1px solid #3d3d3d}.code-dot{width:12px;height:12px;border-radius:50%;background-color:#4d4d4d}.code-dot:first-child{background-color:#ff5f56}.code-dot:nth-child(2){background-color:#ffbd2e}.code-dot:nth-child(3){background-color:#27c93f}.code-filename{margin-left:auto;color:#b0b0b0;font-size:.8125rem;font-family:Courier New,monospace}.code-preview-content{margin:0;padding:1.5rem;font-family:Courier New,monospace;font-size:.875rem;line-height:1.7;color:#d4d4d4;overflow-x:auto}.code-keyword{color:#c586c0}.code-function{color:#dcdcaa}.code-string{color:#ce9178}@media (max-width:1024px){.hero-container{grid-template-columns:1fr;gap:3rem;text-align:center}.hero-content{align-items:center}.hero-title{font-size:2.75rem}.hero-subtitle{font-size:1.125rem}.hero-actions{justify-content:center}}@media (max-width:640px){.hero{padding:4rem 0 3rem}.hero-title{font-size:2rem}.hero-subtitle{font-size:1rem}.hero-actions{flex-direction:column;width:100%}.btn-large{width:100%}.code-preview-content{font-size:.75rem;padding:1rem}}.features-section{padding:6rem 0;background-color:var(--bg-primary)}.features-container{max-width:1280px;margin:0 auto;padding:0 1.5rem}.section-header{text-align:center;max-width:800px;margin:0 auto 4rem}.section-title{font-size:2.5rem;font-weight:700;color:var(--text-primary);margin:0 0 1rem;letter-spacing:-.01em}.section-subtitle{font-size:1.125rem;color:var(--text-secondary);margin:0;line-height:1.6}.features-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:2rem;gap:2rem}.feature-card{padding:2rem;background-color:var(--bg-secondary);border-radius:.75rem;border:1px solid var(--border-color);transition:transform .2s,box-shadow .2s}.feature-card:hover{transform:translateY(-4px);box-shadow:0 12px 24px rgba(0,0,0,.08);border-color:var(--primary-color)}.feature-icon{width:3rem;height:3rem;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--primary-color),var(--primary-hover));color:#fff;border-radius:.75rem;font-size:1.5rem;margin-bottom:1.5rem}.feature-title{font-size:1.25rem;font-weight:600;color:var(--text-primary);margin:0 0 .75rem}.feature-description{font-size:.9375rem;color:var(--text-secondary);line-height:1.6;margin:0}@media (max-width:1024px){.features-grid{grid-template-columns:repeat(2,1fr)}.section-title{font-size:2rem}}@media (max-width:640px){.features-section{padding:4rem 0}.section-header{margin-bottom:3rem}.section-title{font-size:1.75rem}.section-subtitle{font-size:1rem}.features-grid{grid-template-columns:1fr;gap:1.5rem}.feature-card{padding:1.5rem}}.how-it-works-section{padding:6rem 0;background:linear-gradient(180deg,var(--bg-primary) 0,var(--bg-secondary) 100%)}.how-it-works-container{max-width:1280px;margin:0 auto;padding:0 1.5rem}.steps-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-gap:2rem;gap:2rem;position:relative}.step-card{text-align:center;padding:2rem 1.5rem;background-color:var(--bg-primary);border-radius:.75rem;border:1px solid var(--border-color);position:relative;transition:transform .2s,box-shadow .2s}.step-card:hover{transform:translateY(-4px);box-shadow:0 12px 24px rgba(0,0,0,.08)}.step-number{width:4rem;height:4rem;margin:0 auto 1.5rem;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--primary-color),var(--primary-hover));color:#fff;font-size:1.75rem;font-weight:700;border-radius:1rem}.step-title{font-size:1.125rem;font-weight:600;color:var(--text-primary);margin:0 0 .75rem}.step-description{font-size:.9375rem;color:var(--text-secondary);line-height:1.6;margin:0}.step-arrow{position:absolute;top:50%;right:-2rem;transform:translateY(-50%);font-size:2rem;color:var(--primary-color);font-weight:300}.step-card:last-child .step-arrow{display:none}@media (max-width:1024px){.steps-grid{grid-template-columns:repeat(2,1fr)}.step-arrow{display:none}}@media (max-width:640px){.how-it-works-section{padding:4rem 0}.steps-grid{grid-template-columns:1fr;gap:1.5rem}.step-card{padding:1.5rem}.step-number{width:3.5rem;height:3.5rem;font-size:1.5rem}}