:root{
  --bg:#06121f;
  --card:rgba(255,255,255,.06);
  --stroke:rgba(255,255,255,.10);
  --stroke2:rgba(56,189,248,.25);
  --text:rgba(226,232,240,.92);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}

body{
  background:var(--bg);
}

.navlink{
  position:relative;
  opacity:.9;
  transition:opacity .2s ease;
}
.navlink:hover{opacity:1}
.navlink::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-10px;
  height:2px;
  background:linear-gradient(90deg, transparent, rgba(56,189,248,.9), transparent);
  transform:scaleX(0);
  transform-origin:center;
  transition:transform .25s ease;
}
.navlink:hover::after{transform:scaleX(1)}

.hero-mask{
  background:
    radial-gradient(900px 600px at 70% 20%, rgba(14,165,233,.18), transparent 60%),
    radial-gradient(700px 500px at 20% 0%, rgba(34,211,238,.12), transparent 55%),
    linear-gradient(to bottom, rgba(6,18,31,.20), rgba(6,18,31,.95));
}

.hero-card-water{
  background:
    radial-gradient(350px 220px at 20% 30%, rgba(56,189,248,.45), transparent 65%),
    radial-gradient(350px 220px at 80% 60%, rgba(34,211,238,.25), transparent 70%),
    linear-gradient(to bottom, rgba(2,132,199,.20), rgba(6,18,31,.65));
  mix-blend-mode:screen;
}

/* Hero quick info rows */
.infoRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:10px 0;
  border-bottom:1px dashed rgba(255,255,255,.10);
}
.infoRow:last-child{border-bottom:none}
.infoKey{
  font-size:12px;
  color:rgba(226,232,240,.70);
  flex:0 0 auto;
}
.infoVal{
  font-size:13px;
  font-weight:900;
  color:rgba(226,232,240,.92);
  text-align:left;
}

.water-noise{
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="240" height="240"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency=".9" numOctaves="3" stitchTiles="stitch"/></filter><rect width="240" height="240" filter="url(%23n)" opacity=".35"/></svg>');
  background-size:240px 240px;
  animation:noiseMove 10s linear infinite;
}
@keyframes noiseMove{
  0%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(-2%,1%,0)}
  100%{transform:translate3d(0,0,0)}
}

.stat{
  border-radius:18px;
  background:var(--card);
  border:1px solid var(--stroke);
  padding:14px 14px;
}
.statNum{font-weight:800;font-size:20px;line-height:1;color:rgba(186,230,253,.95)}
.statLabel{margin-top:6px;font-size:12px;color:rgba(226,232,240,.75)}

.feature{
  border-radius:22px;
  background:var(--card);
  border:1px solid var(--stroke);
  padding:18px 18px;
  position:relative;
  overflow:hidden;
  transition:transform .25s ease, background .25s ease, border-color .25s ease;
}
.feature::before{
  content:"";
  position:absolute;
  inset:-40px;
  background:radial-gradient(320px 200px at 30% 20%, rgba(56,189,248,.20), transparent 60%);
  opacity:.8;
}
.feature:hover{transform:translateY(-4px);border-color:rgba(56,189,248,.25)}
.featureIcon{position:relative;font-size:22px}
.featureTitle{position:relative;margin-top:10px;font-weight:800}
.featureText{position:relative;margin-top:8px;color:rgba(226,232,240,.8);line-height:1.8;font-size:14px}

.chip{
  border-radius:999px;
  border:1px solid var(--stroke);
  background:rgba(255,255,255,.04);
  padding:10px 14px;
  font-size:13px;
  color:rgba(226,232,240,.9);
  transition:background .2s ease, border-color .2s ease, transform .2s ease;
}
.chip:hover{background:rgba(255,255,255,.07); transform:translateY(-1px)}
.chipActive{background:rgba(14,165,233,.16); border-color:rgba(56,189,248,.32)}

/* Category cards */
.card{
  border-radius:26px;
  background:var(--card);
  border:1px solid var(--stroke);
  overflow:hidden;
  position:relative;
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.card:hover{transform:translateY(-6px);border-color:rgba(56,189,248,.28);box-shadow:0 20px 60px rgba(2,132,199,.18)}
.cardTop{
  height:190px;
  position:relative;
  overflow:hidden;
}
.cardTop::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to top, rgba(6,18,31,.98), rgba(6,18,31,.25), transparent);
}
.cardImg{
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(1.02);
  filter:saturate(1.05) contrast(1.03);
}
.cardBadge{
  position:absolute;
  top:14px;
  left:14px;
  z-index:2;
  border-radius:999px;
  padding:8px 12px;
  background:rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.12);
  font-size:12px;
  color:rgba(226,232,240,.92);
}
.cardBody{padding:16px 16px 18px}
.cardTitle{font-weight:900;font-size:18px;letter-spacing:-.01em}
.cardDesc{margin-top:8px;color:rgba(226,232,240,.82);font-size:14px;line-height:1.9}
.cardActions{margin-top:12px;display:flex;gap:10px;flex-wrap:wrap}
.cardBtn{
  border-radius:14px;
  padding:10px 12px;
  font-size:13px;
  font-weight:800;
  background:rgba(14,165,233,.16);
  border:1px solid rgba(56,189,248,.26);
  color:rgba(186,230,253,.98);
  transition:background .2s ease, transform .2s ease;
}
.cardBtn:hover{background:rgba(14,165,233,.22); transform:translateY(-1px)}
.cardBtnGhost{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
  color:rgba(226,232,240,.92);
}

