{
  "html": "<section class='hero'><div class='hero__bg'><span class='hero__blob hero__blob--1'></span><span class='hero__blob hero__blob--2'></span><span class='hero__blob hero__blob--3'></span></div><div class='hero__particles'><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 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; isolation: isolate; } .hero .hero__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .hero .hero__blob { position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.55; will-change: transform; } .hero .hero__blob--1 { width: 420px; height: 420px; top: -120px; left: -100px; background: radial-gradient(circle at 30% 30%, #22d3ee 0%, #06b6d4 45%, rgba(6, 182, 212, 0) 70%); animation: hero-blob-float-1 14s ease-in-out infinite; } .hero .hero__blob--2 { width: 360px; height: 360px; bottom: -140px; right: -80px; background: radial-gradient(circle at 60% 40%, #67e8f9 0%, #38bdf8 50%, rgba(56, 189, 248, 0) 72%); animation: hero-blob-float-2 18s ease-in-out infinite; } .hero .hero__blob--3 { width: 300px; height: 300px; top: 40%; left: 55%; background: radial-gradient(circle at 50% 50%, #0ea5e9 0%, #22d3ee 55%, rgba(34, 211, 238, 0) 75%); animation: hero-blob-float-3 22s ease-in-out infinite; } .hero .hero__particles { position: absolute; inset: 0; z-index: 1; pointer-events: none; } .hero .hero__particle { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #ffffff 0%, #67e8f9 60%, #22d3ee 100%); box-shadow: 0 0 12px rgba(34, 211, 238, 0.8), 0 0 24px rgba(56, 189, 248, 0.5); opacity: 0.85; will-change: transform; } .hero .hero__particle--1 { top: 18%; left: 12%; animation: hero-particle-float 9s ease-in-out infinite; } .hero .hero__particle--2 { top: 70%; left: 22%; width: 7px; height: 7px; animation: hero-particle-float 11s ease-in-out infinite 1.2s; } .hero .hero__particle--3 { top: 30%; left: 82%; width: 12px; height: 12px; animation: hero-particle-float 13s ease-in-out infinite 0.6s; } .hero .hero__particle--4 { top: 78%; left: 74%; width: 8px; height: 8px; animation: hero-particle-float 10s ease-in-out infinite 2s; } .hero .hero__particle--5 { top: 12%; left: 58%; width: 6px; height: 6px; animation: hero-particle-float 12s ease-in-out infinite 1.6s; } .hero .hero__particle--6 { top: 55%; left: 44%; width: 9px; height: 9px; animation: hero-particle-float 15s ease-in-out infinite 0.3s; } .hero .hero__inner { position: relative; z-index: 2; padding: 32px 24px; border-radius: 24px; background: rgba(255, 255, 255, 0.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.7); box-shadow: 0 10px 40px rgba(6, 182, 212, 0.15), 0 0 0 1px rgba(34, 211, 238, 0.1) inset; transition: transform 0.5s ease, box-shadow 0.5s ease; transform-style: preserve-3d; perspective: 1000px; } .hero .hero__inner:hover { transform: rotateX(2deg) rotateY(-2deg) translateY(-4px); box-shadow: 0 20px 60px rgba(6, 182, 212, 0.28), 0 0 0 1px rgba(34, 211, 238, 0.25) inset; } .hero .hero__eyebrow { position: relative; display: inline-block; padding: 6px 14px; border-radius: 999px; background: rgba(34, 211, 238, 0.12); color: #0ea5e9; animation: hero-pulse-glow 3s ease-in-out infinite; } .hero .hero__title { background: linear-gradient(120deg, #0ea5e9 0%, #22d3ee 50%, #38bdf8 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .hero .hero__subtitle { color: #06b6d4; } @keyframes hero-blob-float-1 { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(60px, 40px) scale(1.1); } 66% { transform: translate(-30px, 70px) scale(0.95); } } @keyframes hero-blob-float-2 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-70px, -50px) scale(1.15); } } @keyframes hero-blob-float-3 { 0%, 100% { transform: translate(0, 0) scale(1); } 25% { transform: translate(40px, -60px) scale(1.08); } 75% { transform: translate(-50px, 30px) scale(0.92); } } @keyframes hero-particle-float { 0%, 100% { transform: translate(0, 0); opacity: 0.85; } 50% { transform: translate(20px, -30px); opacity: 0.4; } } @keyframes hero-pulse-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(34, 211, 238, 0.4); } 50% { box-shadow: 0 0 0 8px rgba(34, 211, 238, 0); } }"
}