/*
 * Pacific BioEngineering — Premium Product Detail
 * Awwwards-grade pharmaceutical UX/UI
 * Typography: Poppins (headings) + Inter (body)
 * Color: Blue/Purple/Green premium medical palette
 */

/* ═══════════════════════════════════════════
   DESIGN TOKENS
═══════════════════════════════════════════ */
:root {
  --pd-bg:          #F8FAFC;
  --pd-surface:     #FFFFFF;
  --pd-primary:     #2563EB;
  --pd-primary-lt:  #DBEAFE;
  --pd-primary-dk:  #1D4ED8;
  --pd-secondary:   #22C55E;
  --pd-secondary-lt:#DCFCE7;
  --pd-accent:      #7C3AED;
  --pd-accent-lt:   #EDE9FE;
  --pd-amber:       #F59E0B;
  --pd-amber-lt:    #FEF3C7;
  --pd-red:         #EF4444;
  --pd-red-lt:      #FEE2E2;
  --pd-teal:        #0D9488;
  --pd-teal-lt:     #CCFBF1;
  --pd-text:        #0F172A;
  --pd-text-2:      #475569;
  --pd-text-3:      #94A3B8;
  --pd-border:      #E2E8F0;
  --pd-border-lt:   #F1F5F9;

  --pd-r-sm:  8px;
  --pd-r-md:  12px;
  --pd-r-lg:  16px;
  --pd-r-xl:  24px;
  --pd-r-2xl: 32px;

  --pd-shadow-sm:  0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
  --pd-shadow-md:  0 4px 16px rgba(15,23,42,.08), 0 2px 6px rgba(15,23,42,.04);
  --pd-shadow-lg:  0 12px 40px rgba(15,23,42,.10), 0 4px 12px rgba(15,23,42,.06);
  --pd-shadow-xl:  0 24px 64px rgba(15,23,42,.12), 0 8px 24px rgba(15,23,42,.08);
  --pd-shadow-glow:0 0 40px rgba(37,99,235,.18);
  --pd-shadow-card:0 2px 8px rgba(37,99,235,.06), 0 0 0 1px rgba(37,99,235,.06);

  --pd-glass-bg:   rgba(255,255,255,.72);
  --pd-glass-blur: blur(20px);
  --pd-glass-border:1px solid rgba(255,255,255,.6);

  --pd-font-head: 'Poppins', sans-serif;
  --pd-font-body: 'Inter', sans-serif;

  --pd-ease: cubic-bezier(0.4,0,0.2,1);
  --pd-ease-spring: cubic-bezier(0.34,1.56,0.64,1);
  --pd-ease-out: cubic-bezier(0,0,0.2,1);
}

/* ═══════════════════════════════════════════
   GLOBAL RESETS & BASE
═══════════════════════════════════════════ */
.pd-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

body {
  background: var(--pd-bg);
  font-family: var(--pd-font-body);
  color: var(--pd-text);
  overflow-x: hidden;
}

/* ═══════════════════════════════════════════
   BREADCRUMB
═══════════════════════════════════════════ */
.pd-breadcrumb-wrap {
  background: var(--pd-surface);
  border-bottom: 1px solid var(--pd-border);
  padding: .75rem 0;
}

.pd-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .25rem;
  font-size: .8125rem;
  color: var(--pd-text-2);
  font-family: var(--pd-font-body);
}

.pd-breadcrumb a { color: var(--pd-primary); text-decoration: none; transition: color .2s; }
.pd-breadcrumb a:hover { color: var(--pd-primary-dk); text-decoration: underline; }
.pd-bc-sep { color: var(--pd-text-3); }
.pd-bc-current { color: var(--pd-text); font-weight: 600; }

/* ═══════════════════════════════════════════
   SKELETON LOADING
═══════════════════════════════════════════ */
.pd-loading { padding: 3rem 24px; max-width: 1200px; margin: 0 auto; }
.pd-skeleton-hero {
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 3rem;
  align-items: start;
}
.pd-skel {
  background: linear-gradient(90deg,#e2e8f0 25%,#f1f5f9 50%,#e2e8f0 75%);
  background-size: 200% 100%;
  animation: pdSkelShimmer 1.5s infinite;
  border-radius: var(--pd-r-md);
}
.pd-skel-img   { height: 420px; border-radius: var(--pd-r-xl); }
.pd-skel-info  { padding-top: 2rem; display: flex; flex-direction: column; gap: 1rem; }
.pd-skel-badge { height: 28px; width: 120px; border-radius: 20px; }
.pd-skel-h1    { height: 48px; width: 85%; }
.pd-skel-text  { height: 18px; width: 100%; }
.pd-skel-text.short { width: 70%; }
.pd-skel-btn   { height: 52px; width: 200px; }
@keyframes pdSkelShimmer { to { background-position: -200% 0; } }

/* ═══════════════════════════════════════════
   ERROR STATE
═══════════════════════════════════════════ */
.pd-error { display: flex; justify-content: center; align-items: center; min-height: 60vh; padding: 2rem; }
.pd-error-inner { text-align: center; max-width: 480px; }
.pd-error-icon {
  width: 80px; height: 80px; border-radius: 50%;
  background: var(--pd-red-lt); color: var(--pd-red);
  font-size: 2rem; display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1.5rem;
}
.pd-error-inner h2 { font-family: var(--pd-font-head); font-size: 1.75rem; margin-bottom: .75rem; }
.pd-error-inner p  { color: var(--pd-text-2); margin-bottom: 2rem; }

/* ═══════════════════════════════════════════
   BUTTONS
═══════════════════════════════════════════ */
.pd-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .875rem 1.75rem;
  border-radius: var(--pd-r-lg);
  font-family: var(--pd-font-body);
  font-size: .9375rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  border: none;
  transition: transform .2s var(--pd-ease), box-shadow .2s var(--pd-ease), background .2s;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  min-height: 48px;
}

.pd-btn-primary {
  background: linear-gradient(135deg, var(--pd-primary) 0%, #4F46E5 100%);
  color: #fff;
  box-shadow: 0 4px 20px rgba(37,99,235,.35);
}
.pd-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(37,99,235,.45); }
.pd-btn-primary:active { transform: translateY(0); }

.pd-btn-glass {
  background: rgba(255,255,255,.2);
  backdrop-filter: var(--pd-glass-blur);
  border: 1px solid rgba(255,255,255,.35);
  color: #fff;
}
.pd-btn-glass:hover { background: rgba(255,255,255,.3); transform: translateY(-2px); }

.pd-btn-outline {
  background: transparent;
  border: 2px solid var(--pd-primary);
  color: var(--pd-primary);
}
.pd-btn-outline:hover { background: var(--pd-primary-lt); transform: translateY(-2px); }

