:root {
  --ink: #061826;
  --panel: #0b2334;
  --cyan: #35f0dd;
  --blue: #28b8ff;
  --soft: #a8d8f7;
}

* { box-sizing: border-box; }
html { scroll-padding-top: 88px; }
body { min-height: 100vh; }

.skip-link {
  position: absolute;
  left: -999px;
  top: 1rem;
  z-index: 9999;
  border-radius: 999px;
  background: var(--cyan);
  color: var(--ink);
  padding: .75rem 1rem;
  font-weight: 800;
}
.skip-link:focus { left: 1rem; }

.site-shell {
  background:
    radial-gradient(circle at 20% 0%, rgba(53, 240, 221, .09), transparent 36rem),
    radial-gradient(circle at 85% 18%, rgba(40, 184, 255, .12), transparent 42rem),
    linear-gradient(180deg, #061826 0%, #071c2c 46%, #061826 100%);
}

.nav-link, .mobile-link {
  position: relative;
  transition: color .22s ease;
}
.nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -.4rem;
  height: 2px;
  background: linear-gradient(90deg, var(--cyan), var(--blue));
  transition: right .25s ease;
}
.nav-link:hover, .mobile-link:hover { color: var(--cyan); }
.nav-link:hover::after { right: 0; }

.animated-grid {
  background-image:
    linear-gradient(rgba(53, 240, 221, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(53, 240, 221, .07) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(to bottom, black 0%, transparent 84%);
  animation: gridMove 14s linear infinite;
}
@keyframes gridMove {
  from { background-position: 0 0; }
  to { background-position: 72px 72px; }
}

.gradient-text {
  background: linear-gradient(90deg, var(--cyan), var(--blue));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.eyebrow {
  color: var(--cyan);
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s ease, transform .8s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: .08s; }
.reveal-delay-2 { transition-delay: .16s; }
.reveal-delay-3 { transition-delay: .24s; }
.reveal-delay-4 { transition-delay: .32s; }

.metric {
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 1.1rem;
  background: rgba(255,255,255,.045);
  padding: 1rem;
  backdrop-filter: blur(14px);
}
.metric strong {
  display: block;
  color: var(--cyan);
  font-size: 1.45rem;
  line-height: 1.1;
  font-weight: 900;
}
.metric span {
  margin-top: .35rem;
  display: block;
  color: rgba(168,216,247,.82);
  font-size: .82rem;
}

.hero-device {
  position: relative;
  min-height: 560px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 2.2rem;
  background:
    linear-gradient(180deg, rgba(11,35,52,.9), rgba(8,24,38,.72)),
    radial-gradient(circle at 36% 24%, rgba(53,240,221,.16), transparent 18rem);
  box-shadow: 0 34px 120px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
  overflow: hidden;
}
.hero-device::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(53,240,221,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(53,240,221,.08) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: .55;
}
.floating-card { animation: float 6s ease-in-out infinite; }
@keyframes float {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

.system-canvas {
  position: absolute;
  inset: 42px;
}
.reservoir-tower {
  position: absolute;
  left: 18px;
  bottom: 60px;
  width: 260px;
  height: 340px;
  border: 2px solid rgba(168,216,247,.42);
  border-radius: 50% 50% 20px 20px / 8% 8% 20px 20px;
  background: linear-gradient(90deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  overflow: hidden;
  box-shadow: inset 0 0 32px rgba(40,184,255,.18);
}
.reservoir-tower::before {
  content: '';
  position: absolute;
  left: -2px;
  right: -2px;
  top: -16px;
  height: 42px;
  border-radius: 50%;
  border: 2px solid rgba(168,216,247,.5);
  background: linear-gradient(180deg, rgba(168,216,247,.2), rgba(8,24,38,.1));
}
.reservoir-water {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 56%;
  background: linear-gradient(180deg, rgba(40,184,255,.44), rgba(40,184,255,.18));
  animation: waterPulse 4s ease-in-out infinite;
}
@keyframes waterPulse {
  0%,100% { height: 54%; }
  50% { height: 58%; }
}
.water-line {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 55%;
  height: 24px;
  background:
    radial-gradient(60% 60% at 30% 10%, rgba(255,255,255,.44), transparent 50%),
    linear-gradient(90deg, transparent, rgba(53,240,221,.9), transparent);
  opacity: .8;
  animation: wave 3.8s linear infinite;
}
@keyframes wave {
  from { transform: translateX(-18px); }
  to { transform: translateX(18px); }
}
.level-dot {
  position: absolute;
  right: 28px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--cyan);
  box-shadow: 0 0 16px var(--cyan);
}
.dot-1 { top: 32%; }
.dot-2 { top: 52%; }
.dot-3 { top: 72%; }

.pipe {
  position: absolute;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(168,216,247,.5), rgba(255,255,255,.86), rgba(40,184,255,.55));
  box-shadow: 0 0 16px rgba(40,184,255,.35);
}
.pipe-main { left: 175px; right: 18px; bottom: 72px; height: 26px; }
.pipe-up { left: 282px; bottom: 72px; width: 26px; height: 158px; }
.pipe-gas { left: 385px; right: 72px; top: 110px; height: 18px; background: linear-gradient(90deg, rgba(53,240,221,.55), rgba(255,255,255,.8)); }
.pump-set {
  position: absolute;
  bottom: 96px;
  width: 118px;
  height: 86px;
  border-radius: 26px 26px 16px 16px;
  background: linear-gradient(180deg, #144d73, #061826);
  border: 1px solid rgba(168,216,247,.28);
  box-shadow: inset 0 12px 26px rgba(255,255,255,.08), 0 0 22px rgba(40,184,255,.18);
}
.pump-set::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -58px;
  width: 38px;
  height: 72px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(255,255,255,.8), rgba(40,184,255,.55));
  border-radius: 999px;
}
.pump-one { left: 296px; }
.pump-two { left: 450px; }
.gateway-panel {
  position: absolute;
  right: 34px;
  top: 82px;
  width: 154px;
  height: 210px;
  border-radius: 1.4rem;
  border: 1px solid rgba(168,216,247,.34);
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.03));
  box-shadow: 0 0 40px rgba(40,184,255,.16);
}
.gateway-panel span {
  display: block;
  height: 10px;
  width: 70px;
  margin: 22px auto;
  border-radius: 999px;
  background: var(--cyan);
  opacity: .8;
  box-shadow: 0 0 14px var(--cyan);
}
.meter {
  position: absolute;
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  border: 2px solid rgba(53,240,221,.82);
  border-radius: 24px;
  color: var(--cyan);
  background: rgba(6,24,38,.86);
  box-shadow: 0 0 30px rgba(53,240,221,.23);
}
.meter svg { width: 34px; height: 34px; }
.meter-water { left: 318px; top: 135px; }
.meter-gas { right: 58px; top: 318px; }
.data-node {
  position: absolute;
  width: 13px;
  height: 13px;
  border-radius: 999px;
  background: var(--cyan);
  box-shadow: 0 0 20px var(--cyan);
  animation: blink 2s ease-in-out infinite;
}
.node-1 { left: 285px; top: 226px; }
.node-2 { left: 552px; top: 122px; animation-delay: .4s; }
.node-3 { right: 32px; bottom: 76px; animation-delay: .8s; }
@keyframes blink {
  0%,100% { opacity: .55; transform: scale(.9); }
  50% { opacity: 1; transform: scale(1.2); }
}
.signal {
  position: absolute;
  z-index: 2;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: var(--cyan);
  box-shadow: 0 0 0 rgba(53,240,221,.6);
  animation: ping 2s cubic-bezier(0,0,.2,1) infinite;
}
.signal-a { left: 120px; top: 54px; }
.signal-b { right: 80px; bottom: 96px; animation-delay: .8s; }
@keyframes ping {
  75%,100% { box-shadow: 0 0 0 30px rgba(53,240,221,0); }
}
.telemetry-card {
  position: absolute;
  z-index: 3;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 1.2rem;
  background: rgba(4,17,28,.86);
  padding: 1rem 1.15rem;
  backdrop-filter: blur(18px);
  box-shadow: 0 22px 70px rgba(0,0,0,.28);
}
.telemetry-card span { display: block; font-weight: 900; font-size: 1rem; }
.telemetry-card strong { display: block; margin-top: .2rem; font-size: .9rem; color: white; }
.top-card { right: 38px; top: 34px; }
.bottom-card { left: 34px; bottom: 34px; }

