.seo-product-hero {
  position: relative;
  width: min(600px, 100%);
  margin: 0 auto;
  filter: drop-shadow(0 34px 52px rgba(124, 63, 220, .3));
}

.seo-product-hero img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 24px;
}

.seo-visual-band {
  padding: clamp(48px, 7vw, 88px) 0;
  background:
    radial-gradient(circle at 12% 18%, rgba(139, 92, 246, .1), transparent 34%),
    #0b0d15;
}

.seo-visual-band.alt {
  background:
    radial-gradient(circle at 87% 75%, rgba(236, 72, 153, .09), transparent 31%),
    #0e1019;
}

.seo-visual-layout {
  display: grid;
  grid-template-columns: minmax(250px, .78fr) minmax(320px, 1.22fr);
  align-items: center;
  gap: clamp(28px, 5vw, 72px);
}

.seo-visual-layout.reverse {
  grid-template-columns: minmax(320px, 1.22fr) minmax(250px, .78fr);
}

.seo-visual-layout.reverse .seo-visual-copy { order: 2; }
.seo-visual-layout.reverse .seo-media-frame { order: 1; }

.seo-visual-copy .eyebrow,
.seo-visual-copy .seo-kicker {
  margin-bottom: 12px;
}

.seo-visual-copy h2 {
  margin: 0;
  color: #fff;
  font: 800 clamp(25px, 3.6vw, 42px)/1.12 Unbounded, Manrope, sans-serif;
  letter-spacing: -.04em;
}

.seo-visual-copy p {
  margin: 16px 0 0;
  color: #b9c1cf;
  font-size: 16px;
  line-height: 1.7;
}

.seo-visual-copy a:not(.btn) {
  color: #ddc7ff;
  font-weight: 800;
}

.seo-media-frame {
  position: relative;
  max-width: 760px;
  margin: 0;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 24px;
  background: #07080d;
  box-shadow: 0 28px 68px rgba(0,0,0,.34);
  overflow: hidden;
}

.seo-media-frame.portrait {
  width: min(480px, 100%);
  justify-self: center;
}

.seo-media-frame img {
  width: 100%;
  height: auto;
  display: block;
}

.seo-media-frame figcaption {
  padding: 12px 15px 14px;
  border-top: 1px solid rgba(255,255,255,.07);
  color: #919baa;
  background: #10131c;
  font-size: 12px;
  line-height: 1.5;
}

.seo-media-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
}

.seo-media-gallery .seo-media-frame { height: 100%; }

.seo-icon-showcase {
  padding: clamp(44px, 6vw, 72px) 0;
  background: #0b0d15;
}

.seo-icon-showcase .seo-visual-copy {
  max-width: 760px;
  margin: 0 auto 28px;
  text-align: center;
}

.seo-icon-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.seo-icon-card {
  min-width: 0;
  padding: 18px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 18px;
  background: rgba(18,21,32,.88);
  text-align: center;
}

.seo-icon-card img {
  width: min(132px, 70%);
  height: auto;
  display: block;
  margin: 0 auto 13px;
  border-radius: 22px;
}

.seo-icon-card h3 { margin: 0 0 7px; color: #fff; font-size: 16px; }
.seo-icon-card p { margin: 0; color: #aeb7c5; font-size: 13px; line-height: 1.55; }

.seo-article-visual {
  width: min(760px, 100%);
  margin: 30px auto;
}

.seo-article-visual img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 22px;
  box-shadow: 0 26px 58px rgba(0,0,0,.3);
}

.seo-article-visual.portrait { width: min(520px, 100%); }
.seo-article-visual figcaption { margin-top: 10px; color: #8e98a7; font-size: 12px; line-height: 1.5; text-align: center; }

.seo-mascot-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  align-items: center;
  gap: 20px;
  max-width: 720px;
  margin: 34px auto;
  padding: 20px 24px;
  border: 1px solid rgba(236,72,153,.22);
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(139,92,246,.12), rgba(236,72,153,.07));
}

.seo-mascot-row img { width: 110px; height: 110px; object-fit: contain; }
.seo-mascot-row h2,
.seo-mascot-row h3 { margin: 0 0 7px; color: #fff; }
.seo-mascot-row p { margin: 0; color: #b7c0cc; line-height: 1.6; }

@media (max-width: 820px) {
  .seo-visual-layout,
  .seo-visual-layout.reverse { grid-template-columns: 1fr; }
  .seo-visual-layout.reverse .seo-visual-copy,
  .seo-visual-layout.reverse .seo-media-frame { order: initial; }
  .seo-visual-copy { text-align: center; }
  .seo-media-frame { justify-self: center; }
  .seo-icon-grid { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
}

@media (max-width: 580px) {
  .seo-product-hero img,
  .seo-media-frame,
  .seo-article-visual img { border-radius: 16px; }
  .seo-media-gallery { grid-template-columns: 1fr; }
  .seo-mascot-row { grid-template-columns: 76px 1fr; padding: 16px; }
  .seo-mascot-row img { width: 76px; height: 76px; }
}