@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');
:root {
  --bg: #f7f7f5;
  --panel: #ffffff;
  --panel-soft: #f4f7fb;
  --soft-2: #324154;
  --soft: #1f2937;
  --muted: #58657a;
  --text: #111827;
  --line: rgba(17, 24, 39, 0.08);
  --primary: #0b1727;
  --primary-2: #1d4e89;
  --accent: #f4b942;
  --premium: #e8f0fa;
  --success: #1a8f5a;
  --danger: #d94f4f;
  --shadow: 0 22px 52px rgba(15, 23, 42, 0.08);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Inter', sans-serif;
  background:
    radial-gradient(circle at top left, rgba(148, 163, 184, 0.14), transparent 28%),
    radial-gradient(circle at bottom right, rgba(13, 59, 130, 0.05), transparent 26%),
    linear-gradient(180deg, #f7f7f5 0%, #f2f5f8 100%);
  color: var(--text);
}

img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
.container {
  width: min(1160px, calc(100% - 32px));
  margin: 0 auto;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(14px);
  background: rgba(255, 255, 255, 0.9);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.04);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 82px;
  gap: 18px;
}

.brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  flex-shrink: 0;
  max-width: 200px;
}

.brand-with-logo {
  display: flex;
  align-items: center;
  justify-content: center;
}

.brand-logo {
  width: clamp(120px, 12vw, 170px);
  max-width: 170px;
  min-width: 120px;
  height: auto;
  display: block;
  object-fit: contain;
}

.footer-brand {
  display: flex;
  align-items: center;
  width: fit-content;
}

.nav-menu {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
}

.nav-menu a {
  color: var(--soft);
  opacity: 0.85;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  transition: opacity 0.2s ease, color 0.2s ease;
}

.nav-menu a:hover {
  opacity: 1;
  color: var(--primary);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.9rem 1.4rem;
  border-radius: 12px;
  font-weight: 700;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  white-space: nowrap;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn-primary {
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color: #fff;
  box-shadow: 0 18px 32px rgba(11, 23, 39, 0.17);
}

.btn-secondary {
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.78);
  color: var(--text);
}

.hero {
  padding: 86px 0 56px;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: center;
  gap: 48px;
}

.eyebrow {
  display: inline-block;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary-2);
  background: rgba(29, 78, 137, 0.08);
  padding: 0.6rem 0.85rem;
  border-radius: 999px;
  margin-bottom: 18px;
}

.hero-copy h1 {
  margin: 0;
  font-size: clamp(2.8rem, 5vw, 5rem);
  line-height: 0.96;
  letter-spacing: -0.07em;
  max-width: 620px;
  color: var(--text);
}

.hero-copy p {
  margin-top: 22px;
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.8;
  max-width: 600px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 30px;
}

.hero-points {
  list-style: none;
  padding: 0;
  margin: 30px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 16px 20px;
  color: var(--text);
  font-weight: 600;
}

.hero-points li::before {
  content: '✓';
  display: inline-block;
  margin-right: 8px;
  color: var(--success);
}

.hero-panel {
  display: grid;
  gap: 18px;
}

.stat-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(244,246,249,0.96));
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: var(--shadow);
}

.stat-card.large { padding: 24px; }

.stat-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--muted);
  font-size: 0.9rem;
}

.positive { color: var(--success); font-weight: 700; }

.metric {
  margin-top: 18px;
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  font-weight: 800;
  letter-spacing: -0.06em;
}

.mini-bars {
  margin-top: 24px;
  height: 110px;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  align-items: end;
}

.mini-bars span {
  display: block;
  border-radius: 12px 12px 0 0;
  background: linear-gradient(180deg, #cfe0f4, #eff5fb);
}

.small-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 22px;
}

.small-row label {
  display: block;
  color: var(--muted);
  font-size: 0.8rem;
  margin-bottom: 8px;
}

.small-row strong {
  font-size: 1.5rem;
}

.trend { font-weight: 700; font-size: 0.82rem; }
.trend.up { color: var(--success); }
.trend.down { color: var(--danger); }

.stats-bar {
  padding: 20px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(211, 225, 242, 0.35), rgba(255,255,255,0.7));
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.stats-grid div {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: center;
}

