/* AquaVera professional UI enhancement layer */
:root{
  --navy:#061a2f;
  --navy-2:#0a2b49;
  --blue:#087fe6;
  --cyan:#20c4e8;
  --ink:#0a2238;
  --muted:#60798d;
  --line:#dbe8f0;
  --soft:#f4f9fc;
  --shadow-soft:0 18px 55px rgba(7,43,70,.08);
  --shadow-card:0 24px 70px rgba(7,43,70,.12);
  --radius-lg:30px;
}

body{
  background:
    radial-gradient(circle at 8% 24%,rgba(30,189,226,.035),transparent 25%),
    radial-gradient(circle at 94% 60%,rgba(8,126,230,.035),transparent 28%),
    #fff;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

::selection{background:rgba(32,196,232,.24);color:var(--navy)}

/* Header */
.topbar{background:#051628;border-bottom:1px solid rgba(255,255,255,.06)}
.site-header{padding-top:10px}
.site-header .nav-wrap{
  height:72px;
  padding:0 18px;
  border:1px solid rgba(255,255,255,.11);
  border-radius:20px;
  background:rgba(5,25,44,.42);
  backdrop-filter:blur(18px) saturate(130%);
  box-shadow:0 18px 55px rgba(0,0,0,.11);
  transition:height .3s ease,border-radius .3s ease,background .3s ease,border-color .3s ease,box-shadow .3s ease;
}
.site-header.is-scrolled{padding-top:0;background:rgba(255,255,255,.9);border-bottom:1px solid rgba(10,58,91,.07)}
.site-header.is-scrolled .nav-wrap{
  height:74px;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.brand img{width:190px;transition:transform .3s ease,filter .3s ease}
.brand:hover img{transform:translateY(-1px) scale(1.015)}
.desktop-nav{gap:25px}
.desktop-nav>a,.nav-dropdown>button{letter-spacing:-.01em}
.nav-dropdown>button{gap:7px}
.nav-chevron{width:13px;height:13px;flex:0 0 13px;transition:transform .25s ease;transform-origin:center;color:currentColor}
.nav-dropdown:hover>button .nav-chevron,.nav-dropdown:focus-within>button .nav-chevron{transform:rotate(180deg)}
.desktop-nav>a:after{bottom:-8px;height:3px;border-radius:99px;background:linear-gradient(90deg,var(--cyan),#5da4ff)}
.desktop-nav a.is-active:after{right:0}
.nav-dropdown__menu{
  border:1px solid rgba(7,47,77,.08)!important;
  border-radius:18px!important;
  box-shadow:0 24px 70px rgba(5,35,59,.16)!important;
  overflow:hidden;
}
.nav-dropdown__menu a{transition:background .2s ease,transform .2s ease!important}
.nav-dropdown__menu a:hover{transform:translateX(3px)}

/* Buttons */
.btn{
  position:relative;
  overflow:hidden;
  min-height:50px;
  padding:14px 23px;
  border-radius:14px;
  letter-spacing:-.01em;
  box-shadow:0 13px 32px rgba(8,126,230,.23);
  isolation:isolate;
}
.btn:before{
  content:"";
  position:absolute;
  inset:-2px;
  z-index:-1;
  background:linear-gradient(115deg,transparent 20%,rgba(255,255,255,.32) 43%,transparent 65%);
  transform:translateX(-120%);
  transition:transform .65s ease;
}
.btn:hover:before{transform:translateX(120%)}
.btn:hover{transform:translateY(-3px);box-shadow:0 19px 42px rgba(8,126,230,.3)}
.btn:active{transform:translateY(-1px)}
.btn--small{min-height:43px;padding:10px 17px}
.btn--ghost{box-shadow:none}
.btn--ghost:before{background:linear-gradient(115deg,transparent 20%,rgba(255,255,255,.16) 43%,transparent 65%)}

/* Cleaner section rhythm */
.section,.page-section{position:relative}
.page-section--soft,.problems,.comparison,.reviews{background-color:var(--soft)}
.page-section--soft{
  background-image:linear-gradient(rgba(7,60,94,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(7,60,94,.025) 1px,transparent 1px);
  background-size:46px 46px;
}
.section-heading,.inner-heading{margin-bottom:48px}
.section-heading p,.inner-heading p,.lead-copy,.content-copy>p{line-height:1.82}
.eyebrow{border-radius:99px}
.eyebrow:before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 0 5px rgba(32,196,232,.08)}
.eyebrow>span{display:none}

/* Homepage hero */
.hero{
  min-height:890px;
  padding-top:166px;
  background:
    radial-gradient(circle at 78% 28%,rgba(32,196,232,.18),transparent 29%),
    radial-gradient(circle at 18% 70%,rgba(28,112,220,.16),transparent 32%),
    linear-gradient(135deg,#051628 0%,#082a47 52%,#0a456a 100%);
}
.hero__grid{opacity:.75;background-size:76px 76px}
.hero__inner{grid-template-columns:1.04fr .96fr;gap:38px}
.hero h1{font-size:clamp(3.45rem,6vw,5.75rem);max-width:760px}
.hero__lead{max-width:620px;color:#c5d9e6}
.hero__visual{height:590px;transform-style:preserve-3d;perspective:1200px}
.hero__halo{
  width:500px;height:500px;right:-6px;top:45px;
  background:radial-gradient(circle,rgba(57,211,238,.18),rgba(20,118,202,.04) 58%,transparent 72%);
  box-shadow:inset 0 0 80px rgba(44,197,228,.08),0 0 90px rgba(23,149,210,.08);
  animation:none;
}
.hero__halo:before,.hero__halo:after{animation:none}
.hero__product{
  width:565px;
  right:-45px;
  top:2px;
  transform-origin:50% 55%;
  will-change:filter;
  animation:none;
  filter:drop-shadow(0 42px 42px rgba(0,0,0,.27));
}
.hero__visual:after,.media-panel:after,.inner-hero__visual.has-product-image:after,.solution__visual:after{
  content:"";
  position:absolute;
  z-index:2;
  top:-30%;left:-55%;
  width:38%;height:160%;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);
  transform:rotate(18deg);
  animation:imageShine 7s ease-in-out infinite;
}
.hero__visual:after{display:none}
.float-card{
  border:1px solid rgba(255,255,255,.78);
  box-shadow:0 20px 55px rgba(2,24,44,.19);
  transition:transform .35s ease,box-shadow .35s ease;
}
.float-card:hover{transform:translateY(-5px) scale(1.02);box-shadow:0 28px 65px rgba(2,24,44,.25)}
.float-card--top,.float-card--left,.float-card--bottom{animation:none}
.hero__stats{
  margin-top:10px;
  padding:25px 15px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:22px;
  background:rgba(255,255,255,.045);
  backdrop-filter:blur(12px);
}
.hero__stats div{border-right-color:rgba(255,255,255,.1)}

/* Product and content images */
.media-panel{
  min-height:490px;
  border:1px solid rgba(8,83,128,.08);
  background:
    radial-gradient(circle at 67% 22%,rgba(255,255,255,.8),transparent 25%),
    linear-gradient(145deg,#e9f8fc,#c7e6f3);
  box-shadow:0 28px 80px rgba(7,57,89,.11);
  isolation:isolate;
  transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s ease;
}
.media-panel:hover{transform:translateY(-6px);box-shadow:0 36px 95px rgba(7,57,89,.16)}
.media-panel:before{
  width:365px;height:365px;
  background:rgba(255,255,255,.58);
  box-shadow:0 0 0 42px rgba(255,255,255,.15),0 0 0 84px rgba(255,255,255,.07);
  animation:panelAura 6s ease-in-out infinite;
}
.media-panel img,.inner-hero__visual>img{
  will-change:transform,filter,opacity;
  transform-origin:center bottom;
}
.media-panel img{filter:drop-shadow(0 38px 34px rgba(8,61,96,.19));transition:filter .45s ease}
.media-panel:hover img{filter:drop-shadow(0 46px 40px rgba(8,61,96,.24))}
.media-panel__badge{
  left:22px;right:22px;bottom:20px;
  display:flex;align-items:center;justify-content:space-between;gap:15px;
  border:1px solid rgba(10,72,110,.07);
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(14px);
}
.media-panel__badge strong{font-size:1rem}

.image-motion{
  opacity:0;
  clip-path:inset(10% 0 10% 0 round 28px);
  transform:translateY(28px) scale(.94);
  transition:opacity .95s cubic-bezier(.2,.75,.2,1),transform 1.1s cubic-bezier(.2,.75,.2,1),clip-path 1.1s cubic-bezier(.2,.75,.2,1);
}
.image-motion.is-image-visible{opacity:1;clip-path:inset(0 round 0);transform:none}
.hero__product.image-motion.is-image-visible{animation:none}
.media-panel .image-motion.is-image-visible,.inner-hero__visual .image-motion.is-image-visible{
  animation:productDrift 6s ease-in-out 1s infinite;
}

/* Inner hero */
.inner-hero{
  min-height:545px;
  padding:185px 0 110px;
  background:
    radial-gradient(circle at 82% 20%,rgba(45,203,234,.2),transparent 26%),
    radial-gradient(circle at 15% 90%,rgba(17,112,220,.18),transparent 31%),
    linear-gradient(135deg,#05172a 0%,#082d4c 58%,#0a5578 100%);
}
.inner-hero__inner{gap:64px}
.inner-hero__copy h1{font-size:clamp(2.95rem,5.5vw,5rem)}
.inner-hero__visual{isolation:isolate}
.inner-hero__visual.has-product-image:before{
  content:"";position:absolute;width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle,rgba(91,218,239,.18),rgba(17,120,206,.03) 60%,transparent 72%);
  animation:panelAura 6s ease-in-out infinite;
}
.inner-hero__card{
  border-color:rgba(255,255,255,.18);
  background:linear-gradient(145deg,rgba(255,255,255,.12),rgba(255,255,255,.065));
  box-shadow:0 30px 75px rgba(0,0,0,.2);
  transition:transform .45s ease,box-shadow .45s ease,border-color .45s ease;
}
.inner-hero__card:hover{transform:translateY(-6px);border-color:rgba(105,221,241,.34);box-shadow:0 38px 85px rgba(0,0,0,.26)}
.inner-hero__ring{animation:haloPulse 5s ease-in-out infinite}

/* Cards */
.problem-card,.info-card,.service-card,.process-item,.symptom-card,.package-card,.contact-detail-card,.contact-form-card,.review-card,.accordion-item{
  transition:transform .38s cubic-bezier(.2,.75,.2,1),box-shadow .38s ease,border-color .38s ease,background .38s ease;
}
.problem-card,.info-card,.service-card,.process-item,.symptom-card,.package-card,.contact-detail-card,.contact-form-card{
  border-color:rgba(9,70,108,.095);
  box-shadow:0 12px 38px rgba(7,46,73,.055);
}
.problem-card:hover,.info-card:hover,.service-card:hover,.process-item:hover,.symptom-card:hover,.package-card:hover,.contact-detail-card:hover{
  transform:translateY(-7px);
  border-color:rgba(19,155,211,.23);
  box-shadow:var(--shadow-card);
}
.problem-card__icon,.info-card__icon,.service-card__icon,.symptom-card span,.contact-detail-card>span{
  box-shadow:inset 0 0 0 1px rgba(8,113,178,.05),0 10px 25px rgba(8,126,196,.08);
  transition:transform .35s ease,box-shadow .35s ease;
}
.problem-card:hover .problem-card__icon,.info-card:hover .info-card__icon,.service-card:hover .service-card__icon,.symptom-card:hover span,.contact-detail-card:hover>span{
  transform:translateY(-3px) rotate(-3deg) scale(1.04);
  box-shadow:0 14px 30px rgba(8,126,196,.15);
}
.metric-strip{border:0;gap:12px;background:transparent;overflow:visible}
.metric-strip>div{border:1px solid rgba(9,70,108,.09);border-radius:18px;box-shadow:0 13px 38px rgba(7,46,73,.055)}
.package-card--featured{border-color:rgba(8,143,225,.7);box-shadow:0 27px 70px rgba(9,126,213,.15)}
.feature-band>div{backdrop-filter:blur(8px);transition:transform .35s ease,background .35s ease,border-color .35s ease}
.feature-band>div:hover{transform:translateY(-5px);background:rgba(255,255,255,.095);border-color:rgba(104,222,241,.28)}
.industry-tile{position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.08);box-shadow:0 20px 55px rgba(1,28,50,.12);transition:transform .4s ease,box-shadow .4s ease}
.industry-tile:after{content:"";position:absolute;inset:auto -25% -65% auto;width:190px;height:190px;border-radius:50%;background:rgba(63,209,235,.1);transition:transform .5s ease}
.industry-tile:hover{transform:translateY(-7px);box-shadow:0 28px 70px rgba(1,28,50,.2)}
.industry-tile:hover:after{transform:scale(1.18)}

/* Feature sections */
.solution__visual,.industries__panel{filter:drop-shadow(0 28px 55px rgba(5,49,77,.08))}
.quality-card,.industry-card,.comparison-table,.test-panel,.case-study{
  border:1px solid rgba(10,70,107,.09);
  box-shadow:0 27px 75px rgba(7,45,72,.09);
}
.review-card{border:1px solid rgba(9,70,108,.085);box-shadow:0 17px 50px rgba(7,46,73,.07)}
.review-card:hover{transform:translateY(-7px);box-shadow:0 29px 75px rgba(7,46,73,.13)}
.review-card--featured{box-shadow:0 30px 80px rgba(7,55,91,.2)}
.comparison-row{transition:background .22s ease,transform .22s ease}
.comparison-row:not(.comparison-row--head):hover{background:#f2fbfe;transform:translateX(3px)}
.accordion-item{overflow:hidden}
.accordion-item:hover{border-color:rgba(8,136,205,.21)}
.accordion-item.is-open{box-shadow:0 18px 45px rgba(7,50,78,.075);border-color:rgba(8,136,205,.19)}
.final-cta,.page-cta{background:linear-gradient(120deg,#0875d7,#0aa0d7 57%,#16bcd9)}
.page-cta:after,.final-cta:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.1) 50%,transparent 70%);transform:translateX(-100%);animation:ctaShine 8s ease-in-out infinite}

/* Form polish */
.contact-form input,.contact-form textarea,.contact-form select,.consultation-form input,.consultation-form textarea,.consultation-form select{
  border-radius:13px!important;
  background:#fbfdfe!important;
  transition:border-color .25s ease,box-shadow .25s ease,background .25s ease,transform .25s ease;
}
.contact-form input:focus,.contact-form textarea:focus,.contact-form select:focus,.consultation-form input:focus,.consultation-form textarea:focus,.consultation-form select:focus{
  background:#fff!important;
  transform:translateY(-1px);
  box-shadow:0 0 0 4px rgba(25,159,216,.105)!important;
}
.modal__dialog{border:1px solid rgba(9,70,108,.09);box-shadow:0 35px 110px rgba(1,25,44,.28)}
.whatsapp-float{box-shadow:0 16px 38px rgba(10,160,94,.28);animation:whatsappPulse 3s ease-in-out infinite}

/* Motion helpers */
@keyframes premiumFloat{
  0%,100%{transform:perspective(1200px) rotateX(var(--tilt-y,0deg)) rotateY(var(--tilt-x,0deg)) translate3d(0,0,0)}
  50%{transform:perspective(1200px) rotateX(var(--tilt-y,0deg)) rotateY(var(--tilt-x,0deg)) translate3d(0,-14px,0)}
}
@keyframes productDrift{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-10px) rotate(.35deg)}}
@keyframes haloPulse{0%,100%{transform:scale(1);opacity:.88}50%{transform:scale(1.035);opacity:1}}
@keyframes panelAura{0%,100%{transform:scale(1);opacity:.8}50%{transform:scale(1.06);opacity:1}}
@keyframes spinSlow{to{transform:rotate(360deg)}}
@keyframes spinReverse{to{transform:rotate(-360deg)}}
@keyframes cardBob{0%,100%{translate:0 0}50%{translate:0 -7px}}
@keyframes imageShine{0%,18%{left:-60%;opacity:0}30%{opacity:.65}46%,100%{left:125%;opacity:0}}
@keyframes ctaShine{0%,65%{transform:translateX(-100%)}82%,100%{transform:translateX(100%)}}
@keyframes whatsappPulse{0%,100%{transform:translateY(0);box-shadow:0 16px 38px rgba(10,160,94,.28)}50%{transform:translateY(-4px);box-shadow:0 21px 48px rgba(10,160,94,.36)}}

@media (max-width:1050px){
  .site-header{padding-top:6px}
  .hero{min-height:auto}
  .hero__inner{gap:10px}
  .hero__visual{height:530px}
  .hero__product{right:-80px;width:540px}
  .media-panel__badge{align-items:flex-start;flex-direction:column;gap:2px}
}

@media (max-width:760px){
  .topbar{display:none}
  .site-header{top:0;padding:9px 0}
  .site-header .nav-wrap,.site-header.is-scrolled .nav-wrap{height:62px;padding:0 12px;border-radius:17px;border:1px solid rgba(255,255,255,.11)}
  .site-header.is-scrolled{padding:7px 0;background:rgba(255,255,255,.9)}
  .site-header.is-scrolled .nav-wrap{background:rgba(255,255,255,.78);border-color:rgba(7,55,89,.07);box-shadow:0 13px 38px rgba(7,43,70,.08)}
  .brand img{width:158px}
  .hero{padding-top:125px;min-height:auto}
  .hero h1{font-size:clamp(3rem,13.5vw,4.25rem)}
  .hero__visual{height:430px;margin-top:20px}
  .hero__product{width:445px;right:50%;translate:50% 0;top:4px}
  .hero__halo{width:350px;height:350px;right:50%;translate:50% 0;top:38px}
  .float-card--top{right:2px;top:60px}.float-card--left{left:0;top:240px}.float-card--bottom{right:8px;bottom:25px}
  .hero__stats{grid-template-columns:repeat(2,1fr);gap:20px 0;padding:23px 10px}
  .hero__stats div:nth-child(2){border-right:0}.hero__stats div:nth-child(-n+2){padding-bottom:15px;border-bottom:1px solid rgba(255,255,255,.09)}
  .inner-hero{padding-top:125px}
  .inner-hero__copy h1{font-size:clamp(2.65rem,12.5vw,4rem)}
  .media-panel{min-height:390px;border-radius:24px}
  .media-panel img{width:470px}
  .media-panel__badge{left:14px;right:14px;bottom:14px;padding:13px 15px}
  .metric-strip{gap:10px}
  .metric-strip>div{padding:22px 12px}
  .metric-strip strong{font-size:1.7rem}
  .page-section--soft{background-size:38px 38px}
  .btn{min-height:48px}
}

@media (max-width:500px){
  .hero__visual{height:390px}
  .hero__product{width:405px}
  .hero__halo{width:310px;height:310px}
  .float-card{padding:10px 12px;border-radius:13px}.float-card strong{font-size:.68rem}.float-card small{font-size:.58rem}.float-card__icon,.mini-ring{width:31px;height:31px}
  .float-card--left{top:225px}.float-card--bottom{bottom:18px}
  .media-panel{min-height:350px}
  .media-panel img{width:430px}
}

@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .image-motion{opacity:1;clip-path:none;transform:none}
}