.pd-btn-shimmer {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.25) 50%, transparent 100%);
  transform: translateX(-100%);
  transition: transform .6s var(--pd-ease);
  pointer-events: none;
}
.pd-btn-primary:hover .pd-btn-shimmer { transform: translateX(100%); }

/* Magnetic effect */
.pd-magnetic { transition: transform .3s var(--pd-ease-spring), box-shadow .3s var(--pd-ease); }

/* ═══════════════════════════════════════════
   SECTION SHARED
═══════════════════════════════════════════ */
.pd-section { padding: 80px 0; }
.pd-section-header { text-align: center; margin-bottom: 3.5rem; }
.pd-eyebrow {
  display: inline-block;
  font-family: var(--pd-font-body);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--pd-primary);
  background: var(--pd-primary-lt);
  padding: .35rem .9rem;
  border-radius: 20px;
  margin-bottom: .9rem;
}
.pd-section-title {
  font-family: var(--pd-font-head);
  font-size: clamp(1.65rem, 3vw, 2.25rem);
  font-weight: 700;
  color: var(--pd-text);
  letter-spacing: -.03em;
  margin-bottom: .75rem;
  line-height: 1.2;
}
.pd-section-sub {
  color: var(--pd-text-2);
  font-size: 1rem;
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.7;
}

