.section-tag { font-size: 11.5px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--purple-2); display: inline-block; margin-bottom: 14px; }
.page-hero { padding: 52px 0 20px; text-align: center; }
.page-hero h1 { font-size: clamp(32px, 4.4vw, 52px); font-weight: 800; line-height: 1.1; letter-spacing: -0.03em; }
.page-hero h1 .grad { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.page-hero .lead { color: var(--text-2); font-size: 16px; margin: 18px auto 0; max-width: 620px; line-height: 1.65; }
.page-hero .cta-row { display: flex; gap: 14px; margin-top: 26px; justify-content: center; flex-wrap: wrap; }

.svc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.service-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px 22px; transition: border-color .2s ease, transform .2s ease, background .2s ease; position: relative; overflow: hidden; }
.service-card:hover { border-color: var(--border-glow); transform: translateY(-4px); background: var(--grad-card); }
.service-card .ic { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: rgba(139,92,246,0.1); border: 1px solid rgba(139,92,246,0.22); color: var(--purple-2); margin-bottom: 18px; }
.service-card .ic svg { width: 26px; height: 26px; }
.service-card h3 { font-size: 16.5px; font-weight: 700; margin-bottom: 9px; line-height: 1.3; }
.service-card p { font-size: 13px; color: var(--text-3); line-height: 1.6; }
.service-card .more { font-size: 12.5px; color: var(--purple-2); font-weight: 600; display: inline-flex; gap: 5px; align-items: center; margin-top: 16px; }
.service-card .more svg { width: 13px; height: 13px; transition: transform .18s ease; }
.service-card:hover .more svg { transform: translateX(3px); }

/* Process */
.proc2 { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; position: relative; }
.proc2-line { position: absolute; top: 26px; left: 8%; right: 8%; height: 1px; background: linear-gradient(90deg, transparent, rgba(139,92,246,0.5), rgba(79,123,255,0.5), transparent); }
.proc2-step { text-align: center; position: relative; }
.proc2-step .nd { width: 54px; height: 54px; margin: 0 auto 14px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, rgba(139,92,246,0.2), rgba(12,12,20,0.95)); border: 1px solid rgba(139,92,246,0.4); display: grid; place-items: center; color: var(--purple-2); font-weight: 800; font-size: 15px; }
.proc2-step h4 { font-size: 13px; font-weight: 700; margin-bottom: 4px; }
.proc2-step p { font-size: 11px; color: var(--text-3); line-height: 1.45; }

/* Why band */
.why-band { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.why-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; }
.why-card .ic { width: 44px; height: 44px; border-radius: 12px; background: rgba(139,92,246,0.1); border: 1px solid rgba(139,92,246,0.2); color: var(--purple-2); display: grid; place-items: center; margin-bottom: 14px; }
.why-card .ic svg { width: 22px; height: 22px; }
.why-card h4 { font-size: 15px; font-weight: 700; margin-bottom: 7px; }
.why-card p { font-size: 12.5px; color: var(--text-3); line-height: 1.55; }

@media (max-width: 1080px) { .svc-grid, .why-band { grid-template-columns: repeat(2, 1fr); } .proc2 { grid-template-columns: repeat(3, 1fr); gap: 24px 12px; } .proc2-line { display: none; } }
@media (max-width: 560px) { .svc-grid, .why-band { grid-template-columns: 1fr; } .proc2 { grid-template-columns: 1fr 1fr; } }