/* Contact */
.contact-glow{
  background:radial-gradient(900px 500px at 60% 10%, rgba(14,165,233,.18), transparent 60%),
             radial-gradient(700px 450px at 20% 70%, rgba(56,189,248,.12), transparent 65%),
             linear-gradient(to bottom, rgba(6,18,31,.55), rgba(6,18,31,1));
}
.contactCard{
  display:flex;
  justify-content:space-between;
  gap:14px;
  padding:14px 16px;
  border-radius:18px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
  color:rgba(226,232,240,.92);
  transition:transform .2s ease, border-color .2s ease, background .2s ease;
}
.contactCard:hover{transform:translateY(-2px);border-color:rgba(56,189,248,.22);background:rgba(255,255,255,.06)}
.contactKey{font-size:12px;color:rgba(226,232,240,.70)}
.contactVal{font-size:14px;font-weight:800}

.formLabel{display:grid;gap:8px;font-size:13px;color:rgba(226,232,240,.86)}
.formInput{
  width:100%;
  border-radius:16px;
  padding:12px 12px;
  background:rgba(0,0,0,.18);
  border:1px solid rgba(255,255,255,.12);
  color:rgba(226,232,240,.92);
  outline:none;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.formInput:focus{border-color:rgba(56,189,248,.45);box-shadow:0 0 0 4px rgba(56,189,248,.10)}

/* Fix select dropdown (options) contrast on some browsers */
select.formInput{color:rgba(226,232,240,.92)}
select.formInput option{background-color:#0b1e33;color:#e2e8f0}

/* Swiper pagination spacing */
.swiper{padding-bottom:34px}
.swiper-pagination{bottom:10px !important}

/* Floating WhatsApp */
.wa-float{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:60;
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border-radius:999px;
  background:rgba(16,185,129,.16);
  border:1px solid rgba(52,211,153,.30);
  color:rgba(209,250,229,.98);
  backdrop-filter: blur(10px);
  box-shadow:0 18px 50px rgba(16,185,129,.16);
  transition:transform .2s ease, background .2s ease;
}
.wa-float:hover{transform:translateY(-2px);background:rgba(16,185,129,.20)}
.wa-text{font-weight:900;font-size:13px}
.wa-dot{width:8px;height:8px;border-radius:999px;background:#34d399;box-shadow:0 0 0 6px rgba(52,211,153,.14)}

/* Modal */
.modal{
  width:min(1000px, 94vw);
  border:none;
  padding:0;
  border-radius:26px;
  background:transparent;
}
.modal::backdrop{
  background:rgba(2,6,23,.7);
  backdrop-filter: blur(10px);
}
.modalInner{
  border-radius:26px;
  background:rgba(6,18,31,.72);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 30px 100px rgba(2,132,199,.18);
  overflow:hidden;
}
.modalHeader{
  padding:16px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  background:rgba(255,255,255,.04);
  border-bottom:1px solid rgba(255,255,255,.10);
}
.modalTitle{font-size:18px;font-weight:950;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.modalSubtitle{margin-top:4px;font-size:12px;color:rgba(226,232,240,.75)}
.modalClose{
  width:42px;height:42px;border-radius:16px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
  color:rgba(226,232,240,.92);
  transition:background .2s ease;
}
.modalClose:hover{background:rgba(255,255,255,.09)}

.modalBody{
  padding:16px;
  display:grid;
  gap:16px;
}
@media (min-width: 900px){
  .modalBody{grid-template-columns: 1.1fr .9fr; align-items:start}
}

.modalImageWrap{
  border-radius:20px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
}
.modalImageWrap img{width:100%;height:320px;object-fit:cover;display:block}

.modalDesc{color:rgba(226,232,240,.88);line-height:1.9;font-size:14px}
.modalBullets{margin-top:10px;display:grid;gap:8px;color:rgba(226,232,240,.84);font-size:13px;line-height:1.8}
.modalBullets li{position:relative;padding-right:18px}
.modalBullets li::before{content:"•";position:absolute;right:0;color:rgba(56,189,248,.9)}

.modalSpecs{
  margin-top:14px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.18);
  overflow:hidden;
}
.specRow{display:flex;justify-content:space-between;gap:14px;padding:12px 12px;border-top:1px solid rgba(255,255,255,.08)}
.specRow:first-child{border-top:none}
.specKey{font-size:12px;color:rgba(226,232,240,.72)}
.specVal{font-size:13px;font-weight:900;color:rgba(226,232,240,.92)}

.tableWrap{overflow:auto;max-height:280px}
.specTable{width:100%;border-collapse:collapse;font-size:13px}
.specTable th,.specTable td{padding:10px 10px;border-bottom:1px solid rgba(255,255,255,.08);text-align:right;white-space:nowrap}
.specTable th{color:rgba(226,232,240,.78);font-weight:900;background:rgba(255,255,255,.04);position:sticky;top:0}

.modalFooter{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  padding:14px 16px;
  border-top:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
}
.modalWhats{
  border-radius:16px;
  padding:10px 14px;
  background:rgba(16,185,129,.16);
  border:1px solid rgba(52,211,153,.28);
  color:rgba(209,250,229,.98);
  font-weight:950;
}
.modalWhats:hover{background:rgba(16,185,129,.20)}
.modalBack{
  border-radius:16px;
  padding:10px 14px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
  color:rgba(226,232,240,.92);
  font-weight:900;
}
.modalBack:hover{background:rgba(255,255,255,.08)}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .water-noise{animation:none}
  .feature,.card,.wa-float{transition:none}
}