/* ═══════════════════════════════════════════
   SECTION 1 — HERO
═══════════════════════════════════════════ */
.pd-hero {
  background: linear-gradient(135deg, #0F172A 0%, #1E1B4B 40%, #1E3A5F 100%);
  min-height: 90vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
  padding: 100px 0 80px;
}

/* Gradient blobs */
.pd-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .35;
  pointer-events: none;
}
.pd-blob-1 { width: 600px; height: 600px; background: radial-gradient(circle, #2563EB, transparent); top: -150px; left: -200px; animation: pdBlobFloat 8s ease-in-out infinite; }
.pd-blob-2 { width: 400px; height: 400px; background: radial-gradient(circle, #7C3AED, transparent); bottom: -100px; right: -100px; animation: pdBlobFloat 10s ease-in-out infinite reverse; }
.pd-blob-3 { width: 300px; height: 300px; background: radial-gradient(circle, #22C55E, transparent); top: 50%; left: 50%; animation: pdBlobFloat 12s ease-in-out infinite 2s; }
@keyframes pdBlobFloat { 0%,100% { transform: translate(0,0) scale(1); } 33% { transform: translate(30px,-20px) scale(1.05); } 66% { transform: translate(-20px,30px) scale(.95); } }

.pd-particles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.pd-particle {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  animation: pdParticleRise linear infinite;
}
@keyframes pdParticleRise { from { transform: translateY(100vh) scale(0); opacity: 0; } to { transform: translateY(-100px) scale(1); opacity: .4; } }

.pd-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  position: relative;
  z-index: 1;
}

/* Hero Info */
.pd-hero-info { color: #fff; }
.pd-hero-top-row { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.25rem; flex-wrap: wrap; }

.pd-category-badge {
  display: inline-flex; align-items: center;
  padding: .375rem 1rem;
  border-radius: 20px;
  font-size: .75rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: #fff;
  background: linear-gradient(135deg, var(--pd-primary), var(--pd-accent));
}

.pd-rx-chip {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .375rem .875rem;
  border-radius: 20px;
  background: rgba(239,68,68,.2);
  border: 1px solid rgba(239,68,68,.4);
  color: #fca5a5;
  font-size: .75rem; font-weight: 700;
  letter-spacing: .04em;
}

.pd-hero-title {
  font-family: var(--pd-font-head);
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.04em;
  color: #fff;
  margin-bottom: .75rem;
  background: linear-gradient(135deg, #fff 0%, #BFDBFE 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.pd-hero-subtitle {
  font-size: 1.125rem;
  color: #93C5FD;
  margin-bottom: .75rem;
  font-weight: 500;
}

.pd-hero-value-prop {
  color: rgba(255,255,255,.65);
  font-size: .9375rem;
  line-height: 1.7;
  margin-bottom: 1.5rem;
  max-width: 480px;
}

.pd-benefit-chips {
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin-bottom: 2rem;
}
.pd-chip {
  display: inline-flex; align-items: center; gap: .375rem;
  padding: .375rem .875rem;
  background: rgba(37,99,235,.25);
  border: 1px solid rgba(37,99,235,.4);
  border-radius: 20px;
  color: #BFDBFE;
  font-size: .8125rem; font-weight: 600;
}
.pd-chip-green {
  background: rgba(34,197,94,.2);
  border-color: rgba(34,197,94,.35);
  color: #86EFAC;
}

.pd-hero-ctas { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 2.5rem; }

/* Trust Metrics */
.pd-trust-metrics {
  display: flex; align-items: center; gap: 0;
  background: rgba(255,255,255,.08);
  backdrop-filter: var(--pd-glass-blur);
  border: var(--pd-glass-border);
  border-radius: var(--pd-r-xl);
  padding: 1.25rem 1.75rem;
  max-width: fit-content;
}
.pd-metric { text-align: center; padding: 0 1.5rem; }
.pd-metric-num {
  display: block;
  font-family: var(--pd-font-head);
  font-size: 1.625rem; font-weight: 700;
  color: #fff;
  line-height: 1;
  margin-bottom: .25rem;
}
.pd-metric-label { font-size: .75rem; color: rgba(255,255,255,.6); font-weight: 500; }
.pd-metric-divider { width: 1px; height: 40px; background: rgba(255,255,255,.15); }

/* Hero Visual */
.pd-hero-visual { display: flex; justify-content: center; align-items: center; }
.pd-product-stage {
  position: relative;
  width: 420px;
  height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pd-stage-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.1);
  animation: pdRingPulse 4s ease-in-out infinite;
}
.pd-ring-1 { width: 380px; height: 380px; animation-delay: 0s; }
.pd-ring-2 { width: 450px; height: 450px; animation-delay: 1.5s; }
@keyframes pdRingPulse { 0%,100% { transform: scale(1); opacity: .3; } 50% { transform: scale(1.04); opacity: .15; } }

.pd-product-glow {
  position: absolute;
  width: 300px; height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(37,99,235,.4), transparent 70%);
  filter: blur(30px);
  animation: pdGlowPulse 3s ease-in-out infinite;
}
@keyframes pdGlowPulse { 0%,100% { opacity: .6; transform: scale(1); } 50% { opacity: 1; transform: scale(1.1); } }

.pd-product-img-wrap {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  width: 300px; height: 300px;
  animation: pdFloatImg 5s ease-in-out infinite;
  filter: drop-shadow(0 24px 48px rgba(0,0,0,.5));
}
.pd-product-img-wrap img {
  width: 100%; height: 100%;
  object-fit: contain;
  border-radius: var(--pd-r-xl);
}
@keyframes pdFloatImg { 0%,100% { transform: translateY(0) rotateY(0deg); } 50% { transform: translateY(-16px) rotateY(3deg); } }

/* Hotspots */
.pd-hotspot {
  position: absolute;
  z-index: 10;
  cursor: pointer;
}
.pd-hs-1 { top: 15%; right: 10%; }
.pd-hs-2 { bottom: 20%; right: 5%; }
.pd-hs-3 { top: 55%; left: 8%; }

.pd-hs-dot {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--pd-secondary);
  box-shadow: 0 0 0 4px rgba(34,197,94,.3), 0 0 0 8px rgba(34,197,94,.12);
  animation: pdHsDot 2s ease-in-out infinite;
}
@keyframes pdHsDot { 0%,100% { box-shadow: 0 0 0 4px rgba(34,197,94,.3),0 0 0 8px rgba(34,197,94,.12); } 50% { box-shadow: 0 0 0 6px rgba(34,197,94,.25),0 0 0 12px rgba(34,197,94,.08); } }

.pd-hs-tooltip {
  position: absolute;
  left: 22px; top: 50%;
  transform: translateY(-50%);
  background: rgba(15,23,42,.9);
  backdrop-filter: var(--pd-glass-blur);
  border: var(--pd-glass-border);
  color: #fff;
  font-size: .75rem; font-weight: 600;
  padding: .3rem .75rem;
  border-radius: var(--pd-r-sm);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
}
.pd-hotspot:hover .pd-hs-tooltip,
.pd-hotspot:focus .pd-hs-tooltip { opacity: 1; }

/* Floating cards */
.pd-float-card {
  position: absolute;
  display: flex; align-items: center; gap: .625rem;
  background: var(--pd-glass-bg);
  backdrop-filter: var(--pd-glass-blur);
  border: var(--pd-glass-border);
  border-radius: var(--pd-r-lg);
  padding: .75rem 1.125rem;
  box-shadow: var(--pd-shadow-lg);
  z-index: 5;
  animation: pdFloatCard 4s ease-in-out infinite;
}
.pd-fc-packaging { bottom: 12%; left: -5%; animation-delay: 0.5s; }
.pd-fc-cert      { top: 5%; right: -5%; animation-delay: 1.5s; }
@keyframes pdFloatCard { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.pd-float-card i { font-size: 1.25rem; color: var(--pd-primary); }
.pd-fc-label { display: block; font-size: .65rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--pd-text-2); }
.pd-fc-val   { display: block; font-size: .875rem; font-weight: 700; color: var(--pd-text); }

/* ═══════════════════════════════════════════
   SECTION 2 — INFOBAR
═══════════════════════════════════════════ */
.pd-infobar {
  background: var(--pd-surface);
  border-bottom: 1px solid var(--pd-border);
  box-shadow: var(--pd-shadow-sm);
  position: relative;
  z-index: 10;
}
.pd-infobar-grid {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 0;
  padding: 0;
}
.pd-infobar-item {
  display: flex; align-items: center; gap: .875rem;
  flex: 1; min-width: 160px;
  padding: 1.25rem 1.5rem;
  transition: background .2s;
}
.pd-infobar-item:hover { background: var(--pd-border-lt); }
.pd-infobar-icon {
  width: 40px; height: 40px; border-radius: var(--pd-r-md);
  background: var(--pd-primary-lt);
  color: var(--pd-primary);
  display: flex; align-items: center; justify-content: center;
  font-size: .9rem; flex-shrink: 0;
}
.pd-icon-safe   { background: var(--pd-secondary-lt); color: var(--pd-secondary); }
.pd-icon-purple { background: var(--pd-accent-lt);    color: var(--pd-accent); }
.pd-icon-amber  { background: var(--pd-amber-lt);     color: var(--pd-amber); }
.pd-infobar-label { display: block; font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--pd-text-3); margin-bottom: .2rem; }
.pd-infobar-val   { display: block; font-size: .875rem; font-weight: 700; color: var(--pd-text); line-height: 1.3; }
.pd-val-safe { color: var(--pd-secondary); }
.pd-infobar-divider { width: 1px; background: var(--pd-border); align-self: stretch; }

/* ═══════════════════════════════════════════
   SECTION 3 — STICKY TABS
═══════════════════════════════════════════ */
.pd-tabs-sticky {
  background: var(--pd-surface);
  border-bottom: 1px solid var(--pd-border);
  position: sticky;
  top: 0;
  z-index: 200;
  box-shadow: 0 2px 12px rgba(15,23,42,.07);
}
.pd-tabs-row {
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
  padding: .375rem 0;
  gap: .25rem;
}
.pd-tabs-row::-webkit-scrollbar { display: none; }

.pd-tab {
  display: flex; align-items: center; gap: .5rem;
  padding: .625rem 1.25rem;
  border: none; background: transparent;
  border-radius: var(--pd-r-md);
  font-family: var(--pd-font-body);
  font-size: .875rem; font-weight: 600;
  color: var(--pd-text-2);
  cursor: pointer;
  white-space: nowrap;
  min-height: 44px;
  border-bottom: 3px solid transparent;
  transition: color .2s, background .2s, border-color .2s;
  position: relative;
}
.pd-tab:hover { color: var(--pd-primary); background: var(--pd-primary-lt); }
.pd-tab.active { color: var(--pd-primary); border-bottom-color: var(--pd-primary); background: var(--pd-primary-lt); }
.pd-tab:focus-visible { outline: 3px solid var(--pd-primary); outline-offset: -2px; }

/* ═══════════════════════════════════════════
   SECTION 4 — HIGHLIGHTS
═══════════════════════════════════════════ */
.pd-highlights { background: var(--pd-bg); }
.pd-highlights-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.25rem;
}
.pd-hl-card {
  background: var(--pd-surface);
  border-radius: var(--pd-r-xl);
  padding: 1.75rem 1.5rem;
  border: 1px solid var(--pd-border);
  box-shadow: var(--pd-shadow-sm);
  transition: transform .3s var(--pd-ease-spring), box-shadow .3s var(--pd-ease), border-color .3s;
  cursor: default;
  position: relative;
  overflow: hidden;
}
.pd-hl-card::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(37,99,235,.04) 0%, transparent 60%);
  opacity: 0;
  transition: opacity .3s;
}
.pd-hl-card:hover { transform: translateY(-6px); box-shadow: var(--pd-shadow-lg); border-color: rgba(37,99,235,.2); }
.pd-hl-card:hover::before { opacity: 1; }

.pd-hl-icon {
  width: 52px; height: 52px; border-radius: var(--pd-r-lg);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem; margin-bottom: 1rem;
  transition: transform .3s var(--pd-ease-spring);
}
.pd-hl-card:hover .pd-hl-icon { transform: scale(1.15) rotate(5deg); }
.pd-hl-icon-blue   { background: var(--pd-primary-lt); color: var(--pd-primary); }
.pd-hl-icon-purple { background: var(--pd-accent-lt);  color: var(--pd-accent); }
.pd-hl-icon-green  { background: var(--pd-secondary-lt); color: var(--pd-secondary); }
.pd-hl-icon-amber  { background: var(--pd-amber-lt);  color: var(--pd-amber); }
.pd-hl-icon-teal   { background: var(--pd-teal-lt);   color: var(--pd-teal); }

