.prod-hero {
  background: var(--navy);
  padding: 150px 48px 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: end;
  max-width: 1300px;
  margin: 0 auto;
}
.prod-hero__content { padding-bottom: 80px; }
.prod-hero__eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.prod-hero__back { font-size: .78rem; color: #7db8f7; text-decoration: none; display: flex; align-items: center; gap: 6px; transition: color .2s; }
.prod-hero__back:hover { color: var(--white); }
.prod-hero__back svg { width: 14px; height: 14px; }
.prod-hero__badge { font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; background: var(--blue); color: #fff; padding: 4px 10px; border-radius: 4px; }
.prod-hero__name { font-family: var(--serif); font-size: 4.5rem; font-weight: 400; color: var(--white); line-height: 1; margin-bottom: 8px; }
.prod-hero__dutch { font-size: .85rem; color: #7db8f7; font-style: italic; margin-bottom: 28px; }
.prod-hero__desc { font-size: 1.05rem; color: #c8d8eb; line-height: 1.75; margin-bottom: 40px; max-width: 500px; }
.prod-hero__keyspecs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(255,255,255,.08); border-radius: 8px; overflow: hidden; margin-bottom: 40px; }
.prod-hero__keyspec { background: rgba(255,255,255,.04); padding: 18px 16px; text-align: center; }
.prod-hero__keyspec strong { display: block; font-size: 1.1rem; color: var(--white); font-weight: 600; margin-bottom: 4px; }
.prod-hero__keyspec span { font-size: .72rem; color: #7db8f7; text-transform: uppercase; letter-spacing: .08em; }
.prod-hero__actions { display: flex; gap: 14px; flex-wrap: wrap; }
.prod-hero__img { position: relative; align-self: end; height: 520px; display: flex; align-items: flex-start; }
.prod-hero__img img { width: 100%; height: 494px; object-fit: contain; border-radius: 12px 12px 0 0; display: block; }
.prod-hero-bg { background: var(--navy); }

.prod-specs { background: var(--snow); padding: 96px 48px; }
.prod-specs__inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1fr 2fr; gap: 80px; align-items: start; }
.prod-specs__label { position: sticky; top: 100px; }
.prod-specs__label .eyebrow { margin-bottom: 12px; }
.prod-specs__label h2 { font-family: var(--serif); font-size: 2.2rem; font-weight: 400; line-height: 1.2; margin-bottom: 16px; }
.prod-specs__label h2 em { font-style: italic; color: var(--blue); }
.prod-specs__label p { font-size: .9rem; color: var(--text-mid); line-height: 1.7; }
.spec-table { width: 100%; border-collapse: collapse; }
.spec-table th { text-align: left; font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); padding: 0 0 12px; border-bottom: 2px solid var(--border); }
.spec-table td { padding: 16px 0; border-bottom: 1px solid var(--border); font-size: .9rem; vertical-align: top; }
.spec-table td:first-child { color: var(--text-mid); width: 42%; padding-right: 24px; }
.spec-table td:last-child { color: var(--text); font-weight: 500; }
.spec-group-head td { padding-top: 32px; padding-bottom: 8px; font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); border-bottom: none; }

.prod-features { background: var(--white); padding: 96px 48px; }
.prod-features__inner { max-width: 1100px; margin: 0 auto; }
.prod-features__header { text-align: center; margin-bottom: 64px; }
.prod-features__header h2 { font-family: var(--serif); font-size: 2.4rem; font-weight: 400; margin-bottom: 12px; }
.prod-features__header h2 em { font-style: italic; color: var(--blue); }
.prod-features__header p { font-size: .95rem; color: var(--text-mid); max-width: 520px; margin: 0 auto; }
.features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.feature-item { padding: 32px; border: 1px solid var(--border); border-radius: 10px; background: var(--snow); }
.feature-item__icon { width: 44px; height: 44px; background: var(--blue-pale); border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.feature-item__icon svg { width: 22px; height: 22px; color: var(--blue); }
.feature-item h3 { font-size: 1rem; font-weight: 600; margin-bottom: 8px; }
.feature-item p { font-size: .87rem; color: var(--text-mid); line-height: 1.65; }

.prod-install { background: var(--navy); padding: 80px 48px; }
.prod-install__inner { max-width: 900px; margin: 0 auto; text-align: center; }
.prod-install__inner h2 { font-family: var(--serif); font-size: 2.2rem; font-weight: 400; color: var(--white); margin-bottom: 16px; }
.prod-install__inner h2 em { font-style: italic; color: #7db8f7; }
.prod-install__inner p { font-size: .95rem; color: #a0b3cc; max-width: 600px; margin: 0 auto 40px; line-height: 1.7; }
.prod-install__steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: left; margin-top: 48px; }
.install-step { background: rgba(255,255,255,.05); border-radius: 10px; padding: 28px 24px; }
.install-step__num { font-size: 2rem; font-weight: 700; color: rgba(255,255,255,.12); line-height: 1; margin-bottom: 12px; }
.install-step h4 { font-size: .9rem; font-weight: 600; color: var(--white); margin-bottom: 8px; }
.install-step p { font-size: .82rem; color: #a0b3cc; line-height: 1.6; }

.prod-compat { background: var(--navy); padding: 80px 48px; }
.prod-compat__inner { max-width: 900px; margin: 0 auto; text-align: center; }
.prod-compat__inner h2 { font-family: var(--serif); font-size: 2.2rem; font-weight: 400; color: var(--white); margin-bottom: 16px; }
.prod-compat__inner h2 em { font-style: italic; color: #7db8f7; }
.prod-compat__inner p { font-size: .95rem; color: #a0b3cc; max-width: 600px; margin: 0 auto 48px; line-height: 1.7; }
.compat-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.compat-item { background: rgba(255,255,255,.05); border-radius: 10px; padding: 24px 16px; text-align: center; }
.compat-item__name { font-family: var(--serif); font-size: 1.4rem; font-weight: 400; color: var(--white); margin-bottom: 4px; }
.compat-item__sub { font-size: .72rem; color: #7db8f7; text-transform: uppercase; letter-spacing: .08em; }

@media (max-width: 900px) {
  .prod-hero { grid-template-columns: 1fr; padding: 100px 24px 0; gap: 40px; }
  .prod-hero__img { height: 320px; }
  .prod-hero__img img { height: 304px; border-radius: 12px; }
  .prod-hero__name { font-size: 3rem; }
  .prod-specs { padding: 64px 24px; }
  .prod-specs__inner { grid-template-columns: 1fr; gap: 40px; }
  .prod-specs__label { position: static; }
  .prod-features { padding: 64px 24px; }
  .features-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
  .prod-install { padding: 64px 24px; }
  .prod-install__steps { grid-template-columns: 1fr 1fr; }
  .prod-compat { padding: 64px 24px; }
  .compat-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .prod-hero__name { font-size: 2.4rem; }
  .prod-hero__keyspecs { grid-template-columns: 1fr 1fr; }
  .features-grid { grid-template-columns: 1fr; }
  .prod-install__steps { grid-template-columns: 1fr; }
  .compat-grid { grid-template-columns: repeat(2, 1fr); }
}
