/* ==========================================================
   Serenzo Water — Main Stylesheet
   ========================================================== */

*{margin:0;padding:0;box-sizing:border-box;}
html{overflow-x:hidden;}
html.lenis,html.lenis body{height:auto;}
.lenis.lenis-smooth{scroll-behavior:auto!important;}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain;}
body{font-family:'Space Grotesk',sans-serif;background:#FAFEFF;overflow-x:hidden;color:#1a2744;}
::selection{background:#2276E8;color:#fff;}

/* ===== PAGE LOADER ===== */
.page-loader{
  position:fixed;inset:0;z-index:9999;
  background:#FAFEFF;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  transition:opacity 0.6s cubic-bezier(0.22,1,0.36,1),visibility 0.6s;
}
.page-loader.done{opacity:0;visibility:hidden;pointer-events:none;}
.loader-drop{
  width:60px;height:80px;
  animation:loaderFloat 1.5s ease-in-out infinite;
}
@keyframes loaderFloat{
  0%,100%{transform:translateY(0) scale(1);}
  50%{transform:translateY(-15px) scale(1.05);}
}
.loader-ring{
  width:80px;height:80px;border-radius:50%;
  border:3px solid #EFF8FF;border-top-color:#2276E8;
  animation:loaderSpin 0.9s linear infinite;
  margin-top:24px;
}
@keyframes loaderSpin{to{transform:rotate(360deg);}}
.loader-text{
  margin-top:20px;font-family:'Syne',sans-serif;
  font-weight:700;font-size:0.85rem;letter-spacing:0.2em;
  color:#2276E8;text-transform:uppercase;
  animation:loaderPulse 1.5s ease-in-out infinite;
}
@keyframes loaderPulse{0%,100%{opacity:0.4;}50%{opacity:1;}}

/* ===== POINTER CURSOR ===== */
a,button,[role="button"],.magnetic-btn,.tilt-card,.nav-link,.mob-link,.glass-card,
select,input[type="submit"],input[type="button"],label[for]{cursor:pointer;}

/* ===== SOCIAL ICONS ===== */
.social-icon-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:50%;
  background:rgba(255,255,255,0.07);
  color:rgba(255,255,255,0.5);
  border:1px solid rgba(255,255,255,0.12);
  transition:all 0.3s cubic-bezier(0.22,1,0.36,1);
  cursor:pointer;
}
.social-icon-btn:hover{
  background:rgba(56,148,243,0.25);
  color:#fff;
  border-color:rgba(56,148,243,0.5);
  transform:translateY(-2px) scale(1.1);
  box-shadow:0 6px 20px rgba(56,148,243,0.3);
}

/* ===== GRAIN OVERLAY ===== */
.grain{
  position:fixed;inset:0;z-index:9998;pointer-events:none;
  opacity:0.03;mix-blend-mode:multiply;
}
.grain::after{
  content:'';position:absolute;inset:-200%;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat:repeat;background-size:256px;
  animation:grainShift 0.5s steps(1) infinite;
}
@keyframes grainShift{
  0%{transform:translate(0,0);}
  10%{transform:translate(-5%,-10%);}
  20%{transform:translate(-15%,5%);}
  30%{transform:translate(7%,-25%);}
  40%{transform:translate(-5%,25%);}
  50%{transform:translate(-15%,10%);}
  60%{transform:translate(15%,0%);}
  70%{transform:translate(0%,15%);}
  80%{transform:translate(3%,-35%);}
  90%{transform:translate(-10%,10%);}
  100%{transform:translate(5%,0%);}
}

/* ===== CURSOR GLOW ===== */
.cursor-glow{
  position:fixed;width:350px;height:350px;border-radius:50%;
  background:radial-gradient(circle,rgba(34,118,232,0.07) 0%,transparent 70%);
  pointer-events:none;z-index:9997;transform:translate(-50%,-50%);
  transition:opacity 0.4s;opacity:0;
}
body:hover .cursor-glow{opacity:1;}

/* ===== NAV ===== */
.nav{position:fixed;top:0;left:0;width:100%;z-index:100;transition:all 0.5s cubic-bezier(0.22,1,0.36,1);}
/* Keep bar above full-screen mobile overlay so the menu button stays tappable */
.nav-top{position:relative;z-index:110;padding-top:env(safe-area-inset-top,0);}
.nav.menu-open .nav-top{background:rgba(255,255,255,0.96);backdrop-filter:blur(16px) saturate(180%);-webkit-backdrop-filter:blur(16px) saturate(180%);}
.nav.scrolled{background:rgba(255,255,255,0.82);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);box-shadow:0 1px 40px rgba(0,40,100,0.06);}
.nav-link{position:relative;overflow:hidden;}
.nav-link::after{content:'';position:absolute;bottom:-2px;left:0;width:0;height:2px;background:linear-gradient(90deg,#2276E8,#5DB5F9);transition:width 0.4s cubic-bezier(0.22,1,0.36,1);}
.nav-link:hover::after{width:100%;}

/* ===== HERO ===== */
.hero{min-height:100vh;position:relative;overflow:hidden;display:flex;align-items:center;}
.hero-bg{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse 80% 60% at 70% 20%,rgba(190,225,254,0.5) 0%,transparent 60%),
    radial-gradient(ellipse 60% 50% at 20% 80%,rgba(145,207,252,0.3) 0%,transparent 50%),
    linear-gradient(180deg,#FAFEFF 0%,#EFF8FF 100%);
}

/* Morphing blobs */
.mesh-blob{position:absolute;border-radius:50%;filter:blur(80px);animation:morphBlob 12s ease-in-out infinite alternate;}
@keyframes morphBlob{
  0%{border-radius:40% 60% 60% 40%/60% 40% 60% 40%;transform:rotate(0deg) scale(1);}
  33%{border-radius:60% 40% 30% 70%/50% 60% 40% 50%;transform:rotate(60deg) scale(1.05);}
  66%{border-radius:30% 60% 70% 40%/50% 30% 60% 50%;transform:rotate(120deg) scale(0.95);}
  100%{border-radius:50% 50% 40% 60%/40% 60% 50% 50%;transform:rotate(180deg) scale(1);}
}

/* Text gradient animation */
.text-gradient{
  background:linear-gradient(135deg,#1A60D5 0%,#2276E8 30%,#5DB5F9 60%,#2276E8 100%);
  background-size:300% 300%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  animation:gradShift 6s ease-in-out infinite;
}
@keyframes gradShift{0%,100%{background-position:0% 50%;}50%{background-position:100% 50%;}}

/* Line reveal */
.line-reveal{clip-path:polygon(0 0,0 0,0 100%,0 100%);animation:lineReveal 1s cubic-bezier(0.77,0,0.175,1) forwards;}
.line-reveal:nth-child(2){animation-delay:0.15s;}
.line-reveal:nth-child(3){animation-delay:0.3s;}
@keyframes lineReveal{to{clip-path:polygon(0 0,100% 0,100% 100%,0 100%);}}

/* Tag float in */
.tag-float{opacity:0;transform:translateY(20px) scale(0.95);animation:tagFloat 0.7s cubic-bezier(0.22,1,0.36,1) forwards;}
@keyframes tagFloat{to{opacity:1;transform:translateY(0) scale(1);}}

/* CTA shimmer */
.cta-shimmer{position:relative;overflow:hidden;}
.cta-shimmer::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.2),transparent);animation:shimmer 3s ease-in-out infinite;}
@keyframes shimmer{0%,100%{left:-100%;}50%{left:100%;}}

