@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&display=swap');

.rpk-page,
.rpk-page * { box-sizing: border-box; }

.rpk-page {
  --bg: #050505;
  --bg-soft: #0d0d0d;
  --bg-card: #121212;
  --bg-card-2: #171717;
  --line: rgba(255,255,255,.08);
  --line-2: rgba(255,255,255,.14);
  --text: #fff;
  --muted: #b8b8b8;
  --muted-2: #8b8b8b;
  --chip: #1f1f1f;
  --shadow: 0 20px 50px rgba(0,0,0,.34);
  color: var(--text);
  font: 400 16px/1.6 'Montserrat', system-ui, sans-serif;
  padding: 26px 0 56px;
}

.rpk-page a {color: inherit;text-decoration: none;color: #ffffff;}
.rpk-shell { width: min(1280px, calc(100% - 32px)); margin: 0 auto; }

.rpk-breadcrumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  color: var(--muted-2); font-size: 13px; font-weight: 600; margin-bottom: 18px;
}
.rpk-breadcrumbs a { color: var(--muted); }

.rpk-hero { margin-bottom: 34px; }
.rpk-kicker {
  display: inline-flex; align-items: center; min-height: 36px; padding: 8px 14px;
  border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,.04);
  color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
}
.rpk-title {
  margin: 18px 0 0;
  font-size: 36px;
  line-height: .98;
  letter-spacing: -.05em;
  font-weight: 700;
}
.rpk-subtitle {
  margin: 18px 0 0;
  max-width: 920px;
  color: var(--muted);
  font-size: 18px;
}

.rpk-pills {
  margin-top: 30px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px;
}
.rpk-pill {
  min-height: 60px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 22px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: #202020;
  box-shadow: var(--shadow);
  font-size: 16px;
  font-weight: 600;
}
.rpk-pill span:first-child { color: var(--muted-2); font-size: 24px; }

.rpk-section-head { margin-bottom: 18px; }
.rpk-section-label,
.rpk-info-card__label,
.rpk-banner__meta {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.rpk-section-head h2,
.rpk-info-card h2,
.rpk-submit h2 {
  margin: 10px 0 0;
  font-size: 18px;
  line-height: 1.02;
  font-weight: 700;
}
.rpk-section-head p,
.rpk-info-card p,
.rpk-faq-item p,
.rpk-submit p,
.rpk-footer p {
  margin: 12px 0 0;
  color: var(--muted);
}

.rpk-top,
.rpk-list,
.rpk-banner,
.rpk-info-card,
.rpk-faq-item,
.rpk-submit,
.rpk-footer {
  border: 1px solid var(--line);
  background: #151515;
  box-shadow: var(--shadow);
}

.rpk-top,
.rpk-list,
.rpk-banner,
.rpk-submit,
.rpk-footer { border-radius: 30px; }

.rpk-top { padding: 28px; }
.rpk-top-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }

