/* =====================================================================
   TechAzhon · Service pages (Views/Shared/ServicePage.cshtml)
   Builds on premium-home.css; everything is scoped under .pxh.svc.
   ===================================================================== */

.pxh.svc .svc-tight { padding: 80px 0; }
.pxh.svc .svc-hero { padding: 72px 0 80px; }
.pxh.svc .svc-hero .pxh-hero-title { font-size: clamp(36px, 4.4vw, 60px); line-height: 1.08; }
.pxh.svc .svc-hero .pxh-hero-lede { margin-top: 26px; }
.pxh.svc .svc-hero .pxh-hero-ctas { margin-top: 32px; }
.pxh.svc .svc-hero .pxh-hero-proof { margin-top: 30px; }
.pxh.svc .pxh-btn-ghost i { margin-right: 2px; }

/* Italic gradient text: give the last glyph room so background-clip doesn't cut it ("rea|l") */
.pxh.svc .pxh-iris { padding-right: .14em; margin-right: -.04em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* Breadcrumb */
.pxh.svc .svc-crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--px-muted); margin-bottom: 22px; }
.pxh.svc .svc-crumbs a { color: var(--px-muted); border-bottom: 1px solid transparent; transition: color .2s, border-color .2s; }
.pxh.svc .svc-crumbs a:hover { color: var(--px-ink); border-color: var(--px-line-2); }
.pxh.svc .svc-crumbs [aria-current] { color: var(--px-ink-2); }

/* Hero card */
.pxh.svc .svc-card { position: relative; }
.pxh.svc .svc-card-glow { position: absolute; inset: 8% -4% -6% 6%; border-radius: 40px; filter: blur(48px); opacity: .45; pointer-events: none;
    background: radial-gradient(60% 60% at 30% 30%, rgba(139,92,246,.45), transparent 70%), radial-gradient(60% 60% at 80% 70%, rgba(34,211,238,.4), transparent 70%); }
.pxh.svc .svc-card-inner { position: relative; padding: 34px 34px 28px; border-radius: 26px; background: var(--px-panel); border: 1px solid var(--px-line); box-shadow: var(--px-shadow-lg); }
.pxh.svc .svc-card-list { margin: 18px 0 28px; }
.pxh.svc .svc-card-list li { font-size: 15.5px; color: var(--px-ink); }
.pxh.svc .svc-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding-top: 22px; border-top: 1px solid var(--px-line); }
.pxh.svc .svc-stats div { padding: 12px 12px 10px; border-radius: 14px; background: var(--px-panel-2); }
.pxh.svc .svc-stats strong { display: block; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15;
    background: var(--px-iris); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.pxh.svc .svc-stats span { display: block; font-size: 12px; color: var(--px-muted); line-height: 1.35; margin-top: 4px; }

/* Offering icons use Bootstrap Icons instead of inline SVG */
.pxh.svc .pxh-voice-ico i { font-size: 21px; line-height: 1; }

/* Use cases: one line of text instead of a bullet list */
.pxh.svc .svc-usecase-text { font-size: 14.5px; color: var(--px-muted); line-height: 1.6; }

/* Why TechAzhon strip under the process steps */
.pxh.svc .svc-reasons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 72px; }
.pxh.svc .svc-reasons > div { padding: 24px 22px; border-radius: 18px; background: var(--px-panel); border: 1px solid var(--px-line); }
.pxh.svc .svc-reasons i { display: inline-block; font-size: 22px; margin-bottom: 14px;
    background: var(--px-iris); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.pxh.svc .svc-reasons strong { display: block; font-size: 15.5px; margin-bottom: 6px; color: var(--px-ink); }
.pxh.svc .svc-reasons span { display: block; font-size: 13.5px; color: var(--px-muted); line-height: 1.55; }

/* Tech + FAQ */
.pxh.svc .svc-faq-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 64px; align-items: start; }
.pxh.svc .svc-h2-sm { font-size: clamp(28px, 2.6vw, 38px); margin: 6px 0 26px; }
.pxh.svc .svc-tech { display: flex; flex-wrap: wrap; gap: 10px; }
.pxh.svc .svc-tech li { padding: 8px 14px; border-radius: 999px; font-size: 13.5px; font-weight: 500; color: var(--px-ink-2); background: var(--px-panel); border: 1px solid var(--px-line); }
.pxh.svc .svc-faq { max-width: none; }

/* Dark mode */
.pxh.svc[data-theme="dark"] .svc-card-inner { box-shadow: none; }
.pxh.svc[data-theme="dark"] .svc-card-glow { opacity: .3; }

/* Responsive */
@media (max-width: 1199px) {
    .pxh.svc .svc-reasons { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 991px) {
    .pxh.svc .svc-faq-grid { grid-template-columns: 1fr; gap: 56px; }
    .pxh.svc .svc-hero { padding: 48px 0 64px; }
}
@media (max-width: 640px) {
    .pxh.svc .svc-tight { padding: 60px 0; }
    .pxh.svc .svc-card-inner { padding: 26px 20px 22px; }
    .pxh.svc .svc-stats { grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
    .pxh.svc .svc-stats strong { font-size: 18px; }
    .pxh.svc .svc-reasons { grid-template-columns: 1fr; margin-top: 52px; }
    .pxh.svc .pxh-usecases { grid-template-columns: 1fr; }
}