/* =========================================================
   Fountain IT — Product detail page (product.html)
   Loaded alongside css/style.css: reuses design tokens, header,
   footer and shared components (mega-menu, maturity-tag,
   btn, service-link, illus-caption) defined there. This file
   only carries the detail-page-specific layout.
   ========================================================= */

/* No background here on purpose — same reasoning as style.css's own
   `body` rule: an opaque body background paints ABOVE a fixed,
   negative-z-index .story-bg layer and would hide it completely.
   html's own background (style.css) is the fallback, same color,
   for pages that don't have .story-bg. Was `background: var(--page-base)`
   here directly; removed when story-bg was ported to product.html —
   product.html, revup.html, hse.html and the flagship pages all share
   this class and this rule, so this one change is what makes the
   background visible everywhere it's added, with zero visual change
   on pages that don't have it yet. */
.product-main { padding-top: 96px; }

/* Custom cursor (dot + ring): style.css hides the native cursor
   sitewide (cursor:none) on fine-pointer devices and expects a
   replacement — js/cursor.js provides a GSAP-free port of the same
   dot/ring behavior index.html gets from js/script.js. See
   css/style.css's .cursor-dot / .cursor-ring rules for the styling. */

.product-loading, .product-notfound {
  min-height: 60vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 16px; color: var(--ink-soft);
}

/* ---------- Breadcrumb ---------- */
.product-breadcrumb {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 13px; color: var(--ink-mute); margin-bottom: 22px;
}
.product-breadcrumb a { color: var(--ink-soft); }
.product-breadcrumb a:hover { color: var(--accent-ink); }
.product-breadcrumb span { color: var(--ink); }
.crumb-sep { width: 12px; height: 12px; opacity: 0.5; }

/* ---------- Hero ---------- */
.product-hero {
  padding: 40px 0 70px;
  background:
    radial-gradient(ellipse 60% 50% at 85% 0%, color-mix(in srgb, var(--card-accent) 20%, transparent), transparent 70%),
    var(--page-base);
  border-bottom: 1px solid var(--glass-border);
}
.product-hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center; }
.product-tags-row { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }
.eyebrow-chip {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.5px;
  color: var(--card-accent, var(--accent)); text-transform: uppercase;
}
.product-hero-lockup { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; min-height: 30px; }
.product-hero-lockup-logo { height: 30px; width: auto; object-fit: contain; }
.product-hero-copy h1 { font-size: 46px; font-weight: 500; letter-spacing: -0.5px; line-height: 1.15; color: var(--ink); margin-bottom: 18px; }
.product-hero-summary { font-size: 18px; color: var(--ink-soft); max-width: 560px; margin-bottom: 30px; }
.product-hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }

.product-hero-visual {
  position: relative; border-radius: 26px; overflow: hidden; min-height: 300px;
  display: flex; align-items: center; justify-content: center;
  background: var(--glass-bg); border: 1px solid var(--glass-border);
  box-shadow: var(--elevation-2);
}
.product-hero-visual.product-hero-photo img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.product-hero-visual.product-hero-illus {
  color: var(--card-accent, var(--accent));
  background: linear-gradient(160deg, color-mix(in srgb, var(--card-accent) 22%, transparent), color-mix(in srgb, var(--card-accent) 4%, transparent));
}
.product-hero-visual.product-hero-illus svg { width: 88%; height: auto; }
.product-hero-visual.product-hero-logo {
  background: linear-gradient(160deg, color-mix(in srgb, var(--card-accent) 26%, transparent), color-mix(in srgb, var(--card-accent) 6%, transparent));
  padding: 40px;
}
.product-hero-visual.product-hero-logo img {
  max-width: 220px; max-height: 140px; object-fit: contain;
  background: #fff; border-radius: 14px; padding: 18px 26px; box-shadow: 0 10px 28px -10px rgba(0,0,0,0.45);
}
.product-hero-visual .illus-caption {
  position: absolute; bottom: 14px; right: 16px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.3px;
  color: rgba(255,255,255,0.75); background: rgba(6,12,22,0.55); padding: 5px 10px; border-radius: 20px;
}

