/* WASTRAQ Enterprise Redesigned Stylesheet */

/* ── cookie-consent.css ── */
#wastraq-cookie-banner {
  position: fixed;
  left: 20px;
  right: 20px;
  bottom: 20px;
  z-index: 999999;
  display: none;
}

.wastraq-cookie-box {
  max-width: 1100px;
  margin: 0 auto;
  background: linear-gradient(135deg, #061b22, #0b3431);
  color: #ffffff;
  border: 1px solid rgba(79, 174, 91, 0.35);
  border-radius: 22px;
  padding: 22px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.wastraq-cookie-box h3 {
  margin: 0 0 8px;
  font-size: 20px;
}

.wastraq-cookie-box p {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.6;
  font-size: 14px;
}

.wastraq-cookie-box a {
  color: #4fae5b;
  font-weight: 700;
  text-decoration: none;
}

.wastraq-cookie-actions {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}

.wastraq-cookie-actions button {
  border: none;
  border-radius: 999px;
  padding: 11px 18px;
  font-weight: 700;
  cursor: pointer;
}

#wastraq-accept-cookies {
  background: #4fae5b;
  color: #041017;
}

#wastraq-reject-cookies {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}

@media (max-width: 768px) {
  .wastraq-cookie-box {
    flex-direction: column;
    align-items: flex-start;
  }

  .wastraq-cookie-actions {
    width: 100%;
  }

  .wastraq-cookie-actions button {
    flex: 1;
  }
}

/* ── wastraq.css ── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --green-900: #0a2016;
  --green-800: #0f3422;
  --green-700: #14502e;
  --green-600: #166534;
  --green-500: #16a34a;
  --green-400: #22c55e;
  --green-300: #4ade80;
  --green-100: #dcfce7;
  --green-50:  #f0fdf4;
  --bg: #f8faf7;
  --bg-card: #ffffff;
  --text: #0d1f0b;
  --text-muted: #4b5e47;
  --text-light: #7c9177;
  --border: #e2ead0;
  --radius: 14px;
  --radius-sm: 8px;
  --shadow: 0 2px 24px rgba(10,32,22,.07);
  --shadow-lg: 0 8px 48px rgba(10,32,22,.12);
  --font: 'Plus Jakarta Sans', sans-serif;
  --mono: 'DM Mono', monospace;
  --nav-h: 72px;
}
.wq-container-fluid {
  width: min(100% - 40px, 1480px);
  margin-inline: auto;
}

html { scroll-behavior: smooth; }
body { font-family: var(--font); background: var(--bg); color: var(--text); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
.wq-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: -.01em;
  color: var(--green-900);
  flex-shrink: 0;
  text-decoration: none;
}

.wq-nav-logo-icon {
  width: 38px;
  height: 38px;
  object-fit: contain;
  border-radius: 50%;
  flex-shrink: 0;
  display: block;
}

.logo-text {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  font-family: var(--font), Arial, sans-serif;
  margin-left: 0;
  background: linear-gradient(
    90deg,
    #8adf54 0%,
    #1db1b3 25%,
    #4569a2 50%,
    #0d369c 75%,
    #0d369c 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
  line-height: 1;
}

.tm {
  font-size: 10px;
  font-weight: 800;
  color: #0d369c;
  -webkit-text-fill-color: #0d369c;
  position: relative;
  top: -8px;
  left: 2px;
  margin-left: 0;
  line-height: 1;
}

/* Footer smaller size */
.wq-footer .logo-text {
  font-size: 1.35rem;
  margin-left: 0;
}

.wq-footer .tm {
  color: #4ade80;
  -webkit-text-fill-color: #4ade80;
  font-size: 10px;
  top: -8px;
  left: 2px;
}
/* ── NAV ─────────────────────────────────────── */
.wq-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  background: rgba(248,250,247,0.88); backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 12px rgba(10,32,22,.04);
  transition: border-color .3s, box-shadow .3s, background .3s;
}
.wq-nav.scrolled { border-color: var(--border); box-shadow: var(--shadow); background: rgba(248,250,247,.97); }
.wq-nav-inner { max-width: 1280px; margin: 0 auto; padding: 0 32px; height: var(--nav-h); display: flex; align-items: center; gap: 32px; }
.wq-logo-light span { color: white; }
.wq-nav-links { list-style: none; display: flex; align-items: center; gap: 4px; margin-left: 8px; flex: 1; }
.wq-nav-links a { display: flex; align-items: center; gap: 4px; padding: 8px 14px; border-radius: var(--radius-sm); font-size: .9rem; font-weight: 500; color: var(--text-muted); transition: color .2s, background .2s; white-space: nowrap; }
.wq-nav-links a:hover, 
.wq-nav-links li.active > a {
  color: var(--green-700);
  background: var(--green-50);
  text-decoration: none;
}
.wq-nav-links li.has-dropdown {
  position: relative;
}
/* Invisible hover bridge so the cursor can travel from the nav link down to the dropdown */
.wq-nav-links li.has-dropdown::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 0;
  right: 0;
  height: 8px;
}
.wq-dropdown {
  position: absolute; top:(100%); left: 0; min-width: 240px;
  background: white; border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: 8px; opacity: 0; pointer-events: none;
  transform: translateY(-8px); transition: opacity .2s ease, transform .2s ease;
}
.wq-dropdown a { display: block; padding: 10px 14px; border-radius: var(--radius-sm); font-size: .875rem; color: var(--text-muted); }
.wq-dropdown a:hover { background: var(--green-50); color: var(--green-700); }
.wq-nav-links li.has-dropdown:hover .wq-dropdown,
.wq-dropdown:hover {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
}


/* ── BUTTONS ─────────────────────────────────── */
:root {
  --btn-gradient: linear-gradient(90deg, #6FBB59 0%, #159D91 45%, #0750AD 100%);
}

/* Button and mobile-nav classes (.wq-btn-*, .wq-hamburger, .wq-mobile-menu)
   are intentionally not redefined here — they're byte-for-byte identical
   to css/index.css and css/nav-footer.css, so this page inherits the
   shared button look/behavior directly rather than duplicating it. */

/* ── TICKER ──────────────────────────────────── */
.wq-ticker { background: var(--green-900); color: white; padding: 14px 0; overflow: hidden; }
.wq-ticker-track { display: flex; gap: 0; animation: ticker 30s linear infinite; white-space: nowrap; width: max-content; }
.wq-ticker-track:hover { animation-play-state: paused; }
.wq-ticker-item { display: flex; align-items: center; gap: 10px; padding: 0 28px; font-size: .875rem; font-weight: 500; letter-spacing: .01em; opacity: .85; }
.wq-ticker-item .dot { width: 6px; height: 6px; background: var(--green-400); border-radius: 50%; flex-shrink: 0; }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ── HERO ────────────────────────────────────── */
.wq-hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: calc(var(--nav-h) + 40px) 32px 80px;
  background: linear-gradient(160deg, var(--green-50) 0%, var(--bg) 50%, white 100%);
  position: relative;
  overflow: hidden;
  text-align: center;
}
.wq-hero::before {
  content: ''; position: absolute; top: -200px; right: -200px;
  width: 600px; height: 600px; border-radius: 50%;
  background: radial-gradient(circle, rgba(34,197,94,.12) 0%, transparent 70%);
  pointer-events: none;
}
.wq-hero-inner {
  max-width: 980px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.wq-hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
}
.wq-hero-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--green-100);
  color: var(--green-700);
  font-size: .8rem;
  font-weight: 700;
  padding: 6px 16px;
  border-radius: 100px;
  margin: 0 auto 24px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.wq-hero h1 {
  font-size: clamp(2.4rem, 5.2vw, 4.2rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.03em;
  color: var(--green-900);
  margin: 0 auto 24px;
  text-align: center;
  max-width: 880px;
}
.wq-hero h1 span { color: var(--green-500); }
.wq-hero p {
  font-size: 1.2rem;
  color: var(--text-muted);
  max-width: 680px;
  margin: 0 auto 36px;
  line-height: 1.75;
  text-align: center;
}
.wq-hero-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin: 0 auto;
}
.wq-hero-visual { position: relative; }
.wq-hero-mockup { background: white; border-radius: 20px; box-shadow: var(--shadow-lg), 0 0 0 1px var(--border); overflow: hidden; }
.wq-hero-mockup-bar { background: var(--green-900); padding: 12px 20px; display: flex; align-items: center; gap: 8px; }
.wq-hero-mockup-bar span { width: 10px; height: 10px; border-radius: 50%; }
.wq-hero-mockup-bar span:nth-child(1) { background: #ff5f57; }
.wq-hero-mockup-bar span:nth-child(2) { background: #ffbd2e; }
.wq-hero-mockup-bar span:nth-child(3) { background: #28c840; }
.wq-hero-mockup-bar .wq-url { flex: 1; background: rgba(255,255,255,.1); border-radius: 6px; padding: 4px 12px; font-size: .75rem; color: rgba(255,255,255,.5); font-family: var(--mono); margin-left: 8px; }
.wq-mockup-body { padding: 24px; background: var(--bg); }
.wq-mockup-stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; }
.wq-mockup-stat { background: white; border-radius: 10px; padding: 14px; border: 1px solid var(--border); }
.wq-mockup-stat .label { font-size: .7rem; color: var(--text-light); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.wq-mockup-stat .val { font-size: 1.4rem; font-weight: 800; color: var(--green-700); margin-top: 2px; }
.wq-mockup-stat .badge { display: inline-block; font-size: .65rem; font-weight: 700; padding: 2px 7px; border-radius: 100px; background: var(--green-100); color: var(--green-600); margin-top: 4px; }
.wq-mockup-map { background: white; border-radius: 10px; padding: 16px; border: 1px solid var(--border); }
.wq-mockup-map-placeholder { background: linear-gradient(135deg, var(--green-50) 0%, var(--green-100) 100%); border-radius: 8px; height: 140px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.wq-map-route { position: absolute; }
.wq-map-pin { width: 10px; height: 10px; background: var(--green-500); border-radius: 50%; border: 2px solid white; box-shadow: 0 2px 6px rgba(0,0,0,.2); position: absolute; }
.wq-map-label { font-size: .65rem; color: var(--text-light); font-weight: 600; }

/* ── TRUSTED BY ──────────────────────────────── */
.wq-trusted { padding: 40px 0 10px; background: white; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); overflow: hidden; }
.wq-trusted-label { text-align: center; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--text-light); margin-bottom: 32px; }
/* .wq-logos-track { display: flex; gap: 0; animation: logos 24s linear infinite; width: max-content; } */
/* .wq-logos-track:hover { animation-play-state: paused; } */
.wq-logo-item { padding: 0 48px; display: flex; align-items: center; }
.wq-logo-item:hover { opacity: 1; filter: grayscale(0); }
.wq-logo-item .logo-text { font-size: 1.1rem; font-weight: 800; letter-spacing: -.02em; color: var(--text); white-space: nowrap; }
@keyframes logos { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ── SECTIONS ────────────────────────────────── */
.wq-section { padding: 40px 32px; }
.wq-section-inner { max-width: 1280px; margin: 0 auto; }
.wq-section-tag { display: inline-flex; align-items: center; gap: 8px; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--green-600); margin-bottom: 14px; }
.wq-section-tag::before { content: ''; width: 20px; height: 2px; background: var(--green-400); border-radius: 2px; }
h2.wq-section-title { font-size: clamp(1.9rem, 3vw, 2.8rem); font-weight: 800; line-height: 1.15; letter-spacing: -.03em; color: var(--green-900); margin-bottom: 16px; }
.wq-section-sub { font-size: 1.05rem; color: var(--text-muted); max-width: 560px; line-height: 1.7; }
.wq-section-header { margin-bottom: 56px; }
.wq-section-header.center { text-align: center; }
.wq-section-header.center .wq-section-tag { justify-content: center; }
.wq-section-header.center .wq-section-sub { margin: 0 auto; }

/* ── PLATFORM SECTION ────────────────────────── */
.wq-platform { background: white; }
.wq-platform-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.wq-platform-tabs { display: flex; flex-direction: column; gap: 4px; margin-top: 32px; }
.wq-tab { border: none; background: none; text-align: left; padding: 16px 20px; border-radius: var(--radius); cursor: pointer; transition: background .2s; font-family: var(--font); border-left: 3px solid transparent; }
.wq-tab:hover { background: var(--green-50); }
.wq-tab.active { background: var(--green-50); border-left-color: var(--green-500); }
.wq-tab .tab-title { font-weight: 700; font-size: .95rem; color: var(--green-900); }
.wq-tab .tab-desc {
  font-size: .85rem;
  color: var(--text-muted);
  margin-top: 6px;
  line-height: 1.5;

  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(-4px);

  transition:
    max-height 0.35s ease,
    opacity 0.25s ease,
    transform 0.25s ease;
}

/* Description should show only on hover/focus, not by default */
.wq-tab:hover .tab-desc,
.wq-tab:focus-within .tab-desc {
  max-height: 90px;
  opacity: 1;
  transform: translateY(0);
}
.wq-tab {
  transition:
    background 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.25s ease;
}

.wq-tab:hover {
  background: var(--green-50);
  border-left-color: var(--green-500);
  box-shadow: 0 18px 45px rgba(10, 32, 22, 0.10);
  transform: translateY(-2px);
}
.wq-tab-visual { position: relative; border-radius: 20px; overflow: hidden; background: var(--bg); box-shadow: var(--shadow-lg); }
.wq-tab-panel { display: none; }
.wq-tab-panel.active { display: block; }

/* ── FEATURE BLOCKS ──────────────────────────── */
.wq-feature-block { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; padding: 80px 32px; }
.wq-feature-block.reverse { direction: rtl; }
.wq-feature-block.reverse > * { direction: ltr; }
.wq-feature-block-inner { max-width: 1280px; margin: 0 auto; width: 100%; }
.wq-feature-text h2 { font-size: clamp(1.7rem, 2.5vw, 2.4rem); font-weight: 800; line-height: 1.15; letter-spacing: -.03em; color: var(--green-900); margin-bottom: 16px; }
.wq-feature-text p { color: var(--text-muted); line-height: 1.75; margin-bottom: 28px; font-size: 1.02rem; }
.wq-feature-list { list-style: none; display: flex; flex-direction: column; gap: 10px; margin-bottom: 32px; }
.wq-feature-list li { display: flex; align-items: flex-start; gap: 12px; font-size: .92rem; color: var(--text-muted); }
.wq-feature-list li::before { content: ''; width: 20px; height: 20px; background: var(--green-100); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 6l3 3 5-5' stroke='%2316a34a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; }
.wq-visual-card { background: white; border-radius: 20px; box-shadow: var(--shadow-lg); border: 1px solid var(--border); overflow: hidden; }
.wq-visual-card-header { background: linear-gradient(135deg, var(--green-700), var(--green-500)); padding: 24px; color: white; }
.wq-visual-card-header h3 { font-size: 1rem; font-weight: 700; }
.wq-visual-card-header p { font-size: .85rem; opacity: .8; margin-top: 4px; }
.wq-visual-card-body { padding: 20px; }

/* ── STATS ───────────────────────────────────── */
.wq-stats { background: var(--green-900); padding: 80px 32px; }
.wq-stats-inner { max-width: 1280px; margin: 0 auto; text-align: center; }
.wq-stats-title { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--green-400); margin-bottom: 12px; }
.wq-stats-subtitle { font-size: clamp(1.6rem, 2.5vw, 2.2rem); font-weight: 800; color: white; margin-bottom: 60px; letter-spacing: -.02em; }
.wq-stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; }
.wq-stat-item { padding: 32px; border: 1px solid rgba(255,255,255,.1); border-radius: 16px; background: rgba(255,255,255,.04); transition: background .3s; }
.wq-stat-item:hover { background: rgba(255,255,255,.07); }
.wq-stat-num { font-size: clamp(2.5rem, 5vw, 3.8rem); font-weight: 800; color: var(--green-400); letter-spacing: -.04em; line-height: 1; margin-bottom: 8px; }
.wq-stat-label { font-size: .95rem; font-weight: 600; color: rgba(255,255,255,.7); }