.pd-hl-label { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--pd-text-3); margin-bottom: .4rem; }
.pd-hl-value { font-family: var(--pd-font-head); font-size: 1rem; font-weight: 600; color: var(--pd-text); line-height: 1.4; }

/* ═══════════════════════════════════════════
   SECTION 5 — CONTENT TABS / CARDS
═══════════════════════════════════════════ */
.pd-content-area { background: var(--pd-bg); padding: 2.5rem 0 5rem; }

.pd-tab-panel { display: none; flex-direction: column; gap: 1.25rem; }
.pd-tab-panel.active { display: flex; animation: pdFadeUp .3s var(--pd-ease); }
@keyframes pdFadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

.pd-content-card {
  background: var(--pd-surface);
  border-radius: var(--pd-r-xl);
  border: 1px solid var(--pd-border);
  box-shadow: var(--pd-shadow-sm);
  overflow: hidden;
}
.pd-card-warn   { border-color: rgba(245,158,11,.25); background: #FFFBEB; }
.pd-card-danger { border-color: rgba(239,68,68,.2);   background: #FFF8F8; }

.pd-cc-header {
  display: flex; align-items: center; gap: .875rem;
  padding: 1.25rem 1.75rem;
  border-bottom: 1px solid var(--pd-border);
  background: var(--pd-border-lt);
}
.pd-card-warn   .pd-cc-header { background: #FEF3C7; border-bottom-color: rgba(245,158,11,.2); }
.pd-card-danger .pd-cc-header { background: #FEE2E2; border-bottom-color: rgba(239,68,68,.15); }

.pd-cc-icon {
  width: 40px; height: 40px; border-radius: var(--pd-r-md);
  display: flex; align-items: center; justify-content: center;
  font-size: .95rem; flex-shrink: 0;
}
.pd-cc-blue   { background: var(--pd-primary-lt); color: var(--pd-primary); }
.pd-cc-purple { background: var(--pd-accent-lt);  color: var(--pd-accent); }
.pd-cc-green  { background: var(--pd-secondary-lt); color: var(--pd-secondary); }
.pd-cc-amber  { background: var(--pd-amber-lt);  color: var(--pd-amber); }
.pd-cc-red    { background: var(--pd-red-lt);    color: var(--pd-red); }

.pd-cc-header h3 { font-family: var(--pd-font-head); font-size: 1.1rem; font-weight: 700; color: var(--pd-text); margin: 0; }

.pd-safety-note {
  display: flex; align-items: flex-start; gap: .6rem;
  padding: .875rem 1.75rem;
  background: #FFFBF0;
  border-bottom: 1px solid rgba(245,158,11,.2);
  color: #92400E;
  font-size: .875rem; line-height: 1.6;
}
.pd-safety-danger { background: #FFF5F5; border-bottom-color: rgba(239,68,68,.2); color: #7F1D1D; }

.pd-cc-body {
  padding: 1.75rem;
  color: var(--pd-text);
  font-size: .9375rem;
  line-height: 1.85;
}
.pd-cc-body p      { margin-bottom: 1rem; }
.pd-cc-body ul,
.pd-cc-body ol     { padding-left: 1.5rem; margin: .75rem 0; }
.pd-cc-body li     { margin-bottom: .5rem; }
.pd-cc-body strong { font-weight: 700; color: var(--pd-text); }

.pd-fact-box {
  background: var(--pd-border-lt);
  border-radius: var(--pd-r-lg);
  font-family: 'SFMono-Regular', Consolas, monospace;
  font-size: .875rem;
  white-space: pre-line;
  padding: 1.5rem;
  color: var(--pd-text);
  border: 1px solid var(--pd-border);
  margin: 0;
}

/* FAQ content body */
.pd-faq-body .pd-inline-acc { margin: 0; }
.pd-faq-body p strong {
  display: block;
  color: var(--pd-primary);
  font-size: .9375rem;
  margin-top: 1.25rem;
  margin-bottom: .375rem;
}

/* ═══════════════════════════════════════════
   SECTION 6 — WHY THIS PRODUCT
═══════════════════════════════════════════ */
.pd-why {
  background: linear-gradient(135deg, #EFF6FF 0%, #F5F3FF 100%);
}
.pd-why-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.5rem;
}
.pd-why-card {
  background: var(--pd-surface);
  border-radius: var(--pd-r-xl);
  padding: 2rem 1.75rem;
  border: 1px solid var(--pd-border);
  box-shadow: var(--pd-shadow-sm);
  transition: transform .35s var(--pd-ease-spring), box-shadow .35s;
  position: relative;
  overflow: hidden;
  cursor: default;
}
.pd-why-card:hover { transform: translateY(-8px); box-shadow: var(--pd-shadow-xl); }
.pd-why-hover-line {
  position: absolute; bottom: 0; left: 0; height: 3px; width: 0;
  background: linear-gradient(90deg, var(--pd-primary), var(--pd-accent));
  transition: width .4s var(--pd-ease);
}
.pd-why-card:hover .pd-why-hover-line { width: 100%; }

.pd-why-icon {
  width: 56px; height: 56px; border-radius: var(--pd-r-lg);
  background: linear-gradient(135deg, var(--pd-primary-lt), var(--pd-accent-lt));
  color: var(--pd-primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; margin-bottom: 1.25rem;
  transition: transform .3s var(--pd-ease-spring);
}
.pd-why-card:hover .pd-why-icon { transform: scale(1.15) rotate(-5deg); }
.pd-why-card h4 { font-family: var(--pd-font-head); font-size: 1.0625rem; font-weight: 700; color: var(--pd-text); margin-bottom: .6rem; }
.pd-why-card p  { font-size: .875rem; color: var(--pd-text-2); line-height: 1.7; margin: 0; }

/* ═══════════════════════════════════════════
   SECTION 7 — COMPOSITION
═══════════════════════════════════════════ */
.pd-composition { background: var(--pd-surface); }
.pd-comp-layout {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 4rem;
  align-items: center;
}
.pd-comp-bars { display: flex; flex-direction: column; gap: 1.25rem; margin: 2rem 0 1rem; }
.pd-comp-bar-item {}
.pd-comp-bar-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: .5rem;
}
.pd-comp-bar-label { font-size: .875rem; font-weight: 600; color: var(--pd-text); }
.pd-comp-bar-pct   { font-size: .8125rem; font-weight: 700; color: var(--pd-primary); }
.pd-comp-bar-track {
  height: 8px;
  background: var(--pd-border);
  border-radius: 20px;
  overflow: hidden;
}
.pd-comp-bar-fill {
  height: 100%;
  border-radius: 20px;
  background: linear-gradient(90deg, var(--pd-primary), var(--pd-accent));
  width: 0;
  transition: width 1.2s var(--pd-ease-out) .3s;
}
.pd-comp-disclaimer { font-size: .8125rem; color: var(--pd-text-3); display: flex; align-items: center; gap: .4rem; }

.pd-comp-visual { display: flex; justify-content: center; align-items: center; }
.pd-comp-circle { position: relative; width: 280px; height: 280px; }
.pd-comp-ring   { position: relative; width: 100%; height: 100%; }
.pd-comp-svg    { width: 100%; height: 100%; transform: none; }
.pd-comp-arc    { transition: stroke-dasharray 1.4s var(--pd-ease-out) .5s; }
.pd-comp-center {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
.pd-comp-pct { font-family: var(--pd-font-head); font-size: 2.5rem; font-weight: 800; color: var(--pd-primary); }
.pd-comp-lbl { font-size: .875rem; font-weight: 600; color: var(--pd-text-2); }

/* ═══════════════════════════════════════════
   SECTION 8 — TIMELINE
═══════════════════════════════════════════ */
.pd-timeline { background: linear-gradient(180deg, #F8FAFC 0%, #EFF6FF 100%); }
.pd-timeline-track {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  position: relative;
}
.pd-timeline-track::before {
  content: '';
  position: absolute;
  top: 36px; left: 10%; right: 10%; height: 2px;
  background: linear-gradient(90deg, var(--pd-primary) 0%, var(--pd-accent) 100%);
  z-index: 0;
}
.pd-tl-item {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  padding: 0 1rem;
  position: relative;
  z-index: 1;
}
.pd-tl-icon {
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--pd-surface);
  border: 3px solid var(--pd-primary);
  color: var(--pd-primary);
  font-size: 1.5rem;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--pd-shadow-md);
  margin-bottom: 1.5rem;
  transition: transform .3s var(--pd-ease-spring), background .3s, color .3s;
  flex-shrink: 0;
}
.pd-tl-item:hover .pd-tl-icon {
  background: linear-gradient(135deg, var(--pd-primary), var(--pd-accent));
  color: #fff;
  transform: scale(1.15);
}
.pd-tl-num { display: block; font-size: .75rem; font-weight: 800; letter-spacing: .1em; color: var(--pd-primary); margin-bottom: .5rem; }
.pd-tl-content h4 { font-family: var(--pd-font-head); font-size: .9375rem; font-weight: 700; color: var(--pd-text); margin-bottom: .5rem; }
.pd-tl-content p  { font-size: .8125rem; color: var(--pd-text-2); line-height: 1.6; }

/* ═══════════════════════════════════════════
   SECTION 9 — COMPARISON
═══════════════════════════════════════════ */
.pd-compare { background: var(--pd-surface); }
.pd-compare-wrap { overflow-x: auto; border-radius: var(--pd-r-xl); box-shadow: var(--pd-shadow-lg); }
.pd-compare-table {
  width: 100%; border-collapse: collapse;
  font-size: .9375rem;
}
.pd-compare-table thead th {
  padding: 1.25rem 1.5rem;
  background: var(--pd-text);
  color: #fff;
  text-align: left;
  font-family: var(--pd-font-head);
  font-size: .9375rem;
  font-weight: 700;
  white-space: nowrap;
}
.pd-compare-table thead th:first-child { border-radius: var(--pd-r-xl) 0 0 0; }
.pd-compare-table thead th:last-child  { border-radius: 0 var(--pd-r-xl) 0 0; }
.pd-col-us      { background: linear-gradient(135deg, #1E3A8A, #312E81) !important; }
.pd-col-generic { background: #334155 !important; color: #94A3B8 !important; }
.pd-us-badge {
  display: inline-block;
  background: linear-gradient(135deg, #2563EB, #7C3AED);
  padding: .3rem .8rem;
  border-radius: 20px;
  font-size: .8125rem;
}

.pd-compare-table tbody tr { border-bottom: 1px solid var(--pd-border); transition: background .2s; }
.pd-compare-table tbody tr:hover { background: var(--pd-border-lt); }
.pd-compare-table tbody tr:last-child { border-bottom: none; }
.pd-compare-table td { padding: 1rem 1.5rem; color: var(--pd-text); }
.pd-compare-table td.pd-col-us { background: rgba(37,99,235,.04); }
.pd-compare-table td.pd-col-generic { color: var(--pd-text-2); }
.pd-yes    { color: var(--pd-secondary); font-size: 1rem; }
.pd-no     { color: var(--pd-red); }
.pd-maybe  { color: var(--pd-amber); }

/* ═══════════════════════════════════════════
   SECTION 10 — CERTIFICATIONS
═══════════════════════════════════════════ */
.pd-certs {
  background: linear-gradient(135deg, #0F172A 0%, #1E1B4B 100%);
  position: relative;
  overflow: hidden;
}
.pd-certs::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 30% 50%, rgba(37,99,235,.25), transparent 60%),
              radial-gradient(ellipse at 70% 50%, rgba(124,58,237,.2), transparent 60%);
}
.pd-certs .pd-section-header { position: relative; z-index: 1; }
.pd-certs .pd-eyebrow { background: rgba(255,255,255,.12); color: #93C5FD; border: 1px solid rgba(255,255,255,.15); }
.pd-certs .pd-section-title { color: #fff; }
.pd-certs .pd-section-sub   { color: rgba(255,255,255,.6); }

.pd-certs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
  position: relative; z-index: 1;
}
.pd-cert-card {
  background: rgba(255,255,255,.07);
  backdrop-filter: var(--pd-glass-blur);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--pd-r-xl);
  padding: 2rem 1.5rem;
  text-align: center;
  transition: transform .3s var(--pd-ease-spring), background .3s, box-shadow .3s;
  cursor: default;
}
.pd-cert-card:hover {
  transform: translateY(-8px);
  background: rgba(255,255,255,.12);
  box-shadow: 0 24px 60px rgba(0,0,0,.3);
}
.pd-cert-glyph  { font-size: 2.5rem; margin-bottom: .875rem; display: block; }
.pd-cert-badge  { font-family: var(--pd-font-head); font-size: 1.125rem; font-weight: 700; color: #fff; margin-bottom: .625rem; }
.pd-cert-desc   { font-size: .8125rem; color: rgba(255,255,255,.6); line-height: 1.6; margin-bottom: 1rem; }
.pd-cert-status {
  display: inline-block;
  background: linear-gradient(135deg, var(--pd-secondary), #16A34A);
  color: #fff;
  font-size: .75rem; font-weight: 700;
  padding: .3rem .875rem; border-radius: 20px;
}

/* ═══════════════════════════════════════════
   SECTION 11 — APPLICATIONS
═══════════════════════════════════════════ */
.pd-applications { background: var(--pd-bg); }
.pd-apps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.25rem;
}
.pd-app-card {
  background: var(--pd-surface);
  border-radius: var(--pd-r-xl);
  padding: 2rem 1.5rem;
  text-align: center;
  border: 1px solid var(--pd-border);
  box-shadow: var(--pd-shadow-sm);
  transition: transform .3s var(--pd-ease-spring), box-shadow .3s;
  cursor: default;
}
.pd-app-card:hover { transform: translateY(-8px); box-shadow: var(--pd-shadow-lg); }
.pd-app-icon {
  width: 64px; height: 64px; border-radius: var(--pd-r-xl);
  margin: 0 auto 1.25rem;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
  transition: transform .3s var(--pd-ease-spring);
}
.pd-app-card:hover .pd-app-icon { transform: scale(1.15) rotate(-5deg); }
.pd-app-blue   { background: var(--pd-primary-lt);   color: var(--pd-primary); }
.pd-app-green  { background: var(--pd-secondary-lt); color: var(--pd-secondary); }
.pd-app-purple { background: var(--pd-accent-lt);    color: var(--pd-accent); }
.pd-app-amber  { background: var(--pd-amber-lt);     color: var(--pd-amber); }
.pd-app-teal   { background: var(--pd-teal-lt);      color: var(--pd-teal); }
.pd-app-card h4 { font-family: var(--pd-font-head); font-size: .9375rem; font-weight: 700; color: var(--pd-text); margin-bottom: .5rem; }
.pd-app-card p  { font-size: .8125rem; color: var(--pd-text-2); line-height: 1.6; margin: 0; }

/* ═══════════════════════════════════════════
   SECTION 12 — RELATED SLIDER
═══════════════════════════════════════════ */
.pd-related { background: linear-gradient(135deg, #EFF6FF 0%, #F5F3FF 100%); }
.pd-slider-wrap {
  display: flex; align-items: center; gap: 1rem;
  position: relative;
}
.pd-slider { flex: 1; overflow: hidden; }
.pd-slider-track {
  display: flex; gap: 1.25rem;
  transition: transform .4s var(--pd-ease);
}
.pd-slider-btn {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--pd-surface);
  border: 1px solid var(--pd-border);
  color: var(--pd-primary);
  font-size: 1rem;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: var(--pd-shadow-md);
  transition: background .2s, transform .2s var(--pd-ease-spring), box-shadow .2s;
  flex-shrink: 0;
}
.pd-slider-btn:hover { background: var(--pd-primary); color: #fff; transform: scale(1.1); box-shadow: var(--pd-shadow-glow); }

.pd-rel-card {
  background: var(--pd-surface);
  border-radius: var(--pd-r-xl);
  border: 1px solid var(--pd-border);
  box-shadow: var(--pd-shadow-sm);
  overflow: hidden;
  min-width: 240px;
  transition: transform .3s var(--pd-ease-spring), box-shadow .3s;
  flex-shrink: 0;
}
.pd-rel-card:hover { transform: translateY(-6px); box-shadow: var(--pd-shadow-lg); }
.pd-rel-img {
  height: 160px; background: var(--pd-border-lt);
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
}
.pd-rel-img img { width: 100%; height: 100%; object-fit: contain; }
.pd-rel-body { padding: 1.25rem; }
.pd-rel-body h4 { font-family: var(--pd-font-head); font-size: .9375rem; font-weight: 700; color: var(--pd-text); margin-bottom: .375rem; }
.pd-rel-body .pd-rel-comp { font-size: .8125rem; color: var(--pd-text-2); margin-bottom: 1rem; line-height: 1.5; }
.pd-rel-body a {
  display: inline-flex; align-items: center; gap: .375rem;
  font-size: .8125rem; font-weight: 600; color: var(--pd-primary);
  text-decoration: none;
  padding: .5rem 1rem;
  border: 1.5px solid var(--pd-primary);
  border-radius: var(--pd-r-md);
  transition: background .2s, color .2s;
}
.pd-rel-body a:hover { background: var(--pd-primary); color: #fff; }

/* ═══════════════════════════════════════════
   SECTION 13 — DOWNLOADS
═══════════════════════════════════════════ */
.pd-downloads { background: var(--pd-bg); }
.pd-dl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem;
}
.pd-dl-card {
  background: var(--pd-surface);
  border-radius: var(--pd-r-xl);
  border: 1px solid var(--pd-border);
  box-shadow: var(--pd-shadow-sm);
  padding: 1.75rem;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  transition: transform .3s var(--pd-ease-spring), box-shadow .3s, border-color .3s;
}
.pd-dl-card:hover { transform: translateY(-4px); box-shadow: var(--pd-shadow-lg); border-color: rgba(37,99,235,.2); }
.pd-dl-icon {
  width: 56px; height: 56px; border-radius: var(--pd-r-lg);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.375rem; flex-shrink: 0;
  transition: transform .3s var(--pd-ease-spring);
}
.pd-dl-card:hover .pd-dl-icon { transform: scale(1.12) rotate(-5deg); }
.pd-dl-blue   { background: var(--pd-primary-lt); color: var(--pd-primary); }
.pd-dl-purple { background: var(--pd-accent-lt);  color: var(--pd-accent); }
.pd-dl-green  { background: var(--pd-secondary-lt); color: var(--pd-secondary); }
.pd-dl-amber  { background: var(--pd-amber-lt);  color: var(--pd-amber); }
.pd-dl-info { flex: 1; }
.pd-dl-info h4 { font-family: var(--pd-font-head); font-size: .9375rem; font-weight: 700; color: var(--pd-text); margin-bottom: .25rem; }
.pd-dl-info p  { font-size: .8125rem; color: var(--pd-text-2); margin: 0; line-height: 1.5; }
.pd-dl-btn {
  display: flex; align-items: center; gap: .375rem;
  padding: .5rem 1rem;
  background: var(--pd-primary-lt);
  color: var(--pd-primary);
  border: 1.5px solid transparent;
  border-radius: var(--pd-r-md);
  font-size: .8125rem; font-weight: 600;
  cursor: pointer; white-space: nowrap;
  transition: background .2s, color .2s, transform .2s;
  flex-shrink: 0;
  min-height: 44px;
}
.pd-dl-btn:hover { background: var(--pd-primary); color: #fff; transform: scale(1.05); }

/* ═══════════════════════════════════════════
   SECTION 14 — FAQ ACCORDION
═══════════════════════════════════════════ */
.pd-faq { background: var(--pd-surface); }
.pd-faq-layout {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 4rem;
  align-items: start;
}
.pd-faq-left .pd-btn { margin-top: 1.5rem; }
.pd-faq-right { display: flex; flex-direction: column; gap: .75rem; }

.pd-acc-item {
  border: 1px solid var(--pd-border);
  border-radius: var(--pd-r-lg);
  overflow: hidden;
  transition: box-shadow .25s;
}
.pd-acc-item:has(.pd-acc-trigger[aria-expanded="true"]) {
  box-shadow: var(--pd-shadow-md);
  border-color: rgba(37,99,235,.2);
}

.pd-acc-trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.125rem 1.5rem;
  background: transparent; border: none; cursor: pointer;
  font-family: var(--pd-font-body); font-size: .9375rem; font-weight: 600;
  color: var(--pd-text); text-align: left;
  transition: background .2s, color .2s;
  min-height: 56px;
}
.pd-acc-trigger:hover { background: var(--pd-border-lt); }
.pd-acc-trigger[aria-expanded="true"] { background: var(--pd-primary-lt); color: var(--pd-primary); }

.pd-acc-icon {
  flex-shrink: 0; font-size: .875rem; color: var(--pd-text-3);
  transition: transform .3s var(--pd-ease-spring), color .2s;
}
.pd-acc-trigger[aria-expanded="true"] .pd-acc-icon {
  transform: rotate(45deg); color: var(--pd-primary);
}

.pd-acc-body {
  max-height: 0; overflow: hidden;
  transition: max-height .35s var(--pd-ease-out), padding .35s var(--pd-ease-out);
  padding: 0 1.5rem;
  background: var(--pd-border-lt);
}
.pd-acc-body.open { max-height: 400px; padding: 1rem 1.5rem 1.25rem; }
.pd-acc-body p { font-size: .9rem; color: var(--pd-text-2); line-height: 1.7; margin: 0; }

/* ═══════════════════════════════════════════
   SECTION 15 — INQUIRY
═══════════════════════════════════════════ */
.pd-inquiry {
  background: linear-gradient(135deg, #0F172A 0%, #1E1B4B 50%, #0C4A6E 100%);
  position: relative;
  overflow: hidden;
}
.pd-inquiry-bg {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 20% 50%, rgba(37,99,235,.2), transparent 50%),
              radial-gradient(ellipse at 80% 50%, rgba(124,58,237,.15), transparent 50%);
  pointer-events: none;
}
.pd-inquiry-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 4rem;
  align-items: start;
  position: relative; z-index: 1;
}
.pd-eyebrow-light { background: rgba(255,255,255,.12); color: #93C5FD; border: 1px solid rgba(255,255,255,.15); }
.pd-inquiry-title { font-family: var(--pd-font-head); font-size: clamp(2rem, 3.5vw, 2.75rem); font-weight: 800; color: #fff; letter-spacing: -.04em; margin-bottom: 1rem; line-height: 1.15; }
.pd-inquiry-sub   { color: rgba(255,255,255,.65); font-size: .9375rem; line-height: 1.75; margin-bottom: 2rem; }

.pd-inquiry-contacts { display: flex; flex-direction: column; gap: .75rem; margin-bottom: 2rem; }
.pd-contact-pill {
  display: inline-flex; align-items: center; gap: .875rem;
  padding: .75rem 1.25rem;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--pd-r-lg);
  color: #fff; text-decoration: none;
  font-size: .875rem; font-weight: 500;
  transition: background .2s, transform .2s;
}
.pd-contact-pill:hover { background: rgba(255,255,255,.15); transform: translateX(4px); }
.pd-cp-wa { border-color: rgba(34,197,94,.3); }
.pd-cp-wa:hover { background: rgba(34,197,94,.15); }
.pd-cp-icon {
  width: 36px; height: 36px; border-radius: var(--pd-r-md);
  background: rgba(255,255,255,.12);
  display: flex; align-items: center; justify-content: center;
  font-size: .9rem; flex-shrink: 0;
}

.pd-inquiry-trust {
  display: flex; flex-direction: column; gap: .5rem;
}
.pd-inquiry-trust span {
  display: flex; align-items: center; gap: .625rem;
  font-size: .8125rem; color: rgba(255,255,255,.65);
}
.pd-inquiry-trust i { color: var(--pd-secondary); }

/* Form */
.pd-form {
  background: var(--pd-surface);
  border-radius: var(--pd-r-2xl);
  padding: 2.5rem;
  box-shadow: var(--pd-shadow-xl);
}
.pd-form-title { font-family: var(--pd-font-head); font-size: 1.3rem; font-weight: 700; color: var(--pd-text); margin-bottom: 1.75rem; }
.pd-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.pd-form-group {
  position: relative;
  margin-bottom: 1.125rem;
}
.pd-form-group input,
.pd-form-group textarea {
  width: 100%;
  padding: 1.125rem 1rem .625rem;
  border: 1.5px solid var(--pd-border);
  border-radius: var(--pd-r-lg);
  font-family: var(--pd-font-body);
  font-size: .9375rem; color: var(--pd-text);
  background: var(--pd-bg);
  transition: border-color .2s, box-shadow .2s, background .2s;
  outline: none;
}
.pd-form-group textarea { resize: vertical; }
.pd-form-group label {
  position: absolute;
  left: 1rem; top: 1rem;
  font-size: .9375rem; color: var(--pd-text-3);
  pointer-events: none;
  transition: all .2s var(--pd-ease);
  display: flex; align-items: center; gap: .375rem;
}
.pd-form-group input:focus,
.pd-form-group textarea:focus {
  border-color: var(--pd-primary);
  box-shadow: 0 0 0 4px rgba(37,99,235,.12);
  background: #fff;
}
.pd-form-group input:focus + label,
.pd-form-group input:not(:placeholder-shown) + label,
.pd-form-group textarea:focus + label,
.pd-form-group textarea:not(:placeholder-shown) + label {
  top: .375rem; font-size: .7rem; color: var(--pd-primary);
  font-weight: 700; letter-spacing: .04em;
}
.pd-form-submit { width: 100%; justify-content: center; margin-top: .5rem; }
.pd-form-feedback {
  margin-top: 1rem; padding: .875rem 1.125rem;
  border-radius: var(--pd-r-lg);
  font-size: .875rem; font-weight: 500;
  display: none;
}
.pd-form-feedback.success { display: flex; gap: .625rem; align-items: center; background: var(--pd-secondary-lt); color: #166534; border: 1px solid rgba(34,197,94,.3); }
.pd-form-feedback.error   { display: flex; gap: .625rem; align-items: center; background: var(--pd-red-lt);       color: #991B1B; border: 1px solid rgba(239,68,68,.3); }

/* ═══════════════════════════════════════════
   DISCLAIMER
═══════════════════════════════════════════ */
.pd-disclaimer-wrap { background: var(--pd-bg); padding: 2rem 0; }
.pd-disclaimer {
  display: flex; align-items: flex-start; gap: 1rem;
  background: var(--pd-surface);
  border: 1px solid var(--pd-border);
  border-left: 4px solid var(--pd-primary);
  border-radius: var(--pd-r-lg);
  padding: 1.25rem 1.5rem;
}
.pd-disclaimer i { font-size: 1.25rem; color: var(--pd-primary); flex-shrink: 0; margin-top: 2px; }
.pd-disclaimer p  { font-size: .875rem; color: var(--pd-text-2); line-height: 1.65; margin: 0; }
.pd-disclaimer strong { color: var(--pd-text); }

/* ═══════════════════════════════════════════
   STICKY BOTTOM BAR
═══════════════════════════════════════════ */
.pd-sticky-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--pd-glass-bg);
  backdrop-filter: var(--pd-glass-blur);
  border-top: 1px solid rgba(37,99,235,.12);
  box-shadow: 0 -4px 24px rgba(15,23,42,.12);
  z-index: 900;
  transform: translateY(100%);
  transition: transform .4s var(--pd-ease-spring);
}
.pd-sticky-bar.visible { transform: translateY(0); }

.pd-sticky-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: .75rem 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.pd-sticky-product {
  font-family: var(--pd-font-head);
  font-size: .875rem; font-weight: 700;
  color: var(--pd-text);
  white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  max-width: 200px;
}
.pd-sticky-actions { display: flex; align-items: center; gap: .625rem; flex-wrap: wrap; }

.pd-sa {
  display: flex; align-items: center; gap: .375rem;
  padding: .5rem 1rem;
  border-radius: var(--pd-r-md);
  font-family: var(--pd-font-body);
  font-size: .8125rem; font-weight: 600;
  cursor: pointer; text-decoration: none;
  border: 1.5px solid transparent;
  min-height: 40px;
  transition: transform .2s, box-shadow .2s, background .2s, color .2s;
}
.pd-sa:hover { transform: translateY(-2px); }
.pd-sa-call { border-color: var(--pd-primary); color: var(--pd-primary); background: var(--pd-primary-lt); }
.pd-sa-call:hover { background: var(--pd-primary); color: #fff; }
.pd-sa-wa   { border-color: #16A34A; color: #16A34A; background: var(--pd-secondary-lt); }
.pd-sa-wa:hover   { background: #16A34A; color: #fff; }
.pd-sa-mail { border-color: var(--pd-accent); color: var(--pd-accent); background: var(--pd-accent-lt); }
.pd-sa-mail:hover { background: var(--pd-accent); color: #fff; }
.pd-sa-dl   { border-color: var(--pd-text-3); color: var(--pd-text-2); background: transparent; }
.pd-sa-dl:hover   { background: var(--pd-border); }
.pd-sa-cta  {
  background: linear-gradient(135deg, var(--pd-primary), var(--pd-accent));
  color: #fff; border: none;
  padding: .625rem 1.375rem;
  box-shadow: 0 4px 16px rgba(37,99,235,.3);
}
.pd-sa-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(37,99,235,.4); }

/* ═══════════════════════════════════════════
   SCROLL REVEAL ANIMATIONS
═══════════════════════════════════════════ */
[data-reveal] {
  opacity: 0;
  transition: opacity .6s var(--pd-ease), transform .6s var(--pd-ease);
}
[data-reveal="up"]    { transform: translateY(40px); }
[data-reveal="left"]  { transform: translateX(-40px); }
[data-reveal="right"] { transform: translateX(40px); }
[data-reveal].revealed { opacity: 1; transform: none; }

/* ═══════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════ */
@media (max-width: 1024px) {
  .pd-hero-grid    { grid-template-columns: 1fr; gap: 3rem; text-align: center; }
  .pd-hero-info    { display: flex; flex-direction: column; align-items: center; }
  .pd-hero-visual  { order: -1; }
  .pd-product-stage { width: 340px; height: 340px; }
  .pd-ring-1 { width: 310px; height: 310px; }
  .pd-ring-2 { width: 370px; height: 370px; }
  .pd-comp-layout  { grid-template-columns: 1fr; }
  .pd-comp-visual  { order: -1; }
  .pd-faq-layout   { grid-template-columns: 1fr; gap: 2rem; }
  .pd-inquiry-grid { grid-template-columns: 1fr; }
  .pd-timeline-track { grid-template-columns: 1fr; }
  .pd-timeline-track::before { top: 0; left: 36px; bottom: 0; right: auto; width: 2px; height: auto; }
  .pd-tl-item { flex-direction: row; text-align: left; gap: 1.5rem; padding-bottom: 2rem; }
  .pd-tl-icon { margin-bottom: 0; flex-shrink: 0; }
}

@media (max-width: 768px) {
  .pd-section { padding: 56px 0; }
  .pd-section-header { margin-bottom: 2.5rem; }
  .pd-infobar-grid { flex-direction: column; }
  .pd-infobar-divider { width: 100%; height: 1px; }
  .pd-infobar-item { padding: 1rem 1.25rem; }
  .pd-product-stage { width: 280px; height: 280px; }
  .pd-fc-packaging, .pd-fc-cert { display: none; }
  .pd-form-row { grid-template-columns: 1fr; }
  .pd-trust-metrics { flex-direction: column; align-items: flex-start; padding: 1.25rem; }
  .pd-metric-divider { width: 100%; height: 1px; }
  .pd-sticky-product { display: none; }
  .pd-skeleton-hero { grid-template-columns: 1fr; }
  .pd-skel-img { height: 280px; }
}

@media (max-width: 480px) {
  .pd-hero-ctas { flex-direction: column; }
  .pd-btn { width: 100%; justify-content: center; }
  .pd-form { padding: 1.5rem; }
  .pd-section-title { font-size: 1.5rem; }
  .pd-sticky-actions { gap: .375rem; }
  .pd-sa span { display: none; }
  .pd-sa { padding: .5rem .75rem; }
  .pd-sa-cta span { display: inline; }
  .pd-tab span { display: none; }
}

/* ═══════════════════════════════════════════
   PRINT
═══════════════════════════════════════════ */
@media print {
  .pd-sticky-bar, .pd-tabs-sticky, .pd-hero-ctas,
  .pd-related, .pd-downloads, .pd-inquiry,
  header nav, #footer-placeholder { display: none !important; }
  .pd-hero { background: #fff !important; color: #000 !important; min-height: auto; padding: 1rem 0; }
  .pd-hero-title { -webkit-text-fill-color: #000 !important; }
  .pd-blob, .pd-particles { display: none; }
  .pd-tab-panel { display: flex !important; }
  .pd-content-card { box-shadow: none; border: 1px solid #ccc; page-break-inside: avoid; }
  .pd-certs { background: #fff !important; }
  .pd-cert-card { background: #f5f5f5 !important; border: 1px solid #ccc; }
}

/* ═══════════════════════════════════════════
   FOCUS & ACCESSIBILITY
═══════════════════════════════════════════ */
:focus-visible { outline: 3px solid var(--pd-primary); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}