/* dazr.eu group homepage. Layout, type and buttons come from /assets/compliance-site.css
   (the compliance home: .hm, .hm-hero, .hm-sec, .hm-hd, .cs-cta); this file only adds the
   glass tiles, the product index and the principles. Motion stops with prefers-reduced-motion. */
.dh .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.dh-hero { grid-template-columns: 1fr 1fr; }

/* ── Glass tiles ── */
.dh-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; perspective: 1000px; max-width: 460px; width: 100%; justify-self: end; }
.dh-tiles .t { position: relative; aspect-ratio: 1; border-radius: 20px; overflow: hidden;
  background: rgba(255,255,255,.38); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.75), inset 0 1px 0 rgba(255,255,255,.9), 0 18px 36px -22px rgba(24,32,58,.32);
  transition: transform .45s var(--cs-ease), background .3s; transform-style: preserve-3d; will-change: transform;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 1px; padding: 12px 12px 11px; font-size: 12px; line-height: 1.3; color: var(--cs-ink2); text-decoration: none; }
.dh-tiles .t::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,.75) 0%, rgba(255,255,255,0) 42%); opacity: .55; pointer-events: none; }
.dh-tiles a.t:hover { text-decoration: none; background: rgba(255,255,255,.85); }
.dh-tiles .t b, .dh-tiles .t > span { position: relative; }
.dh-tiles .t b { font-size: 14.5px; color: var(--cs-ink); letter-spacing: -0.01em; }
.dh-tiles .t.on { background: rgba(255,255,255,.72); }
.dh-tiles .t.dk { background: rgba(24,32,58,.92); color: rgba(255,255,255,.7); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 24px 44px -20px rgba(24,32,58,.55); }
.dh-tiles .t.dk b { color: #fff; } .dh-tiles .t.dk::before { opacity: .12; }
.dh-tiles a.t.dk:hover { background: rgba(24,32,58,1); }
.dh-tiles .t.soon, .dh-tiles .t.soon b { color: var(--cs-mute); }
.dh-tiles a.t:focus-visible { outline: none; box-shadow: var(--cs-focus), inset 0 0 0 1px rgba(255,255,255,.75); }
.dh-tiles .t:nth-child(3n) { animation: dhBreathe 9s ease-in-out infinite; }
.dh-tiles .t:nth-child(5n+1) { animation: dhBreathe 11s ease-in-out -4s infinite; }
@keyframes dhBreathe { 50% { background-color: rgba(255,255,255,.55); } }

/* ── Product index: plain rows ── */
.dh-index { border-top: 1px solid var(--cs-line2); }
.dh-row { display: grid; grid-template-columns: 260px minmax(0, 1fr) 310px; gap: 40px; align-items: center; padding: 28px 4px; border-bottom: 1px solid var(--cs-line2); color: inherit; text-decoration: none; }
a.dh-row:hover { text-decoration: none; }
.dh-row .nm { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: var(--cs-ink); }
.dh-next .nm { color: var(--cs-ink2); }
.dh-row .ds { color: var(--cs-ink2); line-height: 1.6; font-size: 16px; }
.dh-row .go { justify-self: end; font-weight: 700; color: var(--cs-accent); font-size: 15px; white-space: nowrap; }
.dh-row .go i { font-style: normal; display: inline-block; transition: transform .25s var(--cs-ease); }
a.dh-row:hover .go i { transform: translateX(4px); }
a.dh-row:hover .nm { color: var(--cs-accent); }
.dh-sub { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; justify-self: end; }
.dh-sub input { height: 40px; width: 160px; max-width: 100%; border-radius: 20px; border: 0; box-shadow: 0 0 0 1px var(--cs-line3); padding: 0 16px; font: inherit; font-size: 14.5px; color: var(--cs-ink); background: #fff; }
.dh-sub input:focus { outline: none; box-shadow: 0 0 0 1px var(--cs-accent), var(--cs-focus); }
.dh-sub-msg { flex-basis: 100%; text-align: right; font-size: 13px; color: var(--cs-mute); }
.dh-sub-msg.ok { color: var(--cs-mint); } .dh-sub-msg.err { color: var(--cs-rose); }

/* ── Principles: open columns ── */
.dh-pgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; }
.dh-p { border-top: 1px solid var(--cs-line3); padding-top: 20px; }
.dh-p h3 { font-size: 17px; margin: 0 0 8px; letter-spacing: -0.01em; color: var(--cs-ink); }
.dh-p p { margin: 0; color: var(--cs-ink2); line-height: 1.6; font-size: 15px; }

/* Soft reveals on scroll */
.dh-rv { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--cs-ease), transform .7s var(--cs-ease); }
.dh-rv.in { opacity: 1; transform: none; }

@media (max-width: 1080px) {
  .dh-tiles { justify-self: start; }
  .dh-row { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 24px; }
  .dh-row .ds { grid-column: 1 / -1; grid-row: 2; }
  .dh-sub { grid-column: 1 / -1; justify-self: start; justify-content: flex-start; } .dh-sub-msg { text-align: left; }
  .dh-pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
}
@media (max-width: 760px) {
  .dh-hero { grid-template-columns: 1fr; }
  .dh-tiles { gap: 8px; max-width: none; }
  .dh-tiles .t { border-radius: 14px; padding: 8px; font-size: 0; }
  .dh-tiles .t b { font-size: 11px; }
  .dh-row { grid-template-columns: minmax(0, 1fr); padding: 22px 2px; }
  .dh-row .go { justify-self: start; }
  .dh-sub input { flex: 1; width: auto; }
  .dh-pgrid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .dh-tiles .t { animation: none !important; transition: none; }
  .dh-rv { opacity: 1; transform: none; transition: none; }
}