/* ── TESTIMONIALS ────────────────────────────── */
.wq-testimonials { background: var(--bg); }
.wq-testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.wq-testimonial-card { background: white; border-radius: var(--radius); padding: 28px; border: 1px solid var(--border); box-shadow: var(--shadow); transition: transform .3s, box-shadow .3s; }
.wq-testimonial-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.wq-testimonial-card .stars { color: #f59e0b; font-size: 1rem; margin-bottom: 14px; letter-spacing: 2px; }
.wq-testimonial-card blockquote { font-size: .95rem; color: var(--text-muted); line-height: 1.7; font-style: italic; margin-bottom: 20px; }
.wq-testimonial-card .author { display: flex; align-items: center; gap: 12px; }
.wq-testimonial-card .author-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--green-100); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .9rem; color: var(--green-700); flex-shrink: 0; }
.wq-testimonial-card .author-name { font-weight: 700; font-size: .9rem; color: var(--green-900); }
.wq-testimonial-card .author-role { font-size: .8rem; color: var(--text-light); }

/* ── CTA BANNER ──────────────────────────────── */
.wq-cta { background: linear-gradient(135deg, var(--green-800) 0%, var(--green-600) 100%); padding: 40px 32px 80px; text-align: center; }
.wq-cta-inner { max-width: 680px; margin: 0 auto; }
.wq-cta h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 800; color: white; margin-bottom: 14px; letter-spacing: -.03em; }
.wq-cta p { color: rgba(255,255,255,.8); font-size: 1.05rem; margin-bottom: 36px; }
.wq-cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
/* .wq-btn-white / .wq-btn-outline-white intentionally not redefined —
   inherits the shared gradient look from css/index.css. */

/* ── FOOTER ──────────────────────────────────── */
.wq-footer { background: var(--green-900); color: rgba(255,255,255,.75); }
.wq-footer-top { max-width: 1280px; margin: 0 auto; padding: 72px 32px 48px; display: grid; grid-template-columns: 280px 1fr; gap: 64px; }
.wq-footer-brand p { font-size: .9rem; line-height: 1.7; margin-top: 16px; color: rgba(255,255,255,.5); }
.wq-social { display: flex; gap: 14px; margin-top: 24px; }
.wq-social a { color: rgba(255,255,255,.4); transition: color .2s; }
.wq-social a:hover { color: var(--green-400); }
.wq-footer-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.wq-footer-col h4 { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: rgba(255,255,255,.4); margin-bottom: 14px; }
.wq-footer-col a { display: block; font-size: .875rem; color: rgba(255,255,255,.6); padding: 4px 0; transition: color .2s; }
.wq-footer-col a:hover { color: var(--green-400); }
.wq-footer-bottom { border-top: 1px solid rgba(255,255,255,.08); padding: 20px 32px; max-width: 1280px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; font-size: .8rem; color: rgba(255,255,255,.35); }
.wq-footer-bottom strong { color: rgba(255,255,255,.6); }

/* ── PAGE HERO (inner pages) ─────────────────── */
.wq-page-hero { padding: calc(var(--nav-h) + 80px) 32px 80px; background: linear-gradient(160deg, var(--green-50) 0%, white 100%); text-align: center; }
.wq-page-hero-inner { max-width: 760px; margin: 0 auto; }
.wq-page-hero h1 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; letter-spacing: -.03em; color: var(--green-900); margin-bottom: 16px; }
.wq-page-hero p { font-size: 1.1rem; color: var(--text-muted); line-height: 1.7; }

/* ── CARDS ───────────────────────────────────── */
.wq-cards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.wq-card { background: white; border-radius: var(--radius); padding: 32px; border: 1px solid var(--border); box-shadow: var(--shadow); transition: transform .3s, box-shadow .3s, border-color .3s; }
.wq-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--green-300); }
.wq-card-icon { width: 48px; height: 48px; background: var(--green-100); border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; color: var(--green-600); }
.wq-card h3 { font-size: 1.05rem; font-weight: 700; color: var(--green-900); margin-bottom: 8px; }
.wq-card p { font-size: .9rem; color: var(--text-muted); line-height: 1.65; }
.wq-card .wq-link { display: inline-flex; align-items: center; gap: 6px; font-size: .875rem; font-weight: 700; color: var(--green-600); margin-top: 14px; transition: gap .2s; }
.wq-card .wq-link:hover { gap: 10px; }

/* ── ANIMATIONS ──────────────────────────────── */
.anim { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.anim.anim-in { opacity: 1; transform: translateY(0); }
.anim-delay-1 { transition-delay: .1s; }
.anim-delay-2 { transition-delay: .2s; }
.anim-delay-3 { transition-delay: .3s; }
.anim-delay-4 { transition-delay: .4s; }
.anim-delay-5 { transition-delay: .5s; }

/* ── FORM ────────────────────────────────────── */
.wq-form { display: grid; gap: 16px; }
.wq-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.wq-field { display: flex; flex-direction: column; gap: 6px; }
.wq-field label { font-size: .85rem; font-weight: 600; color: var(--text); }
.wq-field input, .wq-field textarea, .wq-field select { padding: 12px 16px; border: 1.5px solid var(--border); border-radius: var(--radius-sm); font-family: var(--font); font-size: .9rem; color: var(--text); background: white; transition: border-color .2s, box-shadow .2s; outline: none; }
.wq-field input:focus, .wq-field textarea:focus, .wq-field select:focus { border-color: var(--green-500); box-shadow: 0 0 0 3px rgba(34,197,94,.15); }
.wq-field textarea { resize: vertical; min-height: 120px; }

/* ── MISC ────────────────────────────────────── */
.wq-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 100px; font-size: .78rem; font-weight: 700; background: var(--green-100); color: var(--green-700); }
.wq-divider { height: 1px; background: var(--border); margin: 0; }
.wq-bg-white { background: white; }
.wq-bg-dark { background: var(--green-900); }
.wq-text-center { text-align: center; }
.wq-mt-0 { margin-top: 0 !important; }

/* ── RESPONSIVE ──────────────────────────────── */
@media (max-width: 1024px) {
  .wq-hero-inner { grid-template-columns: 1fr; gap: 48px; }
  .wq-platform-grid { grid-template-columns: 1fr; gap: 32px; }
  .wq-feature-block { display: flex; flex-direction: column; gap: 40px; }
  .wq-feature-block.reverse { direction: ltr; }
  .wq-stats-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
  .wq-testimonials-grid { grid-template-columns: 1fr 1fr; }
  .wq-cards-grid { grid-template-columns: 1fr 1fr; }
  .wq-footer-top { grid-template-columns: 1fr; gap: 40px; }
  .wq-footer-cols { grid-template-columns: repeat(3,1fr); }
}
@media (max-width: 768px) {
  .wq-nav-links, .wq-nav-actions { display: none; }
  .wq-hamburger { display: flex; margin-left: auto; }
  .wq-stats-grid { grid-template-columns: 1fr; }
  .wq-testimonials-grid { grid-template-columns: 1fr; }
  .wq-cards-grid { grid-template-columns: 1fr; }
  .wq-footer-cols { grid-template-columns: 1fr 1fr; }
  .wq-form-row { grid-template-columns: 1fr; }
  .wq-section { padding: 64px 20px; }
  .wq-hero { padding: calc(var(--nav-h) + 40px) 20px 60px; }
}
/* ── RESPONSIVE ENHANCEMENTS ─────────────────────────────── */

/* Utility classes for inline-styled feature blocks */
.wq-fb-section { padding: 80px 32px; }
.wq-fb-grid    { max-width: 1280px; margin: 0 auto; }

/* ── Tablet (≤1024px) ──────────────────────────────────── */
@media (max-width: 1024px) {
  .wq-fb-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
}

/* ── Mobile (≤768px) ───────────────────────────────────── */
@media (max-width: 768px) {
  :root { --nav-h: 60px; }

  /* Nav */
  /* .wq-nav-inner { padding: 0 20px; } */

  /* Hero */
  .wq-hero { padding: calc(var(--nav-h) + 32px) 20px 60px; }
  .wq-hero-actions { flex-direction: column; align-items: stretch; }
  .wq-hero-actions a { width: 100%; text-align: center; display: flex; justify-content: center; box-sizing: border-box; }
  .wq-hero-pills { gap: 6px; }
  .wq-pill { font-size: .72rem; padding: 5px 11px; }
  .wq-floating-badge { display: none !important; }

  /* News strip */
  .wq-news-strip { padding: 0 20px; }
  .wq-news-strip-inner { flex-direction: column; align-items: flex-start; }
  .wq-news-label { border-right: none; border-bottom: 1px solid var(--border); padding: 10px 0 8px; margin-right: 0; width: 100%; }
  .wq-news-item { padding: 8px 0 12px; font-size: .82rem; }

  /* Sections */
  .wq-section { padding: 56px 20px; }
  .wq-fb-section { padding: 48px 20px !important; }
  .wq-fb-grid { gap: 32px !important; }

  /* Platform tabs */
  .wq-tab { padding: 12px 16px; }

  /* Stats */
  .wq-stats { padding: 56px 20px; }
  .wq-stats-grid { gap: 16px; }

  /* Testimonials */
  .wq-testimonials-grid { gap: 16px; }

  /* CTA */
  .wq-cta { padding: 56px 20px; }
  .wq-cta-actions { flex-direction: column; align-items: stretch; }
  .wq-btn-white,
  .wq-btn-outline-white { width: 100%; text-align: center; display: block; }

  /* Footer */
  .wq-footer-top    { padding: 48px 20px 32px; }
  .wq-footer-bottom { flex-direction: column; gap: 8px; text-align: center; padding: 16px 20px; }

  /* Trusted logos */
  .wq-trusted { padding: 40px 0; }
}

