@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

.bridges-catalog {
  --catalog-ink: #153b3b;
  --catalog-teal: #123f40;
  --catalog-lime: #d7ef84;
  --catalog-line: #d8e5df;
  color: var(--catalog-ink);
  font-family: Manrope, Arial, sans-serif;
  padding: clamp(42px, 7vw, 90px) 24px;
  background:
    radial-gradient(circle at 82% 15%, #d7ef8433, transparent 30%),
    linear-gradient(145deg, #f7faf8, #edf4f1);
}

.bridges-catalog * { box-sizing: border-box; }
.bridges-catalog__inner { width: min(1180px, 100%); margin: 0 auto; }
.bridges-catalog__kicker { margin: 0 0 18px; color: #52746a; font-size: 12px; font-weight: 800; letter-spacing: .13em; }
.bridges-catalog__heading { margin: 0 0 34px; font-size: clamp(30px, 4vw, 48px); line-height: 1.15; letter-spacing: -.045em; font-weight: 600; }

.bridges-product-card {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --lift: 0px;
  --glow-x: 50%;
  --glow-y: 50%;
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(280px, .82fr) minmax(360px, 1.18fr);
  min-height: 480px;
  overflow: hidden;
  color: #fff;
  text-decoration: none;
  border: 1px solid #4c716b;
  border-radius: 26px;
  background: var(--catalog-teal);
  box-shadow: 0 26px 80px #123f4029;
  transform: perspective(1200px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateY(var(--lift));
  transform-style: preserve-3d;
  transition: transform 260ms ease, border-color 260ms ease, box-shadow 260ms ease;
  will-change: transform;
}

.bridges-catalog a.bridges-product-card,
.bridges-catalog a.bridges-product-card:link,
.bridges-catalog a.bridges-product-card:visited,
.bridges-catalog a.bridges-product-card:hover,
.bridges-catalog a.bridges-product-card:focus-visible { color: #fff; }
.bridges-catalog a.bridges-product-card h2 { color: #fff; }

.bridges-product-card.is-live,
.bridges-product-card:hover,
.bridges-product-card:focus-visible {
  --lift: -9px;
  border-color: var(--catalog-lime);
  box-shadow: 0 35px 90px #123f4044, 0 0 0 3px #d7ef8477;
}

.bridges-product-card:focus-visible { outline: 3px solid #789b35; outline-offset: 6px; }
.bridges-product-card .live-tilt-glow {
  position: absolute;
  z-index: 2;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at var(--glow-x) var(--glow-y), #d7ef8444, transparent 34%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}
.bridges-product-card.is-live .live-tilt-glow,
.bridges-product-card:focus-visible .live-tilt-glow { opacity: 1; }

.bridges-product-card__copy {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(34px, 5vw, 64px);
  transform: translate3d(var(--parallax-x, 0), var(--parallax-y, 0), 24px);
  transition: transform 260ms ease;
}

.bridges-product-card__logo { width: min(100%, 360px); height: auto; max-height: 118px; padding: 12px 16px; object-fit: contain; object-position: left center; border-radius: 12px; background: #f8fbfa; }
.bridges-product-card__eyebrow { margin-top: auto; color: var(--catalog-lime); font-size: 12px; font-weight: 800; letter-spacing: .12em; }
.bridges-product-card h2 { margin: 14px 0 12px; max-width: 470px; font-size: clamp(30px, 4vw, 52px); line-height: 1.07; letter-spacing: -.045em; font-weight: 600; }
.bridges-product-card p { margin: 0 0 28px; max-width: 455px; color: #c7d9d4; font-size: 16px; line-height: 1.75; }
.bridges-product-card__more { display: inline-flex; gap: 16px; align-items: center; min-height: 50px; padding: 12px 20px; border-radius: 8px; color: #153b3b; background: var(--catalog-lime); font-size: 14px; font-weight: 800; }
.bridges-product-card__visual { position: relative; z-index: 1; min-width: 0; padding: 34px 34px 34px 0; display: grid; align-items: center; transform: translate3d(var(--parallax-x, 0), var(--parallax-y, 0), 38px); transition: transform 260ms ease; }
.bridges-product-card__visual::before { content: ''; position: absolute; inset: 11% 3% 8% 6%; border-radius: 50%; background: #d7ef8422; filter: blur(28px); }
.bridges-product-card__visual img { position: relative; width: 100%; height: min(390px, 48vw); object-fit: contain; border: 1px solid #65857e; border-radius: 16px; background: #f6f9f7; box-shadow: 0 22px 55px #001f2044; }

@media (max-width: 760px) {
  .bridges-product-card { grid-template-columns: 1fr; }
  .bridges-product-card__copy { padding: 30px 26px; }
  .bridges-product-card__logo { width: min(100%, 300px); }
  .bridges-product-card__visual { padding: 0 20px 20px; }
  .bridges-product-card__visual img { height: 270px; }
  .bridges-product-card { transform: none; will-change: auto; }
  .bridges-product-card.is-touched { border-color: var(--catalog-lime); box-shadow: 0 22px 60px #123f4033, 0 0 0 2px #d7ef8466; }
}

@media (prefers-reduced-motion: reduce) {
  .bridges-product-card,
  .bridges-product-card__copy,
  .bridges-product-card__visual { transform: none; transition: none; }
  .bridges-product-card .live-tilt-glow { display: none; }
}