.homeBox { padding: 6rem 1rem 7rem; text-align: center; max-width: 900px; margin-inline: auto; }
.homeTitle { color: var(--colorText); font-size: 3rem; font-weight: 700; margin-bottom: 0.75rem; line-height: 1.1; }
.homeSub { color: var(--colorPrimary); font-size: 1.6rem; font-weight: 500; margin-bottom: 1.25rem; }
.homeDesc { color: var(--colorTextSub); font-size: 1.15rem; margin-bottom: 2rem; margin-inline: auto; max-width: 650px; }
.homeActions { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-top: 2.5rem; }
.infoSection { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 2.5rem; margin: auto; max-width: var(--maxWidth); padding: 4rem 1rem; }
.infoBox { background: var(--colorCardBg); border: 1px solid var(--colorBorder); border-radius: 1rem; box-shadow: var(--shadowLight); padding: 1.8rem; transition: all var(--transitionSpeed); position: relative; overflow: hidden; }
.infoBoxShadow:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(var(--colorPrimaryRgb), 0.15); }
body.dark .infoBoxShadow:hover { box-shadow: 0 8px 20px rgba(var(--colorPrimaryRgb), 0.25); }
.infoBoxWavy { border: none; box-shadow: 0 10px 30px rgba(var(--colorPrimaryRgb), 0.15); background: linear-gradient(145deg, var(--colorSurface), var(--colorCardBg)); }
.infoBoxWavy:before { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 10px; background: radial-gradient(circle at 50% 100%, transparent 10px, var(--colorCardBg) 10px); background-size: 20px 20px; background-repeat: repeat-x; }
body.dark .infoBoxWavy { box-shadow: 0 10px 30px rgba(255, 255, 255, 0.05); }
.infoHeader { align-items: center; column-gap: .8rem; display: flex; margin-bottom: 1.2rem; }
.infoIcon { color: var(--colorPrimary); font-size: 1.6rem; line-height: 1; }
.infoTitle { color: var(--colorText); font-size: 1.15rem; font-weight: 700; line-height: 1.4; margin: 0; }
.infoDesc { color: var(--colorTextSub); font-size: .95rem; line-height: 1.7; margin-bottom: .9rem; }
@media (max-width: 768px) {
.homeBox { padding: 4rem 1rem; }
.homeTitle { font-size: 2.2rem; }
.homeSub { font-size: 1.3rem; }
.homeDesc { font-size: 1rem; }
.homeActions { flex-direction: column; }
.infoSection { grid-template-columns: 1fr; gap: 1.5rem; padding: 2rem 1rem; }
.infoDesc { font-size: 0.95rem; line-height: 1.7; margin-bottom: .9rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }
.infoBox { min-height: 200px; }
}