.service-card {
  position: relative;
  overflow: hidden;
  min-height: 520px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 1.7rem;
  background: linear-gradient(180deg, rgba(14,45,66,.88), rgba(8,24,38,.84));
  padding: 1.55rem;
  transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease;
}
.service-card:hover {
  transform: translateY(-8px);
  border-color: rgba(53,240,221,.42);
  box-shadow: 0 24px 80px rgba(0,0,0,.28), 0 0 30px rgba(53,240,221,.08);
}
.service-card h3 {
  margin-top: 1.05rem;
  font-size: 1.35rem;
  line-height: 1.12;
  font-weight: 900;
  letter-spacing: -.03em;
}
.service-card p {
  margin-top: 1rem;
  color: rgba(168,216,247,.9);
  line-height: 1.75;
}
.service-card ul {
  margin-top: 1.2rem;
  display: grid;
  gap: .65rem;
  color: rgba(255,255,255,.75);
  font-size: .92rem;
}
.service-card li {
  display: flex;
  gap: .55rem;
  align-items: flex-start;
}
.service-card li::before {
  content: '';
  margin-top: .45rem;
  width: .45rem;
  height: .45rem;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--cyan);
  box-shadow: 0 0 12px rgba(53,240,221,.7);
}
.badge {
  display: inline-flex;
  border-radius: 999px;
  background: rgba(53,240,221,.12);
  color: var(--cyan);
  padding: .45rem .8rem;
  font-size: .78rem;
  font-weight: 900;
}
.service-visual {
  position: relative;
  height: 180px;
  margin: -1.55rem -1.55rem 1.5rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(53,240,221,.08), rgba(5,19,31,.08));
}

