.force-card {
    background-color: #2d2d2d !important;
    border: 2px solid #ced4da !important;
    border-radius: 12px !important;
    padding: 30px !important;
    cursor: pointer !important;
    transition: transform 0.4s ease-in-out, box-shadow 0.4s ease-in-out !important;
    will-change: transform !important;
    color: #ffffff !important;

    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    align-items: center !important;
    height: 100% !important;
}

/* Фоновый узор для Smart Home (точки и узлы) */
.smart-home-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: radial-gradient(#ffffff 1px, transparent 1px);
    background-size: 20px 20px;
    opacity: 0.3; /* Еле заметный стильный фон */
    pointer-events: none;
}

/* Фоновый узор для Production (технические линии / чертеж) */
.production-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: linear-gradient(to right, #ffffff 1px, transparent 1px),
    linear-gradient(to bottom, #ffffff 1px, transparent 1px);
    background-size: 25px 25px;
    opacity: 0.2; /* Еле заметный индустриальный фон */
    pointer-events: none;
}


.force-card:hover {
    transform: translateY(-10px) scale(1.03) !important;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2) !important;
    z-index: 999 !important;
}

.anim-icon path,
.anim-icon circle {
    transform-origin: center;
    transform-box: view-box;
}

/* Ключевые кадры для лампочки */
@keyframes ray1Anim { 0% { opacity: 0; transform: translate(-20px, -15px) scale(0.2); } 100% { opacity: 1; transform: translate(0, 0) scale(1); } }
@keyframes ray2Anim { 0% { opacity: 0; transform: translate(0px, -25px) scale(0.2); } 100% { opacity: 1; transform: translate(0, 0) scale(1); } }
@keyframes ray3Anim { 0% { opacity: 0; transform: translate(20px, -15px) scale(0.2); } 100% { opacity: 1; transform: translate(0, 0) scale(1); } }
@keyframes bodyAnim { 0% { opacity: 0; transform: translate(0px, 20px) scale(0.2); } 100% { opacity: 1; transform: translate(0, 0) scale(1); } }
@keyframes baseAnim { 0% { opacity: 0; transform: translate(0px, 35px) scale(0.2); } 100% { opacity: 1; transform: translate(0, 0) scale(1); } }

/* Применение анимации лампочки (задержка 2с + параметр both) */
.lightbulb-icon .ray1 { animation: ray1Anim 0.6s ease-out 2s both; }
.lightbulb-icon .ray2 { animation: ray2Anim 0.6s ease-out 2.2s both; }
.lightbulb-icon .ray3 { animation: ray3Anim 0.6s ease-out 2.4s both; }
.lightbulb-icon .body  { animation: bodyAnim 0.6s ease-out 2.6s both; }
.lightbulb-icon .base  { animation: baseAnim 0.6s ease-out 2.9s both; }

/* Ключевые кадры для шестеренки */
@keyframes centerAnim { 0% { opacity: 0; transform: translate(0px, -15px) scale(0.2); } 100% { opacity: 1; transform: translate(0, 0) scale(1); } }
@keyframes outerAnim  { 0% { opacity: 0; transform: translate(0px, 15px) scale(0.2); } 100% { opacity: 1; transform: translate(0, 0) scale(1); } }
@keyframes teethAnim  { 0% { opacity: 0; transform: translate(-15px, 0px) scale(0.2); } 100% { opacity: 1; transform: translate(0, 0) scale(1); } }

/* Применение анимации шестеренки (задержка 2с + параметр both) */
.gear-icon .center { animation: centerAnim 0.5s ease-out 2s both; }
.gear-icon .outer  { animation: outerAnim 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) 2.3s both; }
.gear-icon .teeth  { animation: teethAnim 0.6s ease-out 2.6s both; }