.button-demo-card {
  align-self: flex-start;
  background: #e9f1ff;
  border: 1px solid #b9d0f7;
  color: #0c53c7;
  margin-top: 22px;
  padding: 12px 18px;
}

.button-demo-plan {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.35);
  color: #fff;
  margin-top: 11px;
}

.button-demo-plan:hover {
  background: rgba(255, 255, 255, 0.08);
}

.demo-section {
  align-items: center;
  background: linear-gradient(135deg, #071a3a, #0b2857);
  color: #fff;
  display: grid;
  gap: clamp(32px, 6vw, 80px);
  grid-template-columns: minmax(0, 0.85fr) minmax(420px, 1.15fr);
  padding: clamp(72px, 8vw, 118px) clamp(24px, 6vw, 96px);
}

.demo-copy {
  max-width: 660px;
}

.demo-copy .kicker {
  color: #ffd21f;
}

.demo-copy h2 {
  font-size: clamp(2.2rem, 4vw, 4rem);
  letter-spacing: -0.05em;
  line-height: 1.08;
  margin: 0;
}

.demo-copy > p:not(.kicker) {
  color: #c7d3e5;
  font-size: 1rem;
  line-height: 1.75;
  margin: 22px 0 0;
}

.demo-copy .demo-note {
  color: #91a5c3;
  font-size: 0.78rem;
}

.demo-actions {
  display: grid;
  gap: 16px;
}

.demo-choice {
  background: #fff;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 22px;
  color: #071a3a;
  display: grid;
  gap: 7px;
  padding: 26px 28px;
  transition: transform 0.16s, box-shadow 0.16s;
}

.demo-choice:hover {
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.24);
  transform: translateY(-3px);
}

.demo-choice span {
  color: #0c53c7;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.demo-choice strong {
  font-size: 1.18rem;
}

.demo-choice small {
  color: #0a7a43;
  font-size: 0.78rem;
  font-weight: 800;
}

@media (max-width: 900px) {
  .demo-section {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .demo-section {
    padding-left: 18px;
    padding-right: 18px;
  }

  .button-demo-card {
    width: 100%;
  }
}