/* ============================================================
   JP MACHINERY — Product Detail Page Styles
   Individual product pages — extends base style.css
   ============================================================ */

/* ── Breadcrumb ─────────────────────────────────────────────── */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.95rem 8vw;
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: #000;
  border-bottom: 1px solid var(--border);
  margin-top: 64px;
  background: var(--bg);
}

.breadcrumb a {
  color: #000;
  text-decoration: none;
  transition: color 0.2s;
}

.breadcrumb a:hover { color: var(--accent-blue); }

.breadcrumb > span {
  color: #555;
  font-size: 0.7rem;
}

.breadcrumb-current {
  color: #000;
  font-weight: 500;
}

/* ══════════════════════════════════════════════════════════════
   JP-SE  —  Scroll-pinned hero with scroll-driven video
   ══════════════════════════════════════════════════════════════ */

/* Pin zone: height set by JS (100vh + scroll distance for full video).
   Acts as the scroll track — sticky child rides inside it.          */
.se-pin-zone {
  position: relative;
  /* min fallback in case JS hasn't run yet */
  min-height: 100vh;
}

/* Sticky 100vh panel — stays put while zone scrolls past */
.se-hero {
  position: sticky;
  top: 0;
  height: 100vh;
  display: grid;
  grid-template-columns: 45% 55%;
  overflow: hidden;
  background: var(--bg);
}

/* ── Left column ──────────────────────────────────────────── */
.se-hero-left {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 5vw 5rem 8vw;    /* bottom clearance keeps content above scroll hint */
  padding-top: 80px;
  border-right: 1px solid var(--border);
  background: var(--bg);
  z-index: 2;
  overflow: hidden;
}