/* ── Small mobile (≤480px) ─────────────────────────────── */
@media (max-width: 480px) {
  /* Nav */
  /* .wq-nav-inner { padding: 0 16px; } */

  /* Hero */
  .wq-hero { padding: calc(var(--nav-h) + 24px) 16px 48px; }
  .wq-hero h1 { font-size: 2rem; }

  /* Mockup: reduce padding and stat columns */
  .wq-mockup-body { padding: 16px; }
  .wq-mockup-stat-row { grid-template-columns: 1fr 1fr !important; }


  /* Sections */
  .wq-section    { padding: 44px 16px; }
  .wq-fb-section { padding: 36px 16px !important; }
  .wq-stats      { padding: 44px 16px; }
  .wq-cta        { padding: 44px 16px; }

  /* News */
  .wq-news-strip { padding: 0 16px; }

  /* Module cards */
  .wq-module-card { padding: 18px 12px; }
  .wq-module-grid { gap: 12px; }

  /* Footer */
  .wq-footer-top    { padding: 40px 16px 28px; }
  .wq-footer-bottom { padding: 14px 16px; }

  /* About team: 1 col on very small mobile */
  .wq-about-team-grid { grid-template-columns: 1fr; }

  /* Page heroes on very small screens */
  .about-hero,
  .contact-hero,
  .par-hero,
  .sol-hero,
  .wq-product-hero { padding: calc(var(--nav-h) + 24px) 16px 40px !important; }

  /* Contact form card */
  .contact-form-card { padding: 24px 16px; }
  .contact-grid      { padding: 24px 16px !important; }

  /* Product & solution sections */
  .wq-product-section { padding: 36px 16px !important; }
  .sol-section        {padding: 10px 16px 44px !important; }

  /* ── SMALL MOBILE TYPOGRAPHY REFINEMENT ── */

body {
  font-size: 14.5px;
  line-height: 1.65;
}

.wq-hero h1 {
  font-size: 1.9rem;
  line-height: 1.2;
}

h2.wq-section-title {
  font-size: 1.5rem;
  line-height: 1.25;
}

.wq-hero p,
.wq-section-sub {
  font-size: 0.92rem;
  line-height: 1.7;
}

.wq-feature-text p {
  font-size: 0.9rem;
}

.wq-card p {
  font-size: 0.88rem;
}

.wq-testimonial-card blockquote {
  font-size: 0.9rem;
}
}

/* ── Inner-page grid classes (add to HTML elements) ─────────── */

/* about.html */
.wq-about-mission-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.wq-about-team-grid    { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.wq-about-sustain-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }

/* partnership.html */
.wq-par-types-grid        { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.wq-par-testimonials-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }

/* solutions.html */
.wq-sol-compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }

/* ── Inner-page responsive overrides ───────────────────────── */
@media (max-width: 1024px) {
  .wq-about-mission-grid { grid-template-columns: 1fr; gap: 40px; }
  .wq-about-sustain-grid { grid-template-columns: 1fr; gap: 40px; }
  .wq-par-types-grid     { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  /* About */
  .wq-about-mission-grid { grid-template-columns: 1fr; gap: 32px; }
  .wq-about-team-grid    { grid-template-columns: 1fr 1fr; gap: 16px; }
  .wq-about-sustain-grid { grid-template-columns: 1fr; gap: 32px; }

  /* Partnership */
  .wq-par-types-grid        { grid-template-columns: 1fr; gap: 20px; }
  .wq-par-testimonials-grid { grid-template-columns: 1fr; gap: 16px; }

  /* Solutions */
  .wq-sol-compare-grid { grid-template-columns: 1fr; gap: 16px; }

  /* Page hero padding */
  .about-hero,
  .contact-hero,
  .par-hero,
  .sol-hero,
  .wq-product-hero { padding: calc(var(--nav-h) + 40px) 20px 48px !important; }

  /* Contact grid */
  .contact-grid { padding: 40px 20px !important; }

  /* Product & solution sections */
  .wq-product-section { padding: 48px 20px !important; }
  .sol-section        { padding: 56px 20px !important; }

  /* CTA button width fix */
  .wq-btn-white,
  .wq-btn-outline-white { box-sizing: border-box; }

  /* ── MOBILE TYPOGRAPHY IMPROVEMENTS ── */

body {
  font-size: 15px;
  line-height: 1.65;
}

/* Headings */
.wq-hero h1 {
  font-size: 2.1rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

h2.wq-section-title {
  font-size: 1.65rem;
  line-height: 1.25;
  letter-spacing: -0.015em;
}

/* Paragraphs */
.wq-hero p,
.wq-section-sub {
  font-size: 0.98rem;
  line-height: 1.7;
}

/* Feature text */
.wq-feature-text p {
  font-size: 0.95rem;
  line-height: 1.75;
}

/* Cards */
.wq-card h3 {
  font-size: 1rem;
  line-height: 1.3;
}

.wq-card p {
  font-size: 0.9rem;
  line-height: 1.65;
}

/* Testimonials */
.wq-testimonial-card blockquote {
  font-size: 0.92rem;
  line-height: 1.7;
}

/* Buttons text */
.wq-btn-primary,
.wq-btn-outline,
.wq-btn-white,
.wq-btn-outline-white {
  font-size: 0.9rem;
}
}
/* ── UNIVERSAL BUTTON HOVER FIX ── */

/* Ensure all clickable buttons get transition */
button,
a.wq-btn-primary,
a.wq-btn-outline,
a.wq-btn-ghost,
a.wq-btn-white,
a.wq-btn-outline-white {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  will-change: transform;
}

/* Hover effect */
button:hover,
a.wq-btn-primary:hover,
a.wq-btn-outline:hover,
a.wq-btn-ghost:hover,
a.wq-btn-white:hover,
a.wq-btn-outline-white:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
} 
/* WASTRAQ DYNAMIC RESPONSIVE FIX
   Paste this at the very bottom of wastraq.css
*/

/* 1. Dynamic container sizes */
:root {
  --container-max: 1480px;
  --container-wide: 1640px;
}

/* 2. Make main site containers wider on desktop */
.wq-container-fluid,
.wq-nav-inner,
.wq-section-inner,
.wq-feature-block-inner,
.wq-stats-inner,
.wq-footer-top,
.wq-footer-bottom,
.wq-fb-grid {
  width: min(100% - 40px, var(--container-max));
  max-width: var(--container-max);
  margin-inline: auto;
}

/* Homepage news strip also needs dynamic width */
.wq-news-strip-inner {
  width: min(100% - 40px, var(--container-max)) !important;
  max-width: var(--container-max) !important;
  margin-inline: auto !important;
}

/* 3. Hero Centered Layout */
.wq-hero {
  min-height: calc(100vh - var(--nav-h));
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  padding: clamp(60px, 12vh, 120px) 24px 80px !important;
  background: linear-gradient(160deg, var(--green-50) 0%, var(--bg) 50%, white 100%);
  position: relative;
  overflow: hidden;
}

.wq-hero-inner {
  width: 100% !important;
  max-width: 960px !important;
  margin-inline: auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  grid-template-columns: none !important;
}

.wq-hero-content {
  width: 100% !important;
  max-width: 900px !important;
  margin-inline: auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

.wq-hero-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-inline: auto !important;
}

.wq-hero h1 {
  width: 100% !important;
  max-width: 880px !important;
  margin-inline: auto !important;
  text-align: center !important;
}

.wq-hero p,
#wq-hero-subtitle {
  width: 100% !important;
  max-width: 680px !important;
  margin-inline: auto !important;
  text-align: center !important;
}

.wq-hero-actions {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-inline: auto !important;
}

.wq-hero-pills {
  width: 100% !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  margin-inline: auto !important;
}

/* 6. Ultra-wide screens */
@media (min-width: 1800px) {
  .wq-container-fluid,
  .wq-nav-inner,
  .wq-section-inner,
  .wq-feature-block-inner,
  .wq-stats-inner,
  .wq-footer-top,
  .wq-footer-bottom,
  .wq-fb-grid {
    width: min(100% - 56px, var(--container-wide));
    max-width: var(--container-wide);
  }

  .wq-news-strip-inner {
    width: min(100% - 56px, var(--container-wide)) !important;
    max-width: var(--container-wide) !important;
  }
}

/* 7. Tablet */
@media (max-width: 1024px) {
  .wq-hero {
    padding: 56px 24px 64px !important;
  }

  .wq-hero-inner {
    width: min(100%, 760px);
    max-width: 760px;
    grid-template-columns: 1fr;
    gap: 44px;
    text-align: center;
  }

  .wq-hero-content {
    max-width: 720px;
    margin-inline: auto;
  }

  .wq-hero p {
    margin-left: auto;
    margin-right: auto;
  }

  .wq-hero-actions,
  .wq-hero-pills {
    justify-content: center;
  }

  .wq-hero-visual {
    max-width: 680px;
    justify-self: center;
  }
}

/* 8. Mobile */
@media (max-width: 600px) {
  .wq-container-fluid,
  .wq-nav-inner,
  .wq-section-inner,
  .wq-feature-block-inner,
  .wq-stats-inner,
  .wq-footer-top,
  .wq-footer-bottom,
  .wq-fb-grid {
    width: min(100% - 32px, var(--container-max));
  }

  .wq-news-strip-inner {
    width: min(100% - 32px, var(--container-max)) !important;
  }

  .wq-hero {
    padding: 38px 16px 46px !important;
  }

  .wq-hero-inner {
    width: 100%;
    gap: 32px;
  }

  .wq-hero h1 {
    font-size: 2.15rem;
    line-height: 1.08;
  }

  .wq-hero p {
    font-size: 0.95rem;
  }

  .wq-hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .wq-hero-actions a {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  .wq-mockup-stat-row {
    grid-template-columns: 1fr;
  }
}
/* HERO REAL VIDEO REPLACEMENT */

.wq-hero-video-card {
  width: 100%;
  max-width: 680px;
  aspect-ratio: 16 / 10;
  border-radius: 22px;
  overflow: hidden;
  background: #eaf8ef;
  box-shadow: var(--shadow-lg), 0 0 0 1px var(--border);
  position: relative;
}

.wq-hero-video-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.18),
      rgba(255,255,255,0) 36%
    );
}

.wq-hero-video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  border: 0;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Make video bigger on large desktop */
@media (min-width: 1440px) {
  .wq-hero-video-card {
    max-width: 720px;
  }
}

@media (min-width: 1800px) {
  .wq-hero-video-card {
    max-width: 780px;
  }
}

/* Tablet */
@media (max-width: 1024px) {
  .wq-hero-video-card {
    max-width: 680px;
    margin-inline: auto;
  }
}

/* Mobile */
@media (max-width: 600px) {
  .wq-hero-video-card {
    aspect-ratio: 16 / 11;
    border-radius: 16px;
  }
}

/* Respect reduced motion users */
@media (prefers-reduced-motion: reduce) {
  .wq-hero-video {
    animation: none;
  }
}
/* =========================================================
   PREMIUM HERO VIDEO GLASS EFFECT
   Paste this at the bottom of wastraq.css
========================================================= */

/* Hero visual wrapper */
.wq-hero-visual {
  position: relative;
  isolation: isolate;
}

/* Soft background glow behind video */
.wq-hero-visual::before {
  content: "";
  position: absolute;
  inset: -45px -55px;
  z-index: -2;
  border-radius: 42px;
  background:
    radial-gradient(circle at 65% 20%, rgba(34, 197, 94, 0.22), transparent 42%),
    radial-gradient(circle at 20% 80%, rgba(22, 101, 52, 0.16), transparent 48%);
  filter: blur(18px);
  opacity: 0.9;
}

/* Premium glass card */
.wq-hero-mockup,
.wq-hero-video-card {
  position: relative;
  overflow: hidden;
  border-radius: 24px !important;
  background: rgba(255, 255, 255, 0.68);
  border: 1px solid rgba(255, 255, 255, 0.72);
  box-shadow:
    0 30px 80px rgba(10, 32, 22, 0.22),
    0 12px 32px rgba(10, 32, 22, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(22px) saturate(145%);
  -webkit-backdrop-filter: blur(22px) saturate(145%);
  transform: translateZ(0);
}

/* Thin premium green outline */
.wq-hero-mockup::before,
.wq-hero-video-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  border-radius: inherit;
  border: 1px solid rgba(34, 197, 94, 0.22);
}

/* Elegant highlight shine */
.wq-hero-mockup::after,
.wq-hero-video-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  border-radius: inherit;
  /* background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.42) 0%,
      rgba(255, 255, 255, 0.12) 22%,
      transparent 48%
    ); */
  opacity: 0.7;
}

/* Browser top bar glass effect */
.wq-hero-mockup-bar {
  height: 42px;
  padding: 0 18px !important;
  background:
    linear-gradient(
      180deg,
      rgba(10, 32, 22, 0.96),
      rgba(10, 32, 22, 0.88)
    ) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

/* URL pill inside top bar */
.wq-hero-mockup-bar .wq-url {
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(220, 252, 231, 0.82) !important;
  letter-spacing: 0.04em;
}

/* Video frame */
.wq-video-frame,
.wq-hero-video-card {
  background: rgba(240, 253, 244, 0.7);
}

/* Real video */
.wq-dashboard-video,
.wq-hero-video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  filter: saturate(1.12) contrast(1.05) brightness(1.12);
  transform: translateZ(0) scale(1.002);
  backface-visibility: hidden;
}

/* Soft video overlay for premium cinematic look */
.wq-video-frame::after,
.wq-hero-video-card .wq-hero-video::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Moving glass light streak */
.wq-video-frame::before,
.wq-hero-video-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  z-index: 6;
  width: 70%;
  height: 100%;
  pointer-events: none;
  background:
    linear-gradient(
      110deg,
      transparent 0%,
      rgba(255, 255, 255, 0.16) 42%,
      rgba(255, 255, 255, 0.34) 50%,
      rgba(255, 255, 255, 0.12) 58%,
      transparent 100%
    );
  transform: skewX(-18deg);
  animation: wqHeroVideoShine 7s ease-in-out infinite;
}