.stats-grid strong {
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  color: var(--text);
}

.stats-grid span {
  color: var(--muted);
}

.section {
  padding: 110px 0;
}

.section-header {
  max-width: 760px;
  margin-bottom: 42px;
}

.section-header h2,
.feature-copy h2,
.about-box h2 {
  margin: 0;
  font-size: clamp(2.1rem, 4vw, 3.2rem);
  line-height: 1.18;
  letter-spacing: -0.06em;
}

.cards-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.card {
  background: linear-gradient(180deg, rgba(255,255,255,0.99), rgba(245,247,250,0.96));
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 24px;
  padding: 30px 24px;
  box-shadow: 0 16px 36px rgba(16, 32, 51, 0.04);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(29, 78, 137, 0.12), rgba(244, 185, 66, 0.18));
  color: var(--primary-2);
  font-size: 1.5rem;
  margin-bottom: 18px;
}

.card h3 {
  margin: 0 0 12px;
  font-size: 1.4rem;
  color: var(--text);
}

.card p {
  margin: 0;
  line-height: 1.8;
  color: var(--muted);
}

.alt-bg {
  background: rgba(11, 23, 39, 0.02);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.feature-layout {
  display: grid;
  grid-template-columns: 1fr 0.85fr;
  gap: 38px;
  align-items: center;
}

.check-list {
  list-style: none;
  padding: 0;
  margin: 28px 0 0;
  display: grid;
  gap: 18px;
  color: var(--text);
  font-weight: 600;
}

.check-list li::before {
  content: '✓';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(26, 143, 90, 0.12);
  color: var(--success);
  margin-right: 12px;
}

.feature-panel {
  display: flex;
  justify-content: center;
}

.mini-panel {
  width: min(100%, 480px);
  background: linear-gradient(180deg, #0f172a 0%, #1d2a39 100%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 26px;
  padding: 24px;
  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.14);
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: rgba(255,255,255,0.74);
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(148,163,184,0.12);
  color: #9be7b4;
  font-weight: 700;
}

.panel-values {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 22px;
}

.panel-values label,
.progress-group small {
  display: block;
  color: rgba(255,255,255,0.72);
  margin-bottom: 8px;
}

.panel-values strong { font-size: 1.5rem; color: #fff; }

.progress-group {
  display: grid;
  gap: 18px;
  margin-top: 26px;
}

.progress {
  height: 12px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255,255,255,0.08);
}

.progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #d9e7f8, #f4b942);
}

.about-box {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 30px;
  align-items: center;
  background: linear-gradient(180deg, rgba(255,255,255,0.99), rgba(244,246,249,0.97));
  border: 1px solid var(--line);
  border-radius: 30px;
  padding: 38px 30px;
  box-shadow: 0 18px 48px rgba(15, 30, 45, 0.04);
}

.about-box p {
  margin: 0;
  line-height: 1.9;
  color: var(--muted);
  font-size: 1.03rem;
}

.site-footer {
  padding: 52px 0 26px;
  background: linear-gradient(180deg, #0b1727 0%, #172433 100%);
  border-top: 1px solid rgba(255,255,255,0.06);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 32px;
  align-items: start;
}

.site-footer p,
.site-footer li {
  color: rgba(255,255,255,0.72);
  line-height: 1.8;
}

.site-footer h4 {
  margin: 0 0 18px;
  font-size: 1.1rem;
  color: #fff;
}

.site-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.copyright {
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.72);
  text-align: center;
}

.page-hero {
  padding: 110px 0 60px;
}

.narrow { max-width: 820px; }

.page-hero h1 {
  margin: 0 0 18px;
  font-size: clamp(2.4rem, 4vw, 3.8rem);
  line-height: 1.12;
  letter-spacing: -0.06em;
}

.page-hero p {
  margin: 0;
  color: var(--muted);
  font-size: 1.08rem;
  line-height: 1.8;
}

.text-link {
  display: inline-block;
  margin-top: 18px;
  color: #374151;
  font-weight: 700;
}

.service-card { min-height: 210px; }

.contact-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.contact-card { padding: 26px 22px; }
.contact-card h3 { margin-top: 0; color: var(--text); }
.contact-card p { margin-bottom: 0; color: var(--muted); }

