html { scroll-behavior: smooth; }
body { font-family: 'Inter', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }

.product-media {
  position: relative;
  overflow: hidden;
  background-color: #E8EAE7;
}
.product-media::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(135deg, rgba(95, 109, 49, 0.22) 0%, rgba(255, 255, 255, 0.55) 100%),
    var(--bg, none);
  background-size: cover;
  background-position: center;
  background-blend-mode: multiply, normal;
  transition: transform 600ms cubic-bezier(.2,.7,.2,1);
}
.product-media::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 0%, transparent 45%, rgba(232, 234, 231, 0.55) 100%);
}
.group:hover .product-media::before { transform: scale(1.08); }

.industry-media {
  position: absolute; inset: 0;
  background-color: #E8EAE7;
  background-image:
    linear-gradient(180deg, rgba(220,221,218,0.05) 0%, rgba(232,234,231,0.45) 52%, rgba(255,255,255,0.94) 100%),
    linear-gradient(135deg, rgba(95,109,49,0.20) 0%, rgba(255,255,255,0.15) 100%),
    var(--bg, none);
  background-size: cover, cover, cover;
  background-position: center;
  background-blend-mode: normal, multiply, normal;
  transition: transform 800ms cubic-bezier(.2,.7,.2,1), filter 400ms;
  filter: saturate(0.9) contrast(1.02);
}
.industry-card:hover .industry-media { transform: scale(1.08); filter: saturate(1.08) contrast(1.05); }

.hero-bg {
  position: relative;
  background-color: #DCDDDA;
  background-image:
    linear-gradient(180deg, rgba(220,221,218,0.82) 0%, rgba(232,234,231,0.78) 40%, rgba(220,221,218,0.93) 100%),
    linear-gradient(135deg, rgba(95,109,49,0.16) 0%, rgba(255,255,255,0.10) 100%),
    url('/uploads/hero/hero.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-blend-mode: normal, multiply, normal;
}
@media (max-width: 768px) { .hero-bg { background-attachment: scroll; } }
.hero-bg::after {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 75% 30%, rgba(95, 109, 49, 0.10), transparent 50%),
    radial-gradient(ellipse at 20% 80%, rgba(74, 90, 77, 0.08), transparent 55%);
  pointer-events: none;
}

.tech-bg {
  position: relative;
  background-color: #DCDDDA;
  background-image:
    linear-gradient(180deg, rgba(220,221,218,0.93) 0%, rgba(232,234,231,0.96) 100%),
    url('/uploads/sections/tech.jpg');
  background-size: cover;
  background-position: center;
}

.contact-bg {
  position: relative;
  background-color: #E8EAE7;
  background-image:
    linear-gradient(135deg, rgba(232,234,231,0.93) 0%, rgba(220,221,218,0.89) 100%),
    linear-gradient(135deg, rgba(95,109,49,0.12) 0%, transparent 100%),
    url('/uploads/sections/contact.jpg');
  background-size: cover;
  background-position: center;
  background-blend-mode: normal, multiply, normal;
}

.brand-bg {
  background-color: #E8EAE7;
  background-image:
    linear-gradient(180deg, rgba(232,234,231,0.88) 0%, rgba(220,221,218,0.93) 100%),
    url('/uploads/sections/brand.jpg');
  background-size: cover;
  background-position: center;
}

.grain {
  pointer-events: none;
  position: fixed; inset: 0; z-index: 100;
  mix-blend-mode: multiply;
  opacity: 0.045;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

.hero-grid::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(45,49,48,0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(45,49,48,0.05) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
  pointer-events: none;
}

.product-card { animation: fadeUp .45s ease-out both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }

.v-sep {
  width: 1px;
  background: linear-gradient(180deg, transparent 0%, #AEB2AE 30%, #AEB2AE 70%, transparent 100%);
}

/* Language switcher (collapsed dropdown) */
.lang-switch > summary { list-style: none; }
.lang-switch > summary::-webkit-details-marker { display: none; }
.lang-switch .lang-chev { transition: transform .25s ease; }
.lang-switch[open] .lang-chev { transform: rotate(180deg); }
.lang-switch .lang-menu {
  opacity: 0; transform: translateY(-6px);
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
}
.lang-switch[open] .lang-menu { opacity: 1; transform: translateY(0); pointer-events: auto; }

.field:focus { outline: none; border-color: #5F6D31; box-shadow: 0 0 0 3px rgba(95, 109, 49, 0.18); }

body.no-scroll { overflow: hidden; }

.reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s ease-out, transform .7s ease-out; }
.reveal.in { opacity: 1; transform: none; }

.filter-tab {
  position: relative;
  padding: 0.75rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #6B6F6C;
  border-radius: 9999px 9999px 0 0;
  transition: color .3s;
}
.filter-tab:hover { color: #2D3130; }
.filter-tab.active { color: #2D3130; }
.filter-tab.active::after {
  content: '';
  position: absolute;
  left: 1.25rem; right: 1.25rem; bottom: -1px;
  height: 2px;
  background: #5F6D31;
}