@keyframes wqHeroVideoShine {
  0%, 55% {
    left: -120%;
  }

  100% {
    left: 140%;
  }
}

/* Floating savings badge - glass style */
.wq-floating-badge {
  background: rgba(255, 255, 255, 0.82) !important;
  border: 1px solid rgba(255, 255, 255, 0.78);
  box-shadow:
    0 20px 45px rgba(10, 32, 22, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(18px) saturate(145%);
  -webkit-backdrop-filter: blur(18px) saturate(145%);
}

/* Slight hover lift on desktop */
@media (hover: hover) {
  .wq-hero-mockup,
  .wq-hero-video-card {
    transition:
      transform 0.45s ease,
      box-shadow 0.45s ease,
      border-color 0.45s ease;
  }

  /* .wq-hero-mockup:hover,
  .wq-hero-video-card:hover {
    transform: translateY(-6px) scale(1.01);
    border-color: rgba(34, 197, 94, 0.36);
    box-shadow:
      0 38px 95px rgba(10, 32, 22, 0.26),
      0 16px 38px rgba(10, 32, 22, 0.15),
      inset 0 1px 0 rgba(255, 255, 255, 0.78);
  } */
}

/* Mobile: keep it clean, not too heavy */
@media (max-width: 768px) {
  .wq-hero-visual::before {
    inset: -24px;
    filter: blur(14px);
  }

  .wq-hero-mockup,
  .wq-hero-video-card {
    border-radius: 18px !important;
    box-shadow:
      0 18px 50px rgba(10, 32, 22, 0.18),
      0 8px 22px rgba(10, 32, 22, 0.1);
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .wq-video-frame::before,
  .wq-hero-video-card::before {
    animation: none;
    display: none;
  }

  .wq-hero-mockup,
  .wq-hero-video-card {
    transition: none;
  }
}
/* FORCE SAME HERO VIDEO SIZE ON SERVER */

.wq-hero-visual {
  width: 100%;
  max-width: 600px !important;
  justify-self: end;
  position: relative;
}

.wq-hero-video-card,
.wq-hero-mockup,
.media-shell {
  width: 100%;
  max-width: 600px !important;
  aspect-ratio: 16 / 9 !important;
  overflow: hidden !important;
  border-radius: 24px !important;
}

.wq-hero-video,
.wq-dashboard-video,
.hero-video-wrap video,
.wq-hero-video-card video,
.wq-hero-mockup video,
.media-shell video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
}

.hero-video-wrap {
  aspect-ratio: 16 / 9 !important;
  height: auto !important;
}

@media (min-width: 1440px) {
  .wq-hero-visual,
  .wq-hero-video-card,
  .wq-hero-mockup,
  .media-shell {
    max-width: 640px !important;
  }
}

@media (max-width: 1024px) {
  .wq-hero-visual,
  .wq-hero-video-card,
  .wq-hero-mockup,
  .media-shell {
    max-width: 620px !important;
    justify-self: center;
    margin-inline: auto;
  }
}

@media (max-width: 600px) {
  .wq-hero-visual,
  .wq-hero-video-card,
  .wq-hero-mockup,
  .media-shell {
    max-width: 100% !important;
  }
}
/* MAKE HERO VIDEO MUCH TALLER */

.wq-hero-visual {
  width: 100%;
  max-width: 760px !important;
  justify-self: end;
  position: relative;
}

.wq-hero-mockup,
.wq-hero-video-card,
.media-shell {
  width: 100%;
  max-width: 760px !important;
  overflow: hidden !important;
  border-radius: 26px !important;
}

/* This is the main height control */
.hero-video-wrap,
.wq-hero-video-card {
  aspect-ratio: 16 / 13 !important;
  height: auto !important;
}

.hero-video-wrap video,
.wq-hero-video,
.wq-dashboard-video,
.wq-hero-mockup video,
.media-shell video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
}

/* Large desktop */
@media (min-width: 1440px) {
  .wq-hero-visual,
  .wq-hero-mockup,
  .wq-hero-video-card,
  .media-shell {
    max-width: 820px !important;
  }

  .hero-video-wrap,
  .wq-hero-video-card {
    aspect-ratio: 16 / 13.5 !important;
  }
}

/* Tablet */
@media (max-width: 1024px) {
  .wq-hero-visual,
  .wq-hero-mockup,
  .wq-hero-video-card,
  .media-shell {
    max-width: 700px !important;
    justify-self: center;
    margin-inline: auto;
  }

  .hero-video-wrap,
  .wq-hero-video-card {
    aspect-ratio: 16 / 12.5 !important;
  }
}

/* Mobile */
@media (max-width: 600px) {
  .wq-hero-visual,
  .wq-hero-mockup,
  .wq-hero-video-card,
  .media-shell {
    max-width: 100% !important;
  }

  .hero-video-wrap,
  .wq-hero-video-card {
    aspect-ratio: 19 / 17 !important;
  }
}

/* ── enterprise-redesign.css ── */
/* ============================================================
   WASTRAQ ENTERPRISE 2.0 — DESIGN SYSTEM
   ============================================================ */

:root {
  --green-900: #0a2016;
  --green-800: #0f3422;
  --green-700: #14502e;
  --green-600: #166534;
  --green-500: #16a34a;
  --green-400: #22c55e;
  --green-300: #4ade80;
  --green-100: #dcfce7;
  --green-50:  #f0fdf4;
  
  --c-hero: var(--green-900);
  --c-green: var(--green-500);
  --c-green-deep: var(--green-700);
  --c-green-soft: var(--green-50);
  --c-green-mid: var(--green-600);
  --c-bg: #f8faf7;
  --c-white: #ffffff;
  --c-text: var(--green-900);
  --c-muted: var(--green-800);
  --c-border: #e2ead0;
  --c-border-soft: #eaf2e5;
  --nav-h: 72px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:"Plus Jakarta Sans",system-ui,-apple-system,sans-serif;background:var(--c-bg);color:var(--c-text);overflow-x:hidden;-webkit-font-smoothing:antialiased;}
img,svg,canvas,video{max-width:100%;display:block;}

/* Scroll Progress */
#scroll-progress{position:fixed;top:0;left:0;height:3px;background:linear-gradient(90deg,var(--c-green),#4ade80);z-index:9999;width:0%;transition:width 0.1s linear;}

/* ============================================================
   REVEAL & SLIDE ANIMATION SYSTEM (SCROLL UP & DOWN ANIMATIONS)
   ============================================================ */
.reveal,
.cap-card,
.benefit-card,
.mrf-op-card,
.esg-kpi-card,
.step-item,
.trace-step,
.card,
.intel-bullet,
.ai-feature,
.feature-item {
  opacity: 0;
  transform: translateY(28px) scale(0.98);
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1), transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal.in-view,
.cap-card.in-view,
.benefit-card.in-view,
.mrf-op-card.in-view,
.esg-kpi-card.in-view,
.step-item.in-view,
.trace-step.in-view,
.card.in-view,
.intel-bullet.in-view,
.ai-feature.in-view,
.feature-item.in-view {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Slide in slowly from Left to Right */
.slide-from-left {
  opacity: 0;
  transform: translateX(-80px);
  transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1), transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.slide-from-left.in-view {
  opacity: 1;
  transform: translateX(0);
}

/* Slide in slowly from Right to Left */
.slide-from-right {
  opacity: 0;
  transform: translateX(80px);
  transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1), transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.slide-from-right.in-view {
  opacity: 1;
  transform: translateX(0);
}

/* Auto-active Card Highlight States (Auto-functions every 1 sec) */
.cap-card.auto-active,
.benefit-card.auto-active,
.mrf-op-card.auto-active {
  transform: translateY(-4px) scale(1.02) !important;
  box-shadow: 0 12px 32px rgba(22, 163, 74, 0.22) !important;
  border-color: rgba(74, 222, 128, 0.4) !important;
  z-index: 5;
}

.cap-card.auto-active {
  background: var(--c-green-soft) !important;
}

.cap-card.auto-active .cap-icon {
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 60%, #15803d 100%) !important;
  border-color: #4ade80 !important;
  color: #ffffff !important;
  transform: scale(1.1) !important;
  box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.5), inset 0 -2px 4px rgba(0, 0, 0, 0.2), 0 12px 28px rgba(22, 163, 74, 0.35) !important;
}

.benefit-card.auto-active {
  background: rgba(22, 163, 74, 0.14) !important;
  filter: brightness(1.1);
}

.benefit-card.auto-active .benefit-title {
  color: #4ade80 !important;
}

.benefit-card.auto-active .benefit-accent-line {
  width: 100% !important;
}

.mrf-op-card.auto-active {
  box-shadow: 0 8px 24px rgba(15, 42, 23, 0.14) !important;
  border-color: rgba(22, 163, 74, 0.4) !important;
}

