{
  "html": "<section class='hero'><div class='hero__inner'><p class='hero__eyebrow'><span class='hero__eyebrow-icon'>✦</span>Творческое пространство</p><h1 class='hero__title'>Телестудия «Кадр»</h1><p class='hero__subtitle'>Съёмка, монтаж, эфир</p><p class='hero__lead'>Мы создаём телевизионный контент полного цикла — от идеи и сценария до готового эфирного продукта. Профессиональная команда, современное оборудование и любовь к деталям.</p></div><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></section>",
  "css": ".hero { position: relative; overflow: hidden; background: linear-gradient(145deg, #f0f7ff 0%, #e8f0fe 100%); } .hero .hero__inner { position: relative; z-index: 2; } .hero .hero__eyebrow { color: #2563eb; display: inline-flex; align-items: center; gap: 8px; } .hero .hero__eyebrow-icon { display: inline-block; color: #3b82f6; animation: hero-spin 6s linear infinite; } .hero .hero__title { color: #1e3a8a; } .hero .hero__subtitle { color: #2563eb; } .hero .hero__lead { color: #475569; } .hero .hero__particles { position: absolute; inset: 0; pointer-events: none; z-index: 1; } .hero .hero__particle { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: #60a5fa; opacity: 0.7; box-shadow: 0 0 12px rgba(59, 130, 246, 0.5); animation: hero-float 6s ease-in-out infinite; } .hero .hero__particle--1 { top: 20%; left: 10%; animation-delay: 0s; background: #3b82f6; } .hero .hero__particle--2 { top: 70%; left: 18%; width: 6px; height: 6px; animation-delay: 0.8s; background: #60a5fa; } .hero .hero__particle--3 { top: 30%; left: 85%; width: 10px; height: 10px; animation-delay: 1.6s; background: #2563eb; } .hero .hero__particle--4 { top: 80%; left: 78%; width: 7px; height: 7px; animation-delay: 2.4s; background: #93c5fd; } .hero .hero__particle--5 { top: 55%; left: 5%; width: 5px; height: 5px; animation-delay: 3.2s; background: #3b82f6; } .hero .hero__particle--6 { top: 15%; left: 60%; width: 9px; height: 9px; animation-delay: 4s; background: #60a5fa; } @keyframes hero-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes hero-float { 0%, 100% { transform: translateY(0) translateX(0); opacity: 0.5; } 50% { transform: translateY(-24px) translateX(12px); opacity: 1; } }"
}