/* Breadcrumb pinned at top of left column */
.se-breadcrumb {
  position: absolute;
  top: 64px;
  left: 0; right: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8rem 8vw;
  font-family: var(--font-body);
  font-size: 0.76rem;
  border-bottom: 1px solid var(--border);
}
.se-breadcrumb a               { color: var(--text-muted); text-decoration: none; transition: color 0.2s; }
.se-breadcrumb a:hover         { color: var(--accent-color, #1B4FD8); }
.se-breadcrumb > span          { color: #bbb; font-size: 0.7rem; }
.se-breadcrumb > span:last-child { color: var(--text-primary); font-weight: 500; font-size: 0.76rem; }

/* Hero content entrance */
.se-hero-content {
  animation: seHeroIn 0.9s cubic-bezier(0.22,1,0.36,1) 0.15s both;
}
@keyframes seHeroIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Scroll hint — bottom-centre of left column */
.se-scroll-hint {
  position: absolute;
  bottom: 2rem;
  left: 0; right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: opacity 0.2s;
  pointer-events: none;
}
.se-scroll-arrow {
  width: 20px; height: 20px;
  animation: seScrollBounce 1.8s ease-in-out infinite;
}
.se-scroll-arrow svg { width: 100%; height: 100%; }
@keyframes seScrollBounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(7px); }
}

/* ── Right column ─────────────────────────────────────────── */
.se-hero-right {
  position: relative;
  height: 100%;          /* fill the grid row so absolute children anchor correctly */
  background: #ffffff;
  overflow: hidden;
}

/* Inner wrapper around the canvas/video/progress-bar. On desktop this
   is just a transparent passthrough (.se-hero-right already does the
   positioning work) — it exists so iPad portrait (below) can turn
   .se-hero-right into a tall scroll track and this into the
   position:sticky panel that actually stays on screen within it,
   independent of the text column above, without needing a second
   pin-zone element in the markup. */
.se-hero-right-sticky {
  height: 100%;
}

/* Canvas — centred in the right column on all product pages */
.se-hero-right canvas {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  height: 60%;
  display: block;
}

/* Progress bar — thin line at bottom of video column */
.se-progress-bar {
  position: absolute;
  bottom: 0; left: 0;
  height: 3px;
  width: 0%;
  background: var(--accent-color, #1B4FD8);
  transition: width 0.05s linear;
  z-index: 3;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 900px) {
  .se-pin-zone { height: auto !important; }
  .se-hero {
    position: relative;         /* not sticky — no scroll-driven animation on mobile */
    grid-template-columns: 1fr;
    height: auto;
    min-height: 100svh;
    overflow: visible;
  }
  .se-hero-left {
    border-right: none;
    border-bottom: none;
    justify-content: flex-start;
    padding: 9rem 6vw 3rem;
    height: auto;
    overflow: visible;
    overflow-x: hidden;
  }
  .se-breadcrumb { padding: 0.8rem 6vw; }
  .se-hero-right { display: none !important; }
  .se-scroll-hint { display: none; }
}
@media (max-width: 540px) {
  .se-hero-left { padding: 8rem 5vw 3rem; }
  .se-hero-right canvas { height: 180px !important; }
  .pd-hero-heading { font-size: clamp(1.3rem, 7.2vw, 2rem); }
  .pd-hero-stat-num { font-size: 1rem; }
  .pd-hero-stats { gap: 0.6rem; }
}

/* ===================== IPAD PORTRAIT ONLY ===================== *
   The side-by-side 45%/55% hero (text left, pinned scroll-video right)
   only stacks to a single column below max-width:900px — but iPad
   portrait widths go up to 1024px (iPad Pro 12.9"), so those were
   still getting the cramped desktop split instead of stacking.

   Text stacks above the video, both in normal flow (.se-hero is no
   longer sticky/pinned — .se-pin-zone's height goes back to auto).
   The video keeps its scroll-scrubbed behaviour instead of being
   hidden: .se-hero-right becomes its own tall scroll track (its real
   height is set by JS — see isIpadPortraitTouch()/initIpadPortraitScroll()
   in each product page's own script), and .se-hero-right-sticky inside
   it becomes the position:sticky panel that stays on screen while that
   height scrolls past — independent of the text above it, without
   needing a second pin-zone element in the markup. Scoped to iPad
   portrait specifically so landscape (already working) and desktop
   are untouched. */
@media (min-width: 700px) and (max-width: 1024px) and (orientation: portrait) {
  .se-pin-zone { height: auto !important; }
  .se-hero {
    position: relative;
    grid-template-columns: 1fr;
    height: auto;
    overflow: visible;
  }
  .se-hero-left {
    border-right: none;
    border-bottom: none;
    justify-content: flex-start;
    padding: 7rem 6vw 2rem;
    height: auto;
    overflow: visible;
    overflow-x: hidden;
  }
  .se-breadcrumb { padding: 0.8rem 6vw; }

  /* Tightened so the text block clears in less scroll, letting the
     video panel's top edge already peek into the first screen instead
     of requiring a full screen of scrolling to reach it. Content
     itself is unchanged — this only trims the spacing around it, not
     font sizes, so nothing gets cut off, just more compact. Easy to
     revert to the original values (1.6/0.85/1.1/2.2/2.5/1.4rem) if
     this ends up feeling too cramped. */
  .pd-hero-meta    { margin-bottom: 1rem; }
  .pd-hero-series  { margin-bottom: 0.5rem; }
  .pd-hero-heading { margin-bottom: 0.7rem; }
  .pd-hero-tagline { margin-bottom: 1.3rem; }
  .pd-hero-stats   { margin-bottom: 1.4rem; }
  .pd-hero-stat    { padding-top: 0.9rem; padding-bottom: 0.9rem; }

  .se-hero-right {
    display: block;
    height: 400vh; /* pre-JS fallback; overridden inline once initIpadPortraitScroll() runs */
    /* Must stay visible, not hidden — overflow:hidden on the DIRECT
       PARENT of a position:sticky element is a well-known WebKit bug
       that silently breaks the sticky behavior on iOS Safari (the
       child just scrolls past normally instead of pinning). Tried
       hidden here as a defensive measure against the panel growing
       too large, but that's what caused the video to stop sticking —
       reverted. Containment now happens one level down instead, on
       .se-hero-right-sticky itself (safe: overflow:hidden on a sticky
       element's own box doesn't affect its own stickiness). */
    overflow: visible;
  }
  .se-hero-right-sticky {
    position: sticky;
    /* top:20vh + height:60vh leaves an even 20vh gap below too, so the
       stuck panel sits vertically centered in the viewport instead of
       flush against the top edge. A fixed vh offset (not a percentage
       or transform) keeps sticky's own stick-point calculation simple
       and predictable. */
    top: 20vh;
    height: 60vh; /* was 100vh — full-screen felt oversized stacked below the text */
    overflow: hidden;
    background: #ffffff;
  }

  .se-scroll-hint { display: none; }
}

/* ===================== IPAD LANDSCAPE — VIDEO PANEL SIZE ONLY =====================
   The base 90%/60% canvas box (aspect ratio 1.5) is narrower than the
   16:9 (1.78) source videos, so `cover`-fit was cropping into the
   sides to fill that box regardless of how big or small the box itself
   was — shrinking the box (tried first, 78%/50%) just added empty
   margin around the same crop instead of fixing it. Matching the box's
   aspect ratio to the video's 16:9 removes the need for cover to crop
   horizontally at all, and widening it back out narrows the side
   margins as requested. Matches the html.is-touch-device gating used
   for the Process section's iPad-landscape fix on the homepage —
   landscape width alone would also match ordinary laptop windows, so
   this stays iPad-only via the touch-device class instead of a bare
   media query. */
@media (min-width: 1024px) and (max-width: 1400px) and (orientation: landscape) {
  html.is-touch-device .se-hero-right canvas {
    width: 92%;
    height: auto;
    aspect-ratio: 16 / 9;
  }
}

/* ── Product Hero ─────────────────────────────────────────────  */
.pd-hero {
  padding: 5rem 8vw 6rem;
  background: var(--bg);
  position: relative;
  overflow: hidden;
  min-height: 88vh;
  display: flex;
  align-items: center;
}

.pd-hero::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 52%;
  height: 100%;
  background: var(--bg-subtle);
  clip-path: polygon(12% 0, 100% 0, 100% 100%, 0% 100%);
  z-index: 0;
  pointer-events: none;
}

.pd-hero-inner {
  max-width: 1350px;
  margin: 0 auto;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1.7fr;
  gap: 2rem;
  align-items: center;
  position: relative;
  z-index: 1;
}

.pd-hero-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.6rem;
}

