/* ============================================================================
   /products — "Our products" overview (.prd-*)
   The 12 growth engines on one page, each card in its product's OWN accent
   (--pc, same hexes as the home product map + the product pages' $heroVars).
   Calm-pass compliant: one-time reveals, color on glyphs/small labels, brand
   top bar on cards (semantically-colored product cards exception), permanent
   glow only on the real CTA. Headline follows the site H1 standard.
   ============================================================================ */

.prd { display: block; }
.prd section { position: relative; max-width: 1180px; margin-inline: auto; padding: 2.7rem 1.5rem; }

/* ---------------------------------------------------------------- HERO */
.prd-hero { text-align: center; padding-top: 4rem; padding-bottom: 1.6rem; }

/* eyebrow chip — page-key colour = the nav "מוצרים" pill (accent-pink);
   canonical chip metrics (31px) + the blog-pill light-up hover */
.prd-eyebrow {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .82rem; line-height: 1; font-weight: 700; letter-spacing: .04em;
  padding: .5rem .95rem; border-radius: 12px; text-decoration: none;
  color: var(--accent-pink);
  background: color-mix(in srgb, var(--accent-pink) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-pink) 50%, transparent);
  transition: background .25s, color .25s, border-color .25s, transform .25s, box-shadow .25s;
}
.prd-eyebrow i { font-size: .85em; }
.prd-eyebrow:hover {
  background: var(--accent-pink); border-color: var(--accent-pink); color: #fff;
  transform: translateY(-3px); box-shadow: 0 8px 22px var(--accent-pink-glow);
}

/* H1 — site headline standard: solid line + ONE static violet→pink→orange
   punch line (the !important recipe outranks the global h1 gradients in
   both themes, incl. body.light-theme h1) */
.prd-h1 {
  font-family: var(--font-display); font-weight: 800; letter-spacing: -.01em;
  font-size: clamp(1.75rem, 4vw, 3rem); line-height: 1.18;
  max-width: min(94vw, 900px); margin: 1.2rem auto .9rem;
}
.prd-h1 .prd-line {
  display: block;
  background: none !important;
  -webkit-text-fill-color: var(--heading-color) !important; color: var(--heading-color) !important;
  text-shadow: none !important; animation: none !important; filter: none !important;
}
.prd-h1 .prd-grad {
  display: block;
  background-image: linear-gradient(90deg, var(--accent-violet), var(--accent-pink), var(--accent-orange)) !important;
  background-size: 100% auto !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important; color: transparent !important;
  text-shadow: none !important; animation: none !important; filter: none !important;
  width: fit-content; max-width: 100%; margin-inline: auto;
}

.prd-sub {
  max-width: 640px; margin: 0 auto;
  font-size: clamp(1rem, 1.6vw, 1.15rem); line-height: 1.65; color: var(--text-secondary);
}

/* 12-engine legend — one small square per product, in its own colour,
   anchoring to its card below (hover light-up = the chip law) */
.prd-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-top: 1.9rem; }
.prd-lg {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 12px; font-size: 1.05rem; text-decoration: none;
  color: var(--pc);
  background: color-mix(in srgb, var(--pc) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--pc) 40%, transparent);
  transition: background .25s, color .25s, border-color .25s, transform .25s, box-shadow .25s;
}
.prd-lg:hover, .prd-lg:focus-visible {
  background: var(--pc); border-color: var(--pc); color: #fff;
  transform: translateY(-3px); box-shadow: 0 8px 22px color-mix(in srgb, var(--pc) 35%, transparent);
}

/* ---------------------------------------------------------------- LAYERS */
.prd-sec { scroll-margin-top: 96px; }
.prd-sec-intro { text-align: center; max-width: 780px; margin: 0 auto 2.4rem; }

/* small colored layer label — typography, not a chip (calm law) */
.prd-sec-label {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .85rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--lc); margin-bottom: .8rem;
}
.prd-sec-num {
  font-family: var(--font-display); font-weight: 800; font-size: .8rem;
  padding-inline-end: .5rem; border-inline-end: 2px solid color-mix(in srgb, var(--lc) 55%, transparent);
}
.prd-sec-label .fa-heart { font-size: .8em; }

.prd-sec-title {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.45rem, 3vw, 2.15rem); line-height: 1.25; color: var(--heading-color);
  margin: 0 0 .7rem; border-bottom: 0; padding-bottom: 0; /* kill the global h2 red underline */
}
.prd-sec-lede { max-width: 660px; margin: 0 auto; font-size: .98rem; line-height: 1.65; color: var(--text-secondary); }

