:root {
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ink: #1c1c1e;
  --ink-secondary: rgba(60, 60, 67, 0.6);
  --hairline: rgba(60, 60, 67, 0.08);
  --glass-bg: rgba(255, 255, 255, 0.55);
  --glass-border: rgba(255, 255, 255, 0.6);
}

* { box-sizing: border-box; }

html, body { margin: 0; }

body {
  min-height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  color: var(--ink);
  letter-spacing: -0.01em;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 20px 60px;
  background: #6a5cff;
  overflow-x: hidden;
}

body::before {
  content: '';
  position: fixed;
  inset: -15%;
  z-index: -1;
  background:
    radial-gradient(circle at 18% 20%, #8a5cff 0%, transparent 45%),
    radial-gradient(circle at 85% 12%, #5ec8ff 0%, transparent 45%),
    radial-gradient(circle at 80% 82%, #ff6f91 0%, transparent 50%),
    radial-gradient(circle at 15% 85%, #ffd166 0%, transparent 45%),
    linear-gradient(135deg, #6a5cff, #4b6cff);
  filter: blur(70px);
  animation: drift 50s ease-in-out infinite;
}

@keyframes drift {
  0%, 100% { filter: blur(70px) hue-rotate(0deg); transform: scale(1); }
  50% { filter: blur(70px) hue-rotate(18deg); transform: scale(1.08); }
}

/* ---- Стекло ---- */
.glass {
  background: var(--glass-bg);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border: 1px solid var(--glass-border);
  border-radius: 28px;
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

/* ---- Шапка ---- */
.header {
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
  max-width: 640px;
  margin: 36px auto 20px;
  padding: 22px;
}

.header__icon {
  flex-shrink: 0;
  width: 110px;
  height: 110px;
  object-fit: cover;
  background: linear-gradient(135deg, #a98bff, #5ec8ff);
  clip-path: path("M109.0,55.0 L108.54,62.05 L107.16,68.98 L104.89,75.66 L101.77,82.0 L97.84,87.87 L93.18,93.18 L87.87,97.84 L82.0,101.77 L75.66,104.89 L68.98,107.16 L62.05,108.54 L55.0,109.0 L47.95,108.54 L41.02,107.16 L34.34,104.89 L28.0,101.77 L22.13,97.84 L16.82,93.18 L12.16,87.87 L8.23,82.0 L5.11,75.66 L2.84,68.98 L1.46,62.05 L1.0,55.0 L1.46,47.95 L2.84,41.02 L5.11,34.34 L8.23,28.0 L12.16,22.13 L16.82,16.82 L22.13,12.16 L28.0,8.23 L34.34,5.11 L41.02,2.84 L47.95,1.46 L55.0,1.0 L62.05,1.46 L68.98,2.84 L75.66,5.11 L82.0,8.23 L87.87,12.16 L93.18,16.82 L97.84,22.13 L101.77,28.0 L104.89,34.34 L107.16,41.02 L108.54,47.95 Z");
  animation: morph-header 8s var(--spring) infinite;
}

@keyframes morph-header {
  0%, 100% {
    clip-path: path("M109.0,55.0 L108.54,62.05 L107.16,68.98 L104.89,75.66 L101.77,82.0 L97.84,87.87 L93.18,93.18 L87.87,97.84 L82.0,101.77 L75.66,104.89 L68.98,107.16 L62.05,108.54 L55.0,109.0 L47.95,108.54 L41.02,107.16 L34.34,104.89 L28.0,101.77 L22.13,97.84 L16.82,93.18 L12.16,87.87 L8.23,82.0 L5.11,75.66 L2.84,68.98 L1.46,62.05 L1.0,55.0 L1.46,47.95 L2.84,41.02 L5.11,34.34 L8.23,28.0 L12.16,22.13 L16.82,16.82 L22.13,12.16 L28.0,8.23 L34.34,5.11 L41.02,2.84 L47.95,1.46 L55.0,1.0 L62.05,1.46 L68.98,2.84 L75.66,5.11 L82.0,8.23 L87.87,12.16 L93.18,16.82 L97.84,22.13 L101.77,28.0 L104.89,34.34 L107.16,41.02 L108.54,47.95 Z");
  }
  50% {
    clip-path: path("M109.0,55.0 L108.79,76.85 L108.17,84.61 L107.13,90.24 L105.66,94.68 L103.72,98.31 L101.29,101.29 L98.31,103.72 L94.68,105.66 L90.24,107.13 L84.61,108.17 L76.85,108.79 L55.0,109.0 L33.15,108.79 L25.39,108.17 L19.76,107.13 L15.32,105.66 L11.69,103.72 L8.71,101.29 L6.28,98.31 L4.34,94.68 L2.87,90.24 L1.83,84.61 L1.21,76.85 L1.0,55.0 L1.21,33.15 L1.83,25.39 L2.87,19.76 L4.34,15.32 L6.28,11.69 L8.71,8.71 L11.69,6.28 L15.32,4.34 L19.76,2.87 L25.39,1.83 L33.15,1.21 L55.0,1.0 L76.85,1.21 L84.61,1.83 L90.24,2.87 L94.68,4.34 L98.31,6.28 L101.29,8.71 L103.72,11.69 L105.66,15.32 L107.13,19.76 L108.17,25.39 L108.79,33.15 Z");
  }
}

.header__eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-secondary);
  margin: 0 0 2px;
}

.header__title {
  font-size: clamp(2rem, 7vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: 0;
}

.header__date {
  font-size: 0.9rem;
  color: var(--ink-secondary);
  margin: 4px 0 0;
}

/* ---- Список ---- */
.list {
  width: 100%;
  max-width: 640px;
  padding: 6px;
}

.row-wrapper {
  position: relative;
}

.row-wrapper:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 79px;
  right: 12px;
  bottom: 0;
  height: 1px;
  background: var(--hairline);
}

.row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px;
  border-radius: 20px;
  text-decoration: none;
  color: inherit;
  transition: background-color 0.25s ease;
}

.row:hover,
.row:focus-within {
  background: rgba(255, 255, 255, 0.35);
}

.expand-btn {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  padding: 0;
  margin: 0;
  border-radius: 50%;
  border: none;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  background: rgba(255, 255, 255, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--ink-secondary);
  transition: background-color 0.2s ease;
}

.expand-btn:hover {
  background: rgba(255, 255, 255, 0.65);
}

.expand-btn svg {
  width: 16px;
  height: 16px;
  transition: transform 0.35s var(--spring);
}

.expand-btn.expanded svg {
  transform: rotate(180deg);
}

.row__description-wrap {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.4s var(--spring);
}

.row__description {
  margin: 0;
  padding: 4px 14px 14px;
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1.6;
  color: var(--ink-secondary);
  text-align: left;
}

.icon {
  flex-shrink: 0;
  width: 65px;
  height: 65px;
  object-fit: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.5rem;
  color: #fff;
  clip-path: path("M64.0,32.5 L63.88,45.24 L63.52,49.78 L62.91,53.05 L62.05,55.65 L60.92,57.76 L59.5,59.5 L57.76,60.92 L55.65,62.05 L53.05,62.91 L49.78,63.52 L45.24,63.88 L32.5,64.0 L19.76,63.88 L15.22,63.52 L11.95,62.91 L9.35,62.05 L7.24,60.92 L5.5,59.5 L4.08,57.76 L2.95,55.65 L2.09,53.05 L1.48,49.78 L1.12,45.24 L1.0,32.5 L1.12,19.76 L1.48,15.22 L2.09,11.95 L2.95,9.35 L4.08,7.24 L5.5,5.5 L7.24,4.08 L9.35,2.95 L11.95,2.09 L15.22,1.48 L19.76,1.12 L32.5,1.0 L45.24,1.12 L49.78,1.48 L53.05,2.09 L55.65,2.95 L57.76,4.08 L59.5,5.5 L60.92,7.24 L62.05,9.35 L62.91,11.95 L63.52,15.22 L63.88,19.76 Z");
  transition: transform 0.3s var(--spring);
}

.row:hover .icon,
.row:focus-within .icon {
  transform: scale(1.06);
}

.icon-wrap {
  position: relative;
  flex-shrink: 0;
}

.star-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ffe28a, #ffb800);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.star-badge svg {
  width: 14px;
  height: 14px;
}

.row--featured {
  border: 1.5px solid rgba(255, 214, 10, 0.55);
  background: rgba(255, 214, 10, 0.08);
}

.row--featured:hover,
.row--featured:focus-within {
  background: rgba(255, 214, 10, 0.16);
}

.row__text {
  flex: 1;
  min-width: 0;
}

.row__title {
  font-weight: 600;
  font-size: 1.02rem;
  line-height: 1.3;
  margin: 0;
}

.row__subtitle {
  font-size: 0.85rem;
  color: var(--ink-secondary);
  margin: 2px 0 0;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pill {
  flex-shrink: 0;
  font-family: inherit;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  border-radius: 999px;
  border: 1.5px solid currentColor;
  padding: 9px 20px;
  transition: transform 0.3s var(--spring), filter 0.2s ease, background-color 0.2s ease;
  cursor: pointer;
}

.pill:hover {
  filter: brightness(1.1);
  transform: scale(1.05);
}

.pill:active {
  transform: scale(0.92);
}

.section-label {
  width: 100%;
  max-width: 640px;
  margin: 28px auto 8px;
  padding: 0 18px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
}

.footer {
  text-align: center;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.7);
  padding: 24px 1rem 0;
}

@media (prefers-reduced-motion: reduce) {
  *, .header__icon, body::before {
    animation: none !important;
    transition: none !important;
  }
  .header__icon {
    clip-path: path("M109.0,55.0 L108.79,76.85 L108.17,84.61 L107.13,90.24 L105.66,94.68 L103.72,98.31 L101.29,101.29 L98.31,103.72 L94.68,105.66 L90.24,107.13 L84.61,108.17 L76.85,108.79 L55.0,109.0 L33.15,108.79 L25.39,108.17 L19.76,107.13 L15.32,105.66 L11.69,103.72 L8.71,101.29 L6.28,98.31 L4.34,94.68 L2.87,90.24 L1.83,84.61 L1.21,76.85 L1.0,55.0 L1.21,33.15 L1.83,25.39 L2.87,19.76 L4.34,15.32 L6.28,11.69 L8.71,8.71 L11.69,6.28 L15.32,4.34 L19.76,2.87 L25.39,1.83 L33.15,1.21 L55.0,1.0 L76.85,1.21 L84.61,1.83 L90.24,2.87 L94.68,4.34 L98.31,6.28 L101.29,8.71 L103.72,11.69 L105.66,15.32 L107.13,19.76 L108.17,25.39 L108.79,33.15 Z");
  }
}

.claim {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-width: 36px;
}

.claim-label {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  opacity: 0;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #30d158;
  transition: max-width 0.6s var(--spring), opacity 0.6s ease;
}

.claim-label.visible {
  max-width: 120px;
  opacity: 1;
}

.claim-btn {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  padding: 0;
  margin: 0;
  border: none;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.4);
  clip-path: path("M35.0,18.0 L34.94,24.88 L34.74,27.32 L34.41,29.09 L33.95,30.49 L33.34,31.63 L32.57,32.57 L31.63,33.34 L30.49,33.95 L29.09,34.41 L27.32,34.74 L24.88,34.94 L18.0,35.0 L11.12,34.94 L8.68,34.74 L6.91,34.41 L5.51,33.95 L4.37,33.34 L3.43,32.57 L2.66,31.63 L2.05,30.49 L1.59,29.09 L1.26,27.32 L1.06,24.88 L1.0,18.0 L1.06,11.12 L1.26,8.68 L1.59,6.91 L2.05,5.51 L2.66,4.37 L3.43,3.43 L4.37,2.66 L5.51,2.05 L6.91,1.59 L8.68,1.26 L11.12,1.06 L18.0,1.0 L24.88,1.06 L27.32,1.26 L29.09,1.59 L30.49,2.05 L31.63,2.66 L32.57,3.43 L33.34,4.37 L33.95,5.51 L34.41,6.91 L34.74,8.68 L34.94,11.12 Z");
  transition: background-color 0.3s ease, transform 0.3s var(--spring);
}

.claim-btn:hover {
  background: rgba(255, 255, 255, 0.65);
}

.claim-btn:active {
  transform: scale(0.88);
}

.claim-btn.claimed {
  background: #30d158;
}

.claim-btn svg {
  width: 18px;
  height: 18px;
  color: #fff;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.3s var(--spring), transform 0.3s var(--spring);
}

.claim-btn.claimed svg {
  opacity: 1;
  transform: scale(1);
}

/* ---- Мобильная адаптация ---- */
@media (max-width: 480px) {
  body {
    padding: 0 12px 40px;
  }

  .header {
    gap: 14px;
    margin: 20px auto 16px;
    padding: 16px;
  }

  .header__icon {
    width: 72px;
    height: 72px;
    animation: none;
    clip-path: path("M71.0,36.0 L70.87,50.16 L70.46,55.19 L69.79,58.84 L68.83,61.72 L67.58,64.07 L66.0,66.0 L64.07,67.58 L61.72,68.83 L58.84,69.79 L55.19,70.46 L50.16,70.87 L36.0,71.0 L21.84,70.87 L16.81,70.46 L13.16,69.79 L10.28,68.83 L7.93,67.58 L6.0,66.0 L4.42,64.07 L3.17,61.72 L2.21,58.84 L1.54,55.19 L1.13,50.16 L1.0,36.0 L1.13,21.84 L1.54,16.81 L2.21,13.16 L3.17,10.28 L4.42,7.93 L6.0,6.0 L7.93,4.42 L10.28,3.17 L13.16,2.21 L16.81,1.54 L21.84,1.13 L36.0,1.0 L50.16,1.13 L55.19,1.54 L58.84,2.21 L61.72,3.17 L64.07,4.42 L66.0,6.0 L67.58,7.93 L68.83,10.28 L69.79,13.16 L70.46,16.81 L70.87,21.84 Z");
  }

  .header__title {
    font-size: clamp(1.6rem, 8vw, 2.2rem);
  }

  .header__eyebrow {
    font-size: 0.68rem;
  }

  .header__date {
    font-size: 0.8rem;
  }

  .row {
    display: grid;
    grid-template-columns: 52px 1fr 28px;
    grid-template-areas:
      "icon text expand"
      "pill pill claim";
    align-items: center;
    justify-items: start;
    column-gap: 10px;
    row-gap: 10px;
    padding: 12px 10px;
  }

  .icon-wrap {
    grid-area: icon;
    width: 52px;
    height: 52px;
  }

  .icon {
    width: 52px;
    height: 52px;
    font-size: 1.2rem;
    clip-path: path("M51.0,26.0 L50.9,36.11 L50.62,39.71 L50.14,42.31 L49.45,44.37 L48.56,46.05 L47.43,47.43 L46.05,48.56 L44.37,49.45 L42.31,50.14 L39.71,50.62 L36.11,50.9 L26.0,51.0 L15.89,50.9 L12.29,50.62 L9.69,50.14 L7.63,49.45 L5.95,48.56 L4.57,47.43 L3.44,46.05 L2.55,44.37 L1.86,42.31 L1.38,39.71 L1.1,36.11 L1.0,26.0 L1.1,15.89 L1.38,12.29 L1.86,9.69 L2.55,7.63 L3.44,5.95 L4.57,4.57 L5.95,3.44 L7.63,2.55 L9.69,1.86 L12.29,1.38 L15.89,1.1 L26.0,1.0 L36.11,1.1 L39.71,1.38 L42.31,1.86 L44.37,2.55 L46.05,3.44 L47.43,4.57 L48.56,5.95 L49.45,7.63 L50.14,9.69 L50.62,12.29 L50.9,15.89 Z");
  }

  .row__text {
    grid-area: text;
    min-width: 0;
  }

  .row__title {
    font-size: 0.95rem;
  }

  .row__subtitle {
    font-size: 0.8rem;
    white-space: normal;
  }

  .expand-btn {
    grid-area: expand;
    width: 28px;
    height: 28px;
  }

  .pill {
    grid-area: pill;
    justify-self: start;
    font-size: 0.85rem;
    padding: 7px 16px;
  }

  .claim {
    grid-area: claim;
    justify-self: end;
    position: relative;
    z-index: 1;
  }

  .claim-btn {
    width: 28px;
    height: 28px;
    clip-path: path("M27.0,14.0 L26.95,19.26 L26.80,21.12 L26.55,22.48 L26.19,23.55 L25.73,24.43 L25.14,25.14 L24.43,25.73 L23.55,26.19 L22.48,26.55 L21.12,26.80 L19.26,26.95 L14.0,27.0 L8.74,26.95 L6.87,26.80 L5.52,26.55 L4.45,26.19 L3.57,25.73 L2.85,25.14 L2.27,24.43 L1.81,23.55 L1.45,22.48 L1.20,21.12 L1.05,19.26 L1.0,14.0 L1.05,8.74 L1.20,6.87 L1.45,5.52 L1.81,4.45 L2.27,3.57 L2.85,2.85 L3.57,2.27 L4.45,1.81 L5.52,1.45 L6.87,1.20 L8.74,1.05 L14.0,1.0 L19.26,1.05 L21.12,1.20 L22.48,1.45 L23.55,1.81 L24.43,2.27 L25.14,2.85 L25.73,3.57 L26.19,4.45 L26.55,5.52 L26.80,6.87 L26.95,8.74 Z");
    transform: scale(1);
  }

  .claim-label {
    font-size: 0.72rem;
  }

  .row-wrapper:not(:last-child)::after {
    left: 62px;
  }

  .row__description {
    padding: 2px 10px 12px 10px;
    font-size: 0.85rem;
    font-weight: 600;
    text-align: left;
  }

  .section-label {
    padding: 0 10px;
  }

  .star-badge {
    width: 20px;
    height: 20px;
  }

  .star-badge svg {
    width: 11px;
    height: 11px;
  }
}