:root {
  --bg:#faf8f3;
  --surface:#ffffff;
  --surface2:#f3f0e8;
  --ink:#142234;
  --muted:#617083;
  --line:#e6e1d8;
  --green:#2e5d3a;
  --gold:#b88a44;
  --accent:#1f4f39;
  --shadow:0 16px 42px rgba(20,34,52,.10);
  --radius:22px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:Arial,Helvetica,sans-serif;background:var(--bg);color:var(--ink);line-height:1.65}
a{text-decoration:none;color:inherit}
.topbar{background:#142234;color:#eaf0f6;padding:8px 5%;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:13px}
header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);padding:12px 5%;display:flex;justify-content:space-between;align-items:center;gap:16px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;color:var(--ink);line-height:1.15}
.brand img{width:52px;height:36px;object-fit:contain;background:#fff;border-radius:8px}
.brand span{font-size:18px}
nav{display:flex;gap:22px;color:var(--muted);font-size:15px;align-items:center}
nav a:hover{color:var(--accent)}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 20px;border-radius:999px;font-weight:800;border:1px solid transparent;transition:.2s ease;cursor:pointer;white-space:nowrap}
.btn-primary{background:var(--accent);color:white}
.btn-primary:hover{background:#173c2c;transform:translateY(-1px)}
.btn-outline{background:white;color:var(--accent);border-color:#cfd8cf}
.btn-outline:hover{border-color:var(--accent);transform:translateY(-1px)}
.hero{padding:86px 5% 64px;background:linear-gradient(135deg,#fff 0%,#f6f1e8 100%);border-bottom:1px solid var(--line)}
.hero-inner{display:grid;grid-template-columns:1fr .9fr;gap:46px;align-items:center;max-width:1240px;margin:0 auto}
.logo-panel{background:white;border:1px solid var(--line);border-radius:34px;padding:34px;box-shadow:var(--shadow)}
.logo-panel img{width:100%;display:block;object-fit:contain}
.eyebrow{font-size:13px;letter-spacing:1.6px;text-transform:uppercase;color:var(--green);font-weight:900;margin-bottom:16px}
h1{font-size:clamp(38px,5vw,70px);line-height:1.04;letter-spacing:-2.2px;color:var(--ink);margin-bottom:20px;font-weight:900}
h1 span{color:var(--green)}
.hero-text{font-size:18px;color:#314255;max-width:650px;margin-bottom:28px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:28px}
.trust-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.trust-card{background:white;border:1px solid var(--line);border-radius:18px;padding:15px;font-size:14px;color:var(--muted)}
.trust-card strong{display:block;color:var(--ink);margin-bottom:3px}
section{padding:76px 5%}
.section-head{max-width:820px;margin-bottom:32px}
.label{color:var(--gold);text-transform:uppercase;letter-spacing:1.3px;font-size:13px;font-weight:900;margin-bottom:10px}
h2{font-size:clamp(30px,4vw,48px);line-height:1.12;letter-spacing:-1.3px;color:var(--ink);margin-bottom:12px}
.section-head p{color:var(--muted);font-size:17px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{background:white;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:0 10px 28px rgba(20,34,52,.06);display:flex;flex-direction:column}
.card .img-wrap{height:235px;background:#f8f5ee;display:flex;align-items:center;justify-content:center;padding:8px}
.card img{width:100%;height:100%;object-fit:contain;object-position:center}
.card-body{padding:22px;display:flex;flex-direction:column;flex:1}
.card h3{font-size:21px;margin-bottom:8px;color:var(--ink)}
.card p{color:var(--muted);margin-bottom:18px;flex:1}
.tag-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.tag{background:#edf4ee;color:var(--green);padding:6px 10px;border-radius:999px;font-size:12px;font-weight:800}
.engineering{background:#f0f2f4}
.engineering .card .img-wrap{background:white}
.engineering .tag{background:#e7edf2;color:var(--ink)}
.split{display:grid;grid-template-columns:.9fr 1.1fr;gap:32px;align-items:center}
.about-box{background:white;border:1px solid var(--line);border-radius:28px;padding:32px;box-shadow:var(--shadow)}
.about-box ul{margin-left:20px;color:var(--muted)}
.why-grid,.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.why-card,.step{background:white;border:1px solid var(--line);border-radius:var(--radius);padding:24px}
.why-card .icon{width:42px;height:42px;border-radius:50%;background:var(--accent);color:white;display:grid;place-items:center;font-weight:900;margin-bottom:14px}
.why-card h3,.step h3{margin-bottom:8px;color:var(--ink)}
.why-card p,.step p{color:var(--muted);font-size:15px}
.process{background:white}
.steps{counter-reset:step}
.step:before{counter-increment:step;content:counter(step);width:40px;height:40px;border-radius:50%;background:var(--green);color:white;display:inline-grid;place-items:center;font-weight:900;margin-bottom:14px}
.quote{background:#142234;color:white}
.quote h2{color:white}
.quote p,.quote .section-head p{color:#d3dde8}
.quote-wrap{display:grid;grid-template-columns:.85fr 1.15fr;gap:32px;align-items:start}
form{background:white;color:var(--ink);border-radius:28px;padding:28px;display:grid;gap:15px;box-shadow:var(--shadow)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
label{font-weight:800;color:var(--ink);font-size:14px}
input,select,textarea{width:100%;margin-top:6px;border:1px solid var(--line);border-radius:14px;padding:13px 14px;font:inherit;background:#fbfcfd}
textarea{min-height:120px;resize:vertical}
.note{background:#f7f1e6;color:#5f4826;border:1px solid #ead8b9;padding:13px 14px;border-radius:14px;font-size:14px}
footer{background:#0b1624;color:#cfd8e3;padding:34px 5%;display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:24px;font-size:14px}
footer strong{color:white}
.footer-logo{width:110px;background:white;border-radius:12px;padding:8px;margin-bottom:12px}
.floating-whatsapp{position:fixed;right:18px;bottom:18px;z-index:80;background:#1fae58;color:white;box-shadow:var(--shadow);padding:12px 16px;font-size:14px}
@media(max-width:1050px){
  nav{display:none}
  .hero-inner,.split,.quote-wrap{grid-template-columns:1fr}
  .logo-panel{display:none}
  .trust-row,.why-grid,.steps{grid-template-columns:repeat(2,1fr)}
  .grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:680px){
  .topbar{font-size:11px;padding:7px 4%}
  header{padding:10px 4%;gap:10px}
  .brand img{width:42px;height:30px}
  .brand span{font-size:14px;max-width:105px}
  header .btn{padding:11px 15px;font-size:13px;width:auto}
  .hero{padding:54px 5% 42px;background:#fff}
  h1{font-size:38px;line-height:1.08;letter-spacing:-1px}
  .hero-text{font-size:16px}
  .hero-actions{display:grid;grid-template-columns:1fr;gap:10px}
  .hero-actions .btn{width:100%}
  .trust-row,.grid,.why-grid,.steps,.form-row,footer{grid-template-columns:1fr}
  section{padding:54px 5%}
  .card .img-wrap{height:210px}
  .floating-whatsapp{right:12px;bottom:12px;padding:10px 13px;font-size:13px;width:auto}
}
.clickable-card {
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.clickable-card:hover {
  transform: translateY(-4px);
}

.clickable-card .btn {
  cursor: pointer;
}
.clickable-card {
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.clickable-card:hover {
  transform: translateY(-4px);
}
.clickable-card {
  position: relative;
}

.product-title-link {
  color: inherit;
  text-decoration: none;
}

.product-title-link:hover {
  text-decoration: underline;
}
.why-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
    margin-top: 30px;
}

.why-card {
    background: #fff;
    padding: 24px;
    border-radius: 16px;
    border: 1px solid #e5e5e5;
    box-shadow: 0 4px 12px rgba(0,0,0,0.04);
}

.why-card h3 {
    margin-bottom: 10px;
    color: #1f2937;
}

.why-card p {
    margin: 0;
    color: #6b7280;
    line-height: 1.6;
}
.compliance-line {
  margin-top: 20px;
  font-weight: 700;
  font-size: 16px;
  color: #1f5c3f;
  background: #eef7f1;
  padding: 12px 16px;
  border-radius: 10px;
  display: inline-block;
}
.trust-strip,
.spec-grid,
.process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin: 24px auto;
  max-width: 1100px;
}

.trust-strip div,
.spec-card,
.process-grid div,
.quote-box {
  background: #ffffff;
  border: 1px solid #e8e1d8;
  border-radius: 18px;
  padding: 22px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.05);
}

.spec-card span {
  display: block;
  font-size: 13px;
  opacity: 0.7;
  margin-bottom: 8px;
}

.process-section,
.faq-section,
.quote-box {
  max-width: 1100px;
  margin: 60px auto;
}

.faq-section details {
  background: #ffffff;
  border: 1px solid #e8e1d8;
  border-radius: 14px;
  padding: 18px;
  margin-bottom: 12px;
}

.faq-section summary {
  cursor: pointer;
  font-weight: 600;
}

.quote-box {
  text-align: center;
  background: #f8f1e7;
}

@media (max-width: 768px) {

  .hero {
    padding: 48px 20px;
  }

  .hero-inner {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .hero h1 {
    font-size: 42px;
    line-height: 1.05;
  }

  .grid {
    grid-template-columns: 1fr;
  }

  .card img {
    height: auto;
    max-height: 260px;
    object-fit: cover;
  }

  header {
    padding: 14px 20px;
  }

  nav {
    gap: 12px;
    font-size: 13px;
  }

  .product-hero {
    display: flex;
    flex-direction: column;
    gap: 25px;
    text-align: center;
    margin: 40px auto;
    padding: 0 18px;
  }

  .product-hero > div:first-child {
    order: 2;
  }

  .product-image {
    order: 1;
    width: 100%;
  }

  .product-image img {
    width: 100%;
    max-width: 340px;
    height: auto;
    margin: 0 auto;
    display: block;
    object-fit: contain;
  }

  .product-hero h1 {
    font-size: 36px;
    line-height: 1.1;
  }

}
.table-wrap {
  width: 100%;
  overflow-x: auto;
}

.spec-table {
  width: 100%;
  border-collapse: collapse;
  background: #ffffff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,0.05);
}

.spec-table th,
.spec-table td {
  padding: 16px 18px;
  border-bottom: 1px solid #e8e1d8;
  text-align: left;
}

.spec-table th {
  background: #142234;
  color: #ffffff;
}

.spec-table td:first-child {
  font-weight: 700;
  color: #142234;
}

.spec-table tr:last-child td {
  border-bottom: none;
}

@media (max-width: 768px) {
  .spec-table th,
  .spec-table td {
    padding: 13px 14px;
    font-size: 14px;
  }
}
/* SOFT WEBSITE ANIMATIONS */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(22px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero,
.product-hero,
.card,
.why-card,
.step,
.spec-card,
.product-section,
.process-section,
.faq-section,
.quote-box {
  animation: fadeUp 0.7s ease both;
}

.card,
.spec-card,
.why-card,
.step,
.process-grid div,
.trust-strip div {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.card:hover,
.spec-card:hover,
.why-card:hover,
.step:hover,
.process-grid div:hover,
.trust-strip div:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 34px rgba(20,34,52,0.12);
}

.btn {
  transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(20,34,52,0.16);
}

.product-image img,
.card img {
  transition: transform 0.35s ease;
}

.product-image img:hover,
.card img:hover {
  transform: scale(1.03);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}
.product-gallery-slider {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 10px;
}

.gallery-card {
  min-width: 260px;
  scroll-snap-align: start;
  background: #fff;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 18px 45px rgba(0,0,0,0.12);
}

.gallery-card img {
  width: 100%;
  height: 330px;
  object-fit: cover;
  display: block;
}

.gallery-card p {
  margin: 0;
  padding: 14px 16px;
  font-weight: 600;
  text-align: center;
}

@media (min-width: 769px) {
  .product-gallery-slider {
    overflow-x: visible;
  }

  .gallery-card {
    flex: 1;
  }
}

@media (max-width: 768px) {
  .product-gallery-slider {
    width: 100%;
  }

  .gallery-card {
    min-width: 85%;
  }

  .gallery-card img {
    height: 260px;
  }
}