/* ---------------------------------------------------------------- CARDS
   Flex (not grid) so wrapped rows self-center (4 → 3+1, 5 → 3+2) and the
   global ≤900px grid flattener can't distort the layout. */
.prd-cards { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.1rem; }
.prd-card {
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: .75rem;
  flex: 1 1 290px; max-width: 372px; padding: 1.5rem 1.4rem 1.3rem;
  border-radius: 18px; text-decoration: none; scroll-margin-top: 96px;
  background: var(--glass-bg); border: 1px solid var(--glass-border);
  transition: transform .25s, border-color .25s, box-shadow .25s;
}
/* the product's brand bar — symmetric fade (RTL-safe) */
.prd-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--pc), transparent);
}
.prd-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--pc) 45%, transparent);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .3);
}

.prd-card-top { display: flex; align-items: center; gap: .8rem; }
.prd-card-ic {
  flex-shrink: 0; width: 46px; height: 46px; border-radius: 12px;
  display: grid; place-items: center; font-size: 1.25rem;
  color: var(--pc); background: color-mix(in srgb, var(--pc) 14%, transparent);
}
.prd-card-id { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.prd-card-name { font-family: var(--font-display); font-weight: 700; font-size: 1.18rem; color: var(--heading-color); }
.prd-card-role { font-size: .82rem; font-weight: 600; color: var(--pc); }

.prd-card-desc { font-size: .93rem; line-height: 1.6; color: var(--text-secondary); }

.prd-card-go {
  margin-top: auto; display: inline-flex; align-items: center; gap: .45rem; align-self: flex-start;
  font-size: .86rem; font-weight: 700; color: var(--pc);
}
.prd-card-go i { font-size: .8em; transition: transform .2s; }
[dir="ltr"] .prd-card-go i { transform: scaleX(-1); }
.prd-card:hover .prd-card-go i { transform: translateX(-4px); }
[dir="ltr"] .prd-card:hover .prd-card-go i { transform: scaleX(-1) translateX(-4px); }

/* ---------------------------------------------------------------- PROMOTION TRACKS
   The heart section: paid | organic side by side, content (fuel) spans both.
   Quiet panels — the track colour (--tc) lives on the glyph + nothing else. */
.prd-tracks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; max-width: 1020px; margin-inline: auto; }
.prd-track {
  border: 1px solid var(--glass-border); border-radius: 20px; padding: 1.15rem;
  background: var(--glass-bg);
}
.prd-track-fuel { grid-column: 1 / -1; }
.prd-track-top { display: flex; align-items: center; gap: .7rem; margin-bottom: 1rem; }
.prd-track-top > i {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 12px;
  display: grid; place-items: center; font-size: 1rem;
  color: var(--tc); background: color-mix(in srgb, var(--tc) 13%, transparent);
}
.prd-track-id { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.prd-track-title { font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; color: var(--heading-color); }
.prd-track-sub { font-size: .8rem; color: var(--text-secondary); }
.prd-cards-col { flex-direction: column; }
.prd-cards-col .prd-card { flex: 0 0 auto; width: 100%; max-width: none; }
.prd-track-fuel .prd-cards-col .prd-card { max-width: 560px; margin-inline: auto; }
.prd-track .prd-card { background: var(--surface-elevated); }

.prd-note { text-align: center; max-width: 620px; margin: .4rem auto 0; padding-inline: 1.5rem; font-size: .98rem; color: var(--text-secondary); }

/* ---------------------------------------------------------------- CTA */
.prd-cta-card {
  position: relative; overflow: hidden; text-align: center; max-width: 820px; margin: 0 auto;
  padding: 3rem 2rem; border-radius: 26px;
  background:
    radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--accent-pink) 16%, transparent) 0%, transparent 55%),
    radial-gradient(120% 140% at 0% 100%, color-mix(in srgb, var(--accent-violet) 16%, transparent) 0%, transparent 55%),
    var(--surface-elevated);
  border: 1px solid var(--glass-border-hover); box-shadow: 0 24px 60px rgba(0, 0, 0, .34);
}
.prd-cta-title {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.4rem, 2.9vw, 2.1rem); color: var(--heading-color);
  margin: 0 0 1.4rem; border-bottom: 0; padding-bottom: 0;
}
.prd-cta-row { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; align-items: center; }

