{
  "html": "<section class='projects'><div class='projects__inner'><h2 class='projects__title'>Популярные модели<span class='projects__title-wave' aria-hidden='true'><svg viewBox='0 0 200 12' preserveAspectRatio='none'><path d='M0 6 Q 25 0 50 6 T 100 6 T 150 6 T 200 6' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round'/></svg></span></h2><div class='projects__grid'><a href='#' class='projects__card'><span class='projects__accent' aria-hidden='true'></span><div class='projects__icon'><svg width='28' height='28' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='3' width='20' height='14' rx='2'/><line x1='8' y1='21' x2='16' y2='21'/><line x1='12' y1='17' x2='12' y2='21'/></svg></div><h3 class='projects__card-title'>Aero Office Mini</h3><p class='projects__card-text'>Компактный системный блок для офиса: тихий, экономичный, с быстрым SSD и поддержкой двух мониторов.</p></a><a href='#' class='projects__card'><span class='projects__accent' aria-hidden='true'></span><div class='projects__icon'><svg width='28' height='28' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M12 2L2 7l10 5 10-5-10-5z'/><path d='M2 17l10 5 10-5'/><path d='M2 12l10 5 10-5'/></svg></div><h3 class='projects__card-title'>Nova Studio Pro</h3><p class='projects__card-text'>Станция для дизайна и монтажа: мощный процессор, дискретная графика и продуманное охлаждение.</p></a><a href='#' class='projects__card'><span class='projects__accent' aria-hidden='true'></span><div class='projects__icon'><svg width='28' height='28' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><polygon points='13 2 3 14 12 14 11 22 21 10 12 10 13 2'/></svg></div><h3 class='projects__card-title'>Pulse Game X</h3><p class='projects__card-text'>Игровая сборка с высокой частотой кадров, подсветкой и запасом мощности для апгрейда.</p></a><a href='#' class='projects__card'><span class='projects__accent' aria-hidden='true'></span><div class='projects__icon'><svg width='28' height='28' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='12' rx='2'/><path d='M7 20h10'/><path d='M9 16v4'/><path d='M15 16v4'/></svg></div><h3 class='projects__card-title'>Eco Home 24</h3><p class='projects__card-text'>Домашний компьютер для учёбы и развлечений: бесшумный корпус и энергоэффективные компоненты.</p></a></div></div></section>",
  "css": ".projects .projects__title { position: relative; display: inline-block; left: 50%; transform: translateX(-50%); } .projects .projects__title-wave { position: absolute; left: 0; right: 0; bottom: -14px; height: 12px; color: #34d399; opacity: 0.9; } .projects .projects__title-wave svg { display: block; width: 100%; height: 100%; } .projects .projects__title-wave path { stroke-dasharray: 220; stroke-dashoffset: 220; animation: projects-wave-draw 2.4s ease-in-out infinite; } @keyframes projects-wave-draw { 0% { stroke-dashoffset: 220; } 45% { stroke-dashoffset: 0; } 55% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -220; } } .projects .projects__grid { perspective: 1200px; } .projects .projects__card { position: relative; overflow: hidden; transform-style: preserve-3d; transition: transform 0.3s ease-out, box-shadow 0.3s ease-out, border-color 0.3s ease-out; } .projects .projects__card:hover { transform: translateY(-6px) rotateX(6deg) rotateY(-6deg) scale(1.02); box-shadow: 0 22px 48px rgba(16, 185, 129, 0.18); border-color: #a7f3d0; } .projects .projects__accent { position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: linear-gradient(90deg, #34d399, #6ee7b7, #a7f3d0); transform: skewX(-20deg) scaleX(0); transform-origin: left; transition: transform 0.35s ease-out; } .projects .projects__card:hover .projects__accent { transform: skewX(-20deg) scaleX(1); } .projects .projects__icon { transition: color 0.3s ease, background 0.3s ease, transform 0.3s ease-out; } .projects .projects__card:hover .projects__icon { color: #059669; background: #d1fae5; transform: translateZ(20px) rotate(-6deg); } .projects .projects__card-title { transition: color 0.3s ease; } .projects .projects__card:hover .projects__card-title { color: #047857; }"
}