/* Liquid morph */
.liquid-shape{animation:liquidMorph 10s ease-in-out infinite;}
@keyframes liquidMorph{
  0%,100%{border-radius:60% 40% 30% 70%/60% 30% 70% 40%;}
  25%{border-radius:30% 60% 70% 40%/50% 60% 30% 60%;}
  50%{border-radius:50% 60% 30% 60%/30% 40% 70% 60%;}
  75%{border-radius:40% 30% 60% 50%/60% 70% 40% 30%;}
}

/* ===== ANIMATED WAVE DIVIDERS ===== */
.wave-divider{position:relative;height:80px;overflow:hidden;margin-top:-1px;}
.wave-divider svg{position:absolute;bottom:0;width:200%;height:100%;animation:waveSlide 8s linear infinite;}
.wave-divider svg:nth-child(2){opacity:0.5;animation-duration:12s;animation-direction:reverse;}
@keyframes waveSlide{0%{transform:translateX(0);}100%{transform:translateX(-50%);}}

/* ===== SCROLL REVEAL ===== */
.reveal-up{opacity:0;transform:translateY(60px);transition:all 0.9s cubic-bezier(0.22,1,0.36,1);}
.reveal-up.visible{opacity:1;transform:translateY(0);}
.reveal-scale{opacity:0;transform:scale(0.92);transition:all 0.9s cubic-bezier(0.22,1,0.36,1);}
.reveal-scale.visible{opacity:1;transform:scale(1);}
.reveal-left{opacity:0;transform:translateX(-60px);transition:all 0.9s cubic-bezier(0.22,1,0.36,1);}
.reveal-left.visible{opacity:1;transform:translateX(0);}
.reveal-right{opacity:0;transform:translateX(60px);transition:all 0.9s cubic-bezier(0.22,1,0.36,1);}
.reveal-right.visible{opacity:1;transform:translateX(0);}
.stagger-children .reveal-up:nth-child(1){transition-delay:0s;}
.stagger-children .reveal-up:nth-child(2){transition-delay:0.1s;}
.stagger-children .reveal-up:nth-child(3){transition-delay:0.15s;}
.stagger-children .reveal-up:nth-child(4){transition-delay:0.2s;}

