.hero{min-height:90vh;padding:var(--space-16) 0;flex-direction:column;justify-content:center;display:flex;position:relative;overflow:hidden}.hero:before{content:"";pointer-events:none;background:radial-gradient(at 30% 20%,#2a5f4f08 0%,#0000 50%),radial-gradient(at 70% 80%,#4a8c7808 0%,#0000 50%);width:200%;height:200%;position:absolute;top:-50%;left:-50%}.hero-content{z-index:1;max-width:800px;margin:0 auto;position:relative}.hero-logo{margin-bottom:var(--space-8);justify-content:center;display:flex}.hero-title{margin-bottom:var(--space-6);line-height:1.1}.hero-subtitle{color:var(--text-muted);margin-bottom:var(--space-10);max-width:600px;margin-left:auto;margin-right:auto;font-size:clamp(1.1rem,2.5vw,1.35rem)}.hero-ctas{gap:var(--space-4);flex-direction:column;justify-content:center;align-items:center;display:flex}@media (width>=640px){.hero-ctas{flex-flow:wrap}}.hero-ctas-hint{color:var(--text-muted);margin-top:var(--space-2);font-size:.85rem}.mockup-section{padding:var(--space-12) 0 var(--space-24);overflow:hidden}.mockup-container{gap:var(--space-8);flex-direction:column;align-items:center;display:flex}@media (width>=1024px){.mockup-container{justify-content:center;gap:var(--space-12);flex-direction:row}}.mockup-wrapper{perspective:1000px;width:100%;max-width:560px}.mockup{background:var(--surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-xl);border:1px solid var(--border);transition:transform var(--transition);overflow:hidden;transform:rotateY(-5deg)rotateX(2deg)}.mockup:hover{transform:rotateY(-3deg)rotateX(1deg)translateY(-5px)}.mockup-header{align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-4);background:var(--bg);border-bottom:1px solid var(--border);display:flex}.mockup-dot{border-radius:50%;width:10px;height:10px}.mockup-dot.red{background:#ff5f56}.mockup-dot.yellow{background:#ffbd2e}.mockup-dot.green{background:#27c93f}.mockup-toolbar{align-items:center;gap:var(--space-4);padding:var(--space-3) var(--space-4);background:var(--surface);border-bottom:1px solid var(--border);display:flex}.mockup-toolbar-btn{border-radius:var(--radius-sm);background:var(--code-bg);width:24px;height:24px;color:var(--text-muted);justify-content:center;align-items:center;font-size:.75rem;display:flex}.mockup-content{height:320px;display:flex}.mockup-editor,.mockup-preview{padding:var(--space-4);flex:1;overflow:hidden}.mockup-editor{background:var(--surface);border-right:1px solid var(--border);font-family:var(--font-mono);color:var(--text-muted);font-size:.75rem;line-height:1.6}.mockup-preview{background:var(--bg);font-size:.8rem}.mockup-line{align-items:flex-start;gap:var(--space-2);margin-bottom:var(--space-2);display:flex}.mockup-line-number{color:var(--text-faint);text-align:right;-webkit-user-select:none;user-select:none;min-width:20px}.mockup-line-content{color:var(--text)}.mockup-line-content.heading{color:var(--accent);font-weight:600}.mockup-line-content.code{color:#d73a49}.mockup-preview h1{margin-bottom:var(--space-3);font-size:1.1rem}.mockup-preview p{margin-bottom:var(--space-3);color:var(--text-muted);font-size:.8rem}.mockup-preview pre{background:var(--code-bg);padding:var(--space-3);border-radius:var(--radius-sm);font-size:.7rem;overflow:hidden}.mockup-dark .mockup{background:#1e1c19;border-color:#2e2b27}.mockup-dark .mockup-header{background:#141210;border-color:#2e2b27}.mockup-dark .mockup-toolbar{background:#1e1c19;border-color:#2e2b27}.mockup-dark .mockup-toolbar-btn{background:#252320}.mockup-dark .mockup-editor{color:#8a8480;background:#1e1c19;border-color:#2e2b27}.mockup-dark .mockup-preview{background:#141210}.mockup-dark .mockup-line-number{color:#5a5550}.mockup-dark .mockup-line-content{color:#f0ece4}.mockup-dark .mockup-preview h1{color:#f5f2ed}.mockup-dark .mockup-preview p{color:#c9c4bc}.mockup-dark .mockup-preview pre{color:#a8c5b5;background:#252320}.features-section{background:var(--surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}.features-header{text-align:center;margin-bottom:var(--space-16)}.features-title{margin-bottom:var(--space-4)}.features-subtitle{max-width:500px;margin:0 auto;font-size:1.1rem}.features-grid{gap:var(--space-8);grid-template-columns:1fr;display:grid}@media (width>=768px){.features-grid{grid-template-columns:repeat(2,1fr)}}@media (width>=1024px){.features-grid{grid-template-columns:repeat(3,1fr)}}.feature-card{padding:var(--space-8);background:var(--bg);border-radius:var(--radius-lg);border:1px solid var(--border);transition:all var(--transition)}.feature-card:hover{box-shadow:var(--shadow-lg);border-color:var(--border-dark,#c8c2b8);transform:translateY(-4px)}.feature-icon{background:var(--accent-light);border-radius:var(--radius);width:48px;height:48px;margin-bottom:var(--space-6);justify-content:center;align-items:center;font-size:1.5rem;display:flex}.feature-title{margin-bottom:var(--space-3);color:var(--text);font-size:1.25rem}.feature-description{color:var(--text-muted);line-height:1.7}.cta-section{text-align:center}.cta-title{margin-bottom:var(--space-4)}.cta-subtitle{margin-bottom:var(--space-10);font-size:1.1rem}.cta-buttons{gap:var(--space-4);margin-bottom:var(--space-12);flex-direction:column;justify-content:center;align-items:center;display:flex}@media (width>=640px){.cta-buttons{flex-flow:wrap}}.cta-github{align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-6);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);transition:all var(--transition-fast);font-weight:500;display:inline-flex}.cta-github:hover{background:var(--bg);border-color:var(--border-dark,#c8c2b8);color:var(--text)}.cta-github svg{width:20px;height:20px}.cta-hint{color:var(--text-muted);margin-top:calc(-1 * var(--space-8));margin-bottom:var(--space-8);font-size:.85rem}.footer{padding:var(--space-12) 0;border-top:1px solid var(--border);background:var(--surface)}.footer-content{gap:var(--space-6);text-align:center;flex-direction:column;align-items:center;display:flex}@media (width>=768px){.footer-content{text-align:left;flex-direction:row;justify-content:space-between}}.footer-left{gap:var(--space-2);flex-direction:column;display:flex}.footer-copyright{color:var(--text-muted);font-size:.9rem}.footer-links{gap:var(--space-6);align-items:center;display:flex}.footer-link{color:var(--text-muted);font-size:.9rem}.footer-link:hover{color:var(--accent)}.scroll-indicator{bottom:var(--space-8);align-items:center;gap:var(--space-2);color:var(--text-faint);flex-direction:column;font-size:.8rem;animation:2s infinite bounce;display:flex;position:absolute;left:50%;transform:translate(-50%)}@keyframes bounce{0%,20%,50%,80%,to{transform:translate(-50%)translateY(0)}40%{transform:translate(-50%)translateY(-10px)}60%{transform:translate(-50%)translateY(-5px)}}:root{--bg:#f7f5f0;--surface:#fff;--surface-elevated:#fff;--border:#e2ddd5;--border-dark:#c9c2b8;--border-subtle:#ebe8e2;--text:#1a1814;--text-muted:#6b6560;--text-faint:#9b958f;--accent:#2a5f4f;--accent-hover:#1e4a3d;--accent-light:#e8f2ef;--code-bg:#f3f0eb;--shadow-sm:0 1px 2px #0000000a;--shadow:0 4px 12px #00000014;--shadow-lg:0 12px 40px #0000001f;--shadow-xl:0 24px 80px #00000029;--font-display:"Fraunces", Georgia, serif;--font-body:"DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;--font-mono:"DM Mono", "SF Mono", Monaco, monospace;--space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-6:1.5rem;--space-8:2rem;--space-12:3rem;--space-16:4rem;--space-20:5rem;--space-24:6rem;--space-32:8rem;--max-width:1200px;--content-width:720px;--radius-sm:6px;--radius:12px;--radius-lg:16px;--radius-xl:24px;--transition-fast:.15s ease;--transition:.3s ease;--transition-slow:.5s ease}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}body{font-family:var(--font-body);color:var(--text);background-color:var(--bg);font-size:16px;line-height:1.6}h1,h2,h3,h4,h5,h6{font-family:var(--font-display);letter-spacing:-.02em;font-weight:500;line-height:1.2}h1{font-size:clamp(2.5rem,6vw,4rem);font-weight:600}h2{font-size:clamp(1.75rem,4vw,2.5rem)}h3{font-size:clamp(1.25rem,2.5vw,1.5rem)}p{color:var(--text-muted);line-height:1.7}a{color:var(--accent);transition:color var(--transition-fast), box-shadow var(--transition-fast), outline-color var(--transition-fast);text-decoration:none}a:hover{color:var(--accent-hover)}a:focus-visible{color:var(--accent-hover);outline:2px solid var(--accent);outline-offset:3px;border-radius:var(--radius-sm)}a:focus:not(:focus-visible){box-shadow:none;outline:none}@supports not selector(:focus-visible){a:focus{color:var(--accent-hover);outline:2px solid var(--accent);outline-offset:3px;border-radius:var(--radius-sm)}}code{font-family:var(--font-mono);background-color:var(--code-bg);border-radius:var(--radius-sm);padding:.15em .4em;font-size:.9em}.container{width:100%;max-width:var(--max-width);padding:0 var(--space-6);margin:0 auto}@media (width>=768px){.container{padding:0 var(--space-8)}}@media (width>=1024px){.container{padding:0 var(--space-12)}}.section{padding:var(--space-20) 0}@media (width>=768px){.section{padding:var(--space-24) 0}}@media (width>=1024px){.section{padding:var(--space-32) 0}}.btn{justify-content:center;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-6);font-family:var(--font-body);border-radius:var(--radius);cursor:pointer;transition:background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast), outline-color var(--transition-fast);border:1px solid #0000;font-size:.95rem;font-weight:500;text-decoration:none;display:inline-flex}.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;box-shadow:0 0 0 3px #2a5f4f2e}.btn:focus:not(:focus-visible){box-shadow:none;outline:none}@supports not selector(:focus-visible){.btn:focus{outline:2px solid var(--accent);outline-offset:2px;box-shadow:0 0 0 3px #2a5f4f2e}}.btn-primary{background-color:var(--accent);color:#fff;border-color:var(--accent)}.btn-primary:hover{background-color:var(--accent-hover);border-color:var(--accent-hover);color:#fff;box-shadow:var(--shadow);transform:translateY(-1px)}.btn-secondary{background-color:var(--surface);color:var(--text);border-color:var(--border)}.btn-secondary:hover{background-color:var(--bg);border-color:var(--border-dark);color:var(--text)}.btn-code{background-color:var(--code-bg);color:var(--text);border-color:var(--border);font-family:var(--font-mono);font-size:.85rem}.btn-code:hover{background-color:var(--border-subtle);color:var(--text)}.btn-lg{padding:var(--space-4) var(--space-8);font-size:1rem}.logo{align-items:center;gap:var(--space-3);font-family:var(--font-display);color:var(--text);font-size:1.5rem;font-weight:600;display:inline-flex}.logo-icon{background:linear-gradient(135deg, var(--accent), var(--accent-mid,#4a8c78));border-radius:var(--radius);justify-content:center;align-items:center;width:32px;height:32px;font-size:1.1rem;display:flex}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.animate-fade-in{animation:.6s forwards fadeInUp}.animate-float{animation:4s ease-in-out infinite float}@media (prefers-reduced-motion:reduce){.animate-fade-in,.animate-float{animation:none;transform:none}}.text-center{text-align:center}.text-gradient{background:linear-gradient(135deg, var(--accent), var(--accent-mid,#4a8c78));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}