{
  "html": "<section class='hero'><div class='hero__inner'><p class='hero__eyebrow'>Персональный сайт</p><h1 class='hero__title'><span class='hero__title-shine'>Алексей Смирнов</span></h1><p class='hero__subtitle'>Разработчик</p><p class='hero__lead'>Создаю удобные и быстрые веб-приложения. Люблю чистый код и продуманный интерфейс.</p><a class='hero__link' href='#projects'><span class='hero__link-bar' aria-hidden='true'></span><span class='hero__link-text'>Смотреть проекты</span></a></div></section>",
  "css": ".hero .hero__link { position: relative; display: inline-flex; align-items: center; gap: 10px; margin-top: 32px; padding: 12px 22px 12px 26px; font-size: 16px; font-weight: 600; color: #2563eb; text-decoration: none; border-radius: 10px; background: #ffffff; box-shadow: 0 4px 14px rgba(37, 99, 235, 0.12); transition: transform 0.35s ease, box-shadow 0.35s ease, color 0.35s ease; overflow: hidden; }\n.hero .hero__link-bar { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, #2563eb 0%, #3b82f6 50%, #60a5fa 100%); transform: translateX(-100%); transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); }\n.hero .hero__link-text { position: relative; z-index: 1; transition: transform 0.35s ease; }\n.hero .hero__link:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(37, 99, 235, 0.28); color: #1d4ed8; }\n.hero .hero__link:hover .hero__link-bar { transform: translateX(0); }\n.hero .hero__link:hover .hero__link-text { transform: translateX(6px); }\n.hero .hero__link:focus-visible { outline: none; transform: translateY(-4px); box-shadow: 0 16px 32px rgba(37, 99, 235, 0.28); }\n.hero .hero__link:focus-visible .hero__link-bar { transform: translateX(0); }\n.hero .hero__link:focus-visible .hero__link-text { transform: translateX(6px); }\n.hero .hero__inner { animation: hero-rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) both; }\n@keyframes hero-rise { 0% { opacity: 0; transform: translateY(28px); } 100% { opacity: 1; transform: translateY(0); } }\n@supports (animation-timeline: scroll()) {\n  .hero { position: relative; }\n  .hero .hero__inner { animation: hero-scroll-shift linear both; animation-timeline: scroll(root); animation-range: 0 60vh; }\n}\n@keyframes hero-scroll-shift { 0% { transform: translateY(0); } 100% { transform: translateY(-40px); } }"
}