.ppn-hero {
  position: relative;
  padding: calc(var(--ppn-header-h) + 82px) 0 clamp(70px, 8vw, 116px);
  background:
    radial-gradient(1100px 520px at 82% 8%, rgba(0, 194, 168, 0.12), rgba(0, 194, 168, 0) 62%),
    linear-gradient(180deg, #FFFFFF 0%, #F2F5FE 100%);
  overflow: hidden;
}

.ppn-hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(40px, 5vw, 72px);
  align-items: center;
}

.ppn-hero-copy h1 { margin-bottom: 22px; max-width: 13ch; }
.ppn-hero-copy .ppn-lead { max-width: 54ch; margin-bottom: 32px; }

.ppn-hero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 38px;
  padding-top: 30px;
  border-top: 1px solid var(--ppn-line);
}

.ppn-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid var(--ppn-line);
  font-family: var(--ppn-font-head);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ppn-ink-2);
  box-shadow: var(--ppn-shadow-s);
  transition: transform 0.3s var(--ppn-ease), border-color 0.3s var(--ppn-ease);
}
.ppn-chip i { color: var(--ppn-primary); font-size: 0.85rem; }
.ppn-chip:hover { transform: translateY(-3px); border-color: rgba(47, 79, 255, 0.35); }

.ppn-hero-media { position: relative; }
.ppn-hero-media img { border-radius: var(--ppn-radius-xl); box-shadow: var(--ppn-shadow-l); width: 100%; }

.ppn-hero-badge {
  position: absolute;
  left: -18px;
  bottom: 32px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 17px 24px 17px 18px;
  border-radius: var(--ppn-radius-l);
  background: #FFFFFF;
  box-shadow: var(--ppn-shadow-l);
  border: 1px solid var(--ppn-line);
}
.ppn-hero-badge .ppn-icon-badge { width: 46px; height: 46px; margin: 0; font-size: 1.05rem; border-radius: 13px; }
.ppn-hero-badge strong {
  display: block;
  font-family: var(--ppn-font-head);
  font-size: 0.94rem;
  color: var(--ppn-ink);
  line-height: 1.3;
}
.ppn-hero-badge span { font-size: 0.82rem; color: var(--ppn-muted); }

@media (max-width: 900px) {
  .ppn-hero { padding-top: calc(var(--ppn-header-h) + 54px); }
  .ppn-hero-inner { grid-template-columns: 1fr; }
  .ppn-hero-copy h1 { max-width: none; }
  .ppn-hero-badge { left: 12px; bottom: 16px; }
}

@media (max-width: 620px) {
  .ppn-hero-chips { gap: 8px; }
  .ppn-chip { padding: 8px 14px; font-size: 0.8rem; }
  .ppn-hero-badge { position: static; margin-top: 18px; }
}