.pd-hero-category {
  font-family: var(--font-display);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-color, var(--accent-blue));
  padding: 0.32rem 0.85rem;
  border: 1px solid var(--accent-color, var(--accent-blue));
  border-radius: 100px;
  opacity: 0.85;
}

.pd-hero-badge {
  font-family: var(--font-display);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #fff;
  background: var(--accent-color, var(--accent-blue));
  padding: 0.32rem 0.75rem;
  border-radius: 100px;
}

.pd-hero-series {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.85rem;
}

.pd-hero-heading {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 3.8vw, 3.8rem);
  font-weight: 800;
  line-height: 1.0;
  letter-spacing: -0.025em;
  color: var(--text-primary);
  margin-bottom: 1.1rem;
  /* js/product-heading-fit.js shrinks this per-page to fit the column,
     based on each heading's actual text length. Deliberately no
     overflow-wrap:break-word here — that was tried as a belt-and-braces
     fallback, but it backfires: once the browser breaks a word to make
     it fit, heading.scrollWidth no longer reads as wider than the
     column, so the fit script's overflow check never fires and the
     word stays broken (e.g. "Compounding" -> "Compoundi"/"ng") instead
     of the font shrinking. Leaving real (unbroken) overflow in place is
     what lets the script detect it and act. */
}

.pd-hero-tagline {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 300;
  color: var(--text-secondary);
  line-height: 1.65;
  margin-bottom: 2.2rem;
  max-width: 460px;
}

.pd-hero-stats {
  display: flex;
  gap: 0;
  margin-bottom: 2.5rem;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.pd-hero-stat {
  flex: 1;
  padding: 1.4rem 0;
  padding-right: 1.5rem;
}

.pd-hero-stat + .pd-hero-stat {
  border-left: 1px solid var(--border);
  padding-left: 1.5rem;
  padding-right: 0;
}

.pd-hero-stat-num {
  display: block;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.15;
}

.pd-hero-stat-label {
  display: block;
  font-family: var(--font-body);
  font-size: 0.68rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  margin-top: 0.25rem;
}

.pd-hero-actions {
  display: flex;
  gap: 0.85rem;
  flex-wrap: wrap;
}

/* Hero visual */
.pd-hero-visual {
  display: flex;
  align-items: center;
  justify-content: center;
}

.pd-hero-svg-wrap {
  width: 100%;
  max-width: 480px;
  aspect-ratio: 1;
  background: #fff;
  border-radius: 24px;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 48px rgba(0,0,0,0.06);
  position: relative;
  overflow: hidden;
}

.pd-hero-svg-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 40%,
    var(--accent-color-faint, rgba(27,79,216,0.05)) 0%,
    transparent 65%);
  pointer-events: none;
}

