@import"https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap";:root{--blue: #2196F3;--blue-dark: #1565C0;--blue-light: #BBDEFB;--blue-pale: #E3F2FD;--sky: #87CEEB;--green: #4CAF50;--brown: #8D6E63;--yellow: #FFD54F;--white: #FFFFFF;--text: #1a1a2e;--text-light: #555;--radius: 1rem;--shadow: 0 4px 20px rgba(33, 150, 243, .15)}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{min-height:100vh;background:var(--blue-pale);color:var(--text);font-family:Nunito,system-ui,sans-serif;line-height:1.6}.site{position:relative;overflow:hidden}.drops-bg{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:0}.water-drop{position:absolute;top:-20px;width:10px;height:14px;background:var(--blue);border-radius:50%/60% 60% 40% 40%;opacity:.25;animation:fall linear infinite}@keyframes fall{to{transform:translateY(110vh)}}.hero{position:relative;z-index:1;text-align:center;padding:4rem 1.5rem 3rem;background:linear-gradient(180deg,var(--sky) 0%,var(--blue-pale) 100%)}.hero-title{font-size:clamp(2rem,6vw,3.5rem);font-weight:900;line-height:1.15;color:var(--blue-dark);margin-bottom:1rem}.hero-highlight{color:var(--blue);display:inline-block;background:linear-gradient(transparent 60%,var(--yellow) 60%);padding:0 .2em}.hero-sub{font-size:1.15rem;color:var(--text-light);max-width:32rem;margin:0 auto 2rem}.pump-visual{display:flex;justify-content:center;margin-bottom:2rem}.pump-body{position:relative;width:120px;height:160px}.pump-base{position:absolute;bottom:0;left:50%;transform:translate(-50%);width:100px;height:30px;background:var(--brown);border-radius:0 0 12px 12px}.pump-spout{position:absolute;bottom:60px;right:-10px;width:50px;height:14px;background:#607d8b;border-radius:0 8px 8px 0}.pump-handle{position:absolute;bottom:80px;left:50%;transform:translate(-50%) rotate(-15deg);width:80px;height:10px;background:#78909c;border-radius:5px;transform-origin:left center;transition:transform .3s ease}.pump-handle--pump{animation:pumpMotion .4s ease-in-out 4}@keyframes pumpMotion{0%,to{transform:translate(-50%) rotate(-15deg)}50%{transform:translate(-50%) rotate(15deg)}}.handle-grip{position:absolute;right:-6px;top:-6px;width:22px;height:22px;background:#455a64;border-radius:50%}.pump-water{position:absolute;bottom:45px;right:-30px;display:flex;gap:2px;animation:drip .5s ease-in forwards}.pump-water span{font-size:1.2rem;animation:dripDrop .6s ease-in infinite}.pump-water span:nth-child(2){animation-delay:.15s}.pump-water span:nth-child(3){animation-delay:.3s}@keyframes drip{0%{opacity:0}to{opacity:1}}@keyframes dripDrop{0%{transform:translateY(0);opacity:1}to{transform:translateY(20px);opacity:0}}.pump-btn{display:inline-block;padding:.85rem 2.5rem;font-size:1.1rem;font-weight:700;font-family:inherit;color:var(--white);background:linear-gradient(135deg,var(--blue),var(--blue-dark));border:none;border-radius:50px;cursor:pointer;box-shadow:0 4px 15px #2196f366;transition:transform .15s,box-shadow .15s}.pump-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px #2196f380}.pump-btn:active{transform:translateY(0)}.section-title{font-size:clamp(1.5rem,4vw,2.25rem);font-weight:800;text-align:center;color:var(--blue-dark);margin-bottom:.5rem}.section-sub{text-align:center;color:var(--text-light);margin-bottom:2rem;font-size:1.05rem}.steps-section{position:relative;z-index:1;padding:4rem 1.5rem;max-width:72rem;margin:0 auto}.steps-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.25rem}.step-card{display:flex;flex-direction:column;align-items:center;text-align:center;padding:1.75rem 1.25rem;background:var(--white);border:3px solid var(--blue-light);border-radius:var(--radius);cursor:pointer;font-family:inherit;transition:transform .2s,border-color .2s,box-shadow .2s}.step-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}.step-card--active{border-color:var(--blue);background:var(--blue-pale);box-shadow:0 4px 25px #2196f340}.step-number{width:2rem;height:2rem;background:var(--blue);color:var(--white);border-radius:50%;display:grid;place-items:center;font-size:.85rem;font-weight:800;margin-bottom:.75rem}.step-icon{font-size:2.5rem;margin-bottom:.5rem}.step-title{font-size:1.1rem;font-weight:700;color:var(--blue-dark);margin-bottom:.25rem}.step-text{font-size:.95rem;color:var(--text-light);margin-top:.5rem;line-height:1.5}.facts-section{position:relative;z-index:1;padding:4rem 1.5rem;background:linear-gradient(180deg,var(--blue-pale),var(--white))}.facts-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.25rem;max-width:72rem;margin:2rem auto 0}.fact-card{background:var(--white);padding:1.75rem 1.25rem;border-radius:var(--radius);text-align:center;border:2px solid var(--blue-light);transition:transform .2s,box-shadow .2s}.fact-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}.fact-icon{font-size:2.5rem;display:block;margin-bottom:.5rem}.fact-card h3{font-size:1.1rem;font-weight:700;color:var(--blue-dark);margin-bottom:.25rem}.fact-card p{font-size:.9rem;color:var(--text-light)}.how-section{position:relative;z-index:1;padding:4rem 1.5rem;max-width:72rem;margin:0 auto}.how-content{display:grid;grid-template-columns:1fr 1.5fr;gap:2rem;align-items:center;margin-top:2rem}@media(max-width:640px){.how-content{grid-template-columns:1fr}}.how-diagram{display:flex;justify-content:center}.diagram-well{position:relative;width:160px;height:240px;border:3px solid var(--brown);border-radius:12px 12px 0 0;overflow:hidden;background:#d7ccc8}.diagram-ground{position:absolute;top:0;left:0;right:0;height:80px;background:var(--brown);border-radius:9px 9px 0 0}.diagram-water-underground{position:absolute;bottom:0;left:0;right:0;height:120px;background:linear-gradient(180deg,var(--blue),var(--blue-dark));opacity:.7;animation:waterWave 3s ease-in-out infinite}@keyframes waterWave{0%,to{height:120px}50%{height:125px}}.diagram-pipe{position:absolute;top:40px;left:50%;transform:translate(-50%);width:16px;height:200px;background:#78909c;border-radius:4px}.diagram-pump-top{position:absolute;top:-5px;left:50%;transform:translate(-50%);width:60px;height:30px;background:#607d8b;border-radius:8px 8px 0 0}.diagram-spout{position:absolute;top:5px;right:-25px;font-size:1.5rem}.how-text p{font-size:1.05rem;color:var(--text-light);margin-bottom:1rem}.how-text strong{color:var(--blue-dark)}.footer{position:relative;z-index:1;text-align:center;padding:2.5rem 1.5rem;background:var(--blue-dark);color:var(--blue-light);font-size:1.1rem;font-weight:600}.footer-small{margin-top:.5rem;font-size:.85rem;font-weight:400;opacity:.7}