/* Shared Home / Product guard cards. Hover is independent of page-reveal motion. */
.protection-section { min-height: 0; }
.guard-grid { gap: 22px; }
.guard-card {
  min-height: 296px;
  padding: 23px;
  gap: 54px;
  border: 1px solid rgba(224, 221, 230, .46);
  border-radius: 20px;
  background: rgba(16, 15, 19, .48);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
  transition: transform 450ms cubic-bezier(.22, 1, .36, 1), border-color 450ms ease, background-color 450ms ease, box-shadow 450ms ease;
}
.guard-top { gap: 16px; }
.guard-icon { width: 40px; height: 40px; border-radius: 12px; border-color: #ffffff55; background: #ffffff08; transition: transform 450ms cubic-bezier(.22, 1, .36, 1), border-color 450ms ease; }
.guard-top > div { gap: 6px; max-width: 218px; }
.guard-top > div > span { font-size: 10px; line-height: 1.5; padding: 3px 10px; color: #d6d2da; border-color: #ffffff38; background: #ffffff06; }
.guard-bottom { padding-right: 0; }
.guard-bottom h3 { padding-right: 24px; font-size: 34px; }
.guard-bottom p { min-height: 3.3em; max-width: 32ch; font-size: 13px; line-height: 1.65; margin-top: 16px; color: #c8c3ce; }
.guard-bottom > span { top: 7px; color: #bdb3ca; transition: transform 450ms cubic-bezier(.22, 1, .36, 1), color 450ms ease; }
.guard-card:focus-visible { background: rgba(27, 24, 33, .64); border-color: #d4c5e6; }
@media (hover: hover) and (pointer: fine) {
  .guard-card:hover { transform: translateY(-6px); background: rgba(27, 24, 33, .64); border-color: #d4c5e6; box-shadow: inset 0 1px 0 #ffffff14, 0 16px 35px #00000033; }
  .guard-card:hover .guard-icon { transform: translateY(-2px); border-color: #d4c5e6; }
  .guard-card:hover .guard-bottom > span { transform: translate(3px, -3px); color: #f2edf7; }
}
@media (max-width: 1000px) {
  .guard-grid { gap: 16px; }
  .guard-card { min-height: 300px; padding: 20px; gap: 38px; }
  .guard-top { gap: 10px; }
  .guard-top > div > span { padding-inline: 8px; font-size: 9px; }
  .guard-bottom h3 { font-size: 30px; }
  .guard-bottom p { min-height: 3.3em; }
}
@media (max-width: 700px) {
  .guard-card { min-height: 248px; padding: 23px; gap: 35px; }
  .guard-top > div { max-width: 230px; }
  .guard-top > div > span { font-size: 10px; }
  .guard-bottom h3 { font-size: 34px; }
  .guard-bottom p { max-width: 42ch; min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .guard-card, .guard-icon, .guard-bottom > span { transition: none; }
  .guard-card:hover, .guard-card:hover .guard-icon, .guard-card:hover .guard-bottom > span { transform: none; }
}