.pd-hero-svg-wrap svg {
  width: 58%;
  height: 58%;
  position: relative;
  z-index: 1;
}

.pd-hero-img-wrap {
  width: 100%;
  position: relative;
}

.pd-hero-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 32px 64px rgba(27,79,216,0.22))
          drop-shadow(0 8px 20px rgba(0,0,0,0.16));
}

/* ── About — horizontal slider ───────────────────────────────── */
.pd-slider {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  border: none;
  box-shadow: 0 8px 40px rgba(0,0,0,0.09);
  background: #0d0d0d;
  height: 520px;
}

.pd-slider-viewport {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.pd-slider-track {
  display: flex;
  height: 100%;
  transition: transform 0.48s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.pd-slide {
  flex: 0 0 100%;
  height: 100%;
}

.pd-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Arrow buttons */
.pd-slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #000;
  transition: background 0.2s, transform 0.2s;
}

.pd-slider-arrow:hover {
  background: rgba(255, 255, 255, 0.82);
  transform: translateY(-50%) scale(1.08);
}

.pd-slider-arrow svg {
  width: 20px;
  height: 20px;
}

.pd-slider-prev { left: 14px; }
.pd-slider-next { right: 14px; }

/* Dot indicators */
.pd-slider-dots {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 10;
}

.pd-slider-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.35);
  padding: 0;
  transition: background 0.2s, transform 0.2s;
}

.pd-slider-dot.active {
  background: #fff;
  transform: scale(1.4);
}

/* ── About Section ──────────────────────────────────────────── */
.pd-about {
  padding: 7rem 8vw;
  background: var(--bg);
}

.pd-about-inner {
  max-width: 1350px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 5rem;
  align-items: start;
}

.pd-about-label {
  font-family: var(--font-display);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent-color, var(--accent-blue));
  display: block;
  margin-bottom: 1.2rem;
}

.pd-about-heading {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 2.6vw, 2.7rem);
  font-weight: 700;
  line-height: 1.18;
  color: var(--text-primary);
  margin-bottom: 1.4rem;
  letter-spacing: -0.02em;
}

.pd-about-desc {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.78;
  color: var(--text-secondary);
  margin-bottom: 2.2rem;
}

.pd-features-title {
  font-family: var(--font-display);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 1.1rem;
}

.pd-features-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.pd-features-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-family: var(--font-body);
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.55;
}

.pd-feature-dot {
  flex-shrink: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent-color, var(--accent-blue));
  margin-top: 0.5rem;
}

/* About right panel */
.pd-about-visual {
  position: sticky;
  top: 100px;
  display: flex;
  justify-content: center;
}

.pd-visual-panel {
  background: var(--bg-subtle);
  border-radius: 20px;
  padding: 2.5rem;
  border: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}

.pd-visual-panel::before {
  content: '';
  position: absolute;
  bottom: -60px;
  right: -60px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: var(--accent-color-faint, rgba(27,79,216,0.05));
  pointer-events: none;
}

.pd-visual-panel-svg {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 0;
}

.pd-visual-panel-svg svg {
  width: 70%;
  height: auto;
}

.pd-visual-metric {
  margin-top: 1.8rem;
  padding-top: 1.8rem;
  border-top: 1px solid var(--border);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.4rem;
}

.pd-metric-val {
  display: block;
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.1;
}

.pd-metric-key {
  display: block;
  font-family: var(--font-body);
  font-size: 0.68rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  margin-top: 0.25rem;
}

/* ── Section headers (shared) ───────────────────────────────── */
.pd-section-header {
  margin-bottom: 3rem;
}

.pd-section-label {
  display: block;
  font-family: var(--font-display);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent-color, var(--accent-blue));
  margin-bottom: 0.9rem;
}

.pd-section-heading {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 2.6vw, 2.7rem);
  font-weight: 700;
  line-height: 1.15;
  color: var(--text-primary);
  letter-spacing: -0.02em;
}

/* ── Specs Section ──────────────────────────────────────────── */
.pd-specs {
  padding: 7rem 8vw;
  background: var(--bg-subtle);
}