/* Typography */
.t-eyebrow{font-size:0.75rem;font-weight:800;letter-spacing:0.1em;text-transform:uppercase;color:var(--c-green);}
.t-h1{font-size:clamp(2.35rem, 4.2vw, 4.15rem);font-weight:800;line-height:1.02;letter-spacing:-0.045em;color:#ffffff;}
.t-h2{font-size:clamp(2rem, 3.2vw, 2.75rem);font-weight:800;line-height:1.15;letter-spacing:-0.03em;color:var(--c-text);}
.t-h2.white{color:#ffffff;}
.t-body{font-size:1.05rem;font-weight:500;line-height:1.75;color:var(--c-muted);}
.t-body-hero{font-size:1.05rem;font-weight:500;line-height:1.75;color:rgba(255,255,255,0.82);}
.grad-text{background:linear-gradient(135deg,#4ade80 0%,#16a34a 60%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.mono{font-family:"DM Mono",monospace;font-weight:500;}
.hero-sub-small{font-size:14px;color:rgba(255,255,255,0.45);max-width:460px;line-height:1.7;}

/* Spacing utilities */
.mb-3{margin-bottom:12px;}.mb-4{margin-bottom:16px;}.mb-5{margin-bottom:20px;}.mb-6{margin-bottom:24px;}.mb-7{margin-bottom:28px;}.mb-8{margin-bottom:32px;}.mb-14{margin-bottom:56px;}.mb-18{margin-bottom:72px;}
.mt-3{margin-top:12px;}.mt-4{margin-top:16px;}.mt-5{margin-top:20px;}.mt-6{margin-top:24px;}
.mx-auto{margin-left:auto;margin-right:auto;}
.text-center{text-align:center;}

/* Container */
.container{max-width:1240px;margin:0 auto;padding:0 32px;}
@media(max-width:768px){.container{padding:0 20px;}}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 28px;border-radius:14px;font-weight:700;font-size:0.95rem;text-decoration:none;transition:all 0.22s ease;cursor:pointer;border:none;font-family:'Plus Jakarta Sans', sans-serif;}
.btn-primary{background:linear-gradient(90deg, #6FBB59 0%, #159D91 45%, #0750AD 100%);color:#ffffff;box-shadow:0 8px 24px rgba(7, 80, 173, 0.25);border:none;}
.btn-primary:hover{transform:translateY(-2px);filter:brightness(1.08) saturate(1.1);box-shadow:0 12px 32px rgba(7, 80, 173, 0.38);}
/* .btn-hero-outline is this page's secondary CTA on dark backgrounds —
   styled to match the shared .wq-btn-outline-white look (transparent,
   white border, gradient fill on hover) instead of duplicating the
   solid primary button. */
.btn-hero-outline{background:transparent;color:#ffffff;border:2px solid rgba(255,255,255,.5);}
.btn-hero-outline:hover{border-color:transparent;background:linear-gradient(90deg, #6FBB59 0%, #159D91 45%, #0750AD 100%);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.2);}
.btn-outline{background:transparent;color:var(--c-green-deep);border:1.5px solid var(--c-green-deep);}
.btn-outline:hover{background:var(--c-green-soft);}
.hero-btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px;}

/* Badges */
.badge{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;}
.badge-green{background:rgba(22,163,74,0.12);border:1px solid rgba(22,163,74,0.3);color:var(--c-green-deep);}
.badge-white{background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.25);color:rgba(255,255,255,0.9);}
.badge-dot{width:7px;height:7px;border-radius:50%;background:currentColor;animation:pulse-dot 2s ease infinite;}
.badge-group{display:flex;gap:8px;flex-wrap:wrap;}
@keyframes pulse-dot{0%,100%{opacity:1;transform:scale(1);}50%{opacity:0.6;transform:scale(0.85);}}

/* Cards */
.card{background:var(--c-white);border:1px solid var(--c-border-soft);border-radius:16px;transition:all 0.25s ease;}
.card:hover{border-color:rgba(22,163,74,0.3);box-shadow:0 8px 32px rgba(15,42,23,0.08);transform:translateY(-2px);}

/* Sections */
.section{padding:96px 0;}
@media(max-width:768px){.section{padding:64px 0;}}

/* ============================================================
   HERO
   ============================================================ */
#hero{background:var(--c-hero);min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding-top:calc(var(--nav-h) + 60px);padding-bottom:80px;position:relative;overflow:hidden;}
.hero-grid-bg{position:absolute;inset:0;background-image:linear-gradient(rgba(74,222,128,0.04) 1px,transparent 1px),linear-gradient(90deg,rgba(74,222,128,0.04) 1px,transparent 1px);background-size:56px 56px;pointer-events:none;}
.hero-glow{position:absolute;border-radius:50%;pointer-events:none;}
.hero-glow-1{width:700px;height:700px;top:-200px;left:-200px;background:radial-gradient(circle,rgba(22,163,74,0.18) 0%,transparent 65%);}
.hero-glow-2{width:500px;height:500px;bottom:-100px;right:-100px;background:radial-gradient(circle,rgba(74,222,128,0.1) 0%,transparent 65%);}
.hero-inner-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;}
#hero-visual{display:flex;justify-content:center;}
.trust-pills{display:flex;gap:10px;flex-wrap:wrap;margin-top:32px;}
.trust-pill{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.14);border-radius:999px;font-size:12px;font-weight:600;color:rgba(255,255,255,0.8);}
.trust-pill-dot{width:6px;height:6px;border-radius:50%;background:#4ade80;}
.eco-flow-path{fill:none;stroke:rgba(74,222,128,0.35);stroke-width:1.5;stroke-dasharray:6 5;animation:dash-flow 10s linear infinite;}
@keyframes dash-flow{to{stroke-dashoffset:-110;}}
.eco-node-icon{fill:rgba(74,222,128,0.1);stroke:rgba(74,222,128,0.45);stroke-width:1.5;}
.eco-center{fill:rgba(22,163,74,0.12);stroke:rgba(74,222,128,0.45);stroke-width:1.5;}
@media(max-width:900px){.hero-inner-grid{display:flex!important;flex-direction:column!important;gap:40px!important;}#hero-visual{display:flex!important;order:-1!important;width:100%!important;}#hero-copy{order:1!important;}#hero{min-height:auto!important;padding-top:calc(var(--nav-h) + 40px)!important;padding-bottom:60px!important;}}

/* ============================================================
   METRICS
   ============================================================ */
#metrics{background:var(--c-white);padding:0;border-bottom:1px solid var(--c-border-soft);}
.metrics-grid{display:grid;grid-template-columns:repeat(4,1fr);border-left:1px solid var(--c-border-soft);}
.metric-cell{padding:40px 36px;border-right:1px solid var(--c-border-soft);border-bottom:1px solid var(--c-border-soft);position:relative;}
.metric-cell::after{content:"";position:absolute;bottom:0;left:36px;right:36px;height:3px;background:var(--c-green);transform:scaleX(0);transform-origin:left;transition:transform 0.7s ease;}
.metric-cell.in-view::after{transform:scaleX(1);}
.metric-num{font-size:clamp(2rem,3.5vw,3rem);font-weight:900;letter-spacing:-0.04em;line-height:1;color:var(--c-text);}
.metric-label{font-size:13px;font-weight:600;color:var(--c-muted);margin-top:6px;}
@media(max-width:900px){.metrics-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:480px){.metrics-grid{grid-template-columns:1fr;}.metric-cell{padding:28px 24px;}}

/* ============================================================
   PLATFORM CAPABILITIES
   ============================================================ */
#platform{background:var(--c-bg);}
.cap-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--c-border-soft);border:1px solid var(--c-border-soft);border-radius:24px;overflow:hidden;}
.cap-card{background:var(--c-white);padding:32px 28px;transition:all 0.25s ease;cursor:default;}
.cap-card:hover{background:var(--c-green-soft);}
.cap-icon {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(220, 252, 231, 0.9) 0%, rgba(187, 247, 208, 0.5) 50%, rgba(134, 239, 172, 0.3) 100%);
  border: 1px solid rgba(74, 222, 128, 0.45);
  color: #15803d;
  margin-bottom: 18px;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.8), inset 0 -2px 4px rgba(22, 163, 74, 0.15), 0 8px 20px rgba(22, 163, 74, 0.12);
  backdrop-filter: blur(8px);
  transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.cap-icon svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  fill: none;
  filter: drop-shadow(0 2px 4px rgba(22, 163, 74, 0.25));
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.cap-card:hover .cap-icon {
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 60%, #15803d 100%);
  border-color: #4ade80;
  color: #ffffff;
  transform: scale(1.1);
  box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.5), inset 0 -2px 4px rgba(0, 0, 0, 0.2), 0 12px 28px rgba(22, 163, 74, 0.35);
}

.cap-card:hover .cap-icon svg {
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.3));
  transform: scale(1.1);
}
.cap-title{font-size:15px;font-weight:700;color:var(--c-text);margin-bottom:6px;}
.cap-desc{font-size:13px;line-height:1.6;color:var(--c-muted);}
@media(max-width:1024px){.cap-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:600px){.cap-grid{grid-template-columns:1fr;}}

/* ============================================================
   INDUSTRIES
   ============================================================ */
/* Industries - Who It's Built For */
.industry-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  perspective: 1000px;
}

/* Card base — hidden until animated in */
.industry-card {
  background: var(--c-white);
  border: 1px solid var(--c-border-soft);
  border-radius: 20px;
  padding: 0;
  position: relative;
  overflow: hidden;
  cursor: default;
  transition: box-shadow 0.35s ease, border-color 0.35s ease;
}

/* Inner wrapper for stagger & slide animation */
.ind-card-anim {
  opacity: 0;
  transform: translateY(50px) scale(0.97);
  transition: opacity 0.35s ease, transform 0.35s ease;
  transition-delay: 0s;
}

.industry-grid.in-view .ind-card-anim {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition:
    opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--ind-delay, 0ms);
}

/* Card inner content area */
.ind-card-inner {
  padding: 36px 32px 32px;
  position: relative;
  height: 100%;
}

/* Green gradient top border (pseudo) */
.industry-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--c-green), #4ade80);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Animated bottom accent line */
.ind-card-line {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, #4ade80, #16a34a);
  border-radius: 0 0 20px 20px;
  transition: width 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Hover & Auto-Active Effects */
.industry-card:hover,
.industry-card.auto-active {
  background: var(--c-white);
  border-color: rgba(22, 163, 74, 0.35);
  transform: translateY(-5px);
  box-shadow: 0 20px 48px rgba(15, 42, 23, 0.10), 0 2px 8px rgba(22, 163, 74, 0.08);
}

.industry-card.auto-active,
.industry-card:hover,
.industry-card.auto-active .ind-card-line,
.industry-card:hover .ind-card-line,
.industry-card.auto-active::before,
.industry-card:hover::before {
  transition-delay: 0s !important;
}

.industry-card:hover::before,
.industry-card.auto-active::before {
  transform: scaleX(1);
}

.industry-card:hover .ind-card-line,
.industry-card.auto-active .ind-card-line {
  width: 100%;
}

.industry-card:hover .industry-title,
.industry-card.auto-active .industry-title {
  color: var(--c-green-deep);
}

.industry-num {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--c-green);
  margin-bottom: 16px;
  font-family: "DM Mono", "JetBrains Mono", monospace;
}

.industry-title {
  font-size: 17px;
  font-weight: 800;
  color: var(--c-text);
  margin-bottom: 10px;
  transition: color 0.3s ease;
}

.industry-desc {
  font-size: 14px;
  line-height: 1.65;
  color: var(--c-muted);
}

@media(max-width: 1024px) { .industry-grid { grid-template-columns: repeat(2, 1fr); } }
@media(max-width: 600px)  { .industry-grid { grid-template-columns: 1fr; } }

/* ============================================================
   INTELLIGENCE / DASHBOARD
   ============================================================ */
#intelligence{background:var(--c-hero);}
.intel-grid{display:grid;grid-template-columns:1fr 1.5fr;gap:64px;align-items:center;}
.intel-body{font-size:15px;line-height:1.75;color:rgba(255,255,255,0.5);max-width:400px;}
.intel-bullets{margin-top:36px;display:flex;flex-direction:column;gap:18px;}
.intel-bullet{display:flex;gap:12px;align-items:flex-start;}
.bullet-dot{width:8px;height:8px;border-radius:50%;background:#4ade80;margin-top:7px;flex-shrink:0;}
.bullet-title{font-size:14px;font-weight:700;color:rgba(255,255,255,0.85);margin-bottom:2px;}
.bullet-desc{font-size:13px;color:rgba(255,255,255,0.4);}
.dashboard-wrap{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.1);border-radius:24px;padding:28px;overflow:hidden;}
.dash-bar{display:flex;align-items:center;gap:8px;margin-bottom:20px;}
.dash-dot{width:10px;height:10px;border-radius:50%;}
.dash-url{font-family:"JetBrains Mono",monospace;font-size:11px;color:rgba(255,255,255,0.35);margin-left:8px;}
.dash-live{margin-left:auto;display:flex;align-items:center;gap:5px;font-family:"JetBrains Mono",monospace;font-size:10px;color:#4ade80;font-weight:600;letter-spacing:0.08em;}
.dash-live-dot{width:6px;height:6px;border-radius:50%;background:#4ade80;animation:pulse-dot 1.5s ease infinite;}
.kpi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px;}
.kpi-card{background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.1);border-radius:12px;padding:16px 18px;}
.kpi-label{font-size:10px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:rgba(255,255,255,0.4);margin-bottom:6px;}
.kpi-value{font-size:1.6rem;font-weight:900;color:#ffffff;letter-spacing:-0.03em;line-height:1;}
.kpi-unit{font-size:1rem;}
.kpi-sub{font-size:11px;color:#4ade80;margin-top:4px;font-weight:600;}
.kpi-bar-bg{height:4px;background:rgba(255,255,255,0.1);border-radius:2px;margin-top:10px;overflow:hidden;}
.kpi-bar-fill{height:100%;border-radius:2px;background:linear-gradient(90deg,var(--c-green),#4ade80);width:0%;transition:width 1.4s cubic-bezier(.4,0,.2,1);}
.chart-wrap{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.07);border-radius:12px;padding:20px;margin-bottom:12px;}
.chart-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;}
.chart-label{font-size:11px;font-weight:700;color:rgba(255,255,255,0.35);letter-spacing:0.08em;text-transform:uppercase;font-family:"JetBrains Mono",monospace;}
.chart-rate{font-size:10px;color:rgba(74,222,128,0.7);font-family:"JetBrains Mono",monospace;font-weight:600;}
.live-feed-wrap{padding:14px 16px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.07);border-radius:10px;}
.live-feed-heading{font-size:9px;font-family:"JetBrains Mono",monospace;font-weight:700;color:rgba(255,255,255,0.28);letter-spacing:0.1em;margin-bottom:8px;}
.live-feed-line{display:flex;align-items:center;gap:8px;}
.feed-dot{width:6px;height:6px;border-radius:50%;background:#4ade80;flex-shrink:0;}
.feed-text{font-size:11px;color:rgba(255,255,255,0.55);font-family:"JetBrains Mono",monospace;transition:opacity 0.3s ease;}
@media(max-width:960px){.intel-grid{grid-template-columns:1fr!important;gap:40px!important;}}
@media(max-width:768px){.kpi-grid{grid-template-columns:repeat(2,1fr);}.dashboard-wrap{padding:20px;}}

/* ============================================================
   RECOVERY PROCESS
   ============================================================ */
#recovery{background:var(--c-bg);}
.process-flow{display:flex;align-items:flex-start;position:relative;padding:20px 0;}
.process-step{flex:1;min-width:100px;text-align:center;position:relative;}
.process-step:not(:last-child)::after{content:"";position:absolute;top:46px;left:50%;width:100%;height:2px;background:var(--c-border);z-index:0;transition:background 0.6s ease;}
.process-step.active:not(:last-child)::after{background:linear-gradient(90deg,var(--c-green),#4ade80);}
.process-num {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  font-weight: 800;
  color: var(--c-muted);
  letter-spacing: 0.08em;
  margin-bottom: 6px;
  transition: color 0.4s ease;
}

.process-step.active .process-num {
  color: var(--c-green-deep);
  font-weight: 900;
}
.process-icon {
  width: 50px;
  height: 50px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(240, 253, 244, 0.8) 100%);
  border: 1px solid rgba(74, 222, 128, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
  color: var(--c-muted);
  position: relative;
  z-index: 1;
  box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.9), inset 0 -2px 3px rgba(22, 163, 74, 0.1), 0 8px 18px rgba(0, 0, 0, 0.05);
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.process-step.active .process-icon {
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 60%, #15803d 100%);
  border-color: #4ade80;
  color: #ffffff;
  transform: scale(1.12);
  box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.5), inset 0 -2px 4px rgba(0, 0, 0, 0.2), 0 0 0 6px rgba(22, 163, 74, 0.18), 0 12px 28px rgba(22, 163, 74, 0.35);
}

.process-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-muted);
  transition: color 0.4s ease;
}

.process-step.active .process-label {
  color: var(--c-green-deep);
}
.recovery-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:56px;}
.stat-big{font-size:2.2rem;font-weight:900;color:var(--c-green);letter-spacing:-0.04em;line-height:1;}
.stat-label{font-size:13px;color:var(--c-muted);margin-top:6px;font-weight:600;}
@media(max-width:600px){.recovery-stats{grid-template-columns:1fr;}}

