{
  "html": "<section class='hero'><div class='hero__particles' aria-hidden='true'><span class='hero__particle hero__particle--1'></span><span class='hero__particle hero__particle--2'></span><span class='hero__particle hero__particle--3'></span><span class='hero__particle hero__particle--4'></span><span class='hero__particle hero__particle--5'></span><span class='hero__particle hero__particle--6'></span></div><div class='hero__inner'><p class='hero__eyebrow'>Танцевальная студия</p><h1 class='hero__title'>Студия танцев «Ритм»</h1><p class='hero__subtitle'>Современная хореография и латина</p><p class='hero__lead'>Мы создаём пространство, где движение становится языком самовыражения. Профессиональные педагоги, уютные залы и атмосфера вдохновения — для детей и взрослых.</p><a class='hero__link hero__link--reverse' href='#classes'>Записаться на занятие</a></div></section>",
  "css": ".hero { position: relative; overflow: hidden; } .hero .hero__particles { position: absolute; inset: 0; pointer-events: none; z-index: 0; } .hero .hero__particle { position: absolute; display: block; width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #c7d2fe, #818cf8); opacity: 0.55; animation: hero-float 9s ease-in-out infinite; } .hero .hero__particle--1 { left: 8%; top: 20%; width: 14px; height: 14px; animation-duration: 8s; animation-delay: 0s; } .hero .hero__particle--2 { left: 22%; top: 70%; width: 8px; height: 8px; animation-duration: 10s; animation-delay: 1.2s; } .hero .hero__particle--3 { left: 48%; top: 12%; width: 12px; height: 12px; animation-duration: 7s; animation-delay: 0.6s; } .hero .hero__particle--4 { left: 72%; top: 62%; width: 16px; height: 16px; animation-duration: 11s; animation-delay: 2s; } .hero .hero__particle--5 { left: 88%; top: 28%; width: 9px; height: 9px; animation-duration: 9s; animation-delay: 1.6s; } .hero .hero__particle--6 { left: 60%; top: 82%; width: 11px; height: 11px; animation-duration: 8.5s; animation-delay: 0.3s; } .hero .hero__inner { position: relative; z-index: 1; } .hero .hero__title { transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); transform-origin: center; } .hero .hero__title:hover { transform: skewX(-4deg) rotate(-1.2deg); } .hero .hero__link { display: inline-block; margin-top: 8px; padding: 14px 30px; font-size: 16px; font-weight: 600; color: #3730a3; text-decoration: none; border-radius: 999px; background: rgba(99, 102, 241, 0.08); position: relative; overflow: hidden; transition: transform 0.3s ease, background 0.3s ease; } .hero .hero__link::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, #6366f1, #818cf8, #a5b4fc, #6366f1); background-size: 300% 100%; animation: hero-underline 3s linear infinite; } .hero .hero__link--reverse::after { animation-direction: reverse; } .hero .hero__link:hover { transform: translateY(-2px); background: rgba(99, 102, 241, 0.16); } @keyframes hero-float { 0% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.45; } 50% { transform: translate3d(14px, -26px, 0) scale(1.15); opacity: 0.75; } 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.45; } } @keyframes hero-underline { 0% { background-position: 0% 50%; } 100% { background-position: 300% 50%; } }"
}