:root{--primary:#1d4ed8;--primary-dark:#1e3a8a;--primary-light:#eff6ff;--cta:#10b981;--cta-dark:#059669;--cta-light:#ecfdf5;--bg:#f8fafc;--white:#fff;--text:#1e293b;--text-muted:#64748b;--border:#e2e8f0;--border-dark:#cbd5e1;--radius:12px;--radius-lg:20px;--shadow:0 4px 24px #00000014;--shadow-lg:0 20px 50px #0000001f}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;font-size:16px;line-height:1.6}nav.site-nav{z-index:100;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);background:#ffffffe6;position:sticky;top:0}.nav-inner{justify-content:space-between;align-items:center;gap:24px;max-width:1100px;height:60px;margin:0 auto;padding:0 24px;display:flex}.nav-logo{color:var(--primary);align-items:center;gap:8px;font-size:20px;font-weight:800;text-decoration:none;display:flex}.nav-logo-icon{background:var(--primary);border-radius:8px;justify-content:center;align-items:center;width:28px;height:28px;display:flex}.nav-logo-icon svg{color:#fff}.nav-links{align-items:center;gap:4px;list-style:none;display:flex}.nav-links a{color:var(--text-muted);border-radius:8px;padding:6px 12px;font-size:14px;font-weight:500;text-decoration:none;transition:color .15s,background .15s}.nav-links a:hover{color:var(--primary);background:var(--primary-light)}.nav-links a.active{color:var(--primary);font-weight:600}.nav-cta{background:var(--cta);align-items:center;gap:6px;display:inline-flex;color:#fff!important;border-radius:10px!important;padding:8px 18px!important;font-size:14px!important;font-weight:700!important;transition:background .15s!important}.nav-cta:hover{background:var(--cta-dark)!important;color:#fff!important}.hero{text-align:center;background:linear-gradient(135deg,#eff6ff 0%,#f8fafc 50%,#ecfdf5 100%);padding:80px 24px 60px}.hero-badge{background:var(--primary-light);color:var(--primary);border:1px solid #bfdbfe;border-radius:100px;align-items:center;gap:6px;margin-bottom:24px;padding:4px 12px;font-size:12px;font-weight:600;display:inline-flex}.hero-badge-dot{background:var(--cta);border-radius:50%;width:6px;height:6px}.hero h1{color:var(--text);max-width:700px;margin:0 auto 20px;font-size:clamp(32px,5vw,56px);font-weight:800;line-height:1.15}.hero h1 span{color:var(--primary)}.hero-sub{color:var(--text-muted);max-width:520px;margin:0 auto 36px;font-size:18px;line-height:1.7}.hero-actions{flex-wrap:wrap;justify-content:center;gap:12px;margin-bottom:12px;display:flex}.btn-primary{background:var(--cta);color:#fff;border-radius:12px;align-items:center;gap:8px;padding:14px 28px;font-size:16px;font-weight:700;text-decoration:none;transition:background .15s,transform .1s;display:inline-flex;box-shadow:0 4px 12px #10b9814d}.btn-primary:hover{background:var(--cta-dark);transform:translateY(-1px)}.btn-secondary{color:var(--primary);border:1.5px solid var(--border-dark);background:#fff;border-radius:12px;align-items:center;gap:8px;padding:14px 28px;font-size:16px;font-weight:600;text-decoration:none;transition:border-color .15s,background .15s;display:inline-flex}.btn-secondary:hover{border-color:var(--primary);background:var(--primary-light)}.hero-footnote{color:#94a3b8;margin-top:8px;font-size:12px}.browser-frame{border:1px solid var(--border);box-shadow:var(--shadow-lg);border-radius:12px;overflow:hidden}.browser-bar{border-bottom:1px solid var(--border);background:#f1f5f9;align-items:center;gap:6px;padding:10px 14px;display:flex}.browser-dot{background:#e2e8f0;border-radius:50%;width:10px;height:10px}.browser-dot:first-child{background:#fca5a5}.browser-dot:nth-child(2){background:#fde68a}.browser-dot:nth-child(3){background:#86efac}.browser-url{color:#94a3b8;border:1px solid var(--border);background:#fff;border-radius:6px;flex:1;margin:0 10px;padding:4px 10px;font-size:11px}.browser-frame img{width:100%;height:auto;display:block}.section{padding:80px 24px}.section-white{background:#fff}.section-blue{background:linear-gradient(135deg,var(--primary)0%,var(--primary-dark)100%);color:#fff}.section-subtle{background:#f1f5f9}.container{max-width:1100px;margin:0 auto}.section-label{letter-spacing:1.5px;text-transform:uppercase;color:var(--primary);margin-bottom:12px;font-size:12px;font-weight:700;display:inline-block}.section-blue .section-label{color:#93c5fd}.section-title{margin-bottom:16px;font-size:clamp(24px,3.5vw,40px);font-weight:800;line-height:1.2}.section-sub{color:var(--text-muted);max-width:600px;font-size:17px;line-height:1.7}.text-center{text-align:center}.text-center .section-sub{margin:0 auto}.cards{gap:20px;display:grid}.cards-2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}.cards-3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}.cards-4{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.card{border:1px solid var(--border);border-radius:var(--radius-lg);background:#fff;padding:28px;transition:border-color .2s,box-shadow .2s,transform .2s}.card:hover{border-color:var(--border-dark);box-shadow:var(--shadow);transform:translateY(-2px)}.card-icon{background:var(--primary-light);width:44px;height:44px;color:var(--primary);border-radius:12px;justify-content:center;align-items:center;margin-bottom:16px;display:flex}.card h3{color:var(--text);margin-bottom:8px;font-size:17px;font-weight:700}.card p{color:var(--text-muted);font-size:14px;line-height:1.65}.card-link{color:var(--primary);align-items:center;gap:4px;margin-top:16px;font-size:13px;font-weight:600;text-decoration:none;display:inline-flex}.card-link:hover{text-decoration:underline}.steps{gap:48px;display:grid}.step{grid-template-columns:1fr 1fr;align-items:center;gap:60px;display:grid}.step.reverse{direction:rtl}.step.reverse>*{direction:ltr}.step-num{background:var(--primary);color:#fff;border-radius:50%;justify-content:center;align-items:center;width:36px;height:36px;margin-bottom:16px;font-size:16px;font-weight:800;display:inline-flex}.step h3{margin-bottom:12px;font-size:26px;font-weight:800}.step p{color:var(--text-muted);margin-bottom:12px;font-size:16px;line-height:1.7}.feature-hero{background:linear-gradient(135deg,var(--primary-light)0%,#f8fafc 100%);padding:60px 24px 40px}.breadcrumb{color:var(--text-muted);margin-bottom:20px;font-size:13px}.breadcrumb a{color:var(--primary);text-decoration:none}.breadcrumb a:hover{text-decoration:underline}.breadcrumb span{margin:0 6px}.pricing-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;display:grid}.pricing-card{border:1.5px solid var(--border);border-radius:var(--radius-lg);background:#fff;flex-direction:column;padding:28px 24px;transition:box-shadow .2s;display:flex}.pricing-card.highlight{border-color:var(--cta);box-shadow:0 0 0 4px #10b9811a}.pricing-label{letter-spacing:1px;text-transform:uppercase;color:var(--cta);min-height:20px;margin-bottom:8px;font-size:11px;font-weight:700}.pricing-name{margin-bottom:4px;font-size:18px;font-weight:700}.pricing-price{margin-bottom:4px;font-size:36px;font-weight:800;line-height:1}.pricing-period{color:var(--text-muted);margin-bottom:4px;font-size:12px}.pricing-annual{color:var(--cta);min-height:18px;margin-bottom:20px;font-size:12px;font-weight:600}.pricing-features{flex:1;margin-bottom:24px;list-style:none}.pricing-features li{color:var(--text-muted);align-items:flex-start;gap:8px;margin-bottom:10px;font-size:13px;display:flex}.check{width:14px;height:14px;color:var(--cta);flex-shrink:0;margin-top:2px}.btn-plan{text-align:center;border-radius:10px;padding:10px;font-size:14px;font-weight:700;text-decoration:none;transition:all .15s;display:block}.btn-plan-primary{background:var(--cta);color:#fff;box-shadow:0 2px 8px #10b9814d}.btn-plan-primary:hover{background:var(--cta-dark)}.btn-plan-outline{border:1.5px solid var(--border-dark);color:var(--primary)}.btn-plan-outline:hover{border-color:var(--primary);background:var(--primary-light)}.btn-plan-disabled{border:1.5px solid var(--border);color:#cbd5e1;cursor:not-allowed;background:#f8fafc}.story-block{border:1px solid var(--border);border-radius:var(--radius-lg);background:#fff;margin-bottom:32px;padding:32px}.story-time{letter-spacing:1.5px;text-transform:uppercase;color:var(--primary);margin-bottom:8px;font-size:11px;font-weight:700}.story-block h3{margin-bottom:12px;font-size:20px;font-weight:700}.story-block p{color:var(--text-muted);margin-bottom:12px;line-height:1.7}.cta-banner{background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;text-align:center;padding:80px 24px}.cta-banner h2{margin-bottom:16px;font-size:clamp(24px,4vw,40px);font-weight:800}.cta-banner p{opacity:.8;max-width:480px;margin-bottom:36px;margin-left:auto;margin-right:auto;font-size:17px}footer{border-top:1px solid var(--border);background:#fff;padding:40px 24px}.footer-inner{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:32px;max-width:1100px;margin:0 auto;display:flex}.footer-brand{color:var(--text);font-size:16px;font-weight:700}.footer-brand span{color:var(--text-muted);margin-left:8px;font-size:13px;font-weight:400}.footer-links{flex-wrap:wrap;gap:20px;list-style:none;display:flex}.footer-links a{color:var(--text-muted);font-size:13px;text-decoration:none;transition:color .15s}.footer-links a:hover{color:var(--primary)}.mt-4{margin-top:16px}.mt-6{margin-top:24px}.mt-8{margin-top:32px}.mt-12{margin-top:48px}.mb-4{margin-bottom:16px}.mb-6{margin-bottom:24px}.mb-8{margin-bottom:32px}.tag{background:var(--primary-light);color:var(--primary);border:1px solid #bfdbfe;border-radius:100px;align-items:center;gap:4px;padding:3px 10px;font-size:12px;font-weight:600;display:inline-flex}.tag-green{background:var(--cta-light);color:#065f46;border-color:#a7f3d0}.grid-2{grid-template-columns:1fr 1fr;align-items:center;gap:40px;display:grid}.grid-2-reverse{direction:rtl;grid-template-columns:1fr 1fr;align-items:center;gap:40px;display:grid}.grid-2-reverse>*{direction:ltr}.screenshot-caption{text-align:center;color:var(--text-muted);margin-top:12px;font-size:12px}.faq-item{border:1px solid var(--border);border-radius:var(--radius);background:#fff;margin-bottom:12px;padding:20px 24px;transition:border-color .15s}.faq-item:hover{border-color:var(--border-dark)}.faq-item h4{margin-bottom:8px;font-size:15px;font-weight:600}.faq-item p{color:var(--text-muted);font-size:14px;line-height:1.65}.feature-nav{border-top:1px solid var(--border);flex-wrap:wrap;gap:8px;margin-top:24px;padding-top:24px;display:flex}.feature-nav a{color:var(--primary);background:var(--primary-light);border-radius:8px;padding:6px 14px;font-size:13px;font-weight:600;text-decoration:none;transition:background .15s}.feature-nav a:hover{background:#bfdbfe}@media (max-width:768px){.nav-links{display:none}.step{grid-template-columns:1fr;gap:24px}.step.reverse{direction:ltr}.grid-2{grid-template-columns:1fr}.grid-2-reverse{direction:ltr;grid-template-columns:1fr}.hero h1{font-size:30px}.hero-sub{font-size:16px}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}.fade-in{animation:.5s ease-out both fadeInUp}.fade-in-2{animation:.5s ease-out .1s both fadeInUp}.fade-in-3{animation:.5s ease-out .2s both fadeInUp}@keyframes float{0%,to{transform:translateY(0)perspective(1200px)rotateX(2deg)}50%{transform:translateY(-6px)perspective(1200px)rotateX(2deg)}}.float-anim{animation:5s ease-in-out infinite float}
