{
  "html": "<section class='hero'><div class='hero__bg' aria-hidden='true'><span class='hero__blob hero__blob--1'></span><span class='hero__blob hero__blob--2'></span><span class='hero__blob hero__blob--3'></span><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><span class='hero__particle hero__particle--7'></span><span class='hero__particle hero__particle--8'></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></div></section>",
  "css": ".hero { background: linear-gradient(135deg, #eff6ff 0%, #ffffff 55%, #f8fbff 100%); } .hero .hero__blob--1 { background: radial-gradient(circle at 30% 30%, #60a5fa 0%, #3b82f6 45%, rgba(59, 130, 246, 0) 70%); opacity: 0.5; } .hero .hero__blob--2 { background: radial-gradient(circle at 60% 40%, #93c5fd 0%, #2563eb 50%, rgba(37, 99, 235, 0) 72%); opacity: 0.45; } .hero .hero__blob--3 { background: radial-gradient(circle at 50% 50%, #bfdbfe 0%, #60a5fa 55%, rgba(96, 165, 250, 0) 75%); opacity: 0.35; } .hero .hero__particle { background: radial-gradient(circle at 35% 35%, #ffffff 0%, #93c5fd 45%, #3b82f6 100%); box-shadow: 0 0 10px rgba(59, 130, 246, 0.7), 0 0 22px rgba(37, 99, 235, 0.4); } .hero .hero__eyebrow { background: rgba(255, 255, 255, 0.6); border: 1px solid rgba(96, 165, 250, 0.5); color: #1d4ed8; animation: hero-pulse-ring-blue 3s ease-out infinite; } .hero .hero__title { background: linear-gradient(120deg, #1e3a8a 0%, #2563eb 35%, #3b82f6 60%, #60a5fa 100%); background-size: 220% 220%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: hero-gradient-shift-blue 8s ease infinite; text-shadow: 0 0 40px rgba(59, 130, 246, 0.22); } .hero .hero__subtitle { background: rgba(255, 255, 255, 0.55); border: 1px solid rgba(96, 165, 250, 0.45); color: #1d4ed8; box-shadow: 0 8px 24px rgba(37, 99, 235, 0.16); } .hero .hero__lead { background: rgba(255, 255, 255, 0.5); border: 1px solid rgba(147, 197, 253, 0.55); box-shadow: 0 12px 40px rgba(37, 99, 235, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.85); color: #334155; } .hero .hero__lead:hover { box-shadow: 0 24px 60px rgba(37, 99, 235, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.95); } @keyframes hero-pulse-ring-blue { 0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.5); } 70% { box-shadow: 0 0 0 14px rgba(59, 130, 246, 0); } 100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); } } @keyframes hero-gradient-shift-blue { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }"
}