.header{background-color:#fff;box-shadow:0 1px 3px #0000001a;position:sticky;top:0;z-index:100}.nav{display:flex;align-items:center;justify-content:space-between;padding:16px 0}.logo{display:flex;align-items:center;gap:8px;font-weight:700;font-size:1.2rem;color:#1a1a1a}.nav-links{display:flex;gap:32px}.nav-links a{text-decoration:none;color:#666;font-weight:500;transition:color .3s ease}.nav-links a:hover{color:#10b981}.nav-actions{display:flex;gap:16px;align-items:center}@media (max-width: 768px){.nav-links{display:none}.nav-actions{gap:8px}.nav-actions .btn{padding:8px 16px;font-size:.9rem}}.hero{padding:100px 0;background:linear-gradient(135deg,#f0fdfa 0%,#ecfdf5 100%)}.hero-content{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}.hero-title{font-size:3.5rem;font-weight:800;line-height:1.1;color:#1a1a1a;margin-bottom:24px}.hero-subtitle{font-size:1.2rem;color:#666;margin-bottom:40px;line-height:1.6}.hero-actions{display:flex;gap:20px;align-items:center}.hero-actions .btn{display:flex;align-items:center;padding:16px 32px;font-size:1.1rem}.hero-image{display:flex;justify-content:center;align-items:center}.phone-mockup{position:relative}.phone-frame{width:280px;height:560px;background:linear-gradient(145deg,#ff6b6b,#ffa8a8);border-radius:40px;padding:8px;box-shadow:0 20px 40px #00000026}.phone-screen{width:100%;height:100%;background:white;border-radius:32px;overflow:hidden;position:relative}.app-interface{height:100%;display:flex;flex-direction:column}.status-bar{display:flex;justify-content:space-between;align-items:center;padding:12px 20px;font-size:.9rem;font-weight:600}.app-nav{padding:16px 20px;border-bottom:1px solid #f0f0f0}.app-nav h3{font-size:1.3rem;font-weight:700;color:#1a1a1a}.app-content{flex:1;padding:20px}.class-item{padding:16px;background:#f8f9fa;border-radius:12px;margin-bottom:12px;border-left:4px solid #10b981}.class-item h4{font-size:1.1rem;font-weight:600;color:#1a1a1a;margin-bottom:4px}.class-item p{color:#666;font-size:.9rem}@media (max-width: 768px){.hero{padding:60px 0}.hero-content{grid-template-columns:1fr;gap:40px;text-align:center}.hero-title{font-size:2.5rem}.hero-actions{justify-content:center;flex-wrap:wrap}.phone-frame{width:240px;height:480px}}.features{background-color:#fff}.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:40px}.feature-card{background:white;border-radius:16px;overflow:hidden;box-shadow:0 4px 20px #00000014;transition:transform .3s ease,box-shadow .3s ease}.feature-card:hover{transform:translateY(-8px);box-shadow:0 8px 30px #0000001f}.feature-image{height:200px;overflow:hidden}.feature-image img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}.feature-card:hover .feature-image img{transform:scale(1.05)}.feature-content{padding:30px}.feature-content h3{font-size:1.4rem;font-weight:700;color:#1a1a1a;margin-bottom:12px}.feature-content p{color:#666;line-height:1.6}@media (max-width: 768px){.features-grid{grid-template-columns:1fr;gap:30px}.feature-card{margin:0 10px}}.teacher-features{background:linear-gradient(135deg,#f8fafc 0%,#f1f5f9 100%)}.teacher-features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:30px}.teacher-feature-card{background:white;padding:30px;border-radius:16px;box-shadow:0 2px 10px #0000000d;transition:all .3s ease;border:1px solid #e2e8f0}.teacher-feature-card:hover{transform:translateY(-4px);box-shadow:0 8px 25px #0000001a;border-color:#10b981}.feature-icon{width:60px;height:60px;background:linear-gradient(135deg,#10b981,#059669);border-radius:12px;display:flex;align-items:center;justify-content:center;color:#fff;margin-bottom:20px}.feature-info h3{font-size:1.3rem;font-weight:700;color:#1a1a1a;margin-bottom:12px}.feature-info p{color:#666;line-height:1.6}@media (max-width: 768px){.teacher-features-grid{grid-template-columns:1fr;gap:20px}.teacher-feature-card{padding:24px}}.steps{background-color:#fff}.steps-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:40px}.step-card{text-align:center;padding:40px 20px;position:relative}.step-number{width:80px;height:80px;background:linear-gradient(135deg,#10b981,#059669);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:2rem;font-weight:700;margin:0 auto 24px;box-shadow:0 4px 20px #10b9814d}.step-title{font-size:1.5rem;font-weight:700;color:#1a1a1a;margin-bottom:16px}.step-description{color:#666;line-height:1.6;max-width:280px;margin:0 auto}.step-card:after{content:"";position:absolute;top:40px;right:-20px;width:40px;height:2px;background:linear-gradient(90deg,#10b981,transparent)}.step-card:last-child:after{display:none}@media (max-width: 768px){.steps-grid{grid-template-columns:1fr;gap:30px}.step-card:after{display:none}}.pricing{background:linear-gradient(135deg,#f8fafc 0%,#f1f5f9 100%)}.pricing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:40px;max-width:800px;margin:0 auto}.pricing-card{background:white;border-radius:20px;padding:40px;box-shadow:0 4px 20px #00000014;position:relative;transition:all .3s ease;border:2px solid transparent}.pricing-card:hover{transform:translateY(-8px);box-shadow:0 8px 30px #0000001f}.pricing-card.popular{border-color:#10b981;transform:scale(1.05);background:linear-gradient(135deg,#1e293b 0%,#334155 100%);color:#fff}.popular-badge{position:absolute;top:-12px;left:50%;transform:translate(-50%);background:#10b981;color:#fff;padding:8px 24px;border-radius:20px;font-size:.9rem;font-weight:600}.pricing-header{text-align:center;margin-bottom:40px}.plan-name{font-size:1.5rem;font-weight:700;margin-bottom:16px}.pricing-card.popular .plan-name{color:#fff}.plan-price{display:flex;align-items:baseline;justify-content:center;gap:8px}.price{font-size:3rem;font-weight:800;color:#10b981}.pricing-card.popular .price{color:#10b981}.period{color:#666;font-size:1rem}.pricing-card.popular .period{color:#cbd5e1}.pricing-features{margin-bottom:40px}.pricing-features ul{list-style:none}.pricing-features li{display:flex;align-items:center;gap:12px;margin-bottom:16px;color:#666}.pricing-card.popular .pricing-features li{color:#e2e8f0}.pricing-features svg{color:#10b981;flex-shrink:0}.pricing-action{text-align:center}.pricing-action .btn{width:100%;padding:16px;font-size:1.1rem;font-weight:600}@media (max-width: 768px){.pricing-grid{grid-template-columns:1fr;gap:30px}.pricing-card.popular{transform:none}.pricing-card{padding:30px}}.big-names{background-color:#fff}.big-names-content{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}.big-names-text p{font-size:1.1rem;line-height:1.7;color:#666;margin-bottom:30px}.big-names-features{display:flex;flex-direction:column;gap:16px}.feature-item{display:flex;align-items:center;gap:12px;color:#1a1a1a;font-weight:600}.feature-item svg{color:#10b981}.big-names-visual{display:flex;justify-content:center}.app-showcase{perspective:1000px}.app-window{width:400px;height:300px;background:#1e293b;border-radius:12px;overflow:hidden;box-shadow:0 20px 40px #0003;transform:rotateY(-15deg) rotateX(10deg);transition:transform .3s ease}.app-window:hover{transform:rotateY(-10deg) rotateX(5deg)}.window-header{background:#334155;padding:12px 16px;display:flex;align-items:center;gap:12px}.window-controls{display:flex;gap:6px}.window-controls span{width:12px;height:12px;border-radius:50%;background:#ef4444}.window-controls span:nth-child(2){background:#f59e0b}.window-controls span:nth-child(3){background:#10b981}.window-title{color:#fff;font-weight:600;font-size:.9rem}.window-content{padding:30px;height:calc(100% - 48px)}.app-interface-preview{background:white;border-radius:8px;padding:24px;height:100%}.preview-header h3{font-size:1.3rem;font-weight:700;color:#1a1a1a;margin-bottom:4px}.preview-header p{color:#666;font-size:.9rem;margin-bottom:20px}.preview-features{display:flex;flex-direction:column;gap:12px}.preview-item{background:#f8f9fa;padding:12px 16px;border-radius:8px;border-left:4px solid #10b981;font-weight:500;color:#1a1a1a}@media (max-width: 768px){.big-names-content{grid-template-columns:1fr;gap:40px}.app-window{width:320px;height:240px;transform:none}.app-window:hover{transform:none}}.faq{background:linear-gradient(135deg,#f8fafc 0%,#f1f5f9 100%)}.faq-list{max-width:800px;margin:0 auto}.faq-item{background:white;border-radius:12px;margin-bottom:16px;box-shadow:0 2px 8px #0000000d;overflow:hidden;transition:all .3s ease}.faq-item:hover{box-shadow:0 4px 16px #0000001a}.faq-question{width:100%;padding:24px;background:none;border:none;text-align:left;font-size:1.1rem;font-weight:600;color:#1a1a1a;cursor:pointer;display:flex;justify-content:space-between;align-items:center;transition:all .3s ease}.faq-question:hover{color:#10b981}.faq-icon{color:#666;transition:transform .3s ease}.faq-item.open .faq-icon{transform:rotate(180deg);color:#10b981}.faq-answer{max-height:0;overflow:hidden;transition:max-height .3s ease}.faq-item.open .faq-answer{max-height:200px}.faq-answer p{padding:0 24px 24px;color:#666;line-height:1.6;margin:0}@media (max-width: 768px){.faq-question{padding:20px;font-size:1rem}.faq-answer p{padding:0 20px 20px}}.cta{background:linear-gradient(135deg,#10b981 0%,#059669 100%);color:#fff;padding:80px 0}.cta-content{text-align:center;max-width:800px;margin:0 auto}.cta-title{font-size:3rem;font-weight:800;margin-bottom:20px;line-height:1.2}.cta-subtitle{font-size:1.2rem;margin-bottom:40px;opacity:.9;line-height:1.6}.cta-actions{display:flex;gap:20px;justify-content:center;align-items:center;flex-wrap:wrap}.cta-btn{display:flex;align-items:center;padding:16px 32px;font-size:1.1rem;font-weight:600;border-radius:12px;transition:all .3s ease}.cta-actions .btn-primary{background-color:#fff;color:#10b981}.cta-actions .btn-primary:hover{background-color:#f0f9ff;transform:translateY(-2px);box-shadow:0 8px 25px #00000026}.cta-actions .btn-secondary{background-color:transparent;color:#fff;border:2px solid white}.cta-actions .btn-secondary:hover{background-color:#fff;color:#10b981}@media (max-width: 768px){.cta{padding:60px 0}.cta-title{font-size:2.2rem}.cta-actions{flex-direction:column;gap:16px}.cta-btn{width:100%;max-width:300px;justify-content:center}}.footer{background-color:#1a1a1a;color:#fff;padding:60px 0 20px}.footer-content{display:grid;grid-template-columns:1fr 2fr;gap:60px;margin-bottom:40px}.footer-brand{max-width:400px}.footer-logo{display:flex;align-items:center;gap:8px;font-weight:700;font-size:1.3rem;margin-bottom:16px}.footer-description{color:#ccc;line-height:1.6}.footer-links{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}.footer-section h4{font-size:1.1rem;font-weight:600;margin-bottom:16px;color:#fff}.footer-section ul{list-style:none}.footer-section li{margin-bottom:12px}.footer-section a{color:#ccc;text-decoration:none;transition:color .3s ease}.footer-section a:hover{color:#10b981}.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:20px;border-top:1px solid #333;color:#ccc}.footer-social{display:flex;gap:16px}.footer-social a{color:#ccc;transition:color .3s ease}.footer-social a:hover{color:#10b981}@media (max-width: 768px){.footer-content{grid-template-columns:1fr;gap:40px}.footer-links{grid-template-columns:1fr;gap:30px}.footer-bottom{flex-direction:column;gap:20px;text-align:center}}.App{min-height:100vh;background-color:#f8fffe}.container{max-width:1200px;margin:0 auto;padding:0 20px}.section{padding:80px 0}.section-title{font-size:2.5rem;font-weight:700;text-align:center;margin-bottom:20px;color:#1a1a1a}.section-subtitle{font-size:1.1rem;text-align:center;color:#666;margin-bottom:60px;max-width:600px;margin-left:auto;margin-right:auto}.btn{padding:12px 24px;border-radius:8px;font-weight:600;text-decoration:none;display:inline-block;transition:all .3s ease;border:none;cursor:pointer;font-size:1rem}.btn-primary{background-color:#10b981;color:#fff}.btn-primary:hover{background-color:#059669;transform:translateY(-2px)}.btn-secondary{background-color:transparent;color:#10b981;border:2px solid #10b981}.btn-secondary:hover{background-color:#10b981;color:#fff}@media (max-width: 768px){.section{padding:60px 0}.section-title{font-size:2rem}.container{padding:0 15px}}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:1.6;color:#333}#root{max-width:768px;margin:0 auto}@media (min-width: 769px){#root{max-width:1200px}}