{
  "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' style='--x: 8%; --y: 20%; --d: 0s; --s: 6px;'></span><span class='hero__particle' style='--x: 22%; --y: 70%; --d: 1.2s; --s: 4px;'></span><span class='hero__particle' style='--x: 38%; --y: 35%; --d: 2.4s; --s: 8px;'></span><span class='hero__particle' style='--x: 55%; --y: 80%; --d: 0.6s; --s: 5px;'></span><span class='hero__particle' style='--x: 70%; --y: 25%; --d: 1.8s; --s: 7px;'></span><span class='hero__particle' style='--x: 85%; --y: 60%; --d: 3s; --s: 4px;'></span><span class='hero__particle' style='--x: 92%; --y: 15%; --d: 2.1s; --s: 6px;'></span><span class='hero__particle' style='--x: 15%; --y: 45%; --d: 3.6s; --s: 5px;'></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: -1; 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%, #67e8f9 0%, #22d3ee 45%, transparent 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 70% 70%, #38bdf8 0%, #0ea5e9 50%, transparent 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%, #06b6d4 0%, #22d3ee 55%, transparent 75%); animation: hero-blob-float-3 22s ease-in-out infinite; opacity: 0.4; } .hero .hero__particles { position: absolute; inset: 0; z-index: -1; pointer-events: none; } .hero .hero__particle { position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); border-radius: 50%; background: radial-gradient(circle, #ffffff 0%, #67e8f9 60%, transparent 100%); box-shadow: 0 0 12px 2px rgba(34, 211, 238, 0.6); animation: hero-particle-float 9s ease-in-out infinite; animation-delay: var(--d); opacity: 0.85; } .hero .hero__inner { position: relative; z-index: 1; } .hero .hero__eyebrow { display: inline-block; padding: 6px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(34, 211, 238, 0.35); box-shadow: 0 4px 18px rgba(6, 182, 212, 0.18); animation: hero-fade-up 0.9s ease-out both; } .hero .hero__title { background: linear-gradient(120deg, #0ea5e9 0%, #22d3ee 45%, #38bdf8 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; animation: hero-fade-up 0.9s ease-out 0.1s both, hero-title-glow 4s ease-in-out 1s infinite; } .hero .hero__subtitle { animation: hero-fade-up 0.9s ease-out 0.2s both; } .hero .hero__lead { animation: hero-fade-up 0.9s ease-out 0.3s both; } .hero .hero__title:hover { transform: perspective(600px) rotateX(6deg) rotateY(-4deg) scale(1.02); transition: transform 0.4s ease; } @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, 30px) scale(1.08); } 75% { transform: translate(50px, -40px) scale(0.92); } } @keyframes hero-particle-float { 0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.4; } 50% { transform: translate(20px, -40px) scale(1.4); opacity: 1; } } @keyframes hero-fade-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } @keyframes hero-title-glow { 0%, 100% { filter: drop-shadow(0 0 0 rgba(34, 211, 238, 0)); } 50% { filter: drop-shadow(0 0 18px rgba(34, 211, 238, 0.55)); } }"
}