/* Home page order after dnc-factory.com: hero → about + numbers → product categories → quality → brands → 4-column footer. */
.section-head { margin-bottom: 34px; }
.section-head.center { text-align: center; }
.section-head.center .eyebrow { justify-content: center; }
.section-head h2 { font-size: clamp(30px, 4.6vw, 52px); line-height: 1.15; letter-spacing: -.01em; }

.cats { padding-block: 96px 80px; }
.cats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.cat { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: 380px; padding: 22px; border-radius: 28px; overflow: hidden; color: #fff; isolation: isolate;
  background: radial-gradient(120% 80% at 50% 0%, var(--c1), var(--c2)); box-shadow: 0 1px 0 rgba(255,255,255,.15) inset, 0 18px 40px -24px var(--c2);
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out); }
.cat::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(0,0,0,.45), transparent 55%); }
.cat-pack { position: relative; display: flex; justify-content: center; align-items: flex-end; height: 250px; z-index: -1; }
.cat-pack img { height: 100%; width: auto; object-fit: contain; margin-inline: -22px; filter: drop-shadow(0 18px 18px rgba(0,0,0,.35)); transition: transform .6s var(--ease-out); }
.cat-pack img:nth-child(2) { height: 88%; }
.cat-pack img:nth-child(3) { height: 80%; }
.cat-text { display: grid; gap: 4px; }
.cat-text b { font-size: 21px; font-weight: 800; line-height: 1.3; }
.cat-text small { direction: ltr; text-align: right; font-size: 12px; opacity: .8; }
.cat i { position: absolute; top: 18px; left: 18px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.18); backdrop-filter: blur(6px); font-style: normal; transition: transform .4s var(--ease-out), background .3s; }
@media (hover: hover) {
  .cat:hover { transform: translateY(-6px); box-shadow: 0 1px 0 rgba(255,255,255,.15) inset, 0 30px 50px -24px var(--c2); }
  .cat:hover .cat-pack img:first-child { transform: translateY(-8px) rotate(-3deg); }
  .cat:hover .cat-pack img:nth-child(2) { transform: translateY(-4px) rotate(3deg); }
  .cat:hover i { background: #fff; color: var(--c2); transform: translateX(-4px); }
}
.cat:focus-visible { outline: 3px solid var(--leaf); outline-offset: 4px; }

.brands-band { padding-block: 90px 48px; }
.brands-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.brands-row a { display: grid; place-items: center; height: 150px; padding: 22px; border-radius: 24px; background: var(--white); border: 1px solid var(--line); transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out), border-color .3s; }
.brands-row img { max-width: 100%; max-height: 86px; width: auto; height: auto; object-fit: contain; filter: grayscale(1) opacity(.75); transition: filter .4s, transform .4s var(--ease-out); }
.brands-row a:hover, .brands-row a:focus-visible { transform: translateY(-4px); border-color: transparent; box-shadow: 0 20px 40px -22px rgba(22,59,46,.45); }
.brands-row a:hover img, .brands-row a:focus-visible img { filter: none; transform: scale(1.06); }
@media (hover: none) { .brands-row img { filter: none; } }

footer { padding-block: 64px max(24px, env(safe-area-inset-bottom)); }
.footer-cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 36px; }
.fcol h2 { margin: 6px 0 16px; font-size: 16px; font-weight: 800; color: #fff; }
.fcol ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; color: #d8e0d3; font-size: 14px; }
.fcol a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.fcol-about p { margin-top: 16px; max-width: 340px; color: #d0d9c9; font-size: 13px; line-height: 1.9; }
.footer-copy { margin-top: 44px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.12); color: #b9c6b4; font-size: 12px; text-align: center; }

@media (max-width: 980px) {
  .cats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brands-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-cols { grid-template-columns: 1fr 1fr; }
  .fcol-about { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .cats { padding-block: 64px 48px; }
  .cats-grid { gap: 10px; }
  .cat { min-height: 270px; padding: 14px; border-radius: 22px; }
  .cat-pack { height: 170px; }
  .cat-pack img { margin-inline: -16px; }
  .cat-text b { font-size: 16px; }
  .cat i { width: 32px; height: 32px; top: 12px; left: 12px; }
  .brands-band { padding-block: 60px 32px; }
  .brands-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .brands-row li:last-child { grid-column: 1 / -1; }
  .brands-row a { height: 110px; }
}
@media (prefers-reduced-motion: reduce) { .cat, .cat-pack img, .brands-row a, .brands-row img { transition: none; } }
.brands-band .section-head.center { display: block; text-align: center; }
.brands-band .section-head.center .eyebrow { display: inline-flex; }
.brands-band .section-head h2 { margin-inline: auto; }

/* brands marquee */
.brands-sub { margin: -6px auto 34px; max-width: 520px; text-align: center; color: var(--muted, #5b6b62); font-size: 15px; line-height: 1.8; }
.brands-marquee { position: relative; overflow: hidden; padding-block: 14px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.brands-track { display: flex; width: max-content; animation: brands-scroll 28s linear infinite; }
.brands-marquee:hover .brands-track, .brands-marquee:focus-within .brands-track { animation-play-state: paused; }
.brands-marquee .brands-row { display: flex; flex: none; gap: 18px; padding-inline-end: 18px; grid-template-columns: none; }
.brands-marquee .brands-row li, .brands-marquee .brands-row li:last-child { grid-column: auto; }
.brands-marquee .brands-row a { width: 220px; height: 140px; padding: 26px; border-radius: 26px;
  background: linear-gradient(160deg, #fff, #f3f6f1); box-shadow: 0 1px 0 #fff inset, 0 14px 30px -22px rgba(22,59,46,.4); }
.brands-marquee .brands-row img { filter: none; max-height: 80px; }
.brands-marquee .brands-row a:hover img { transform: scale(1.1) rotate(-2deg); }
@keyframes brands-scroll { to { transform: translateX(-50%); } }
@media (max-width: 560px) {
  .brands-marquee .brands-row { gap: 12px; padding-inline-end: 12px; }
  .brands-marquee .brands-row a { width: 160px; height: 104px; padding: 18px; border-radius: 20px; }
  .brands-track { animation-duration: 20s; }
}
@media (prefers-reduced-motion: reduce) {
  .brands-track { animation: none; width: auto; flex-wrap: wrap; justify-content: center; }
  .brands-marquee { -webkit-mask-image: none; mask-image: none; }
  .brands-marquee .brands-row[aria-hidden] { display: none; }
  .brands-marquee .brands-row { flex-wrap: wrap; justify-content: center; }
}