@import url("https://fonts.googleapis.com/css2?family=Lora:wght@400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Lora:wght@400;500;600;700&display=swap");
.cards-container { display: grid; grid-template-columns: 1fr; gap: 28px; max-width: 1200px; margin: 0 auto; padding: 40px 24px; }

@media screen and (min-width: 576px) { .cards-container { grid-template-columns: repeat(2, 1fr); } }

@media screen and (min-width: 768px) { .cards-container { grid-template-columns: repeat(3, 1fr); gap: 32px; } }

.card-item { display: flex; position: relative; flex-direction: column; color: #1a1a2e; background: linear-gradient(145deg, #f0f0f3, #f6f6f8); text-decoration: none; border-radius: 20px; box-shadow: 6px 6px 16px rgba(0, 0, 0, 0.1), -6px -6px 16px rgba(255, 255, 255, 0.7), inset 0 0 0 1px rgba(255, 255, 255, 0.4); overflow: hidden; transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1); }

.card-item:hover { box-shadow: 0 24px 48px rgba(0, 0, 0, 0.15), 0 12px 24px rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.5); transform: translateY(-10px) scale(1.02); }

.card-item:hover .card-image-wrapper img { transform: scale(1.1); }

.card-item:hover .card-image-overlay { opacity: 1; }

.card-item:hover .card-shine { opacity: 1; transform: translateX(100%); }

.card-item:hover .card-item-title { background-size: 100% 2px; }

.card-shine { pointer-events: none; position: absolute; z-index: 3; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(120deg, transparent 20%, rgba(255, 255, 255, 0.06) 40%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.06) 60%, transparent 80%); opacity: 0; transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease; }

.card-image-wrapper { aspect-ratio: 16 / 10; position: relative; overflow: hidden; }

.card-image-wrapper img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }

.card-image-overlay { pointer-events: none; position: absolute; left: 0; bottom: 0; width: 100%; height: 50%; background: linear-gradient(to top, rgba(0, 0, 0, 0.35), transparent); opacity: 0; transition: opacity 0.4s ease; }

.card-content { position: relative; z-index: 1; flex: 1; padding: 20px 24px 28px; }

.card-item-title { margin: 0 0 10px; padding-bottom: 2px; background-image: linear-gradient(90deg, #5bddaa, #3bbf65); background-position: left bottom; background-repeat: no-repeat; background-size: 0% 2px; letter-spacing: 0.02em; line-height: 1.4; font-size: 1.15rem; font-weight: 700; transition: background-size 0.4s cubic-bezier(0.22, 1, 0.36, 1); }

.card-item-text { margin: 0; color: #666; line-height: 1.75; font-size: 0.85rem; }

.page-hero-count { display: inline-flex; align-items: baseline; gap: 8px; margin-top: 1.2rem; padding: 6px 20px; border: 1px solid rgba(59, 191, 101, 0.25); border-radius: 100px; }

.page-hero-count-number { color: #3bbf65; letter-spacing: 0.05em; font-family: "Lora", serif; font-size: 1.6rem; font-weight: 700; }

.page-hero-count-label { color: #888; text-transform: uppercase; letter-spacing: 0.15em; font-family: "Lora", serif; font-size: 0.7rem; font-weight: 500; }

@media screen and (max-width: 768px) { .page-hero-break-pc { display: none; } }

.cards-container { padding-top: 16px; }

.card-content { padding-bottom: 8px; }

.card-action-footer { display: flex; align-items: center; gap: 6px; padding: 12px 24px 20px; }

.card-action-text { color: #3bbf65; letter-spacing: 0.04em; font-size: 0.8rem; font-weight: 500; }

.card-action-arrow { color: #3bbf65; font-size: 1rem; transition: transform 0.3s ease; }

.card-item:hover .card-action-arrow { transform: translateX(5px); }