/* Homepage AI card. Shared by desktop and mobile templates. */
.website_solution_view .section_li.ai-solution-card,
.mobile_website_solution_item.ai-solution-card {
    position: relative; display: flex; flex-direction: column; box-sizing: border-box; padding: 24px;
    border: 1px solid #d00000; background: linear-gradient(145deg,#fff 35%,#f6faff);
    color: #152342; text-align: left; overflow: hidden;
}
.ai-solution-card * { box-sizing: border-box; }
.ai-card-badge { position: absolute; left: 0; top: 0; z-index: 2; padding: 10px 32px 10px 24px; color: #fff; background: #c50000; font-size: 15px; line-height: 22px; clip-path: polygon(0 0,100% 0,85% 100%,0 100%); }
.ai-card-hero { position: relative; min-height: 224px; display: flex; align-items: center; }
.ai-card-intro { position: relative; z-index: 1; width: 56%; padding-top: 18px; }
.home_main .ai-card-title { margin: 0 0 12px; color: #152342; font-size: 26px; font-weight: 400; line-height: 1.4; }
.ai-card-title span { color: #c50000; }
.ai-card-summary { margin: 0; max-width: none; color: #607396; font-size: 14px; line-height: 1.8; }
.ai-card-visual { position: absolute; width: 248px; height: 224px; right: -7px; top: 0; transform: scale(.9); transform-origin: center right; }
.ai-card-robot { position: absolute; width: 218px; height: 218px; left: 0; bottom: 0; background: url('/images/newpc/index/ai-card-robot-en-20261010.png') 0 0 / 200% 200% no-repeat; }
.ai-solution-card .ai-card-thought { display: block; position: absolute; width: 62px; height: 62px; right: -1px; top: 9px; opacity: 0; transform: translateY(8px) scale(.65); filter: drop-shadow(0 5px 9px rgba(25,112,255,.13)); }
.ai-card-features { display: grid; grid-template-rows: repeat(3,auto); grid-auto-flow: column; grid-template-columns: 1fr 1fr; column-gap: 25px; row-gap: 18px; margin: 12px 0 22px; padding: 0; list-style: none; }
.ai-card-features li { display: grid; grid-template-columns: 24px 1fr; column-gap: 10px; row-gap: 4px; margin: 0; padding: 0; min-width: 0; }
.ai-card-features li > div { display: contents; }
.ai-card-check { position: relative; display: block; width: 22px; height: 22px; margin-top: 2px; border-radius: 50%; background: #c00; }
.ai-card-check:after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; transform: translate(-50%, -50%); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8l4 4 8-8' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.ai-card-features h4 { margin: 0; padding: 0; font-size: 16px; font-weight: 400; color: #152342; line-height: 26px; }
.ai-card-features p { grid-column: 1 / -1; margin: 0; font-size: 13px; color: #607396; line-height: 21px; overflow-wrap: break-word; }
.ai-card-actions { display: flex; gap: 14px; padding-top: 16px; margin-top: auto; border-top: 1px solid #d5e1f3; }
.website_solution_view .ai-solution-card .ai-card-action,
.mobile_website_solution_item.ai-solution-card .ai-card-action { display: flex; justify-content: center; align-items: center; flex: 1 1 0; min-width: 0; height: 50px; min-height: 50px; padding: 0 8px; font-family: inherit; font-size: 15px; line-height: 24px; cursor: pointer; text-align: center; text-decoration: none; border: 1px solid #333; color: #333; background: #fff; transition: background .2s,box-shadow .2s; }
.website_solution_view .ai-solution-card .ai-card-primary,
.mobile_website_solution_item.ai-solution-card .ai-card-primary { color: #fff; background: #c50000; border-color: #c50000; }
.ai-card-action:hover { box-shadow: 0 4px 14px rgba(20,60,120,.14); }
.ai-card-action:focus-visible { outline: 3px solid #c50000; outline-offset: 3px; }
.ai-solution-card.is-playing .ai-card-robot { animation: ai-card-wave 8s steps(1,end) infinite; }
.ai-solution-card.is-playing .ai-card-thought { animation: ai-card-think 8s ease-in-out infinite; }
@keyframes ai-card-wave {
    0%,6%,30%,95%,100% { background-position: 0 0; }
    10%,20% { background-position: 100% 0; }
    15%,25% { background-position: 0 100%; }
    38%,90% { background-position: 100% 100%; }
}
@keyframes ai-card-think {
    0%,36%,95%,100% { opacity: 0; transform: translateY(8px) scale(.65); }
    44%,85% { opacity: 1; transform: translateY(0) scale(1); }
    89% { opacity: 1; transform: translateY(-3px) scale(1); }
}
/* Stack the detailed AI card and existing traditional card on narrow screens. */
.mobile_website_solution_list .mobile_website_solution_item { width: calc(100% - 10px); }
.mobile_website_solution_item.ai-solution-card { padding: 18px 16px; margin-bottom: 18px; }
.mobile_website_solution_item.ai-solution-card .ai-card-hero { min-height: 186px; }
.mobile_website_solution_item.ai-solution-card .ai-card-intro { width: 49%; padding-top: 24px; }
.mobile_website_solution_item.ai-solution-card .ai-card-title { font-size: 23px; }
.mobile_website_solution_item.ai-solution-card .ai-card-summary { font-size: 12px; line-height: 1.8; }
.mobile_website_solution_item.ai-solution-card .ai-card-visual { width: 170px; height: 172px; right: -4px; top: 12px; }
.mobile_website_solution_item.ai-solution-card .ai-card-robot { width: 158px; height: 158px; }
.mobile_website_solution_item.ai-solution-card .ai-card-thought { width: 43px; height: 43px; right: -2px; top: 2px; }
.mobile_website_solution_item.ai-solution-card .ai-card-features { column-gap: 12px; row-gap: 17px; margin-top: 6px; }
.mobile_website_solution_item.ai-solution-card .ai-card-features li { grid-template-columns: 20px 1fr; column-gap: 5px; }
.mobile_website_solution_item.ai-solution-card .ai-card-check { width: 20px; height: 20px; }
.mobile_website_solution_item.ai-solution-card .ai-card-features h4 { font-size: 13px; line-height: 24px; }
.mobile_website_solution_item.ai-solution-card .ai-card-features p { font-size: 12px; line-height: 19px; }
.mobile_website_solution_list .mobile_website_solution_item:not(.ai-solution-card) > a { display: flex; align-items: center; }
.mobile_website_solution_list .mobile_website_solution_img { width: 48%; height: 160px; flex-shrink: 0; }
.mobile_website_solution_list .mobile_website_solution_info { flex: 1; }
@media (max-width: 350px) {
    .mobile_website_solution_item.ai-solution-card { padding-left: 12px; padding-right: 12px; }
    .mobile_website_solution_item.ai-solution-card .ai-card-visual { width: 146px; }
    .mobile_website_solution_item.ai-solution-card .ai-card-robot { width: 138px; height: 138px; bottom: 12px; }
    .mobile_website_solution_item.ai-solution-card .ai-card-thought { width: 37px; height: 37px; top: 12px; }
    .mobile_website_solution_item.ai-solution-card .ai-card-features { column-gap: 8px; }
    .mobile_website_solution_item.ai-solution-card .ai-card-features h4 { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
    .ai-solution-card.is-playing .ai-card-robot { animation: none; background-position: 100% 100%; }
    .ai-solution-card.is-playing .ai-card-thought { animation: none; opacity: 1; transform: none; }
    .website_solution_view .section_li.ai-solution-card:hover { transform: none; }
}

/* Traditional website card uses the same feature grid and action sizing. */
.website_solution_view .section_li.traditional-solution-card,
.mobile_website_solution_item.traditional-solution-card { border: 0; background: #fff; }
.traditional-solution-card .ai-card-intro { width: 46%; }
.traditional-card-image { position: absolute; right: -6px; top: 7px; display: block; width: 280px; max-width: 53%; height: 210px; object-fit: contain; }
.mobile_website_solution_item.traditional-solution-card .ai-card-intro { width: 46%; }
.mobile_website_solution_item.traditional-solution-card .traditional-card-image { right: -4px; top: 18px; width: 178px; height: 152px; }

.mobile_website_solution_item.ai-solution-card .ai-card-action { height: 40px; min-height: 40px; font-size: 14px; line-height: 22px; }