:root{--bg:#0b0c10;--panel:#111217;--muted:#c7c9d1;--text:#e9eaee;--brand:#4cc9f0;--accent:#90e0ef;--shadow:0 10px 30px rgba(0,0,0,.25)}
*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--text);font:16px/1.6 system-ui,Segoe UI,Roboto,Arial}
a{color:var(--brand)}.container{width:min(1100px,92%);margin-inline:auto}
.topbar{background:#1b2433;border-bottom:1px solid #273041}.topbar .inner{display:flex;gap:14px;align-items:center;justify-content:flex-end;padding:8px 0;font-weight:600;flex-wrap:wrap}
.topbar a{display:inline-flex;gap:8px;align-items:center;color:#e8ecf3;text-decoration:none;opacity:.95}.topbar a:hover{opacity:1}
.site-header{position:sticky;top:0;background:rgba(11,12,16,.75);backdrop-filter:blur(10px);border-bottom:1px solid #1b1d25;z-index:20}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:12px 0}.brand{display:flex;gap:12px;align-items:center;text-decoration:none;color:var(--text)}
.logo{height:68px;border-radius:10px}.nav a{color:var(--muted);text-decoration:none;margin-left:18px}.nav a:hover{color:var(--text)}
.hero{background:linear-gradient(180deg, rgba(76,201,240,.12), rgba(0,0,0,0));padding:72px 0 56px}.hero h1{font-size:clamp(28px,4vw,48px);margin:0 0 10px}.hero p{max-width:60ch;color:var(--muted)}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px}.btn{display:inline-block;padding:12px 18px;border-radius:999px;text-decoration:none;font-weight:700;border:1px solid #2a2d37}
.btn.primary{background:var(--brand);color:#061018;border-color:transparent}.btn.ghost{background:transparent;color:var(--text)}
.section{padding:56px 0}.section.alt{background:#0f1117;border-block:1px solid #171924}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}.card{background:var(--panel);padding:18px;border:1px solid #191b25;border-radius:16px;box-shadow:var(--shadow)}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;align-items:start}
.gallery figure{margin:0}
.gallery img{display:block;width:100%;height:auto;border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.footer{padding:24px 0;color:#9aa0ac}.badges{display:flex;gap:10px;flex-wrap:wrap;list-style:none;padding:0;margin:14px 0 0}
.badges li{background:var(--panel);border:1px solid #191b25;padding:8px 12px;border-radius:999px;font-weight:600}
/* FAB */
.fab-whatsapp{position:fixed;right:calc(14px + env(safe-area-inset-right));bottom:calc(14px + env(safe-area-inset-bottom));z-index:50;background:#25D366;color:#061018;border:none;border-radius:999px;display:flex;align-items:center;gap:10px;padding:12px 16px;font-weight:800;box-shadow:0 10px 30px rgba(0,0,0,.35);text-decoration:none}
.fab-whatsapp img{width:22px;height:22px}.fab-whatsapp:hover{transform:translateY(-1px)}
/* Carousel */
.carousel{position:relative}.carousel-track{display:flex;gap:16px;overflow:hidden;scroll-behavior:smooth}
.carousel .review{min-width:calc((100% - 48px)/4);background:var(--panel);border:1px solid #191b25;border-radius:16px;padding:18px}
.carousel .arrow{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.4);color:#fff;border-radius:999px;width:48px;height:48px;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.45);backdrop-filter:blur(6px)}
.carousel .arrow:hover{background:rgba(255,255,255,.28)}
.carousel .arrow.left{left:-6px}.carousel .arrow.right{right:-6px}
@media (max-width:1024px){.carousel .review{min-width:calc((100% - 16px)/2)}}
@media (max-width:640px){.carousel .review{min-width:100%} .fab-whatsapp span{display:none} .topbar .inner{justify-content:center}}


/* r20 hero slider (keeps same size/position) */
.hero-slider{position:relative;width:100%;aspect-ratio:1200/650;overflow:hidden}
.hero-slider img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s ease}
.hero-slider img.active{opacity:1}


/* r21: show full hero images (no cropping), keep same slot size */
.hero-slider{background:#0f1117}
.hero-slider img{object-fit:contain}


/* r23: hero images fill the slot (cover) */
.hero-slider img{object-fit:cover !important}


/* r23-clean3: show full collage images without cropping */
.hero-slider{background:#0f1117;}
.hero-slider img{width:100%;height:100%;object-fit:contain !important;background:transparent;}


/* r23-clean4: make ghost buttons readable and sized */
.btn.ghost{color:#e8f0ff !important;border:1px solid rgba(255,255,255,.25);padding:12px 18px;border-radius:999px;font-weight:800}
.btn.ghost:focus,.btn.ghost:hover{background:rgba(255,255,255,.08)}

/* r23-clean4: collage/hero show full image, stretch width, keep height auto (no cropping) */
.hero-slider{height:auto !important;background:#0f1117}
.hero-slider img,
.hero-slider .slide img,
.hero-slider > figure img{display:block;width:100%;height:auto !important;object-fit:contain !important;background:#0f1117}


/* r23-clean5: CTA row alignment */
.cta-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.cta-row .btn{margin:0}
@media (max-width:520px){
  .cta-row{gap:10px}
  .cta-row .btn{padding:11px 16px}
}


/* r23-clean6: Collage slot height + animated Rennco background (no image crop) */
.hero-slider{position:relative;border-radius:18px;overflow:hidden;height:420px;background:#0f1117}
@media (max-width:980px){.hero-slider{height:360px}}
@media (max-width:720px){.hero-slider{height:300px}}
@media (max-width:520px){.hero-slider{height:260px}}

/* Animated background visible wherever images don't cover (letterbox areas) */
.hero-slider::before{
  content:""; position:absolute; inset:0; z-index:0;
  background: linear-gradient(135deg,#0f1117 0%,#10202a 35%,#27d3cb 50%,#10202a 65%,#0f1117 100%);
  background-size: 300% 300%;
  animation: renncoFlow 18s linear infinite;
  filter: saturate(1.1) brightness(.9);
}
@keyframes renncoFlow{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

/* Images show fully without crop and sit above the animated bg */
.hero-slider img{
  position:relative; z-index:1;
  width:100%; height:100%;
  object-fit:contain !important; background:transparent;
}


/* r23-clean7: hard overrides to prevent cropping/absolute positioning */
.hero-slider{position:relative !important; overflow:hidden; border-radius:18px}
.hero-slider img{
  position:relative !important;
  top:auto !important; left:auto !important; right:auto !important; bottom:auto !important;
  inset:auto !important;
  transform:none !important;
  width:100% !important; height:100% !important;
  object-fit:contain !important;
  background:transparent !important;
  z-index:1 !important;
}
.hero-slider::before{z-index:0 !important}

/* In case previous CSS used aspect-ratio on the image, neutralize it */
.hero-slider img{aspect-ratio:auto !important}


/* r23-clean8: hero slider with background animation and no image crop */
.hero-slider{position:relative;border-radius:16px;overflow:hidden;height:420px;background:#0f1117}
@media (max-width:980px){.hero-slider{height:360px}}
@media (max-width:720px){.hero-slider{height:300px}}
@media (max-width:520px){.hero-slider{height:260px}}

.hero-slider .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.35;z-index:0}

.hero-slider .slide{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .6s ease;z-index:1;background:transparent}
.hero-slider .slide.active{opacity:1}

/* Show FULL image with no cropping for IMG slides */
.hero-slider img.slide{object-fit:contain !important}

/* Video slides fill the frame for impact */
.hero-slider video.slide{object-fit:cover}

/* Ensure no earlier rules interfere */
.hero-slider img.slide, .hero-slider video.slide{top:auto !important;left:auto !important;right:auto !important;bottom:auto !important;transform:none !important}


/* r23-clean9: robust no-crop collage with background animation */
.hero-slider{position:relative;border-radius:16px;overflow:hidden;height:420px;background:#0f1117}
@media (max-width:980px){.hero-slider{height:360px}}
@media (max-width:720px){.hero-slider{height:300px}}
@media (max-width:520px){.hero-slider{height:260px}}

.hero-slider .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.35;z-index:0;pointer-events:none}

.hero-slider .slide{
  position:relative; z-index:1;
  display:flex; align-items:center; justify-content:center;
  width:100%; height:100%;
  opacity:0; transition:opacity .6s ease;
}
.hero-slider .slide.active{opacity:1}

.hero-slider .slide img{
  display:block;
  max-width:100%; max-height:100%;
  width:auto; height:auto;
  object-fit:contain; /* defensive; won't apply because we don't force width+height */
}

/* Foreground animation slides fill gracefully but won't affect image sizing */
.hero-slider .slide.anim video{
  width:100%; height:100%; object-fit:cover;
}

/* Kill previous absolute/inset rules from older builds */
.hero-slider img, .hero-slider video{position:relative !important; inset:auto !important; transform:none !important}


/* r23-clean10: teal animated background, no crop images, video once at start */
.hero-slider{position:relative;border-radius:16px;overflow:hidden;height:420px;background:#0f1117}
@media (max-width:980px){.hero-slider{height:360px}}
@media (max-width:720px){.hero-slider{height:300px}}
@media (max-width:520px){.hero-slider{height:260px}}

/* Animated teal gradient behind slides */
.hero-slider::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background: radial-gradient(60% 60% at 30% 40%, rgba(39,211,203,.25), transparent 70%),
              radial-gradient(50% 50% at 70% 60%, rgba(39,211,203,.18), transparent 75%),
              linear-gradient(135deg, #0f1117 0%, #10202a 35%, #0f1117 100%);
  animation: rennFlow 16s linear infinite;
  background-size: 120% 120%, 140% 140%, 100% 100%;
}
@keyframes rennFlow{
  0% { background-position: 0% 50%, 100% 50%, 0% 0% }
  50%{ background-position: 100% 50%, 0% 50%, 0% 0% }
  100%{ background-position: 0% 50%, 100% 50%, 0% 0% }
}

.hero-slider .slide{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  width:100%; height:100%; opacity:0; transition:opacity .6s ease; z-index:1;
}
.hero-slider .slide.active{opacity:1}

.hero-slider .slide img{
  max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain;
  box-shadow:none; background:transparent;
}
.hero-slider .slide.anim video{
  width:100%; height:100%; object-fit:cover; /* logo animation fills the frame */
}

/* Nuke old absolute rules from earlier builds */
.hero-slider img, .hero-slider video{position:relative !important; inset:auto !important; transform:none !important}


/* r23-clean11: absolute no-crop for collage images on all devices */
.hero-slider{position:relative;border-radius:16px;overflow:hidden}
.hero-slider .slide{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
}
.hero-slider .slide img{
  max-width:100% !important; max-height:100% !important;
  width:auto !important; height:auto !important;
  object-fit:contain !important; object-position:center center !important;
  position:relative !important; inset:auto !important; transform:none !important;
}
/* neutralize any aspect-ratio hacks from earlier */
.hero-slider .slide img{ aspect-ratio:auto !important; }


/* r23-clean12: keep slides neat */
.hero-slider .slide{overflow:hidden}


/* r23-clean13: taller slot + images not full width (no crop, side animation visible) */
.hero-slider{height:480px !important}
@media (max-width:980px){.hero-slider{height:400px !important}}
@media (max-width:720px){.hero-slider{height:320px !important}}
@media (max-width:520px){.hero-slider{height:280px !important}}

/* Do NOT let images fill the full width; center them so teal sides show */
.hero-slider .slide img{
  max-height:100% !important;
  height:auto !important;
  width:auto !important;
  max-width:88% !important;   /* desktop default */
}
@media (max-width:980px){
  .hero-slider .slide img{ max-width:92% !important; }
}
@media (max-width:720px){
  .hero-slider .slide img{ max-width:96% !important; }
}


/* r23-clean14: simple no-crop hero */
.hero-slider.simple{
  position:relative; height:480px !important; background:#0f1117; display:flex; align-items:center; justify-content:center;
}
@media (max-width:980px){.hero-slider.simple{height:400px !important}}
@media (max-width:720px){.hero-slider.simple{height:320px !important}}
@media (max-width:520px){.hero-slider.simple{height:280px !important}}

/* teal animated background behind container */
.hero-slider.simple::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background: radial-gradient(60% 60% at 30% 40%, rgba(39,211,203,.25), transparent 70%),
              radial-gradient(50% 50% at 70% 60%, rgba(39,211,203,.18), transparent 75%),
              linear-gradient(135deg, #0f1117 0%, #10202a 35%, #0f1117 100%);
  animation: rennFlow 16s linear infinite;
  background-size: 120% 120%, 140% 140%, 100% 100%;
}
@keyframes rennFlow{
  0% { background-position: 0% 50%, 100% 50%, 0% 0% }
  50%{ background-position: 100% 50%, 0% 50%, 0% 0% }
  100%{ background-position: 0% 50%, 100% 50%, 0% 0% }
}

.hero-slider.simple .slide{
  display:none; position:relative; z-index:1; width:100%; height:100%;
  display:none; align-items:center; justify-content:center;
}
.hero-slider.simple .slide.active{ display:flex; }

.hero-slider.simple .hero-img{
  max-height:100% !important; height:auto !important;
  max-width:88% !important; width:auto !important;
  object-fit:contain !important; object-position:center center !important;
  display:block;
}
@media (max-width:980px){ .hero-slider.simple .hero-img{ max-width:92% !important } }
@media (max-width:720px){ .hero-slider.simple .hero-img{ max-width:96% !important } }

.hero-slider.simple .slide.anim video{
  width:100%; height:100%; object-fit:cover; border:0; outline:0;
}


/* r23-clean15: remove background animation layer behind hero */
.hero-slider.simple::before{ content:none !important; animation:none !important; background:none !important; }


/* r23-clean16: videos grid similar to gallery cards */
.grid.videos-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 16px;
}
@media (max-width:720px){
  .grid.videos-grid{ grid-template-columns: 1fr; }
}
.page-title{ font-size:clamp(24px, 3vw, 36px); font-weight:800; margin:0 0 6px 0; }
.muted{ color:#a9b1bb; }


/* === r23 full hero fix (no crop, mobile-safe) === */
#hero-stage{
  position:relative;
  height:520px;
  max-width:1100px;
  margin:18px auto 0;
  background:#0e1117;
  border-radius:14px;
  overflow:hidden;
}
@media (max-width:980px){ #hero-stage{ height:440px; } }
@media (max-width:720px){ #hero-stage{ height:360px; } }
@media (max-width:520px){ #hero-stage{ height:300px; } }

#hero-stage video,
#hero-stage img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:contain;      /* show entire media */
  background:#0e1117;
  display:block;
  border:0;
}
#heroImg{ display:none; }


/* r23 full hero fixed3: smooth crossfade + tap overlay */
#hero-stage{ position:relative; overflow:hidden }
#hero-stage .fade-img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:contain; background:#0e1117;
  opacity:0; transition:opacity .6s ease;
}
#hero-stage .fade-img.show{ opacity:1; }

#heroKick{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  padding:10px 16px; border-radius:999px; font-weight:800;
  background:rgba(255,255,255,.9); color:#061018; border:1px solid rgba(0,0,0,.25);
  display:none; z-index:5;
}
#heroKick.visible{ display:block; }


/* r23 full hero fixed4: slightly longer crossfade for smoothness */
#hero-stage .fade-img{ transition: opacity .8s ease; }


/* fixed4-patched: keep WhatsApp button inside viewport and enable smooth scroll */
html{ scroll-behavior: smooth; }

#whatsapp-float, .whatsapp-float{
  position: fixed !important;
  bottom: 18px !important;
  right: 18px !important;
  z-index: 9999 !important;
  transform: none !important;
}
@media (max-width:520px){
  #whatsapp-float, .whatsapp-float{ bottom: 14px !important; right: 14px !important; }
}


/* fixed4-patched2: responsive nav + safe floating WhatsApp + global smooth scroll */
html{ scroll-behavior: smooth; }

/* Top nav row: allow wrapping on small screens */
.nav, .topnav, header nav, .nav-links{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap: 10px;
}
header nav a, .nav a, .topnav a, .nav-links a{
  padding: 8px 10px;
  white-space:nowrap;
}
@media (max-width: 560px){
  header nav a, .nav a, .topnav a, .nav-links a{ padding:6px 8px; font-size:14px; }
}

/* Floating WhatsApp: safe-area aware and always inside viewport */
#whatsapp-float, .whatsapp-float{
  position: fixed !important;
  bottom: max(16px, env(safe-area-inset-bottom) + 12px) !important;
  right:  max(16px, env(safe-area-inset-right) + 12px) !important;
  z-index: 9999 !important;
  transform: none !important;
}