/* ===== PARALLAX ===== */
[data-parallax]{will-change:transform;transition:transform 0.1s linear;}

/* ===== GLASS CARDS ===== */
.glass-card{background:rgba(255,255,255,0.6);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(190,225,254,0.4);transition:all 0.5s cubic-bezier(0.22,1,0.36,1);}
.glass-card:hover{background:rgba(255,255,255,0.85);border-color:rgba(34,118,232,0.3);transform:translateY(-6px);box-shadow:0 30px 80px -20px rgba(34,118,232,0.15);}

/* ===== TILT CARD ===== */
.tilt-card{transition:transform 0.5s cubic-bezier(0.22,1,0.36,1),box-shadow 0.5s ease;transform-style:preserve-3d;perspective:1000px;}
.tilt-card:hover{box-shadow:0 30px 80px -15px rgba(13,43,94,0.12);}

/* ===== MAGNETIC BTN ===== */
.magnetic-btn{position:relative;display:inline-flex;align-items:center;gap:0.75rem;padding:1rem 2.25rem;border-radius:9999px;font-weight:600;font-size:0.95rem;transition:all 0.4s cubic-bezier(0.22,1,0.36,1);overflow:hidden;}
.magnetic-btn .btn-bg{position:absolute;inset:0;border-radius:9999px;transition:transform 0.4s cubic-bezier(0.22,1,0.36,1);}
.magnetic-btn:hover .btn-bg{transform:scale(1.05);}
.magnetic-btn .btn-text{position:relative;z-index:1;}

/* ===== MARQUEE ===== */
.marquee{overflow:hidden;white-space:nowrap;}
.marquee-inner{display:inline-flex;animation:marqueeScroll 30s linear infinite;}
@keyframes marqueeScroll{0%{transform:translateX(0);}100%{transform:translateX(-50%);}}

/* ===== CUSTOM SECTION ===== */
.custom-section{background:linear-gradient(135deg,#0D2B5E 0%,#1A60D5 50%,#2276E8 80%,#3894F3 100%);position:relative;overflow:hidden;}
.custom-section .grid-pattern{position:absolute;inset:0;opacity:0.04;background-image:linear-gradient(rgba(255,255,255,0.5) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.5) 1px,transparent 1px);background-size:60px 60px;}

/* ===== TESTIMONIALS HORIZONTAL ===== */
.testimonial-track{display:flex;gap:1.5rem;animation:testimonialScroll 40s linear infinite;width:max-content;}
.testimonial-track:hover{animation-play-state:paused;}
@keyframes testimonialScroll{0%{transform:translateX(0);}100%{transform:translateX(-50%);}}
.testimonial-card{
  flex-shrink:0;width:340px;padding:2rem;border-radius:1.5rem;
  background:rgba(255,255,255,0.7);backdrop-filter:blur(10px);
  border:1px solid rgba(190,225,254,0.4);
  transition:all 0.4s ease;
}
.testimonial-card:hover{background:rgba(255,255,255,0.9);transform:translateY(-4px);box-shadow:0 20px 60px -15px rgba(34,118,232,0.1);}

/* Pill float */
@keyframes floatPill{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* Pulse dot */
.pulse-dot{position:relative;}
.pulse-dot::after{content:'';position:absolute;inset:-3px;border-radius:50%;background:rgba(34,200,100,0.4);animation:pulse 2s ease-in-out infinite;}
@keyframes pulse{0%,100%{transform:scale(1);opacity:0.4;}50%{transform:scale(1.8);opacity:0;}}

/* Mobile nav (below .nav-top so hamburger remains clickable) */
.mobile-nav{z-index:100;transform:translateY(-100%);opacity:0;transition:all 0.5s cubic-bezier(0.22,1,0.36,1);pointer-events:none;-webkit-overflow-scrolling:touch;}
.mobile-nav.open{transform:translateY(0);opacity:1;pointer-events:all;}
body.menu-open{overflow:hidden;touch-action:none;}

/* Scrollbar */
::-webkit-scrollbar{width:6px;}::-webkit-scrollbar-track{background:transparent;}::-webkit-scrollbar-thumb{background:#BEE1FE;border-radius:3px;}::-webkit-scrollbar-thumb:hover{background:#91CFFC;}