{
  "html": "<section class='hero'><div class='hero__stars' aria-hidden='true'><span class='hero__star' style='top:12%;left:8%;animation-delay:0s'></span><span class='hero__star' style='top:22%;left:24%;animation-delay:0.8s'></span><span class='hero__star' style='top:8%;left:46%;animation-delay:1.6s'></span><span class='hero__star' style='top:18%;left:68%;animation-delay:0.4s'></span><span class='hero__star' style='top:10%;left:88%;animation-delay:2.1s'></span><span class='hero__star' style='top:38%;left:14%;animation-delay:1.2s'></span><span class='hero__star' style='top:44%;left:52%;animation-delay:2.6s'></span><span class='hero__star' style='top:34%;left:80%;animation-delay:0.6s'></span><span class='hero__star' style='top:62%;left:6%;animation-delay:1.9s'></span><span class='hero__star' style='top:70%;left:30%;animation-delay:0.2s'></span><span class='hero__star' style='top:58%;left:60%;animation-delay:2.4s'></span><span class='hero__star' style='top:74%;left:84%;animation-delay:1.4s'></span><span class='hero__star' style='top:86%;left:18%;animation-delay:3s'></span><span class='hero__star' style='top:90%;left:44%;animation-delay:0.9s'></span><span class='hero__star' style='top:82%;left:72%;animation-delay:2.2s'></span><span class='hero__star' style='top:50%;left:94%;animation-delay:1.7s'></span></div><div class='hero__inner'><p class='hero__eyebrow'>Персональный сайт</p><h1 class='hero__title' data-text='Алексей Смирнов'>Алексей Смирнов</h1><p class='hero__subtitle'>Разработчик</p><p class='hero__lead'>Создаю удобные и быстрые веб-приложения. Люблю чистый код и продуманный дизайн.</p><a class='hero__link' href='#projects'>Смотреть проекты</a></div><div class='hero__zigzag' aria-hidden='true'></div></section>",
  "css": ".hero { position: relative; overflow: hidden; }\n.hero .hero__stars { position: absolute; inset: 0; pointer-events: none; z-index: 0; }\n.hero .hero__star { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #3b82f6; box-shadow: 0 0 6px rgba(59, 130, 246, 0.6); opacity: 0.2; animation: hero-twinkle 3.2s ease-in-out infinite; }\n.hero .hero__star:nth-child(3n) { width: 3px; height: 3px; background: #60a5fa; }\n.hero .hero__star:nth-child(4n) { width: 5px; height: 5px; background: #2563eb; }\n.hero .hero__inner { position: relative; z-index: 1; }\n.hero .hero__title { position: relative; animation: hero-chroma 6s ease-in-out infinite; }\n.hero .hero__title::before, .hero .hero__title::after { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; pointer-events: none; }\n.hero .hero__title::before { color: #2563eb; transform: translate(-2px, 0); mix-blend-mode: multiply; opacity: 0.55; animation: hero-chroma-red 5s ease-in-out infinite; }\n.hero .hero__title::after { color: #60a5fa; transform: translate(2px, 0); mix-blend-mode: multiply; opacity: 0.55; animation: hero-chroma-blue 5s ease-in-out infinite; }\n.hero .hero__link { display: inline-block; margin-top: 32px; font-size: 16px; font-weight: 600; color: #2563eb; text-decoration: none; position: relative; padding-bottom: 4px; }\n.hero .hero__link::after { content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: linear-gradient(90deg, #2563eb, #3b82f6, #60a5fa, #2563eb); background-size: 300% 100%; transform: scaleX(0); transform-origin: left; transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); animation: hero-gradient-slide 3s linear infinite; }\n.hero .hero__link:hover::after, .hero .hero__link:focus-visible::after { transform: scaleX(1); }\n.hero .hero__zigzag { position: absolute; left: 0; right: 0; bottom: -1px; height: 40px; background: #ffffff; clip-path: polygon(0 100%, 0 40%, 5% 60%, 10% 40%, 15% 60%, 20% 40%, 25% 60%, 30% 40%, 35% 60%, 40% 40%, 45% 60%, 50% 40%, 55% 60%, 60% 40%, 65% 60%, 70% 40%, 75% 60%, 80% 40%, 85% 60%, 90% 40%, 95% 60%, 100% 40%, 100% 100%); z-index: 2; }\n@keyframes hero-twinkle { 0%, 100% { opacity: 0.15; transform: scale(0.8); } 50% { opacity: 0.9; transform: scale(1.2); } }\n@keyframes hero-chroma { 0%, 100% { text-shadow: 0 0 0 transparent; } 50% { text-shadow: 0 0 18px rgba(59, 130, 246, 0.25); } }\n@keyframes hero-chroma-red { 0%, 100% { transform: translate(-2px, 0); } 50% { transform: translate(-3px, -1px); } }\n@keyframes hero-chroma-blue { 0%, 100% { transform: translate(2px, 0); } 50% { transform: translate(3px, 1px); } }\n@keyframes hero-gradient-slide { 0% { background-position: 0% 50%; } 100% { background-position: 300% 50%; } }"
}