{
  "html": "<section class='hero'><div class='hero__inner'><p class='hero__eyebrow'>Персональный сайт</p><h1 class='hero__title'><span class='hero__title-text'>Алексей Смирнов</span><span class='hero__wave' aria-hidden='true'></span></h1><p class='hero__subtitle'>Разработчик</p><p class='hero__lead'>Создаю удобные и быстрые веб-приложения. Люблю чистый код и продуманный дизайн.</p><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></section>",
  "css": ".hero { animation: hero-breathe 6s ease-in-out infinite; animation-delay: 0.2s; }\n\n@keyframes hero-breathe {\n  0%, 100% { transform: scale(1); }\n  50% { transform: scale(1.01); }\n}\n\n.hero .hero__title { position: relative; display: inline-block; }\n\n.hero .hero__wave { position: absolute; left: 0; right: 0; bottom: -14px; height: 6px; border-radius: 3px; background: linear-gradient(90deg, #2563eb, #3b82f6, #60a5fa, #3b82f6, #2563eb); background-size: 200% 100%; animation: hero-wave 3s linear infinite; opacity: 0.85; }\n\n@keyframes hero-wave {\n  0% { background-position: 0% 50%; transform: scaleX(0.85); }\n  50% { background-position: 100% 50%; transform: scaleX(1); }\n  100% { background-position: 0% 50%; transform: scaleX(0.85); }\n}\n\n.hero .hero__particles { position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: 0; transition: opacity 0.5s ease-in-out; }\n\n.hero:focus-within .hero__particles { opacity: 1; }\n\n.hero .hero__particle { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #ffffff, #60a5fa 60%, #3b82f6); box-shadow: 0 0 10px rgba(59, 130, 246, 0.45); opacity: 0.85; }\n\n.hero .hero__particle--1 { left: 12%; top: 70%; animation: hero-float-1 7s ease-in-out infinite; }\n.hero .hero__particle--2 { left: 28%; top: 40%; width: 6px; height: 6px; animation: hero-float-2 9s ease-in-out infinite; }\n.hero .hero__particle--3 { left: 46%; top: 80%; width: 10px; height: 10px; animation: hero-float-3 8s ease-in-out infinite; }\n.hero .hero__particle--4 { left: 64%; top: 30%; animation: hero-float-1 10s ease-in-out infinite; }\n.hero .hero__particle--5 { left: 78%; top: 65%; width: 6px; height: 6px; animation: hero-float-2 6.5s ease-in-out infinite; }\n.hero .hero__particle--6 { left: 88%; top: 45%; width: 9px; height: 9px; animation: hero-float-3 11s ease-in-out infinite; }\n\n@keyframes hero-float-1 {\n  0%, 100% { transform: translate(0, 0); }\n  50% { transform: translate(14px, -28px); }\n}\n\n@keyframes hero-float-2 {\n  0%, 100% { transform: translate(0, 0); }\n  50% { transform: translate(-18px, -22px); }\n}\n\n@keyframes hero-float-3 {\n  0%, 100% { transform: translate(0, 0); }\n  50% { transform: translate(10px, -34px); }\n}\n\n.hero .hero__inner { transition: transform 0.4s ease-in-out, box-shadow 0.4s ease-in-out; }\n\n.hero .hero__inner:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(37, 99, 235, 0.18); }"
}