.icon-reservoir {
  position: absolute; left: 42px; bottom: 24px; width: 120px; height: 112px;
  border: 3px solid rgba(53,240,221,.55); border-radius: 50% 50% 18px 18px / 15% 15% 18px 18px;
  overflow: hidden;
}
.icon-reservoir span { position: absolute; left:0; right:0; bottom:0; height:55%; background: rgba(40,184,255,.46); animation: waterPulse 4s ease-in-out infinite; }
.icon-wave { position:absolute; left:26px; right:26px; bottom:70px; height:4px; background:linear-gradient(90deg,transparent,var(--cyan),transparent); box-shadow:0 0 16px var(--cyan); }
.icon-dots { position:absolute; right:50px; top:46px; display:grid; gap:12px; }
.icon-dots i { width:10px; height:10px; border-radius:999px; background:var(--cyan); box-shadow:0 0 14px var(--cyan); }

.pump-body { position:absolute; left:70px; top:68px; width:110px; height:70px; border:4px solid var(--blue); border-radius:18px; }
.pump-circle { position:absolute; left:42px; top:75px; width:76px; height:76px; border:4px solid var(--cyan); border-radius:999px; background:rgba(53,240,221,.06); }
.pump-circle::after { content:''; position:absolute; inset:23px; border-radius:999px; background:var(--cyan); }
.pump-pipe { position:absolute; left:5px; right:12px; top:104px; height:12px; border-radius:999px; background:linear-gradient(90deg,var(--blue),rgba(40,184,255,.15),var(--blue)); }
.pump-spark { position:absolute; right:60px; top:50px; width:52px; height:12px; background:var(--cyan); border-radius:999px; box-shadow:0 0 18px var(--cyan); }

.bill-sheet { position:absolute; left:58px; top:34px; width:112px; height:138px; border-radius:18px; border:3px solid rgba(168,216,247,.35); background:rgba(255,255,255,.08); padding:26px 18px; }
.bill-sheet span { display:block; height:9px; margin-bottom:14px; border-radius:99px; background:var(--cyan); box-shadow:0 0 12px rgba(53,240,221,.45); }
.bill-sheet span:nth-child(2) { width:72%; }
.bill-sheet span:nth-child(3) { width:48%; }
.bill-meter { position:absolute; right:48px; bottom:38px; display:grid; place-items:center; width:86px; height:86px; border-radius:999px; border:4px solid var(--blue); color:var(--cyan); font-weight:1000; background:rgba(6,24,38,.8); box-shadow:0 0 22px rgba(40,184,255,.28); }

.gas-flame { position:absolute; left:58px; top:48px; width:82px; height:106px; background:var(--cyan); border-radius:62% 38% 60% 40% / 64% 46% 54% 36%; transform:rotate(8deg); box-shadow:0 0 22px rgba(53,240,221,.3); }
.gas-flame::after { content:''; position:absolute; left:25px; bottom:18px; width:34px; height:48px; background:var(--blue); border-radius:62% 38% 60% 40%; opacity:.8; }
.gas-meter { position:absolute; right:46px; top:55px; width:96px; height:74px; border:3px solid var(--blue); border-radius:18px; background:rgba(255,255,255,.06); padding:15px; }
.gas-meter span { display:block; height:8px; border-radius:999px; background:var(--cyan); margin-bottom:15px; }
.gas-meter span:nth-child(2){ width:60%; }
.gas-signal { position:absolute; right:62px; bottom:38px; width:70px; height:4px; border-radius:999px; background:var(--cyan); box-shadow:0 0 16px var(--cyan); }

.flow-bg {
  background: radial-gradient(circle at 50% 35%, rgba(53,240,221,.08), transparent 38rem);
}
.step-item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  color: rgba(255,255,255,.88);
}
.step-item span {
  flex: 0 0 auto;
  color: var(--cyan);
  font-weight: 1000;
  letter-spacing: .05em;
}
.step-item p { line-height: 1.65; }