/* ---------- Body ---------- */
.product-body { padding: 64px 0; display: grid; grid-template-columns: 1fr 300px; gap: 56px; align-items: start; }
.product-intro { font-size: 17px; color: var(--ink-soft); margin-bottom: 24px; }
.product-body-main h2 { font-size: 26px; margin: 32px 0 18px; }
.product-body-main h3 { font-size: 20px; margin: 34px 0 16px; }

.product-note, .product-disclaimer {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 16px 18px; border-radius: 14px; margin-bottom: 24px;
  background: var(--glass-bg); border: 1px solid var(--glass-border);
  font-size: 14px; color: var(--ink-soft);
}
.product-note i { color: var(--accent-ink); margin-top: 2px; }
.product-disclaimer { border-color: color-mix(in srgb, var(--status-warning) 45%, var(--glass-border)); }
.product-disclaimer i { color: var(--status-warning); margin-top: 2px; }
.product-note p, .product-disclaimer p { margin: 0; }

.product-cap-list { display: grid; gap: 12px; margin-bottom: 8px; }
.product-cap-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; color: var(--ink-soft); }
.cap-check { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--card-accent, var(--accent)); }

.product-subgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 24px 0; }
.product-subcard { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 18px; padding: 24px; box-shadow: var(--elevation-1); }
.product-subcard-logo { height: 26px; width: auto; object-fit: contain; margin-bottom: 12px; }
.product-subcard-tagline { font-size: 14px; color: var(--card-accent, var(--accent)); font-weight: 600; margin-bottom: 14px; }
@media (max-width: 700px) { .product-subgrid { grid-template-columns: 1fr; } }

.product-ai-frame { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 18px; padding: 26px; margin-top: 30px; box-shadow: var(--elevation-1); }
.product-ai-frame h3 { margin-top: 0; }
.product-ai-frame dl { display: grid; gap: 14px; margin: 0; }
.product-ai-frame-row dt { font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--accent-ink); margin-bottom: 4px; }
.product-ai-frame-row dd { margin: 0; font-size: 14px; color: var(--ink-soft); }

.product-body-side { position: sticky; top: 110px; }
.product-side-card { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 18px; padding: 26px; text-align: center; box-shadow: var(--elevation-1); }
.product-side-card h4 { font-size: 17px; margin-bottom: 10px; }
.product-side-card p { font-size: 14px; color: var(--ink-soft); margin-bottom: 20px; }
.btn-block { width: 100%; }
.product-side-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-size: 13px; color: var(--ink-soft); }
.product-side-link:hover { color: var(--accent-ink); }

@media (max-width: 900px) {
  .product-hero-grid { grid-template-columns: 1fr; }
  .product-hero-visual { min-height: 220px; }
  .product-body { grid-template-columns: 1fr; }
  .product-body-side { position: static; }
  .product-hero-copy h1 { font-size: 34px; }
}

/* ---------- Related products ---------- */
.product-related { padding: 20px 0 70px; max-width: var(--container-wide); margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.product-related h3 { font-size: 22px; margin-bottom: 22px; }
.product-related-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.product-related-card {
  display: block; background: var(--glass-bg); border: 1px solid var(--glass-border);
  border-radius: 18px; padding: 24px; box-shadow: var(--elevation-1);
  transition: transform 0.4s var(--ease-fluid), border-color 0.3s ease, box-shadow 0.4s var(--ease-fluid);
}
.product-related-card:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--card-accent) 45%, transparent); box-shadow: var(--elevation-2); }
.product-related-card h4 { font-size: 18px; margin: 12px 0 8px; color: var(--ink); }
.product-related-card p { font-size: 14px; color: var(--ink-soft); margin-bottom: 14px; }

/* ---------- CTA band ---------- */
.product-cta { padding: 0 0 90px; }
.product-cta-inner {
  text-align: center; padding: 54px 32px; border-radius: 26px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 20%, transparent), var(--glass-bg));
  border: 1px solid var(--glass-border);
}
.product-cta-inner h3 { font-size: 26px; margin-bottom: 22px; }