.svc-hub-hero {
padding: 140px 0 80px; position: relative; overflow: hidden;
background: linear-gradient(180deg, var(--bg) 0%, var(--bg-secondary) 100%);
}
.svc-hub-hero-bg {
position: absolute; inset: 0;
background:
radial-gradient(ellipse 60% 55% at 0% 0%, rgba(6,37,156,.07), transparent),
radial-gradient(ellipse 50% 50% at 100% 100%, rgba(255,145,76,.05), transparent);
}
.svc-hub-hero-inner { position: relative; z-index: 1; text-align: center; max-width: 780px; margin: 0 auto; }
.svc-hub-title { font-family: var(--font-display); font-size: clamp(2.5rem,5vw,4rem); font-weight: 800; color: var(--text); line-height: 1.1; margin-bottom: 1rem; }
.svc-hub-desc { font-size: 1.05rem; color: var(--text-muted); line-height: 1.8; margin-bottom: 2.5rem; max-width: 600px; margin-left: auto; margin-right: auto; }
.svc-stats-strip {
display: flex; justify-content: center; gap: 0; flex-wrap: wrap;
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--radius-2xl); overflow: hidden; margin-bottom: 2.5rem;
box-shadow: var(--shadow-md);
}
.svc-stat { padding: 1.25rem 2rem; text-align: center; border-right: 1px solid var(--border); flex: 1; min-width: 120px; }
.svc-stat:last-child { border-right: none; }
.svc-stat-num { font-family: var(--font-display); font-size: 1.5rem; font-weight: 800; background: linear-gradient(135deg,var(--primary),var(--accent)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.svc-stat-label { font-size: .72rem; color: var(--text-muted); font-weight: 600; margin-top: .2rem; }
.svc-hub-grid {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: 1.5rem; margin-top: 3rem;
}
.svc-hub-card {
background: var(--surface); border: 1.5px solid var(--border);
border-radius: var(--radius-2xl); overflow: hidden;
text-decoration: none; color: inherit;
transition: all .35s var(--ease-spring);
display: flex; flex-direction: column;
position: relative;
}
.svc-hub-card::before {
content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
background: var(--card-gradient, linear-gradient(90deg,var(--primary),var(--accent)));
transform: scaleX(0); transform-origin: left; transition: transform .35s;
}
.svc-hub-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-xl); border-color: transparent; }
.svc-hub-card:hover::before { transform: scaleX(1); }
.svc-hub-card-visual {
height: 120px; display: flex; align-items: center; justify-content: center;
position: relative; overflow: hidden;
}
.svc-hub-card-body { padding: 1.5rem; flex: 1; display: flex; flex-direction: column; }
.svc-hub-card-icon {
width: 44px; height: 44px; border-radius: var(--radius-md);
display: flex; align-items: center; justify-content: center;
margin-bottom: 1rem; flex-shrink: 0;
}
.svc-hub-card-title { font-family: var(--font-display); font-size: 1rem; font-weight: 700; color: var(--text); margin-bottom: .5rem; }
.svc-hub-card-desc { font-size: .82rem; color: var(--text-muted); line-height: 1.65; flex: 1; margin-bottom: 1rem; }
.svc-hub-card-tags { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: 1rem; }
.svc-hub-tag { font-size: .68rem; font-weight: 700; padding: .2rem .55rem; border-radius: var(--radius-full); }
.svc-hub-card-link {
display: flex; align-items: center; gap: .4rem;
font-size: .8rem; font-weight: 700; color: var(--primary); margin-top: auto;
transition: gap .2s;
}
[data-theme="dark"] .svc-hub-card-link { color: var(--accent); }
.svc-hub-card:hover .svc-hub-card-link { gap: .65rem; }
@media (max-width: 1100px) { .svc-hub-grid { grid-template-columns: repeat(3,1fr); } }
@media (max-width: 780px)  { .svc-hub-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 500px)  { .svc-hub-grid { grid-template-columns: 1fr; } }
.how-strip { background: var(--bg-secondary); }
.how-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.5rem; margin-top: 2.5rem; }
.how-item { text-align: center; }
.how-num {
width: 44px; height: 44px; border-radius: 50%;
background: linear-gradient(135deg,var(--primary),var(--accent));
color: white; font-family: var(--font-display); font-size: .85rem; font-weight: 800;
display: flex; align-items: center; justify-content: center; margin: 0 auto .875rem;
}
.how-title { font-size: .9rem; font-weight: 700; color: var(--text); margin-bottom: .35rem; }
.how-desc { font-size: .8rem; color: var(--text-muted); line-height: 1.6; }
@media (max-width: 700px) { .how-grid { grid-template-columns: repeat(2,1fr); } }
.industries-mini { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 2rem; }
.industry-chip {
display: flex; align-items: center; gap: .4rem;
padding: .45rem 1rem; border-radius: var(--radius-full);
background: var(--surface); border: 1px solid var(--border);
font-size: .8rem; font-weight: 600; color: var(--text-muted);
transition: all .2s;
}
.industry-chip:hover { border-color: var(--primary); color: var(--primary); background: rgba(6,37,156,.04); }
[data-theme="dark"] .industry-chip:hover { border-color: var(--accent); color: var(--accent); }