/* ============================================================
   AI VISION
   ============================================================ */
.ai-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:64px;align-items:center;}
.ai-visual{background:#0f1f1a;border-radius:24px;overflow:hidden;position:relative;aspect-ratio:16/9;}
.ai-bg{position:absolute;inset:0;background:linear-gradient(135deg,#1a2e1a 0%,#0d1f12 50%,#152814 100%);}
.ai-grid-overlay{position:absolute;inset:0;background-image:linear-gradient(rgba(74,222,128,0.04) 1px,transparent 1px),linear-gradient(90deg,rgba(74,222,128,0.04) 1px,transparent 1px);background-size:32px 32px;}
.ai-material-block{position:absolute;background:rgba(74,222,128,0.06);border-radius:8px;border:1px solid;}
.ai-scan-line{position:absolute;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,rgba(74,222,128,0.8),transparent);animation:scan-move 3s ease-in-out infinite;pointer-events:none;}
@keyframes scan-move{0%{top:8%;opacity:0;}10%{opacity:1;}90%{opacity:1;}100%{top:92%;opacity:0;}}
.ai-box{position:absolute;border:2px solid;border-radius:6px;animation:box-pulse 2.5s ease infinite;}
@keyframes box-pulse{0%,100%{opacity:1;}50%{opacity:0.6;}}
.ai-box-label{position:absolute;top:-22px;left:0;font-family:"JetBrains Mono",monospace;font-size:9px;font-weight:700;border:1px solid;padding:2px 8px;border-radius:4px;white-space:nowrap;}
.ai-panel{position:absolute;right:16px;top:16px;width:175px;background:rgba(15,31,26,0.92);border:1px solid rgba(74,222,128,0.25);border-radius:12px;padding:14px;backdrop-filter:blur(8px);}
.ai-panel-heading{font-size:9px;font-family:"JetBrains Mono",monospace;font-weight:700;color:rgba(255,255,255,0.28);letter-spacing:0.1em;margin-bottom:10px;}
.ai-panel-row{display:flex;justify-content:space-between;align-items:center;padding:5px 0;border-bottom:1px solid rgba(255,255,255,0.06);font-size:11px;}
.ai-panel-row:last-child{border-bottom:0;}
.ai-panel-label{color:rgba(255,255,255,0.45);}
.ai-panel-value{color:#4ade80;font-weight:700;font-family:"JetBrains Mono",monospace;}
.ai-feature-list{display:flex;flex-direction:column;gap:12px;}
.ai-feature{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--c-muted);}
.ai-dot{width:8px;height:8px;border-radius:50%;background:var(--c-green);flex-shrink:0;}
@media(max-width:960px){.ai-grid{grid-template-columns:1fr!important;gap:40px!important;}}

/* ============================================================
   MRF OPERATIONS
   ============================================================ */
#mrf{background:var(--c-bg);}
.mrf-grid{display:grid;grid-template-columns:1fr 1.4fr;gap:64px;align-items:center;}
.mrf-op-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.mrf-op-card{background:var(--c-white);border:1px solid var(--c-border-soft);border-radius:16px;padding:20px;text-align:center;transition:all 0.25s ease;}
.mrf-op-card:hover{box-shadow:0 4px 16px rgba(15,42,23,0.08);}
.mrf-tag{font-family:"JetBrains Mono",monospace;font-size:9px;font-weight:700;color:var(--c-green);letter-spacing:0.1em;margin-bottom:8px;}
.mrf-val{font-size:1.5rem;font-weight:900;color:var(--c-text);letter-spacing:-0.03em;line-height:1;margin-bottom:4px;}
.mrf-lbl{font-size:12px;color:var(--c-muted);font-weight:600;}
.mrf-sub{font-size:11px;color:var(--c-green);font-weight:700;margin-top:2px;}
@media(max-width:960px){.mrf-grid{grid-template-columns:1fr!important;gap:40px!important;}}
@media(max-width:900px){.mrf-op-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:480px){.mrf-op-grid{grid-template-columns:1fr;}}

/* ============================================================
   LOGISTICS
   ============================================================ */
#logistics{background:var(--c-white);}
.logistics-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:64px;align-items:center;}
.logistics-map{background:#0b1f16;border-radius:24px;overflow:hidden;min-height:360px;border:1px solid rgba(74,222,128,0.15);display:flex;align-items:center;justify-content:center;}
.route-line{fill:none;stroke:rgba(74,222,128,0.5);stroke-width:1.5;stroke-dasharray:8 5;animation:dash-flow 8s linear infinite;}
.map-node{fill:var(--c-green);animation:pulse-node 2.5s ease infinite;}
.map-node-ring{fill:none;stroke:var(--c-green);stroke-width:1.5;opacity:0;animation:node-ring 2.5s ease infinite;}
@keyframes pulse-node{0%,100%{opacity:1;}50%{opacity:0.8;}}
@keyframes node-ring{0%{opacity:0.6;}100%{opacity:0;}}
.feature-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.feature-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: var(--c-muted);
  opacity: 0;
  transform: translateX(24px);
  transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1), transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.slide-from-right.in-view .feature-item,
.logistics-grid.in-view .feature-item {
  opacity: 1;
  transform: translateX(0);
}

.slide-from-right.in-view .feature-item:nth-child(1),
.logistics-grid.in-view .feature-item:nth-child(1) { transition-delay: 0.15s; }

.slide-from-right.in-view .feature-item:nth-child(2),
.logistics-grid.in-view .feature-item:nth-child(2) { transition-delay: 0.30s; }

.slide-from-right.in-view .feature-item:nth-child(3),
.logistics-grid.in-view .feature-item:nth-child(3) { transition-delay: 0.45s; }

.slide-from-right.in-view .feature-item:nth-child(4),
.logistics-grid.in-view .feature-item:nth-child(4) { transition-delay: 0.60s; }

.feature-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-green);
  flex-shrink: 0;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.slide-from-right.in-view .feature-item .feature-dot,
.logistics-grid.in-view .feature-item .feature-dot {
  transform: scale(1.25);
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.5);
}
@media(max-width:960px){.logistics-grid{grid-template-columns:1fr!important;gap:40px!important;}}

/* ============================================================
   SUSTAINABILITY INTELLIGENCE (ESG + EPR)
   ============================================================ */
#esg {
  background: var(--c-bg);
  position: relative;
  overflow: hidden;
  padding: 96px 0;
}

/* Subtle background ambient data grid overlay */
.esg-bg-grid {
  position: absolute;
  inset: 0;
  background-image: 
    radial-gradient(circle at 85% 30%, rgba(34, 197, 94, 0.04) 0%, transparent 60%),
    linear-gradient(rgba(22, 163, 74, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(22, 163, 74, 0.03) 1px, transparent 1px);
  background-size: 100% 100%, 40px 40px, 40px 40px;
  pointer-events: none;
  z-index: 0;
}

.esg-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 64px;
  align-items: center;
  position: relative;
  z-index: 1;
}

/* 2x2 Enterprise Metric Cards Grid - Harmonized Dark Glassmorphism */
.esg-kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  width: 100%;
}

.esg-kpi-card {
  background: linear-gradient(135deg, rgba(12, 35, 23, 0.92) 0%, rgba(6, 20, 13, 0.96) 100%);
  border: 1px solid rgba(74, 222, 128, 0.22);
  border-radius: 20px;
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.12), 0 12px 32px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(12px);
  transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
  overflow: hidden;
}

.esg-kpi-card:hover,
.esg-kpi-card.auto-active {
  border-color: rgba(74, 222, 128, 0.55);
  transform: translateY(-4px);
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.25), 0 20px 40px rgba(0, 0, 0, 0.5), 0 0 28px rgba(34, 197, 94, 0.2);
}

.esg-kpi-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.esg-kpi-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.2) 0%, rgba(15, 42, 23, 0.4) 100%);
  border: 1px solid rgba(74, 222, 128, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.15);
}

.esg-kpi-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
}

.esg-kpi-val {
  font-size: 2.1rem;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-bottom: 6px;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

.esg-kpi-sub {
  font-size: 0.84rem;
  font-weight: 600;
  color: #4ade80;
  line-height: 1.3;
}

/* 6. CTA Button styling & interaction */
.esg-cta-btn {
  background: linear-gradient(90deg, #6FBB59 0%, #159D91 45%, #0750AD 100%);
  color: #ffffff;
  border-radius: 14px;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 13px 28px;
  box-shadow: 0 8px 24px rgba(7, 80, 173, 0.22);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  border: none;
}

.esg-btn-arrow {
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 2x2 Dark Glassmorphic 3D KPI Grid V2 */
.esg-kpi-grid-v2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  width: 100%;
}

.esg-kpi-card-v2 {
  background: linear-gradient(135deg, rgba(12, 35, 23, 0.85) 0%, rgba(6, 20, 13, 0.95) 100%);
  border: 1px solid rgba(74, 222, 128, 0.22);
  border-radius: 20px;
  padding: 24px 22px;
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.15), inset 0 -1px 2px rgba(0, 0, 0, 0.5), 0 12px 32px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(12px);
}

.esg-card-left-badge {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.18) 0%, rgba(15, 42, 23, 0.4) 100%);
  border: 1px solid rgba(74, 222, 128, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.2), 0 4px 12px rgba(0, 0, 0, 0.2);
}

.esg-card-content {
  flex: 1;
  min-width: 0;
}

.esg-card-label {
  font-family: 'DM Mono', 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 6px;
  text-transform: uppercase;
}

.esg-card-val {
  font-size: 2.1rem;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-bottom: 4px;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

.esg-card-sub {
  font-size: 0.8rem;
  font-weight: 600;
  color: #4ade80;
  line-height: 1.3;
}

.esg-card-comparison {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.4);
  margin-top: 2px;
}

.esg-card-widget {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.esg-cta-btn-outline:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
  transform: translateY(-2px);
}

@media(max-width: 1024px) {
  .esg-kpi-card-v2 { padding: 20px 16px; gap: 12px; }
  .esg-card-val { font-size: 1.75rem; }
}

@media(max-width: 600px) {
  .esg-kpi-grid-v2 { grid-template-columns: 1fr; }
}

.esg-bar-bg {
  height: 8px;
  background: rgba(22, 163, 74, 0.08);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}

/* 2. Progress bar animation */
.esg-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #16a34a 0%, #22c55e 60%, #4ade80 100%);
  width: 0%;
  position: relative;
  transition: width 1.2s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: 0 0 12px rgba(34, 197, 94, 0.3);
}

/* 4. Subtle shimmer sweep effect across progress bar */
.esg-bar-shimmer {
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.75) 50%, transparent 100%);
  opacity: 0;
}

.esg-metrics-panel.in-view .esg-bar-shimmer {
  animation: esg-shimmer-sweep 1.4s ease-in-out forwards;
}

.esg-metrics-panel.in-view .esg-metric:nth-child(1) .esg-bar-shimmer { animation-delay: 0.5s; }
.esg-metrics-panel.in-view .esg-metric:nth-child(2) .esg-bar-shimmer { animation-delay: 0.62s; }
.esg-metrics-panel.in-view .esg-metric:nth-child(3) .esg-bar-shimmer { animation-delay: 0.74s; }
.esg-metrics-panel.in-view .esg-metric:nth-child(4) .esg-bar-shimmer { animation-delay: 0.86s; }

@keyframes esg-shimmer-sweep {
  0% { left: -50%; opacity: 0; }
  30% { opacity: 1; }
  100% { left: 150%; opacity: 0; }
}

@media(max-width: 900px) {
  .esg-grid { grid-template-columns: 1fr; gap: 40px; }
  .esg-metrics-panel { padding: 24px 20px; }
}

/* ============================================================
   TRACEABILITY
   ============================================================ */
#traceability{background:var(--c-white);}
.trace-outer-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start;}
.trace-journey{display:flex;flex-direction:column;position:relative;max-width:580px;margin:0 auto;}
.trace-journey::before{content:"";position:absolute;left:23px;top:0;bottom:0;width:2px;background:linear-gradient(to bottom,var(--c-green) 0%,var(--c-border) 100%);}
.trace-step{display:flex;gap:20px;padding:20px 0;opacity:0.35;transition:opacity 0.4s ease;}
.trace-step.active{opacity:1;}
.trace-dot {
  width: 50px;
  height: 50px;
  min-width: 50px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(240, 253, 244, 0.8) 100%);
  border: 1px solid rgba(74, 222, 128, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-muted);
  z-index: 1;
  box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.9), inset 0 -2px 3px rgba(22, 163, 74, 0.1), 0 8px 18px rgba(0, 0, 0, 0.05);
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.trace-step.active .trace-dot {
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 60%, #15803d 100%);
  border-color: #4ade80;
  color: #ffffff;
  transform: scale(1.12);
  box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.5), inset 0 -2px 4px rgba(0, 0, 0, 0.2), 0 0 0 6px rgba(22, 163, 74, 0.18), 0 12px 28px rgba(22, 163, 74, 0.35);
}
.trace-content{padding-top:8px;}
.trace-stage{font-size:11px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--c-green);margin-bottom:4px;font-family:"JetBrains Mono",monospace;}
.trace-title{font-size:16px;font-weight:700;color:var(--c-text);margin-bottom:4px;}
.trace-desc{font-size:13px;color:var(--c-muted);line-height:1.6;}
@media(max-width:900px){.trace-outer-grid{grid-template-columns:1fr!important;gap:40px!important;}}