.flow-panel {
  position: relative;
  display: grid;
  gap: 1.1rem;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 2rem;
  background: rgba(4,17,28,.5);
  padding: 1.1rem;
  box-shadow: 0 24px 90px rgba(0,0,0,.25);
}
.flow-node {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 1rem;
  align-items: center;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 1.4rem;
  background: linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.025));
  padding: 1.1rem;
  color: var(--cyan);
}
.flow-node svg { width: 52px; height: 52px; }
.flow-node strong { display: block; color: white; font-size: 1.05rem; }
.flow-node span { display: block; margin-top: .2rem; color: rgba(168,216,247,.86); }
.flow-link {
  height: 34px;
  width: 3px;
  margin-left: 2.95rem;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--cyan), var(--blue));
  box-shadow: 0 0 18px rgba(53,240,221,.45);
}

.mini-card, .benefit {
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 1.5rem;
  background: rgba(255,255,255,.045);
  padding: 1.35rem;
  transition: transform .28s ease, border-color .28s ease;
}
.mini-card:hover, .benefit:hover { transform: translateY(-5px); border-color: rgba(53,240,221,.35); }
.mini-card strong, .benefit strong { display: block; margin-top: .8rem; font-size: 1.15rem; font-weight: 900; }
.mini-card p, .benefit p { margin-top: .6rem; color: rgba(168,216,247,.86); line-height: 1.65; }
.mini-icon, .benefit span {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 1rem;
  background: rgba(53,240,221,.12);
  color: var(--cyan);
  font-weight: 1000;
}
.target-chip {
  border: 1px solid rgba(53,240,221,.25);
  border-radius: 1.1rem;
  background: rgba(4,17,28,.55);
  color: rgba(255,255,255,.9);
  padding: 1rem 1.1rem;
  font-weight: 800;
}

.contact-glow {
  background: radial-gradient(circle at 15% 0%, rgba(53,240,221,.12), transparent 30rem), radial-gradient(circle at 85% 100%, rgba(40,184,255,.10), transparent 32rem);
}
.contact-row {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
.contact-row > span {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 1rem;
  background: rgba(53,240,221,.12);
  color: var(--cyan);
  font-weight: 1000;
}
.contact-row strong { display: block; color: white; }
.contact-row small { display: block; margin-top: .2rem; color: rgba(168,216,247,.82); line-height: 1.6; }
.contact-form {
  display: grid;
  gap: 1rem;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 2rem;
  background: rgba(255,255,255,.045);
  padding: 1.5rem;
  backdrop-filter: blur(20px);
}
.contact-form label {
  display: grid;
  gap: .5rem;
  color: rgba(255,255,255,.82);
  font-size: .9rem;
  font-weight: 700;
}
.contact-form input, .contact-form textarea, .contact-form select {
  width: 100%;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 1rem;
  background: rgba(4,17,28,.72);
  color: white;
  outline: none;
  padding: .95rem 1rem;
  font-size: 1rem;
  transition: border-color .22s ease, box-shadow .22s ease;
}
.contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus {
  border-color: rgba(53,240,221,.8);
  box-shadow: 0 0 0 4px rgba(53,240,221,.12);
}
.contact-form button {
  border-radius: 1rem;
  background: linear-gradient(90deg, var(--cyan), var(--blue));
  color: var(--ink);
  padding: 1rem;
  font-weight: 1000;
  transition: transform .22s ease, box-shadow .22s ease;
}
.contact-form button:hover { transform: translateY(-2px); box-shadow: 0 0 24px rgba(53,240,221,.25); }

.whatsapp-float {
  position: fixed;
  z-index: 45;
  right: 1.2rem;
  bottom: 1.2rem;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 999px;
  background: #22c55e;
  color: white;
  box-shadow: 0 18px 50px rgba(34,197,94,.35);
  transition: transform .22s ease;
}
.whatsapp-float:hover { transform: translateY(-4px) scale(1.03); }
.whatsapp-float svg { width: 32px; height: 32px; }

@media (max-width: 1120px) {
  .hero-device { min-height: 500px; }
  .system-canvas { inset: 30px; transform: scale(.85); transform-origin: center; }
}
@media (max-width: 640px) {
  html { scroll-padding-top: 76px; }
  .hero-device { min-height: 420px; border-radius: 1.6rem; }
  .system-canvas { inset: 12px; transform: scale(.62); transform-origin: center; }
  .telemetry-card { padding: .8rem; }
  .top-card { right: 16px; top: 16px; }
  .bottom-card { left: 16px; bottom: 16px; }
  .service-card { min-height: auto; }
  .service-visual { height: 160px; }
  .flow-node { grid-template-columns: 48px 1fr; }
  .flow-node svg { width: 42px; height: 42px; }
}

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