/* Пастель — в тон роликам «Сам себе продюсер»: розовый, голубой, жёлтый, мята, сиреневый акцент */
:root {
  --ink: #1d2330; --muted: #4e5666; --line: rgba(29, 35, 48, .08);
  --pink: #ffd6e8; --blue: #c8e7ff; --yellow: #fff1b8; --mint: #d9f7e8;
  --accent: #7b5cff; --card: rgba(255, 255, 255, .7);
  /* Яркие пятна фона — заметно насыщеннее плашек */
  --b-pink: #ff9cc8; --b-blue: #8fc8ff; --b-yellow: #ffdf6b; --b-mint: #86e8bd; --b-lilac: #b9a2ff;
}
* { box-sizing: border-box; }
body {
  margin: 0; color: var(--ink); font: 17px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: #fff3f9;
}
/* Живой фон: два слоя крупных цветных пятен медленно плывут навстречу друг другу */
body::before, body::after {
  content: ""; position: fixed; inset: -25%; z-index: -1; pointer-events: none; filter: blur(40px);
}
body::before {
  background:
    radial-gradient(circle at 18% 22%, var(--b-pink) 0, transparent 30%),
    radial-gradient(circle at 80% 30%, var(--b-blue) 0, transparent 28%),
    radial-gradient(circle at 30% 80%, var(--b-mint) 0, transparent 30%);
  animation: plyvi-1 22s ease-in-out infinite alternate;
}
body::after {
  background:
    radial-gradient(circle at 75% 75%, var(--b-yellow) 0, transparent 28%),
    radial-gradient(circle at 55% 45%, var(--b-lilac) 0, transparent 22%),
    radial-gradient(circle at 10% 55%, var(--b-blue) 0, transparent 20%);
  opacity: .85;
  animation: plyvi-2 28s ease-in-out infinite alternate;
}
@keyframes plyvi-1 { from { transform: translate(0, 0) rotate(0deg); } to { transform: translate(6%, 5%) rotate(12deg); } }
@keyframes plyvi-2 { from { transform: translate(0, 0) scale(1); } to { transform: translate(-7%, -4%) scale(1.12); } }
@media (prefers-reduced-motion: reduce) { body::before, body::after { animation: none; } }
.wrap { max-width: 760px; margin: 0 auto; padding-left: 16px; padding-right: 16px; }
header { background: rgba(255, 255, 255, .6); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
header .wrap { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-block: 14px; flex-wrap: wrap; }
.logo { font-weight: 700; color: var(--ink); text-decoration: none; }
nav { display: flex; gap: 18px; font-size: 15px; }
nav a, footer a { color: var(--muted); text-decoration: none; }
nav a:hover, footer a:hover { color: var(--accent); }

article {
  margin: 32px auto 40px; padding: 32px 28px 40px;
  background: var(--card); border-radius: 24px; box-shadow: 0 10px 40px rgba(123, 92, 255, .08);
}
@media (max-width: 600px) { article { margin: 16px 12px 24px; padding: 22px 18px 28px; border-radius: 18px; } }

h1 { font-size: 32px; line-height: 1.2; margin: 0 0 8px; text-wrap: balance; }
h2 {
  display: inline-block; font-size: 19px; margin: 30px 0 8px; padding: 3px 12px; border-radius: 10px;
  background: var(--pink);
}
h2:nth-of-type(4n+2) { background: var(--yellow); }
h2:nth-of-type(4n+3) { background: var(--mint); }
h2:nth-of-type(4n+4) { background: var(--blue); }
.lead { font-size: 19px; color: var(--muted); }
.price { display: inline-block; font-size: 30px; font-weight: 700; margin: 6px 0; color: var(--accent); }
.btn {
  display: inline-block; background: var(--accent); color: #fff; padding: 13px 26px; border-radius: 999px;
  text-decoration: none; font-weight: 600; margin-top: 8px; box-shadow: 0 6px 18px rgba(123, 92, 255, .3);
}
.btn:hover { filter: brightness(1.08); }
ul { padding-left: 22px; } li { margin: 6px 0; }
.primery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 14px 0 6px; }
.primery video { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 16px; background: var(--pink);
  box-shadow: 0 8px 24px rgba(123, 92, 255, .15); }
@media (max-width: 600px) { .primery { gap: 8px; } .primery video { border-radius: 12px; } }
a { color: var(--accent); }
footer { padding-block: 8px 32px; text-align: center; font-size: 14px; color: var(--muted); }
footer p { margin: 4px 0; }
footer .links { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; margin-top: 10px; }