.landing{position:relative;overflow:hidden}.landing-header{z-index:var(--z-sticky);padding:var(--space-3) 0;position:fixed;top:0;left:0;right:0}.header-inner{justify-content:space-between;align-items:center;gap:var(--space-8);display:flex}.logo{align-items:center;gap:var(--space-3);font-family:var(--font-display);font-weight:800;font-size:var(--font-size-lg);color:var(--color-text);display:flex}.logo-mark{background:var(--color-accent);color:#fff;border-radius:var(--radius-md);width:32px;height:32px;font-family:var(--font-display);justify-content:center;align-items:center;font-size:16px;font-weight:900;display:flex}.logo-mark.small{width:26px;height:26px;font-size:13px}.logo-accent{color:var(--color-accent)}.header-nav{align-items:center;gap:var(--space-6);display:flex}.nav-link{font-size:var(--font-size-base);color:var(--color-text-secondary);transition:color var(--transition-fast);font-weight:500}.nav-link:hover{color:var(--color-text)}.header-actions{align-items:center;gap:var(--space-3);display:flex}.hero{z-index:var(--z-base);text-align:center;padding-top:140px;padding-bottom:60px;position:relative}.hero-content{animation:.8s ease-out fadeInUp}.hero-badge{margin-bottom:var(--space-8)}.badge-dot{background:var(--color-accent);border-radius:50%;width:6px;height:6px;display:inline-block}.hero-title{font-family:var(--font-display);font-size:var(--font-size-hero);color:var(--color-text);margin-bottom:var(--space-6);letter-spacing:-.03em;font-weight:900;line-height:1.05}.hero-subtitle{font-size:var(--font-size-lg);color:var(--color-text-secondary);max-width:520px;margin:0 auto var(--space-10);line-height:1.6}.hero-actions{justify-content:center;align-items:center;gap:var(--space-4);margin-bottom:var(--space-4);display:flex}.hero-note{font-size:var(--font-size-sm);color:var(--color-text-tertiary)}.hero-preview{margin-top:var(--space-16);animation:1s ease-out .2s both fadeInUp}.preview-window{border-radius:var(--radius-xl);border:1px solid var(--color-border);max-width:900px;box-shadow:var(--shadow-xl);margin:0 auto;overflow:hidden}.preview-titlebar{align-items:center;gap:var(--space-4);padding:var(--space-3) var(--space-4);background:var(--color-surface);border-bottom:1px solid var(--color-border);display:flex}.preview-dots{gap:6px;display:flex}.dot{border-radius:50%;width:10px;height:10px}.dot-red{background:#ff5f56}.dot-yellow{background:#ffbd2e}.dot-green{background:#27c93f}.preview-url{font-size:var(--font-size-xs);color:var(--color-text-tertiary);text-align:center;flex:1}.preview-body{background:var(--color-bg);padding:0}.preview-mock-editor{height:380px;display:flex}.mock-sidebar{background:var(--color-surface);border-right:1px solid var(--color-border);width:48px;padding:var(--space-3) 0;align-items:center;gap:var(--space-2);flex-direction:column;display:flex}.mock-sidebar-item{border-radius:var(--radius-md);width:32px;height:32px;color:var(--color-text-tertiary);transition:all var(--transition-fast);background:0 0;justify-content:center;align-items:center;font-size:10px;font-weight:700;display:flex}.mock-sidebar-item.active{background:var(--color-accent-subtle);color:var(--color-accent)}.mock-canvas{padding:var(--space-6);gap:var(--space-4);flex-direction:column;flex:1;display:flex;overflow:hidden}.mock-section{background:var(--color-surface);border-radius:var(--radius-lg);border:1px solid var(--color-border-subtle);padding:var(--space-6);align-items:center;gap:var(--space-3);flex-direction:column;display:flex}.mock-section.alt{background:var(--color-surface-2)}.mock-heading{border-radius:var(--radius-sm);width:200px;height:20px}.mock-heading.small{width:140px;height:16px}.mock-text{border-radius:var(--radius-sm);width:280px;height:12px}.mock-text.short{width:180px}.mock-button{border-radius:var(--radius-md);width:120px;height:32px;margin-top:var(--space-2)}.mock-grid{gap:var(--space-3);width:100%;display:flex}.mock-card{border-radius:var(--radius-md);flex:1;height:60px}.mock-properties{background:var(--color-surface);border-left:1px solid var(--color-border);width:180px;padding:var(--space-4);gap:var(--space-3);flex-direction:column;display:flex}.mock-prop-title{border-radius:var(--radius-sm);width:80px;height:14px}.mock-prop-field{border-radius:var(--radius-sm);width:100%;height:28px}.mock-prop-field.short{width:60%}.shimmer-bg{background:linear-gradient(90deg, var(--color-surface-2) 0%, var(--color-surface-3) 50%, var(--color-surface-2) 100%);background-size:200% 100%;animation:3s ease-in-out infinite shimmer}.features{z-index:var(--z-base);padding:var(--space-24) 0;position:relative}.section-header{text-align:center;margin-bottom:var(--space-16)}.section-title{font-family:var(--font-display);font-size:var(--font-size-4xl);color:var(--color-text);margin-top:var(--space-5);margin-bottom:var(--space-4);letter-spacing:-.02em;font-weight:800}.section-subtitle{font-size:var(--font-size-lg);color:var(--color-text-secondary);max-width:460px;margin:0 auto}.features-grid{gap:var(--space-6);grid-template-columns:repeat(3,1fr);display:grid}.feature-card{padding:var(--space-8);text-align:left}.feature-icon{margin-bottom:var(--space-5);border-radius:var(--radius-lg);background:var(--color-accent-subtle);width:48px;height:48px;color:var(--color-accent);justify-content:center;align-items:center;display:flex}.feature-title{font-size:var(--font-size-lg);color:var(--color-text);margin-bottom:var(--space-3);font-weight:700}.feature-desc{font-size:var(--font-size-base);color:var(--color-text-secondary);line-height:1.6}.templates-section{z-index:var(--z-base);padding:var(--space-24) 0;position:relative}.template-showcase{gap:var(--space-6);margin-bottom:var(--space-12);grid-template-columns:repeat(4,1fr);display:grid}.template-card{cursor:pointer;overflow:hidden}.template-preview{height:260px;padding:var(--space-6);justify-content:center;align-items:center;gap:var(--space-2);flex-direction:column;display:flex;position:relative;overflow:hidden}.template-preview-1{background:linear-gradient(#f8f6f1 0%,#efede6 100%)}.template-preview-2{background:linear-gradient(#1a1a1a 0%,#2a2a2a 100%)}.template-preview-3{background:linear-gradient(#efede6 0%,#e8e5dd 100%)}.template-preview-4{background:linear-gradient(#cd0000 0%,#8b0000 100%)}.tp-avatar{background:var(--color-accent);color:#fff;width:48px;height:48px;margin-bottom:var(--space-2);border-radius:50%;justify-content:center;align-items:center;font-size:16px;font-weight:800;display:flex}.tp-title{font-size:var(--font-size-lg);color:#1a1a1a;font-weight:800}.tp-title.large{font-size:var(--font-size-xl)}.template-preview-2 .tp-title,.template-preview-4 .tp-title{color:#fff}.tp-subtitle{font-size:var(--font-size-xs);color:#888}.template-preview-2 .tp-subtitle{color:#999}.template-preview-4 .tp-subtitle{color:#ffffffb3}.tp-label{color:var(--color-accent);letter-spacing:.1em;text-transform:uppercase;font-size:10px;font-weight:700}.tp-label.small{letter-spacing:.15em;color:var(--color-accent);font-size:9px}.template-preview-2 .tp-label{color:#cd0000}.tp-btn-mock{margin-top:var(--space-3);border-radius:var(--radius-full);background:var(--color-bg);color:#1a1a1a;border:1px solid var(--color-border);padding:6px 20px;font-size:11px;font-weight:700}.tp-btn-mock.accent{background:var(--color-accent);border-color:var(--color-accent);color:#fff}.tp-btn-mock.dark{color:#fff;background:#1a1a1a;border-color:#1a1a1a}.tp-input-mock{border-radius:var(--radius-md);color:#fff9;text-align:center;background:#ffffff26;border:1px solid #fff3;width:75%;padding:6px 12px;font-size:10px}.template-info{padding:var(--space-4) var(--space-5);border-top:1px solid var(--color-border-subtle)}.template-info h3{font-size:var(--font-size-base);color:var(--color-text);margin-bottom:2px;font-weight:700}.template-info p{font-size:var(--font-size-sm);color:var(--color-text-tertiary)}.templates-cta{text-align:center}.how-it-works{z-index:var(--z-base);padding:var(--space-24) 0;position:relative}.steps{justify-content:center;align-items:flex-start;gap:var(--space-8);max-width:900px;margin:0 auto;display:flex}.step{text-align:center;flex:1}.step-number{font-family:var(--font-display);font-size:var(--font-size-4xl);color:var(--color-accent);margin-bottom:var(--space-4);font-weight:900}.step-connector{flex-shrink:0;padding-top:36px}.step-title{font-size:var(--font-size-lg);color:var(--color-text);margin-bottom:var(--space-3);font-weight:700}.step-desc{font-size:var(--font-size-base);color:var(--color-text-secondary);line-height:1.6}.final-cta{z-index:var(--z-base);padding:var(--space-24) 0 var(--space-20);position:relative}.cta-card{text-align:center;padding:var(--space-20) var(--space-8);border-radius:var(--radius-2xl);background:var(--color-bg-card);border:1px solid var(--color-border);box-shadow:var(--shadow-lg)}.cta-title{font-family:var(--font-display);font-size:var(--font-size-3xl);color:var(--color-text);margin-bottom:var(--space-4);font-weight:800}.cta-subtitle{font-size:var(--font-size-lg);color:var(--color-text-secondary);margin-bottom:var(--space-8)}.landing-footer{z-index:var(--z-base);padding:var(--space-8) 0;border-top:1px solid var(--color-border-subtle);position:relative}.footer-inner{justify-content:space-between;align-items:center;display:flex}.footer-brand{align-items:center;gap:var(--space-2);display:flex}.footer-brand-text{font-family:var(--font-display);font-weight:700;font-size:var(--font-size-base);color:var(--color-text)}.footer-links{gap:var(--space-6);display:flex}.footer-links a{font-size:var(--font-size-sm);color:var(--color-text-secondary);transition:color var(--transition-fast)}.footer-links a:hover{color:var(--color-text)}.footer-copy{font-size:var(--font-size-sm);color:var(--color-text-tertiary)}@media (max-width:1024px){.features-grid,.template-showcase{grid-template-columns:repeat(2,1fr)}}@media (max-width:768px){.hero-title{font-size:clamp(2.2rem,7vw,3.5rem)}.header-nav{display:none}.features-grid,.template-showcase{grid-template-columns:1fr}.steps{gap:var(--space-6);flex-direction:column}.step-connector{display:none}.hero-actions{flex-direction:column}.footer-inner{gap:var(--space-4);text-align:center;flex-direction:column}.preview-mock-editor{height:250px}.mock-properties{display:none}.mock-sidebar{width:36px}.section-title{font-size:var(--font-size-3xl)}}