/*
Theme Name: Santekita Final Liquid
Theme URI: https://santekita.lt
Author: Santekita
Description: Final Santekita theme using approved image with subtle professional liquid movement only inside existing pipe water areas.
Version: 4.1.2
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: santekita
*/

:root{
  --bg:#02070f;
  --panel:rgba(7,20,38,.88);
  --line:rgba(86,164,255,.24);
  --line2:rgba(86,164,255,.48);
  --blue:#0d7cff;
  --blue2:#42c8ff;
  --red:#d71920;
  --orange:#ff7a18;
  --text:#f8fbff;
  --muted:#bac8d8;
  --container:min(1220px,calc(100% - 72px));
  --shadow:0 28px 90px rgba(0,0,0,.48);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  color:var(--text);
  background:radial-gradient(circle at 80% 0%,rgba(13,124,255,.18),transparent 33%),linear-gradient(180deg,#02070f,#06121f 52%,#02070f);
  line-height:1.55;
  overflow-x:hidden;
}
body:before{
  content:"";
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.026) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);
  background-size:62px 62px;
  mask-image:linear-gradient(to bottom,black,transparent 78%);
}
a{color:inherit;text-decoration:none}
.container{width:var(--container);margin-inline:auto}
.btn{
  min-height:52px;padding:0 22px;border-radius:11px;border:1px solid rgba(255,255,255,.14);
  display:inline-flex;align-items:center;justify-content:center;gap:10px;font-weight:900;transition:.22s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn-blue{background:linear-gradient(135deg,#075ce8,#0aa8ff);box-shadow:0 18px 42px rgba(13,124,255,.34)}
.btn-dark{background:rgba(255,255,255,.045)}
.btn-red{background:linear-gradient(135deg,#b80e15,#f1332b)}
.eyebrow{color:var(--blue2);font-size:13px;font-weight:950;text-transform:uppercase;letter-spacing:1.4px}

/* TOPBAR */
.topbar{background:#020711;border-bottom:1px solid rgba(255,255,255,.08);font-size:14px}
.topbar .container{min-height:42px;display:grid;grid-template-columns:repeat(4,auto);justify-content:space-between;gap:18px;align-items:center}
.topbar span,.topbar a{color:#dce8f7;white-space:nowrap}
.topbar b{color:#fff}.ico{color:var(--blue2);margin-right:8px}

/* HEADER */
.site-header{position:sticky;top:0;z-index:50;background:rgba(2,7,16,.88);border-bottom:1px solid rgba(255,255,255,.08);backdrop-filter:blur(18px)}
.header-inner{height:78px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.logo{display:flex;align-items:center;gap:13px}
.logo svg{width:48px;height:58px;filter:drop-shadow(0 0 22px rgba(13,124,255,.55))}
.logo strong{font-size:26px;line-height:1;letter-spacing:.7px;display:block}
.logo small{display:block;color:#c7d6e8;font-weight:850;letter-spacing:1.35px;text-transform:uppercase;font-size:11px}
.nav{display:flex;gap:25px;align-items:center;font-size:14px;text-transform:uppercase;font-weight:900}
.nav a:hover{color:var(--blue2)}
.mobile-toggle{display:none;background:transparent;border:0;color:#fff;font-size:34px}

/* HERO */
.hero{
  min-height:710px;
  position:relative;
  overflow:hidden;
  padding:74px 0 34px;
  border-bottom:1px solid rgba(85,165,255,.14);
}
.hero:before{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(2,7,16,.99) 0%,rgba(2,7,16,.86) 34%,rgba(2,7,16,.28) 58%,rgba(2,7,16,.04) 100%),
    url("assets/images/hero-clean-scene.jpg");
  /* The source photo contains an old menu at its very top. Enlarging and
     lowering the crop keeps only the clean plumbing scene visible. */
  background-size:cover,auto 120%;
  background-position:center,center 58%;
  background-repeat:no-repeat;
  z-index:0;
}
.hero:after{content:"";position:absolute;inset:auto 0 0 0;height:150px;background:linear-gradient(0deg,#02070f,transparent);z-index:1}
.hero .container{position:relative;z-index:2}
.hero-copy{max-width:650px}
.hero h1{font-size:clamp(48px,6.5vw,78px);line-height:1.02;margin:18px 0;text-transform:uppercase;letter-spacing:-2px;text-shadow:0 20px 60px rgba(0,0,0,.52)}
.hero h1 span{display:block;color:var(--blue);text-shadow:0 0 42px rgba(13,124,255,.58)}
.hero-location{font-size:25px;font-weight:950;text-transform:uppercase;margin-bottom:18px}
.hero p{font-size:18px;color:#d7e4f3;max-width:600px}
.hero-actions{display:flex;gap:16px;flex-wrap:wrap;margin-top:26px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:44px;max-width:860px}
.stat{display:flex;gap:12px;align-items:center}
.stat-icon{width:48px;height:48px;border:1px solid var(--line2);border-radius:16px;display:grid;place-items:center;color:var(--blue2);font-size:25px;background:rgba(13,124,255,.12)}
.stat b{display:block;font-size:24px}.stat span{color:var(--muted);font-size:14px}

/* SECTIONS */
.section{padding:56px 0;border-bottom:1px solid rgba(85,165,255,.10)}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:24px}
.section-head h2{font-size:36px;margin:5px 0 0;text-transform:uppercase;line-height:1.1}
.link{color:var(--blue2);font-weight:900}

/* SERVICES */
.services{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.service{
  min-height:350px;padding:26px;border:1px solid var(--line);border-radius:18px;
  background:radial-gradient(circle at 20% 0%,rgba(13,124,255,.16),transparent 36%),linear-gradient(180deg,rgba(9,26,48,.88),rgba(5,16,31,.78));
  display:flex;flex-direction:column;box-shadow:0 18px 55px rgba(0,0,0,.28);transition:.22s ease;
}
.service:hover{transform:translateY(-4px);border-color:var(--line2);box-shadow:0 26px 70px rgba(13,124,255,.15)}
.service-icon{height:88px;font-size:58px;color:var(--blue2);display:flex;align-items:center}
.service h3{font-size:22px;line-height:1.15;margin:12px 0;text-transform:uppercase}
.service p{color:#c9d7e8;margin:0;font-size:15px}
.learn{margin-top:auto;color:var(--blue2);font-weight:900;text-transform:uppercase}

/* HEATING PREMIUM 3.0 */
.flush-section{padding:64px 0;border-bottom:1px solid rgba(85,165,255,.10)}
.flush-grid{display:grid;grid-template-columns:.48fr 1.52fr;gap:30px;align-items:center}
.flush-copy h2{font-size:clamp(34px,4vw,52px);line-height:1.04;margin:8px 0 18px;text-transform:uppercase}
.flush-copy h2 span{color:var(--blue)}
.flush-copy p{color:#cbd8e8}
.checks{list-style:none;padding:0;margin:22px 0;display:grid;gap:10px}
.checks li:before{content:"✓";color:var(--blue2);border:1px solid var(--line2);width:22px;height:22px;display:inline-grid;place-items:center;border-radius:50%;margin-right:10px}

.heating-art{
  min-height:620px;
  border-radius:24px;
  border:1px solid var(--line);
  background:url("assets/images/heating-premium-3.jpg");
  background-size:cover;
  background-position:center;
  box-shadow:var(--shadow);
  position:relative;
  overflow:hidden;
}
.heating-art:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(0deg,rgba(2,7,16,.03),transparent 70%);
  pointer-events:none;
}

/* Liquid shader overlays: no arrows, no outside flow */
.flow-layer{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden}
.pipe-liquid,
.radiator-liquid{
  position:absolute;
  overflow:hidden;
  pointer-events:none;
  isolation:isolate;
  transform:translateZ(0);
}

/* Only inside pipe shapes: rounded capsule strips placed over pipe glass */
.pipe-liquid{
  height:22px;
  border-radius:999px;
}
.pipe-liquid:before,
.radiator-liquid:before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  z-index:2;
}
.pipe-liquid:after,
.radiator-liquid:after{
  content:"";
  position:absolute;
  inset:-45% -40%;
  z-index:3;
}

/* dirty water */
.pipe-liquid.dirty,
.radiator-liquid.dirty{
  background:
    radial-gradient(ellipse at 50% 25%,rgba(255,177,80,.38),transparent 38%),
    linear-gradient(180deg,rgba(70,25,6,.86),rgba(135,63,14,.74) 52%,rgba(34,13,4,.96));
  box-shadow:
    inset 0 0 15px rgba(0,0,0,.75),
    inset 0 5px 12px rgba(255,160,55,.22),
    0 0 16px rgba(255,105,24,.28);
}
.pipe-liquid.dirty:before,
.radiator-liquid.dirty:before{
  background:linear-gradient(180deg,rgba(255,255,255,.26),transparent 35%,rgba(0,0,0,.20) 78%,rgba(255,255,255,.12));
  mix-blend-mode:screen;
}
.pipe-liquid.dirty:after,
.radiator-liquid.dirty:after{
  background:
    radial-gradient(circle at 10% 48%,rgba(255,170,64,.78) 0 4px,transparent 5px),
    radial-gradient(circle at 26% 58%,rgba(92,34,9,.95) 0 6px,transparent 7px),
    radial-gradient(circle at 43% 38%,rgba(221,113,30,.78) 0 4px,transparent 5px),
    radial-gradient(circle at 61% 54%,rgba(80,28,8,.88) 0 7px,transparent 8px),
    radial-gradient(circle at 78% 44%,rgba(255,139,34,.70) 0 3px,transparent 4px),
    repeating-linear-gradient(92deg,rgba(255,126,24,.0) 0 18px,rgba(255,126,24,.25) 19px 32px,rgba(62,21,6,.34) 33px 48px);
  animation:dirtyLiquidFlow 5.2s steps(9,end) infinite;
  opacity:.85;
}

/* clean water */
.pipe-liquid.clean,
.radiator-liquid.clean{
  background:
    radial-gradient(ellipse at 50% 23%,rgba(255,255,255,.46),transparent 35%),
    linear-gradient(180deg,rgba(0,185,255,.70),rgba(0,103,255,.88) 52%,rgba(0,42,115,.95));
  box-shadow:
    inset 0 0 16px rgba(255,255,255,.24),
    inset 0 -10px 18px rgba(0,18,65,.45),
    0 0 22px rgba(0,180,255,.62),
    0 0 42px rgba(0,108,255,.22);
}
.pipe-liquid.clean:before,
.radiator-liquid.clean:before{
  background:linear-gradient(180deg,rgba(255,255,255,.45),transparent 35%,rgba(0,0,0,.20) 76%,rgba(255,255,255,.18));
  mix-blend-mode:screen;
}
.pipe-liquid.clean:after,
.radiator-liquid.clean:after{
  background:
    radial-gradient(circle at 12% 42%,rgba(255,255,255,.95) 0 3px,transparent 4px),
    radial-gradient(circle at 31% 56%,rgba(200,247,255,.75) 0 2px,transparent 3px),
    radial-gradient(circle at 54% 36%,rgba(255,255,255,.86) 0 3px,transparent 4px),
    radial-gradient(circle at 76% 60%,rgba(205,246,255,.72) 0 2px,transparent 3px),
    repeating-linear-gradient(96deg,rgba(255,255,255,0) 0 20px,rgba(130,230,255,.42) 21px 34px,rgba(255,255,255,.22) 35px 42px);
  animation:cleanLiquidFlow 2.25s linear infinite;
  opacity:.90;
}

/* Pipe positions tuned for final clean 3D image */
.dirty-pipe-1{left:8%;top:50.5%;width:39%}
.dirty-pipe-2{left:7%;top:62.8%;width:39%}
.dirty-pipe-3{left:8%;top:74.5%;width:36%}
.clean-pipe-1{left:56%;top:50.7%;width:37%}
.clean-pipe-2{left:58%;top:62.8%;width:35%}
.clean-pipe-3{left:61%;top:74.5%;width:30%}

/* Radiator inner liquid zones */
.dirty-radiator{
  left:16.2%;top:21.3%;width:25.8%;height:20.5%;
  border-radius:10px;
  opacity:.42;
}
.clean-radiator{
  left:58.3%;top:24.8%;width:26.8%;height:16.5%;
  border-radius:10px;
  opacity:.62;
}

/* Professional caustic shimmer */
.caustic{
  position:absolute;
  height:17px;
  border-radius:999px;
  pointer-events:none;
  z-index:7;
  opacity:.55;
  mix-blend-mode:screen;
  filter:blur(.25px);
}
.caustic.clean{
  background:repeating-linear-gradient(110deg,transparent 0 18px,rgba(255,255,255,.35) 19px 22px,transparent 23px 42px);
  animation:causticMove 2.8s linear infinite;
}
.caustic.dirty{
  opacity:.22;
  background:repeating-linear-gradient(110deg,transparent 0 22px,rgba(255,185,75,.28) 23px 28px,transparent 29px 48px);
  animation:dirtyCausticMove 5.8s steps(8,end) infinite;
}
.dc1{left:8%;top:51%;width:39%}
.dc2{left:7%;top:63.3%;width:39%}
.dc3{left:8%;top:75%;width:36%}
.cc1{left:56%;top:51.2%;width:37%}
.cc2{left:58%;top:63.3%;width:35%}
.cc3{left:61%;top:75%;width:30%}

/* hide any fallback old artifacts */
.pipe-arrow,.flow-arrow,.water-band,.pipe-flow,.flow-pulse,.sludge-dot,.bubble-dot{
  display:none !important;
}

@keyframes dirtyLiquidFlow{
  0%{transform:translateX(0) scaleX(1);filter:blur(0)}
  28%{transform:translateX(18px) scaleX(.98);filter:blur(.2px)}
  44%{transform:translateX(18px) scaleX(.92);filter:blur(.35px)}
  58%{transform:translateX(4px) scaleX(1.02);filter:blur(.1px)}
  100%{transform:translateX(72px) scaleX(1);filter:blur(0)}
}
@keyframes cleanLiquidFlow{
  0%{transform:translateX(-70px)}
  100%{transform:translateX(150px)}
}
@keyframes causticMove{
  from{transform:translateX(-70px)}
  to{transform:translateX(150px)}
}
@keyframes dirtyCausticMove{
  0%{transform:translateX(0);opacity:.14}
  30%{transform:translateX(18px);opacity:.30}
  50%{transform:translateX(18px);opacity:.10}
  100%{transform:translateX(70px);opacity:.22}
}

/* BRANDS CTA FOOTER */
.brands{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
.brand{height:82px;border:1px solid var(--line);border-radius:14px;background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.035));display:grid;place-items:center;font-size:28px;font-weight:950}
.cta-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px;margin-top:30px}
.cta-box{min-height:100px;border-radius:16px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;gap:18px;font-size:22px;font-weight:900;background:rgba(8,24,44,.82)}
.cta-box small{display:block;color:#d4e3f4;font-size:16px;font-weight:600}
.footer{padding:30px 0;background:#020711;color:#aebfd2}
.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:20px}

/* PAGES */
.page-wrap{padding:70px 0}.page-card{padding:38px;border:1px solid var(--line);border-radius:22px;background:var(--panel);box-shadow:var(--shadow)}
.page-card h1{font-size:clamp(36px,5vw,64px);line-height:1.04;margin:0 0 16px;text-transform:uppercase}.page-card h2{font-size:32px;margin-top:30px}

/* Mobile only call button */
.mobile-call{display:none}.float{position:fixed;right:18px;top:44%;display:grid;gap:10px;z-index:70}
.float a{width:60px;height:60px;border-radius:18px;display:grid;place-items:center;font-size:25px;box-shadow:0 18px 45px rgba(0,0,0,.4)}.float .call{background:#0d7cff}

/* MOBILE */
@media(max-width:980px){
  :root{--container:calc(100% - 32px)} body{padding-bottom:78px}
  .topbar{font-size:12px;overflow:hidden}.topbar .container{min-height:34px;display:flex;align-items:center;justify-content:flex-start;gap:12px;overflow-x:auto;white-space:nowrap;padding:7px 0;scrollbar-width:none}.topbar .container::-webkit-scrollbar{display:none}.topbar span,.topbar a{font-size:12px;line-height:1}.topbar .hide-mobile-alert{display:none}
  .header-inner{height:66px}.logo svg{width:38px;height:45px}.logo strong{font-size:22px}.logo small{font-size:10px}
  .nav{display:none;position:absolute;top:66px;left:0;right:0;background:#030914;padding:20px 28px;flex-direction:column;align-items:flex-start;border-bottom:1px solid rgba(255,255,255,.08)}.nav.open{display:flex}.mobile-toggle{display:block}
  .header-inner .btn{width:50px;height:50px;min-height:50px;padding:0;font-size:0}.header-inner .btn:before{content:"☎";font-size:22px}
  .hero{min-height:auto;padding:50px 0 30px}.hero:before{background:linear-gradient(90deg,rgba(2,7,16,.97) 0%,rgba(2,7,16,.78) 50%,rgba(2,7,16,.12) 100%),url("assets/images/hero-clean-scene.jpg");background-size:cover,auto 120%;background-position:center,center 58%;background-repeat:no-repeat}
  .hero h1{font-size:clamp(42px,12vw,58px)}.hero-location{font-size:20px}.hero p{font-size:17px}.hero-actions .btn{flex:1 1 220px}
  .stats{grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--line);border-radius:18px;background:rgba(7,21,39,.74);overflow:hidden}.stat{display:block;text-align:center;padding:16px 8px;border-right:1px solid rgba(255,255,255,.08)}.stat:last-child{border-right:0}.stat-icon{margin:0 auto 8px}.stat b{font-size:18px}
  .section,.flush-section{padding:46px 0}.services{display:flex;overflow-x:auto;gap:14px;padding-bottom:14px;scroll-snap-type:x mandatory;scrollbar-width:none}.services::-webkit-scrollbar{display:none}.service{flex:0 0 82%;min-height:350px;scroll-snap-align:start}
  .flush-grid{grid-template-columns:1fr}.heating-art{min-height:430px}
  .brands{display:flex;overflow-x:auto;gap:12px;scrollbar-width:none}.brands::-webkit-scrollbar{display:none}.brand{flex:0 0 155px;height:78px;font-size:22px}
  .cta-row{grid-template-columns:1fr}.float{display:none}.mobile-call{position:fixed;z-index:80;left:12px;right:12px;bottom:12px;display:flex;align-items:center;justify-content:center;min-height:56px;border-radius:16px;background:linear-gradient(135deg,#075ce8,#0aa8ff);font-weight:950;box-shadow:0 18px 50px rgba(13,124,255,.38)}
}
@media(max-width:560px){
  :root{--container:calc(100% - 28px)}.topbar .container{gap:10px}.topbar span,.topbar a{font-size:11.5px}.logo small{display:none}.logo strong{font-size:20px}.hero h1{font-size:40px}
  .stats{grid-template-columns:repeat(2,1fr)}.stat{border-bottom:1px solid rgba(255,255,255,.08)}.service{flex-basis:88%;min-height:365px}.services{margin-right:-14px}.section-head h2{font-size:28px}.flush-copy h2{font-size:34px}.footer-inner{display:block;text-align:center}
  .pipe-liquid{height:10px}.caustic{height:8px}.heating-art{min-height:340px}
}


/* =========================================================
   FINAL LIQUID PATCH — approved image only, no 2D overlays
   ========================================================= */
.heating-art{
  background-image:url("assets/images/heating-premium-3.jpg") !important;
  background-size:cover !important;
  background-position:center !important;
}
.flow-layer{display:none !important;}
.liquid-layer-final{
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
  overflow:hidden;
  opacity:.52;
}
.liquid-zone{
  position:absolute;
  overflow:hidden;
  border-radius:999px;
  mix-blend-mode:screen;
  filter:blur(.18px);
  transform:translateZ(0);
}
.liquid-zone:before{
  content:"";
  position:absolute;
  inset:-70% -60%;
  border-radius:inherit;
  background:
    radial-gradient(circle at 11% 45%,rgba(255,255,255,.26) 0 2px,transparent 3px),
    radial-gradient(circle at 28% 60%,rgba(255,255,255,.14) 0 3px,transparent 4px),
    radial-gradient(circle at 55% 42%,rgba(255,255,255,.22) 0 2px,transparent 3px),
    radial-gradient(circle at 78% 58%,rgba(255,255,255,.12) 0 3px,transparent 4px),
    repeating-linear-gradient(104deg,transparent 0 18px,rgba(255,255,255,.16) 21px 27px,transparent 30px 48px);
}
.liquid-zone.clean{
  background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(0,180,255,.20),rgba(0,75,255,.06));
  box-shadow:inset 0 0 8px rgba(255,255,255,.10),0 0 10px rgba(0,170,255,.10);
}
.liquid-zone.clean:before{animation:santekitaCleanWater 6.5s linear infinite;}
.liquid-zone.dirty{
  background:linear-gradient(180deg,rgba(255,176,70,.08),rgba(150,65,14,.15),rgba(60,22,5,.06));
  box-shadow:inset 0 0 8px rgba(255,170,70,.08),0 0 10px rgba(255,100,20,.06);
}
.liquid-zone.dirty:before{animation:santekitaDirtyWater 10s steps(12,end) infinite;}
/* Positions are intentionally narrow, matching only existing glass/liquid inside the approved image. */
.dirty-zone-1{left:9.0%;top:43.1%;width:37.0%;height:3.2%;}
.dirty-zone-2{left:4.9%;top:54.2%;width:41.2%;height:3.3%;}
.dirty-zone-3{left:8.5%;top:66.0%;width:36.8%;height:3.3%;}
.dirty-zone-4{left:5.0%;top:73.2%;width:40.0%;height:3.0%;}
.dirty-zone-rad{left:16.4%;top:22.9%;width:25.2%;height:11.3%;border-radius:10px;opacity:.32;}
.clean-zone-1{left:56.5%;top:43.5%;width:36.6%;height:3.3%;}
.clean-zone-2{left:58.2%;top:54.1%;width:35.3%;height:3.3%;}
.clean-zone-3{left:60.7%;top:66.2%;width:31.5%;height:3.2%;}
.clean-zone-4{left:86.4%;top:34.8%;width:5.1%;height:15.0%;transform:rotate(90deg);opacity:.32;}
.clean-zone-rad{left:58.4%;top:25.3%;width:26.6%;height:11.6%;border-radius:10px;opacity:.32;}
@keyframes santekitaCleanWater{
  from{transform:translateX(-18%)}
  to{transform:translateX(18%)}
}
@keyframes santekitaDirtyWater{
  0%{transform:translateX(-8%);opacity:.55}
  25%{transform:translateX(6%);opacity:.74}
  45%{transform:translateX(6%);opacity:.42}
  60%{transform:translateX(-3%);opacity:.62}
  100%{transform:translateX(12%);opacity:.54}
}
@media(max-width:560px){
  .liquid-layer-final{opacity:.42;}
}