/* root colors & reset */
:root{
  --blue-900:#002b64;--blue-700:#004aad;--blue-500:#007bff;--accent:#0066ff;
  --muted:#6b7483;--glass:rgba(255,255,255,0.08);--container:1200px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:"Poppins",system-ui,-apple-system,"Segoe UI",Roboto,Arial;
  background:#f7faff;color:#111;line-height:1.45;overflow-x:hidden;
}
.container{max-width:var(--container);margin:0 auto;padding:0 24px}

/* NAVBAR */
/* ===== MOBILE NAVBAR ===== */

/* Hamburger Icon */
.menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 26px;
  height: 20px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 130;
}

.menu-toggle span {
  display: block;
  width: 100%;
  height: 3px;
  background: #111;
  border-radius: 3px;
  transition: all 0.3s ease;
}

/* Navigation base (desktop) */
nav ul {
  display: flex;
  gap: 22px;
  align-items: center;
  list-style: none;
}

/* ============ Mobile Layout ============ */
@media (max-width: 768px) {
  .menu-toggle {
    display: flex;
  }

  nav {
    position: fixed;
    top: 70px;
    right: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.05);
    transform: translateY(-120%);
    transition: transform 0.4s ease;
    z-index: 120;
  }

  nav.active {
    transform: translateY(0);
  }

  nav ul {
    flex-direction: column;
    padding: 20px 0;
    gap: 18px;
  }

  nav a {
    font-size: 18px;
    color: #111;
  }

  /* Animate hamburger when open */
  .menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 6px);
  }
  .menu-toggle.active span:nth-child(2) {
    opacity: 0;
  }
  .menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -6px);
  }
}


/* page fade wrapper */
.page-wrap{transition:opacity .45s ease,transform .45s ease}

/* ===========================
/* ===== HERO SLIDER (Responsive 2:1 → 1.2:1) ===== */
.hero-slider {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 1; /* Desktop ratio */
  overflow: hidden;
}

@media (max-width: 768px) {
  .hero-slider {
    aspect-ratio: 1.2 / 1; /* Taller for mobile */
  }
}

/* Keep the rest of your slider styling */
.hero-slider .slide {
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.05);
  transition: opacity 1s ease, transform 1.2s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  color: white;
  padding: 0 20px;
}

.hero-slider .slide.active {
  opacity: 1;
  transform: scale(1);
}




