.hero-box { padding: 6rem 1rem 7rem; text-align: center; max-width: 900px; margin-inline: auto; }
.hero-title { color: var(--color-text); font-size: 3rem; font-weight: 700; margin-bottom: 0.75rem; line-height: 1.1; }
.hero-sub { color: var(--color-accent); font-size: 1.6rem; font-weight: 500; margin-bottom: 1.25rem; }
.hero-desc { color: var(--color-text-sub); font-size: 1.15rem; margin-bottom: 2rem; margin-inline: auto; max-width: 650px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-top: 2.5rem; }
.info-section { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 2.5rem; margin: auto; max-width: 1200px; padding: 4rem 1rem; }
.info-box { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 1rem; box-shadow: var(--shadow-light); padding: 1.8rem; transition: all var(--transition-speed); }
.info-box:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgb(0 0 0/.08); }
body.dark .info-box:hover { box-shadow: 0 8px 20px rgb(255 255 255/.08); }
.info-header { align-items: center; column-gap: .8rem; display: flex; margin-bottom: 1.2rem; }
.info-icon { color: var(--color-accent); font-size: 1.6rem; line-height: 1; }
.info-title { color: var(--color-text); font-size: 1.15rem; font-weight: 700; line-height: 1.4; margin: 0; }
.info-desc { color: var(--color-text-sub); font-size: .95rem; line-height: 1.7; margin-bottom: .9rem; }
@media (max-width: 768px) { .hero-box { padding: 4rem 1rem; } .hero-title { font-size: 2.2rem; } .hero-sub { font-size: 1.3rem; } .hero-desc { font-size: 1rem; } .hero-actions { flex-direction: column; } .info-section { grid-template-columns: 1fr; gap: 1.5rem; padding: 2rem 1rem; } .info-desc { 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; } .info-box { min-height: 200px; } }