.pd-specs-inner {
  max-width: 1350px;
  margin: 0 auto;
}

.pd-spec-cards {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  background: var(--border);
  gap: 1px;
}

.pd-spec-card {
  background: #fff;
}

.pd-spec-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.35rem 1.8rem;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  gap: 1rem;
  transition: background 0.2s;
}

.pd-spec-trigger:hover { background: #fafafa; }

.pd-spec-trigger-left {
  flex: 1;
}

.pd-spec-model-name {
  font-family: var(--font-display);
  font-size: 0.93rem;
  font-weight: 700;
  color: var(--text-primary);
}

.pd-spec-model-sub {
  font-family: var(--font-body);
  font-size: 0.76rem;
  color: var(--text-muted);
  margin-top: 0.18rem;
}

.pd-spec-key-stat {
  font-family: var(--font-display);
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--accent-color, var(--accent-blue));
  white-space: nowrap;
  flex-shrink: 0;
}

.pd-spec-toggle {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  transition: transform 0.3s cubic-bezier(0.4,0,0.2,1),
              background 0.25s, border-color 0.25s, color 0.25s;
}

.pd-spec-card.open .pd-spec-toggle {
  transform: rotate(45deg);
  background: var(--accent-color, var(--accent-blue));
  border-color: var(--accent-color, var(--accent-blue));
  color: #fff;
}

.pd-spec-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.42s cubic-bezier(0.4,0,0.2,1);
}

.pd-spec-card.open .pd-spec-body {
  max-height: 700px;
}

.pd-spec-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
}

.pd-spec-table tr {
  border-top: 1px solid var(--border);
}

.pd-spec-table td {
  padding: 0.72rem 1.8rem;
  font-size: 0.865rem;
  line-height: 1.45;
}

.pd-spec-table td:first-child {
  color: var(--text-muted);
  width: 46%;
  font-weight: 400;
}

.pd-spec-table td:last-child {
  color: var(--text-primary);
  font-weight: 500;
}

/* ── Applications ───────────────────────────────────────────── */
.pd-applications {
  padding: 7rem 8vw;
  background: var(--bg);
}

.pd-applications-inner {
  max-width: 1350px;
  margin: 0 auto;
}

.pd-app-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
  margin-top: 3rem;
}

.pd-app-card {
  padding: 1.8rem;
  border: 1px solid var(--border);
  border-radius: 14px;
  transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s;
  background: var(--bg);
}

.pd-app-card:hover {
  border-color: var(--accent-color, var(--accent-blue));
  box-shadow: 0 6px 28px rgba(0,0,0,0.07);
  transform: translateY(-3px);
}

.pd-app-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: var(--accent-color-faint, rgba(27,79,216,0.06));
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.1rem;
}

.pd-app-icon svg {
  width: 20px;
  height: 20px;
  stroke: var(--accent-color, var(--accent-blue));
}

.pd-app-title {
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.45rem;
}

.pd-app-desc {
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.58;
}

/* ── Related Products ───────────────────────────────────────── */
.pd-related {
  padding: 7rem 8vw;
  background: var(--bg-subtle);
}

.pd-related-inner {
  max-width: 1350px;
  margin: 0 auto;
}

.pd-related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.8rem;
  margin-top: 3rem;
}

.pd-related-card {
  text-decoration: none;
  color: inherit;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  transition: box-shadow 0.3s, transform 0.3s, border-color 0.3s;
  display: block;
}

.pd-related-card:hover {
  box-shadow: 0 10px 44px rgba(0,0,0,0.09);
  transform: translateY(-5px);
  border-color: rgba(0,0,0,0.12);
}

.pd-related-visual {
  position: relative;
  height: 155px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #fff !important;
}

.pd-related-visual svg {
  width: 76px;
  height: 76px;
}

.pd-related-visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 6px;
  box-sizing: border-box;
  object-fit: contain;
  display: block;
}

.pd-related-info {
  padding: 1.4rem 1.5rem;
  border-top: 1px solid var(--border);
}

.pd-related-series {
  font-family: var(--font-display);
  font-size: 0.63rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.35rem;
}

.pd-related-title {
  font-family: var(--font-display);
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.65rem;
}

.pd-related-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--accent-blue);
}