/* ============================================================
   BUSINESS VALUE (BENEFITS)
   ============================================================ */
#benefits {
  background: var(--c-hero);
  position: relative;
  overflow: hidden;
  padding: 96px 0;
}

/* Header Reveal Animations */
.benefits-header-block {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.benefits-header-block.in-view {
  opacity: 1;
  transform: translateY(0);
}

.benefits-label-reveal {
  display: inline-block;
  opacity: 0;
  transform: translateY(15px);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.1s, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.1s;
}

.benefits-header-block.in-view .benefits-label-reveal {
  opacity: 1;
  transform: translateY(0);
}

.benefits-heading-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.2s, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.2s;
}

.benefits-header-block.in-view .benefits-heading-reveal {
  opacity: 1;
  transform: translateY(0);
}

/* Benefit 3x2 Grid */
.benefit-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  overflow: hidden;
  position: relative;
}

/* Benefit Cards Base & Staggered Reveal */
.benefit-card {
  padding: 40px 36px;
  background: rgba(255, 255, 255, 0.03);
  position: relative;
  opacity: 0;
  transform: translateY(40px) scale(0.97);
  transition: 
    opacity 0.35s ease,
    transform 0.35s ease,
    background 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease;
  transition-delay: 0s;
  overflow: hidden;
}

.benefit-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #4ade80, #16a34a);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.benefit-card:hover::before,
.benefit-card.auto-active::before {
  transform: scaleX(1);
}

/* Preserved highlighted center card 05 background */
.benefit-card.benefit-card-highlighted {
  background: rgba(255, 255, 255, 0.05);
}

/* Entrance Sequence Triggered by .in-view */
.benefit-grid.in-view .benefit-card {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: 
    opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease;
}

/* Stagger order 01 -> 02 -> 03 -> 04 -> 05 -> 06 (Entrance only) */
.benefit-grid.in-view .benefit-card:nth-child(1) { transition-delay: 0.10s; }
.benefit-grid.in-view .benefit-card:nth-child(2) { transition-delay: 0.22s; }
.benefit-grid.in-view .benefit-card:nth-child(3) { transition-delay: 0.34s; }
.benefit-grid.in-view .benefit-card:nth-child(4) { transition-delay: 0.46s; }
.benefit-grid.in-view .benefit-card:nth-child(5) { transition-delay: 0.58s; }
.benefit-grid.in-view .benefit-card:nth-child(6) { transition-delay: 0.70s; }

/* Clear delay on auto-active & hover for instant, lag-free transitions */
.benefit-card.auto-active,
.benefit-card:hover,
.benefit-card.auto-active .benefit-accent-line,
.benefit-card:hover .benefit-accent-line,
.benefit-card.auto-active::before,
.benefit-card:hover::before {
  transition-delay: 0s !important;
}

/* Internal Card Element Sequencing (Number -> Title -> Desc) */
.benefit-num {
  font-family: "DM Mono", monospace;
  font-size: 12px;
  font-weight: 800;
  color: rgba(74, 222, 128, 0.85);
  letter-spacing: 0.1em;
  margin-bottom: 16px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1), transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.benefit-grid.in-view .benefit-card .benefit-num {
  opacity: 1;
  transform: translateY(0);
}

.benefit-grid.in-view .benefit-card:nth-child(1) .benefit-num { transition-delay: 0.25s; }
.benefit-grid.in-view .benefit-card:nth-child(2) .benefit-num { transition-delay: 0.37s; }
.benefit-grid.in-view .benefit-card:nth-child(3) .benefit-num { transition-delay: 0.49s; }
.benefit-grid.in-view .benefit-card:nth-child(4) .benefit-num { transition-delay: 0.61s; }
.benefit-grid.in-view .benefit-card:nth-child(5) .benefit-num { transition-delay: 0.73s; }
.benefit-grid.in-view .benefit-card:nth-child(6) .benefit-num { transition-delay: 0.85s; }

.benefit-title {
  font-size: 1.12rem;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 10px;
  letter-spacing: -0.02em;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1), transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), color 0.3s ease;
}

.benefit-grid.in-view .benefit-card .benefit-title {
  opacity: 1;
  transform: translateY(0);
}

.benefit-grid.in-view .benefit-card:nth-child(1) .benefit-title { transition-delay: 0.32s; }
.benefit-grid.in-view .benefit-card:nth-child(2) .benefit-title { transition-delay: 0.44s; }
.benefit-grid.in-view .benefit-card:nth-child(3) .benefit-title { transition-delay: 0.56s; }
.benefit-grid.in-view .benefit-card:nth-child(4) .benefit-title { transition-delay: 0.68s; }
.benefit-grid.in-view .benefit-card:nth-child(5) .benefit-title { transition-delay: 0.80s; }
.benefit-grid.in-view .benefit-card:nth-child(6) .benefit-title { transition-delay: 0.92s; }

.benefit-desc {
  font-size: 0.92rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.55);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1), transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.benefit-grid.in-view .benefit-card .benefit-desc {
  opacity: 1;
  transform: translateY(0);
}

.benefit-grid.in-view .benefit-card:nth-child(1) .benefit-desc { transition-delay: 0.38s; }
.benefit-grid.in-view .benefit-card:nth-child(2) .benefit-desc { transition-delay: 0.50s; }
.benefit-grid.in-view .benefit-card:nth-child(3) .benefit-desc { transition-delay: 0.62s; }
.benefit-grid.in-view .benefit-card:nth-child(4) .benefit-desc { transition-delay: 0.74s; }
.benefit-grid.in-view .benefit-card:nth-child(5) .benefit-desc { transition-delay: 0.86s; }
.benefit-grid.in-view .benefit-card:nth-child(6) .benefit-desc { transition-delay: 0.98s; }

/* Interactive Accent Line */
.benefit-accent-line {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, #4ade80, #16a34a);
  transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Radial Mouse Follow Glow */
.benefit-mouse-glow {
  position: absolute;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(74, 222, 128, 0.12) 0%, transparent 70%);
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity 0.3s ease;
  z-index: 0;
}

/* Hover States (Mouse Enter) */
@media (hover: hover) {
  .benefit-card:hover {
    background: rgba(22, 163, 74, 0.12) !important;
    transform: translateY(-5px) scale(1.01) !important;
    filter: brightness(1.08);
    box-shadow: 0 12px 32px rgba(22, 163, 74, 0.18);
    border-color: rgba(74, 222, 128, 0.3);
    z-index: 5;
  }

  .benefit-card:hover .benefit-accent-line {
    width: 100%;
  }

  .benefit-card:hover .benefit-mouse-glow {
    opacity: 1;
  }

  .benefit-card:hover .benefit-title {
    color: #4ade80;
  }
}

/* Mobile & Tablet Responsiveness */
@media(max-width: 900px) {
  .benefit-grid { grid-template-columns: repeat(2, 1fr); }
}

@media(max-width: 600px) {
  .benefit-grid { grid-template-columns: 1fr; }
  .benefit-card {
    padding: 28px 24px;
    transform: translateY(24px) scale(0.98);
  }
  .benefit-card:hover {
    transform: translateY(-2px) !important;
  }
}

/* ============================================================
   TECHNOLOGY
   ============================================================ */
.tech-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.tech-card{background:var(--c-white);border:1px solid var(--c-border-soft);border-radius:16px;padding:32px 28px;transition:all 0.25s ease;}
.tech-card:hover{border-color:rgba(22,163,74,0.3);box-shadow:0 8px 28px rgba(15,42,23,0.08);transform:translateY(-2px);}
@media(max-width:900px){.tech-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.tech-grid{grid-template-columns:1fr;}}

/* ============================================================
   HOW IT WORKS
   ============================================================ */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  position: relative;
  align-items: start;
}

/* Background line track */
.steps-progress-track {
  position: absolute;
  top: 32px;
  left: 12.5%;
  right: 12.5%;
  height: 3px;
  background: rgba(22, 163, 74, 0.15);
  z-index: 1;
  border-radius: 4px;
}

/* Animated active fill line */
.steps-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #16a34a, #4ade80);
  border-radius: 4px;
  transition: width 0.9s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 0 10px rgba(34, 197, 94, 0.4);
}

.step-item {
  text-align: center;
  padding: 0 16px;
  position: relative;
  z-index: 2;
}

.step-num {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid var(--c-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'DM Mono', monospace;
  font-size: 18px;
  font-weight: 800;
  color: var(--c-text);
  margin: 0 auto 20px;
  position: relative;
  z-index: 2;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
}

.step-item.active .step-num {
  background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
  border-color: #16a34a;
  color: #ffffff;
  transform: scale(1.12);
  box-shadow: 0 0 0 8px rgba(22, 163, 74, 0.18), 0 8px 24px rgba(22, 163, 74, 0.35);
  animation: step-pulse 2s infinite 0.4s;
}

@keyframes step-pulse {
  0% { box-shadow: 0 0 0 8px rgba(22, 163, 74, 0.25), 0 8px 24px rgba(22, 163, 74, 0.35); }
  50% { box-shadow: 0 0 0 16px rgba(22, 163, 74, 0), 0 8px 24px rgba(22, 163, 74, 0.35); }
  100% { box-shadow: 0 0 0 8px rgba(22, 163, 74, 0.25), 0 8px 24px rgba(22, 163, 74, 0.35); }
}

.step-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--c-text);
  margin-bottom: 8px;
  transition: color 0.3s ease;
}

.step-item.active .step-title {
  color: var(--c-green);
}

.step-desc {
  font-size: 0.88rem;
  color: var(--c-muted);
  line-height: 1.6;
  max-width: 240px;
  margin: 0 auto;
}

@media(max-width:900px) {
  .steps-grid { grid-template-columns: repeat(2, 1fr); gap: 36px 20px; }
  .steps-progress-track { display: none; }
}
@media(max-width:560px) {
  .steps-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   CTA
   ============================================================ */
#cta{background:var(--c-hero);position:relative;overflow:hidden;}
.cta-glow{position:absolute;width:900px;height:900px;top:50%;left:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(22,163,74,0.15) 0%,transparent 65%);pointer-events:none;}
.cta-inner{max-width:700px;margin:0 auto;}
.cta-sub{font-size:16px;line-height:1.75;color:rgba(255,255,255,0.5);max-width:520px;margin:0 auto 36px;}
.cta-btns{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;}
.cta-note{margin-top:24px;font-size:13px;color:rgba(255,255,255,0.28);max-width:460px;margin-left:auto;margin-right:auto;line-height:1.7;}
.cta-stats{margin-top:48px;display:flex;justify-content:center;gap:32px;flex-wrap:wrap;padding-top:32px;border-top:1px solid rgba(255,255,255,0.07);}
.cta-stat{text-align:center;}
.cta-stat-num{font-size:1.5rem;font-weight:900;color:#ffffff;letter-spacing:-0.03em;}
.cta-stat-lbl{font-size:11px;color:rgba(255,255,255,0.35);font-weight:600;margin-top:3px;}
.cta-stat-divider{width:1px;background:rgba(255,255,255,0.08);}

/* ============================================================
   REVEAL ANIMATIONS
   ============================================================ */
.reveal{opacity:0;transform:translateY(28px);}
.reveal.in-view{opacity:1;transform:translateY(0);transition:opacity 0.65s ease,transform 0.65s ease;}

/* NAV/FOOTER OVERRIDES */
#nav-placeholder{position:relative;z-index:9999;}
#footer-placeholder footer{background:#0f2a17!important;color:#fff!important;}
#footer-placeholder footer *{color:rgba(255,255,255,0.82)!important;}
#footer-placeholder footer a:hover{color:#86efac!important;}

/* REDUCED MOTION */
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0.01ms!important;transition-duration:0.01ms!important;}.reveal{opacity:1;transform:none;}}

/* ============================================================
   COMMAND CENTER WIDGET
   ============================================================ */
.cc-widget {
  background: rgba(255,255,255,0.97);
  border-radius: 18px;
  box-shadow: 0 32px 80px rgba(0,0,0,0.28), 0 2px 8px rgba(0,0,0,0.12);
  overflow: hidden;
  max-width: 500px;
  width: 100%;
  font-family: 'Plus Jakarta Sans', sans-serif;
  opacity: 0; /* Start hidden for animation */
}

.cc-widget.in-view,
.dash-slide-left.in-view {
  animation: 
    cc-slide-left 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards,
    cc-float 5s ease-in-out infinite 1.2s; /* Float starts after slide-left */
}

.dash-slide-left {
  opacity: 0;
}

