{
  "html": "<section class='hero'><div class='hero__inner'><p class='hero__eyebrow'>Персональный сайт</p><h1 class='hero__title'>Кинокаталог</h1><p class='hero__subtitle'>Коллекция фильмов и рекомендации</p><p class='hero__lead'>Добро пожаловать в мой личный каталог фильмов. Здесь собраны лучшие картины, которые стоит посмотреть, с описаниями и рейтингами.</p></div></section>",
  "css": ".hero { position: relative; overflow: hidden; } .hero::before { content: ''; position: absolute; inset: 0; background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.08'/%3E%3C/svg%3E\"); pointer-events: none; z-index: 0; } .hero .hero__inner { position: relative; z-index: 1; } .hero .hero__eyebrow { transition: box-shadow 0.3s ease-out, transform 0.3s ease-out; } .hero .hero__eyebrow:hover { box-shadow: 0 0 20px rgba(99, 102, 241, 0.4), 0 0 40px rgba(99, 102, 241, 0.2); transform: scale(1.05); } .hero .hero__title { transition: filter 0.3s ease-out; } .hero .hero__title:hover { filter: hue-rotate(180deg); }"
}