.rpk-top-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-height: 100%;
  padding: 22px;
  border-radius: 26px;
  border: 1px solid var(--line);
  background: #202020;
}
.rpk-top-card--first {background: linear-gradient(180deg, rgb(255 255 255 / 6%), rgba(255, 255, 255, .02));}
.rpk-top-card__rank {
  width: 48px; height: 48px; border-radius: 16px; border: 1px solid var(--line-2); background: rgba(255,255,255,.04);
  display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 900;
}
.rpk-top-card__main { display: flex; align-items: flex-start; gap: 16px; }
.rpk-top-card__main > .rpk-top-card__rank { flex: 0 0 48px; margin-top: 2px; }
.rpk-top-card__logo {
  flex: 0 0 72px; width: 72px; height: 72px; border-radius: 22px; overflow: hidden;
  background: linear-gradient(180deg, #202020, #101010); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center; color: var(--muted); font-weight: 800;
}
.rpk-top-card__logo img,
.rpk-row-card__logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rpk-top-card__copy { min-width: 0; }
.rpk-top-card__title {
  margin: 0;
  font-size: 24px;
  line-height: 1.05;
  letter-spacing: -.03em;
  font-weight: 700;
  word-break: break-word;
}
.rpk-top-card__badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.rpk-badge,
.rpk-row-card__tag {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0px 11px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.04);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.rpk-badge--solid {background: #242424;color: #b2b2b2;}
.rpk-top-card__desc {
  margin: 14px 0 0; color: var(--muted); font-size: 14px; line-height: 1.65;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden;
}
.rpk-top-card__footer {
  margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line); display: grid; gap: 16px;
}
.rpk-status-kicker {
  color: var(--muted-2); font-size: 11px; line-height: 1.2; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
}
.rpk-status-value {margin-top: 6px;font-size: 16px;line-height: 1.2;font-weight: 700;}
.rpk-top-card__actions,
.rpk-row-card__actions,
.rpk-submit__actions { display: grid; gap: 10px; }

.rpk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 12px 15px;
  border-radius: 15px;
  font-size: 14px;
  line-height: 1.2;
  font-weight: 600;
  text-align: center;
  transition: transform .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease;
}
.rpk-btn:hover { transform: translateY(-1px); }
.rpk-btn--primary {background: #fff;color: #000000;border: 1px solid #fff;gap: 5px;}
.rpk-btn--secondary { background: transparent; color: #fff; border: 1px solid var(--line-2); }

.rpk-banner { margin-top: 24px; padding: 24px; }
.rpk-banner__title { margin-top: 10px; font-size: 30px; line-height: 1.04; font-weight: 900; }
.rpk-banner__body { margin-top: 16px; }

.rpk-list { margin-top: 24px; padding: 28px; }
.rpk-list-head,
.rpk-row-card {
  display: grid; grid-template-columns: 70px minmax(260px, 1.3fr) 180px minmax(260px, 1fr) 240px; gap: 18px; align-items: center;
}
.rpk-list-head {
  min-height: 78px;
  padding: 0 16px;
  border-radius: 22px;
  border: 1px solid var(--line);
  background: #202020;
  font-size: 16px;
  font-weight: 700;
}
.rpk-list-head > div:first-child { text-align: center; color: var(--muted-2); }
.rpk-list-body { margin-top: 16px; display: grid; gap: 14px; counter-reset: rpk-rank 3; }
.rpk-row-card {
  padding: 18px 16px;
  border-radius: 24px;
  border: 1px solid var(--line);
  background: #202020;
}
.rpk-row-card__rank::before {
  counter-increment: rpk-rank; content: counter(rpk-rank);
  width: 46px; height: 46px; border-radius: 14px; border: 1px solid var(--line-2); background: rgba(255,255,255,.04);
  display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 900; margin: 0 auto;
}
.rpk-row-card__service { display: flex; align-items: center; gap: 14px; min-width: 0; }
.rpk-row-card__logo {
  flex: 0 0 60px; width: 60px; height: 60px; border-radius: 18px; overflow: hidden; border: 1px solid var(--line);
  background: linear-gradient(180deg, #202020, #101010); display: flex; align-items: center; justify-content: center; color: var(--muted); font-weight: 800;
}
.rpk-row-card__copy { min-width: 0; }
.rpk-row-card__title {
  margin: 0;
  font-size: 18px;
  line-height: 1.08;
  letter-spacing: -.03em;
  font-weight: 700;
  word-break: break-word;
}
.rpk-row-card__tag { margin-top: 10px; }
.rpk-row-card__desc p {
  margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden;
}

.rpk-info-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-top: 32px; }
.rpk-info-card,
.rpk-faq-item,
.rpk-submit,
.rpk-footer { padding: 28px; border-radius: 28px; }

.rpk-faq { margin-top: 32px; }
.rpk-faq-list { display: grid; gap: 16px; }
.rpk-faq-item h3 {margin: 0;font-size: 18px;line-height: 1.12;letter-spacing: -.03em;font-weight: 700;}

.rpk-submit {
  margin-top: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}
.rpk-submit__actions { min-width: 280px; }

.rpk-footer {
  margin-top: 28px; display: flex; align-items: flex-start; justify-content: space-between; gap: 24px;
}
.rpk-footer__title { font-size: 22px; font-weight: 800; }
.rpk-footer__links { display: flex; flex-wrap: wrap; gap: 18px; }
.rpk-footer__links a { color: var(--muted); font-weight: 700; }

@media (max-width: 1180px) {
  .rpk-top-grid { grid-template-columns: 1fr; }
  .rpk-list-head,
  .rpk-row-card { grid-template-columns: 60px minmax(220px, 1.1fr) 150px minmax(200px, 1fr) 210px; }
}

@media (max-width: 960px) {
  .rpk-shell { width: min(100%, calc(100% - 20px)); }
  .rpk-pills,
  .rpk-info-grid { grid-template-columns: 1fr 1fr; }
  .rpk-list-head { display: none; }
  .rpk-row-card {
    grid-template-columns: 52px 1fr; grid-template-areas:
      'rank service'
      'rank status'
      'desc desc'
      'actions actions';
    align-items: start; gap: 12px 14px;
  }
  .rpk-row-card__rank { grid-area: rank; }
  .rpk-row-card__service { grid-area: service; }
  .rpk-row-card__status { grid-area: status; padding-left: 74px; }
  .rpk-row-card__desc { grid-area: desc; }
  .rpk-row-card__actions { grid-area: actions; grid-template-columns: 1fr 1fr; }
  .rpk-submit,
  .rpk-footer { flex-direction: column; }
}

@media (max-width: 640px) {
  .rpk-page { padding: 16px 0 36px; font-size: 15px; }
  .rpk-title { font-size: 34px; }
  .rpk-subtitle { font-size: 16px; }
  .rpk-pills,
  .rpk-info-grid { grid-template-columns: 1fr; gap: 12px; }
  .rpk-pill { min-height: 60px; padding: 0 18px; border-radius: 20px; font-size: 16px; }
  .rpk-top,
  .rpk-list,
  .rpk-banner,
  .rpk-info-card,
  .rpk-faq-item,
  .rpk-submit,
  .rpk-footer { border-radius: 22px; padding: 20px; }
  .rpk-top-card { padding: 18px; border-radius: 22px; gap: 16px; }
  .rpk-top-card__rank { width: 40px; height: 40px; border-radius: 14px; font-size: 18px; }
  .rpk-top-card__main { gap: 12px; align-items: flex-start; }
  .rpk-top-card__main > .rpk-top-card__rank { flex-basis: 40px; margin-top: 0; }
  .rpk-top-card__logo { flex-basis: 58px; width: 58px; height: 58px; border-radius: 16px; }
  .rpk-top-card__title { font-size: 20px; line-height: 1.12; }
  .rpk-top-card__badges { margin-top: 8px; gap: 6px; }
  .rpk-badge,
  .rpk-row-card__tag { min-height: 32px; padding: 7px 11px; font-size: 12px; }
  .rpk-top-card__desc { margin-top: 12px; font-size: 13px; -webkit-line-clamp: 5; }
  .rpk-top-card__footer { padding-top: 14px; gap: 14px; }
  .rpk-status-value { font-size: 16px; }
  .rpk-btn { min-height: 48px; padding: 12px 16px; border-radius: 16px; font-size: 14px; }
  .rpk-row-card {
    grid-template-columns: 1fr;
    grid-template-areas:
      'rank'
      'service'
      'status'
      'desc'
      'actions';
    gap: 12px;
    padding: 16px;
    border-radius: 20px;
  }
  .rpk-row-card__rank::before { margin: 0; }
  .rpk-row-card__service { align-items: flex-start; }
  .rpk-row-card__logo { flex-basis: 56px; width: 56px; height: 56px; border-radius: 16px; }
  .rpk-row-card__title { font-size: 18px; }
  .rpk-row-card__status { padding-left: 0; }
  .rpk-row-card__desc p { font-size: 13px; line-height: 1.55; -webkit-line-clamp: 6; }
  .rpk-row-card__actions,
  .rpk-top-card__actions,
  .rpk-submit__actions { grid-template-columns: 1fr; }
  .rpk-info-card h2,
  .rpk-section-head h2,
  .rpk-submit h2 { font-size: 28px; }
  .rpk-faq-item h3 { font-size: 20px; }
}