.center { text-align: center; margin-inline: auto; }
.testimonial-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.quote-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 250px;
}
.quote-stars {
  color: #f4b942;
  letter-spacing: 0.2em;
  font-size: 0.9rem;
  margin-bottom: 16px;
}
.quote-card p { font-size: 1rem; line-height: 1.8; }
.quote-author {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 22px;
}
.quote-author strong { color: var(--text); }
.quote-author span { color: var(--muted); font-size: 0.86rem; }

.faq-list {
  display: grid;
  gap: 18px;
  max-width: 900px;
  margin: 0 auto;
}

.faq-item {
  background: rgba(255,255,255,0.94);
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 20px;
  padding: 22px 24px;
  box-shadow: 0 12px 28px rgba(16, 32, 51, 0.03);
}

.faq-item h3 { margin: 0 0 10px; font-size: 1.08rem; color: var(--text); }
.faq-item p { margin: 0; color: var(--muted); line-height: 1.7; }

.pricing-section { background: rgba(255,255,255,0.38); }

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
}

.pricing-card {
  background: linear-gradient(180deg, #fff, #f7f8f8);
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 24px;
  padding: 30px 24px;
  box-shadow: 0 16px 36px rgba(16, 32, 51, 0.04);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.pricing-card.featured {
  background: linear-gradient(180deg, #0f172a, #1c2a39);
  color: #fff;
  transform: translateY(-8px);
  box-shadow: 0 22px 48px rgba(15, 23, 42, 0.12);
}

.pricing-card.featured h3,
.pricing-card.featured p,
.pricing-card.featured li,
.pricing-card.featured .pricing-badge { color: #fff; }

.pricing-badge {
  display: inline-block;
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #374151;
  font-weight: 800;
  margin-bottom: 14px;
}

.pricing-card h3 {
  margin: 0;
  font-size: 2.2rem;
  letter-spacing: -0.06em;
}

.pricing-card p {
  margin: 6px 0 18px;
  color: var(--muted);
}

.pricing-card ul {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: grid;
  gap: 12px;
  color: var(--text);
}

.pricing-card li::before {
  content: '✓';
  color: var(--success);
  margin-right: 8px;
}

.pricing-card .btn { width: 100%; }

.floating-whatsapp {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 999;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.95rem 1.15rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #16a34a, #22c55e);
  color: #fff;
  font-weight: 800;
  letter-spacing: 0.02em;
  box-shadow: 0 18px 30px rgba(34, 197, 94, 0.25);
}

.card:hover,
.pricing-card:hover,
.faq-item:hover {
  box-shadow: 0 20px 42px rgba(15, 23, 42, 0.08);
  transform: translateY(-3px);
  transition: all 0.2s ease;
}

@media (max-width: 900px) {
  .hero-grid,
  .feature-layout,
  .about-box,
  .footer-grid {
    grid-template-columns: 1fr;
  }
  .cards-grid,
  .stats-grid,
  .testimonial-grid,
  .pricing-grid {
    grid-template-columns: 1fr 1fr;
  }
  .nav {
    flex-wrap: wrap;
    gap: 14px;
    padding: 16px 0;
  }
}

@media (max-width: 620px) {
  .nav {
    justify-content: center;
    text-align: center;
    flex-direction: column;
    padding: 14px 0;
  }
  .brand {
    max-width: 180px;
  }
  .brand-logo {
    width: clamp(120px, 44vw, 180px);
    max-width: 180px;
    min-width: 120px;
  }
  .nav-menu {
    width: 100%;
    justify-content: center;
    gap: 10px 14px;
    font-size: 0.82rem;
  }
  .cards-grid,
  .stats-grid,
  .contact-grid,
  .testimonial-grid,
  .pricing-grid {
    grid-template-columns: 1fr;
  }
  .btn {
    width: 100%;
  }
  .hero-actions {
    flex-direction: column;
  }
  .floating-whatsapp {
    right: 16px;
    bottom: 16px;
    padding: 0.8rem 1rem;
  }
}

.related-links{margin-top:28px;display:grid;gap:8px}.related-links .eyebrow{display:block;margin-bottom:7px}.related-links a{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--line);font-size:13px;color:var(--primary-2)}.related-links a span{color:var(--accent)}.page-content article h2{margin-top:28px}.page-content article p{color:var(--muted);line-height:1.8}


/* unified warehouse visual system */
:root{--bg:#f5f7f1;--panel:#fffefa;--panel-soft:#e7f2e8;--soft-2:#315552;--soft:#244541;--muted:#6d7d79;--text:#112a2c;--line:#d9e2db;--primary:#112a2c;--primary-2:#1b5a54;--accent:#ec7956;--premium:#d9f0e5;--success:#5eae6a;--shadow:0 24px 70px rgba(17,42,44,.1)}
body{font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--text)}
h1,h2,h3,h4,.brand,.eyebrow{font-family:'Space Grotesk',sans-serif}
.site-header{background:rgba(17,42,44,.96);border-bottom:1px solid rgba(255,255,255,.12);box-shadow:0 10px 30px rgba(17,42,44,.12)}
.nav{min-height:76px}.brand-with-logo{filter:none}.nav-menu a{color:#dcebe4;opacity:.82}.nav-menu a:hover{color:var(--accent);opacity:1}.btn{border-radius:2px}.btn-primary{background:var(--accent);color:#fff;box-shadow:0 9px 20px rgba(236,121,86,.2)}.btn-primary:hover{background:#f28a68}.btn-secondary{border:1px solid var(--line);color:var(--text);background:var(--panel)}
.page-hero{padding:92px 0 74px;background:var(--primary);color:#fff;position:relative;overflow:hidden}.page-hero:after{content:'WDM';position:absolute;right:-.04em;bottom:-.2em;color:rgba(255,255,255,.035);font:700 220px 'Space Grotesk';line-height:1}.page-hero .container{position:relative;z-index:1}.page-hero .eyebrow{color:var(--lime,#c8e86b);letter-spacing:.16em;text-transform:uppercase;font-size:11px;font-weight:700}.page-hero h1{font-size:clamp(42px,6vw,78px);letter-spacing:-.055em;line-height:1.02;max-width:850px;margin:18px 0}.page-hero p{max-width:690px;color:#c9dbd5;line-height:1.8}.section{padding:100px 0}.section-header h2,.feature-copy h2,.about-box h2{font-family:'Space Grotesk',sans-serif;letter-spacing:-.055em;line-height:1.06}.cards-grid{gap:14px}.card{border-radius:2px;background:var(--panel);border:1px solid var(--line);box-shadow:none;padding:30px 26px}.card:hover,.pricing-card:hover,.faq-item:hover{box-shadow:var(--shadow);transform:translateY(-5px)}.card h3{font-family:'Space Grotesk',sans-serif;letter-spacing:-.035em}.icon{border-radius:2px;background:var(--mint,#d9f0e5);color:var(--primary-2)}.alt-bg{background:#e7f2e8;border-color:var(--line)}.text-link{color:var(--primary-2)}
.feature-layout{gap:72px}.mini-panel{border-radius:2px;background:var(--primary);box-shadow:var(--shadow);border:1px solid rgba(200,232,107,.18)}.badge{border-radius:2px;background:rgba(200,232,107,.14);color:#c8e86b}.progress{border-radius:2px;background:rgba(255,255,255,.12)}.progress span{border-radius:0;background:linear-gradient(90deg,#c8e86b,#ec7956)}.check-list li:before{border-radius:2px;background:rgba(94,174,106,.15);color:var(--success)}.about-box{border-radius:2px;background:var(--panel);box-shadow:none;border:1px solid var(--line)}
.note{border-left:4px solid var(--accent);border-radius:0;background:#fff2df}.page-content article h2{font-family:'Space Grotesk',sans-serif;letter-spacing:-.045em}.related-links a{color:var(--primary-2)}.site-footer{background:#0b292a;border-top:0}.site-footer h4{font-family:'Space Grotesk',sans-serif}.site-footer a{color:#c8e86b}.copyright{border-color:rgba(255,255,255,.12)}
@media(max-width:620px){.site-header .nav{padding:14px 0}.page-hero{padding:68px 0 62px}.page-hero h1{font-size:48px}.section{padding:72px 0}.nav-menu a{color:#dcebe4}.page-content article h2{font-size:28px}}