@keyframes cc-slide-left {
  0% {
    opacity: 0;
    transform: translateX(100px); /* Start further to the right */
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Slide from LEFT (for text content columns) */
.slide-from-left {
  opacity: 0;
  transform: translateX(-80px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.slide-from-left.in-view {
  opacity: 1;
  transform: translateX(0);
}

/* Slide from RIGHT */
.slide-from-right {
  opacity: 0;
  transform: translateX(80px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.slide-from-right.in-view {
  opacity: 1;
  transform: translateX(0);
}

@keyframes cc-float {
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-10px);}
}

/* Title bar */
.cc-titlebar {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #f5f5f7;
  padding: 10px 16px;
  border-bottom: 1px solid #e5e7eb;
}
.cc-dots { display: flex; gap: 6px; }
.cc-dot {
  width: 12px; height: 12px; border-radius: 50%;
  display: inline-block;
}
.cc-dot-red    { background: #ff5f57; }
.cc-dot-yellow { background: #ffbd2e; }
.cc-dot-green  { background: #28c840; }
.cc-url {
  flex: 1;
  font-size: 12px;
  color: #374151;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.02em;
  text-align: center;
}
.cc-live-badge {
  display: flex;
  align-items: center;
  gap: 5px;
  background: #dcfce7;
  color: #16a34a;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid #bbf7d0;
}
.cc-live-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #16a34a;
  animation: cc-pulse 1.4s ease-in-out infinite;
}
@keyframes cc-pulse {
  0%,100%{opacity:1;transform:scale(1);}
  50%{opacity:0.5;transform:scale(1.4);}
}

/* Stats row */
.cc-stats-row {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 1px;
  background: #e5e7eb;
  margin: 14px 14px 0;
  border-radius: 12px;
  overflow: hidden;
}
.cc-stat-card {
  background: #fff;
  padding: 14px 12px;
}
.cc-stat-card:first-child { border-radius: 12px 0 0 12px; }
.cc-stat-card:last-child  { border-radius: 0 12px 12px 0; }
.cc-stat-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #6b7280;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.cc-stat-value {
  font-size: 20px;
  font-weight: 800;
  color: #15803d;
  line-height: 1;
  margin-bottom: 4px;
}
.cc-stat-change {
  font-size: 10px;
  font-weight: 600;
}
.cc-positive { color: #16a34a; }

/* Chart panel */
.cc-chart-panel {
  margin: 12px 14px 0;
  background: #f0fdf4;
  border-radius: 12px;
  padding: 12px 14px 10px;
  border: 1px solid #bbf7d0;
}
.cc-chart-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 8px;
}
.cc-chart-eyebrow {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #6b7280;
  text-transform: uppercase;
}
.cc-chart-title {
  font-size: 12px;
  font-weight: 700;
  color: #111827;
  margin-top: 2px;
}
.cc-chart-dots { display: flex; gap: 5px; align-items: center; margin-top: 4px; }
.cc-cdot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.cc-chart-wrap { position: relative; }

/* AI Live Feed */
.cc-livefeed {
  margin: 12px 14px 14px;
  background: #fff;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  padding: 10px 14px;
}
.cc-feed-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #9ca3af;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.cc-feed-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 11px;
  color: #374151;
  font-weight: 500;
  margin-bottom: 6px;
  line-height: 1.4;
}
.cc-feed-item:last-child { margin-bottom: 0; }
.cc-feed-dot {
  width: 8px; height: 8px; border-radius: 50%;
  flex-shrink: 0;
  margin-top: 3px;
}

/* ============================================================
   AI VISION STREAM
   ============================================================ */
.ai-vision-stream {
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.06);
  padding: 24px;
  max-width: 580px;
  margin: 0 auto;
  border: 1px solid #f3f4f6;
  font-family: 'Plus Jakarta Sans', sans-serif;
}
.ai-vs-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
}
.ai-vs-eyebrow {
  font-size: 10px;
  font-weight: 700;
  color: #9ca3af;
  letter-spacing: 0.08em;
  margin-bottom: 4px;
  text-transform: uppercase;
}
.ai-vs-title {
  font-size: 15px;
  color: #111827;
}
.ai-vs-title strong {
  font-weight: 700;
}
.ai-vs-badge {
  background: #dcfce7;
  color: #16a34a;
  padding: 6px 12px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 700;
  border: 1px solid #bbf7d0;
}

.ai-vs-area {
  position: relative;
  background: #f0fdf4;
  border: 2px solid #bbf7d0;
  border-radius: 16px;
  height: 280px;
  overflow: hidden;
  margin-bottom: 20px;
  /* background grid pattern */
  background-image: 
    linear-gradient(rgba(22, 163, 74, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(22, 163, 74, 0.05) 1px, transparent 1px);
  background-size: 40px 40px;
}



.ai-img {
  position: absolute;
  border-radius: 8px;
  object-fit: cover;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  transition: transform 0.3s ease;
}
.ai-img:hover { transform: scale(1.05); }

/* Positioning the images similar to the mockup */
.ai-img-pet {
  width: 120px; height: 140px;
  top: 40px; left: 30px;
  border: 2px solid #16a34a;
}
.ai-img-hdpe {
  width: 90px; height: 80px;
  top: 130px; left: 160px;
  border: 2px solid #16a34a;
}
.ai-img-pp {
  width: 100px; height: 60px;
  top: 40px; right: 40px;
  border: 2px solid #a855f7; /* purple */
}
.ai-img-contam {
  width: 80px; height: 80px;
  bottom: 30px; right: 80px;
  border: 2px solid #ef4444; /* red */
}

.ai-vs-tags {
  position: absolute;
  bottom: 16px;
  left: 16px;
  display: flex;
  gap: 8px;
}
.ai-vs-tag {
  font-size: 10px;
  padding: 4px 8px;
  border-radius: 4px;
  font-family: 'JetBrains Mono', monospace;
}
.tag-green {
  background: rgba(220, 252, 231, 0.9);
  color: #16a34a;
  border: 1px solid #bbf7d0;
}
.tag-purple {
  background: rgba(243, 232, 255, 0.9);
  color: #a855f7;
  border: 1px solid #e9d5ff;
}

.ai-vs-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.ai-vs-stat {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 12px;
  text-align: center;
}
.stat-lbl {
  font-size: 11px;
  color: #6b7280;
  margin-bottom: 4px;
}
.stat-val {
  font-size: 18px;
  font-weight: 700;
  color: #15803d;
}

/* ── Lenis Smooth Scroll Compatibility ────────────────────── */
html.lenis, html.lenis body {
  height: auto;
}
.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}
.lenis.lenis-stopped {
  overflow: hidden;
}
.lenis.lenis-scrolling iframe {
  pointer-events: none;
}

/* ── GPU-Accelerated Section Transition & Reveal System ──── */
section {
  position: relative;
  will-change: transform, opacity;
  backface-visibility: hidden;
}

.section-clip-reveal {
  will-change: clip-path, transform, opacity;
  backface-visibility: hidden;
}

/* Layered Parallax Backgrounds */
.parallax-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  will-change: transform;
}

/* Mobile & Reduced Motion Safety */
@media (max-width: 768px) {
  section,
  .section-clip-reveal {
    will-change: auto !important;
    clip-path: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   COMPLETE MOBILE RESPONSIVENESS & ALIGNMENT OVERRIDES
   ============================================================ */
@media (max-width: 1024px) {
  .hero-inner-grid,
  .intel-grid,
  .esg-grid {
    display: flex !important;
    flex-direction: column !important;
  }

  .intel-grid > .dash-slide-left,
  .esg-grid > .esg-metrics-panel {
    order: -1 !important;
    width: 100% !important;
  }

  #hero-copy {
    order: 1 !important;
  }

  #hero-visual {
    order: 2 !important;
    width: 100% !important;
  }

  .mrf-grid,
  .ai-grid,
  .logistics-grid,
  .trace-outer-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  .cap-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 768px) {
  section,
  .section {
    padding: 36px 0 !important;
  }

  #recovery {
    padding: 36px 0 !important;
  }

  .mb-14,
  .mb-18,
  .mb-20 {
    margin-bottom: 24px !important;
  }

  .pt-16 {
    padding-top: 24px !important;
  }

  #recovery-intelligence-block,
  #mrf {
    margin-bottom: 24px !important;
  }

  #mrf,
  #ai-intelligence {
    padding-top: 24px !important;
  }

  .container {
    padding-left: 20px !important;
    padding-right: 20px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Typography Scaling & Spacing */
  .t-h1 {
    font-size: 2.2rem !important;
    line-height: 1.25 !important;
    letter-spacing: -0.03em !important;
  }

  .t-h2 {
    font-size: 1.75rem !important;
    line-height: 1.3 !important;
    letter-spacing: -0.02em !important;
  }

  .t-body,
  .t-body-hero {
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
  }

  /* Hero Section Alignment & Compact Mobile Buttons */
  #hero {
    padding: 60px 0 28px !important;
  }

  #hero-copy {
    text-align: left !important;
  }

  .hero-btns,
  .esg-btn-group,
  .cta-btns {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .btn,
  .btn-primary,
  .btn-outline,
  .btn-hero-outline,
  .esg-cta-btn,
  .esg-cta-btn-outline {
    width: auto !important;
    max-width: max-content !important;
    padding: 9px 18px !important;
    font-size: 0.84rem !important;
    font-weight: 700 !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .trust-pills {
    flex-wrap: wrap !important;
    gap: 8px !important;
    justify-content: flex-start !important;
  }

  /* Command Center & Dashboard Widgets */
  .cc-widget,
  .ai-vision-stream,
  .dashboard-wrap {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 auto !important;
    box-shadow: 0 16px 40px rgba(0,0,0,0.15) !important;
  }

  .cc-stats-row {
    grid-template-columns: repeat(3, 1fr) !important;
    margin: 10px 10px 0 !important;
  }

  .cc-stat-card {
    padding: 10px 6px !important;
  }

  .cc-stat-label {
    font-size: 8px !important;
  }

  .cc-stat-value {
    font-size: 15px !important;
  }

  /* Metrics Ribbon Mobile Layout */
  .metrics-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0 !important;
    border-left: none !important;
    border-top: 1px solid var(--c-border-soft) !important;
  }

  .metric-cell {
    padding: 18px 14px !important;
    border-right: 1px solid var(--c-border-soft) !important;
    border-bottom: 1px solid var(--c-border-soft) !important;
  }

  .metric-cell .t-eyebrow {
    font-size: 9.5px !important;
    margin-bottom: 4px !important;
    letter-spacing: 0.08em !important;
  }

  .metric-num {
    font-size: 1.55rem !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
  }

  .metric-label {
    font-size: 11px !important;
    margin-top: 4px !important;
    line-height: 1.35 !important;
  }

  /* Grids & Cards Alignment */
  .cap-grid,
  #industry-grid,
  .benefit-grid,
  .esg-kpi-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .mrf-op-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }

  .mrf-op-card {
    padding: 16px 14px !important;
  }

  .ai-vs-area {
    height: 230px !important;
  }

  .ai-vs-stats {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  /* Process Flow Recovery Steps Mobile Alignment */
  .process-flow {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
    padding: 16px 0 !important;
  }

  .process-step {
    min-width: 0 !important;
    width: 100% !important;
    flex: none !important;
    background: #ffffff !important;
    border: 1px solid rgba(22, 163, 74, 0.18) !important;
    border-radius: 16px !important;
    padding: 16px 12px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03) !important;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  }

  .process-step.active {
    border-color: rgba(74, 222, 128, 0.6) !important;
    box-shadow: 0 8px 24px rgba(22, 163, 74, 0.15) !important;
    background: linear-gradient(180deg, #ffffff 0%, #f0fdf4 100%) !important;
    transform: translateY(-2px) !important;
  }

  .process-step:not(:last-child)::after {
    display: none !important;
  }

  .process-num {
    font-size: 10px !important;
    font-weight: 800 !important;
    color: #16a34a !important;
    background: rgba(22, 163, 74, 0.1) !important;
    padding: 2px 8px !important;
    border-radius: 999px !important;
    margin-bottom: 8px !important;
  }

  .process-icon {
    width: 44px !important;
    height: 44px !important;
    margin: 0 0 8px 0 !important;
  }

  .process-label {
    font-size: 11.5px !important;
    font-weight: 800 !important;
    letter-spacing: 0.04em !important;
  }

  .recovery-stats {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    margin-top: 36px !important;
  }
}

@media (max-width: 480px) {
  section,
  .section {
    padding: 28px 0 !important;
  }

  #hero {
    padding: 48px 0 20px !important;
  }

  .mb-14,
  .mb-18,
  .mb-20 {
    margin-bottom: 18px !important;
  }

  .pt-16 {
    padding-top: 18px !important;
  }

  #recovery-intelligence-block,
  #mrf {
    margin-bottom: 18px !important;
  }

  #mrf,
  #ai-intelligence {
    padding-top: 18px !important;
  }

  .t-h1 {
    font-size: 1.95rem !important;
  }

  .t-h2 {
    font-size: 1.55rem !important;
  }

  .metrics-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0 !important;
  }

  .metric-cell {
    padding: 14px 10px !important;
  }

  .metric-cell .t-eyebrow {
    font-size: 8.5px !important;
    margin-bottom: 3px !important;
  }

  .metric-num {
    font-size: 1.35rem !important;
  }

  .metric-label {
    font-size: 10px !important;
  }

  .mrf-op-grid {
    grid-template-columns: 1fr !important;
  }

  .cc-stats-row {
    grid-template-columns: 1fr !important;
  }

  .cc-stat-card {
    border-radius: 8px !important;
  }
}

/* ── nav-footer.css ── */
/* WASTRAQ Navigation & Footer Stylesheet */