.seo-page-shell {
  display: grid;
  gap: 28px;
}

.seo-hero,
.seo-section {
  background: rgba(255,255,255,.92);
  border: 1px solid var(--line);
  border-radius: 28px;
  box-shadow: 0 24px 70px rgba(16,42,76,.08);
}

.seo-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, .75fr);
  gap: 34px;
  align-items: center;
  padding: clamp(28px, 5vw, 54px);
}

.seo-kicker {
  display: inline-flex;
  width: fit-content;
  padding: 8px 12px;
  border-radius: 999px;
  background: #eef4ff;
  color: var(--brand);
  font-weight: 900;
  font-size: .84rem;
}

.seo-hero h1,
.seo-section h2 {
  margin: 12px 0;
  color: var(--text);
  letter-spacing: -0.03em;
}

.seo-hero h1 {
  font-size: clamp(2.8rem, 7vw, 5.8rem);
  line-height: .94;
  max-width: 840px;
}

.seo-hero p,
.seo-preview-card p,
.seo-feature-card p,
.seo-faq-item p {
  color: var(--muted);
  line-height: 1.65;
}

.seo-hero-copy > p {
  font-size: clamp(1.1rem, 2vw, 1.3rem);
  max-width: 760px;
}

.seo-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.seo-preview-card {
  min-height: 500px;
  border: 1px solid #cfe0f5;
  border-radius: 24px;
  background: linear-gradient(180deg,#f8fbff,#eef4fb);
  padding: 22px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
  position: relative;
  overflow: hidden;
}

.seo-preview-card::before {
  content: "";
  position: absolute;
  inset: 56px 28px 154px;
  border-radius: 22px;
  background: #7a7f85;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.24);
}

.seo-preview-card.has-snapshot::before {
  content: none;
}

.seo-preview-snapshot {
  position: absolute;
  inset: 56px 28px 154px;
  width: calc(100% - 56px);
  height: calc(100% - 210px);
  object-fit: cover;
  border-radius: 22px;
  border: 1px solid rgba(207,224,245,.85);
  box-shadow: 0 22px 44px rgba(16,42,76,.16);
  background: #7a7f85;
}

.seo-preview-toolbar {
  position: absolute;
  top: 22px;
  left: 22px;
  display: flex;
  gap: 7px;
}

.seo-preview-toolbar span {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #d7e4f6;
}

.seo-preview-object {
  position: absolute;
  left: 50%;
  top: 40%;
  width: 240px;
  height: 188px;
  border-radius: 22px;
  background: linear-gradient(135deg,#ffffff,#dce6ee);
  transform: translate(-50%,-50%) rotateX(54deg) rotateZ(-10deg);
  box-shadow: 0 28px 30px rgba(16,42,76,.24);
  display: grid;
  place-items: center;
}

.seo-preview-qr {
  width: 96px;
  height: 96px;
  background: #fff;
  border: 8px solid var(--brand);
  border-radius: 12px;
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 5px;
  padding: 10px;
}

.seo-preview-qr span {
  background: #111827;
  border-radius: 3px;
}

.seo-preview-card h2,
.seo-preview-card p {
  position: relative;
  margin: 0;
  z-index: 1;
}

.seo-preview-card h2 {
  font-size: 1.3rem;
  color: var(--text);
}

.seo-section {
  padding: clamp(24px, 4vw, 42px);
}

.seo-copy-section {
  max-width: 100%;
}

.seo-copy-section p {
  color: var(--muted);
  font-size: 1.06rem;
  line-height: 1.75;
  margin: 14px 0 0;
}

.seo-section-head {
  max-width: 720px;
  margin-bottom: 20px;
}

.seo-section h2 {
  font-size: clamp(2rem, 4vw, 3.2rem);
}

.seo-card-grid {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 14px;
}

.seo-feature-card {
  min-height: 150px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fbfdff;
}

.seo-feature-card i {
  color: var(--brand);
  margin-bottom: 12px;
}

.seo-band {
  display: grid;
  grid-template-columns: minmax(260px,.45fr) 1fr auto;
  gap: 24px;
  align-items: center;
}

.seo-use-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.seo-use-list span,
.seo-links nav a {
  border: 1px solid #cfe0f5;
  border-radius: 999px;
  background: #fff;
  padding: 10px 13px;
  font-weight: 800;
  color: var(--text);
}

.seo-faq-list {
  display: grid;
  gap: 10px;
}

.seo-faq-item {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  padding: 0 18px;
}

.seo-faq-item summary {
  cursor: pointer;
  padding: 18px 0;
  font-weight: 900;
  color: var(--text);
}

.seo-faq-item p {
  margin-top: 0;
}

.seo-links {
  display: grid;
  grid-template-columns: minmax(260px,.35fr) 1fr;
  gap: 24px;
  align-items: center;
}

.seo-links nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

@media (max-width: 980px) {
  .seo-hero,
  .seo-band,
  .seo-links {
    grid-template-columns: 1fr;
  }

  .seo-card-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
}

@media (max-width: 620px) {
  .seo-card-grid {
    grid-template-columns: 1fr;
  }

  .seo-preview-card {
    min-height: 430px;
  }

  .seo-preview-card::before,
  .seo-preview-snapshot {
    inset: 52px 18px 164px;
    width: calc(100% - 36px);
    height: calc(100% - 216px);
  }
}