/* primary = the site primary CTA look (real button → pulse allowed) */
.prd-btn {
  display: inline-flex; align-items: center; gap: .6rem; cursor: pointer; text-decoration: none; border: none;
  font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: #fff;
  padding: 1rem 1.9rem; border-radius: 12px;
  background: var(--gradient-primary); background-size: 170% 170%; box-shadow: 0 10px 28px var(--primary-glow);
  animation: pulseGlow 3.5s ease-in-out infinite;
  transition: transform .2s cubic-bezier(.175, .885, .32, 1.275), box-shadow .25s, background-position .4s;
}
.prd-btn:hover { transform: translateY(-3px); background-position: 100% 0; box-shadow: 0 14px 38px var(--primary-glow); }
.prd-btn i { transition: transform .25s; }
[dir="ltr"] .prd-btn i { transform: scaleX(-1); }
.prd-btn:hover i { transform: translateX(-5px); }
[dir="ltr"] .prd-btn:hover i { transform: scaleX(-1) translateX(-5px); }

.prd-btn-ghost {
  background: transparent; color: var(--heading-color); box-shadow: none; animation: none;
  border: 1px solid var(--glass-border-hover);
}
.prd-btn-ghost:hover { background: var(--surface-elevated); box-shadow: none; }

/* ---------------------------------------------------------------- REVEALS
   one-time scroll reveals (motion budget), staggered by --i */
.prd-rv { opacity: 0; transform: translateY(16px); transition: opacity .55s ease, transform .55s ease; transition-delay: calc(var(--i, 0) * 70ms); }
.prd-rv.in { opacity: 1; transform: none; }

/* ---------------------------------------------------------------- LIGHT THEME
   raw product hexes are tuned for the dark bg — darken accent TEXT for contrast
   (same approach as product-outcomes.css); tinted chip/bar surfaces stay */
body.light-theme .prd-card-role,
body.light-theme .prd-card-go,
body.light-theme .prd-card-ic { color: color-mix(in srgb, var(--pc) 62%, #0a1424); }
body.light-theme .prd-lg { color: color-mix(in srgb, var(--pc) 62%, #0a1424); }
body.light-theme .prd-lg:hover, body.light-theme .prd-lg:focus-visible { color: #fff; }
body.light-theme .prd-sec-label { color: color-mix(in srgb, var(--lc) 60%, #0a1424); }
body.light-theme .prd-track-top > i { color: color-mix(in srgb, var(--tc) 62%, #0a1424); }
body.light-theme .prd-cta-card { box-shadow: 0 24px 60px rgba(15, 23, 42, .14); }
body.light-theme .prd-card:hover { box-shadow: 0 16px 40px rgba(15, 23, 42, .14); }

/* ---------------------------------------------------------------- MOTION OFF */
@media (prefers-reduced-motion: reduce) {
  .prd-rv { opacity: 1; transform: none; transition: none; }
  .prd-btn { animation: none; }
  .prd-eyebrow:hover, .prd-lg:hover, .prd-card:hover { transform: none; }
}

/* ---------------------------------------------------------------- MOBILE
   (kept at file end — later blocks must win over the base clamps) */
@media (max-width: 900px) {
  .prd section { padding: 2.4rem 1rem; }
  .prd-hero { padding-top: 2.8rem; }
  .prd-cards { gap: .9rem; }
  .prd-card { flex-basis: 100%; max-width: 480px; }
  /* re-assert start-aligned card text (global ≤900px centering) */
  .prd-card, .prd-card-desc { text-align: start; }
  .prd-card-go { align-self: flex-start; }
  /* the global flattener's `main [class*="-card"] { margin-inline: auto }`
     matches every .prd-card-* child; in the flex column auto margins beat
     stretch → children shrink-wrap + center. Reset them (.prd prefix outranks
     the [class*=] selector); the card itself stays centered. */
  .prd .prd-card { margin-inline: auto; }
  .prd .prd-card-top, .prd .prd-card-ic, .prd .prd-card-id, .prd .prd-card-name,
  .prd .prd-card-role, .prd .prd-card-desc, .prd .prd-card-go { margin-inline: 0; }
  /* promotion tracks stack; track heads stay start-aligned */
  .prd-tracks { grid-template-columns: 1fr; }
  .prd .prd-track, .prd .prd-track-top { text-align: start; margin-inline: 0; }
}
@media (max-width: 480px) {
  .prd-lg { width: 38px; height: 38px; font-size: .95rem; }
  .prd-cta-card { padding: 2.4rem 1.2rem; }
  .prd-btn { width: 100%; justify-content: center; }
}