.whatsapp-float-btn { position:fixed; bottom:25px; right:25px; background:#25D366; color:white; width:60px; height:60px; border-radius:50%; cursor:pointer; z-index:100000; font-size:35px; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 15px rgba(37,211,102,0.4); transition:all 0.3s; text-decoration:none; animation:floatWa 3s ease-in-out infinite; }
.whatsapp-float-btn:hover { transform:scale(1.1); background:#128C7E; animation:none; }
@keyframes floatWa { 0%{transform:translateY(0)} 50%{transform:translateY(-10px)} 100%{transform:translateY(0)} }
.slider-content-anim { animation:slideUpFade 1.5s ease-out forwards; }
@keyframes slideUpFade { 0%{opacity:0;transform:translateY(40px)} 100%{opacity:1;transform:translateY(0)} }
.modal { transition:opacity 0.3s ease,visibility 0.3s ease; backdrop-filter:blur(4px); }
.pricing-table th { background-color:#8cc63f; color:#1a1a1a; font-weight:600; border:1px solid #1a1a1a; padding:10px; }
.pricing-table td { border:1px solid #1a1a1a; padding:10px; }
nav { transition:padding 0.3s ease,box-shadow 0.3s ease; }
.nav-water-wave { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,50 C150,100 350,0 600,50 C850,100 1050,0 1200,50 L1200,120 L0,120 Z' fill='%230ea5e9' opacity='0.15'/%3E%3C/svg%3E") 0 100% / 50% 100% repeat-x, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,70 C200,20 400,120 600,70 C800,20 1000,120 1200,70 L1200,120 L0,120 Z' fill='%2338bdf8' opacity='0.25'/%3E%3C/svg%3E") 0 100% / 50% 100% repeat-x; animation:navWave 6s linear infinite; }
@keyframes navWave { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
@keyframes gradientMove { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
@keyframes raining { 0%{transform:translateY(-30px);opacity:0} 20%{opacity:1} 80%{opacity:1} 100%{transform:translateY(120px);opacity:0} }
.rain-drop { position:absolute; width:2px; height:20px; background:linear-gradient(transparent,#0A58CA); top:-20px; opacity:0; border-radius:5px; }
.group:hover .rain-drop { animation:raining 0.7s linear infinite; }
@keyframes ripple { 0%{transform:scale(0.8);opacity:1} 100%{transform:scale(2.2);opacity:0} }
body { background:linear-gradient(180deg,#f0f9ff 0%,#e0f2fe 100%); background-attachment:fixed; min-width:360px; }
.bg-water-theme { background:linear-gradient(135deg,#f0f9ff 0%,#e0f2fe 50%,#bae6fd 100%); position:relative; overflow:hidden; }
.bg-water-theme::before { content:''; position:absolute; top:0;left:0;right:0;bottom:0; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3z' fill='%230a58ca' fill-opacity='0.03' fill-rule='evenodd'/%3E%3C/svg%3E"); pointer-events:none; z-index:0; }
#splash-screen { position:fixed; top:0; left:0; width:100%; height:100%; background:linear-gradient(270deg,#0ea5e9,#0369a1,#082f49,#0284c7); background-size:800% 800%; animation:waterFlowGradient 8s ease infinite; display:flex; flex-direction:column; justify-content:center; align-items:center; z-index:99999; transition:opacity 0.8s ease,visibility 0.8s ease; overflow:hidden; }
@keyframes waterFlowGradient { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
#splash-screen::before { content:""; position:absolute; width:250%; height:250%; top:-150%; left:-75%; z-index:1; pointer-events:none; border-radius:45%; background:rgba(255,255,255,0.08); animation:splashWaveAnim 12s infinite linear; }
#splash-screen::after { content:""; position:absolute; width:250%; height:250%; top:-150%; left:-75%; z-index:1; pointer-events:none; border-radius:40%; background:rgba(255,255,255,0.04); animation:splashWaveAnim 18s infinite linear; }
@keyframes splashWaveAnim { 0%{transform:rotate(0deg)} 100%{transform:rotate(360deg)} }
.splash-logo-anim,.progress-container,.animate-floatSlow { z-index:10!important; }
.progress-container { width:200px; height:6px; background:rgba(255,255,255,0.15); margin-top:30px; border-radius:10px; overflow:hidden; box-shadow:inset 0 1px 3px rgba(0,0,0,0.3); }
.progress-bar { width:0%; height:100%; background:#38bdf8; box-shadow:0 0 10px #38bdf8; animation:fillBar 1s ease-in-out forwards; }
@keyframes fillBar { 0%{width:0%} 100%{width:100%} }
.fade-out { opacity:0; visibility:hidden; }
.clip-bottom-point { clip-path:polygon(0 0,100% 0,100% calc(100% - 25px),50% 100%,0 calc(100% - 25px)); }
@keyframes waterLevel { 0%,100%{transform:translateY(60px)} 50%{transform:translateY(5px)} }
.anim-water-level { animation:waterLevel 5s ease-in-out infinite; }
@keyframes waveMotion { 0%{transform:translateX(0)} 100%{transform:translateX(-40px)} }
.anim-wave-motion { animation:waveMotion 2.5s linear infinite; }
@keyframes flowDash { to{stroke-dashoffset:-24} }
.anim-pipe-flow { animation:flowDash 0.8s linear infinite; }
@keyframes rainDropSVG { 0%{transform:translateY(-10px);opacity:0} 30%{opacity:1} 80%{opacity:1} 100%{transform:translateY(40px);opacity:0} }
.anim-rain-svg { animation:rainDropSVG 1s linear infinite; }
@keyframes spinGear { to{transform:rotate(360deg)} }
.anim-spin-gear { animation:spinGear 6s linear infinite; transform-origin:center; }
.clock-container { width:70px; height:70px; background:white; border-radius:50%; border:3px solid #bae6fd; box-shadow:inset 0 2px 4px rgba(0,0,0,0.1); position:relative; display:flex; justify-content:center; align-items:center; }
.clock { width:100%; height:100%; position:relative; border-radius:50%; }
.clock-number { position:absolute; width:100%; height:100%; text-align:center; font-size:10px; font-weight:700; color:#1e293b; padding-top:2px; }
.clock-number span { display:inline-block; }
.num1{transform:rotate(30deg)} .num1 span{transform:rotate(-30deg)} .num2{transform:rotate(60deg)} .num2 span{transform:rotate(-60deg)} .num3{transform:rotate(90deg)} .num3 span{transform:rotate(-90deg)} .num4{transform:rotate(120deg)} .num4 span{transform:rotate(-120deg)} .num5{transform:rotate(150deg)} .num5 span{transform:rotate(-150deg)} .num6{transform:rotate(180deg)} .num6 span{transform:rotate(-180deg)} .num7{transform:rotate(210deg)} .num7 span{transform:rotate(-210deg)} .num8{transform:rotate(240deg)} .num8 span{transform:rotate(-240deg)} .num9{transform:rotate(270deg)} .num9 span{transform:rotate(-270deg)} .num10{transform:rotate(300deg)} .num10 span{transform:rotate(-300deg)} .num11{transform:rotate(330deg)} .num11 span{transform:rotate(-330deg)} .num12{transform:rotate(0deg)}
.clock .hour,.clock .min,.clock .sec { position:absolute; background:black; border-radius:10px; transform-origin:bottom center; bottom:50%; left:50%; transform:translateX(-50%); }
.clock .hour { width:3px; height:25%; background:#1e293b; z-index:3; }
.clock .min { width:2px; height:35%; background:#475569; z-index:4; }
.clock .sec { width:1.5px; height:40%; background:#ef4444; z-index:5; }
.clock .center-dot { position:absolute; width:5px; height:5px; background:#ef4444; border-radius:50%; top:50%; left:50%; transform:translate(-50%,-50%); z-index:6; }
.clock-brand { position:absolute; top:25%; left:50%; transform:translateX(-50%); font-size:5px; font-weight:700; color:#64748b; }
.slide-under-reveal { opacity:0; transform:translateY(-120px); transition:opacity 0.8s ease-out,transform 1.2s cubic-bezier(0.2,0.8,0.2,1); }
.slide-under-reveal.revealed { opacity:1; transform:translateY(0); }
.glass-card { background:rgba(255,255,255,0.65); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,0.8); }
@keyframes tankDropIn { 0%{transform:translateY(-280px) scale(0.05);opacity:0} 28%{transform:translateY(-120px) scale(0.18);opacity:0.65} 52%{transform:translateY(20px) rotate(3deg) scale(1.06);opacity:1} 70%{transform:translateY(-11px) rotate(-1.8deg) scale(0.98)} 85%{transform:translateY(5px) rotate(0.7deg) scale(1.01)} 100%{transform:translateY(0) rotate(0deg) scale(1);opacity:1} }
@keyframes tankFloat { 0%,100%{transform:translateY(0) rotate(0deg)} 30%{transform:translateY(-14px) rotate(-1.5deg)} 65%{transform:translateY(-7px) rotate(1.2deg)} }
@keyframes tankWaterGlow { 0%,100%{opacity:0.4;transform:translateX(-50%) scaleX(1)} 50%{opacity:0.78;transform:translateX(-50%) scaleX(1.2)} }
@keyframes tankRippleOut { 0%{width:44%;height:10px;opacity:0.65;bottom:-4px} 100%{width:112%;height:20px;opacity:0;bottom:-18px} }
.tank-idle { animation:tankFloat 4s ease-in-out infinite; }
.tank-container { position:fixed; left:2%; top:12%; width:clamp(140px,16vw,260px); z-index:45; pointer-events:none; opacity:0; transition:transform 0.2s ease-out,opacity 0.8s ease; }
.tank-container.tank-entering { animation:tankDropIn 1.7s cubic-bezier(0.25,1,0.5,1) forwards; }
.tank-water-glow { position:absolute; bottom:-12px; left:50%; transform:translateX(-50%); width:76%; height:22px; background:radial-gradient(ellipse at center,rgba(56,189,248,0.45) 0%,transparent 70%); border-radius:50%; animation:tankWaterGlow 2.2s ease-in-out infinite; pointer-events:none; }
.tank-ripple { position:absolute; left:50%; transform:translateX(-50%); border:1.5px solid rgba(56,189,248,0.55); border-radius:50%; }
.tank-ripple:nth-child(2){animation:tankRippleOut 2.2s ease-out infinite}
.tank-ripple:nth-child(3){animation:tankRippleOut 2.2s ease-out infinite 0.74s}
.tank-ripple:nth-child(4){animation:tankRippleOut 2.2s ease-out infinite 1.48s}
@media(max-width:1024px){.tank-container{display:none}}
.slide-item .anim-text-top{transform:translateY(-100px);opacity:0;transition:all 1s ease-out}
.slide-item .anim-text-left{transform:translateX(-100px);opacity:0;transition:all 1s ease-out 0.3s}
.slide-item .anim-text-bottom{transform:translateY(100px);opacity:0;transition:all 1s ease-out 0.5s}
.slide-item .anim-img-top{transform:translateY(-150px) scale(0.8);opacity:0;transition:all 1.2s cubic-bezier(0.2,0.8,0.2,1) 0.6s}
.slide-item.active .anim-text-top,.slide-item.active .anim-text-left,.slide-item.active .anim-text-bottom,.slide-item.active .anim-img-top{opacity:1;transform:translate(0) scale(1)}
/* Banner light rays from center tank */
@keyframes bannerRayPulse { 0%,100%{opacity:0.06} 50%{opacity:0.28} }
@keyframes bannerCenterGlow { 0%,100%{opacity:0.2;transform:translateX(-50%) scale(1)} 50%{opacity:0.55;transform:translateX(-50%) scale(1.4)} }
@keyframes tankBurstOut { 0%{clip-path:circle(1% at 50% 70%);opacity:1;filter:brightness(2.5) saturate(1.4)} 50%{opacity:0.55;filter:brightness(1.3)} 100%{clip-path:circle(160% at 50% 70%);opacity:0;filter:brightness(1)} }
@keyframes slideRevealUp { 0%{clip-path:inset(100% 0% 0% 0%);filter:brightness(1.7)} 100%{clip-path:inset(0% 0% 0% 0%);filter:brightness(1)} }
@keyframes conicRayRotate { from{transform:translate(-50%,-50%) rotate(0deg)} to{transform:translate(-50%,-50%) rotate(360deg)} }
.banner-light-overlay{position:absolute;inset:0;pointer-events:none;z-index:18;overflow:hidden}
.banner-center-glow{position:absolute;bottom:27%;left:50%;transform:translateX(-50%);width:300px;height:210px;background:radial-gradient(ellipse at center,rgba(255,255,180,0.1) 0%,rgba(56,189,248,0.1) 40%,transparent 70%);border-radius:50%;animation:bannerCenterGlow 3s ease-in-out infinite}
.banner-ray{position:absolute;bottom:31%;left:50%;width:2px;background:linear-gradient(to top,rgba(255,255,180,0.5),rgba(56,189,248,0.22),transparent);transform-origin:bottom center;border-radius:2px;animation:bannerRayPulse 3s ease-in-out infinite}
.tank-burst-effect{position:absolute;inset:0;background:radial-gradient(circle at 50% 70%,rgba(255,255,180,0.4),rgba(56,189,248,0.25),transparent 65%);animation:tankBurstOut 0.85s ease-out forwards;pointer-events:none;z-index:28}
.slide-item.active{animation:slideRevealUp 0.7s cubic-bezier(0.2,0.8,0.2,1) forwards}
.tank-conic-rays{position:absolute;top:50%;left:50%;width:135%;height:135%;transform:translate(-50%,-50%);background:conic-gradient(from 0deg,transparent 0deg 10deg,rgba(56,189,248,0.07) 10deg 16deg,transparent 16deg 40deg,rgba(56,189,248,0.05) 40deg 46deg,transparent 46deg 70deg,rgba(56,189,248,0.07) 70deg 76deg,transparent 76deg 100deg,rgba(56,189,248,0.05) 100deg 106deg,transparent 106deg 130deg,rgba(56,189,248,0.07) 130deg 136deg,transparent 136deg 160deg,rgba(56,189,248,0.05) 160deg 166deg,transparent 166deg 190deg,rgba(56,189,248,0.07) 190deg 196deg,transparent 196deg 220deg,rgba(56,189,248,0.05) 220deg 226deg,transparent 226deg 250deg,rgba(56,189,248,0.07) 250deg 256deg,transparent 256deg 280deg,rgba(56,189,248,0.05) 280deg 286deg,transparent 286deg 310deg,rgba(56,189,248,0.07) 310deg 316deg,transparent 316deg 340deg,rgba(56,189,248,0.05) 340deg 346deg,transparent 346deg 360deg);animation:conicRayRotate 12s linear infinite;pointer-events:none;z-index:-1}