/* sections */
.section-blue{background:linear-gradient(180deg,var(--blue-700),var(--blue-500));color:#fff}
.section-light{background:linear-gradient(180deg,#ffffff,#f0f5ff);color:#111}

/* MACHINES */
.machines{padding:110px 0}
.machines h2{font-size:32px;margin-bottom:6px}
.machines .subtitle{color:rgba(255,255,255,0.88);margin-bottom:34px}
.machine-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:26px}
.machine-card{background:var(--glass);border-radius:16px;padding:0;overflow:hidden;cursor:pointer;transition:transform .45s cubic-bezier(.2,.9,.3,1),box-shadow .45s;backdrop-filter:blur(6px)}
.machine-card img{display:block;width:100%;height:200px;object-fit:cover}
.machine-card h3{padding:18px 20px;color:#fff;font-weight:700}

/* MACHINE DETAIL */
.machine-detail{padding:120px 0;background:linear-gradient(180deg,#f0f5ff,#ffffff);position:relative}
.detail-inner{max-width:1200px;margin:0 auto;text-align:left;padding:0 24px}
.slider{position:relative;border-radius:18px;overflow:hidden;background:#fff}
.slider .slides{display:flex;transition:transform .6s ease}
.slider .slides img{width:100%;height:520px;object-fit:cover}
.slider-controls{position:absolute;left:0;right:0;top:0;bottom:0;pointer-events:none}
.icon-btn{position:absolute;top:50%;transform:translateY(-50%);pointer-events:auto;background:rgba(255,255,255,0.95);border:0;padding:10px 14px;border-radius:50%;cursor:pointer;font-size:20px;box-shadow:0 6px 22px rgba(16,24,40,0.06)}
#detailPrev{left:22px}#detailNext{right:22px}
.specs{margin-top:36px;background:transparent;padding:12px}
.specs h3{color:var(--blue-700);margin-bottom:10px}
.specs table{width:100%;border-collapse:collapse}
.specs th,.specs td{padding:12px 10px;border-bottom:1px solid #e6eefc}
.specs th{width:36%;color:var(--blue-500);text-align:left}
.detail-actions{display:flex;gap:16px;align-items:center;margin-top:22px}
.btn-outline{display:inline-block;padding:12px 18px;border-radius:999px;border:2px solid var(--blue-700);color:var(--blue-700);text-decoration:none;font-weight:700;transition:all .25s}
.btn-outline:hover{background:var(--blue-700);color:#fff}

/* STATS */
.stats{padding:80px 0;background:linear-gradient(180deg,#ffffff,#f8fbff);text-align:center}
.stats-inner{display:flex;justify-content:center;gap:48px;align-items:center;flex-wrap:wrap}
.stat{min-width:160px}
.stat-value{font-size:36px;font-weight:800;color:var(--blue-700);margin-bottom:8px}
.stat-label{color:#6b7483;font-weight:600}

/* PROCESS */
.process{padding:90px 0}
.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:28px}
.process-step{background:#fff;border-radius:12px;padding:24px;text-align:center;box-shadow:0 10px 30px rgba(8,24,64,0.04);transition:transform .36s}
.process-step .icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 14px;
  background: #f3f6fa;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.process-step .icon img {
  width: 50%;
  height: 50%;
  object-fit: contain;
  transition: transform 0.3s ease, filter 0.3s ease;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}

.process-step:hover .icon img {
  transform: scale(1.1);
  filter: brightness(1.1);
}


.process-step h4{margin-bottom:8px;color:var(--blue-700)}
.process-step p{color:#6b7483;font-size:14px}
@media (max-width:900px){.process-grid{grid-template-columns:repeat(2,1fr)}}

/* WHY CHOOSE (FULL WIDTH) */
.why-choose{position:relative;overflow:hidden;padding:88px 0;background:linear-gradient(180deg,#f9fbff,#eef5ff)}
.why-bg{position:absolute;inset:0;background:
  radial-gradient(800px 300px at 80% 20%, rgba(0,122,255,0.06), transparent 20%),
  radial-gradient(500px 250px at 10% 80%, rgba(0,74,173,0.03), transparent 20%);
pointer-events:none;transform:translateZ(0);will-change:transform;opacity:0.95}
.why-inner{position:relative;z-index:2;padding:0 24px;max-width:var(--container);margin:0 auto}
.section-title{font-size:30px;color:var(--blue-700);margin-bottom:8px}
.section-subtitle{color:var(--muted);margin-bottom:28px}
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:22px}
.why-card{background:transparent;border-radius:12px;padding:18px;text-align:left;display:flex;gap:14px;align-items:flex-start}
.img-wrap{width:120px;height:90px;flex:0 0 120px;border-radius:10px;overflow:hidden;position:relative;box-shadow:0 14px 30px rgba(6,60,150,0.06)}
.img-wrap img{width:100%;height:100%;object-fit:cover;transform-origin:center;transition:transform .8s cubic-bezier(.2,.9,.3,1)}
.why-card h4{margin:2px 0 8px;color:var(--blue-700);font-size:16px}
.why-card p{color:#545b66;font-size:14px;line-height:1.5}

/* parallax subtle movement helper */
.why-card.visible .img-wrap img{transform:translateY(var(--parallax, 0px)) scale(1.03)}
.why-card:hover .img-wrap img{transform:scale(1.06) translateY(var(--parallax, 0px))}

/* responsive why */
@media (max-width:1100px){.why-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.why-grid{grid-template-columns:1fr}.img-wrap{width:88px;height:64px}}

/* TESTIMONIALS */
.testimonials{padding:80px 0}
.testi-wrap{position:relative;max-width:900px;margin:0 auto}
.testi-list{position:relative;min-height:140px}
.testi{position:absolute;left:0;right:0;opacity:0;transform:translateY(10px);transition:opacity .6s,transform .6s;padding:22px;background:#fff;border-radius:12px;box-shadow:0 8px 30px rgba(0,0,0,0.05)}
.testi.active{opacity:1;transform:none}
.testi p{font-size:16px;color:#222;margin-bottom:10px}
.testi footer{font-size:13px;color:#6b7483}

/* GALLERY */
.gallery{padding:110px 0}
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-top:20px}
.gallery-grid img{width:100%;height:260px;object-fit:cover;border-radius:12px;transition:transform .45s ease,box-shadow .45s,opacity .6s;opacity:0;transform:translateY(36px)}
.gallery-grid img.visible{opacity:1;transform:none}

/* ABOUT & CONTACT */
.about{padding:90px 0}
.contact{padding:110px 0}

/* FOOTER */
.site-footer{padding:36px 0;background:#f0f5ff;color:#6b7483;text-align:center}

/* WHATSAPP */
.wa-chat{position:fixed;right:22px;bottom:92px;z-index:1100;width:56px;height:56px;border-radius:999px;display:flex;align-items:center;justify-content:center;background:#25d366;color:#fff;text-decoration:none;box-shadow:0 14px 40px rgba(37,211,102,0.18);transition:transform .22s}
.wa-chat:hover{transform:translateY(-6px)}

/* SCROLL TO TOP */
.to-top{position:fixed;right:22px;bottom:22px;background:var(--blue-700);color:#fff;border:0;padding:12px 14px;border-radius:999px;cursor:pointer;box-shadow:0 12px 32px rgba(2,14,80,0.12);display:none;z-index:1100}
.to-top.show{display:block}

/* LIGHTBOX */
.lightbox{position:fixed;inset:0;background:rgba(15,20,30,0.95);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .28s}
.lightbox.active{opacity:1;pointer-events:auto}
.lightbox-image{max-width:92%;max-height:86%;border-radius:12px;box-shadow:0 30px 80px rgba(0,0,0,0.6)}
.lightbox .close{position:absolute;top:28px;right:30px;font-size:36px;color:#fff;cursor:pointer}
.lightbox-btn{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,0.06);border:0;color:#fff;font-size:36px;padding:8px 12px;border-radius:50%;cursor:pointer}
.lightbox-btn.prev{left:30px}.lightbox-btn.next{right:30px}

/* REVEAL */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.9,.3,1)}
.reveal.visible{opacity:1;transform:none}
.reveal-group .reveal{transition-delay:.08s}

/* responsive minor */
@media (max-width:720px){
  .machine-card img{height:160px}
  .slider .slides img{height:320px}
  .gallery-grid img{height:160px}
  .hero-content h1{font-size:28px}
  nav ul{gap:12px;padding-right:8px}
}


/* ===== Slider Dots (Apple-style refinement + Portrait fix) ===== */

/* Machine Detail (overall layout) */
.machine-detail {
  padding: 120px 0;
  background: linear-gradient(180deg, #f0f5ff, #ffffff);
  position: relative;
  text-align: center;
}

.detail-inner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Slider container */
.slider {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  background: #fff;
  max-width: 600px; /* consistent portrait card width */
  margin: 0 auto;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
}

/* Slides */
.slides {
  display: flex;
  transition: transform 0.6s ease;
}

.slides img {
  width: 100%;
  height: 420px;
  object-fit: contain; /* keeps portrait images natural */
  flex-shrink: 0;
  background: #fff;
  padding: 10px;
  transition: opacity 0.5s ease;
}

/* Dots Navigation (Apple-like) */
/* ========== DOT NAVIGATION (Apple-style slider dots) ========== */
.dotnav {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
  z-index: 20; /* increased for safety */
  background: rgba(0, 0, 0, 0.25); /* ✨ slight contrast bar */
  padding: 6px 14px;
  border-radius: 12px;
  backdrop-filter: blur(6px);
}




.dotnav .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.3);
  transition: all 0.3s ease;
  cursor: pointer;
}

.dotnav .dot:hover {
  background: rgba(255, 255, 255, 0.7);
}

.dotnav .dot.active {
  background: white;
  transform: scale(1.2);
  border-color: white;
}


/* Arrow Buttons */
.icon-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.9);
  border: none;
  padding: 10px 14px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 22px;
  color: #333;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
  z-index: 10;
}

.icon-btn:hover {
  background: #fff;
  transform: translateY(-50%) scale(1.1);
}

#detailPrev {
  left: 20px;
}

#detailNext {
  right: 20px;
}

/* Responsive portrait scaling */
@media (max-width: 768px) {
  .slider {
    max-width: 90%;
  }

  .slides img {
    height: 340px;
  }

  .dotnav {
    bottom: 12px;
  }
}



.machine-desc {
  margin-top: 32px;
  background: #fff;
  padding: 24px 28px;
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(8, 24, 64, 0.04);
  text-align: left;
}

.machine-desc .desc-title {
  color: var(--blue-700, #345);
  font-weight: 700;
  margin-bottom: 8px;
  font-size: 20px;
}

.machine-desc .desc-text {
  color: #555;
  font-size: 15px;
  line-height: 1.6;
}