:root{--espresso: #3E2723;--dark-roast: #4E342E;--mocha: #5D4037;--coffee: #6D4C41;--latte: #A1887F;--cream: #D7CCC8;--milk: #EFEBE9;--warm-white: #FFF8E1;--caramel: #FF8F00;--golden: #FFA000;font-family:Georgia,Times New Roman,serif;line-height:1.6;font-weight:400;color:var(--espresso);background:linear-gradient(135deg,var(--warm-white) 0%,var(--cream) 100%);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:var(--mocha);text-decoration:none;border-bottom:2px solid var(--caramel);transition:all .3s ease}a:hover{color:var(--caramel);border-bottom-color:var(--golden)}body{margin:0;min-width:320px;min-height:100vh;background:var(--warm-white)}#root{min-height:100vh}h1{font-size:3.2em;line-height:1.1;color:var(--dark-roast);font-weight:700}h2{font-size:1.8em;color:var(--mocha);font-weight:600}button{border-radius:30px;border:none;padding:.8em 2em;font-size:1em;font-weight:600;font-family:inherit;background:linear-gradient(135deg,var(--coffee) 0%,var(--mocha) 100%);color:var(--warm-white);cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px #3e27234d}button:hover{transform:translateY(-2px);box-shadow:0 6px 20px #3e272366;background:linear-gradient(135deg,var(--mocha) 0%,var(--dark-roast) 100%)}button:focus,button:focus-visible{outline:3px solid var(--caramel);outline-offset:2px}button:active{transform:translateY(0)}.navbar{background:linear-gradient(135deg,var(--dark-roast) 0%,var(--espresso) 100%);padding:1rem 2rem;position:sticky;top:0;z-index:1000;box-shadow:0 2px 10px #3e27234d}.nav-container{max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;align-items:center}.nav-logo{display:flex;align-items:center;gap:.75rem;text-decoration:none;border:none}.nav-logo .logo-svg{flex-shrink:0}.logo-text{font-size:1.4rem;font-weight:700;color:var(--warm-white)}.nav-menu{display:flex;list-style:none;margin:0;padding:0;gap:.5rem}.nav-link{color:var(--cream);text-decoration:none;padding:.6rem 1.2rem;border-radius:20px;transition:all .3s ease;border:none;font-weight:500}.nav-link:hover{background:#ffffff1a;color:var(--warm-white)}.nav-link.active{background:var(--caramel);color:var(--espresso)}@media(max-width:768px){.nav-container{flex-direction:column;gap:1rem}.nav-menu{flex-wrap:wrap;justify-content:center}}.home{width:100%}.hero-section{display:flex;align-items:center;justify-content:space-between;padding:4rem 2rem;max-width:1200px;margin:0 auto;gap:3rem}.hero-content{flex:1}.hero-content h1{font-size:3rem;line-height:1.2;margin-bottom:1.5rem}.hero-tagline{font-size:1.3rem;color:var(--coffee);margin-bottom:2rem;line-height:1.6}.hero-buttons{display:flex;gap:1rem;flex-wrap:wrap}.btn{display:inline-block;padding:1rem 2rem;border-radius:30px;text-decoration:none;font-weight:600;transition:all .3s ease;border:none}.btn-primary{background:linear-gradient(135deg,var(--coffee) 0%,var(--mocha) 100%);color:var(--warm-white);box-shadow:0 4px 15px #3e27234d}.btn-secondary{background:transparent;color:var(--mocha);border:2px solid var(--mocha)}.btn-secondary:hover{background:var(--mocha);color:var(--warm-white)}.hero-visual{flex:1;display:flex;justify-content:center}.hero-visual .story-image{max-width:100%;height:auto;border-radius:16px;box-shadow:0 8px 30px #3e272333;object-fit:cover}.image-placeholder{background:linear-gradient(135deg,var(--cream) 0%,var(--milk) 100%);border:3px dashed var(--latte);border-radius:16px;padding:2rem;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:200px}.image-placeholder.hero-image{min-width:300px;min-height:250px;background:linear-gradient(135deg,var(--dark-roast) 0%,var(--espresso) 100%);border:none}.image-placeholder.hero-image p{color:var(--cream)}.placeholder-icon{font-size:3rem;margin-bottom:1rem;display:block}.image-placeholder p{color:var(--coffee);font-style:italic;font-size:.95rem;margin:0;max-width:250px}.story-section{padding:5rem 2rem}.section-content{max-width:800px;margin:0 auto;text-align:center}.story-section h2{font-size:2.2rem;margin-bottom:1.5rem}.story-text{font-size:1.2rem;line-height:1.8;color:var(--coffee);margin-bottom:1.5rem}.story-text strong{color:var(--dark-roast)}.highlight-text{color:var(--dark-roast);font-weight:600;font-size:1.3rem}.customer-reasons{list-style:none;padding:0;margin:2rem auto;max-width:400px;text-align:left}.customer-reasons li{padding:.8rem 0 .8rem 2rem;position:relative;color:var(--coffee);font-size:1.1rem;border-bottom:1px solid var(--cream)}.customer-reasons li:last-child{border-bottom:none}.customer-reasons li:before{content:"☕";position:absolute;left:0;font-size:1rem}.section-content-with-image{display:flex;align-items:center;gap:4rem;max-width:1100px;margin:0 auto}.section-content-with-image .image-placeholder{flex:1 1 50%;min-width:280px;min-height:280px}.section-content-with-image .story-image{flex:0 0 45%;max-width:45%;height:auto;border-radius:16px;box-shadow:0 8px 30px #3e272326;object-fit:cover}.section-content-with-image .text-content{flex:1 1 50%;text-align:left}.section-content-with-image.reverse{flex-direction:row-reverse}.intro-section{background:var(--warm-white)}.problem-section{background:linear-gradient(180deg,var(--cream) 0%,var(--warm-white) 100%)}.solution-section{background:linear-gradient(180deg,var(--warm-white) 0%,var(--milk) 100%)}.inline-link{display:inline-block;margin-top:1rem;color:var(--caramel);font-weight:600;text-decoration:none;border-bottom:2px solid transparent;transition:all .3s ease}.inline-link:hover{color:var(--golden);border-bottom-color:var(--golden)}.benefits-section{padding:5rem 2rem;background:linear-gradient(135deg,var(--milk) 0%,var(--cream) 100%)}.benefits-section h2{text-align:center;font-size:2.2rem;margin-bottom:3rem}.benefits-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2rem;max-width:1100px;margin:0 auto}.benefit-card{background:#fff;padding:2rem;border-radius:16px;text-align:center;box-shadow:0 4px 20px #3e27231a;transition:transform .3s ease}.benefit-card:hover{transform:translateY(-5px)}.benefit-icon{font-size:3rem;display:block;margin-bottom:1rem}.benefit-card h3{color:var(--dark-roast);margin-bottom:1rem}.benefit-card p{color:var(--coffee);line-height:1.6}.benefits-cta{text-align:center;margin-top:3rem}.cta-section{background:linear-gradient(135deg,var(--dark-roast) 0%,var(--espresso) 100%);padding:5rem 2rem;text-align:center;margin:0;border-radius:0}.cta-section h2{color:var(--warm-white);font-size:2.5rem;margin-bottom:1rem}.cta-buttons{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}.btn-cta{background:linear-gradient(135deg,var(--caramel) 0%,var(--golden) 100%);color:var(--espresso);font-size:1.1rem;padding:1.2rem 2.5rem}.btn-cta-secondary{background:transparent;border:2px solid var(--cream);color:var(--cream);font-size:1.1rem;padding:1.2rem 2.5rem}.btn-cta-secondary:hover{background:#ffffff1a;border-color:var(--warm-white);color:var(--warm-white)}@media(max-width:768px){.hero-section{flex-direction:column;text-align:center;padding:2rem 1rem}.hero-content h1{font-size:2rem}.hero-buttons{justify-content:center}.image-placeholder.hero-image{min-width:100%;min-height:200px}.story-section{padding:3rem 1rem}.story-section h2{font-size:1.8rem}.story-text{font-size:1.1rem}.section-content-with-image{flex-direction:column;gap:2rem}.section-content-with-image.reverse{flex-direction:column}.section-content-with-image .text-content{text-align:center}.section-content-with-image .image-placeholder{min-width:100%;min-height:200px}.section-content-with-image .story-image{flex:none;max-width:100%;width:100%}.customer-reasons{max-width:100%}.cta-buttons{flex-direction:column;align-items:center}}.how-it-works{width:100%}.steps-section{padding:4rem 2rem;background:linear-gradient(180deg,var(--milk) 0%,var(--cream) 100%);text-align:center}.steps-section h2{font-size:2.2rem;margin-bottom:.5rem;color:var(--dark-roast)}.steps-subtitle{font-size:1.2rem;color:var(--coffee);margin-bottom:3rem}.steps-flow{display:flex;align-items:center;justify-content:center;gap:1rem;max-width:1200px;margin:0 auto;flex-wrap:wrap}.step-card{background:#fff;border-radius:16px;padding:1.5rem;width:180px;box-shadow:0 4px 20px #3e27231a;position:relative;transition:transform .3s ease}.step-card:hover{transform:translateY(-5px)}.step-number{position:absolute;top:-12px;left:-12px;width:32px;height:32px;background:linear-gradient(135deg,var(--caramel) 0%,var(--golden) 100%);color:var(--espresso);border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1rem}.step-emoji{font-size:2.5rem;display:block;margin-bottom:.75rem}.step-card h3{color:var(--dark-roast);font-size:1.1rem;margin-bottom:.5rem}.step-card p{color:var(--coffee);font-size:.9rem;line-height:1.5;margin:0}.step-arrow{font-size:2rem;color:var(--latte);font-weight:300}.comic-section{padding:4rem 2rem;background:var(--warm-white)}.comic-section h2{text-align:center;font-size:2.2rem;margin-bottom:2rem}.design-note{max-width:700px;margin:0 auto 3rem;background:linear-gradient(135deg,#e3f2fd,#bbdefb);border:2px solid #64b5f6;border-radius:12px;padding:1.5rem;display:flex;gap:1rem;align-items:flex-start}.note-icon{font-size:1.8rem;flex-shrink:0}.design-note p{margin:0;color:#1565c0;line-height:1.6}.design-note strong{color:#0d47a1}.comic-headers{display:grid;grid-template-columns:1fr 1fr;gap:2rem;max-width:1000px;margin:0 auto 1rem;position:sticky;top:70px;background:var(--warm-white);padding:1rem 0;z-index:10}.comic-header{text-align:center;padding:1rem;border-radius:12px}.comic-header.without{background:linear-gradient(135deg,#ffebee,#ffcdd2);border:2px solid #ef9a9a}.comic-header.with{background:linear-gradient(135deg,#e8f5e9,#c8e6c9);border:2px solid #a5d6a7}.header-icon{font-size:2rem;display:block;margin-bottom:.5rem}.comic-header h3{margin:0;font-size:1.2rem}.comic-header.without h3{color:#c62828}.comic-header.with h3{color:#2e7d32}.comic-strip{max-width:1000px;margin:0 auto}.comic-row{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin-bottom:2rem}.comic-panel{background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 4px 20px #3e27231a;transition:transform .3s ease}.comic-panel:hover{transform:translateY(-3px)}.comic-panel.without{border:3px solid #ef9a9a}.comic-panel.with{border:3px solid #a5d6a7}.panel-image{width:100%;aspect-ratio:4/3;background:var(--cream);display:flex;align-items:center;justify-content:center;overflow:hidden}.panel-image img{width:100%;height:100%;object-fit:contain}.panel-caption{padding:1rem 1.5rem;margin:0;font-size:1rem;line-height:1.5;text-align:center}.comic-panel.without .panel-caption{color:#c62828;background:#ffebee}.comic-panel.with .panel-caption{color:#2e7d32;background:#e8f5e9}.owner-section{padding:5rem 2rem;background:linear-gradient(180deg,var(--cream) 0%,var(--milk) 100%)}.owner-section h2{text-align:center;font-size:2.2rem;margin-bottom:3rem}.owner-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2rem;max-width:1000px;margin:0 auto}.owner-card{background:#fff;padding:2rem;border-radius:16px;box-shadow:0 4px 20px #3e272314;transition:transform .3s ease;text-align:center}.owner-card:hover{transform:translateY(-3px)}.owner-icon{font-size:2.5rem;display:block;margin-bottom:1rem}.owner-card h3{color:var(--dark-roast);margin-bottom:.5rem}.owner-card p{color:var(--coffee);line-height:1.6;margin:0}.cta-section{background:linear-gradient(135deg,var(--dark-roast) 0%,var(--espresso) 100%);padding:5rem 2rem;text-align:center}.cta-section h2{color:var(--warm-white);font-size:2.2rem;margin-bottom:1rem}.cta-section p{color:var(--cream);font-size:1.2rem;margin-bottom:2rem}.btn-cta{display:inline-block;background:linear-gradient(135deg,var(--caramel) 0%,var(--golden) 100%);color:var(--espresso);padding:1.2rem 2.5rem;border-radius:30px;text-decoration:none;font-weight:600;font-size:1.1rem;transition:all .3s ease;border:none}.btn-cta:hover{transform:translateY(-2px);box-shadow:0 6px 25px #ff8f0066}@media(max-width:768px){.page-header h1{font-size:2rem}.steps-section{padding:2rem 1rem}.steps-section h2{font-size:1.8rem}.steps-subtitle{font-size:1rem;margin-bottom:2rem}.steps-flow{flex-direction:column;gap:.5rem}.step-card{width:100%;max-width:300px;padding:1.25rem;display:flex;flex-direction:column;align-items:center}.step-emoji{font-size:2rem}.step-arrow{transform:rotate(90deg);font-size:1.5rem}.comic-section{padding:2rem 1rem}.comic-headers{position:static;gap:.5rem;padding:.5rem 0}.comic-header{padding:.5rem}.comic-header h3{font-size:.85rem}.header-icon{font-size:1.5rem;margin-bottom:.25rem}.comic-row{gap:.5rem;margin-bottom:1rem}.comic-panel{border-radius:8px;border-width:2px}.panel-caption{padding:.5rem;font-size:.75rem;line-height:1.4}.design-note{flex-direction:column;text-align:center}.cta-section h2{font-size:1.8rem}}.faq-page{width:100%}.faq-content{max-width:800px;margin:0 auto;padding:3rem 2rem}.category-filter{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:2rem;justify-content:center}.filter-btn{background:#fff;border:2px solid var(--cream);color:var(--coffee);padding:.6rem 1.2rem;border-radius:20px;cursor:pointer;font-weight:500;transition:all .3s ease;font-family:inherit;font-size:.95rem}.filter-btn:hover{border-color:var(--latte);background:var(--milk)}.filter-btn.active{background:var(--mocha);border-color:var(--mocha);color:var(--warm-white)}.faq-list{display:flex;flex-direction:column;gap:1rem}.faq-item{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 2px 10px #3e272314;border:1px solid var(--cream)}.faq-question{width:100%;padding:1.5rem;background:none;border:none;display:flex;justify-content:space-between;align-items:center;cursor:pointer;text-align:left;font-size:1.1rem;font-weight:600;color:var(--dark-roast);font-family:inherit;gap:1rem}.faq-question:hover{background:var(--milk)}.faq-toggle{font-size:1.5rem;color:var(--caramel);flex-shrink:0;width:30px;height:30px;display:flex;align-items:center;justify-content:center}.faq-answer{max-height:0;overflow:hidden;transition:max-height .3s ease,padding .3s ease}.faq-item.open .faq-answer{max-height:1000px;padding:1rem 1.5rem 1.5rem}.faq-answer p{color:var(--coffee);line-height:1.7;margin:0;white-space:pre-line}.more-questions{background:linear-gradient(135deg,var(--cream) 0%,var(--milk) 100%);padding:4rem 2rem;text-align:center}.more-questions h2{font-size:2rem;margin-bottom:1rem}.more-questions p{color:var(--coffee);font-size:1.1rem;margin-bottom:2rem}.btn-primary{display:inline-block;background:linear-gradient(135deg,var(--coffee) 0%,var(--mocha) 100%);color:var(--warm-white);padding:1rem 2rem;border-radius:30px;text-decoration:none;font-weight:600;transition:all .3s ease;border:none;box-shadow:0 4px 15px #3e27234d}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 20px #3e272366}@media(max-width:768px){.page-header h1{font-size:2rem}.faq-question{font-size:1rem;padding:1.2rem}.faq-item.open .faq-answer{padding:1rem 1.2rem 1.2rem}}.contact-page{width:100%}.page-header{background:linear-gradient(135deg,var(--dark-roast) 0%,var(--espresso) 100%);padding:4rem 2rem;text-align:center}.page-header h1{color:var(--warm-white);font-size:3rem;margin-bottom:.5rem}.page-header p{color:var(--cream);font-size:1.3rem}.contact-content{padding:4rem 2rem;display:flex;justify-content:center;min-height:50vh;align-items:flex-start}.contact-card{background:#fff;padding:3rem;border-radius:20px;box-shadow:0 8px 30px #3e27231f;max-width:550px;text-align:center}.contact-icon{font-size:4rem;display:block;margin-bottom:1.5rem}.contact-card h2{color:var(--dark-roast);font-size:2rem;margin-bottom:1.5rem}.contact-description{color:var(--coffee);font-size:1.1rem;line-height:1.7;margin-bottom:1rem}.email-section{margin:2.5rem 0;padding:2rem;background:linear-gradient(135deg,var(--warm-white) 0%,var(--milk) 100%);border-radius:12px}.email-label{color:var(--latte);font-size:.95rem;margin-bottom:.5rem;text-transform:uppercase;letter-spacing:.5px}.email-link{color:var(--dark-roast);font-size:1.4rem;font-weight:600;text-decoration:none;border-bottom:3px solid var(--caramel);padding-bottom:2px;transition:all .3s ease}.email-link:hover{color:var(--caramel);border-bottom-color:var(--golden)}.response-note{color:var(--latte);font-size:.95rem;font-style:italic;margin:0}@media(max-width:768px){.page-header h1{font-size:2rem}.contact-card{padding:2rem;margin:0 1rem}.contact-card h2{font-size:1.6rem}.email-link{font-size:1.1rem}}.app{min-height:100vh;display:flex;flex-direction:column}main{flex:1}