.pd-related-cta svg {
  width: 13px;
  height: 13px;
  transition: transform 0.2s;
}

.pd-related-card:hover .pd-related-cta svg {
  transform: translateX(4px);
}

/* ── CTA Banner ─────────────────────────────────────────────── */
.pd-cta-banner {
  padding: 8rem 8vw;
  background:
    radial-gradient(ellipse 80% 60% at 10% 30%,  rgba(27,79,216,0.35) 0%, transparent 60%),
    radial-gradient(ellipse 60% 70% at 90% 80%,  rgba(15,40,120,0.45) 0%, transparent 65%),
    radial-gradient(ellipse 50% 50% at 55% 10%,  rgba(60,100,200,0.18) 0%, transparent 55%),
    #0b1630;
  text-align: center;
}

.pd-cta-inner {
  max-width: 680px;
  margin: 0 auto;
}

.pd-cta-label {
  display: block;
  font-family: var(--font-display);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  margin-bottom: 1.4rem;
}

.pd-cta-heading {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.5vw, 3.5rem);
  font-weight: 800;
  color: #fff;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 1rem;
}

.pd-cta-sub {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: rgba(255,255,255,0.5);
  margin-bottom: 2.5rem;
  line-height: 1.65;
}

.pd-cta-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.cta-button.cta-white {
  background: #fff;
  color: #0d0d0d;
  border: 1.5px solid #fff;
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}

.cta-button.cta-white:hover {
  background: var(--accent-blue);
  color: #fff;
  border-color: var(--accent-blue);
}

.cta-button.cta-ghost-white {
  background: transparent;
  color: rgba(255,255,255,0.7);
  border: 1.5px solid rgba(255,255,255,0.2);
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}

.cta-button.cta-ghost-white:hover {
  background: rgba(255,255,255,0.09);
  color: #fff;
  border-color: rgba(255,255,255,0.45);
}

/* ── Scroll animations (IntersectionObserver-driven) ───────── */
@keyframes pdFadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes pdFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.animate-in {
  opacity: 0;
}

.animate-in.is-visible {
  animation: pdFadeUp 0.68s cubic-bezier(0.22,1,0.36,1) forwards;
}

.animate-in.anim-delay-1.is-visible { animation-delay: 0.08s; }
.animate-in.anim-delay-2.is-visible { animation-delay: 0.16s; }
.animate-in.anim-delay-3.is-visible { animation-delay: 0.24s; }
.animate-in.anim-delay-4.is-visible { animation-delay: 0.32s; }
.animate-in.anim-delay-5.is-visible { animation-delay: 0.40s; }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .pd-hero-inner {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .pd-hero::after { display: none; }

  .pd-hero-visual { justify-content: flex-start; }

  .pd-hero-svg-wrap { max-width: 400px; }

  .pd-slider { position: static; height: 380px; }

  .pd-about-inner {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .pd-about-visual {
    position: static;
    justify-content: center;
  }

  .pd-app-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .pd-related-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .pd-hero { padding: 3rem 6vw 4rem; min-height: unset; }
  .pd-about, .pd-specs, .pd-applications, .pd-related { padding: 5rem 6vw; }
  .pd-cta-banner { padding: 5rem 6vw; }
  .pd-hero-stats { flex-direction: row; flex-wrap: wrap; }
  .pd-hero-stat + .pd-hero-stat { border-left: 1px solid var(--border); }
  .pd-slider { height: 320px; }

  /* "Get in Touch" heading — scale up to fill mobile screen */
  .pd-cta-heading {
    font-size: clamp(2.2rem, 10vw, 3.5rem);
  }
}

@media (max-width: 540px) {
  .pd-app-grid { grid-template-columns: 1fr; }
  .pd-related-grid { grid-template-columns: 1fr; }
  .pd-hero-actions { flex-direction: column; }
  .pd-cta-actions { flex-direction: column; align-items: center; }
  .breadcrumb { padding: 0.85rem 6vw; }
  .pd-hero-stats { flex-direction: column; gap: 0; }
  .pd-hero-stat + .pd-hero-stat { border-left: none; border-top: 1px solid var(--border); padding-left: 0; }
  .pd-visual-metric { grid-template-columns: 1fr 1fr; }
  .pd-slider-arrow { width: 36px; height: 36px; }
  .pd-slider-arrow svg { width: 16px; height: 16px; }
}